@dowel-ui/react 0.1.0 → 0.1.1

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>
-        ),
-      },
-    ],
-  },
-};

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

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

package/src/blocks/signup/signup.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { SignupBlock } from "./signup";
-
-const meta = {
-  title: "Blocks/Sign up",
-  component: SignupBlock,
-  parameters: { layout: "centered", controls: { disable: true } },
-} satisfies Meta<typeof SignupBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Type a password to see the strength hint — it advises, it does not gate. */
-export const Default: Story = {};
-
-export const ShorterMinimum: Story = {
-  args: { minPasswordLength: 8 },
-};
-
-export const WithServerError: Story = {
-  args: { error: "An account already exists for that address." },
-};
-
-export const Submitting: Story = {
-  args: { pending: true },
-};

package/src/blocks/signup/signup.test.tsx

@@ -1,97 +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 { SignupBlock, estimatePasswordStrength } from "./signup";
-
-describe("estimatePasswordStrength", () => {
-  it("reports too short below the minimum", () => {
-    expect(estimatePasswordStrength("abc", 12).label).toBe("Too short");
-  });
-
-  it("rises with length and variety", () => {
-    const short = estimatePasswordStrength("aaaaaaaaaaaa", 12);
-    const varied = estimatePasswordStrength("Correct-Horse-9-Battery", 12);
-    expect(varied.score).toBeGreaterThan(short.score);
-  });
-
-  it("never exceeds 100", () => {
-    expect(estimatePasswordStrength("A".repeat(200) + "1!aA", 12).score).toBeLessThanOrEqual(
-      100,
-    );
-  });
-
-  it("prompts when empty", () => {
-    expect(estimatePasswordStrength("", 12).label).toBe("Enter a password");
-  });
-});
-
-describe("SignupBlock", () => {
-  it("labels every field", () => {
-    render(<SignupBlock />);
-    expect(screen.getByLabelText("Name")).toBeInTheDocument();
-    expect(screen.getByLabelText("Email")).toBeInTheDocument();
-    expect(screen.getByLabelText("Password")).toBeInTheDocument();
-  });
-
-  it("asks password managers for a new password, not an existing one", () => {
-    render(<SignupBlock />);
-    expect(screen.getByLabelText("Password")).toHaveAttribute("autocomplete", "new-password");
-  });
-
-  it("states the length requirement before anyone gets it wrong", () => {
-    render(<SignupBlock minPasswordLength={12} />);
-    expect(screen.getByLabelText("Password")).toHaveAccessibleDescription(
-      "At least 12 characters.",
-    );
-  });
-
-  it("shows the strength as text, with the bar hidden", async () => {
-    const user = userEvent.setup();
-    const { container } = render(<SignupBlock />);
-
-    await user.type(screen.getByLabelText("Password"), "Correct-Horse-9-Battery");
-
-    expect(screen.getByText("Strong")).toBeInTheDocument();
-    // The label already says it; the bar must not be announced as well.
-    expect(container.querySelector("[data-slot='progress']")).toHaveAttribute(
-      "aria-hidden",
-      "true",
-    );
-  });
-
-  it("gates on length, not on the strength estimate", async () => {
-    const onSubmit = vi.fn();
-    const user = userEvent.setup();
-    render(<SignupBlock onSubmit={onSubmit} minPasswordLength={12} />);
-
-    await user.type(screen.getByLabelText("Email"), "ada@example.com");
-    // Weak by the estimate, but long enough — and length is the actual rule.
-    await user.type(screen.getByLabelText("Password"), "aaaaaaaaaaaaaa");
-    await user.click(screen.getByLabelText(/I agree to the terms/));
-    await user.click(screen.getByRole("button", { name: "Create account" }));
-
-    expect(onSubmit).toHaveBeenCalledWith(
-      expect.objectContaining({ email: "ada@example.com" }),
-    );
-  });
-
-  it("requires the terms to be accepted, and says so", async () => {
-    const onSubmit = vi.fn();
-    const user = userEvent.setup();
-    render(<SignupBlock onSubmit={onSubmit} />);
-
-    await user.type(screen.getByLabelText("Email"), "ada@example.com");
-    await user.type(screen.getByLabelText("Password"), "aaaaaaaaaaaaaa");
-    await user.click(screen.getByRole("button", { name: "Create account" }));
-
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(screen.getByText("Accept the terms to continue.")).toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<SignupBlock />);
-    await expectNoA11yViolations(container);
-  });
-});

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

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

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