@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/pagination/pagination.stories.tsx

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "./pagination";
-
-const meta = {
-  title: "Navigation/Pagination",
-  component: Pagination,
-  parameters: { controls: { disable: true } },
-} satisfies Meta<typeof Pagination>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#1" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#1">1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#2" isActive>
-            2
-          </PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#3">3</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#12">12</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#3" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  ),
-};
-
-export const Compact: Story = {
-  render: () => (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#1" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#3" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  ),
-};
-
-/**
- * When paging only changes client state there is no URL to link to, so the
- * pages render as buttons instead — same styling, correct semantics.
- */
-export const AsButtons: Story = {
-  render: function AsButtons() {
-    const [page, setPage] = useState(2);
-    const pages = [1, 2, 3, 4, 5];
-
-    return (
-      <Pagination>
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationLink asChild size="sm" className="gap-1 px-2.5">
-              <button
-                type="button"
-                aria-label="Go to previous page"
-                disabled={page === 1}
-                onClick={() => {
-                  setPage((current) => Math.max(1, current - 1));
-                }}
-              >
-                Previous
-              </button>
-            </PaginationLink>
-          </PaginationItem>
-          {pages.map((value) => (
-            <PaginationItem key={value}>
-              <PaginationLink asChild isActive={value === page}>
-                <button
-                  type="button"
-                  aria-label={`Go to page ${String(value)}`}
-                  onClick={() => {
-                    setPage(value);
-                  }}
-                >
-                  {value}
-                </button>
-              </PaginationLink>
-            </PaginationItem>
-          ))}
-          <PaginationItem>
-            <PaginationLink asChild size="sm" className="gap-1 px-2.5">
-              <button
-                type="button"
-                aria-label="Go to next page"
-                disabled={page === pages.length}
-                onClick={() => {
-                  setPage((current) => Math.min(pages.length, current + 1));
-                }}
-              >
-                Next
-              </button>
-            </PaginationLink>
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    );
-  },
-};

package/src/components/pagination/pagination.test.tsx

@@ -1,119 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "./pagination";
-
-function Example({ current = 2 }: { current?: number } = {}) {
-  return (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#1" />
-        </PaginationItem>
-        {[1, 2, 3].map((page) => (
-          <PaginationItem key={page}>
-            <PaginationLink href={`#${String(page)}`} isActive={page === current}>
-              {page}
-            </PaginationLink>
-          </PaginationItem>
-        ))}
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#12">12</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#3" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  );
-}
-
-describe("Pagination", () => {
-  it("is a named navigation landmark", () => {
-    render(<Example />);
-    expect(screen.getByRole("navigation", { name: "Pagination" })).toBeInTheDocument();
-  });
-
-  it("marks the current page with aria-current", () => {
-    render(<Example current={2} />);
-
-    const current = screen.getByRole("link", { name: "2" });
-    expect(current).toHaveAttribute("aria-current", "page");
-    expect(screen.getByRole("link", { name: "1" })).not.toHaveAttribute("aria-current");
-  });
-
-  it("names the previous and next controls", () => {
-    render(<Example />);
-    expect(screen.getByRole("link", { name: "Go to previous page" })).toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "Go to next page" })).toBeInTheDocument();
-  });
-
-  it("renders pages as links, so they can be shared and opened in a tab", () => {
-    render(<Example />);
-    expect(screen.getByRole("link", { name: "2" })).toHaveAttribute("href", "#2");
-  });
-
-  it("hides the ellipsis but keeps a readable equivalent", () => {
-    const { container } = render(<Example />);
-    const ellipsis = container.querySelector("[data-slot='pagination-ellipsis']");
-
-    expect(ellipsis).toHaveAttribute("aria-hidden", "true");
-    expect(ellipsis).toHaveTextContent("More pages");
-  });
-
-  it("renders as buttons via asChild when paging is client state", async () => {
-    const onClick = vi.fn();
-    const user = userEvent.setup();
-
-    render(
-      <Pagination>
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationLink asChild isActive>
-              <button type="button" onClick={onClick}>
-                1
-              </button>
-            </PaginationLink>
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>,
-    );
-
-    const button = screen.getByRole("button", { name: "1" });
-    expect(button).toHaveAttribute("aria-current", "page");
-
-    await user.click(button);
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("is reachable by keyboard", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.tab();
-    expect(screen.getByRole("link", { name: "Go to previous page" })).toHaveFocus();
-  });
-
-  it("styles the active page differently", () => {
-    render(<Example current={3} />);
-    expect(screen.getByRole("link", { name: "3" })).toHaveAttribute("data-active", "true");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/popover/popover.stories.tsx

@@ -1,84 +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 { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from "./popover";
-
-const meta = {
-  title: "Overlays/Popover",
-  component: PopoverContent,
-  args: { side: "bottom", align: "center" },
-  argTypes: {
-    side: { control: "inline-radio", options: ["top", "right", "bottom", "left"] },
-    align: { control: "inline-radio", options: ["start", "center", "end"] },
-  },
-} satisfies Meta<typeof PopoverContent>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Dimensions</Button>
-      </PopoverTrigger>
-      <PopoverContent {...args} aria-labelledby="dimensions-heading">
-        <div className="grid gap-3">
-          <div className="space-y-1">
-            <h4 id="dimensions-heading" className="text-sm font-medium">
-              Dimensions
-            </h4>
-            <p className="text-xs text-muted-foreground">Set the layout for the layer.</p>
-          </div>
-          <div className="grid gap-2">
-            <div className="grid grid-cols-3 items-center gap-2">
-              <Label htmlFor="width">Width</Label>
-              <Input id="width" inputSize="sm" defaultValue="100%" className="col-span-2" />
-            </div>
-            <div className="grid grid-cols-3 items-center gap-2">
-              <Label htmlFor="height">Height</Label>
-              <Input id="height" inputSize="sm" defaultValue="24px" className="col-span-2" />
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  ),
-};
-
-/** Growth direction follows the anchor, so every side reads as one motion. */
-export const Sides: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap gap-3">
-      {(["top", "right", "bottom", "left"] as const).map((side) => (
-        <Popover key={side}>
-          <PopoverTrigger asChild>
-            <Button variant="outline">{side}</Button>
-          </PopoverTrigger>
-          <PopoverContent side={side} className="w-48" aria-label={`Opened from the ${side}`}>
-            <p className="text-sm">Opened from the {side}.</p>
-          </PopoverContent>
-        </Popover>
-      ))}
-    </div>
-  ),
-};
-
-export const WithArrow: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Show details</Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-56" aria-label="Deployment details">
-        <p className="text-sm">Deployed 4 minutes ago from main.</p>
-        <PopoverArrow />
-      </PopoverContent>
-    </Popover>
-  ),
-};

