@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/sheet/sheet.stories.tsx

@@ -1,107 +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 {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "./sheet";
-
-const meta = {
-  title: "Overlays/Sheet",
-  component: SheetContent,
-  args: { side: "right" },
-  argTypes: {
-    side: { control: "inline-radio", options: ["top", "right", "bottom", "left"] },
-  },
-} satisfies Meta<typeof SheetContent>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Open sheet</Button>
-      </SheetTrigger>
-      <SheetContent {...args}>
-        <SheetHeader>
-          <SheetTitle>Edit profile</SheetTitle>
-          <SheetDescription>Changes are saved when you close the sheet.</SheetDescription>
-        </SheetHeader>
-        <div className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="sheet-name">Name</Label>
-            <Input id="sheet-name" defaultValue="Ada Lovelace" />
-          </div>
-        </div>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button>Done</Button>
-          </SheetClose>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  ),
-};
-
-export const Sides: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap gap-3">
-      {(["top", "right", "bottom", "left"] as const).map((side) => (
-        <Sheet key={side}>
-          <SheetTrigger asChild>
-            <Button variant="outline">{side}</Button>
-          </SheetTrigger>
-          <SheetContent side={side}>
-            <SheetHeader>
-              <SheetTitle>From the {side}</SheetTitle>
-              <SheetDescription>Sheets can enter from any edge.</SheetDescription>
-            </SheetHeader>
-          </SheetContent>
-        </Sheet>
-      ))}
-    </div>
-  ),
-};
-
-/** A navigation sheet carries a nav landmark; placement alone conveys nothing. */
-export const Navigation: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Menu</Button>
-      </SheetTrigger>
-      <SheetContent side="left">
-        <SheetHeader>
-          <SheetTitle>Navigation</SheetTitle>
-        </SheetHeader>
-        <nav aria-label="Main">
-          <ul className="grid gap-1 text-sm">
-            {["Overview", "Projects", "Deployments", "Settings"].map((item) => (
-              <li key={item}>
-                <a
-                  href={`#${item.toLowerCase()}`}
-                  className="block rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground"
-                >
-                  {item}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      </SheetContent>
-    </Sheet>
-  ),
-};

package/src/components/sheet/sheet.test.tsx

@@ -1,152 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Button } from "../button";
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-  type SheetContentProps,
-} from "./sheet";
-
-function Example({ side }: { side?: SheetContentProps["side"] } = {}) {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button>Open</Button>
-      </SheetTrigger>
-      <SheetContent side={side}>
-        <SheetHeader>
-          <SheetTitle>Edit profile</SheetTitle>
-          <SheetDescription>Changes are saved immediately.</SheetDescription>
-        </SheetHeader>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button variant="outline">Done</Button>
-          </SheetClose>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-describe("Sheet", () => {
-  it("opens from its trigger and is named by its title", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: "Open" }));
-    expect(await screen.findByRole("dialog", { name: "Edit profile" })).toBeInTheDocument();
-  });
-
-  it.each([
-    ["top", "[--slide-y:-100%]"],
-    ["bottom", "[--slide-y:100%]"],
-    ["left", "[--slide-x:-100%]"],
-    ["right", "[--slide-x:100%]"],
-  ] as const)("slides in from the %s", async (side, expectedClass) => {
-    const user = userEvent.setup();
-    render(<Example side={side} />);
-
-    await user.click(screen.getByRole("button", { name: "Open" }));
-    expect(await screen.findByRole("dialog")).toHaveClass(expectedClass);
-  });
-
-  it("defaults to the right edge", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: "Open" }));
-    expect(await screen.findByRole("dialog")).toHaveClass("[--slide-x:100%]");
-  });
-
-  it("closes on Escape and restores focus", 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 from SheetClose", 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: "Done" }));
-    await waitFor(() => {
-      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-    });
-  });
-
-  it("omits the close button when asked", async () => {
-    const user = userEvent.setup();
-    render(
-      <Sheet>
-        <SheetTrigger>Open</SheetTrigger>
-        <SheetContent showCloseButton={false}>
-          <SheetTitle>No close button</SheetTitle>
-        </SheetContent>
-      </Sheet>,
-    );
-
-    await user.click(screen.getByText("Open"));
-    await screen.findByRole("dialog");
-    expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
-  });
-
-  it("closes from 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("lets a consumer className override the width", async () => {
-    const user = userEvent.setup();
-    render(
-      <Sheet>
-        <SheetTrigger>Open</SheetTrigger>
-        <SheetContent className="max-w-2xl">
-          <SheetTitle>Wide</SheetTitle>
-        </SheetContent>
-      </Sheet>,
-    );
-
-    await user.click(screen.getByText("Open"));
-    const dialog = await screen.findByRole("dialog");
-    expect(dialog).toHaveClass("max-w-2xl");
-    expect(dialog).not.toHaveClass("max-w-sm");
-  });
-
-  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/skeleton/skeleton.stories.tsx

