@dowel-ui/react 0.1.0 → 0.1.1

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

@@ -1,288 +0,0 @@
-import {
-  columnVisibilityFeature,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  rowPaginationFeature,
-  rowSortingFeature,
-  tableFeatures,
-  useTable,
-} from "@tanstack/react-table";
-import { render, screen, waitFor, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import {
-  DataTable,
-  DataTableColumnHeader,
-  DataTablePagination,
-  DataTableViewOptions,
-} from "./data-table";
-
-/**
- * Driven by a real table instance rather than a stub, because the point of
- * these components is that they present whatever the table library produces.
- */
-
-interface Person {
-  name: string;
-  role: string;
-  age: number;
-}
-
-const PEOPLE: Person[] = [
-  { name: "Ada Lovelace", role: "Engineering", age: 36 },
-  { name: "Grace Hopper", role: "Engineering", age: 45 },
-  { name: "Katherine Johnson", role: "Research", age: 52 },
-  { name: "Radia Perlman", role: "Networking", age: 41 },
-];
-
-const features = tableFeatures({
-  rowSortingFeature,
-  rowPaginationFeature,
-  columnVisibilityFeature,
-  sortedRowModel: createSortedRowModel(),
-  paginatedRowModel: createPaginatedRowModel(),
-});
-
-function useDemoTable(data: Person[] = PEOPLE, pageSize = 10) {
-  return useTable({
-    features,
-    data,
-    initialState: { pagination: { pageIndex: 0, pageSize } },
-    columns: [
-      {
-        accessorKey: "name",
-        header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-      },
-      { accessorKey: "role", header: "Role", enableSorting: false },
-      {
-        accessorKey: "age",
-        header: ({ column }) => <DataTableColumnHeader column={column} title="Age" />,
-      },
-    ],
-  });
-}
-
-function Example({ data, pageSize }: { data?: Person[]; pageSize?: number } = {}) {
-  const table = useDemoTable(data, pageSize);
-  return (
-    <div>
-      <DataTableViewOptions table={table} />
-      <DataTable table={table} aria-label="People" />
-      <DataTablePagination table={table} />
-    </div>
-  );
-}
-
-function rowTexts(): string[][] {
-  const body = screen.getAllByRole("rowgroup")[1];
-  if (!body) return [];
-  return within(body)
-    .getAllByRole("row")
-    .map((row) =>
-      within(row)
-        .getAllByRole("cell")
-        .map((cell) => cell.textContent ?? ""),
-    );
-}
-
-describe("DataTable", () => {
-  it("renders a row per record and a cell per column", () => {
-    render(<Example />);
-    const rows = rowTexts();
-    expect(rows).toHaveLength(4);
-    expect(rows[0]).toEqual(["Ada Lovelace", "Engineering", "36"]);
-  });
-
-  it("renders the header for each column", () => {
-    render(<Example />);
-    expect(screen.getByRole("columnheader", { name: /Name/ })).toBeInTheDocument();
-    expect(screen.getByRole("columnheader", { name: "Role" })).toBeInTheDocument();
-  });
-
-  it("marks sortable columns with aria-sort", () => {
-    render(<Example />);
-    expect(screen.getByRole("columnheader", { name: /Name/ })).toHaveAttribute(
-      "aria-sort",
-      "none",
-    );
-  });
-
-  it("does not claim a non-sortable column is sortable", () => {
-    render(<Example />);
-    expect(screen.getByRole("columnheader", { name: "Role" })).not.toHaveAttribute("aria-sort");
-  });
-
-  it("shows an empty message when there are no rows", () => {
-    render(<Example data={[]} />);
-    expect(screen.getByText("No results.")).toBeInTheDocument();
-  });
-
-  it("accepts a custom empty state", () => {
-    function CustomEmpty() {
-      const table = useDemoTable([]);
-      return <DataTable table={table} empty={<span>Nothing to show yet.</span>} />;
-    }
-
-    render(<CustomEmpty />);
-    expect(screen.getByText("Nothing to show yet.")).toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example />);
-    await expectNoA11yViolations(container);
-  });
-});
-
-describe("DataTableColumnHeader", () => {
-  it("renders a sortable column as a button", () => {
-    render(<Example />);
-    expect(screen.getByRole("button", { name: /Name, not sorted/ })).toBeInTheDocument();
-  });
-
-  it("renders a non-sortable column as text, not a dead button", () => {
-    render(<Example />);
-    expect(screen.queryByRole("button", { name: /Role/ })).not.toBeInTheDocument();
-    expect(screen.getByRole("columnheader", { name: "Role" })).toBeInTheDocument();
-  });
-
-  it("sorts ascending, and says so in text as well as in aria-sort", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: /Name, not sorted/ }));
-    await user.click(await screen.findByRole("menuitem", { name: "Sort ascending" }));
-
-    await waitFor(() => {
-      expect(screen.getByRole("columnheader", { name: /Name/ })).toHaveAttribute(
-        "aria-sort",
-        "ascending",
-      );
-    });
-    expect(screen.getByRole("button", { name: /Name, sorted ascending/ })).toBeInTheDocument();
-    expect(rowTexts()[0]?.[0]).toBe("Ada Lovelace");
-  });
-
-  it("sorts descending", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: /Name, not sorted/ }));
-    await user.click(await screen.findByRole("menuitem", { name: "Sort descending" }));
-
-    await waitFor(() => {
-      expect(screen.getByRole("columnheader", { name: /Name/ })).toHaveAttribute(
-        "aria-sort",
-        "descending",
-      );
-    });
-    expect(rowTexts()[0]?.[0]).toBe("Radia Perlman");
-  });
-
-  it("actually reorders the rows when sorting a numeric column", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: /Age, not sorted/ }));
-    await user.click(await screen.findByRole("menuitem", { name: "Sort descending" }));
-
-    await waitFor(() => {
-      expect(rowTexts()[0]?.[2]).toBe("52");
-    });
-  });
-});
-
-describe("DataTableViewOptions", () => {
-  it("lists the hideable columns", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: "Columns" }));
-    for (const id of ["name", "role", "age"]) {
-      expect(await screen.findByRole("menuitemcheckbox", { name: id })).toBeInTheDocument();
-    }
-  });
-
-  it("hides a column when toggled off", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: "Columns" }));
-    await user.click(await screen.findByRole("menuitemcheckbox", { name: "role" }));
-
-    await waitFor(() => {
-      expect(screen.queryByRole("columnheader", { name: "Role" })).not.toBeInTheDocument();
-    });
-    expect(rowTexts()[0]).toEqual(["Ada Lovelace", "36"]);
-  });
-});
-
-describe("DataTablePagination", () => {
-  it("reports the page position in a live region", () => {
-    render(<Example pageSize={2} />);
-
-    const status = screen.getByText(/Page 1 of 2/);
-    expect(status).toHaveAttribute("aria-live", "polite");
-  });
-
-  it("moves between pages", async () => {
-    const user = userEvent.setup();
-    render(<Example pageSize={2} />);
-
-    expect(rowTexts()).toHaveLength(2);
-    expect(rowTexts()[0]?.[0]).toBe("Ada Lovelace");
-
-    await user.click(screen.getByRole("button", { name: "Go to next page" }));
-    await waitFor(() => {
-      expect(rowTexts()[0]?.[0]).toBe("Katherine Johnson");
-    });
-    expect(screen.getByText(/Page 2 of 2/)).toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Go to previous page" }));
-    await waitFor(() => {
-      expect(rowTexts()[0]?.[0]).toBe("Ada Lovelace");
-    });
-  });
-
-  it("disables the controls at the ends", async () => {
-    const user = userEvent.setup();
-    render(<Example pageSize={2} />);
-
-    expect(screen.getByRole("button", { name: "Go to previous page" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "Go to next page" })).toBeEnabled();
-
-    await user.click(screen.getByRole("button", { name: "Go to next page" }));
-    await waitFor(() => {
-      expect(screen.getByRole("button", { name: "Go to next page" })).toBeDisabled();
-    });
-  });
-
-  it("changes the page size", async () => {
-    const user = userEvent.setup();
-    render(<Example pageSize={2} />);
-
-    await user.click(screen.getByRole("combobox", { name: "Rows per page" }));
-    await user.click(await screen.findByRole("option", { name: "10" }));
-
-    await waitFor(() => {
-      expect(rowTexts()).toHaveLength(4);
-    });
-  });
-
-  it("accepts a status slot in place of the page position", () => {
-    function WithStatus() {
-      const table = useDemoTable();
-      return <DataTablePagination table={table} status="2 of 4 rows selected" />;
-    }
-
-    render(<WithStatus />);
-    expect(screen.getByText("2 of 4 rows selected")).toBeInTheDocument();
-    expect(screen.queryByText(/Page 1 of/)).not.toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example pageSize={2} />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/date-picker/date-picker.stories.tsx

@@ -1,103 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import type { DateRange } from "react-day-picker";
-
-import { Input } from "@/components/input";
-import { Label } from "@/components/label";
-
-import { DatePicker, DateRangePicker } from "./date-picker";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-64">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "Forms/Date Picker",
-  component: DatePicker,
-  args: { placeholder: "Pick a date" },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof DatePicker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="grid gap-2">
-      <Label>Start date</Label>
-      <DatePicker {...args} />
-    </div>
-  ),
-};
-
-export const WithValue: Story = {
-  args: { defaultValue: new Date(2026, 0, 15) },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, defaultValue: new Date(2026, 0, 15) },
-};
-
-/** The trigger label follows the locale, and so does its accessible name. */
-export const Locales: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-3">
-      {["en-US", "en-GB", "de-DE", "ja-JP"].map((locale) => (
-        <div key={locale} className="grid gap-1">
-          <span className="text-xs text-muted-foreground">{locale}</span>
-          <DatePicker defaultValue={new Date(2026, 0, 15)} locale={locale} />
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const Range: Story = {
-  parameters: { controls: { disable: true } },
-  render: function Range() {
-    const [range, setRange] = useState<DateRange | undefined>({
-      from: new Date(2026, 0, 10),
-      to: new Date(2026, 0, 16),
-    });
-    return (
-      <div className="grid w-80 gap-2">
-        <Label>Reporting period</Label>
-        <DateRangePicker value={range} onValueChange={setRange} />
-      </div>
-    );
-  },
-};
-
-/**
- * A calendar is for browsing. For a date the user already knows, typing is
- * faster — offer both rather than forcing the picker.
- */
-export const PairedWithTypedInput: Story = {
-  parameters: { controls: { disable: true } },
-  render: function Paired() {
-    const [date, setDate] = useState<Date | undefined>(new Date(2026, 0, 15));
-    const isoValue = date ? date.toISOString().slice(0, 10) : "";
-
-    return (
-      <div className="grid gap-2">
-        <Label htmlFor="dob">Date of birth</Label>
-        <div className="flex gap-2">
-          <Input
-            id="dob"
-            type="date"
-            value={isoValue}
-            onChange={(event) => {
-              const next = event.target.valueAsDate;
-              setDate(next ?? undefined);
-            }}
-          />
-          <DatePicker value={date} onValueChange={setDate} className="w-auto" />
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/date-picker/date-picker.test.tsx

@@ -1,205 +0,0 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useState } from "react";
-import type { DateRange } from "react-day-picker";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { DatePicker, DateRangePicker } from "./date-picker";
-
-const JANUARY_2026 = new Date(2026, 0, 15);
-
-function dayButton(iso: string): HTMLElement {
-  const cell = document.querySelector<HTMLElement>(`[data-day="${iso}"]`);
-  if (!cell) throw new Error(`No day cell for ${iso}`);
-  return within(cell).getByRole("button");
-}
-
-describe("DatePicker", () => {
-  it("shows the placeholder until a date is picked", () => {
-    render(<DatePicker />);
-    expect(screen.getByRole("button")).toHaveTextContent("Pick a date");
-  });
-
-  it("formats the selected date for the locale", () => {
-    render(<DatePicker value={JANUARY_2026} locale="en-GB" />);
-    expect(screen.getByRole("button")).toHaveTextContent("15 Jan 2026");
-  });
-
-  it("formats differently for a different locale", () => {
-    render(<DatePicker value={JANUARY_2026} locale="en-US" />);
-    expect(screen.getByRole("button")).toHaveTextContent("Jan 15, 2026");
-  });
-
-  it("opens the calendar from its trigger", async () => {
-    const user = userEvent.setup();
-    render(<DatePicker />);
-
-    expect(screen.queryByRole("grid")).not.toBeInTheDocument();
-    await user.click(screen.getByRole("button"));
-    expect(await screen.findByRole("grid")).toBeInTheDocument();
-  });
-
-  it("names the popover, which carries a dialog role", async () => {
-    const user = userEvent.setup();
-    render(<DatePicker label="Choose a start date" />);
-
-    await user.click(screen.getByRole("button"));
-    expect(
-      await screen.findByRole("dialog", { name: "Choose a start date" }),
-    ).toBeInTheDocument();
-  });
-
-  it("reports and displays the picked date, then closes", async () => {
-    const onValueChange = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <DatePicker defaultValue={JANUARY_2026} onValueChange={onValueChange} locale="en-GB" />,
-    );
-
-    await user.click(screen.getByRole("button"));
-    await screen.findByRole("grid");
-    await user.click(dayButton("2026-01-20"));
-
-    expect(onValueChange).toHaveBeenCalled();
-    await waitFor(() => {
-      expect(screen.queryByRole("grid")).not.toBeInTheDocument();
-    });
-    expect(screen.getByRole("button")).toHaveTextContent("20 Jan 2026");
-  });
-
-  it("returns focus to the trigger after picking", async () => {
-    const user = userEvent.setup();
-    render(<DatePicker defaultValue={JANUARY_2026} />);
-
-    const trigger = screen.getByRole("button");
-    await user.click(trigger);
-    await screen.findByRole("grid");
-    await user.click(dayButton("2026-01-20"));
-
-    await waitFor(() => {
-      expect(trigger).toHaveFocus();
-    });
-  });
-
-  it("works controlled", async () => {
-    const user = userEvent.setup();
-
-    function Controlled() {
-      const [date, setDate] = useState<Date | undefined>(JANUARY_2026);
-      return <DatePicker value={date} onValueChange={setDate} locale="en-GB" />;
-    }
-
-    render(<Controlled />);
-    expect(screen.getByRole("button")).toHaveTextContent("15 Jan 2026");
-
-    await user.click(screen.getByRole("button"));
-    await screen.findByRole("grid");
-    await user.click(dayButton("2026-01-22"));
-
-    await waitFor(() => {
-      expect(screen.getByRole("button")).toHaveTextContent("22 Jan 2026");
-    });
-  });
-
-  it("closes on Escape", async () => {
-    const user = userEvent.setup();
-    render(<DatePicker />);
-
-    await user.click(screen.getByRole("button"));
-    await screen.findByRole("grid");
-
-    await user.keyboard("{Escape}");
-    await waitFor(() => {
-      expect(screen.queryByRole("grid")).not.toBeInTheDocument();
-    });
-  });
-
-  it("does not open while disabled", async () => {
-    const user = userEvent.setup();
-    render(<DatePicker disabled />);
-
-    const trigger = screen.getByRole("button");
-    expect(trigger).toBeDisabled();
-    await user.click(trigger);
-    expect(screen.queryByRole("grid")).not.toBeInTheDocument();
-  });
-
-  it("has no accessibility violations while open", async () => {
-    const user = userEvent.setup();
-    const { baseElement } = render(<DatePicker defaultValue={JANUARY_2026} />);
-
-    await user.click(screen.getByRole("button"));
-    await screen.findByRole("grid");
-
-    await expectNoA11yViolations(baseElement);
-  });
-});
-
-describe("DateRangePicker", () => {
-  it("shows the placeholder until a range is picked", () => {
-    render(<DateRangePicker />);
-    expect(screen.getByRole("button")).toHaveTextContent("Pick a date range");
-  });
-
-  it("shows both ends of the range", () => {
-    render(
-      <DateRangePicker
-        value={{ from: new Date(2026, 0, 10), to: new Date(2026, 0, 14) }}
-        locale="en-GB"
-      />,
-    );
-    expect(screen.getByRole("button")).toHaveTextContent("10 Jan 2026 – 14 Jan 2026");
-  });
-
-  it("shows two months so most ranges need no paging", async () => {
-    const user = userEvent.setup();
-    render(<DateRangePicker value={{ from: JANUARY_2026, to: undefined }} />);
-
-    await user.click(screen.getByRole("button"));
-    await screen.findByRole("dialog");
-    expect(screen.getByText(/january 2026/i)).toBeInTheDocument();
-    expect(screen.getByText(/february 2026/i)).toBeInTheDocument();
-  });
-
-  it("stays open after the first click, since one click is half an answer", async () => {
-    const user = userEvent.setup();
-
-    function Controlled() {
-      const [range, setRange] = useState<DateRange | undefined>();
-      return <DateRangePicker value={range} onValueChange={setRange} numberOfMonths={1} />;
-    }
-
-    render(<Controlled />);
-    await user.click(screen.getByRole("button", { name: /pick a date range/i }));
-    await screen.findByRole("grid");
-
-    // An empty range picker opens on the current month, so the days are taken
-    // from what is actually rendered rather than from a hard-coded date.
-    const days = Array.from(
-      document.querySelectorAll<HTMLElement>(
-        "[data-day]:not([data-outside]):not([data-hidden])",
-      ),
-    );
-    const first = within(days[9]!).getByRole("button");
-    const second = within(days[13]!).getByRole("button");
-
-    await user.click(first);
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-
-    await user.click(second);
-    await waitFor(() => {
-      expect(screen.getByRole("button", { name: /–/ })).toBeInTheDocument();
-    });
-  });
-
-  it("has no accessibility violations while open", async () => {
-    const user = userEvent.setup();
-    const { baseElement } = render(<DateRangePicker />);
-
-    await user.click(screen.getByRole("button"));
-    await screen.findByRole("dialog");
-
-    await expectNoA11yViolations(baseElement);
-  });
-});