@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/form/form.stories.tsx

@@ -1,144 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { Button } from "@/components/button";
-import { Checkbox } from "@/components/checkbox";
-import { Input } from "@/components/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/select";
-
-import { Form, FormControl, FormDescription, FormField, FormLabel, FormMessage } from "./form";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-80">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "Forms/Form",
-  component: Form,
-  parameters: { controls: { disable: true } },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Form>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Form>
-      <FormField name="username">
-        <FormLabel>Username</FormLabel>
-        <FormControl>
-          <Input placeholder="ada" />
-        </FormControl>
-        <FormDescription>This is your public display name.</FormDescription>
-        <FormMessage />
-      </FormField>
-      <Button type="submit">Save</Button>
-    </Form>
-  ),
-};
-
-export const WithError: Story = {
-  render: () => (
-    <Form>
-      <FormField name="email" error="Enter a valid email address.">
-        <FormLabel>Email</FormLabel>
-        <FormControl>
-          <Input type="email" defaultValue="not-an-email" />
-        </FormControl>
-        <FormDescription>We will never share it.</FormDescription>
-        <FormMessage />
-      </FormField>
-      <Button type="submit">Save</Button>
-    </Form>
-  ),
-};
-
-/**
- * The field wiring is state-agnostic — this uses plain `useState`, and the
- * markup would be identical with React Hook Form or a server action. Only the
- * source of `error` changes.
- */
-export const LiveValidation: Story = {
-  render: function LiveValidation() {
-    const [email, setEmail] = useState("");
-    const [touched, setTouched] = useState(false);
-    const error = touched && !email.includes("@") ? "Enter a valid email address." : undefined;
-
-    return (
-      <Form
-        onSubmit={(event) => {
-          event.preventDefault();
-          setTouched(true);
-        }}
-      >
-        <FormField name="email" error={error}>
-          <FormLabel>Email</FormLabel>
-          <FormControl>
-            <Input
-              type="email"
-              value={email}
-              onChange={(event) => setEmail(event.target.value)}
-              onBlur={() => setTouched(true)}
-              placeholder="you@example.com"
-            />
-          </FormControl>
-          <FormDescription>Used for deploy notifications.</FormDescription>
-          <FormMessage />
-        </FormField>
-        <Button type="submit">Continue</Button>
-      </Form>
-    );
-  },
-};
-
-export const MixedControls: Story = {
-  render: () => (
-    <Form>
-      <FormField name="project">
-        <FormLabel>Project name</FormLabel>
-        <FormControl>
-          <Input placeholder="acme-inc" />
-        </FormControl>
-        <FormMessage />
-      </FormField>
-
-      <FormField name="region" error="Choose a region to continue.">
-        <FormLabel>Region</FormLabel>
-        <FormControl>
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select a region" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="us">United States</SelectItem>
-              <SelectItem value="eu">Europe</SelectItem>
-            </SelectContent>
-          </Select>
-        </FormControl>
-        <FormMessage />
-      </FormField>
-
-      <FormField name="terms">
-        <div className="flex items-center gap-2">
-          <FormControl>
-            <Checkbox />
-          </FormControl>
-          <FormLabel>Accept terms and conditions</FormLabel>
-        </div>
-        <FormMessage />
-      </FormField>
-
-      <Button type="submit">Create project</Button>
-    </Form>
-  ),
-};

package/src/components/form/form.test.tsx

