@dowel-ui/react 0.1.0

package/src/blocks/signup/signup.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+
+import { Button } from "@/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/card";
+import { Checkbox } from "@/components/checkbox";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormLabel,
+  FormMessage,
+} from "@/components/form";
+import { Input } from "@/components/input";
+import { Progress } from "@/components/progress";
+import { cn } from "@/lib/utils";
+
+/**
+ * An account creation form.
+ *
+ * The password strength meter is the interesting part. It is a hint, not a
+ * gate: the requirement is a length minimum, and the meter tells people how
+ * they are doing without inventing rules about symbols that push everyone
+ * towards the same predictable substitutions.
+ */
+
+export interface SignupBlockProps {
+  onSubmit?: (values: { name: string; email: string; password: string }) => void;
+  error?: string;
+  pending?: boolean;
+  loginHref?: string;
+  /** Minimum password length. Length is the requirement that actually helps. */
+  minPasswordLength?: number;
+  className?: string;
+}
+
+interface Strength {
+  score: number;
+  label: string;
+  tone: "destructive" | "warning" | "success";
+}
+
+/**
+ * A rough strength estimate.
+ *
+ * Deliberately crude, and deliberately not a validation rule. Its only job is
+ * to nudge; the form is gated on length alone.
+ */
+export function estimatePasswordStrength(password: string, minLength: number): Strength {
+  if (password.length === 0)
+    return { score: 0, label: "Enter a password", tone: "destructive" };
+
+  let score = Math.min(60, (password.length / (minLength * 2)) * 60);
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score += 15;
+  if (/\d/.test(password)) score += 10;
+  if (/[^\w\s]/.test(password)) score += 15;
+
+  const rounded = Math.min(100, Math.round(score));
+  if (password.length < minLength)
+    return { score: rounded, label: "Too short", tone: "destructive" };
+  if (rounded < 60) return { score: rounded, label: "Weak", tone: "warning" };
+  if (rounded < 85) return { score: rounded, label: "Good", tone: "success" };
+  return { score: rounded, label: "Strong", tone: "success" };
+}
+
+export function SignupBlock({
+  onSubmit,
+  error,
+  pending = false,
+  loginHref = "/login",
+  minPasswordLength = 12,
+  className,
+}: SignupBlockProps) {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [accepted, setAccepted] = useState(false);
+  const [touched, setTouched] = useState(false);
+
+  const strength = estimatePasswordStrength(password, minPasswordLength);
+  const emailError =
+    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
+  const passwordError =
+    touched && password.length < minPasswordLength
+      ? `Use at least ${String(minPasswordLength)} characters.`
+      : undefined;
+  const termsError = touched && !accepted ? "Accept the terms to continue." : undefined;
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setTouched(true);
+    if (!email.includes("@") || password.length < minPasswordLength || !accepted) return;
+    onSubmit?.({ name, email, password });
+  }
+
+  return (
+    <Card className={cn("w-full max-w-sm", className)}>
+      <CardHeader>
+        <CardTitle>Create an account</CardTitle>
+        <CardDescription>Start building in a couple of minutes.</CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <Form onSubmit={handleSubmit} className="gap-4">
+          {error ? (
+            <p role="alert" className="text-sm font-medium text-destructive">
+              {error}
+            </p>
+          ) : null}
+
+          <FormField name="name">
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input
+                autoComplete="name"
+                placeholder="Ada Lovelace"
+                value={name}
+                disabled={pending}
+                onChange={(event) => {
+                  setName(event.target.value);
+                }}
+              />
+            </FormControl>
+          </FormField>
+
+          <FormField name="email" error={emailError}>
+            <FormLabel>Email</FormLabel>
+            <FormControl>
+              <Input
+                type="email"
+                autoComplete="email"
+                placeholder="you@example.com"
+                value={email}
+                disabled={pending}
+                onChange={(event) => {
+                  setEmail(event.target.value);
+                }}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormField>
+
+          <FormField name="password" error={passwordError}>
+            <FormLabel>Password</FormLabel>
+            <FormControl>
+              <Input
+                type="password"
+                autoComplete="new-password"
+                value={password}
+                disabled={pending}
+                onChange={(event) => {
+                  setPassword(event.target.value);
+                }}
+              />
+            </FormControl>
+            <FormDescription>At least {minPasswordLength} characters.</FormDescription>
+            <FormMessage />
+          </FormField>
+
+          {password.length > 0 ? (
+            <div className="grid gap-1.5">
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Password strength</span>
+                <span
+                  className={cn(
+                    strength.tone === "success"
+                      ? "text-success"
+                      : strength.tone === "warning"
+                        ? "text-warning"
+                        : "text-destructive",
+                  )}
+                >
+                  {strength.label}
+                </span>
+              </div>
+              {/* The label above already says the strength, so the bar is a
+                  summary rather than a second thing to read. */}
+              <Progress
+                value={strength.score}
+                size="sm"
+                tone={
+                  strength.tone === "success"
+                    ? "success"
+                    : strength.tone === "warning"
+                      ? "warning"
+                      : "destructive"
+                }
+                aria-hidden="true"
+              />
+            </div>
+          ) : null}
+
+          <FormField name="terms" error={termsError}>
+            <div className="flex items-start gap-2">
+              <FormControl>
+                <Checkbox
+                  className="mt-0.5"
+                  checked={accepted}
+                  disabled={pending}
+                  onCheckedChange={(checked) => {
+                    setAccepted(checked === true);
+                  }}
+                />
+              </FormControl>
+              {/* FormLabel, not a Label with a guessed htmlFor: the field
+                  generates the control's id, so anything hard-coded points at
+                  nothing and leaves the checkbox unnamed. */}
+              <FormLabel className="text-sm leading-snug font-normal">
+                I agree to the terms of service and privacy policy.
+              </FormLabel>
+            </div>
+            <FormMessage />
+          </FormField>
+
+          <Button type="submit" loading={pending} className="w-full">
+            Create account
+          </Button>
+        </Form>
+      </CardContent>
+
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          Already have an account?{" "}
+          <a href={loginHref} className="font-medium text-primary underline underline-offset-4">
+            Sign in
+          </a>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

package/src/components/accordion/accordion.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+
+/**
+ * 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 Accordion> = {
+  title: "Data/Accordion",
+  component: Accordion,
+  parameters: { controls: { disable: true } },
+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+/** Typed from the component: Accordion's props are a discriminated union on
+ * `type`, which collapses to `never` if inferred through the meta. */
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible defaultValue="shipping">
+      <AccordionItem value="shipping">
+        <AccordionTrigger>How long does shipping take?</AccordionTrigger>
+        <AccordionContent>
+          Orders ship within two business days and arrive in three to five days after that.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="returns">
+        <AccordionTrigger>What is the return policy?</AccordionTrigger>
+        <AccordionContent>
+          Return anything unused within thirty days for a full refund.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="support">
+        <AccordionTrigger>How do I contact support?</AccordionTrigger>
+        <AccordionContent>
+          Email support@example.com and someone will reply within one business day.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+/** Independent sections, so more than one can be open at a time. */
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" defaultValue={["build"]}>
+      <AccordionItem value="build">
+        <AccordionTrigger>Build settings</AccordionTrigger>
+        <AccordionContent>
+          Framework preset, build command and output directory.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="env">
+        <AccordionTrigger>Environment variables</AccordionTrigger>
+        <AccordionContent>Values available at build and run time.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="domains">
+        <AccordionTrigger>Domains</AccordionTrigger>
+        <AccordionContent>Custom domains and certificates.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const WithDisabledItem: Story = {
+  render: () => (
+    <Accordion type="single" collapsible>
+      <AccordionItem value="a">
+        <AccordionTrigger>Available section</AccordionTrigger>
+        <AccordionContent>Anyone can open this.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger disabled>Enterprise only</AccordionTrigger>
+        <AccordionContent>Upgrade to view.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

package/src/components/accordion/accordion.test.tsx

@@ -0,0 +1,156 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+
+function Single({ onValueChange }: { onValueChange?: (value: string) => void } = {}) {
+  return (
+    <Accordion type="single" collapsible onValueChange={onValueChange}>
+      <AccordionItem value="shipping">
+        <AccordionTrigger>Shipping</AccordionTrigger>
+        <AccordionContent>Ships in two days.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="returns">
+        <AccordionTrigger>Returns</AccordionTrigger>
+        <AccordionContent>Thirty day returns.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+describe("Accordion", () => {
+  it("starts collapsed", () => {
+    render(<Single />);
+    expect(screen.queryByText("Ships in two days.")).not.toBeInTheDocument();
+  });
+
+  it("expands a section on click", async () => {
+    const user = userEvent.setup();
+    render(<Single />);
+
+    await user.click(screen.getByRole("button", { name: "Shipping" }));
+    expect(await screen.findByText("Ships in two days.")).toBeInTheDocument();
+  });
+
+  it("exposes each trigger as a button inside a heading", () => {
+    render(<Single />);
+
+    const heading = screen.getByRole("heading", { name: "Shipping" });
+    expect(heading).toBeInTheDocument();
+    expect(heading).toContainElement(screen.getByRole("button", { name: "Shipping" }));
+  });
+
+  it("reports expanded state on the trigger", async () => {
+    const user = userEvent.setup();
+    render(<Single />);
+
+    const trigger = screen.getByRole("button", { name: "Shipping" });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(trigger);
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+    });
+  });
+
+  it("closes the previous section in single mode", async () => {
+    const user = userEvent.setup();
+    render(<Single />);
+
+    await user.click(screen.getByRole("button", { name: "Shipping" }));
+    await screen.findByText("Ships in two days.");
+
+    await user.click(screen.getByRole("button", { name: "Returns" }));
+    await screen.findByText("Thirty day returns.");
+    await waitFor(() => {
+      expect(screen.queryByText("Ships in two days.")).not.toBeInTheDocument();
+    });
+  });
+
+  it("collapses an open section when collapsible", async () => {
+    const user = userEvent.setup();
+    render(<Single />);
+
+    const trigger = screen.getByRole("button", { name: "Shipping" });
+    await user.click(trigger);
+    await screen.findByText("Ships in two days.");
+
+    await user.click(trigger);
+    await waitFor(() => {
+      expect(screen.queryByText("Ships in two days.")).not.toBeInTheDocument();
+    });
+  });
+
+  it("keeps sections independent in multiple mode", async () => {
+    const user = userEvent.setup();
+    render(
+      <Accordion type="multiple">
+        <AccordionItem value="a">
+          <AccordionTrigger>A</AccordionTrigger>
+          <AccordionContent>Panel A</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b">
+          <AccordionTrigger>B</AccordionTrigger>
+          <AccordionContent>Panel B</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "A" }));
+    await user.click(screen.getByRole("button", { name: "B" }));
+
+    expect(screen.getByText("Panel A")).toBeInTheDocument();
+    expect(screen.getByText("Panel B")).toBeInTheDocument();
+  });
+
+  it("moves between triggers with the arrow keys", async () => {
+    const user = userEvent.setup();
+    render(<Single />);
+
+    await user.tab();
+    expect(screen.getByRole("button", { name: "Shipping" })).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}");
+    expect(screen.getByRole("button", { name: "Returns" })).toHaveFocus();
+  });
+
+  it("toggles from the keyboard", async () => {
+    const user = userEvent.setup();
+    render(<Single />);
+
+    await user.tab();
+    await user.keyboard("{Enter}");
+    expect(await screen.findByText("Ships in two days.")).toBeInTheDocument();
+  });
+
+  it("reports value changes", async () => {
+    const onValueChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Single onValueChange={onValueChange} />);
+
+    await user.click(screen.getByRole("button", { name: "Shipping" }));
+    expect(onValueChange).toHaveBeenCalledWith("shipping");
+  });
+
+  it("lets a consumer className override a conflicting utility", () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="a" className="border-b-2" data-testid="item">
+          <AccordionTrigger>A</AccordionTrigger>
+          <AccordionContent>Panel</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const item = screen.getByTestId("item");
+    expect(item).toHaveClass("border-b-2");
+    expect(item).not.toHaveClass("border-b");
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Single />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * Vertically stacked sections that expand to reveal their content.
+ *
+ * Use `type="single"` for a set where one answer at a time is the point (an
+ * FAQ), and `type="multiple"` where sections are independent (settings groups).
+ */
+export const Accordion = AccordionPrimitive.Root;
+
+export type AccordionItemProps = ComponentPropsWithRef<typeof AccordionPrimitive.Item>;
+
+export function AccordionItem({ className, ...props }: AccordionItemProps) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b border-border last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+export type AccordionTriggerProps = ComponentPropsWithRef<typeof AccordionPrimitive.Trigger>;
+
+export function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {
+  return (
+    // The primitive requires the trigger to sit inside a Header so the button
+    // carries a heading role — without it the sections are unreachable by
+    // heading navigation, which is how many screen reader users move around.
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium",
+          "transition-colors duration-[var(--duration-fast)] hover:text-primary",
+          "disabled:pointer-events-none disabled:opacity-55",
+          "[&[data-state=open]>svg]:rotate-180",
+          focusRing,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+          className="size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]"
+        >
+          <path
+            d="m6 9 6 6 6-6"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+export type AccordionContentProps = ComponentPropsWithRef<typeof AccordionPrimitive.Content>;
+
+export function AccordionContent({ className, children, ...props }: AccordionContentProps) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className={cn(
+        // The height keyframes read --radix-accordion-content-height, which the
+        // primitive measures; overflow-hidden keeps the content clipped as the
+        // box grows rather than spilling over the section below.
+        "overflow-hidden text-sm text-muted-foreground",
+        "data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open",
+        className,
+      )}
+      {...props}
+    >
+      <div className={cn("pb-4")}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}

package/src/components/accordion/index.ts

@@ -0,0 +1,9 @@
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  type AccordionContentProps,
+  type AccordionItemProps,
+  type AccordionTriggerProps,
+} from "./accordion";

package/src/components/accordion/meta.ts

@@ -0,0 +1,16 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "accordion",
+  title: "Accordion",
+  description: "Vertically stacked sections that expand to reveal their content.",
+  category: "data",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["accordion.tsx"],
+  a11y:
+    "Each trigger is a button inside a heading, so screen reader users can navigate the " +
+    "sections by heading. aria-expanded and aria-controls tie the trigger to its panel, and " +
+    "arrow keys move between triggers.",
+});