@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/radio-group/radio-group.stories.tsx

@@ -1,102 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Label } from "@/components/label";
-
-import { RadioGroup, RadioGroupItem } from "./radio-group";
-
-const meta = {
-  title: "Forms/Radio Group",
-  component: RadioGroup,
-  parameters: { controls: { disable: true } },
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <fieldset>
-      <legend className="mb-3 text-sm font-medium">Density</legend>
-      <RadioGroup defaultValue="comfortable">
-        {[
-          { value: "default", label: "Default" },
-          { value: "comfortable", label: "Comfortable" },
-          { value: "compact", label: "Compact" },
-        ].map((option) => (
-          <div key={option.value} className="flex items-center gap-2">
-            <RadioGroupItem value={option.value} id={option.value} />
-            <Label htmlFor={option.value}>{option.label}</Label>
-          </div>
-        ))}
-      </RadioGroup>
-    </fieldset>
-  ),
-};
-
-export const WithDescriptions: Story = {
-  render: () => (
-    <fieldset className="w-80">
-      <legend className="mb-3 text-sm font-medium">Plan</legend>
-      <RadioGroup defaultValue="pro" className="gap-3">
-        {[
-          { value: "hobby", label: "Hobby", hint: "For personal projects. Free forever." },
-          { value: "pro", label: "Pro", hint: "For teams shipping to production. $20/month." },
-          { value: "enterprise", label: "Enterprise", hint: "SSO, audit logs and support." },
-        ].map((plan) => (
-          <div key={plan.value} className="flex items-start gap-2">
-            <RadioGroupItem value={plan.value} id={plan.value} className="mt-0.5" />
-            <div className="grid gap-1">
-              <Label htmlFor={plan.value}>{plan.label}</Label>
-              <p className="text-xs text-muted-foreground">{plan.hint}</p>
-            </div>
-          </div>
-        ))}
-      </RadioGroup>
-    </fieldset>
-  ),
-};
-
-/** A selected radio cannot be cleared, so offer an explicit "None". */
-export const WithNoneOption: Story = {
-  render: () => (
-    <fieldset>
-      <legend className="mb-3 text-sm font-medium">Notification sound</legend>
-      <RadioGroup defaultValue="none">
-        {[
-          { value: "none", label: "None" },
-          { value: "chime", label: "Chime" },
-          { value: "ping", label: "Ping" },
-        ].map((option) => (
-          <div key={option.value} className="flex items-center gap-2">
-            <RadioGroupItem value={option.value} id={`sound-${option.value}`} />
-            <Label htmlFor={`sound-${option.value}`}>{option.label}</Label>
-          </div>
-        ))}
-      </RadioGroup>
-    </fieldset>
-  ),
-};
-
-export const WithDisabledOption: Story = {
-  render: () => (
-    <fieldset>
-      <legend className="mb-3 text-sm font-medium">Region</legend>
-      <RadioGroup defaultValue="us">
-        {[
-          { value: "us", label: "United States", disabled: false },
-          { value: "eu", label: "Europe", disabled: false },
-          { value: "ap", label: "Asia Pacific (coming soon)", disabled: true },
-        ].map((option) => (
-          <div key={option.value} className="flex items-center gap-2">
-            <RadioGroupItem
-              value={option.value}
-              id={`region-${option.value}`}
-              disabled={option.disabled}
-            />
-            <Label htmlFor={`region-${option.value}`}>{option.label}</Label>
-          </div>
-        ))}
-      </RadioGroup>
-    </fieldset>
-  ),
-};

package/src/components/radio-group/radio-group.test.tsx

