@dowel-ui/react 0.1.0

package/src/blocks/forgot-password/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "forgot-password",
+  kind: "block",
+  title: "Forgot password",
+  description:
+    "A password reset request, with a confirmation that does not leak account existence.",
+  category: "form",
+  status: "stable",
+  dependencies: [],
+  registryDependencies: ["button", "card", "empty-state", "form", "input"],
+  files: ["forgot-password.tsx"],
+  a11y:
+    "The confirmation replaces the form, so it is a polite live region — otherwise a screen " +
+    "reader user submits and hears nothing. The wording is deliberately neutral about whether " +
+    "the address exists: confirming it would turn this form into an account enumeration oracle.",
+});

package/src/blocks/login/index.ts

@@ -0,0 +1 @@
+export { LoginBlock, type LoginBlockProps } from "./login";

package/src/blocks/login/login.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { LoginBlock } from "./login";
+
+const meta = {
+  title: "Blocks/Login",
+  component: LoginBlock,
+  parameters: { layout: "centered", controls: { disable: true } },
+} satisfies Meta<typeof LoginBlock>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithServerError: Story = {
+  args: { error: "Those credentials did not match our records." },
+};
+
+export const Submitting: Story = {
+  args: { pending: true },
+};
+
+/** The whole round trip: submit, wait, fail. */
+export const Interactive: Story = {
+  render: function Interactive() {
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState<string | undefined>(undefined);
+
+    return (
+      <LoginBlock
+        pending={pending}
+        error={error}
+        onSubmit={() => {
+          setError(undefined);
+          setPending(true);
+          window.setTimeout(() => {
+            setPending(false);
+            setError("Those credentials did not match our records.");
+          }, 1200);
+        }}
+      />
+    );
+  },
+};

package/src/blocks/login/login.test.tsx