@@ -1,203 +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 { Input } from "../input";
-import { Form, FormControl, FormDescription, FormField, FormLabel, FormMessage } from "./form";
-
-function Example({
-  error,
-  withDescription = true,
-}: {
-  error?: string;
-  withDescription?: boolean;
-} = {}) {
-  return (
-    <Form>
-      <FormField name="email" error={error}>
-        <FormLabel>Email</FormLabel>
-        <FormControl>
-          <Input type="email" />
-        </FormControl>
-        {withDescription ? <FormDescription>We will never share it.</FormDescription> : null}
-        <FormMessage />
-      </FormField>
-    </Form>
-  );
-}
-
-describe("Form", () => {
-  it("disables native validation so custom messages are the only ones shown", () => {
-    const { container } = render(<Example />);
-    expect(container.querySelector("form")).toHaveAttribute("novalidate");
-  });
-
-  it("allows native validation back in", () => {
-    const { container } = render(
-      <Form noValidate={false}>
-        <div />
-      </Form>,
-    );
-    expect(container.querySelector("form")).not.toHaveAttribute("novalidate");
-  });
-});
-
-describe("FormField", () => {
-  it("points the label at the control", () => {
-    render(<Example />);
-    expect(screen.getByLabelText("Email")).toBe(screen.getByRole("textbox"));
-  });
-
-  it("describes the control with its description", () => {
-    render(<Example />);
-    expect(screen.getByRole("textbox")).toHaveAccessibleDescription("We will never share it.");
-  });
-
-  it("does not reference a description that was never rendered", () => {
-    render(<Example withDescription={false} />);
-    expect(screen.getByRole("textbox")).not.toHaveAttribute("aria-describedby");
-  });
-
-  it("is not invalid without an error", () => {
-    render(<Example />);
-    expect(screen.getByRole("textbox")).not.toHaveAttribute("aria-invalid");
-    expect(screen.queryByText("Enter a valid email address.")).not.toBeInTheDocument();
-  });
-
-  describe("with an error", () => {
-    it("marks the control invalid", () => {
-      render(<Example error="Enter a valid email address." />);
-      expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
-    });
-
-    it("renders the message", () => {
-      render(<Example error="Enter a valid email address." />);
-      expect(screen.getByText("Enter a valid email address.")).toBeInTheDocument();
-    });
-
-    it("describes the control with both the description and the message", () => {
-      render(<Example error="Enter a valid email address." />);
-      expect(screen.getByRole("textbox")).toHaveAccessibleDescription(
-        "We will never share it. Enter a valid email address.",
-      );
-    });
-
-    it("announces the message politely", () => {
-      render(<Example error="Enter a valid email address." />);
-      const message = screen.getByText("Enter a valid email address.");
-      expect(message).toHaveAttribute("role", "status");
-      expect(message).toHaveAttribute("aria-live", "polite");
-    });
-
-    it("marks the label and wrapper as invalid for styling", () => {
-      const { container } = render(<Example error="Bad" />);
-      expect(container.querySelector("[data-slot='form-field']")).toHaveAttribute(
-        "data-invalid",
-        "true",
-      );
-      expect(screen.getByText("Email")).toHaveClass("text-destructive");
-    });
-  });
-
-  it("mirrors the field name for form-library integration", () => {
-    const { container } = render(<Example />);
-    expect(container.querySelector("[data-slot='form-field']")).toHaveAttribute(
-      "data-name",
-      "email",
-    );
-  });
-
-  it("gives each field its own ids", () => {
-    render(
-      <Form>
-        <FormField name="first">
-          <FormLabel>First</FormLabel>
-          <FormControl>
-            <Input />
-          </FormControl>
-        </FormField>
-        <FormField name="last">
-          <FormLabel>Last</FormLabel>
-          <FormControl>
-            <Input />
-          </FormControl>
-        </FormField>
-      </Form>,
-    );
-
-    const first = screen.getByLabelText("First");
-    const last = screen.getByLabelText("Last");
-    expect(first.id).not.toBe(last.id);
-  });
-
-  it("works with any state source, updating as validation changes", async () => {
-    const user = userEvent.setup();
-
-    function Validated() {
-      const [value, setValue] = useState("");
-      const error = value.includes("@") ? undefined : "Enter a valid email address.";
-      return (
-        <Form>
-          <FormField name="email" error={value ? error : undefined}>
-            <FormLabel>Email</FormLabel>
-            <FormControl>
-              <Input value={value} onChange={(event) => setValue(event.target.value)} />
-            </FormControl>
-            <FormMessage />
-          </FormField>
-        </Form>
-      );
-    }
-
-    render(<Validated />);
-    const input = screen.getByRole("textbox");
-
-    await user.type(input, "nope");
-    expect(input).toHaveAttribute("aria-invalid", "true");
-    expect(screen.getByText("Enter a valid email address.")).toBeInTheDocument();
-
-    await user.type(input, "@example.com");
-    expect(input).not.toHaveAttribute("aria-invalid");
-    expect(screen.queryByText("Enter a valid email address.")).not.toBeInTheDocument();
-  });
-
-  it("lets FormMessage render its own children", () => {
-    render(
-      <Form>
-        <FormField name="email">
-          <FormLabel>Email</FormLabel>
-          <FormControl>
-            <Input />
-          </FormControl>
-          <FormMessage>Custom hint</FormMessage>
-        </FormField>
-      </Form>,
-    );
-    expect(screen.getByText("Custom hint")).toBeInTheDocument();
-  });
-
-  it.each([
-    ["FormLabel", <FormLabel key="l">Label</FormLabel>],
-    [
-      "FormControl",
-      <FormControl key="c">
-        <input />
-      </FormControl>,
-    ],
-    ["FormDescription", <FormDescription key="d">Text</FormDescription>],
-    ["FormMessage", <FormMessage key="m">Text</FormMessage>],
-  ])("throws a useful error if %s is used outside FormField", (name, element) => {
-    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined);
-    expect(() => render(element)).toThrow(
-      new RegExp(`${name} must be rendered inside <FormField>`),
-    );
-    consoleError.mockRestore();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example error="Enter a valid email address." />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/input/input.stories.tsx

@@ -1,84 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { Label } from "@/components/label";
-
-import { Input } from "./input";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-72">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "Forms/Input",
-  component: Input,
-  args: {
-    placeholder: "acme-inc",
-    inputSize: "md",
-  },
-  argTypes: {
-    inputSize: { control: "select", options: ["sm", "md", "lg"] },
-    disabled: { control: "boolean" },
-    type: { control: "select", options: ["text", "email", "password", "number", "search"] },
-  },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="grid gap-2">
-      <Label htmlFor="project">Project name</Label>
-      <Input id="project" {...args} />
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-3">
-      <Input inputSize="sm" placeholder="Small" aria-label="Small" />
-      <Input inputSize="md" placeholder="Medium" aria-label="Medium" />
-      <Input inputSize="lg" placeholder="Large" aria-label="Large" />
-    </div>
-  ),
-};
-
-export const Invalid: Story = {
-  render: () => (
-    <div className="grid gap-2">
-      <Label htmlFor="email">Email</Label>
-      <Input
-        id="email"
-        type="email"
-        defaultValue="not-an-email"
-        aria-invalid
-        aria-describedby="email-error"
-      />
-      <p id="email-error" className="text-xs text-destructive">
-        Enter a valid email address.
-      </p>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, value: "Read only" },
-};
-
-export const Types: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-3">
-      <Input type="email" placeholder="you@example.com" aria-label="Email" />
-      <Input type="password" placeholder="••••••••" aria-label="Password" />
-      <Input type="number" placeholder="42" aria-label="Quantity" />
-      <Input type="search" placeholder="Search…" aria-label="Search" />
-    </div>
-  ),
-};