package/src/components/popover/popover.test.tsx

@@ -1,163 +0,0 @@
-import { 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 { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger } from "./popover";
-
-function Example() {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button>Open settings</Button>
-      </PopoverTrigger>
-      <PopoverContent aria-labelledby="dimensions-heading">
-        <p id="dimensions-heading">Dimensions</p>
-        <PopoverClose>Done</PopoverClose>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-describe("Popover", () => {
-  it("is closed until the trigger is activated", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    expect(screen.queryByText("Dimensions")).not.toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "Open settings" }));
-    expect(await screen.findByText("Dimensions")).toBeInTheDocument();
-  });
-
-  it("reports its state on the trigger", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    const trigger = screen.getByRole("button", { name: "Open settings" });
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-
-    await user.click(trigger);
-    await waitFor(() => {
-      expect(trigger).toHaveAttribute("aria-expanded", "true");
-    });
-  });
-
-  it("opens from the keyboard", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.tab();
-    await user.keyboard("{Enter}");
-    expect(await screen.findByText("Dimensions")).toBeInTheDocument();
-  });
-
-  it("closes on Escape and restores focus to the trigger", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    const trigger = screen.getByRole("button", { name: "Open settings" });
-    await user.click(trigger);
-    await screen.findByText("Dimensions");
-
-    await user.keyboard("{Escape}");
-    await waitFor(() => {
-      expect(screen.queryByText("Dimensions")).not.toBeInTheDocument();
-    });
-    await waitFor(() => {
-      expect(trigger).toHaveFocus();
-    });
-  });
-
-  it("closes from PopoverClose", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-    await user.click(screen.getByRole("button", { name: "Open settings" }));
-    await screen.findByText("Dimensions");
-
-    await user.click(screen.getByText("Done"));
-    await waitFor(() => {
-      expect(screen.queryByText("Dimensions")).not.toBeInTheDocument();
-    });
-  });
-
-  it("merges a consumer className", async () => {
-    const user = userEvent.setup();
-    render(
-      <Popover>
-        <PopoverTrigger>Open</PopoverTrigger>
-        <PopoverContent className="w-96" aria-label="Details" data-testid="content">
-          Content
-        </PopoverContent>
-      </Popover>,
-    );
-
-    await user.click(screen.getByText("Open"));
-    const content = await screen.findByTestId("content");
-    expect(content).toHaveClass("w-96");
-    expect(content).not.toHaveClass("w-72");
-  });
-
-  it("warns in development when the content has no accessible name", async () => {
-    const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
-    const user = userEvent.setup();
-    render(
-      <Popover>
-        <PopoverTrigger>Open</PopoverTrigger>
-        <PopoverContent>Unnamed</PopoverContent>
-      </Popover>,
-    );
-
-    await user.click(screen.getByText("Open"));
-    await screen.findByText("Unnamed");
-
-    expect(warn).toHaveBeenCalledWith(expect.stringContaining("Missing accessible name"));
-    warn.mockRestore();
-  });
-
-  it("does not warn when a name is supplied", async () => {
-    const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
-    const user = userEvent.setup();
-    render(
-      <Popover>
-        <PopoverTrigger>Open</PopoverTrigger>
-        <PopoverContent aria-label="Details">Named</PopoverContent>
-      </Popover>,
-    );
-
-    await user.click(screen.getByText("Open"));
-    await screen.findByText("Named");
-
-    expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
-  });
-
-  it("renders an arrow that is hidden from assistive technology", async () => {
-    const user = userEvent.setup();
-    const { baseElement } = render(
-      <Popover>
-        <PopoverTrigger>Open</PopoverTrigger>
-        <PopoverContent aria-label="Details">
-          Details
-          <PopoverArrow />
-        </PopoverContent>
-      </Popover>,
-    );
-
-    await user.click(screen.getByText("Open"));
-    await screen.findByText("Details");
-
-    const arrow = baseElement.querySelector("[data-slot='popover-arrow']");
-    expect(arrow).toBeInTheDocument();
-    expect(arrow).toHaveClass("fill-popover");
-  });
-
-  it("has no accessibility violations while open", async () => {
-    const user = userEvent.setup();
-    const { baseElement } = render(<Example />);
-    await user.click(screen.getByRole("button", { name: "Open settings" }));
-    await screen.findByText("Dimensions");
-
-    await expectNoA11yViolations(baseElement);
-  });
-});

