@dowel-ui/react 0.1.0

package/src/blocks/pricing/pricing.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+
+import { Badge } from "@/components/badge";
+import { Button } from "@/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/card";
+import { Label } from "@/components/label";
+import { Switch } from "@/components/switch";
+import { cn } from "@/lib/utils";
+
+/**
+ * A pricing section.
+ *
+ * The billing-period toggle is the part that usually goes wrong. It changes
+ * every price on the page at once, which is a large change nobody asked for in
+ * words — so the prices update in place and the change is announced, rather
+ * than silently rewriting the page under the reader.
+ */
+
+export interface PricingPlan {
+  id: string;
+  name: string;
+  description: string;
+  /** Monthly price in whole currency units. `null` means "talk to us". */
+  monthly: number | null;
+  /** Yearly price per month. Omit to bill yearly at the monthly rate. */
+  yearlyPerMonth?: number;
+  features: string[];
+  /** Marks the recommended plan. At most one. */
+  featured?: boolean;
+  cta?: string;
+  onSelect?: () => void;
+}
+
+export interface PricingBlockProps {
+  title?: string;
+  description?: string;
+  plans: PricingPlan[];
+  currency?: string;
+  /** Shows the monthly/yearly toggle. */
+  showPeriodToggle?: boolean;
+  footnote?: ReactNode;
+  className?: string;
+}
+
+export function PricingBlock({
+  title = "Pricing",
+  description = "Start free. Upgrade when you need to.",
+  plans,
+  currency = "$",
+  showPeriodToggle = true,
+  footnote,
+  className,
+}: PricingBlockProps) {
+  const [yearly, setYearly] = useState(false);
+
+  function priceOf(plan: PricingPlan): { amount: string; suffix: string } {
+    if (plan.monthly === null) return { amount: "Custom", suffix: "" };
+    const value = yearly ? (plan.yearlyPerMonth ?? plan.monthly) : plan.monthly;
+    return { amount: `${currency}${String(value)}`, suffix: "/month" };
+  }
+
+  return (
+    <section aria-labelledby="pricing-heading" className={cn("flex flex-col gap-8", className)}>
+      <div className="text-center">
+        <h2 id="pricing-heading" className="text-2xl font-semibold tracking-tight text-balance">
+          {title}
+        </h2>
+        <p className="mx-auto mt-2 max-w-lg text-pretty text-muted-foreground">{description}</p>
+
+        {showPeriodToggle ? (
+          <div className="mt-6 flex items-center justify-center gap-3">
+            <Label htmlFor="billing-period" className="text-sm font-normal">
+              Monthly
+            </Label>
+            <Switch
+              id="billing-period"
+              checked={yearly}
+              onCheckedChange={setYearly}
+              aria-label="Bill yearly"
+            />
+            <Label htmlFor="billing-period" className="text-sm font-normal">
+              Yearly
+            </Label>
+            <Badge size="sm" variant="success">
+              Save 20%
+            </Badge>
+          </div>
+        ) : null}
+      </div>
+
+      {/* Every price on the page changes at once, which is a big change nobody
+          asked for out loud. Announcing it politely is the difference between a
+          helpful toggle and the page silently rewriting itself. */}
+      <p aria-live="polite" className="sr-only">
+        Showing {yearly ? "yearly" : "monthly"} pricing.
+      </p>
+
+      <div className="grid gap-6 md:grid-cols-3">
+        {plans.map((plan) => {
+          const price = priceOf(plan);
+
+          return (
+            <Card
+              key={plan.id}
+              className={cn("flex flex-col", plan.featured && "border-primary shadow-lg")}
+            >
+              <CardHeader>
+                <div className="flex items-center justify-between gap-2">
+                  <CardTitle>{plan.name}</CardTitle>
+                  {plan.featured ? <Badge size="sm">Recommended</Badge> : null}
+                </div>
+                <CardDescription>{plan.description}</CardDescription>
+                <p className="mt-3 flex items-baseline gap-1">
+                  <span className="text-3xl font-semibold tabular-nums">{price.amount}</span>
+                  {price.suffix ? (
+                    <span className="text-sm text-muted-foreground">{price.suffix}</span>
+                  ) : null}
+                </p>
+                {yearly && plan.monthly !== null && plan.yearlyPerMonth !== undefined ? (
+                  <p className="text-xs text-muted-foreground">Billed yearly.</p>
+                ) : null}
+              </CardHeader>
+
+              <CardContent className="flex-1">
+                <ul className="flex flex-col gap-2 text-sm">
+                  {plan.features.map((feature) => (
+                    <li key={feature} className="flex items-start gap-2">
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        aria-hidden="true"
+                        className="mt-0.5 size-4 shrink-0 text-success"
+                      >
+                        <path
+                          d="m5 13 4 4L19 7"
+                          stroke="currentColor"
+                          strokeWidth="2.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                      <span className="text-muted-foreground">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+
+              <CardFooter>
+                <Button
+                  className="w-full"
+                  variant={plan.featured ? "primary" : "outline"}
+                  onClick={plan.onSelect}
+                >
+                  {plan.cta ?? `Choose ${plan.name}`}
+                </Button>
+              </CardFooter>
+            </Card>
+          );
+        })}
+      </div>
+
+      {footnote ? (
+        <p className="text-center text-xs text-muted-foreground">{footnote}</p>
+      ) : null}
+    </section>
+  );
+}

package/src/blocks/settings/index.ts

@@ -0,0 +1,6 @@
+export {
+  SettingsBlock,
+  type SettingsBlockProps,
+  type SettingsNotification,
+  type SettingsProfile,
+} from "./settings";

package/src/blocks/settings/meta.ts

@@ -0,0 +1,29 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "settings",
+  kind: "block",
+  title: "Settings",
+  description: "A settings page with a profile form, immediate toggles and a danger zone.",
+  category: "form",
+  status: "stable",
+  dependencies: [],
+  registryDependencies: [
+    "avatar",
+    "button",
+    "card",
+    "dialog",
+    "form",
+    "input",
+    "label",
+    "separator",
+    "switch",
+    "tabs",
+  ],
+  files: ["settings.tsx"],
+  a11y:
+    "Switches apply immediately and have no Save button — a switch that needs saving is a broken " +
+    "promise, so staged changes live in the form instead. The delete confirmation names what will " +
+    "be destroyed and requires typing the account's email, so the destructive button cannot be " +
+    "reached by muscle memory.",
+});

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

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

package/src/blocks/settings/settings.test.tsx

@@ -0,0 +1,167 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { SettingsBlock, type SettingsNotification } from "./settings";
+
+const PROFILE = { name: "Ada Lovelace", email: "ada@example.com", bio: "Building things." };
+
+const NOTIFICATIONS: SettingsNotification[] = [
+  {
+    id: "deploys",
+    label: "Deployment updates",
+    description: "When a deploy finishes.",
+    enabled: true,
+  },
+  {
+    id: "digest",
+    label: "Weekly digest",
+    description: "A summary every Monday.",
+    enabled: false,
+  },
+];
+
+describe("SettingsBlock", () => {
+  it("opens on the profile tab", () => {
+    render(<SettingsBlock profile={PROFILE} notifications={NOTIFICATIONS} />);
+    expect(screen.getByLabelText("Name")).toHaveValue("Ada Lovelace");
+  });
+
+  it("saves the profile as a staged change", async () => {
+    const onSaveProfile = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <SettingsBlock
+        profile={PROFILE}
+        notifications={NOTIFICATIONS}
+        onSaveProfile={onSaveProfile}
+      />,
+    );
+
+    await user.clear(screen.getByLabelText("Name"));
+    await user.type(screen.getByLabelText("Name"), "Ada L");
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    expect(onSaveProfile).toHaveBeenCalledWith(expect.objectContaining({ name: "Ada L" }));
+  });
+
+  it("refuses to save an invalid profile", async () => {
+    const onSaveProfile = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <SettingsBlock
+        profile={PROFILE}
+        notifications={NOTIFICATIONS}
+        onSaveProfile={onSaveProfile}
+      />,
+    );
+
+    await user.clear(screen.getByLabelText("Email"));
+    await user.type(screen.getByLabelText("Email"), "nope");
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    expect(onSaveProfile).not.toHaveBeenCalled();
+    expect(screen.getByLabelText("Email")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  describe("notifications", () => {
+    it("apply immediately, with no Save button", async () => {
+      const onToggle = vi.fn();
+      const user = userEvent.setup();
+      render(
+        <SettingsBlock
+          profile={PROFILE}
+          notifications={NOTIFICATIONS}
+          onToggleNotification={onToggle}
+        />,
+      );
+
+      await user.click(screen.getByRole("tab", { name: "Notifications" }));
+      await user.click(await screen.findByRole("switch", { name: "Weekly digest" }));
+
+      expect(onToggle).toHaveBeenCalledWith("digest", true);
+      // A switch that needs saving is a broken promise.
+      expect(screen.queryByRole("button", { name: "Save changes" })).not.toBeInTheDocument();
+    });
+
+    it("labels every switch", async () => {
+      const user = userEvent.setup();
+      render(<SettingsBlock profile={PROFILE} notifications={NOTIFICATIONS} />);
+
+      await user.click(screen.getByRole("tab", { name: "Notifications" }));
+      expect(await screen.findByRole("switch", { name: "Deployment updates" })).toBeChecked();
+    });
+  });
+
+  describe("the danger zone", () => {
+    async function openDialog() {
+      const user = userEvent.setup();
+      const onDeleteAccount = vi.fn();
+      render(
+        <SettingsBlock
+          profile={PROFILE}
+          notifications={NOTIFICATIONS}
+          onDeleteAccount={onDeleteAccount}
+        />,
+      );
+
+      await user.click(screen.getByRole("tab", { name: "Danger zone" }));
+      await user.click(await screen.findByRole("button", { name: "Delete account" }));
+      const dialog = await screen.findByRole("dialog");
+      return { user, onDeleteAccount, dialog };
+    }
+
+    it("names what will be destroyed", async () => {
+      await openDialog();
+      // Not "Are you sure?" — that tells nobody anything they did not know.
+      expect(
+        screen.getByRole("dialog", { name: /Delete Ada Lovelace.s account\?/ }),
+      ).toBeInTheDocument();
+      expect(screen.getByText(/permanently deletes the account/)).toBeInTheDocument();
+    });
+
+    it("stays disabled until the email is typed exactly", async () => {
+      const { user, dialog } = await openDialog();
+
+      // Scoped to the dialog: while it is open the trigger behind it is inert,
+      // so a document-wide query finds only one button and the index is a trap.
+      const confirm = within(dialog).getByRole("button", { name: "Delete account" });
+      expect(confirm).toBeDisabled();
+
+      await user.type(screen.getByLabelText(/to confirm/), "ada@example.com");
+      await waitFor(() => {
+        expect(confirm).toBeEnabled();
+      });
+    });
+
+    it("deletes only after confirmation", async () => {
+      const { user, onDeleteAccount, dialog } = await openDialog();
+
+      await user.type(screen.getByLabelText(/to confirm/), "ada@example.com");
+      await user.click(within(dialog).getByRole("button", { name: "Delete account" }));
+      expect(onDeleteAccount).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("accepts extra tabs", async () => {
+    const user = userEvent.setup();
+    render(
+      <SettingsBlock
+        profile={PROFILE}
+        notifications={NOTIFICATIONS}
+        extraTabs={[{ value: "billing", label: "Billing", content: <p>Your plan is Pro.</p> }]}
+      />,
+    );
+
+    await user.click(screen.getByRole("tab", { name: "Billing" }));
+    expect(await screen.findByText("Your plan is Pro.")).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <SettingsBlock profile={PROFILE} notifications={NOTIFICATIONS} />,
+    );
+    await expectNoA11yViolations(container);
+  });
+});