@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/wizard/wizard-labels.ts

@@ -1,29 +0,0 @@
-// The English words of the wizard, in a module with no other code: the English catalogue
-// (src/i18n/defaults.ts) imports them as it imports every component's `*-labels.ts`.
-// ./types re-exports them. Until 0.34 they sat in ./types, the rule's one exception
-// outside the provider (round 0.34, DOC-6's sev-1 note).
-
-import type { WizardLabels } from "./types";
-
-/** Typed with the two optional keys made required, so code reading the defaults
- *  directly (the fallback in `useWizard`) needs no `!`. */
-export const DEFAULT_WIZARD_LABELS: WizardLabels &
-  Required<Pick<WizardLabels, "missingRequired" | "genericError" | "done">> = {
-  cancel: "Cancel",
-  back: "Back",
-  next: "Next",
-  skip: "Skip",
-  finish: "Finish",
-  submitting: "Creating…",
-  steps: "Steps",
-  step: (current, total) => `Step ${current} of ${total}`,
-  cancelTitle: "Discard this form?",
-  confirmCancel: "Your entries will be lost.",
-  cancelConfirmLabel: "Discard",
-  cancelDismissLabel: "Keep editing",
-  reviewTitle: "Review",
-  edit: "Edit",
-  missingRequired: "Please fill in all required fields.",
-  genericError: "An error occurred",
-  done: "Done",
-};

package/src/wizard/wizard-step.tsx

@@ -1,76 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "../lib/cn";
-
-export interface WizardStepProps {
-  children: ReactNode;
-  className?: string;
-  /**
-   * The step's heading ("Choose a unit"), drawn in the one style every step shares.
-   * kastlan's steps each hand-wrote `<h3 className="text-lg font-semibold">` (about
-   * sixteen of them: lease-picker-step, lease-unit-step, …), and a hand-written
-   * heading is one that drifts — a size here, a colour there. Omitted: no heading.
-   */
-  title?: ReactNode;
-  /** The line under the title: what the step asks for, or why. Rendered only with a
-   *  `title` or on its own when there is none. */
-  description?: ReactNode;
-  /**
-   * Controls for the step as a whole, at the end of the header row beside the title —
-   * kastlan 43: the buildings step's "Add building" had nowhere to go but UNDER the
-   * list it adds to, where it falls below the fold once there are three buildings.
-   * A header action is where every other kit surface (`PageHeader`, `Card`) puts it.
-   *
-   * Wraps under the title on a narrow screen rather than squeezing it. Renders the
-   * header on its own if there is no `title` either.
-   */
-  actions?: ReactNode;
-  /** The heading's level. Default 3: the page has its `h1` and the wizard's own
-   *  chrome sits at `h2` (the review step, the cancel dialog), so a step is under it. */
-  headingLevel?: 2 | 3 | 4;
-}
-
-const HEADING = { 2: "h2", 3: "h3", 4: "h4" } as const;
-
-/** The vertical rhythm one wizard step's content sits on. A component rather
- *  than a class string so every step in every app spaces its fields the same —
- *  and, with `title` / `description`, heads them the same. */
-export function WizardStep({ children, className, title, description, headingLevel = 3, actions }: WizardStepProps) {
-  const hasTitle = title !== undefined && title !== null && title !== false && title !== "";
-  const hasDescription =
-    description !== undefined && description !== null && description !== false && description !== "";
-  const hasActions = actions !== undefined && actions !== null && actions !== false && actions !== "";
-  const Heading = HEADING[headingLevel];
-  const heading = (
-    <>
-      {hasTitle && <Heading className="text-lg font-semibold text-primary">{title}</Heading>}
-      {hasDescription && <p className="text-sm text-muted">{description}</p>}
-    </>
-  );
-  return (
-    <div className={cn("space-y-6", className)}>
-      {hasActions ? (
-        // One row: the text takes the room, the actions keep their width at the end
-        // and wrap below it when there is not enough — `basis-64` is the width the
-        // title asks for before that happens (a zero basis would never wrap and
-        // squeeze the title to a word a line instead). `items-start` so a two-line
-        // description does not pull the button down to its middle; `ms-auto` keeps
-        // the actions at the end with no title, and when they wrap.
-        <div data-slot="wizard-step-header" className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
-          {(hasTitle || hasDescription) && <div className="min-w-0 grow basis-64 space-y-1">{heading}</div>}
-          <div data-slot="wizard-step-actions" className="ms-auto flex shrink-0 flex-wrap items-center gap-2">
-            {actions}
-          </div>
-        </div>
-      ) : (
-        // Without actions the header is exactly what it was, so a step that passes
-        // none renders as before.
-        (hasTitle || hasDescription) && (
-          <div data-slot="wizard-step-header" className="space-y-1">
-            {heading}
-          </div>
-        )
-      )}
-      {children}
-    </div>
-  );
-}

