@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/card/card.test.tsx

@@ -1,66 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
-
-describe("Card", () => {
-  it("renders every part", () => {
-    render(
-      <Card>
-        <CardHeader>
-          <CardTitle>Create project</CardTitle>
-          <CardDescription>Projects group your deployments.</CardDescription>
-        </CardHeader>
-        <CardContent>Body</CardContent>
-        <CardFooter>Footer</CardFooter>
-      </Card>,
-    );
-
-    expect(screen.getByRole("heading", { name: "Create project" })).toBeInTheDocument();
-    expect(screen.getByText("Projects group your deployments.")).toBeInTheDocument();
-    expect(screen.getByText("Body")).toBeInTheDocument();
-    expect(screen.getByText("Footer")).toBeInTheDocument();
-  });
-
-  it("renders the title as a level 3 heading by default", () => {
-    render(<CardTitle>Title</CardTitle>);
-    expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent("Title");
-  });
-
-  it("exposes slot attributes for styling hooks", () => {
-    const { container } = render(
-      <Card>
-        <CardHeader>
-          <CardTitle>Title</CardTitle>
-        </CardHeader>
-      </Card>,
-    );
-    expect(container.querySelector("[data-slot='card']")).toBeInTheDocument();
-    expect(container.querySelector("[data-slot='card-header']")).toBeInTheDocument();
-  });
-
-  it("merges a consumer className on every part", () => {
-    const { container } = render(<Card className="max-w-sm">Content</Card>);
-    const card = container.querySelector("[data-slot='card']");
-    expect(card).toHaveClass("max-w-sm", "bg-card");
-  });
-
-  it("forwards arbitrary props", () => {
-    render(<Card data-testid="card">Content</Card>);
-    expect(screen.getByTestId("card")).toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <Card>
-        <CardHeader>
-          <CardTitle>Create project</CardTitle>
-          <CardDescription>Projects group your deployments.</CardDescription>
-        </CardHeader>
-        <CardContent>Body</CardContent>
-      </Card>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/checkbox/checkbox.stories.tsx

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { Label } from "@/components/label";
-
-import { Checkbox } from "./checkbox";
-
-const meta = {
-  title: "Forms/Checkbox",
-  component: Checkbox,
-  args: { disabled: false },
-  argTypes: { disabled: { control: "boolean" } },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="flex items-center gap-2">
-      <Checkbox id="terms" {...args} />
-      <Label htmlFor="terms">Accept terms and conditions</Label>
-    </div>
-  ),
-};
-
-export const WithDescription: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-start gap-2">
-      <Checkbox id="marketing" className="mt-0.5" />
-      <div className="grid gap-1">
-        <Label htmlFor="marketing">Product updates</Label>
-        <p className="text-xs text-muted-foreground">
-          Occasional email about new features. No more than once a month.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const States: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-3">
-      {[
-        { id: "s1", label: "Unchecked", checked: false as const },
-        { id: "s2", label: "Checked", checked: true as const },
-        { id: "s3", label: "Indeterminate", checked: "indeterminate" as const },
-      ].map((state) => (
-        <div key={state.id} className="flex items-center gap-2">
-          <Checkbox id={state.id} checked={state.checked} />
-          <Label htmlFor={state.id}>{state.label}</Label>
-        </div>
-      ))}
-      <div className="flex items-center gap-2">
-        <Checkbox id="s4" disabled />
-        <Label htmlFor="s4">Disabled</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <Checkbox id="s5" disabled checked />
-        <Label htmlFor="s5">Disabled and checked</Label>
-      </div>
-    </div>
-  ),
-};
-
-/** Indeterminate summarises a partial selection; the user never cycles into it. */
-export const SelectAll: Story = {
-  parameters: { controls: { disable: true } },
-  render: function SelectAll() {
-    const items = ["Analytics", "Deployments", "Logs"];
-    const [selected, setSelected] = useState<string[]>(["Analytics"]);
-
-    const all = selected.length === items.length;
-    const some = selected.length > 0 && !all;
-
-    return (
-      <div className="grid gap-3">
-        <div className="flex items-center gap-2">
-          <Checkbox
-            id="all"
-            checked={all ? true : some ? "indeterminate" : false}
-            onCheckedChange={(checked) => {
-              setSelected(checked === true ? items : []);
-            }}
-          />
-          <Label htmlFor="all">Select all</Label>
-        </div>
-        <div className="ml-6 grid gap-3">
-          {items.map((item) => (
-            <div key={item} className="flex items-center gap-2">
-              <Checkbox
-                id={item}
-                checked={selected.includes(item)}
-                onCheckedChange={(checked) => {
-                  setSelected((current) =>
-                    checked ? [...current, item] : current.filter((entry) => entry !== item),
-                  );
-                }}
-              />
-              <Label htmlFor={item}>{item}</Label>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Invalid: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-2">
-      <div className="flex items-center gap-2">
-        <Checkbox id="invalid" aria-invalid aria-describedby="invalid-error" />
-        <Label htmlFor="invalid">Accept terms</Label>
-      </div>
-      <p id="invalid-error" className="text-xs text-destructive">
-        You must accept the terms to continue.
-      </p>
-    </div>
-  ),
-};

package/src/components/checkbox/checkbox.test.tsx

@@ -1,121 +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 { Label } from "../label";
-import { Checkbox } from "./checkbox";
-
-describe("Checkbox", () => {
-  it("renders unchecked by default", () => {
-    render(<Checkbox aria-label="Accept terms" />);
-    expect(screen.getByRole("checkbox", { name: "Accept terms" })).not.toBeChecked();
-  });
-
-  it("takes its accessible name from an associated label", () => {
-    render(
-      <>
-        <Checkbox id="terms" />
-        <Label htmlFor="terms">Accept terms</Label>
-      </>,
-    );
-    expect(screen.getByRole("checkbox", { name: "Accept terms" })).toBeInTheDocument();
-  });
-
-  it("toggles on click", async () => {
-    const user = userEvent.setup();
-    render(<Checkbox aria-label="Accept" />);
-
-    const checkbox = screen.getByRole("checkbox");
-    await user.click(checkbox);
-    expect(checkbox).toBeChecked();
-
-    await user.click(checkbox);
-    expect(checkbox).not.toBeChecked();
-  });
-
-  it("toggles with the Space key", async () => {
-    const user = userEvent.setup();
-    render(<Checkbox aria-label="Accept" />);
-
-    await user.tab();
-    expect(screen.getByRole("checkbox")).toHaveFocus();
-
-    await user.keyboard(" ");
-    expect(screen.getByRole("checkbox")).toBeChecked();
-  });
-
-  it("reports changes", async () => {
-    const onCheckedChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Checkbox aria-label="Accept" onCheckedChange={onCheckedChange} />);
-
-    await user.click(screen.getByRole("checkbox"));
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
-  });
-
-  it("works controlled", async () => {
-    const user = userEvent.setup();
-
-    function Controlled() {
-      const [checked, setChecked] = useState(false);
-      // onCheckedChange yields CheckedState (boolean | "indeterminate"), not a
-      // boolean — indeterminate is a state the application sets, so a boolean
-      // store narrows it here rather than widening the state.
-      return (
-        <Checkbox
-          aria-label="Accept"
-          checked={checked}
-          onCheckedChange={(next) => {
-            setChecked(next === true);
-          }}
-        />
-      );
-    }
-
-    render(<Controlled />);
-    const checkbox = screen.getByRole("checkbox");
-    await user.click(checkbox);
-    expect(checkbox).toBeChecked();
-  });
-
-  it("announces the indeterminate state as mixed", () => {
-    render(<Checkbox aria-label="Select all" checked="indeterminate" />);
-    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-checked", "mixed");
-    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "indeterminate");
-  });
-
-  it("does not toggle while disabled", async () => {
-    const onCheckedChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Checkbox aria-label="Accept" disabled onCheckedChange={onCheckedChange} />);
-
-    const checkbox = screen.getByRole("checkbox");
-    expect(checkbox).toBeDisabled();
-    await user.click(checkbox);
-    expect(onCheckedChange).not.toHaveBeenCalled();
-  });
-
-  it("exposes the invalid state", () => {
-    render(<Checkbox aria-label="Accept" aria-invalid />);
-    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid", "true");
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    render(<Checkbox aria-label="Accept" className="size-6" />);
-    const checkbox = screen.getByRole("checkbox");
-    expect(checkbox).toHaveClass("size-6");
-    expect(checkbox).not.toHaveClass("size-4");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <div className="flex items-center gap-2">
-        <Checkbox id="a11y-terms" />
-        <Label htmlFor="a11y-terms">Accept terms</Label>
-      </div>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/code-block/code-block.stories.tsx

@@ -1,62 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { CodeBlock } from "./code-block";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-[34rem]">
-    <Story />
-  </div>
-);
-
-const SAMPLE = `export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}`;
-
-const meta = {
-  title: "Data/Code Block",
-  component: CodeBlock,
-  args: { language: "ts", children: SAMPLE },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof CodeBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithFilename: Story = {
-  args: { title: "lib/utils.ts" },
-};
-
-export const WithoutCopy: Story = {
-  args: { hideCopy: true },
-};
-
-/** Overflowing code: the pre is focusable, so it can be scrolled by keyboard. */
-export const Overflowing: Story = {
-  args: {
-    title: "one-liner.ts",
-    children:
-      'const message = "a single very long line that runs well past the edge of the container and keeps going for a while yet";',
-  },
-};
-
-/**
- * Highlighting is left to the application. Pass rendered markup as children and
- * the real text as `code`, since reading text back out of highlighted DOM loses
- * whitespace in ways that break pasted code.
- */
-export const PreHighlighted: Story = {
-  args: {
-    title: "highlighted.ts",
-    code: 'const answer = "Paris";',
-    children: (
-      <>
-        <span className="text-info">const</span> answer{" "}
-        <span className="text-muted-foreground">=</span>{" "}
-        <span className="text-success">&quot;Paris&quot;</span>;
-      </>
-    ),
-  },
-};

package/src/components/code-block/code-block.test.tsx

@@ -1,139 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { CodeBlock } from "./code-block";
-
-const SAMPLE = 'const answer = "Paris";';
-
-/**
- * Replaces the clipboard.
- *
- * Must be called *after* `userEvent.setup()`, which installs a clipboard stub
- * of its own — applying ours first means testing theirs.
- */
-function mockClipboard(impl: () => Promise<void>) {
-  const writeText = vi.fn(impl);
-  Object.defineProperty(navigator, "clipboard", {
-    value: { writeText },
-    configurable: true,
-  });
-  return writeText;
-}
-
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
-describe("CodeBlock", () => {
-  it("renders the code", () => {
-    render(<CodeBlock language="ts">{SAMPLE}</CodeBlock>);
-    expect(screen.getByText(SAMPLE)).toBeInTheDocument();
-  });
-
-  it("shows the language in the header", () => {
-    render(<CodeBlock language="typescript">{SAMPLE}</CodeBlock>);
-    expect(screen.getByText("typescript")).toBeInTheDocument();
-  });
-
-  it("prefers a title over the language", () => {
-    render(
-      <CodeBlock language="ts" title="button.tsx">
-        {SAMPLE}
-      </CodeBlock>,
-    );
-    expect(screen.getByText("button.tsx")).toBeInTheDocument();
-    expect(screen.queryByText("ts")).not.toBeInTheDocument();
-  });
-
-  it("is a focusable named region, since code scrolls sideways", () => {
-    render(<CodeBlock language="ts">{SAMPLE}</CodeBlock>);
-
-    const region = screen.getByRole("region", { name: "ts code" });
-    expect(region).toHaveAttribute("tabindex", "0");
-  });
-
-  it("names the region after the title when there is one", () => {
-    render(<CodeBlock title="button.tsx">{SAMPLE}</CodeBlock>);
-    expect(screen.getByRole("region", { name: "button.tsx" })).toBeInTheDocument();
-  });
-
-  it("renders markup a highlighter has already produced", () => {
-    render(
-      <CodeBlock language="ts" code={SAMPLE}>
-        <span className="token">const</span>
-        <span> answer</span>
-      </CodeBlock>,
-    );
-    expect(screen.getByText("const")).toBeInTheDocument();
-  });
-
-  describe("copying", () => {
-    it("copies the text content", async () => {
-      const user = userEvent.setup();
-      const writeText = mockClipboard(() => Promise.resolve());
-      render(<CodeBlock language="ts">{SAMPLE}</CodeBlock>);
-
-      await user.click(screen.getByRole("button", { name: "Copy code" }));
-      expect(writeText).toHaveBeenCalledWith(SAMPLE);
-    });
-
-    it("prefers the explicit code prop over reading the DOM", async () => {
-      const user = userEvent.setup();
-      const writeText = mockClipboard(() => Promise.resolve());
-      render(
-        <CodeBlock language="ts" code={SAMPLE}>
-          <span>const</span>
-          <span> answer</span>
-        </CodeBlock>,
-      );
-
-      // Reading highlighted DOM back loses whitespace in ways that break pasted
-      // code, which is why `code` exists.
-      await user.click(screen.getByRole("button", { name: "Copy code" }));
-      expect(writeText).toHaveBeenCalledWith(SAMPLE);
-    });
-
-    it("announces success, not just draws a tick", async () => {
-      const user = userEvent.setup();
-      mockClipboard(() => Promise.resolve());
-      render(<CodeBlock language="ts">{SAMPLE}</CodeBlock>);
-
-      await user.click(screen.getByRole("button", { name: "Copy code" }));
-      await waitFor(() => {
-        expect(screen.getByRole("status")).toHaveTextContent("Copied");
-      });
-    });
-
-    it("reports a refused clipboard rather than looking like success", async () => {
-      const user = userEvent.setup();
-      mockClipboard(() => Promise.reject(new Error("denied")));
-      render(<CodeBlock language="ts">{SAMPLE}</CodeBlock>);
-
-      await user.click(screen.getByRole("button", { name: "Copy code" }));
-      await waitFor(() => {
-        expect(screen.getByRole("status")).toHaveTextContent("Copy failed");
-      });
-    });
-
-    it("can be hidden", () => {
-      render(
-        <CodeBlock language="ts" hideCopy>
-          {SAMPLE}
-        </CodeBlock>,
-      );
-      expect(screen.queryByRole("button", { name: "Copy code" })).not.toBeInTheDocument();
-    });
-  });
-
-  it("has no accessibility violations", async () => {
-    mockClipboard(() => Promise.resolve());
-    const { container } = render(
-      <CodeBlock language="ts" title="answer.ts">
-        {SAMPLE}
-      </CodeBlock>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/combobox/combobox.stories.tsx

@@ -1,171 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { Label } from "@/components/label";
-
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-  ComboboxTrigger,
-} from "./combobox";
-
-const FRAMEWORKS = [
-  { value: "Next.js", keywords: ["vercel", "react", "ssr"] },
-  { value: "SvelteKit", keywords: ["svelte"] },
-  { value: "Nuxt", keywords: ["vue"] },
-  { value: "Remix", keywords: ["react"] },
-  { value: "Astro", keywords: ["islands", "content"] },
-  { value: "SolidStart", keywords: ["solid"] },
-];
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-64">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "Forms/Combobox",
-  component: Combobox,
-  parameters: { controls: { disable: true } },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Combobox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="grid gap-2">
-      <Label id="framework-label">Framework</Label>
-      <Combobox>
-        <ComboboxTrigger aria-labelledby="framework-label" placeholder="Select framework…" />
-        <ComboboxContent label="Search frameworks">
-          <ComboboxInput placeholder="Search framework…" aria-label="Search framework" />
-          <ComboboxEmpty>No framework found.</ComboboxEmpty>
-          <ComboboxList>
-            {FRAMEWORKS.map((framework) => (
-              <ComboboxItem
-                key={framework.value}
-                value={framework.value}
-                keywords={framework.keywords}
-              />
-            ))}
-          </ComboboxList>
-        </ComboboxContent>
-      </Combobox>
-    </div>
-  ),
-};
-
-/** Keywords are searchable but never shown — try typing "vercel" or "vue". */
-export const HiddenKeywords: Story = {
-  render: () => (
-    <Combobox>
-      <ComboboxTrigger aria-label="Framework" placeholder="Try typing 'vue'…" />
-      <ComboboxContent label="Search frameworks">
-        <ComboboxInput placeholder="Search framework…" aria-label="Search framework" />
-        <ComboboxEmpty>No framework found.</ComboboxEmpty>
-        <ComboboxList>
-          {FRAMEWORKS.map((framework) => (
-            <ComboboxItem
-              key={framework.value}
-              value={framework.value}
-              keywords={framework.keywords}
-            />
-          ))}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  ),
-};
-
-export const RichOptions: Story = {
-  render: () => (
-    <Combobox>
-      <ComboboxTrigger aria-label="Assignee" placeholder="Assign to…" />
-      <ComboboxContent label="Search people">
-        <ComboboxInput placeholder="Search people…" aria-label="Search people" />
-        <ComboboxEmpty>No one found.</ComboboxEmpty>
-        <ComboboxList>
-          {[
-            { value: "Ada Lovelace", role: "Engineering" },
-            { value: "Grace Hopper", role: "Engineering" },
-            { value: "Katherine Johnson", role: "Research" },
-          ].map((person) => (
-            <ComboboxItem key={person.value} value={person.value} keywords={[person.role]}>
-              <span className="flex-1 truncate">{person.value}</span>
-              <span className="text-xs text-muted-foreground">{person.role}</span>
-            </ComboboxItem>
-          ))}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  ),
-};
-
-export const WithDisabledOption: Story = {
-  render: () => (
-    <Combobox>
-      <ComboboxTrigger aria-label="Plan" placeholder="Select a plan…" />
-      <ComboboxContent label="Search plans">
-        <ComboboxInput placeholder="Search plans…" aria-label="Search plans" />
-        <ComboboxEmpty>No plan found.</ComboboxEmpty>
-        <ComboboxList>
-          <ComboboxItem value="Hobby" />
-          <ComboboxItem value="Pro" />
-          <ComboboxItem value="Enterprise" disabled>
-            Enterprise (contact sales)
-          </ComboboxItem>
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  ),
-};
-
-export const Controlled: Story = {
-  render: function Controlled() {
-    const [value, setValue] = useState("Astro");
-    return (
-      <div className="grid gap-3">
-        <Combobox value={value} onValueChange={setValue}>
-          <ComboboxTrigger aria-label="Framework" />
-          <ComboboxContent label="Search frameworks">
-            <ComboboxInput placeholder="Search framework…" aria-label="Search framework" />
-            <ComboboxEmpty>No framework found.</ComboboxEmpty>
-            <ComboboxList>
-              {FRAMEWORKS.map((framework) => (
-                <ComboboxItem key={framework.value} value={framework.value} />
-              ))}
-            </ComboboxList>
-          </ComboboxContent>
-        </Combobox>
-        <p className="text-xs text-muted-foreground">Selected: {value}</p>
-      </div>
-    );
-  },
-};
-
-export const LongList: Story = {
-  render: () => (
-    <Combobox>
-      <ComboboxTrigger aria-label="Timezone" placeholder="Select a timezone…" />
-      <ComboboxContent label="Search timezones">
-        <ComboboxInput placeholder="Search timezones…" aria-label="Search timezones" />
-        <ComboboxEmpty>No timezone found.</ComboboxEmpty>
-        <ComboboxList>
-          {Array.from({ length: 40 }, (_, index) => {
-            const offset = index - 12;
-            const label = `UTC${offset >= 0 ? "+" : "-"}${String(Math.abs(offset)).padStart(2, "0")}:00`;
-            return <ComboboxItem key={index} value={`${label} · Zone ${String(index + 1)}`} />;
-          })}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  ),
-};