@exegia/corpora-ui 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exegia/corpora-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "shadcn-ready React UI library for the corpora manuscript-research apps.",
   "license": "MIT",
   "repository": {

package/src/components/blocks/auth/__tests__/signup-block.test.tsx

@@ -0,0 +1,176 @@
+import { describe, expect, mock, test } from "bun:test";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import { SignupBlock } from "../signup-block";
+
+const STRONG = "Str0ngPassword";
+
+/** Fills every field, so only the terms checkbox stands between us and submit. */
+async function fillForm(user: ReturnType<typeof userEvent.setup>) {
+  await user.type(screen.getByLabelText("Name"), "Ada Researcher");
+  await user.type(screen.getByLabelText("Email"), "ada@corpora.local");
+  await user.type(await screen.findByLabelText("Password"), STRONG);
+}
+
+// Base UI renders a hidden native input beside the Checkbox root, so the box is
+// queried by role and read from aria-checked (see CLAUDE.md).
+const checkbox = () => screen.getByRole("checkbox");
+
+describe("SignupBlock terms checkbox", () => {
+  test("owns the box when uncontrolled", async () => {
+    const user = userEvent.setup();
+    render(<SignupBlock />);
+
+    expect(checkbox().getAttribute("aria-checked")).toBe("false");
+
+    await user.click(checkbox());
+    await waitFor(() =>
+      expect(checkbox().getAttribute("aria-checked")).toBe("true"),
+    );
+  });
+
+  test("starts from defaultTermsChecked", () => {
+    render(<SignupBlock defaultTermsChecked />);
+    expect(checkbox().getAttribute("aria-checked")).toBe("true");
+  });
+
+  test("reports changes through onTermsCheckedChange while uncontrolled", async () => {
+    const user = userEvent.setup();
+    const onChange = mock((checked: boolean) => checked);
+    render(<SignupBlock onTermsCheckedChange={onChange} />);
+
+    await user.click(checkbox());
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  test("defers to the owner when controlled", async () => {
+    const user = userEvent.setup();
+    const onChange = mock((checked: boolean) => checked);
+    render(<SignupBlock termsChecked={false} onTermsCheckedChange={onChange} />);
+
+    await user.click(checkbox());
+
+    // The click is reported, but the box only moves if the owner says so.
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(checkbox().getAttribute("aria-checked")).toBe("false");
+  });
+
+  test("lets an outside action tick the box and unblock submit", async () => {
+    const user = userEvent.setup();
+    const onSubmit = mock(async () => {});
+
+    // Stands in for a consumer's terms dialog: an "I agree" action that ticks
+    // the block's checkbox from outside it.
+    function Host() {
+      const [accepted, setAccepted] = React.useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setAccepted(true)}>
+            I agree
+          </button>
+          <SignupBlock
+            termsChecked={accepted}
+            onTermsCheckedChange={setAccepted}
+            onSubmit={onSubmit}
+          />
+        </>
+      );
+    }
+    render(<Host />);
+
+    await fillForm(user);
+    await user.click(await screen.findByRole("button", { name: "I agree" }));
+    await waitFor(() =>
+      expect(checkbox().getAttribute("aria-checked")).toBe("true"),
+    );
+
+    await user.click(screen.getByRole("button", { name: "Create account" }));
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled());
+  });
+
+  test("still blocks submission while the controlled box is unticked", async () => {
+    const user = userEvent.setup();
+    const onSubmit = mock(async () => {});
+    render(<SignupBlock termsChecked={false} onSubmit={onSubmit} />);
+
+    await fillForm(user);
+    await user.click(screen.getByRole("button", { name: "Create account" }));
+
+    expect(await screen.findByRole("alert")).toHaveProperty(
+      "textContent",
+      "Please accept the terms to continue.",
+    );
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+});
+
+describe("SignupBlock field labelling", () => {
+  test("names every field, including the revealed password", async () => {
+    const user = userEvent.setup();
+    render(<SignupBlock />);
+
+    expect(screen.getByLabelText("Name")).toBeDefined();
+    expect(screen.getByLabelText("Email")).toBeDefined();
+
+    // The password field only appears once the email validates.
+    await user.type(screen.getByLabelText("Email"), "ada@corpora.local");
+    expect(await screen.findByLabelText("Password")).toBeDefined();
+  });
+
+  test("gives each instance its own password id", async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <SignupBlock showNameField={false} />
+        <SignupBlock showNameField={false} />
+      </>,
+    );
+
+    const emails = screen.getAllByLabelText("Email");
+    await user.type(emails[0], "ada@corpora.local");
+    await user.type(emails[1], "ben@corpora.local");
+
+    // Two blocks on one page must not collide on a hard-coded id, or the
+    // second label would point at the first block's input.
+    const passwords = await screen.findAllByLabelText("Password");
+    expect(passwords).toHaveLength(2);
+    expect(passwords[0].id).not.toBe(passwords[1].id);
+  });
+});
+
+// The terms link sits inside the consent <label>, and under happy-dom that
+// nesting computes an empty accessible name — so it is queried by text rather
+// than by role + name. It resolves normally in a browser.
+const termsLink = () => screen.getByText("terms");
+
+describe("SignupBlock termsComponent", () => {
+  test("renders the built-in terms link by default", async () => {
+    const user = userEvent.setup();
+    const onTerms = mock(() => {});
+    render(<SignupBlock onTerms={onTerms} />);
+
+    expect(termsLink().tagName).toBe("BUTTON");
+    await user.click(termsLink());
+    expect(onTerms).toHaveBeenCalled();
+  });
+
+  test("swaps the link for the consumer's own node", () => {
+    render(
+      <SignupBlock
+        termsComponent={<button type="button">read the terms</button>}
+      />,
+    );
+
+    expect(screen.getByText("read the terms")).toBeDefined();
+    expect(screen.queryByText("terms")).toBeNull();
+  });
+
+  test("keeps the consent label around the replacement", () => {
+    render(<SignupBlock termsComponent={<span>our terms of use</span>} />);
+
+    expect(screen.getByText(/I agree to the/)).toBeDefined();
+    expect(screen.getByRole("checkbox")).toBeDefined();
+  });
+});

