V2 modal (#255)

* feat: initial modal conversion

* feat: iterate on tests

* feat: docs example

* fix: browser mode syntax

* refactor: improve naming remove cruft

* feat: correct backdrop click with dragging behavior

* feat: backdrop handling

* pointer events

* feat: add pkg pr new for iteration

* update pkg manager field

* feat: improved pointer handling

* fix: overflow handling

* fix: handle nested structures

* fix: correctly handling nested state

* test: almost all tests passing

* vitest compatible wait

* feat: next tick primitive

* fix: last test

* feat: description and title

Author: thejackshelton-kunaico

.github/workflows/pkg-pr-new.yml

@@ -0,0 +1,29 @@
+name: Publish Preview Package
+
+on: [push, pull_request]
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build package
+        run: pnpm run build
+
+      - name: Publish preview packages
+        run: pnpm dlx pkg-pr-new publish './libs/*'

apps/docs/src/routes/base/modal/examples/basic.tsx

@@ -0,0 +1,11 @@
+import { Modal } from "@kunai-consulting/qwik";
+import { component$ } from "@qwik.dev/core";
+
+export default component$(() => {
+  return (
+    <Modal.Root>
+      <Modal.Trigger>Open Modal</Modal.Trigger>
+      <Modal.Content>Some content</Modal.Content>
+    </Modal.Root>
+  );
+});

apps/docs/src/routes/base/modal/examples/nested.tsx

@@ -0,0 +1,28 @@
+import { Modal } from "@kunai-consulting/qwik";
+import { component$, useSignal } from "@qwik.dev/core";
+
+export default component$(() => {
+  const nestedOpen = useSignal(false);
+
+  return (
+    <Modal.Root data-testid="root">
+      <Modal.Trigger data-testid="trigger">Open Modal</Modal.Trigger>
+      <Modal.Content data-testid="content">
+        <Modal.Title data-testid="title">First Modal</Modal.Title>
+        <p>This is the first modal.</p>
+
+        {/* Nested Modal */}
+        <Modal.Root bind:open={nestedOpen}>
+          <Modal.Trigger>Nested Modal Trigger</Modal.Trigger>
+          <Modal.Content>
+            <Modal.Title>Nested Modal Title</Modal.Title>
+            <p>Nested Modal Content</p>
+            <Modal.Close>Close Nested</Modal.Close>
+          </Modal.Content>
+        </Modal.Root>
+
+        <Modal.Close data-testid="close">Close</Modal.Close>
+      </Modal.Content>
+    </Modal.Root>
+  );
+});

apps/docs/src/routes/base/modal/index.mdx

@@ -0,0 +1,8 @@
+import Basic from "./examples/basic";
+import Nested from "./examples/nested";
+
+# Modal
+
+<Basic />
+
+<Nested />

libs/components/package.json

@@ -31,7 +31,8 @@
     "vite": "^7",
     "vite-tsconfig-paths": "^4.2.1",
     "@qwik.dev/core": "2.0.0-beta.9",
-    "vitest-browser-qwik": "https://pkg.pr.new/kunai-consulting/vitest-browser-qwik@949e6ac"
+    "vitest-browser-qwik": "https://pkg.pr.new/kunai-consulting/vitest-browser-qwik@949e6ac",
+    "@fluejs/noscroll": "^1.0.0"
   },
   "dependencies": {
     "@oddbird/css-anchor-positioning": "^0.6"

libs/components/src/index.ts

@@ -17,6 +17,7 @@ export * as Tabs from "./tabs";
 export * as Toggle from "./toggle";
 export * as Menu from "./menu";
 export * as Progress from "./progress";
+export * as Modal from "./modal";
 
 export { Render } from "./render/render";
 

libs/components/src/modal/index.ts

@@ -0,0 +1,6 @@
+export { ModalRoot as Root } from "./modal-root";
+export { ModalContent as Content } from "./modal-content";
+export { ModalTitle as Title } from "./modal-title";
+export { ModalDescription as Description } from "./modal-description";
+export { ModalClose as Close } from "./modal-close";
+export { ModalTrigger as Trigger } from "./modal-trigger";

libs/components/src/modal/modal-close.tsx

@@ -0,0 +1,22 @@
+import { $, type PropsOf, Slot, component$, useContext } from "@qwik.dev/core";
+import { Render } from "../render/render";
+import { modalContextId } from "./modal-root";
+
+export const ModalClose = component$((props: PropsOf<"button">) => {
+  const context = useContext(modalContextId);
+
+  const handleClose$ = $(() => {
+    context.isOpen.value = false;
+  });
+
+  return (
+    <Render
+      type="button"
+      fallback="button"
+      onClick$={[handleClose$, props.onClick$]}
+      {...props}
+    >
+      <Slot />
+    </Render>
+  );
+});

libs/components/src/modal/modal-content.tsx

@@ -0,0 +1,85 @@
+import { $, type PropsOf, Slot, component$, useContext, useSignal } from "@qwik.dev/core";
+import { modalContextId } from "./modal-root";
+
+export const ModalContent = component$((props: PropsOf<"dialog">) => {
+  const context = useContext(modalContextId);
+  const isDownOnBackdrop = useSignal(false);
+  const descriptionId = `${context.localId}-description`;
+  const titleId = `${context.localId}-title`;
+
+  /**
+   * Determines if the backdrop of the Modal has been clicked.
+   */
+  const isBackdropEvent$ = $(
+    (dialogEl: HTMLDialogElement | undefined, event: PointerEvent): boolean => {
+      if (!dialogEl) return false;
+      if (event.pointerId === -1) return false;
+
+      const modal = dialogEl.getBoundingClientRect();
+
+      const { clientX: x, clientY: y } = event;
+
+      const isInsideModal =
+        x >= modal.left && x <= modal.right && y >= modal.top && y <= modal.bottom;
+
+      if (isInsideModal) {
+        return false;
+      }
+
+      return true;
+    }
+  );
+
+  const handleBackdropDown$ = $(async (e: PointerEvent) => {
+    e.stopPropagation();
+    if (!context.contentRef.value) {
+      isDownOnBackdrop.value = false;
+      return;
+    }
+    isDownOnBackdrop.value = await isBackdropEvent$(context.contentRef.value, e);
+  });
+
+  const handleBackdropSlide$ = $(async (e: PointerEvent) => {
+    e.stopPropagation();
+    if (!isDownOnBackdrop.value) {
+      isDownOnBackdrop.value = false;
+      return;
+    }
+
+    if (!context.closeOnOutsideClick) {
+      isDownOnBackdrop.value = false;
+      return;
+    }
+
+    if (!context.contentRef.value) {
+      isDownOnBackdrop.value = false;
+      return;
+    }
+
+    const isBackdrop = await isBackdropEvent$(context.contentRef.value, e);
+
+    if (isBackdrop) {
+      context.isOpen.value = false;
+    }
+
+    isDownOnBackdrop.value = false;
+  });
+
+  const handleClose$ = $(() => {
+    context.isOpen.value = false;
+  });
+
+  return (
+    <dialog
+      {...props}
+      ref={context.contentRef}
+      onPointerDown$={[handleBackdropDown$, props.onPointerDown$]}
+      onPointerUp$={[handleBackdropSlide$, props.onPointerUp$]}
+      onClose$={[handleClose$, props.onClose$]}
+      aria-labelledby={context.isTitle.value ? titleId : undefined}
+      aria-describedby={context.isDescription.value ? descriptionId : undefined}
+    >
+      <Slot />
+    </dialog>
+  );
+});

libs/components/src/modal/modal-description.tsx

@@ -0,0 +1,18 @@
+import { type PropsOf, Slot, component$, useConstant, useContext } from "@qwik.dev/core";
+import { Render } from "../render/render";
+import { modalContextId } from "./modal-root";
+
+export const ModalDescription = component$((props: PropsOf<"div">) => {
+  const context = useContext(modalContextId);
+  const descriptionId = `${context.localId}-description`;
+
+  useConstant(() => {
+    context.isDescription.value = true;
+  });
+
+  return (
+    <Render fallback="div" {...props} id={descriptionId}>
+      <Slot />
+    </Render>
+  );
+});