@@ -0,0 +1,100 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { LoginBlock } from "./login";
+
+describe("LoginBlock", () => {
+  it("labels every field", () => {
+    render(<LoginBlock />);
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+    expect(screen.getByLabelText("Keep me signed in")).toBeInTheDocument();
+  });
+
+  it("uses the right input types and autocomplete", () => {
+    render(<LoginBlock />);
+
+    const email = screen.getByLabelText("Email");
+    expect(email).toHaveAttribute("type", "email");
+    expect(email).toHaveAttribute("autocomplete", "email");
+    expect(screen.getByLabelText("Password")).toHaveAttribute(
+      "autocomplete",
+      "current-password",
+    );
+  });
+
+  it("submits valid credentials", async () => {
+    const onSubmit = vi.fn();
+    const user = userEvent.setup();
+    render(<LoginBlock onSubmit={onSubmit} />);
+
+    await user.type(screen.getByLabelText("Email"), "ada@example.com");
+    await user.type(screen.getByLabelText("Password"), "correct horse");
+    await user.click(screen.getByRole("button", { name: "Sign in" }));
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      email: "ada@example.com",
+      password: "correct horse",
+      remember: false,
+    });
+  });
+
+  it("reports the remember choice", async () => {
+    const onSubmit = vi.fn();
+    const user = userEvent.setup();
+    render(<LoginBlock onSubmit={onSubmit} />);
+
+    await user.type(screen.getByLabelText("Email"), "ada@example.com");
+    await user.type(screen.getByLabelText("Password"), "secret");
+    await user.click(screen.getByLabelText("Keep me signed in"));
+    await user.click(screen.getByRole("button", { name: "Sign in" }));
+
+    expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({ remember: true }));
+  });
+
+  it("does not submit an invalid form, and ties the error to the field", async () => {
+    const onSubmit = vi.fn();
+    const user = userEvent.setup();
+    render(<LoginBlock onSubmit={onSubmit} />);
+
+    await user.type(screen.getByLabelText("Email"), "nope");
+    await user.click(screen.getByRole("button", { name: "Sign in" }));
+
+    expect(onSubmit).not.toHaveBeenCalled();
+    const email = screen.getByLabelText("Email");
+    expect(email).toHaveAttribute("aria-invalid", "true");
+    expect(email).toHaveAccessibleDescription("Enter a valid email address.");
+  });
+
+  it("announces a server error assertively", () => {
+    render(<LoginBlock error="Those credentials did not match." />);
+    // It arrived after the user acted and explains why nothing happened.
+    expect(screen.getByRole("alert")).toHaveTextContent("Those credentials did not match.");
+  });
+
+  it("reports its busy state on the submit button", () => {
+    render(<LoginBlock pending />);
+    const submit = screen.getByRole("button", { name: "Sign in" });
+    expect(submit).toHaveAttribute("aria-busy", "true");
+    expect(screen.getByLabelText("Email")).toBeDisabled();
+  });
+
+  it("links to password recovery and sign-up", () => {
+    render(<LoginBlock forgotHref="/reset" signupHref="/register" />);
+    expect(screen.getByRole("link", { name: "Forgot password?" })).toHaveAttribute(
+      "href",
+      "/reset",
+    );
+    expect(screen.getByRole("link", { name: "Create one" })).toHaveAttribute(
+      "href",
+      "/register",
+    );
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<LoginBlock error="Those credentials did not match." />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/blocks/login/login.tsx

@@ -0,0 +1,178 @@
+"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, FormField, FormLabel, FormMessage } from "@/components/form";
+import { Input } from "@/components/input";
+import { Label } from "@/components/label";
+import { Separator } from "@/components/separator";
+import { cn } from "@/lib/utils";
+
+/**
+ * A sign-in form.
+ *
+ * Wired for the parts that are easy to get wrong rather than left as markup:
+ * the email field is typed and autocompleted correctly, errors are announced,
+ * and the submit button reports its own busy state instead of leaving people
+ * wondering whether the click registered.
+ *
+ * Validation here is the minimum that makes the form usable offline. Real
+ * validation belongs to whatever the form is submitted to — pass `error` for a
+ * server response.
+ */
+
+export interface LoginBlockProps {
+  /** Called with the submitted credentials. */
+  onSubmit?: (values: { email: string; password: string; remember: boolean }) => void;
+  /** A server-side error, shown above the fields. */
+  error?: string;
+  /** Disables the form and shows the submit button as busy. */
+  pending?: boolean;
+  /** Where "Forgot password?" goes. */
+  forgotHref?: string;
+  /** Where "Create an account" goes. */
+  signupHref?: string;
+  className?: string;
+}
+
+export function LoginBlock({
+  onSubmit,
+  error,
+  pending = false,
+  forgotHref = "/forgot-password",
+  signupHref = "/signup",
+  className,
+}: LoginBlockProps) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [remember, setRemember] = useState(false);
+  const [touched, setTouched] = useState(false);
+
+  const emailError =
+    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
+  const passwordError = touched && password.length === 0 ? "Enter your password." : undefined;
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setTouched(true);
+    if (!email.includes("@") || password.length === 0) return;
+    onSubmit?.({ email, password, remember });
+  }
+
+  return (
+    <Card className={cn("w-full max-w-sm", className)}>
+      <CardHeader>
+        <CardTitle>Sign in</CardTitle>
+        <CardDescription>Welcome back. Enter your details to continue.</CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <Form onSubmit={handleSubmit} className="gap-4">
+          {/* A server error is assertive: it arrived after the user acted, and
+              it is the reason nothing happened. */}
+          {error ? (
+            <p role="alert" className="text-sm font-medium text-destructive">
+              {error}
+            </p>
+          ) : null}
+
+          <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}>
+            <div className="flex items-center justify-between">
+              <FormLabel>Password</FormLabel>
+              <a
+                href={forgotHref}
+                className="text-xs font-medium text-muted-foreground underline underline-offset-4 hover:text-foreground"
+              >
+                Forgot password?
+              </a>
+            </div>
+            <FormControl>
+              <Input
+                type="password"
+                autoComplete="current-password"
+                value={password}
+                disabled={pending}
+                onChange={(event) => {
+                  setPassword(event.target.value);
+                }}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormField>
+
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="remember-me"
+              checked={remember}
+              disabled={pending}
+              onCheckedChange={(checked) => {
+                setRemember(checked === true);
+              }}
+            />
+            <Label htmlFor="remember-me" className="text-sm font-normal">
+              Keep me signed in
+            </Label>
+          </div>
+
+          <Button type="submit" loading={pending} className="w-full">
+            Sign in
+          </Button>
+        </Form>
+
+        <div className="my-5 flex items-center gap-3">
+          <Separator className="flex-1" />
+          <span className="text-2xs text-muted-foreground uppercase">or</span>
+          <Separator className="flex-1" />
+        </div>
+
+        <div className="grid gap-2">
+          <Button variant="outline" className="w-full" disabled={pending}>
+            Continue with GitHub
+          </Button>
+          <Button variant="outline" className="w-full" disabled={pending}>
+            Continue with Google
+          </Button>
+        </div>
+      </CardContent>
+
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          Don&rsquo;t have an account?{" "}
+          <a
+            href={signupHref}
+            className="font-medium text-primary underline underline-offset-4"
+          >
+            Create one
+          </a>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

package/src/blocks/login/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "login",
+  kind: "block",
+  title: "Login",
+  description: "A sign-in form with validation, social providers and a busy state.",
+  category: "form",
+  status: "stable",
+  dependencies: [],
+  registryDependencies: ["button", "card", "checkbox", "form", "input", "label", "separator"],
+  files: ["login.tsx"],
+  a11y:
+    "Email and password fields carry the right type and autocomplete, so password managers and " +
+    "mobile keyboards behave. Field errors are tied to their inputs through the Form wiring; a " +
+    "server error is an assertive alert, because it arrived after the user acted and explains why " +
+    "nothing happened. The submit button reports its own busy state rather than going quiet.",
+});