package/src/components/progress/progress.stories.tsx

@@ -1,90 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { useEffect, useState } from "react";
-
-import { Progress } from "./progress";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-72">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "Feedback/Progress",
-  component: Progress,
-  args: { value: 40, size: "md", tone: "primary", "aria-label": "Upload" },
-  argTypes: {
-    value: { control: { type: "range", min: 0, max: 100 } },
-    size: { control: "inline-radio", options: ["sm", "md", "lg"] },
-    tone: { control: "select", options: ["primary", "success", "warning", "destructive"] },
-  },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Progress>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** The number belongs on screen too — a bar alone is hard to read precisely. */
-export const WithLabel: Story = {
-  parameters: { controls: { disable: true } },
-  render: function WithLabel() {
-    const [value, setValue] = useState(12);
-
-    useEffect(() => {
-      const timer = setInterval(() => {
-        setValue((current) => (current >= 100 ? 0 : current + 4));
-      }, 400);
-      return () => {
-        clearInterval(timer);
-      };
-    }, []);
-
-    return (
-      <div className="grid gap-2">
-        <div className="flex items-center justify-between text-sm">
-          <span id="upload-label">Uploading assets</span>
-          <span className="text-muted-foreground tabular-nums">{value}%</span>
-        </div>
-        <Progress value={value} aria-labelledby="upload-label" />
-      </div>
-    );
-  },
-};
-
-/** No known duration — announced as indeterminate, not as zero percent. */
-export const Indeterminate: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-2">
-      <span className="text-sm" id="indeterminate-label">
-        Preparing your export…
-      </span>
-      <Progress aria-labelledby="indeterminate-label" />
-    </div>
-  ),
-};
-
-export const Tones: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-4">
-      {(["primary", "success", "warning", "destructive"] as const).map((tone) => (
-        <Progress key={tone} tone={tone} value={65} aria-label={tone} />
-      ))}
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-4">
-      {(["sm", "md", "lg"] as const).map((size) => (
-        <Progress key={size} size={size} value={55} aria-label={size} />
-      ))}
-    </div>
-  ),
-};