package/src/wizard/wizard-summary.tsx

@@ -1,84 +0,0 @@
-import { Pencil } from "lucide-react";
-import { Card, CardAction, CardContent, CardHeader, CardTitle } from "../components/card";
-import { IconButton } from "../components/icon-button";
-import { Tooltip } from "../components/tooltip";
-import type { SummarySection, WizardLabels } from "./types";
-import { DEFAULT_WIZARD_LABELS } from "./types";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-
-/**
- * The review step: one card per section, each row a label/value pair, each card
- * carrying an edit button back to the step it came from.
- *
- * Sections are data, not children, because "jump back to step N" is the whole
- * point of the component and a caller assembling its own cards invariably drops
- * it. Labels and values are `ReactNode`, so a value can be a badge or a link.
- *
- * A section with no `stepIndex` (file-level counts, a total) is a card without an
- * edit button. `disabled` greys every edit button at once — while the commit runs,
- * when jumping back would show a step whose edits can no longer reach the request.
- */
-export function WizardSummary({
-  sections,
-  onEditStep,
-  disabled = false,
-  labels,
-}: {
-  sections: SummarySection[];
-  /** Called with the section's `stepIndex`. Optional only for a summary whose
-   *  sections name no step at all. */
-  onEditStep?: (stepIndex: number) => void;
-  /** Disable every edit button (e.g. `wizard.isSubmitting`). */
-  disabled?: boolean;
-  labels?: LabelOverride<WizardLabels>;
-}) {
-  const l = useKitLabels("wizard", DEFAULT_WIZARD_LABELS, labels);
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-lg font-semibold text-primary">{l.reviewTitle}</h2>
-      {sections.map((section, sIdx) => (
-        <Card key={sIdx}>
-          {/* CardHeader is a grid, and CardAction is the top-right column it
-              reserves — the edit button has to go through it or it stacks under
-              the title instead of sitting beside it. `stackAction={false}`: the pencil
-              is named by `aria-label` and stays an icon at Large, so it keeps its
-              place beside the title there too (0.32.1). */}
-          <CardHeader className="pb-2" stackAction={false}>
-            <CardTitle className="text-base">{section.label}</CardTitle>
-            {section.stepIndex !== undefined && onEditStep && (
-              <CardAction>
-                {/* The kit Tooltip, not a native `title`: it shows on keyboard focus too,
-                    and an app with a one-tooltip rule (keksdose dev#523) sees one. */}
-                <Tooltip label={l.edit}>
-                  <IconButton
-                    size="sm"
-                    variant="ghost"
-                    aria-label={l.edit}
-                    disabled={disabled}
-                    onClick={() => onEditStep(section.stepIndex as number)}
-                  >
-                    <Pencil />
-                  </IconButton>
-                </Tooltip>
-              </CardAction>
-            )}
-          </CardHeader>
-          <CardContent>
-            <dl className="grid gap-2 text-sm">
-              {section.items.map((item, iIdx) => (
-                <div key={iIdx}>
-                  {iIdx > 0 && <div className="mb-2 border-t border-subtle" role="presentation" />}
-                  <div className="flex items-start justify-between gap-4">
-                    <dt className="text-muted">{item.label}</dt>
-                    <dd className="text-end font-medium text-primary">{item.value}</dd>
-                  </div>
-                </div>
-              ))}
-            </dl>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  );
-}

package/src/wizard.ts

@@ -1,15 +0,0 @@
-// `@eifi1/ui-kit/wizard` — the multi-step engine, its chrome and its review step.
-//
-// A re-slicing of the main barrel, not a new API. By default useWizard syncs the
-// active step to `?step=` via react-router's useSearchParams, so it needs a router;
-// `urlSync: false` keeps the step in memory and needs none.
-//
-// NOT the same thing as `WizardStepper` in components/wizard-stepper, which is a bare
-// two-step indicator with no engine and stays on the main barrel.
-export * from "./wizard/types";
-export * from "./wizard/use-wizard";
-export * from "./wizard/wizard-context";
-export * from "./wizard/validation";
-export * from "./wizard/wizard-step";
-export * from "./wizard/wizard-summary";
-export * from "./wizard/stepper-nav";