@@ -1,152 +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 { RadioGroup, RadioGroupItem } from "./radio-group";
-
-function Example({
-  onValueChange,
-  defaultValue = "comfortable",
-}: {
-  onValueChange?: (value: string) => void;
-  defaultValue?: string;
-} = {}) {
-  return (
-    <>
-      <span id="density-label">Density</span>
-      <RadioGroup
-        aria-labelledby="density-label"
-        defaultValue={defaultValue}
-        onValueChange={onValueChange}
-      >
-        {[
-          { value: "default", label: "Default" },
-          { value: "comfortable", label: "Comfortable" },
-          { value: "compact", label: "Compact", disabled: true },
-        ].map((option) => (
-          <div key={option.value} className="flex items-center gap-2">
-            <RadioGroupItem value={option.value} id={option.value} disabled={option.disabled} />
-            <Label htmlFor={option.value}>{option.label}</Label>
-          </div>
-        ))}
-      </RadioGroup>
-    </>
-  );
-}
-
-describe("RadioGroup", () => {
-  it("exposes a named group of radios", () => {
-    render(<Example />);
-    expect(screen.getByRole("radiogroup", { name: "Density" })).toBeInTheDocument();
-    expect(screen.getAllByRole("radio")).toHaveLength(3);
-  });
-
-  it("marks the default value as checked", () => {
-    render(<Example />);
-    expect(screen.getByRole("radio", { name: "Comfortable" })).toBeChecked();
-    expect(screen.getByRole("radio", { name: "Default" })).not.toBeChecked();
-  });
-
-  it("selects on click", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("radio", { name: "Default" }));
-    expect(screen.getByRole("radio", { name: "Default" })).toBeChecked();
-    expect(screen.getByRole("radio", { name: "Comfortable" })).not.toBeChecked();
-  });
-
-  it("selects via its label", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByText("Default"));
-    expect(screen.getByRole("radio", { name: "Default" })).toBeChecked();
-  });
-
-  it("is a single tab stop", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.tab();
-    expect(screen.getByRole("radio", { name: "Comfortable" })).toHaveFocus();
-
-    await user.tab();
-    expect(screen.getByRole("radio", { name: "Default" })).not.toHaveFocus();
-  });
-
-  it("moves focus with the arrow keys", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.tab();
-    await user.keyboard("{ArrowUp}");
-    expect(screen.getByRole("radio", { name: "Default" })).toHaveFocus();
-
-    await user.keyboard("{ArrowDown}");
-    expect(screen.getByRole("radio", { name: "Comfortable" })).toHaveFocus();
-  });
-
-  // Selection-on-arrow is not asserted here. The primitive sets its
-  // "an arrow key is down" flag from a bubble-phase document listener, but
-  // roving focus moves focus during the item's own keydown handler, so under
-  // jsdom's focus timing the flag is still false when the focus handler runs.
-  // Asserting it would test the simulation, not the behaviour; the real-browser
-  // path is covered by the Storybook a11y run.
-
-  it("does not select a disabled option", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("radio", { name: "Compact" }));
-    expect(screen.getByRole("radio", { name: "Compact" })).not.toBeChecked();
-    expect(screen.getByRole("radio", { name: "Comfortable" })).toBeChecked();
-  });
-
-  it("reports changes", async () => {
-    const onValueChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Example onValueChange={onValueChange} />);
-
-    await user.click(screen.getByRole("radio", { name: "Default" }));
-    expect(onValueChange).toHaveBeenCalledWith("default");
-  });
-
-  it("works controlled", async () => {
-    const user = userEvent.setup();
-
-    function Controlled() {
-      const [value, setValue] = useState("a");
-      return (
-        <RadioGroup aria-label="Choice" value={value} onValueChange={setValue}>
-          <RadioGroupItem value="a" aria-label="A" />
-          <RadioGroupItem value="b" aria-label="B" />
-        </RadioGroup>
-      );
-    }
-
-    render(<Controlled />);
-    await user.click(screen.getByRole("radio", { name: "B" }));
-    expect(screen.getByRole("radio", { name: "B" })).toBeChecked();
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    render(
-      <RadioGroup aria-label="Choice" className="gap-8" data-testid="group">
-        <RadioGroupItem value="a" aria-label="A" />
-      </RadioGroup>,
-    );
-
-    const group = screen.getByTestId("group");
-    expect(group).toHaveClass("gap-8");
-    expect(group).not.toHaveClass("gap-3");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/select/select.stories.tsx

@@ -1,137 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { Label } from "@/components/label";
-
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-64">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "Forms/Select",
-  component: SelectTrigger,
-  args: { triggerSize: "md" },
-  argTypes: { triggerSize: { control: "inline-radio", options: ["sm", "md", "lg"] } },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof SelectTrigger>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="grid gap-2">
-      <Label htmlFor="fruit">Fruit</Label>
-      <Select>
-        <SelectTrigger id="fruit" {...args}>
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="blueberry">Blueberry</SelectItem>
-          <SelectItem value="grapes">Grapes</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  ),
-};
-
-export const Grouped: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-2">
-      <Label htmlFor="food">Food</Label>
-      <Select>
-        <SelectTrigger id="food">
-          <SelectValue placeholder="Select something" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>Vegetables</SelectLabel>
-            <SelectItem value="carrot">Carrot</SelectItem>
-            <SelectItem value="potato">Potato</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  ),
-};
-
-export const WithDisabledOption: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Select>
-      <SelectTrigger aria-label="Plan">
-        <SelectValue placeholder="Select a plan" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="hobby">Hobby</SelectItem>
-        <SelectItem value="pro">Pro</SelectItem>
-        <SelectItem value="enterprise" disabled>
-          Enterprise (contact sales)
-        </SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-};
-
-/** Past about a dozen options, people want to type — reach for Combobox. */
-export const LongList: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Select>
-      <SelectTrigger aria-label="Timezone">
-        <SelectValue placeholder="Select a timezone" />
-      </SelectTrigger>
-      <SelectContent>
-        {Array.from({ length: 24 }, (_, index) => (
-          <SelectItem key={index} value={`utc-${String(index)}`}>
-            UTC{index >= 12 ? "+" : "-"}
-            {String(Math.abs(index - 12)).padStart(2, "0")}:00
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  ),
-};
-
-export const Invalid: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-2">
-      <Label htmlFor="required-select">Region</Label>
-      <Select>
-        <SelectTrigger id="required-select" aria-invalid aria-describedby="region-error">
-          <SelectValue placeholder="Select a region" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="us">United States</SelectItem>
-          <SelectItem value="eu">Europe</SelectItem>
-        </SelectContent>
-      </Select>
-      <p id="region-error" className="text-xs text-destructive">
-        Choose a region to continue.
-      </p>
-    </div>
-  ),
-};