package/src/components/progress/progress.test.tsx

@@ -1,78 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Progress } from "./progress";
-
-describe("Progress", () => {
-  it("exposes a progressbar with its value", () => {
-    render(<Progress value={40} aria-label="Upload" />);
-
-    const bar = screen.getByRole("progressbar", { name: "Upload" });
-    expect(bar).toHaveAttribute("aria-valuenow", "40");
-    expect(bar).toHaveAttribute("aria-valuemax", "100");
-  });
-
-  it("reports an indeterminate state differently from zero", () => {
-    render(<Progress aria-label="Working" />);
-
-    const bar = screen.getByRole("progressbar");
-    expect(bar).not.toHaveAttribute("aria-valuenow");
-    expect(bar).toHaveAttribute("data-state", "indeterminate");
-  });
-
-  it("treats zero as a real value, not as unknown", () => {
-    render(<Progress value={0} aria-label="Upload" />);
-
-    const bar = screen.getByRole("progressbar");
-    expect(bar).toHaveAttribute("aria-valuenow", "0");
-    expect(bar).toHaveAttribute("data-state", "loading");
-  });
-
-  it("fills proportionally to the value", () => {
-    const { container } = render(<Progress value={25} aria-label="Upload" />);
-    const indicator = container.querySelector("[data-slot='progress-indicator']");
-    expect(indicator).toHaveStyle({ transform: "translateX(-75%)" });
-  });
-
-  it("clamps a value outside the range", () => {
-    const { container } = render(<Progress value={150} aria-label="Upload" max={100} />);
-    const indicator = container.querySelector("[data-slot='progress-indicator']");
-    expect(indicator).toHaveStyle({ transform: "translateX(-0%)" });
-  });
-
-  it.each([
-    ["sm", "h-1"],
-    ["md", "h-2"],
-    ["lg", "h-3"],
-  ] as const)("applies the %s size", (size, expectedClass) => {
-    render(<Progress value={40} size={size} aria-label="Upload" />);
-    expect(screen.getByRole("progressbar")).toHaveClass(expectedClass);
-  });
-
-  it.each([
-    ["primary", "--progress-fill:var(--color-primary)"],
-    ["success", "--progress-fill:var(--color-success)"],
-    ["destructive", "--progress-fill:var(--color-destructive)"],
-  ] as const)("applies the %s tone", (tone, expectedClass) => {
-    render(<Progress value={40} tone={tone} aria-label="Upload" />);
-    expect(screen.getByRole("progressbar").className).toContain(expectedClass);
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    render(<Progress value={40} className="h-6" aria-label="Upload" />);
-    const bar = screen.getByRole("progressbar");
-    expect(bar).toHaveClass("h-6");
-    expect(bar).not.toHaveClass("h-2");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <div>
-        <span id="upload-label">Uploading</span>
-        <Progress value={40} aria-labelledby="upload-label" />
-      </div>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});