package/src/blocks/pricing/index.ts

@@ -0,0 +1 @@
+export { PricingBlock, type PricingBlockProps, type PricingPlan } from "./pricing";

package/src/blocks/pricing/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "pricing",
+  kind: "block",
+  title: "Pricing",
+  description: "A pricing section with plan cards and a monthly/yearly toggle.",
+  category: "layout",
+  status: "stable",
+  dependencies: [],
+  registryDependencies: ["badge", "button", "card", "label", "switch"],
+  files: ["pricing.tsx"],
+  a11y:
+    "Switching the billing period rewrites every price on the page, so the change is announced " +
+    "politely rather than happening silently. Each plan's call to action names the plan — three " +
+    'buttons all reading "Choose" are indistinguishable out of context. Feature ticks are ' +
+    "decorative; the feature text carries the meaning.",
+});

package/src/blocks/pricing/pricing.stories.tsx

@@ -0,0 +1,62 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
+
+import { PricingBlock, type PricingPlan } from "./pricing";
+
+/** Named so its type is nameable in declaration output (TS2883). */
+const withPageWidth: Decorator = (Story) => (
+  <div className="w-[64rem] max-w-full">
+    <Story />
+  </div>
+);
+
+const PLANS: PricingPlan[] = [
+  {
+    id: "hobby",
+    name: "Hobby",
+    description: "For personal projects.",
+    monthly: 0,
+    features: ["1 project", "Community support", "Deploy from Git"],
+    cta: "Start free",
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    description: "For teams shipping to production.",
+    monthly: 20,
+    yearlyPerMonth: 16,
+    features: ["Unlimited projects", "Priority support", "Preview deployments", "Analytics"],
+    featured: true,
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    description: "For organisations with compliance needs.",
+    monthly: null,
+    features: ["SSO and SCIM", "Audit logs", "Dedicated support", "Custom contracts"],
+    cta: "Talk to sales",
+  },
+];
+
+const meta = {
+  title: "Blocks/Pricing",
+  component: PricingBlock,
+  args: { plans: PLANS },
+  parameters: { controls: { disable: true } },
+  decorators: [withPageWidth],
+} satisfies Meta<typeof PricingBlock>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Flip the period: every price changes, and the change is announced. */
+export const Default: Story = {};
+
+export const WithoutPeriodToggle: Story = {
+  args: { showPeriodToggle: false },
+};
+
+export const WithFootnote: Story = {
+  args: {
+    footnote: "All prices exclude VAT. Cancel at any time.",
+  },
+};

