@connextar/house 0.2.0 → 0.4.0

package/dist/wizard/wizard.d.ts

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { type StepCheck, type StepCheckable } from "./rules.js";
+export interface WizardStep extends StepCheckable {
+    id: string;
+    title: string;
+    /** One line saying what this step is for. */
+    description?: string;
+    content: React.ReactNode;
+}
+/** Every element the wizard draws. Each value replaces the default for that part. */
+export interface WizardClassNames {
+    form: string;
+    markers: string;
+    markerItem: string;
+    marker: string;
+    markerLocked: string;
+    circle: string;
+    circleDone: string;
+    circleCurrent: string;
+    circleUpcoming: string;
+    markerTitle: string;
+    markerTitleCurrent: string;
+    connector: string;
+    connectorDone: string;
+    bar: string;
+    barFill: string;
+    heading: string;
+    description: string;
+    alert: string;
+    panel: string;
+    footer: string;
+    counter: string;
+    button: string;
+    backButton: string;
+    forwardButton: string;
+}
+/**
+ * The house look, on the shared theme tokens. An app without them — MAS keeps
+ * its palette in literal classes — replaces the parts it needs through
+ * `classNames`, exactly as the guide renderer allows.
+ */
+export declare const WIZARD_CLASS_NAMES: WizardClassNames;
+export interface FormWizardProps {
+    steps: WizardStep[];
+    /**
+     * Is the step being left complete? Asked before each advance, and again for
+     * every step on submit. See `StepCheck` for the ways it may answer.
+     */
+    onValidateStep?: StepCheck;
+    /** Called once every step has passed, and never before. */
+    onSubmit: () => void | Promise<void>;
+    /** Shown in place of Back on the first step; without it, Back is disabled there. */
+    onCancel?: () => void;
+    submitLabel?: React.ReactNode;
+    nextLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    backLabel?: React.ReactNode;
+    /** The submission is in flight: navigation locks and the button says so. */
+    pending?: boolean;
+    /**
+     * Every step open from the start — for editing, where the values are all there
+     * already and the change is usually to one field on a later step.
+     */
+    allReachable?: boolean;
+    /** Show how far through as a bar as well as a count. */
+    showProgressBar?: boolean;
+    /** A heading or introduction above the tracker, inside the form. */
+    header?: React.ReactNode;
+    className?: string;
+    footerClassName?: string;
+    classNames?: Partial<WizardClassNames>;
+    "aria-label"?: string;
+}
+/**
+ * A long form split into steps. The one stepper for every multi-step form in
+ * every app — the union of what five of them each learnt the hard way.
+ *
+ * - **It renders the `<form>` itself,** so nothing reaches `onSubmit`
+ *   unchecked and so Enter has one place to land. A wizard sitting inside
+ *   somebody else's form cannot promise either.
+ * - **Enter never skips ahead.** Pressing Enter in a one-line field submits the
+ *   form the browser's way, and before the last step that submission means
+ *   Continue: this step is checked and, if it passes, the next one opens. Only
+ *   the last step's Enter submits.
+ * - **There is one submit button and its `type` never changes.** PharmaLine put
+ *   a `type="button"` Continue and a `type="submit"` Create in the same slot;
+ *   React reused the one DOM node and switched its type mid-click, and Chromium
+ *   submitted — every booking made from the dashboard skipped Confirm and sent a
+ *   confirmation nobody chose. jsdom's timing hid it, so the guard here is
+ *   structural rather than behavioural: one button, always `type="submit"`.
+ * - **Steps are checked as you leave them.** `onValidateStep` (or the step's own
+ *   `validate`) is asked before each advance, and the step stays put if it
+ *   refuses, saying why when the check gave a message.
+ * - **Submitting checks every step, in order, and lands on the first that
+ *   fails.** Checking only the last one, or none at all, is how a form refuses
+ *   with the problem on a screen nobody is looking at.
+ * - **Continue is never disabled for being incomplete.** A greyed-out button
+ *   that will not say what is missing is a refusal with no words; it is only
+ *   disabled while something is actually in flight.
+ * - **Visited markers are clickable; steps ahead stay locked** (unless
+ *   `allReachable`), so the tracker is navigation rather than a way past a step
+ *   that has never been checked.
+ * - **All steps stay mounted,** hidden rather than unmounted: one register, and
+ *   nothing typed is lost by stepping back to check something.
+ *
+ * What it deliberately does not do is validate anything itself, or know what a
+ * button looks like. The check is a function the host supplies, so
+ * react-hook-form, plain state and a form built out of `useState` can all host
+ * it; the look is theme-token classes an app replaces through `classNames`.
+ */
+export declare function FormWizard({ steps, onValidateStep, onSubmit, onCancel, submitLabel, nextLabel, cancelLabel, backLabel, pending, allReachable, showProgressBar, header, className, footerClassName, classNames, "aria-label": ariaLabel, }: FormWizardProps): React.JSX.Element | null;
+/**
+ * A field's error message, marked so the reporter can tell a visible error from
+ * a hidden one. An app whose form library draws its own message adds
+ * `data-error-for` to that component instead of using this.
+ */
+export declare function FieldError({ name, message, className, }: {
+    name: string;
+    message?: string | null;
+    className?: string;
+}): React.JSX.Element | null;
+/** A read-only label/value row, for the review step at the end of a wizard. */
+export declare function ReviewRow({ label, value }: {
+    label: React.ReactNode;
+    value: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=wizard.d.ts.map

package/dist/wizard/wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../src/wizard/wizard.tsx"],"names":[],"mappings":"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"}

package/dist/wizard/wizard.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import { cx } from "../internal/cx.js";
+import { ERROR_ATTRIBUTE } from "./invalid.js";
+import { checkStep, firstFailure, isReachable, markerState, nextIndex, percentComplete, previousIndex, } from "./rules.js";
+/** Inputs where Enter is not "I'm done with this field". */
+const NOT_ONE_LINE_FIELDS = new Set([
+    "button",
+    "checkbox",
+    "color",
+    "file",
+    "hidden",
+    "image",
+    "radio",
+    "range",
+    "reset",
+    "submit",
+]);
+/**
+ * The house look, on the shared theme tokens. An app without them — MAS keeps
+ * its palette in literal classes — replaces the parts it needs through
+ * `classNames`, exactly as the guide renderer allows.
+ */
+export const WIZARD_CLASS_NAMES = {
+    form: "flex flex-col gap-5",
+    markers: "flex items-center gap-2",
+    markerItem: "flex min-w-0 flex-1 items-center gap-2 last:flex-none sm:last:flex-1",
+    marker: "flex min-w-0 items-center gap-2 rounded-lg px-1.5 py-1 text-left transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none sm:flex-1",
+    markerLocked: "cursor-not-allowed opacity-60",
+    circle: "flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-semibold",
+    circleDone: "border-primary bg-primary text-primary-foreground",
+    circleCurrent: "border-2 border-primary text-primary",
+    circleUpcoming: "border-border text-muted-foreground",
+    markerTitle: "hidden truncate text-sm sm:block",
+    markerTitleCurrent: "font-medium text-foreground",
+    connector: "h-px flex-1 bg-border sm:w-3 sm:flex-none",
+    connectorDone: "bg-primary",
+    bar: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+    barFill: "h-full rounded-full bg-primary transition-[width]",
+    heading: "text-sm font-medium",
+    description: "text-xs text-muted-foreground",
+    alert: "rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+    panel: "space-y-4",
+    footer: "flex items-center justify-between gap-2 border-t border-border pt-4",
+    counter: "text-xs tabular-nums text-muted-foreground",
+    button: "inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-60",
+    backButton: "text-muted-foreground hover:bg-muted hover:text-foreground",
+    forwardButton: "bg-primary text-primary-foreground hover:bg-primary/90",
+};
+/**
+ * A long form split into steps. The one stepper for every multi-step form in
+ * every app — the union of what five of them each learnt the hard way.
+ *
+ * - **It renders the `<form>` itself,** so nothing reaches `onSubmit`
+ *   unchecked and so Enter has one place to land. A wizard sitting inside
+ *   somebody else's form cannot promise either.
+ * - **Enter never skips ahead.** Pressing Enter in a one-line field submits the
+ *   form the browser's way, and before the last step that submission means
+ *   Continue: this step is checked and, if it passes, the next one opens. Only
+ *   the last step's Enter submits.
+ * - **There is one submit button and its `type` never changes.** PharmaLine put
+ *   a `type="button"` Continue and a `type="submit"` Create in the same slot;
+ *   React reused the one DOM node and switched its type mid-click, and Chromium
+ *   submitted — every booking made from the dashboard skipped Confirm and sent a
+ *   confirmation nobody chose. jsdom's timing hid it, so the guard here is
+ *   structural rather than behavioural: one button, always `type="submit"`.
+ * - **Steps are checked as you leave them.** `onValidateStep` (or the step's own
+ *   `validate`) is asked before each advance, and the step stays put if it
+ *   refuses, saying why when the check gave a message.
+ * - **Submitting checks every step, in order, and lands on the first that
+ *   fails.** Checking only the last one, or none at all, is how a form refuses
+ *   with the problem on a screen nobody is looking at.
+ * - **Continue is never disabled for being incomplete.** A greyed-out button
+ *   that will not say what is missing is a refusal with no words; it is only
+ *   disabled while something is actually in flight.
+ * - **Visited markers are clickable; steps ahead stay locked** (unless
+ *   `allReachable`), so the tracker is navigation rather than a way past a step
+ *   that has never been checked.
+ * - **All steps stay mounted,** hidden rather than unmounted: one register, and
+ *   nothing typed is lost by stepping back to check something.
+ *
+ * What it deliberately does not do is validate anything itself, or know what a
+ * button looks like. The check is a function the host supplies, so
+ * react-hook-form, plain state and a form built out of `useState` can all host
+ * it; the look is theme-token classes an app replaces through `classNames`.
+ */
+export function FormWizard({ steps, onValidateStep, onSubmit, onCancel, submitLabel = "Save", nextLabel = "Continue", cancelLabel = "Cancel", backLabel = "Back", pending = false, allReachable = false, showProgressBar = false, header, className, footerClassName, classNames, "aria-label": ariaLabel, }) {
+    const c = { ...WIZARD_CLASS_NAMES, ...classNames };
+    const [current, setCurrent] = React.useState(0);
+    const [furthest, setFurthest] = React.useState(allReachable ? steps.length - 1 : 0);
+    const [checking, setChecking] = React.useState(false);
+    const [problem, setProblem] = React.useState(null);
+    const inFlight = React.useRef(false);
+    const formId = React.useId();
+    const step = steps[current];
+    const isFirst = current === 0;
+    const isLast = current === steps.length - 1;
+    const busy = pending || checking;
+    function goTo(index) {
+        setProblem(null);
+        setCurrent(index);
+    }
+    async function goNext() {
+        if (!step)
+            return;
+        setChecking(true);
+        try {
+            const result = await checkStep(step, onValidateStep);
+            if (!result.ok) {
+                setProblem(result.message);
+                return;
+            }
+        }
+        finally {
+            setChecking(false);
+        }
+        const next = nextIndex(current, steps.length);
+        setProblem(null);
+        setCurrent(next);
+        setFurthest((seen) => Math.max(seen, next));
+    }
+    async function submit() {
+        setChecking(true);
+        try {
+            const failure = await firstFailure(steps, onValidateStep);
+            if (failure) {
+                // Show the step that holds the problem, so its message is on screen.
+                setCurrent(failure.index);
+                setProblem(failure.message);
+                return;
+            }
+            setProblem(null);
+        }
+        finally {
+            setChecking(false);
+        }
+        await onSubmit();
+    }
+    /**
+     * Every way of submitting — the footer button, or Enter in a field — comes
+     * through here, and before the last step it means Continue. Re-entry is
+     * refused rather than queued: a second press is the person saying the first
+     * one gave them nothing to look at.
+     */
+    function handleSubmit(event) {
+        event.preventDefault();
+        if (busy || inFlight.current)
+            return;
+        inFlight.current = true;
+        void (isLast ? submit() : goNext()).finally(() => {
+            inFlight.current = false;
+        });
+    }
+    /**
+     * Enter in a one-line field means "go on", whatever the field. Browsers
+     * disagree about Enter in some of them — Chromium does nothing on Enter in a
+     * date-and-time field — so the form asks for submission itself. A field that
+     * handles Enter on its own (and cancels it) is left alone, and so is a
+     * textarea, where Enter is a new line.
+     */
+    function handleKeyDown(event) {
+        if (event.key !== "Enter" || event.defaultPrevented || event.nativeEvent.isComposing)
+            return;
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement) || NOT_ONE_LINE_FIELDS.has(target.type))
+            return;
+        event.preventDefault();
+        event.currentTarget.requestSubmit();
+    }
+    if (!step)
+        return null;
+    const percent = percentComplete(current, steps.length);
+    return (_jsxs("form", { onSubmit: handleSubmit, onKeyDown: handleKeyDown, noValidate: true, "aria-label": ariaLabel, className: cx(c.form, className), children: [header, _jsx("ol", { className: c.markers, "aria-label": "Progress", children: steps.map((s, index) => {
+                    const state = markerState(index, current);
+                    const reachable = isReachable(index, furthest);
+                    return (_jsxs("li", { className: c.markerItem, children: [_jsxs("button", { type: "button", disabled: !reachable || busy, onClick: () => goTo(index), "aria-current": state === "current" ? "step" : undefined, "aria-controls": `${formId}-${s.id}`, "aria-label": `Step ${index + 1}: ${s.title}`, className: cx(c.marker, !reachable && c.markerLocked), children: [_jsx("span", { "aria-hidden": true, className: cx(c.circle, state === "done" && c.circleDone, state === "current" && c.circleCurrent, state === "upcoming" && c.circleUpcoming), children: state === "done" ? _jsx(Check, { className: "size-3.5" }) : index + 1 }), _jsx("span", { "aria-hidden": true, className: cx(c.markerTitle, state === "current" && c.markerTitleCurrent), children: s.title })] }), index < steps.length - 1 ? (_jsx("span", { "aria-hidden": true, className: cx(c.connector, state === "done" && c.connectorDone) })) : null] }, s.id));
+                }) }), showProgressBar ? (_jsx("div", { className: c.bar, role: "progressbar", "aria-label": "Form progress", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, children: _jsx("div", { className: c.barFill, style: { width: `${percent}%` } }) })) : null, _jsxs("div", { children: [_jsx("h3", { className: cx(c.heading, "sm:hidden"), children: step.title }), step.description ? _jsx("p", { className: c.description, children: step.description }) : null] }), problem ? (_jsx("p", { className: c.alert, role: "alert", children: problem })) : null, steps.map((s, index) => (_jsx("section", { id: `${formId}-${s.id}`, hidden: index !== current, "aria-label": s.title, className: c.panel, children: s.content }, s.id))), _jsxs("div", { className: cx(c.footer, footerClassName), children: [isFirst && onCancel ? (_jsx("button", { type: "button", onClick: onCancel, disabled: pending, className: cx(c.button, c.backButton), children: cancelLabel })) : (_jsxs("button", { type: "button", onClick: () => goTo(previousIndex(current)), disabled: isFirst || busy, className: cx(c.button, c.backButton), children: [_jsx(ChevronLeft, { className: "size-4", "aria-hidden": true }), backLabel] })), _jsxs("span", { className: c.counter, "aria-live": "polite", children: ["Step ", current + 1, " of ", steps.length] }), _jsx("button", { type: "submit", disabled: busy, "data-busy": busy ? "true" : undefined, className: cx(c.button, c.forwardButton), children: isLast ? (submitLabel) : (_jsxs(_Fragment, { children: [nextLabel, _jsx(ChevronRight, { className: "size-4", "aria-hidden": true })] })) })] })] }));
+}
+/**
+ * A field's error message, marked so the reporter can tell a visible error from
+ * a hidden one. An app whose form library draws its own message adds
+ * `data-error-for` to that component instead of using this.
+ */
+export function FieldError({ name, message, className, }) {
+    if (!message)
+        return null;
+    return (_jsx("p", { [ERROR_ATTRIBUTE]: name, className: className ?? "text-xs text-destructive", children: message }));
+}
+/** A read-only label/value row, for the review step at the end of a wizard. */
+export function ReviewRow({ label, value }) {
+    return (_jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border py-2 last:border-0", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: label }), _jsx("span", { className: "text-right text-sm font-medium", children: value || _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) })] }));
+}
+//# sourceMappingURL=wizard.js.map

package/dist/wizard/wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.js","sourceRoot":"","sources":["../../src/wizard/wizard.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connextar/house",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The pieces every app we build needs and none of them should own a copy of.",
   "license": "MIT",
   "repository": {
@@ -42,6 +42,22 @@
       "types": "./dist/trail/index.d.ts",
       "default": "./dist/trail/index.js"
     },
+    "./ux": {
+      "types": "./dist/ux/index.d.ts",
+      "default": "./dist/ux/index.js"
+    },
+    "./ux/navigation": {
+      "types": "./dist/ux/navigation-index.d.ts",
+      "default": "./dist/ux/navigation-index.js"
+    },
+    "./wizard": {
+      "types": "./dist/wizard/index.d.ts",
+      "default": "./dist/wizard/index.js"
+    },
+    "./wizard/react-hook-form": {
+      "types": "./dist/wizard/react-hook-form-index.d.ts",
+      "default": "./dist/wizard/react-hook-form-index.js"
+    },
     "./editor": {
       "types": "./dist/editor/index.d.ts",
       "default": "./dist/editor/index.js"
@@ -70,18 +86,22 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp src/styles/house.css dist/house.css",
-    "verify": "npm run check:ci && npm run test && npm run build",
+    "verify": "npm run check:ci && npm run build && npm run test",
     "prepublishOnly": "npm run verify",
     "check:ci": "npm run lint:check && npm run format:check && npm run typecheck"
   },
   "peerDependencies": {
     "next": "^16.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.60.0"
   },
   "peerDependenciesMeta": {
     "next": {
       "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -98,6 +118,7 @@
     "prettier": "^3.0.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-hook-form": "^7.68.0",
     "typescript": "^5.7.0",
     "typescript-eslint": "^8.69.0",
     "vitest": "^4.0.0"