torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/FormRenderer/form-renderer.tsx

@@ -1,297 +0,0 @@
-"use client";
-
-import { Children, useId, type ReactElement, type ReactNode } from "react";
-import { useForm, type Control, type FieldValues } from "react-hook-form";
-
-import { cn } from "../../utils/cn";
-import { FormBuilder } from "../FormBuilder";
-import { FormIdContext, LoadingContext } from "../FormBuilder/context";
-import {
-  DetailSidebar,
-  DetailTab,
-  DetailGrid,
-  DetailRow,
-  DetailTabsView,
-  isDetailSidebarElement,
-  isDetailTabElement,
-} from "./detail";
-import { FormDrawer } from "./FormDrawer";
-import { FormHeaderBar } from "./header";
-import { Section } from "./section";
-import {
-  Back,
-  Next,
-  Step,
-  StepSlot,
-  Stepper,
-  StepperActions,
-  StepperContext,
-  StepperNav,
-  isStepElement,
-  isStepperElement,
-  useStepperState,
-  type StepProps,
-} from "./stepper";
-import type { FormRendererProps } from "./types";
-
-/**
- * FormRenderer — the chrome around a `FormBuilder`.
- *
- * `FormBuilder` is the fields and nothing else: a `<form>`, its react-hook-form context, and the
- * field components. Every pixel drawn *around* those fields is here — page-vs-drawer display, the
- * absolute title header, the `actions` bar, titled `FormRenderer.Section` cards, the page gutters,
- * the scroll shell, the wizard rail (`FormRenderer.Stepper`), and the `summary` column.
- *
- * FormRenderer never manufactures a Submit — you compose it and hand it to `actions`
- * (`actions={<FormBuilder.Submit>Save</FormBuilder.Submit>}`). It renders in the form's header
- * action pill (page) or the drawer header (drawer), and auto-targets this form.
- *
- * Give it `FormRenderer.Sidebar` + `FormRenderer.Tab` children instead of fields and it switches to
- * a **detail-tabs** view: a display-only page (no `<form>`) whose sidebar swaps
- * `FormRenderer.Section` panels — the sidebar sits where a stepper's rail would.
- */
-function FormRendererRoot<T extends FieldValues = FieldValues>({
-  children,
-  id,
-  onSubmit,
-  onInvalid,
-  resolver,
-  defaultValues,
-  values,
-  loading,
-  resetOnSuccess,
-  fieldDirection,
-  form,
-  display = "page",
-  header,
-  summary,
-  className,
-  actions,
-  open = false,
-  onOpenChange,
-  title,
-  badge,
-  onOpenInNewTab,
-}: FormRendererProps<T>) {
-  const isDrawer = display === "drawer";
-
-  // FormRenderer owns the display decision: a drawer form lays out vertically.
-  const effectiveDirection = fieldDirection ?? (isDrawer ? "vertical" : undefined);
-  // The absolute title header is a page concern — the drawer has its own header.
-  const useHeader = !!header && !isDrawer;
-  // A stable `id` lets a button OUTSIDE the form submit it via `form={id}` (the header action
-  // pill / drawer header). Falls back to a generated id, provided to the Submit via context.
-  const autoId = useId();
-  const formId = id ?? autoId;
-
-  // The form instance is created HERE, not in FormBuilder, because the stepper needs `trigger` to
-  // validate a step before advancing — and the rail that calls it renders outside the `<form>`.
-  // Same pattern FormBuilder uses: one is always created (hooks can't be conditional), the
-  // caller's hoisted instance wins when given.
-  const ownForm = useForm<T>({ resolver, defaultValues, values });
-  const formInstance = form ?? ownForm;
-
-  const childArray = Children.toArray(children);
-
-  // Detail-tabs mode: a `FormRenderer.Sidebar` + `FormRenderer.Tab` children mean a display-only
-  // detail page (no `<form>`) — the sidebar swaps Section panels via Radix Tabs. Detected here so
-  // the form props below are simply unused.
-  const detailSidebar = childArray.find(isDetailSidebarElement);
-  const detailTabs = childArray.filter(isDetailTabElement);
-
-  // Split out a `FormRenderer.Stepper`: its Steps become the visibility-toggled slots inside the
-  // `<form>`, its non-Step children a footer, and its state drives the rail beside them.
-  const stepperEl = childArray.find(isStepperElement);
-  const stepChildren = stepperEl ? Children.toArray(stepperEl.props.children) : [];
-  const steps = stepChildren.filter(isStepElement) as ReactElement<StepProps>[];
-  const stepExtras = stepChildren.filter((n) => !isStepElement(n));
-  const isStepper = !!stepperEl;
-
-  // Called unconditionally (inert when there are no steps) to keep hooks order stable.
-  const stepper = useStepperState(
-    steps,
-    formInstance.trigger as Parameters<typeof useStepperState>[1],
-  );
-
-  if (detailSidebar && detailTabs.length > 0) {
-    return (
-      <DetailTabsView
-        header={header}
-        actions={actions}
-        sidebar={detailSidebar}
-        tabs={detailTabs}
-        className={className}
-      />
-    );
-  }
-
-  // The fields the `<form>` wraps: the stepper's steps (+ any custom footer extras), or the
-  // children as authored. Every step stays mounted so the whole form is registered at all times.
-  const fields: ReactNode = isStepper ? (
-    <>
-      {steps.map((step, i) => (
-        <StepSlot key={i} index={i} active={i === stepper.currentStep}>
-          {step.props.children}
-        </StepSlot>
-      ))}
-      {stepExtras}
-    </>
-  ) : (
-    children
-  );
-
-  const formEl = (
-    <FormBuilder
-      id={formId}
-      form={formInstance}
-      onSubmit={onSubmit ?? (() => {})}
-      onInvalid={onInvalid}
-      loading={loading}
-      fieldDirection={effectiveDirection}
-      resetOnSuccess={resetOnSuccess}
-    >
-      {fields}
-    </FormBuilder>
-  );
-
-  // The fields column caps at 1100px and centres — standalone, and as the middle column of the
-  // stepper grid. This is page framing, which is why it wraps FormBuilder rather than living
-  // inside it: a form embedded in a 260px rail has no room to give up 96px to gutters.
-  const fieldsColumn = <div className="mx-auto w-full max-w-[1100px] px-[48px]">{formEl}</div>;
-
-  // Inside the form surface: the stepper rail beside the fields. Columns never wrap — the layout
-  // stays side-by-side at every screen size; when space runs short the fields column shrinks and
-  // the rail's labels truncate.
-  //
-  // `minmax(180px,1fr)` and not a bare `1fr` on the side tracks. `1fr` means `minmax(auto,1fr)`,
-  // whose *auto* minimum stops a track shrinking below its content — so a long step label made the
-  // rail's track wider than the empty track opposite it, and the two side tracks being equal is the
-  // only thing centring the middle column. Hovering a step made it visibly worse: the label's
-  // padding grows 6px→9px on hover (FormStepper), so the centre jumped 3px every time.
-  //
-  // The minimum is a fixed 180px rather than `auto` precisely so it cannot depend on the labels:
-  // both side tracks size identically whatever the rail holds, so the middle column stays centred,
-  // and the rail still has room to be legible (a plain `minmax(0,…)` let it collapse to 0 in a
-  // narrow preview frame). Past that floor the labels truncate instead of pushing.
-  const bodyInner = isStepper ? (
-    // `@container` on the wrapper, not on the grid: an element cannot query its own size, so the
-    // measured box has to be an ancestor. It sits here rather than on the scroll body because
-    // `bodyInner` is also used directly when there is no header, and this way both paths get a
-    // container. The form then reacts to the width it is actually given — a rail, a drawer, a
-    // narrow preview frame — instead of the viewport's.
-    <div className="@container w-full">
-      {/* Below `@lg` the balancing column is dropped: it is empty, and in a narrow container its
-          180px floor plus a 32px gap is width the fields column needs more than the centring.
-          Both halves are required — a `display:none` child is not a grid item, but the third
-          track would still be reserved if the template kept describing it. */}
-      <div className="grid w-full grid-cols-[minmax(180px,1fr)_minmax(0,1100px)] gap-8 @lg:grid-cols-[minmax(180px,1fr)_minmax(0,1100px)_minmax(180px,1fr)]">
-        <StepperNav control={formInstance.control as Control<FieldValues>} />
-        {fieldsColumn}
-        {/* Empty third column — balances the rail's gutter so the middle column is centred. */}
-        <div className="hidden @lg:block" />
-      </div>
-    </div>
-  ) : (
-    fieldsColumn
-  );
-
-  const surface = useHeader ? (
-    // Scroll shell: the absolute header floats over the scrollable body. No fixed height — it
-    // fills whatever the parent gives it (like the drawer's panel fills its tray) and the body
-    // scrolls internally.
-    <div className="relative isolate flex h-full w-full flex-col overflow-hidden rounded-2xl bg-background-presentation-body-primary">
-      <FormHeaderBar title={header!.title} label={header!.label} variant={header!.variant}>
-        {/* A stepper form prepends chevron Back/Next + a divider before the Submit. */}
-        {actions && <StepperActions>{actions}</StepperActions>}
-      </FormHeaderBar>
-      <div className="relative z-[1] flex min-h-0 w-full flex-1 flex-col overflow-y-auto px-6 py-6 pt-[72px] scrollbar-hide">
-        {bodyInner}
-      </div>
-    </div>
-  ) : (
-    bodyInner
-  );
-
-  // The summary (right) lives OUTSIDE the scroll surface — its own panel beside it (mirroring the
-  // drawer's tray, a 6px gutter). Only the surface's body scrolls; the summary stays put. In a
-  // drawer it goes to FormDrawer's tray instead.
-  const pageBody =
-    summary && !isDrawer ? (
-      <div className="flex h-full flex-row items-stretch">
-        <div className="min-h-0 min-w-0 flex-1">{surface}</div>
-        <div className="ml-[6px] flex min-h-0">{summary}</div>
-      </div>
-    ) : (
-      surface
-    );
-
-  // `className` lands on the OUTERMOST element — the one a parent lays out (e.g. `flex-1 min-h-0`
-  // to fill a flex column). `h-full` fills a parent that has a definite height.
-  //
-  // The form-id and loading contexts are supplied HERE as well as inside FormBuilder, because the
-  // header's action pill renders outside the `<FormBuilder>` subtree: a bare `FormBuilder.Submit`
-  // in `actions` reads the id from context to target the `<form>` by native form-association.
-  // Same reason the drawer branch below re-provides them around its own header.
-  const inner = (
-    <LoadingContext.Provider value={!!loading}>
-      <FormIdContext.Provider value={formId}>
-        <div className={cn("h-full w-full", !isDrawer && className)}>{pageBody}</div>
-      </FormIdContext.Provider>
-    </LoadingContext.Provider>
-  );
-
-  // One provider around the whole tree: the rail renders outside the `<form>`, the step slots
-  // inside it, and both read the same state.
-  const tree = isStepper ? (
-    <StepperContext.Provider value={stepper}>{inner}</StepperContext.Provider>
-  ) : (
-    inner
-  );
-
-  if (isDrawer) {
-    return (
-      <FormDrawer
-        open={open}
-        onOpenChange={onOpenChange ?? (() => {})}
-        title={title ?? header?.title}
-        badge={badge ?? header?.label}
-        variant={header?.variant}
-        summary={summary}
-        // The drawer header sits outside the `<form>`, so re-supply the form-id and loading
-        // context a bare `FormBuilder.Submit` reads (on the page it gets these from the tree).
-        actions={
-          actions ? (
-            <LoadingContext.Provider value={!!loading}>
-              <FormIdContext.Provider value={formId}>{actions}</FormIdContext.Provider>
-            </LoadingContext.Provider>
-          ) : undefined
-        }
-        onOpenInNewTab={onOpenInNewTab}
-      >
-        {tree}
-      </FormDrawer>
-    );
-  }
-
-  return tree;
-}
-
-/**
- * FormRenderer — see {@link FormRendererRoot}. The compound statics are the form's chrome:
- *
- * - `FormRenderer.Section` — a titled card grouping fields (or display rows).
- * - `FormRenderer.Stepper` / `.Step` — the wizard; `.Back` / `.Next` are the chevron controls,
- *   which the header's action bar already prepends for you.
- * - `FormRenderer.Sidebar` / `.Tab` / `.Grid` / `.Row` — the display-only **detail-tabs** view.
- */
-export const FormRenderer = Object.assign(FormRendererRoot, {
-  Section,
-  Stepper,
-  Step,
-  Back,
-  Next,
-  Sidebar: DetailSidebar,
-  Tab: DetailTab,
-  Grid: DetailGrid,
-  Row: DetailRow,
-});

