@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/dialog/dialog.stories.tsx

@@ -1,140 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Button } from "@/components/button";
-import { Input } from "@/components/input";
-import { Label } from "@/components/label";
-
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "./dialog";
-
-/**
- * Annotated rather than inferred with `satisfies`. These components are direct
- * re-exports of Radix primitives, and inferring the meta type makes the emitted
- * declaration reference Radix-internal prop types that are not nameable from
- * this path (TS2883).
- */
-const meta: Meta<typeof Dialog> = {
-  title: "Overlays/Dialog",
-  component: Dialog,
-  parameters: { controls: { disable: true } },
-};
-
-export default meta;
-type Story = StoryObj<typeof Dialog>;
-
-export const Default: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button>Edit profile</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription>
-            Make changes to your profile. Save when you are done.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="name">Name</Label>
-            <Input id="name" defaultValue="Ada Lovelace" />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="handle">Handle</Label>
-            <Input id="handle" defaultValue="@ada" />
-          </div>
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button>Save changes</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};
-
-/** A destructive confirmation: the description must state what is lost. */
-export const Confirmation: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="destructive">Delete project</Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-md">
-        <DialogHeader>
-          <DialogTitle>Delete acme-inc?</DialogTitle>
-          <DialogDescription>
-            This permanently deletes the project and all 42 of its deployments. This cannot be
-            undone.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive">Delete project</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};
-
-/** Without the built-in close button, supply your own dismissal path. */
-export const WithoutCloseButton: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Open</Button>
-      </DialogTrigger>
-      <DialogContent showCloseButton={false}>
-        <DialogHeader>
-          <DialogTitle>Terms of service</DialogTitle>
-          <DialogDescription>Accept the terms to continue.</DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Decline</Button>
-          </DialogClose>
-          <DialogClose asChild>
-            <Button>Accept</Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};
-
-export const ScrollingContent: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Read changelog</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Changelog</DialogTitle>
-          <DialogDescription>Everything shipped this month.</DialogDescription>
-        </DialogHeader>
-        <div className="max-h-72 space-y-4 overflow-y-auto pr-2 text-sm text-muted-foreground">
-          {Array.from({ length: 12 }, (_, index) => (
-            <p key={index}>
-              Release {String(index + 1)}: performance improvements, bug fixes and a handful of
-              new keyboard shortcuts.
-            </p>
-          ))}
-        </div>
-      </DialogContent>
-    </Dialog>
-  ),
-};

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

@@ -1,186 +0,0 @@
-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/drawer/drawer.stories.tsx

@@ -1,111 +0,0 @@
-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

@@ -1,187 +0,0 @@
-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);
-  });
-});