@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/switch/switch.stories.tsx

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Label } from "@/components/label";
-
-import { Switch } from "./switch";
-
-const meta = {
-  title: "Forms/Switch",
-  component: Switch,
-  args: { disabled: false },
-  argTypes: { disabled: { control: "boolean" } },
-} satisfies Meta<typeof Switch>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="flex items-center gap-2">
-      <Switch id="airplane" {...args} />
-      <Label htmlFor="airplane">Airplane mode</Label>
-    </div>
-  ),
-};
-
-export const States: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-3">
-      {[
-        { id: "off", label: "Off", checked: false },
-        { id: "on", label: "On", checked: true },
-      ].map((state) => (
-        <div key={state.id} className="flex items-center gap-2">
-          <Switch id={state.id} checked={state.checked} />
-          <Label htmlFor={state.id}>{state.label}</Label>
-        </div>
-      ))}
-      <div className="flex items-center gap-2">
-        <Switch id="disabled-off" disabled />
-        <Label htmlFor="disabled-off">Disabled</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <Switch id="disabled-on" disabled checked />
-        <Label htmlFor="disabled-on">Disabled and on</Label>
-      </div>
-    </div>
-  ),
-};
-
-/** A switch applies immediately — if it needs a Save button, use a Checkbox. */
-export const SettingsRow: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-80 divide-y divide-border rounded-lg border border-border">
-      {[
-        { id: "row-1", label: "Automatic deploys", hint: "Deploy every push to main." },
-        { id: "row-2", label: "Preview comments", hint: "Comment on pull requests." },
-      ].map((row) => (
-        <div key={row.id} className="flex items-start justify-between gap-4 p-4">
-          <div className="grid gap-1">
-            <Label htmlFor={row.id}>{row.label}</Label>
-            <p className="text-xs text-muted-foreground">{row.hint}</p>
-          </div>
-          <Switch id={row.id} defaultChecked={row.id === "row-1"} />
-        </div>
-      ))}
-    </div>
-  ),
-};

package/src/components/switch/switch.test.tsx