package/src/components/blocks/auth/signup-block.tsx

@@ -31,6 +31,11 @@ import {
 export interface SignupBlockProps {
   title?: string;
   description?: string;
+  /**
+   * Replaces the built-in "terms" link inside the consent label — pass your
+   * own dialog trigger to render it inline instead of wiring `onTerms`.
+   */
+  termsComponent?: React.ReactNode;
   /** Brand mark rendered above the title. Omit for no logo row at all. */
   logo?: React.ReactNode;
   /** Brand accent for the primary action. Omit to keep the default primary. */
@@ -39,6 +44,16 @@ export interface SignupBlockProps {
   showNameField?: boolean;
   /** Require the terms checkbox before submitting. */
   showTerms?: boolean;
+  /**
+   * Controls the terms checkbox. Pass it with `onTermsCheckedChange` when
+   * something outside the block has to tick the box — an "I agree" action in
+   * your own terms dialog, say. Omit to let the block own the state.
+   */
+  termsChecked?: boolean;
+  /** Starting state of the terms checkbox while it is uncontrolled. */
+  defaultTermsChecked?: boolean;
+  /** Fires on every change, controlled or not. */
+  onTermsCheckedChange?: (checked: boolean) => void;
   /** Block submission until every password requirement is met. */
   enforceStrongPassword?: boolean;
   onSubmit?: (data: {
@@ -59,21 +74,36 @@ export function SignupBlock({
   providers = ["google", "apple", "github"],
   showNameField = true,
   showTerms = true,
+  termsChecked,
+  defaultTermsChecked = false,
+  onTermsCheckedChange,
   enforceStrongPassword = true,
   onSubmit,
+  termsComponent,
   onProviderSelect,
   onLogin,
   onTerms,
 }: SignupBlockProps) {
   const nameId = React.useId();
   const emailId = React.useId();
+  const passwordId = React.useId();
   const termsId = React.useId();
   const [status, setStatus] = React.useState<AuthStatus>("idle");
   const [error, setError] = React.useState<string | null>(null);
   const [loadingProvider, setLoadingProvider] =
     React.useState<SocialProvider | null>(null);
   const [password, setPassword] = React.useState("");
-  const [terms, setTerms] = React.useState(false);
+  // Controlled when `termsChecked` is passed, uncontrolled otherwise. The
+  // internal state is kept either way, so a block that switches between the
+  // two mid-life does not lose the box, and the callback fires in both modes.
+  const [uncontrolledTerms, setUncontrolledTerms] =
+    React.useState(defaultTermsChecked);
+  const terms = termsChecked ?? uncontrolledTerms;
+
+  function handleTermsChange(checked: boolean) {
+    if (termsChecked === undefined) setUncontrolledTerms(checked);
+    onTermsCheckedChange?.(checked);
+  }
   // Tracked from each input's own constraint validation rather than a regex.
   // The values stay uncontrolled — only validity is needed, and the form reads
   // values from FormData on submit.
@@ -198,6 +228,7 @@ export function SignupBlock({
                   id={emailId}
                   name="email"
                   type="email"
+                  aria-label="Email"
                   autoComplete="email"
                   placeholder="you@example.com"
                   required
@@ -209,9 +240,11 @@ export function SignupBlock({
               </Field>
               <Reveal show={emailValid}>
                 <Field name="password">
-                  <FieldLabel>Password</FieldLabel>
+                  <FieldLabel htmlFor={passwordId}>Password</FieldLabel>
                   <PasswordInput
+                    id={passwordId}
                     name="password"
+                    aria-label="Password"
                     autoComplete="new-password"
                     placeholder="Create a password"
                     showStrength
@@ -227,18 +260,18 @@ export function SignupBlock({
                   <Checkbox
                     id={termsId}
                     checked={terms}
-                    onCheckedChange={(checked) => setTerms(checked === true)}
+                    onCheckedChange={(checked) =>
+                      handleTermsChange(checked === true)
+                    }
                     disabled={busy}
                   />
                   <Label htmlFor={termsId} className="font-normal">
                     I agree to the{" "}
-                    <Button
-                      variant="link"
-                      type="button"
-                      onClick={onTerms}
-                    >
-                      terms
-                    </Button>
+                    {termsComponent ?? (
+                      <Button variant="link" type="button" onClick={onTerms}>
+                        terms
+                      </Button>
+                    )}
                   </Label>
                 </div>
               )}