@dowel-ui/react 0.1.0 → 0.2.0

package/src/blocks/dashboard/dashboard.test.tsx

@@ -1,94 +0,0 @@
-import { render, screen, within } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { DashboardBlock, type DashboardEvent, type DashboardStat } from "./dashboard";
-
-const STATS: DashboardStat[] = [
-  {
-    id: "mrr",
-    label: "Monthly revenue",
-    value: "$48,120",
-    change: 12.4,
-    comparison: "on last month",
-  },
-  { id: "churn", label: "Churn", value: "1.8%", change: 0.4, higherIsBetter: false },
-  { id: "users", label: "Active users", value: "2,410", change: -3.1 },
-  { id: "uptime", label: "Uptime", value: "99.98%" },
-];
-
-const EVENTS: DashboardEvent[] = [
-  {
-    id: "1",
-    title: "Deployed to production",
-    at: "2026-09-01T09:12:00Z",
-    label: "12 minutes ago",
-    tone: "success",
-  },
-  {
-    id: "2",
-    title: "Build failed",
-    detail: "Type error in table.tsx",
-    at: "2026-09-01T08:40:00Z",
-    label: "44 minutes ago",
-    tone: "destructive",
-  },
-];
-
-describe("DashboardBlock", () => {
-  it("renders each metric", () => {
-    render(<DashboardBlock stats={STATS} />);
-    expect(screen.getByText("$48,120")).toBeInTheDocument();
-    expect(screen.getByText("Active users")).toBeInTheDocument();
-  });
-
-  it("puts the metrics in a named region", () => {
-    render(<DashboardBlock stats={STATS} />);
-    expect(screen.getByRole("region", { name: "Key metrics" })).toBeInTheDocument();
-  });
-
-  it("states each change in words, not by a coloured arrow", () => {
-    render(<DashboardBlock stats={STATS} />);
-    expect(screen.getByText(/up 12\.4%/)).toBeInTheDocument();
-    expect(screen.getByText(/down 3\.1%/)).toBeInTheDocument();
-  });
-
-  it("knows a rise is not always good", () => {
-    render(<DashboardBlock stats={STATS} />);
-
-    // Churn rising is bad; revenue rising is good. Same sign, opposite meaning.
-    const churn = screen.getByText(/up 0\.4%/);
-    const revenue = screen.getByText(/up 12\.4%/);
-    expect(churn).toHaveClass("text-destructive");
-    expect(revenue).toHaveClass("text-success");
-  });
-
-  it("omits the change when there is nothing to compare to", () => {
-    render(<DashboardBlock stats={[STATS[3]!]} />);
-    expect(screen.queryByText(/up |down /)).not.toBeInTheDocument();
-  });
-
-  it("renders the activity feed as an ordered list", () => {
-    render(<DashboardBlock stats={STATS} events={EVENTS} />);
-
-    const list = screen.getByRole("list");
-    expect(list.tagName).toBe("OL");
-    expect(within(list).getAllByRole("listitem")).toHaveLength(2);
-  });
-
-  it("shows placeholders while loading, with no numbers to misread", () => {
-    render(<DashboardBlock stats={STATS} events={EVENTS} loading />);
-    expect(screen.queryByText("$48,120")).not.toBeInTheDocument();
-    expect(screen.queryByText(/up 12\.4%/)).not.toBeInTheDocument();
-  });
-
-  it("renders actions beside the heading", () => {
-    render(<DashboardBlock stats={STATS} actions={<button type="button">Export</button>} />);
-    expect(screen.getByRole("button", { name: "Export" })).toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<DashboardBlock stats={STATS} events={EVENTS} />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/blocks/forgot-password/forgot-password.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { ForgotPasswordBlock } from "./forgot-password";
-
-const meta = {
-  title: "Blocks/Forgot password",
-  component: ForgotPasswordBlock,
-  parameters: { layout: "centered", controls: { disable: true } },
-} satisfies Meta<typeof ForgotPasswordBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** Neutral about whether the address exists — otherwise this form enumerates accounts. */
-export const Sent: Story = {
-  args: { sent: true },
-};
-
-export const Interactive: Story = {
-  render: function Interactive() {
-    const [pending, setPending] = useState(false);
-    const [sent, setSent] = useState(false);
-
-    return (
-      <ForgotPasswordBlock
-        pending={pending}
-        sent={sent}
-        onSubmit={() => {
-          setPending(true);
-          window.setTimeout(() => {
-            setPending(false);
-            setSent(true);
-          }, 900);
-        }}
-      />
-    );
-  },
-};

package/src/blocks/forgot-password/forgot-password.test.tsx

@@ -1,62 +0,0 @@
-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 { ForgotPasswordBlock } from "./forgot-password";
-
-describe("ForgotPasswordBlock", () => {
-  it("asks for an email", () => {
-    render(<ForgotPasswordBlock />);
-    expect(screen.getByLabelText("Email")).toHaveAttribute("type", "email");
-  });
-
-  it("submits a valid address", async () => {
-    const onSubmit = vi.fn();
-    const user = userEvent.setup();
-    render(<ForgotPasswordBlock onSubmit={onSubmit} />);
-
-    await user.type(screen.getByLabelText("Email"), "ada@example.com");
-    await user.click(screen.getByRole("button", { name: "Send reset link" }));
-
-    expect(onSubmit).toHaveBeenCalledWith({ email: "ada@example.com" });
-  });
-
-  it("refuses an invalid address", async () => {
-    const onSubmit = vi.fn();
-    const user = userEvent.setup();
-    render(<ForgotPasswordBlock onSubmit={onSubmit} />);
-
-    await user.type(screen.getByLabelText("Email"), "nope");
-    await user.click(screen.getByRole("button", { name: "Send reset link" }));
-
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  describe("the confirmation", () => {
-    it("announces itself, because it replaces the form", () => {
-      render(<ForgotPasswordBlock sent />);
-      expect(screen.getByRole("status")).toHaveTextContent("Check your inbox");
-    });
-
-    it("does not reveal whether the account exists", () => {
-      render(<ForgotPasswordBlock sent />);
-      // Confirming it would turn this form into an account enumeration oracle.
-      expect(screen.getByText(/If an account exists/)).toBeInTheDocument();
-    });
-
-    it("replaces the form entirely", () => {
-      render(<ForgotPasswordBlock sent />);
-      expect(screen.queryByLabelText("Email")).not.toBeInTheDocument();
-    });
-  });
-
-  it("has no accessibility violations in either state", async () => {
-    const form = render(<ForgotPasswordBlock />);
-    await expectNoA11yViolations(form.container);
-    form.unmount();
-
-    const sent = render(<ForgotPasswordBlock sent />);
-    await expectNoA11yViolations(sent.container);
-  });
-});

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

@@ -1,46 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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/pricing/pricing.stories.tsx

@@ -1,62 +0,0 @@
-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

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

package/src/blocks/settings/settings.stories.tsx

@@ -1,94 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { SettingsBlock, type SettingsNotification } from "./settings";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withPageWidth: Decorator = (Story) => (
-  <div className="w-[48rem] max-w-full">
-    <Story />
-  </div>
-);
-
-const PROFILE = {
-  name: "Ada Lovelace",
-  email: "ada@example.com",
-  bio: "Working on analytical engines.",
-};
-
-const NOTIFICATIONS: SettingsNotification[] = [
-  {
-    id: "deploys",
-    label: "Deployment updates",
-    description: "When a deploy starts or finishes.",
-    enabled: true,
-  },
-  {
-    id: "failures",
-    label: "Build failures",
-    description: "Only when something breaks.",
-    enabled: true,
-  },
-  {
-    id: "digest",
-    label: "Weekly digest",
-    description: "A summary every Monday morning.",
-    enabled: false,
-  },
-];
-
-const meta = {
-  title: "Blocks/Settings",
-  component: SettingsBlock,
-  args: { profile: PROFILE, notifications: NOTIFICATIONS },
-  parameters: { controls: { disable: true } },
-  decorators: [withPageWidth],
-} satisfies Meta<typeof SettingsBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** Switches apply immediately. There is no Save button, and that is the point. */
-export const Interactive: Story = {
-  render: function Interactive() {
-    const [notifications, setNotifications] = useState(NOTIFICATIONS);
-    const [pending, setPending] = useState(false);
-
-    return (
-      <SettingsBlock
-        profile={PROFILE}
-        notifications={notifications}
-        pending={pending}
-        onToggleNotification={(id, enabled) => {
-          setNotifications((current) =>
-            current.map((item) => (item.id === id ? { ...item, enabled } : item)),
-          );
-        }}
-        onSaveProfile={() => {
-          setPending(true);
-          window.setTimeout(() => {
-            setPending(false);
-          }, 1000);
-        }}
-      />
-    );
-  },
-};
-
-export const WithExtraTab: Story = {
-  args: {
-    extraTabs: [
-      {
-        value: "billing",
-        label: "Billing",
-        content: (
-          <p className="p-6 text-sm text-muted-foreground">
-            You are on the Pro plan, billed yearly. Next invoice 1 October.
-          </p>
-        ),
-      },
-    ],
-  },
-};