package/src/blocks/pricing/pricing.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { PricingBlock, type PricingPlan } from "./pricing";
+
+const PLANS: PricingPlan[] = [
+  {
+    id: "hobby",
+    name: "Hobby",
+    description: "Personal projects.",
+    monthly: 0,
+    features: ["1 project"],
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    description: "Teams shipping to production.",
+    monthly: 20,
+    yearlyPerMonth: 16,
+    features: ["Unlimited projects", "Priority support"],
+    featured: true,
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    description: "SSO and audit logs.",
+    monthly: null,
+    features: ["SSO"],
+  },
+];
+
+describe("PricingBlock", () => {
+  it("renders each plan with its price", () => {
+    render(<PricingBlock plans={PLANS} />);
+    expect(screen.getByText("$20")).toBeInTheDocument();
+    expect(screen.getByText("$0")).toBeInTheDocument();
+  });
+
+  it("shows a custom price as words, not a number", () => {
+    render(<PricingBlock plans={PLANS} />);
+    expect(screen.getByText("Custom")).toBeInTheDocument();
+  });
+
+  it("names each call to action after its plan", () => {
+    render(<PricingBlock plans={PLANS} />);
+    // Three buttons all reading "Choose" are indistinguishable out of context.
+    expect(screen.getByRole("button", { name: "Choose Pro" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Choose Hobby" })).toBeInTheDocument();
+  });
+
+  it("marks the recommended plan in text", () => {
+    render(<PricingBlock plans={PLANS} />);
+    expect(screen.getByText("Recommended")).toBeInTheDocument();
+  });
+
+  it("switches every price when the period changes", async () => {
+    const user = userEvent.setup();
+    render(<PricingBlock plans={PLANS} />);
+
+    expect(screen.getByText("$20")).toBeInTheDocument();
+    await user.click(screen.getByRole("switch", { name: "Bill yearly" }));
+    expect(screen.getByText("$16")).toBeInTheDocument();
+  });
+
+  it("announces the period change, since it rewrites the whole page", async () => {
+    const user = userEvent.setup();
+    render(<PricingBlock plans={PLANS} />);
+
+    expect(screen.getByText("Showing monthly pricing.")).toBeInTheDocument();
+    await user.click(screen.getByRole("switch", { name: "Bill yearly" }));
+    expect(screen.getByText("Showing yearly pricing.")).toBeInTheDocument();
+  });
+
+  it("can hide the period toggle", () => {
+    render(<PricingBlock plans={PLANS} showPeriodToggle={false} />);
+    expect(screen.queryByRole("switch")).not.toBeInTheDocument();
+  });
+
+  it("reports which plan was chosen", async () => {
+    const onSelect = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <PricingBlock plans={PLANS.map((p) => (p.id === "pro" ? { ...p, onSelect } : p))} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Choose Pro" }));
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("is a named section", () => {
+    render(<PricingBlock plans={PLANS} title="Plans" />);
+    expect(screen.getByRole("region", { name: "Plans" })).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<PricingBlock plans={PLANS} />);
+    await expectNoA11yViolations(container);
+  });
+});