@@ -1,101 +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 { Switch } from "./switch";
-
-describe("Switch", () => {
-  it("is exposed as a switch, not a checkbox", () => {
-    render(<Switch aria-label="Airplane mode" />);
-    expect(screen.getByRole("switch", { name: "Airplane mode" })).toBeInTheDocument();
-  });
-
-  it("starts off", () => {
-    render(<Switch aria-label="Airplane mode" />);
-    expect(screen.getByRole("switch")).not.toBeChecked();
-  });
-
-  it("toggles on click", async () => {
-    const user = userEvent.setup();
-    render(<Switch aria-label="Airplane mode" />);
-
-    const control = screen.getByRole("switch");
-    await user.click(control);
-    expect(control).toBeChecked();
-  });
-
-  it("toggles from the keyboard", async () => {
-    const user = userEvent.setup();
-    render(<Switch aria-label="Airplane mode" />);
-
-    await user.tab();
-    expect(screen.getByRole("switch")).toHaveFocus();
-    await user.keyboard(" ");
-    expect(screen.getByRole("switch")).toBeChecked();
-  });
-
-  it("reports changes", async () => {
-    const onCheckedChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Switch aria-label="Airplane mode" onCheckedChange={onCheckedChange} />);
-
-    await user.click(screen.getByRole("switch"));
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
-  });
-
-  it("works controlled", async () => {
-    const user = userEvent.setup();
-
-    function Controlled() {
-      const [on, setOn] = useState(false);
-      return <Switch aria-label="Airplane mode" checked={on} onCheckedChange={setOn} />;
-    }
-
-    render(<Controlled />);
-    await user.click(screen.getByRole("switch"));
-    expect(screen.getByRole("switch")).toBeChecked();
-  });
-
-  it("does not toggle while disabled", async () => {
-    const onCheckedChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Switch aria-label="Airplane mode" disabled onCheckedChange={onCheckedChange} />);
-
-    await user.click(screen.getByRole("switch"));
-    expect(onCheckedChange).not.toHaveBeenCalled();
-  });
-
-  it("moves its thumb to reflect state, not colour alone", async () => {
-    const user = userEvent.setup();
-    const { container } = render(<Switch aria-label="Airplane mode" />);
-
-    const thumb = container.querySelector("[data-slot='switch-thumb']");
-    expect(thumb).toHaveAttribute("data-state", "unchecked");
-
-    await user.click(screen.getByRole("switch"));
-    expect(thumb).toHaveAttribute("data-state", "checked");
-  });
-
-  it("takes its name from an associated label", () => {
-    render(
-      <>
-        <Switch id="wifi" />
-        <Label htmlFor="wifi">Wi-Fi</Label>
-      </>,
-    );
-    expect(screen.getByRole("switch", { name: "Wi-Fi" })).toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <div className="flex items-center gap-2">
-        <Switch id="a11y-wifi" />
-        <Label htmlFor="a11y-wifi">Wi-Fi</Label>
-      </div>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/table/table.stories.tsx

@@ -1,131 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Badge } from "@/components/badge";
-
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "./table";
-
-const INVOICES = [
-  { id: "INV-001", status: "Paid", method: "Credit card", amount: "$250.00" },
-  { id: "INV-002", status: "Pending", method: "PayPal", amount: "$150.00" },
-  { id: "INV-003", status: "Failed", method: "Bank transfer", amount: "$350.00" },
-  { id: "INV-004", status: "Paid", method: "Credit card", amount: "$450.00" },
-];
-
-const meta = {
-  title: "Data/Table",
-  component: Table,
-  parameters: { controls: { disable: true } },
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Table className="w-[36rem]">
-      <TableCaption>Invoices from the last month.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {INVOICES.map((invoice) => (
-          <TableRow key={invoice.id}>
-            {/* A row header, so a screen reader can say which row a cell is in. */}
-            <TableHead scope="row" className="font-medium text-foreground">
-              {invoice.id}
-            </TableHead>
-            <TableCell>
-              <Badge
-                variant={
-                  invoice.status === "Paid"
-                    ? "success"
-                    : invoice.status === "Failed"
-                      ? "destructive"
-                      : "secondary"
-                }
-                size="sm"
-              >
-                {invoice.status}
-              </Badge>
-            </TableCell>
-            <TableCell>{invoice.method}</TableCell>
-            <TableCell className="text-right tabular-nums">{invoice.amount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className="text-right tabular-nums">$1,200.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  ),
-};
-
-export const Minimal: Story = {
-  render: () => (
-    <Table className="w-96" aria-label="Team members">
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Role</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableCell>Ada Lovelace</TableCell>
-          <TableCell>Engineering</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Grace Hopper</TableCell>
-          <TableCell>Engineering</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  ),
-};
-
-/** Overflowing horizontally: the wrapper is focusable so it can be scrolled by keyboard. */
-export const Overflowing: Story = {
-  render: () => (
-    <div className="w-80">
-      <Table aria-label="Wide data">
-        <TableHeader>
-          <TableRow>
-            {Array.from({ length: 8 }, (_, index) => (
-              <TableHead key={index} className="whitespace-nowrap">
-                Column {index + 1}
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {[0, 1, 2].map((row) => (
-            <TableRow key={row}>
-              {Array.from({ length: 8 }, (_, index) => (
-                <TableCell key={index} className="whitespace-nowrap">
-                  Value {row + 1}.{index + 1}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  ),
-};

package/src/components/table/table.test.tsx

@@ -1,153 +0,0 @@
-import { render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "./table";
-
-function Example() {
-  return (
-    <Table>
-      <TableCaption>Recent invoices</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableHead scope="row">INV-001</TableHead>
-          <TableCell>Paid</TableCell>
-          <TableCell>$250.00</TableCell>
-        </TableRow>
-        <TableRow data-state="selected">
-          <TableHead scope="row">INV-002</TableHead>
-          <TableCell>Pending</TableCell>
-          <TableCell>$150.00</TableCell>
-        </TableRow>
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={2}>Total</TableCell>
-          <TableCell>$400.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  );
-}
-
-describe("Table", () => {
-  it("renders a real table, not a grid of divs", () => {
-    render(<Example />);
-    expect(screen.getByRole("table")).toBeInTheDocument();
-  });
-
-  it("is named by its caption", () => {
-    render(<Example />);
-    expect(screen.getByRole("table", { name: "Recent invoices" })).toBeInTheDocument();
-  });
-
-  it("exposes column headers", () => {
-    render(<Example />);
-    const headers = screen.getAllByRole("columnheader");
-    expect(headers.map((header) => header.textContent)).toEqual([
-      "Invoice",
-      "Status",
-      "Amount",
-    ]);
-  });
-
-  it("exposes row headers when scope is set", () => {
-    render(<Example />);
-    expect(screen.getAllByRole("rowheader")).toHaveLength(2);
-  });
-
-  it("groups rows into header, body and footer", () => {
-    render(<Example />);
-    expect(screen.getAllByRole("rowgroup")).toHaveLength(3);
-  });
-
-  it("marks a selected row for styling", () => {
-    render(<Example />);
-    const rows = screen.getAllByRole("row");
-    const selected = rows.find((row) => row.getAttribute("data-state") === "selected");
-    expect(selected).toBeDefined();
-    expect(within(selected as HTMLElement).getByText("Pending")).toBeInTheDocument();
-  });
-
-  describe("the scrolling wrapper", () => {
-    it("is focusable, so an overflowing table can be scrolled by keyboard", async () => {
-      const user = userEvent.setup();
-      const { container } = render(<Example />);
-
-      const wrapper = container.querySelector("[data-slot='table-container']");
-      expect(wrapper).toHaveAttribute("tabindex", "0");
-
-      await user.tab();
-      expect(wrapper).toHaveFocus();
-    });
-
-    it("is a named region, so it is not an unlabelled focus stop", () => {
-      render(<Example />);
-      expect(screen.getByRole("region", { name: "Table" })).toBeInTheDocument();
-    });
-
-    it("takes its name from the table's aria-label", () => {
-      render(
-        <Table aria-label="Invoices">
-          <TableBody>
-            <TableRow>
-              <TableCell>Cell</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>,
-      );
-      expect(screen.getByRole("region", { name: "Invoices" })).toBeInTheDocument();
-    });
-
-    it("accepts props of its own", () => {
-      const { container } = render(
-        <Table containerProps={{ className: "max-h-64", "data-testid": "wrapper" }}>
-          <TableBody>
-            <TableRow>
-              <TableCell>Cell</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>,
-      );
-      expect(container.querySelector("[data-testid='wrapper']")).toHaveClass("max-h-64");
-    });
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    render(
-      <Table className="text-base" aria-label="T">
-        <TableBody>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>,
-    );
-
-    const table = screen.getByRole("table");
-    expect(table).toHaveClass("text-base");
-    expect(table).not.toHaveClass("text-sm");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/tabs/tabs.stories.tsx

@@ -1,139 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Button } from "@/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/card";
-import { Input } from "@/components/input";
-import { Label } from "@/components/label";
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
-
-/**
- * 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 Tabs> = {
-  title: "Navigation/Tabs",
-  component: Tabs,
-  parameters: { controls: { disable: true } },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-export const Default: Story = {
-  render: () => (
-    <Tabs defaultValue="account" className="w-96">
-      <TabsList>
-        <TabsTrigger value="account">Account</TabsTrigger>
-        <TabsTrigger value="password">Password</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <Card>
-          <CardHeader>
-            <CardTitle>Account</CardTitle>
-            <CardDescription>Update your account details.</CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-2">
-            <Label htmlFor="tabs-name">Name</Label>
-            <Input id="tabs-name" defaultValue="Ada Lovelace" />
-          </CardContent>
-          <CardFooter className="justify-end">
-            <Button>Save</Button>
-          </CardFooter>
-        </Card>
-      </TabsContent>
-      <TabsContent value="password">
-        <Card>
-          <CardHeader>
-            <CardTitle>Password</CardTitle>
-            <CardDescription>Change your password here.</CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-2">
-            <Label htmlFor="tabs-password">New password</Label>
-            <Input id="tabs-password" type="password" />
-          </CardContent>
-          <CardFooter className="justify-end">
-            <Button>Update password</Button>
-          </CardFooter>
-        </Card>
-      </TabsContent>
-    </Tabs>
-  ),
-};
-
-export const Underline: Story = {
-  render: () => (
-    <Tabs defaultValue="overview" className="w-96">
-      <TabsList variant="underline">
-        <TabsTrigger value="overview" variant="underline">
-          Overview
-        </TabsTrigger>
-        <TabsTrigger value="deployments" variant="underline">
-          Deployments
-        </TabsTrigger>
-        <TabsTrigger value="settings" variant="underline">
-          Settings
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value="overview" className="text-sm text-muted-foreground">
-        Traffic, errors and latency for the last 24 hours.
-      </TabsContent>
-      <TabsContent value="deployments" className="text-sm text-muted-foreground">
-        42 deployments this week.
-      </TabsContent>
-      <TabsContent value="settings" className="text-sm text-muted-foreground">
-        Environment variables and build settings.
-      </TabsContent>
-    </Tabs>
-  ),
-};
-
-export const WithDisabledTab: Story = {
-  render: () => (
-    <Tabs defaultValue="general" className="w-96">
-      <TabsList>
-        <TabsTrigger value="general">General</TabsTrigger>
-        <TabsTrigger value="team">Team</TabsTrigger>
-        <TabsTrigger value="billing" disabled>
-          Billing
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value="general" className="text-sm text-muted-foreground">
-        General settings.
-      </TabsContent>
-      <TabsContent value="team" className="text-sm text-muted-foreground">
-        Invite and manage teammates.
-      </TabsContent>
-      <TabsContent value="billing" className="text-sm text-muted-foreground">
-        Upgrade to manage billing.
-      </TabsContent>
-    </Tabs>
-  ),
-};
-
-/** Manual activation stops arrow keys from loading each panel in passing. */
-export const ManualActivation: Story = {
-  render: () => (
-    <Tabs defaultValue="one" activationMode="manual" className="w-96">
-      <TabsList>
-        <TabsTrigger value="one">Expensive one</TabsTrigger>
-        <TabsTrigger value="two">Expensive two</TabsTrigger>
-      </TabsList>
-      <TabsContent value="one" className="text-sm text-muted-foreground">
-        Arrow to the next tab, then press Enter or Space to load it.
-      </TabsContent>
-      <TabsContent value="two" className="text-sm text-muted-foreground">
-        Loaded on purpose, not in passing.
-      </TabsContent>
-    </Tabs>
-  ),
-};