package/apps/lib/components/FormRenderer/header.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-
-import { cn } from "../../utils/cn";
-import { HeaderBar } from "../HeaderBar";
-
-export type HeaderVariant = "new" | "edit" | "detail";
-
-const DEFAULT_LABEL: Record<HeaderVariant, string> = {
-  new: "New",
-  edit: "Edit",
-  detail: "View",
-};
-
-export interface FormHeaderBarProps {
-  /** Plain title text (uppercased), e.g. the entity label or SKU. */
-  title: string;
-  /** Badge text — defaults from `variant` (New / Edit / View). */
-  label?: string;
-  /** Colored badge variant. */
-  variant?: HeaderVariant;
-  /** Action buttons shown in the right-hand action pill. */
-  children?: ReactNode;
-  className?: string;
-}
-
-/**
- * The floating form header: a `HeaderBar` title pill on the left and a dark action
- * pill on the right, absolutely positioned over the scrollable body.
- *
- * Shared by all three FormRenderer surfaces — the page form, `FormDrawer` and the
- * detail view — so a form's title looks identical wherever it is rendered. This is
- * chrome, so it lives here rather than in `FormBuilder`: a bare `<FormBuilder>` is
- * fields and nothing else.
- *
- * Per the design both pills are 44px tall, reached differently: the title pill is
- * 6px padding + 32px content, the action pill 8px + 28px.
- */
-export function FormHeaderBar({
-  title,
-  label,
-  variant = "new",
-  children,
-  className,
-}: FormHeaderBarProps) {
-  return (
-    <div
-      className={cn(
-        "absolute inset-x-0 top-0 z-[2] flex w-full items-start justify-between gap-2 p-1",
-        className,
-      )}
-    >
-      <HeaderBar
-        variant={variant}
-        label={label ?? DEFAULT_LABEL[variant]}
-        title={title}
-        theme="dark"
-      />
-
-      {children && (
-        <div
-          data-theme="dark"
-          className="flex flex-col items-start rounded-[14px] border border-border-presentation-global-primary bg-background-presentation-form-base shadow-[0_0_32px_0_rgba(0,0,0,0.15)]"
-        >
-          <div className="sticky top-0 flex w-full items-center justify-between p-2">
-            <div className="flex h-7 items-center justify-center gap-2">{children}</div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * The `header` prop's shape — `header={{ title, label, variant }}` on `FormRenderer`.
- * There is no `FormRenderer.Header` component: the header is a prop, not a child, so a
- * child element can never reconfigure the surrounding layout the way the old
- * `FormBuilder.Header` did.
- */
-export interface HeaderConfig {
-  /** Plain title text (uppercased), e.g. the entity label or SKU. */
-  title: string;
-  /** Badge text — defaults from `variant` (New / Edit / View). */
-  label?: string;
-  /** Colored badge variant. */
-  variant?: HeaderVariant;
-}

package/apps/lib/components/FormRenderer/index.ts

@@ -1,15 +0,0 @@
-export { FormRenderer } from "./form-renderer";
-export { FormDrawer } from "./FormDrawer";
-export type { FormDrawerProps } from "./FormDrawer";
-export { FormHeaderBar } from "./header";
-export type { HeaderConfig, HeaderVariant, FormHeaderBarProps } from "./header";
-export type { SectionProps } from "./section";
-export type { StepProps, StepperProps } from "./stepper";
-export type { FormRendererProps, FormRendererDisplay, FieldDirection } from "./types";
-export type {
-  DetailSidebarProps,
-  DetailSidebarItemProps,
-  DetailTabProps,
-  DetailRowProps,
-  DetailGridProps,
-} from "./detail";

package/apps/lib/components/FormRenderer/section.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-
-import { SectionBlock, type SectionColor, type SectionVariant } from "../SectionBlock";
-
-export interface SectionProps {
-  title?: ReactNode;
-  color?: SectionColor;
-  icon?: ReactNode;
-  /**
-   * `"Table"` switches to the full-bleed table shell — no body padding, a rule under
-   * the header, and the card clipped to its radius. `FormBuilder.Table` uses it; pass
-   * it here only when hand-composing a table inside a section.
-   */
-  variant?: SectionVariant;
-  /** Right-aligned content on the title row — e.g. action buttons. */
-  action?: ReactNode;
-  children: ReactNode;
-}
-
-/**
- * `FormRenderer.Section` — a titled Glare `SectionBlock` grouping fields.
- *
- * It lives here, not on `FormBuilder`, because it is presentation: a coloured card with a title
- * row and an action slot. It holds no form state and reads no form context, so it works just as
- * well around the read-only `FormRenderer.Grid` rows of a detail page as it does around fields.
- *
- * The per-field row layout — label, required marker, hint, the two-column split — is a different
- * thing entirely: that is `FieldSection`, applied by every field itself, and it stays inside
- * FormBuilder where the fields are.
- */
-export function Section({ title, color, icon, variant, action, children }: SectionProps) {
-  return (
-    <SectionBlock title={title} color={color} icon={icon} variant={variant} action={action}>
-      {children}
-    </SectionBlock>
-  );
-}