package/src/components/input/input.test.tsx

@@ -1,108 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { createRef, useState } from "react";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Input } from "./input";
-
-describe("Input", () => {
-  it("renders a text input by default", () => {
-    render(<Input aria-label="Name" />);
-    expect(screen.getByRole("textbox", { name: "Name" })).toHaveAttribute("type", "text");
-  });
-
-  it("honours an explicit type", () => {
-    render(<Input type="email" aria-label="Email" />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("type", "email");
-  });
-
-  it.each([
-    ["sm", "h-8"],
-    ["md", "h-9"],
-    ["lg", "h-10"],
-  ] as const)("applies the %s size", (inputSize, expectedClass) => {
-    render(<Input inputSize={inputSize} aria-label="Name" />);
-    expect(screen.getByRole("textbox")).toHaveClass(expectedClass);
-  });
-
-  it("does not shadow the native size attribute", () => {
-    render(<Input size={5} aria-label="Name" />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("size", "5");
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    render(<Input className="h-16" aria-label="Name" />);
-    const input = screen.getByRole("textbox");
-    expect(input).toHaveClass("h-16");
-    expect(input).not.toHaveClass("h-9");
-  });
-
-  it("forwards a ref", () => {
-    const ref = createRef<HTMLInputElement>();
-    render(<Input ref={ref} aria-label="Name" />);
-    expect(ref.current).toBeInstanceOf(HTMLInputElement);
-  });
-
-  it("works uncontrolled", async () => {
-    const user = userEvent.setup();
-    render(<Input defaultValue="ab" aria-label="Name" />);
-
-    const input = screen.getByRole<HTMLInputElement>("textbox");
-    await user.type(input, "cd");
-    expect(input.value).toBe("abcd");
-  });
-
-  it("works controlled", async () => {
-    const user = userEvent.setup();
-
-    function Controlled() {
-      const [value, setValue] = useState("");
-      return (
-        <Input
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          aria-label="Name"
-        />
-      );
-    }
-
-    render(<Controlled />);
-    const input = screen.getByRole<HTMLInputElement>("textbox");
-    await user.type(input, "hello");
-    expect(input.value).toBe("hello");
-  });
-
-  it("does not accept input while disabled", async () => {
-    const onChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Input disabled onChange={onChange} aria-label="Name" />);
-
-    const input = screen.getByRole("textbox");
-    expect(input).toBeDisabled();
-    await user.type(input, "x");
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it("exposes the invalid state through aria-invalid", () => {
-    render(<Input aria-invalid aria-label="Name" />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
-  });
-
-  it("is reachable by keyboard", async () => {
-    const user = userEvent.setup();
-    render(<Input aria-label="Name" />);
-    await user.tab();
-    expect(screen.getByRole("textbox")).toHaveFocus();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <>
-        <label htmlFor="field">Name</label>
-        <Input id="field" />
-      </>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/label/label.stories.tsx

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Input } from "@/components/input";
-
-import { Label } from "./label";
-
-const meta = {
-  title: "Forms/Label",
-  component: Label,
-  args: { children: "Project name" },
-} satisfies Meta<typeof Label>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="grid w-72 gap-2">
-      <Label htmlFor="project" {...args} />
-      <Input id="project" placeholder="acme-inc" />
-    </div>
-  ),
-};
-
-export const Required: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid w-72 gap-2">
-      <Label htmlFor="email">
-        Email
-        <span aria-hidden="true" className="text-destructive">
-          *
-        </span>
-      </Label>
-      <Input id="email" type="email" required placeholder="you@example.com" />
-    </div>
-  ),
-};
-
-/** A label dims alongside the control it describes. */
-export const WithDisabledControl: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid w-72 gap-2">
-      <Input id="locked" disabled placeholder="Locked" className="peer order-2" />
-      <Label htmlFor="locked" className="order-1">
-        Workspace slug
-      </Label>
-    </div>
-  ),
-};

package/src/components/label/label.test.tsx

@@ -1,55 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Label } from "./label";
-
-describe("Label", () => {
-  it("renders its text", () => {
-    render(<Label htmlFor="name">Full name</Label>);
-    expect(screen.getByText("Full name")).toBeInTheDocument();
-  });
-
-  it("associates itself with a control via htmlFor", () => {
-    render(
-      <>
-        <Label htmlFor="name">Full name</Label>
-        <input id="name" />
-      </>,
-    );
-    expect(screen.getByLabelText("Full name")).toBeInTheDocument();
-  });
-
-  it("moves focus to its control when clicked", async () => {
-    const user = userEvent.setup();
-    render(
-      <>
-        <Label htmlFor="name">Full name</Label>
-        <input id="name" />
-      </>,
-    );
-
-    await user.click(screen.getByText("Full name"));
-    expect(screen.getByLabelText("Full name")).toHaveFocus();
-  });
-
-  it("merges a consumer className", () => {
-    render(
-      <Label htmlFor="name" className="text-destructive">
-        Full name
-      </Label>,
-    );
-    expect(screen.getByText("Full name")).toHaveClass("text-destructive", "font-medium");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <>
-        <Label htmlFor="name">Full name</Label>
-        <input id="name" />
-      </>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});