@dowel-ui/react 0.1.0

package/src/components/dialog/dialog.test.tsx

@@ -0,0 +1,186 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Button } from "../button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+function Example({ showCloseButton = true }: { showCloseButton?: boolean }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open</Button>
+      </DialogTrigger>
+      <DialogContent showCloseButton={showCloseButton}>
+        <DialogHeader>
+          <DialogTitle>Delete project</DialogTitle>
+          <DialogDescription>This cannot be undone.</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive">Delete</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+describe("Dialog", () => {
+  it("is closed until the trigger is activated", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("is named and described by its title and description", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+
+    const dialog = await screen.findByRole("dialog", { name: "Delete project" });
+    expect(dialog).toHaveAccessibleDescription("This cannot be undone.");
+  });
+
+  it("opens from the keyboard", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.tab();
+    expect(screen.getByRole("button", { name: "Open" })).toHaveFocus();
+    await user.keyboard("{Enter}");
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("moves focus into the dialog when it opens", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+
+    const dialog = await screen.findByRole("dialog");
+    await waitFor(() => {
+      expect(dialog).toContainElement(document.activeElement as HTMLElement);
+    });
+  });
+
+  it("closes on Escape and restores focus to the trigger", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    const trigger = screen.getByRole("button", { name: "Open" });
+    await user.click(trigger);
+    await screen.findByRole("dialog");
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(trigger).toHaveFocus();
+    });
+  });
+
+  it("closes via the built-in close button", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await screen.findByRole("dialog");
+
+    await user.click(screen.getByRole("button", { name: "Close" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("omits the close button when asked", async () => {
+    const user = userEvent.setup();
+    render(<Example showCloseButton={false} />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await screen.findByRole("dialog");
+
+    expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
+  });
+
+  it("closes via DialogClose", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await screen.findByRole("dialog");
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("works as a controlled component", async () => {
+    const onOpenChange = vi.fn();
+    const user = userEvent.setup();
+
+    function Controlled() {
+      const [open, setOpen] = useState(false);
+      return (
+        <Dialog
+          open={open}
+          onOpenChange={(next) => {
+            onOpenChange(next);
+            setOpen(next);
+          }}
+        >
+          <DialogTrigger asChild>
+            <Button>Open</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogTitle>Controlled</DialogTitle>
+          </DialogContent>
+        </Dialog>
+      );
+    }
+
+    render(<Controlled />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("merges a consumer className on the content", async () => {
+    const user = userEvent.setup();
+    render(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent className="max-w-2xl">
+          <DialogTitle>Wide</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    await user.click(screen.getByText("Open"));
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveClass("max-w-2xl");
+    expect(dialog).not.toHaveClass("max-w-lg");
+  });
+
+  it("has no accessibility violations while open", async () => {
+    const user = userEvent.setup();
+    const { baseElement } = render(<Example />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await screen.findByRole("dialog");
+
+    await expectNoA11yViolations(baseElement);
+  });
+});

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { Dialog as DialogPrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * A modal window that interrupts the user to gather a response.
+ *
+ * Focus is trapped while open, restored to the trigger on close, and the rest
+ * of the page is hidden from assistive technology — all handled by the
+ * underlying primitive rather than reimplemented here.
+ */
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+
+export type DialogOverlayProps = ComponentPropsWithRef<typeof DialogPrimitive.Overlay>;
+
+export function DialogOverlay({ className, ...props }: DialogOverlayProps) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-[2px]",
+        "data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export interface DialogContentProps extends ComponentPropsWithRef<
+  typeof DialogPrimitive.Content
+> {
+  /** Renders the built-in close button. Turn off to supply your own. */
+  showCloseButton?: boolean;
+}
+
+export function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogContentProps) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2",
+          "grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl",
+          "data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            aria-label="Close"
+            className={cn(
+              "absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground",
+              "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
+              "[&_svg]:size-4",
+              focusRing,
+            )}
+          >
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path
+                d="m6 6 12 12M18 6 6 18"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </svg>
+          </DialogPrimitive.Close>
+        ) : null}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+export function DialogHeader({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-1.5 pr-8 text-left", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogFooter({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+export type DialogTitleProps = ComponentPropsWithRef<typeof DialogPrimitive.Title>;
+
+export function DialogTitle({ className, ...props }: DialogTitleProps) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-tight font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+export type DialogDescriptionProps = ComponentPropsWithRef<typeof DialogPrimitive.Description>;
+
+export function DialogDescription({ className, ...props }: DialogDescriptionProps) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

package/src/components/dialog/index.ts

@@ -0,0 +1,16 @@
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  type DialogContentProps,
+  type DialogDescriptionProps,
+  type DialogOverlayProps,
+  type DialogTitleProps,
+} from "./dialog";

package/src/components/dialog/meta.ts

@@ -0,0 +1,16 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "dialog",
+  title: "Dialog",
+  description: "A modal window that interrupts the user to gather a response.",
+  category: "overlay",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["dialog.tsx"],
+  a11y:
+    "Focus is trapped while open and restored to the trigger on close; Escape and an overlay " +
+    "click dismiss. Always render a DialogTitle — it names the dialog for screen readers. " +
+    "Use DialogDescription, or aria-describedby, to explain consequential actions.",
+});

package/src/components/drawer/drawer.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "@/components/button";
+
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCancel,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+
+const meta = {
+  title: "Overlays/Drawer",
+  component: Drawer,
+  parameters: { controls: { disable: true } },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Drag the handle downward to dismiss, or use Escape or Cancel. */
+export const Default: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Filters</DrawerTitle>
+          <DrawerDescription>Narrow down the deployment list.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody className="space-y-2 text-sm text-muted-foreground">
+          <p>Status, branch, environment and author filters would live here.</p>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button>Apply filters</Button>
+          <DrawerCancel>Cancel</DrawerCancel>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const ScrollingContent: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Pick a region</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Region</DrawerTitle>
+          <DrawerDescription>Where your workloads run.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody className="max-h-72">
+          <ul className="grid gap-1 text-sm">
+            {[
+              "us-east-1",
+              "us-west-2",
+              "eu-west-1",
+              "eu-central-1",
+              "ap-south-1",
+              "ap-southeast-2",
+              "sa-east-1",
+              "af-south-1",
+            ].map((region) => (
+              <li key={region}>
+                <button
+                  type="button"
+                  className="w-full rounded-md px-3 py-2 text-left hover:bg-accent hover:text-accent-foreground"
+                >
+                  {region}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerCancel>Cancel</DrawerCancel>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+/** Without a handle the drawer cannot be dragged; keep an explicit way out. */
+export const WithoutHandle: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DrawerTrigger>
+      <DrawerContent showHandle={false}>
+        <DrawerHeader>
+          <DrawerTitle>Confirm</DrawerTitle>
+          <DrawerDescription>This drawer cannot be dragged away.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter>
+          <Button variant="destructive">Delete</Button>
+          <DrawerCancel>Cancel</DrawerCancel>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};

package/src/components/drawer/drawer.test.tsx

@@ -0,0 +1,187 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Button } from "../button";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCancel,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+
+const DRAWER_HEIGHT = 400;
+
+function Example({ onOpenChange }: { onOpenChange?: (open: boolean) => void } = {}) {
+  return (
+    <Drawer onOpenChange={onOpenChange}>
+      <DrawerTrigger asChild>
+        <Button>Open</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Filters</DrawerTitle>
+          <DrawerDescription>Narrow down the results.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>Body</DrawerBody>
+        <DrawerFooter>
+          <DrawerCancel>Cancel</DrawerCancel>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+/** jsdom reports every box as zero-sized, so the drawer's height is stubbed to
+ * exercise the distance-based dismiss rule. */
+function stubHeight(element: Element, height = DRAWER_HEIGHT) {
+  vi.spyOn(element, "getBoundingClientRect").mockReturnValue({
+    height,
+    width: 320,
+    top: 0,
+    left: 0,
+    right: 320,
+    bottom: height,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  });
+}
+
+async function open() {
+  const user = userEvent.setup();
+  render(<Example />);
+  await user.click(screen.getByRole("button", { name: "Open" }));
+  const dialog = await screen.findByRole("dialog");
+  const handle = dialog.querySelector("[data-slot='drawer-handle']");
+  if (!handle) throw new Error("drawer handle not rendered");
+  stubHeight(dialog);
+  return { user, dialog, handle };
+}
+
+function drag(handle: Element, distance: number) {
+  fireEvent.pointerDown(handle, { button: 0, pointerId: 1, clientY: 0 });
+  fireEvent.pointerMove(handle, { pointerId: 1, clientY: distance });
+  fireEvent.pointerUp(handle, { pointerId: 1, clientY: distance });
+}
+
+describe("Drawer", () => {
+  it("opens from its trigger", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    expect(await screen.findByRole("dialog", { name: "Filters" })).toBeInTheDocument();
+  });
+
+  it("hides the drag handle from assistive technology", async () => {
+    const { handle } = await open();
+    expect(handle).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("closes on Escape", async () => {
+    const { user } = await open();
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("closes from DrawerCancel", async () => {
+    const { user } = await open();
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("drag to dismiss", () => {
+    it("closes when dragged past a quarter of its height", async () => {
+      const { handle } = await open();
+
+      drag(handle, DRAWER_HEIGHT * 0.5);
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      });
+    });
+
+    it("stays open when dragged only a little", async () => {
+      const { handle } = await open();
+
+      // Below MIN_FLICK_DISTANCE, so neither the distance nor the velocity rule
+      // fires. A tap on the handle must never dismiss the drawer.
+      drag(handle, 8);
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    it("follows the pointer while dragging", async () => {
+      const { dialog, handle } = await open();
+
+      fireEvent.pointerDown(handle, { button: 0, pointerId: 1, clientY: 0 });
+      fireEvent.pointerMove(handle, { pointerId: 1, clientY: 60 });
+
+      expect(dialog).toHaveAttribute("data-dragging", "true");
+      expect(dialog.style.transform).toBe("translate3d(0, 60px, 0)");
+
+      fireEvent.pointerUp(handle, { pointerId: 1, clientY: 60 });
+    });
+
+    it("ignores upward drags so the panel stays anchored to the edge", async () => {
+      const { dialog, handle } = await open();
+
+      fireEvent.pointerDown(handle, { button: 0, pointerId: 1, clientY: 100 });
+      fireEvent.pointerMove(handle, { pointerId: 1, clientY: 20 });
+
+      expect(dialog.style.transform).toBe("");
+
+      fireEvent.pointerUp(handle, { pointerId: 1, clientY: 20 });
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    it("ignores non-primary buttons", async () => {
+      const { dialog, handle } = await open();
+
+      fireEvent.pointerDown(handle, { button: 2, pointerId: 1, clientY: 0 });
+      fireEvent.pointerMove(handle, { pointerId: 1, clientY: 300 });
+
+      expect(dialog.style.transform).toBe("");
+    });
+  });
+
+  it("reports open state changes", async () => {
+    const onOpenChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Example onOpenChange={onOpenChange} />);
+
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it("throws a useful error if content is rendered outside the root", () => {
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined);
+    expect(() =>
+      render(
+        <DrawerContent>
+          <DrawerTitle>Orphan</DrawerTitle>
+        </DrawerContent>,
+      ),
+    ).toThrow(/must be rendered inside <Drawer>/);
+    consoleError.mockRestore();
+  });
+
+  it("has no accessibility violations while open", async () => {
+    const user = userEvent.setup();
+    const { baseElement } = render(<Example />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await screen.findByRole("dialog");
+
+    await expectNoA11yViolations(baseElement);
+  });
+});