@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Card, CardContent, CardHeader } from "@/components/card";
-
-import { Skeleton } from "./skeleton";
-
-const meta = {
-  title: "Feedback/Skeleton",
-  component: Skeleton,
-  parameters: { controls: { disable: true } },
-} satisfies Meta<typeof Skeleton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => <Skeleton className="h-4 w-48" />,
-};
-
-export const Shapes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Skeleton className="size-10 rounded-full" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-40" />
-        <Skeleton className="h-4 w-24" />
-      </div>
-    </div>
-  ),
-};
-
-/** aria-busy belongs on the region that owns the data, not on each placeholder. */
-export const LoadingCard: Story = {
-  render: () => (
-    <Card className="w-80" aria-busy="true" aria-label="Loading project">
-      <CardHeader className="gap-3">
-        <Skeleton className="h-5 w-40" />
-        <Skeleton className="h-4 w-56" />
-      </CardHeader>
-      <CardContent className="space-y-2">
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-4/5" />
-      </CardContent>
-    </Card>
-  ),
-};

package/src/components/skeleton/skeleton.test.tsx

@@ -1,57 +0,0 @@
-import { render } from "@testing-library/react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Skeleton } from "./skeleton";
-
-describe("Skeleton", () => {
-  it("is hidden from assistive technology", () => {
-    const { container } = render(<Skeleton />);
-    expect(container.querySelector("[data-slot='skeleton']")).toHaveAttribute(
-      "aria-hidden",
-      "true",
-    );
-  });
-
-  it("animates", () => {
-    const { container } = render(<Skeleton />);
-    expect(container.firstElementChild).toHaveClass("animate-pulse-soft");
-  });
-
-  it("takes its shape from the consumer className", () => {
-    const { container } = render(<Skeleton className="h-4 w-32 rounded-full" />);
-    const skeleton = container.firstElementChild;
-    expect(skeleton).toHaveClass("h-4", "w-32", "rounded-full");
-    expect(skeleton).not.toHaveClass("rounded-md");
-  });
-
-  it("survives HTML parsing inside a paragraph", () => {
-    // A skeleton stands in for content, so it lands inside paragraphs, labels
-    // and headings — all of which accept phrasing content only. A `div` there
-    // is invalid, and the parser closes the paragraph early to correct it, so
-    // the server HTML and the client tree disagree and hydration fails.
-    //
-    // Rendering through the real parser is what makes this catchable: React
-    // builds the DOM with appendChild and never applies parsing rules, so
-    // `render` alone reproduces neither the correction nor the failure.
-    const host = document.createElement("div");
-    host.innerHTML = renderToStaticMarkup(
-      <p>
-        <Skeleton className="h-7 w-24" />
-      </p>,
-    );
-
-    const skeleton = host.querySelector("[data-slot='skeleton']");
-    expect(skeleton?.parentElement?.tagName).toBe("P");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <div aria-busy="true">
-        <Skeleton className="h-4 w-32" />
-      </div>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/slider/slider.stories.tsx

@@ -1,87 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { Label } from "@/components/label";
-
-import { Slider } from "./slider";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-72">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "Forms/Slider",
-  component: Slider,
-  args: { defaultValue: [40], min: 0, max: 100, step: 1, "aria-label": "Volume" },
-  argTypes: {
-    step: { control: { type: "number", min: 1, max: 25 } },
-    disabled: { control: "boolean" },
-  },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** A slider is imprecise; showing the value makes it usable. */
-export const WithValue: Story = {
-  parameters: { controls: { disable: true } },
-  render: function WithValue() {
-    const [value, setValue] = useState([40]);
-    return (
-      <div className="grid gap-3">
-        <div className="flex items-center justify-between">
-          <Label htmlFor="quality">Quality</Label>
-          <span className="text-sm text-muted-foreground tabular-nums">{value[0]}%</span>
-        </div>
-        <Slider id="quality" aria-label="Quality" value={value} onValueChange={setValue} />
-      </div>
-    );
-  },
-};
-
-/** Each thumb is its own slider control, so each one gets its own name. */
-export const Range: Story = {
-  parameters: { controls: { disable: true } },
-  render: function Range() {
-    const [range, setRange] = useState([20, 80]);
-    return (
-      <div className="grid gap-3">
-        <div className="flex items-center justify-between">
-          <Label>Price range</Label>
-          <span className="text-sm text-muted-foreground tabular-nums">
-            ${range[0]} – ${range[1]}
-          </span>
-        </div>
-        <Slider
-          value={range}
-          onValueChange={setRange}
-          thumbLabels={["Minimum price", "Maximum price"]}
-          thumbValueTexts={[`$${String(range[0])}`, `$${String(range[1])}`]}
-        />
-      </div>
-    );
-  },
-};
-
-export const Steps: Story = {
-  args: { defaultValue: [50], step: 10 },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-};
-
-export const Vertical: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex h-44 justify-center">
-      <Slider orientation="vertical" defaultValue={[60]} aria-label="Volume" />
-    </div>
-  ),
-};

package/src/components/slider/slider.test.tsx

@@ -1,148 +0,0 @@
-import { render, screen } 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 { Slider } from "./slider";
-
-describe("Slider", () => {
-  it("renders a single thumb by default", () => {
-    render(<Slider aria-label="Volume" />);
-    expect(screen.getAllByRole("slider")).toHaveLength(1);
-  });
-
-  it("renders one thumb per value", () => {
-    render(<Slider aria-label="Price range" defaultValue={[20, 80]} />);
-    expect(screen.getAllByRole("slider")).toHaveLength(2);
-  });
-
-  it("exposes its value and bounds", () => {
-    render(<Slider aria-label="Volume" defaultValue={[40]} min={0} max={100} />);
-
-    const thumb = screen.getByRole("slider");
-    expect(thumb).toHaveAttribute("aria-valuenow", "40");
-    expect(thumb).toHaveAttribute("aria-valuemin", "0");
-    expect(thumb).toHaveAttribute("aria-valuemax", "100");
-  });
-
-  it("increments with the arrow keys", async () => {
-    const user = userEvent.setup();
-    render(<Slider aria-label="Volume" defaultValue={[40]} />);
-
-    await user.tab();
-    const thumb = screen.getByRole("slider");
-    expect(thumb).toHaveFocus();
-
-    await user.keyboard("{ArrowRight}");
-    expect(thumb).toHaveAttribute("aria-valuenow", "41");
-
-    await user.keyboard("{ArrowLeft}");
-    expect(thumb).toHaveAttribute("aria-valuenow", "40");
-  });
-
-  it("jumps to the bounds with Home and End", async () => {
-    const user = userEvent.setup();
-    render(<Slider aria-label="Volume" defaultValue={[40]} min={10} max={90} />);
-
-    await user.tab();
-    await user.keyboard("{Home}");
-    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "10");
-
-    await user.keyboard("{End}");
-    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "90");
-  });
-
-  it("honours the step", async () => {
-    const user = userEvent.setup();
-    render(<Slider aria-label="Volume" defaultValue={[40]} step={10} />);
-
-    await user.tab();
-    await user.keyboard("{ArrowRight}");
-    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "50");
-  });
-
-  it("reports changes", async () => {
-    const onValueChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Slider aria-label="Volume" defaultValue={[40]} onValueChange={onValueChange} />);
-
-    await user.tab();
-    await user.keyboard("{ArrowRight}");
-    expect(onValueChange).toHaveBeenCalledWith([41]);
-  });
-
-  it("works controlled", async () => {
-    const user = userEvent.setup();
-
-    function Controlled() {
-      const [value, setValue] = useState([30]);
-      return <Slider aria-label="Volume" value={value} onValueChange={setValue} />;
-    }
-
-    render(<Controlled />);
-    await user.tab();
-    await user.keyboard("{ArrowRight}");
-    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "31");
-  });
-
-  it("does not respond while disabled", async () => {
-    const onValueChange = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <Slider aria-label="Volume" defaultValue={[40]} disabled onValueChange={onValueChange} />,
-    );
-
-    await user.tab();
-    await user.keyboard("{ArrowRight}");
-    expect(onValueChange).not.toHaveBeenCalled();
-  });
-
-  it("supports vertical orientation", () => {
-    render(<Slider aria-label="Volume" orientation="vertical" data-testid="slider" />);
-    expect(screen.getByTestId("slider")).toHaveAttribute("data-orientation", "vertical");
-  });
-
-  it("forwards aria-valuetext onto the thumb", () => {
-    render(
-      <Slider aria-label="Duration" defaultValue={[90]} aria-valuetext="1 minute 30 seconds" />,
-    );
-    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuetext", "1 minute 30 seconds");
-  });
-
-  it("names each thumb of a range slider separately", () => {
-    render(
-      <Slider
-        defaultValue={[20, 80]}
-        thumbLabels={["Minimum price", "Maximum price"]}
-        thumbValueTexts={["$20", "$80"]}
-      />,
-    );
-
-    const min = screen.getByRole("slider", { name: "Minimum price" });
-    const max = screen.getByRole("slider", { name: "Maximum price" });
-    expect(min).toHaveAttribute("aria-valuetext", "$20");
-    expect(max).toHaveAttribute("aria-valuetext", "$80");
-  });
-
-  it("warns in development when a thumb would be unnamed", () => {
-    const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
-    render(<Slider defaultValue={[40]} />);
-
-    expect(warn).toHaveBeenCalledWith(expect.stringContaining("no accessible name"));
-    warn.mockRestore();
-  });
-
-  it("does not warn when every thumb is named", () => {
-    const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
-    render(<Slider defaultValue={[20, 80]} thumbLabels={["Minimum", "Maximum"]} />);
-
-    expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Slider aria-label="Volume" defaultValue={[40]} />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/spinner/spinner.stories.tsx

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Button } from "@/components/button";
-
-import { Spinner } from "./spinner";
-
-const meta = {
-  title: "Feedback/Spinner",
-  component: Spinner,
-  args: { size: "md" },
-  argTypes: { size: { control: "select", options: ["xs", "sm", "md", "lg", "xl"] } },
-} satisfies Meta<typeof Spinner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: "Loading" },
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-4">
-      {(["xs", "sm", "md", "lg", "xl"] as const).map((size) => (
-        <Spinner key={size} size={size} />
-      ))}
-    </div>
-  ),
-};
-
-export const InheritsColour: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Spinner className="text-primary" />
-      <Spinner className="text-destructive" />
-      <Spinner className="text-muted-foreground" />
-    </div>
-  ),
-};
-
-/** Inside a control that already reports its own busy state, omit `label`. */
-export const InsideAButton: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <Button loading>Saving changes</Button>,
-};

package/src/components/spinner/spinner.test.tsx

@@ -1,41 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Spinner } from "./spinner";
-
-describe("Spinner", () => {
-  it("is hidden from assistive technology by default", () => {
-    const { container } = render(<Spinner />);
-    expect(container.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
-    expect(screen.queryByRole("status")).not.toBeInTheDocument();
-  });
-
-  it("announces itself when given a label", () => {
-    render(<Spinner label="Loading results" />);
-    expect(screen.getByRole("status")).toHaveTextContent("Loading results");
-  });
-
-  it.each([
-    ["xs", "size-3"],
-    ["sm", "size-3.5"],
-    ["md", "size-4"],
-    ["lg", "size-5"],
-    ["xl", "size-6"],
-  ] as const)("applies the %s size", (size, expectedClass) => {
-    const { container } = render(<Spinner size={size} />);
-    expect(container.querySelector("svg")).toHaveClass(expectedClass);
-  });
-
-  it("lets a consumer className override the size", () => {
-    const { container } = render(<Spinner className="size-10" />);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("size-10");
-    expect(svg).not.toHaveClass("size-4");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Spinner label="Loading" />);
-    await expectNoA11yViolations(container);
-  });
-});