@dowel-ui/react 0.1.0

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

@@ -0,0 +1,205 @@
+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);
+  });
+});

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

@@ -0,0 +1,198 @@
+"use client";
+
+import { useState, type ComponentPropsWithRef, type ReactNode } from "react";
+import type { DateRange } from "react-day-picker";
+
+import { Button } from "@/components/button";
+import { Calendar } from "@/components/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover";
+import { cn } from "@/lib/utils";
+
+/**
+ * A button that opens a calendar to pick a date.
+ *
+ * Composed from Popover, Calendar and Button rather than reimplementing any of
+ * them, which is also why it is the first registry entry with transitive
+ * dependencies — installing it pulls all three.
+ *
+ * A date picker is a convenience, not the only way in. For a date the user
+ * already knows, a typed input is faster than any calendar; pair this with one
+ * when speed of entry matters more than browsing.
+ */
+
+function formatDate(date: Date | undefined, locale?: string): string {
+  if (!date) return "";
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+}
+
+function CalendarIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-4 opacity-70">
+      <rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="M3 10h18M8 3v4M16 3v4"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+interface DatePickerTriggerProps extends Omit<ComponentPropsWithRef<"button">, "value"> {
+  placeholder: string;
+  hasValue: boolean;
+  children: ReactNode;
+}
+
+function DatePickerTrigger({
+  className,
+  placeholder: _placeholder,
+  hasValue,
+  children,
+  ...props
+}: DatePickerTriggerProps) {
+  return (
+    <Button
+      variant="outline"
+      className={cn(
+        "w-full justify-start gap-2 font-normal",
+        !hasValue && "text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <CalendarIcon />
+      {children}
+    </Button>
+  );
+}
+
+export interface DatePickerProps {
+  value?: Date;
+  defaultValue?: Date;
+  onValueChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** BCP 47 tag for formatting the button label. Defaults to the runtime locale. */
+  locale?: string;
+  className?: string;
+  /** Names the popover, which carries role="dialog". */
+  label?: string;
+}
+
+export function DatePicker({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder = "Pick a date",
+  disabled,
+  locale,
+  className,
+  label = "Choose a date",
+}: DatePickerProps) {
+  const [uncontrolled, setUncontrolled] = useState<Date | undefined>(defaultValue);
+  const value = valueProp === undefined ? uncontrolled : valueProp;
+  const [open, setOpen] = useState(false);
+
+  function handleSelect(next: Date | undefined) {
+    if (valueProp === undefined) setUncontrolled(next);
+    onValueChange?.(next);
+    // Closing on selection is right for a single date: the task is complete.
+    // A range picker must stay open, since one click is only half an answer.
+    setOpen(next ? false : open);
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <DatePickerTrigger
+          data-slot="date-picker-trigger"
+          placeholder={placeholder}
+          hasValue={Boolean(value)}
+          disabled={disabled}
+          className={className}
+        >
+          {value ? formatDate(value, locale) : placeholder}
+        </DatePickerTrigger>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" aria-label={label}>
+        <Calendar
+          mode="single"
+          selected={value}
+          // Open on the selected date's month rather than today's. The calendar
+          // does not infer this from `selected`, so without it a user editing a
+          // date from last year lands in the wrong place and has to page back.
+          defaultMonth={value}
+          onSelect={handleSelect}
+          autoFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export interface DateRangePickerProps {
+  value?: DateRange;
+  defaultValue?: DateRange;
+  onValueChange?: (range: DateRange | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  locale?: string;
+  className?: string;
+  label?: string;
+  /** Months shown side by side. Two makes most ranges selectable without paging. */
+  numberOfMonths?: number;
+}
+
+export function DateRangePicker({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder = "Pick a date range",
+  disabled,
+  locale,
+  className,
+  label = "Choose a date range",
+  numberOfMonths = 2,
+}: DateRangePickerProps) {
+  const [uncontrolled, setUncontrolled] = useState<DateRange | undefined>(defaultValue);
+  const value = valueProp === undefined ? uncontrolled : valueProp;
+
+  function handleSelect(next: DateRange | undefined) {
+    if (valueProp === undefined) setUncontrolled(next);
+    onValueChange?.(next);
+  }
+
+  const labelText = value?.from
+    ? value.to
+      ? `${formatDate(value.from, locale)} – ${formatDate(value.to, locale)}`
+      : formatDate(value.from, locale)
+    : placeholder;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <DatePickerTrigger
+          data-slot="date-range-picker-trigger"
+          placeholder={placeholder}
+          hasValue={Boolean(value?.from)}
+          disabled={disabled}
+          className={className}
+        >
+          {labelText}
+        </DatePickerTrigger>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" aria-label={label}>
+        <Calendar
+          mode="range"
+          selected={value}
+          defaultMonth={value?.from}
+          onSelect={handleSelect}
+          numberOfMonths={numberOfMonths}
+          autoFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/date-picker/index.ts

@@ -0,0 +1,6 @@
+export {
+  DatePicker,
+  DateRangePicker,
+  type DatePickerProps,
+  type DateRangePickerProps,
+} from "./date-picker";

package/src/components/date-picker/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "date-picker",
+  title: "Date Picker",
+  description: "A button that opens a calendar to pick a date or a date range.",
+  category: "form",
+  status: "stable",
+  dependencies: ["react-day-picker"],
+  registryDependencies: ["button", "calendar", "popover"],
+  files: ["date-picker.tsx"],
+  a11y:
+    "The trigger states the selected date, formatted for the locale, so its accessible name " +
+    'changes with the value. The popover is named because it carries role="dialog". Selecting a ' +
+    "single date closes the popover and returns focus to the trigger; a range stays open, since " +
+    "one click is only half an answer. Offer a typed input alongside it for dates the user " +
+    "already knows.",
+});

package/src/components/dialog/dialog.stories.tsx

@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { Label } from "@/components/label";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+/**
+ * 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 Dialog> = {
+  title: "Overlays/Dialog",
+  component: Dialog,
+  parameters: { controls: { disable: true } },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Edit profile</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile. Save when you are done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="name">Name</Label>
+            <Input id="name" defaultValue="Ada Lovelace" />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="handle">Handle</Label>
+            <Input id="handle" defaultValue="@ada" />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button>Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+/** A destructive confirmation: the description must state what is lost. */
+export const Confirmation: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="destructive">Delete project</Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Delete acme-inc?</DialogTitle>
+          <DialogDescription>
+            This permanently deletes the project and all 42 of its deployments. This cannot be
+            undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive">Delete project</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+/** Without the built-in close button, supply your own dismissal path. */
+export const WithoutCloseButton: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DialogTrigger>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>Terms of service</DialogTitle>
+          <DialogDescription>Accept the terms to continue.</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Decline</Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button>Accept</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const ScrollingContent: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Read changelog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Changelog</DialogTitle>
+          <DialogDescription>Everything shipped this month.</DialogDescription>
+        </DialogHeader>
+        <div className="max-h-72 space-y-4 overflow-y-auto pr-2 text-sm text-muted-foreground">
+          {Array.from({ length: 12 }, (_, index) => (
+            <p key={index}>
+              Release {String(index + 1)}: performance improvements, bug fixes and a handful of
+              new keyboard shortcuts.
+            </p>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  ),
+};