package/src/components/select/select.test.tsx

@@ -1,209 +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 {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
-
-function Example({ onValueChange }: { onValueChange?: (value: string) => void } = {}) {
-  return (
-    <>
-      <span id="fruit-label">Fruit</span>
-      <Select onValueChange={onValueChange}>
-        <SelectTrigger aria-labelledby="fruit-label">
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="cherry" disabled>
-              Cherry
-            </SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectItem value="carrot">Carrot</SelectItem>
-        </SelectContent>
-      </Select>
-    </>
-  );
-}
-
-describe("Select", () => {
-  it("shows the placeholder before anything is chosen", () => {
-    render(<Example />);
-    expect(screen.getByRole("combobox")).toHaveTextContent("Select a fruit");
-  });
-
-  it("is closed until the trigger is activated", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-    await user.click(screen.getByRole("combobox"));
-    expect(await screen.findByRole("listbox")).toBeInTheDocument();
-  });
-
-  it("reports its state on the trigger", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    const trigger = screen.getByRole("combobox");
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-
-    await user.click(trigger);
-    await waitFor(() => {
-      expect(trigger).toHaveAttribute("aria-expanded", "true");
-    });
-  });
-
-  it("selects an option and shows it on the trigger", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("combobox"));
-    await user.click(await screen.findByRole("option", { name: "Banana" }));
-
-    await waitFor(() => {
-      expect(screen.getByRole("combobox")).toHaveTextContent("Banana");
-    });
-  });
-
-  it("reports the selected value", async () => {
-    const onValueChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Example onValueChange={onValueChange} />);
-
-    await user.click(screen.getByRole("combobox"));
-    await user.click(await screen.findByRole("option", { name: "Apple" }));
-
-    expect(onValueChange).toHaveBeenCalledWith("apple");
-  });
-
-  it("opens from the keyboard", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.tab();
-    expect(screen.getByRole("combobox")).toHaveFocus();
-
-    await user.keyboard("{Enter}");
-    expect(await screen.findByRole("listbox")).toBeInTheDocument();
-  });
-
-  it("does not select a disabled option", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("combobox"));
-    const disabled = await screen.findByRole("option", { name: "Cherry" });
-    expect(disabled).toHaveAttribute("data-disabled");
-
-    await user.click(disabled);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-  });
-
-  it("closes on Escape and restores focus", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    const trigger = screen.getByRole("combobox");
-    await user.click(trigger);
-    await screen.findByRole("listbox");
-
-    await user.keyboard("{Escape}");
-    await waitFor(() => {
-      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-    });
-    await waitFor(() => {
-      expect(trigger).toHaveFocus();
-    });
-  });
-
-  it("works controlled", async () => {
-    const user = userEvent.setup();
-
-    function Controlled() {
-      const [value, setValue] = useState("apple");
-      return (
-        <Select value={value} onValueChange={setValue}>
-          <SelectTrigger aria-label="Fruit">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-    }
-
-    render(<Controlled />);
-    expect(screen.getByRole("combobox")).toHaveTextContent("Apple");
-
-    await user.click(screen.getByRole("combobox"));
-    await user.click(await screen.findByRole("option", { name: "Banana" }));
-
-    await waitFor(() => {
-      expect(screen.getByRole("combobox")).toHaveTextContent("Banana");
-    });
-  });
-
-  it.each([
-    ["sm", "h-8"],
-    ["md", "h-9"],
-    ["lg", "h-10"],
-  ] as const)("applies the %s trigger size", (triggerSize, expectedClass) => {
-    render(
-      <Select>
-        <SelectTrigger triggerSize={triggerSize} aria-label="Fruit">
-          <SelectValue placeholder="Pick" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="a">A</SelectItem>
-        </SelectContent>
-      </Select>,
-    );
-    expect(screen.getByRole("combobox")).toHaveClass(expectedClass);
-  });
-
-  it("exposes the invalid state", () => {
-    render(
-      <Select>
-        <SelectTrigger aria-label="Fruit" aria-invalid>
-          <SelectValue placeholder="Pick" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="a">A</SelectItem>
-        </SelectContent>
-      </Select>,
-    );
-    expect(screen.getByRole("combobox")).toHaveAttribute("aria-invalid", "true");
-  });
-
-  it("has no accessibility violations when closed", async () => {
-    const { container } = render(<Example />);
-    await expectNoA11yViolations(container);
-  });
-
-  it("has no accessibility violations while open", async () => {
-    const user = userEvent.setup();
-    const { baseElement } = render(<Example />);
-
-    await user.click(screen.getByRole("combobox"));
-    await screen.findByRole("listbox");
-
-    await expectNoA11yViolations(baseElement);
-  });
-});

