@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/button/button.test.tsx

@@ -1,224 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { createRef } from "react";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Button } from "./button";
-
-describe("Button", () => {
-  it("renders its children inside a button element", () => {
-    render(<Button>Continue</Button>);
-    expect(screen.getByRole("button", { name: "Continue" })).toBeInTheDocument();
-  });
-
-  it("applies the default variant and size", () => {
-    render(<Button>Save</Button>);
-    const button = screen.getByRole("button");
-    expect(button).toHaveClass("bg-primary");
-    expect(button).toHaveClass("h-9");
-  });
-
-  it.each([
-    ["secondary", "bg-secondary"],
-    ["outline", "border-input"],
-    ["ghost", "hover:bg-accent"],
-    ["destructive", "bg-destructive"],
-    ["link", "underline-offset-4"],
-  ] as const)("applies the %s variant", (variant, expectedClass) => {
-    render(<Button variant={variant}>Action</Button>);
-    expect(screen.getByRole("button")).toHaveClass(expectedClass);
-  });
-
-  it.each([
-    ["sm", "h-8"],
-    ["md", "h-9"],
-    ["lg", "h-10"],
-    ["icon", "size-9"],
-  ] as const)("applies the %s size", (size, expectedClass) => {
-    render(
-      <Button size={size} aria-label="Action">
-        A
-      </Button>,
-    );
-    expect(screen.getByRole("button")).toHaveClass(expectedClass);
-  });
-
-  it("drops box sizing for the link variant so it aligns with surrounding text", () => {
-    render(
-      <Button variant="link" size="md">
-        Read more
-      </Button>,
-    );
-    const button = screen.getByRole("button");
-    expect(button).toHaveClass("h-auto");
-    expect(button).not.toHaveClass("h-9");
-  });
-
-  it("lets a consumer className override a conflicting variant utility", () => {
-    render(<Button className="h-20 bg-card">Tall</Button>);
-    const button = screen.getByRole("button");
-    expect(button).toHaveClass("h-20", "bg-card");
-    expect(button).not.toHaveClass("h-9");
-    expect(button).not.toHaveClass("bg-primary");
-  });
-
-  it("forwards a ref to the underlying element", () => {
-    const ref = createRef<HTMLButtonElement>();
-    render(<Button ref={ref}>Save</Button>);
-    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-  });
-
-  it("forwards arbitrary props", () => {
-    render(
-      <Button type="submit" data-testid="submit">
-        Submit
-      </Button>,
-    );
-    expect(screen.getByTestId("submit")).toHaveAttribute("type", "submit");
-  });
-
-  it("calls onClick when activated with a pointer", async () => {
-    const onClick = vi.fn();
-    const user = userEvent.setup();
-    render(<Button onClick={onClick}>Save</Button>);
-
-    await user.click(screen.getByRole("button"));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("activates on Enter and Space from the keyboard", async () => {
-    const onClick = vi.fn();
-    const user = userEvent.setup();
-    render(<Button onClick={onClick}>Save</Button>);
-
-    await user.tab();
-    expect(screen.getByRole("button")).toHaveFocus();
-
-    await user.keyboard("{Enter}");
-    await user.keyboard(" ");
-    expect(onClick).toHaveBeenCalledTimes(2);
-  });
-
-  describe("disabled", () => {
-    it("sets the disabled attribute and blocks activation", async () => {
-      const onClick = vi.fn();
-      const user = userEvent.setup();
-      render(
-        <Button disabled onClick={onClick}>
-          Save
-        </Button>,
-      );
-
-      const button = screen.getByRole("button");
-      expect(button).toBeDisabled();
-      await user.click(button);
-      expect(onClick).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("loading", () => {
-    it("exposes a busy, disabled state to assistive technology", () => {
-      render(<Button loading>Save</Button>);
-      const button = screen.getByRole("button");
-      expect(button).toHaveAttribute("aria-busy", "true");
-      expect(button).toHaveAttribute("aria-disabled", "true");
-    });
-
-    it("renders a spinner alongside the label", () => {
-      const { container } = render(<Button loading>Save</Button>);
-      expect(container.querySelector("svg")).toBeInTheDocument();
-      expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
-    });
-
-    it("blocks activation", async () => {
-      const onClick = vi.fn();
-      const user = userEvent.setup();
-      render(
-        <Button loading onClick={onClick}>
-          Save
-        </Button>,
-      );
-
-      await user.click(screen.getByRole("button"));
-      expect(onClick).not.toHaveBeenCalled();
-    });
-
-    it("scales the spinner with the button size", () => {
-      const { container: large } = render(
-        <Button loading size="lg">
-          Save
-        </Button>,
-      );
-      expect(large.querySelector("svg")).toHaveClass("size-5");
-
-      const { container: small } = render(
-        <Button loading size="sm">
-          Save
-        </Button>,
-      );
-      expect(small.querySelector("svg")).toHaveClass("size-3.5");
-    });
-
-    it("stays focusable, so the user's keyboard position is not lost", async () => {
-      const user = userEvent.setup();
-      render(<Button loading>Save</Button>);
-
-      await user.tab();
-      expect(screen.getByRole("button")).toHaveFocus();
-    });
-
-    it("does not submit the form it belongs to", async () => {
-      const onSubmit = vi.fn((event: React.FormEvent) => event.preventDefault());
-      const user = userEvent.setup();
-      render(
-        <form onSubmit={onSubmit}>
-          <Button type="submit" loading>
-            Save
-          </Button>
-        </form>,
-      );
-
-      await user.click(screen.getByRole("button"));
-      expect(onSubmit).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("asChild", () => {
-    it("renders the child element instead of a button", () => {
-      render(
-        <Button asChild>
-          <a href="/pricing">Pricing</a>
-        </Button>,
-      );
-
-      const link = screen.getByRole("link", { name: "Pricing" });
-      expect(link).toHaveAttribute("href", "/pricing");
-      expect(screen.queryByRole("button")).not.toBeInTheDocument();
-    });
-
-    it("passes its styles down to the child", () => {
-      render(
-        <Button asChild variant="destructive">
-          <a href="/delete">Delete</a>
-        </Button>,
-      );
-      expect(screen.getByRole("link")).toHaveClass("bg-destructive");
-    });
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <>
-        <Button>Save</Button>
-        <Button variant="outline" loading>
-          Loading
-        </Button>
-        <Button size="icon" aria-label="Close">
-          x
-        </Button>
-      </>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/calendar/calendar.stories.tsx

@@ -1,105 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import type { DateRange } from "react-day-picker";
-
-import { Calendar } from "./calendar";
-
-const JANUARY_2026 = new Date(2026, 0, 1);
-
-const meta = {
-  title: "Forms/Calendar",
-  component: Calendar,
-  parameters: { controls: { disable: true } },
-} satisfies Meta<typeof Calendar>;
-
-export default meta;
-type Story = StoryObj<typeof Calendar>;
-
-export const Default: Story = {
-  render: function Default() {
-    const [date, setDate] = useState<Date | undefined>(new Date(2026, 0, 15));
-    return (
-      <Calendar
-        mode="single"
-        defaultMonth={JANUARY_2026}
-        selected={date}
-        onSelect={setDate}
-        className="rounded-lg border border-border"
-      />
-    );
-  },
-};
-
-export const Range: Story = {
-  render: function Range() {
-    const [range, setRange] = useState<DateRange | undefined>({
-      from: new Date(2026, 0, 10),
-      to: new Date(2026, 0, 16),
-    });
-    return (
-      <Calendar
-        mode="range"
-        defaultMonth={JANUARY_2026}
-        selected={range}
-        onSelect={setRange}
-        numberOfMonths={2}
-        className="rounded-lg border border-border"
-      />
-    );
-  },
-};
-
-export const Multiple: Story = {
-  render: function Multiple() {
-    const [days, setDays] = useState<Date[] | undefined>([
-      new Date(2026, 0, 6),
-      new Date(2026, 0, 13),
-      new Date(2026, 0, 20),
-    ]);
-    return (
-      <Calendar
-        mode="multiple"
-        defaultMonth={JANUARY_2026}
-        selected={days}
-        onSelect={setDays}
-        className="rounded-lg border border-border"
-      />
-    );
-  },
-};
-
-/** Past dates are disabled — useful for scheduling. */
-export const WithDisabledDates: Story = {
-  render: () => (
-    <Calendar
-      mode="single"
-      defaultMonth={JANUARY_2026}
-      disabled={{ before: new Date(2026, 0, 12) }}
-      className="rounded-lg border border-border"
-    />
-  ),
-};
-
-export const WithDropdownNavigation: Story = {
-  render: () => (
-    <Calendar
-      mode="single"
-      defaultMonth={JANUARY_2026}
-      captionLayout="dropdown"
-      startMonth={new Date(2020, 0)}
-      endMonth={new Date(2030, 11)}
-      className="rounded-lg border border-border"
-    />
-  ),
-};
-
-export const WithoutOutsideDays: Story = {
-  render: () => (
-    <Calendar
-      mode="single"
-      defaultMonth={JANUARY_2026}
-      showOutsideDays={false}
-      className="rounded-lg border border-border"
-    />
-  ),
-};

package/src/components/calendar/calendar.test.tsx

@@ -1,255 +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 { Calendar } from "./calendar";
-
-/** January 2026 — a fixed month so the tests never depend on today's date. */
-const JANUARY_2026 = new Date(2026, 0, 1);
-
-function dayButton(container: HTMLElement, iso: string): HTMLElement {
-  const cell = container.querySelector<HTMLElement>(`[data-day="${iso}"]`);
-  if (!cell) throw new Error(`No day cell for ${iso}`);
-  return within(cell).getByRole("button");
-}
-
-describe("Calendar", () => {
-  it("renders a date grid", () => {
-    render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
-    expect(screen.getByRole("grid")).toBeInTheDocument();
-    expect(screen.getAllByRole("gridcell").length).toBeGreaterThan(27);
-  });
-
-  it("shows the month it was given", () => {
-    render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
-    expect(screen.getByText(/january 2026/i)).toBeInTheDocument();
-  });
-
-  it("selects a day on click", async () => {
-    const onSelect = vi.fn();
-    const user = userEvent.setup();
-    const { container } = render(
-      <Calendar mode="single" defaultMonth={JANUARY_2026} onSelect={onSelect} />,
-    );
-
-    await user.click(dayButton(container, "2026-01-15"));
-    expect(onSelect).toHaveBeenCalled();
-    expect(onSelect.mock.calls[0]?.[0]).toBeInstanceOf(Date);
-  });
-
-  it("marks the selected day", () => {
-    const { container } = render(
-      <Calendar mode="single" defaultMonth={JANUARY_2026} selected={new Date(2026, 0, 15)} />,
-    );
-
-    const cell = container.querySelector('[data-day="2026-01-15"]');
-    expect(cell).toHaveAttribute("data-selected", "true");
-  });
-
-  it("navigates to the next and previous month", async () => {
-    const user = userEvent.setup();
-    render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
-
-    await user.click(screen.getByRole("button", { name: /next/i }));
-    await waitFor(() => {
-      expect(screen.getByText(/february 2026/i)).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByRole("button", { name: /previous/i }));
-    await waitFor(() => {
-      expect(screen.getByText(/january 2026/i)).toBeInTheDocument();
-    });
-  });
-
-  it("announces the visible month in a live region", () => {
-    render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
-    expect(screen.getByRole("status")).toBeInTheDocument();
-  });
-
-  it("moves through the grid with the arrow keys", async () => {
-    const user = userEvent.setup();
-    const { container } = render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
-
-    const start = dayButton(container, "2026-01-15");
-    start.focus();
-    expect(start).toHaveFocus();
-
-    await user.keyboard("{ArrowRight}");
-    expect(dayButton(container, "2026-01-16")).toHaveFocus();
-
-    // Down moves a whole week, which is what makes the grid a grid.
-    await user.keyboard("{ArrowDown}");
-    expect(dayButton(container, "2026-01-23")).toHaveFocus();
-
-    await user.keyboard("{ArrowLeft}");
-    expect(dayButton(container, "2026-01-22")).toHaveFocus();
-  });
-
-  it("selects the focused day with Enter", async () => {
-    const onSelect = vi.fn();
-    const user = userEvent.setup();
-    const { container } = render(
-      <Calendar mode="single" defaultMonth={JANUARY_2026} onSelect={onSelect} />,
-    );
-
-    dayButton(container, "2026-01-15").focus();
-    await user.keyboard("{Enter}");
-    expect(onSelect).toHaveBeenCalled();
-  });
-
-  it("disables days that are not allowed", async () => {
-    const onSelect = vi.fn();
-    const user = userEvent.setup();
-    const { container } = render(
-      <Calendar
-        mode="single"
-        defaultMonth={JANUARY_2026}
-        disabled={{ before: new Date(2026, 0, 10) }}
-        onSelect={onSelect}
-      />,
-    );
-
-    const early = dayButton(container, "2026-01-05");
-    expect(early).toBeDisabled();
-    await user.click(early);
-    expect(onSelect).not.toHaveBeenCalled();
-  });
-
-  it("marks days outside the visible month", () => {
-    const { container } = render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
-    expect(container.querySelector('[data-outside="true"]')).toBeInTheDocument();
-  });
-
-  it("can hide days outside the visible month", () => {
-    const { container } = render(
-      <Calendar mode="single" defaultMonth={JANUARY_2026} showOutsideDays={false} />,
-    );
-
-    // The cells stay, so the grid keeps its shape; they are marked hidden and
-    // render no button, which is what removes them from the keyboard path.
-    const hidden = container.querySelectorAll('[data-hidden="true"]');
-    expect(hidden.length).toBeGreaterThan(0);
-    for (const cell of hidden) {
-      expect(within(cell as HTMLElement).queryByRole("button")).not.toBeInTheDocument();
-    }
-  });
-
-  it("supports range selection", async () => {
-    const user = userEvent.setup();
-
-    function RangeExample() {
-      const [range, setRange] = useState<DateRange | undefined>();
-      return (
-        <>
-          <Calendar
-            mode="range"
-            defaultMonth={JANUARY_2026}
-            selected={range}
-            onSelect={setRange}
-          />
-          {/* A plain span, not <output>: <output> carries an implicit
-              role="status", which would collide with the calendar's own live
-              region. */}
-          <span data-testid="range">
-            {range?.from ? `${range.from.getDate()}-${String(range.to?.getDate())}` : "none"}
-          </span>
-        </>
-      );
-    }
-
-    const { container } = render(<RangeExample />);
-    expect(screen.getByTestId("range")).toHaveTextContent("none");
-
-    // The first click produces a one-day range, not a half-open one: `to` is
-    // set to the same day. The second click extends it.
-    await user.click(dayButton(container, "2026-01-10"));
-    await waitFor(() => {
-      expect(screen.getByTestId("range")).toHaveTextContent("10-10");
-    });
-
-    await user.click(dayButton(container, "2026-01-14"));
-    await waitFor(() => {
-      expect(screen.getByTestId("range")).toHaveTextContent("10-14");
-    });
-  });
-
-  it("marks the days between the ends of a range", async () => {
-    const user = userEvent.setup();
-
-    function RangeExample() {
-      const [range, setRange] = useState<DateRange | undefined>();
-      return (
-        <Calendar
-          mode="range"
-          defaultMonth={JANUARY_2026}
-          selected={range}
-          onSelect={setRange}
-        />
-      );
-    }
-
-    const { container } = render(<RangeExample />);
-    await user.click(dayButton(container, "2026-01-10"));
-    await user.click(dayButton(container, "2026-01-14"));
-
-    await waitFor(() => {
-      expect(container.querySelector('[data-day="2026-01-12"]')).toHaveAttribute(
-        "data-selected",
-        "true",
-      );
-    });
-    expect(container.querySelector('[data-day="2026-01-16"]')).not.toHaveAttribute(
-      "data-selected",
-    );
-  });
-
-  it("shows more than one month when asked", () => {
-    render(<Calendar mode="single" defaultMonth={JANUARY_2026} numberOfMonths={2} />);
-    expect(screen.getByText(/january 2026/i)).toBeInTheDocument();
-    expect(screen.getByText(/february 2026/i)).toBeInTheDocument();
-  });
-
-  it("merges a consumer className", () => {
-    const { container } = render(
-      <Calendar mode="single" defaultMonth={JANUARY_2026} className="p-6" />,
-    );
-    expect(container.querySelector(".rdp-root")).toHaveClass("p-6");
-  });
-
-  it("lets a consumer override a generated classNames entry", () => {
-    const { container } = render(
-      <Calendar
-        mode="single"
-        defaultMonth={JANUARY_2026}
-        classNames={{ day: "custom-day-class" }}
-      />,
-    );
-    expect(container.querySelector(".custom-day-class")).toBeInTheDocument();
-  });
-
-  it("renders dropdown navigation with its own chevrons", () => {
-    render(
-      <Calendar
-        mode="single"
-        defaultMonth={JANUARY_2026}
-        captionLayout="dropdown"
-        startMonth={new Date(2024, 0)}
-        endMonth={new Date(2028, 11)}
-      />,
-    );
-
-    // Dropdown captions render comboboxes for month and year, each with a
-    // downward chevron — a different orientation from the nav arrows.
-    expect(screen.getAllByRole("combobox").length).toBeGreaterThanOrEqual(2);
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <Calendar mode="single" defaultMonth={JANUARY_2026} aria-label="Event date" />,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/card/card.stories.tsx

@@ -1,61 +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 { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
-
-const meta = {
-  title: "Display/Card",
-  component: Card,
-  parameters: { controls: { disable: true } },
-} satisfies Meta<typeof Card>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Card className="w-80">
-      <CardHeader>
-        <CardTitle>Create project</CardTitle>
-        <CardDescription>Projects group your deployments and environments.</CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-2">
-        <Label htmlFor="name">Project name</Label>
-        <Input id="name" placeholder="acme-inc" />
-      </CardContent>
-      <CardFooter className="justify-end">
-        <Button variant="ghost">Cancel</Button>
-        <Button>Create project</Button>
-      </CardFooter>
-    </Card>
-  ),
-};
-
-export const ContentOnly: Story = {
-  render: () => (
-    <Card className="w-80">
-      <CardContent className="pt-6">
-        <p className="text-sm text-muted-foreground">
-          A card does not require a header or a footer.
-        </p>
-      </CardContent>
-    </Card>
-  ),
-};
-
-export const Stat: Story = {
-  render: () => (
-    <Card className="w-56">
-      <CardHeader className="pb-2">
-        <CardDescription>Monthly recurring revenue</CardDescription>
-        <CardTitle className="text-3xl">$48,120</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p className="text-xs text-success">+12.4% from last month</p>
-      </CardContent>
-    </Card>
-  ),
-};