package/src/components/separator/separator.stories.tsx

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Separator } from "./separator";
-
-const meta = {
-  title: "Layout/Separator",
-  component: Separator,
-  parameters: { controls: { disable: true } },
-} satisfies Meta<typeof Separator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Horizontal: Story = {
-  render: () => (
-    <div className="w-72">
-      <div className="space-y-1">
-        <h4 className="text-sm font-medium">Radix primitives</h4>
-        <p className="text-sm text-muted-foreground">An open source component library.</p>
-      </div>
-      <Separator className="my-4" />
-      <div className="flex h-5 items-center gap-4 text-sm">
-        <span>Blog</span>
-        <Separator orientation="vertical" />
-        <span>Docs</span>
-        <Separator orientation="vertical" />
-        <span>Source</span>
-      </div>
-    </div>
-  ),
-};
-
-/** Exposed to assistive technology when it divides genuinely distinct groups. */
-export const Semantic: Story = {
-  render: () => (
-    <div className="w-72 space-y-4">
-      <p className="text-sm">Account settings</p>
-      <Separator decorative={false} />
-      <p className="text-sm">Danger zone</p>
-    </div>
-  ),
-};

package/src/components/separator/separator.test.tsx

@@ -1,46 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Separator } from "./separator";
-
-describe("Separator", () => {
-  it("is decorative by default and stays out of the accessibility tree", () => {
-    render(<Separator data-testid="rule" />);
-    expect(screen.getByTestId("rule")).toHaveAttribute("role", "none");
-    expect(screen.queryByRole("separator")).not.toBeInTheDocument();
-  });
-
-  it("exposes a separator role when it is not decorative", () => {
-    render(<Separator decorative={false} />);
-    expect(screen.getByRole("separator")).toBeInTheDocument();
-  });
-
-  it("renders horizontally by default", () => {
-    render(<Separator data-testid="rule" />);
-    expect(screen.getByTestId("rule")).toHaveClass("h-px", "w-full");
-  });
-
-  it("renders vertically when asked", () => {
-    render(<Separator orientation="vertical" data-testid="rule" />);
-    const rule = screen.getByTestId("rule");
-    expect(rule).toHaveClass("w-px", "h-full");
-    expect(rule).toHaveAttribute("data-orientation", "vertical");
-  });
-
-  it("merges a consumer className", () => {
-    render(<Separator className="my-4" data-testid="rule" />);
-    expect(screen.getByTestId("rule")).toHaveClass("my-4", "bg-border");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <div>
-        <p>Above</p>
-        <Separator decorative={false} />
-        <p>Below</p>
-      </div>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});