torch-glare 2.4.0 → 2.4.2

package/apps/lib/components/Form.tsx

@@ -1,191 +1,182 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
-    Controller,
-    FormProvider,
-    useFormContext,
-    type ControllerProps,
-    type FieldPath,
-    type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "../utils/cn"
-import { Label } from "./Label"
-import { Themes } from "../utils/types"
-import { ReactNode } from "react"
-const Form = FormProvider
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "../utils/cn";
+import { Label } from "./Label";
+import { Themes } from "../utils/types";
+import { ReactNode } from "react";
+const Form = FormProvider;
 
 type FormFieldContextValue<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-    name: TName
-}
+  name: TName;
+};
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-    {} as FormFieldContextValue
-)
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
 
 const FormField = <
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-    ...props
+  ...props
 }: ControllerProps<TFieldValues, TName>) => {
-    return (
-        <FormFieldContext.Provider value={{ name: props.name }}>
-            <Controller {...props} />
-        </FormFieldContext.Provider>
-    )
-}
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
 
 const useFormField = () => {
-    const fieldContext = React.useContext(FormFieldContext)
-    const itemContext = React.useContext(FormItemContext)
-    const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-    const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
-    if (!fieldContext) {
-        throw new Error("useFormField should be used within <FormField>")
-    }
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
 
-    const { id } = itemContext
+  const { id } = itemContext;
 
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        formMessageId: `${id}-form-item-message`,
-        ...fieldState,
-    }
-}
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
 
 type FormItemContextValue = {
-    id: string
-}
+  id: string;
+};
 
-const FormItemContext = React.createContext<FormItemContextValue>(
-    {} as FormItemContextValue
-)
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
 
-const FormItem = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-    const id = React.useId()
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
 
     return (
-        <FormItemContext.Provider value={{ id }}>
-            <div ref={ref} className={cn("space-y-2", className)} {...props} />
-        </FormItemContext.Provider>
-    )
-})
-FormItem.displayName = "FormItem"
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
-    React.ElementRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
-        label?: ReactNode; // main label
-        requiredLabel?: ReactNode; // normal text with required style
-        secondaryLabel?: ReactNode; // normal text with secondary style
-        as?: React.ElementType;
-        asChild?: boolean;
-        size?: "S" | "M" | "L";
-        variant?: "SystemStyle" | "PresentationStyle";
-        theme?: Themes
-        labelsClassName?: string;
-        labelDirections?: "vertical" | "horizontal";
-        childrenDirections?: "vertical" | "horizontal";
-    }
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    label?: ReactNode; // main label
+    requiredLabel?: ReactNode; // normal text with required style
+    secondaryLabel?: ReactNode; // normal text with secondary style
+    as?: React.ElementType;
+    asChild?: boolean;
+    size?: "S" | "M" | "L";
+    variant?: "SystemStyle" | "PresentationStyle";
+    theme?: Themes;
+    labelsClassName?: string;
+    labelDirections?: "vertical" | "horizontal";
+    childrenDirections?: "vertical" | "horizontal";
+  }
 >(({ className, ...props }, ref) => {
-    const { error, formItemId } = useFormField()
-
-    return (
-        <Label
-            ref={ref}
-            className={cn(error && "text-destructive", className)}
-            htmlFor={formItemId}
-            {...props}
-        />
-    )
-})
-FormLabel.displayName = "FormLabel"
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
-    React.ElementRef<typeof Slot>,
-    React.ComponentPropsWithoutRef<typeof Slot>
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-    return (
-        <Slot
-            ref={ref}
-            id={formItemId}
-            aria-describedby={
-                !error
-                    ? `${formDescriptionId}`
-                    : `${formDescriptionId} ${formMessageId}`
-            }
-            aria-invalid={!!error}
-            {...props}
-        />
-    )
-})
-FormControl.displayName = "FormControl"
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField()
-
-    return (
-        <p
-            ref={ref}
-            id={formDescriptionId}
-            className={cn("text-[0.8rem] text-muted-foreground", className)}
-            {...props}
-        />
-    )
-})
-FormDescription.displayName = "FormDescription"
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField()
-    const body = error ? String(error?.message ?? "") : children
-
-    if (!body) {
-        return null
-    }
-
-    return (
-        <p
-            ref={ref}
-            id={formMessageId}
-            className={cn("text-[0.8rem] font-medium text-destructive", className)}
-            {...props}
-        >
-            {body}
-        </p>
-    )
-})
-FormMessage.displayName = "FormMessage"
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
-    useFormField,
-    Form,
-    FormItem,
-    FormLabel,
-    FormControl,
-    FormDescription,
-    FormMessage,
-    FormField,
-}
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/apps/lib/components/FormBuilder/DisplayField.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+
+import { cn } from "../../utils/cn";
+
+export interface DisplayFieldProps {
+  label?: ReactNode;
+  /** Plain string value — falls back to an em-dash when empty. */
+  value?: string | null;
+  /** Rich value (badges, chips, formatted nodes) — takes precedence over `value`. */
+  valueNode?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Read-only field: a label above its value. Used by FormBuilder's `mode: "view"`
+ * so the same config renders as a detail view. Mirrors the products-services
+ * `DisplayField` (label + value/valueNode, em-dash fallback).
+ */
+export function DisplayField({ label, value, valueNode, className }: DisplayFieldProps) {
+  return (
+    <div className={cn("flex w-full flex-col gap-1.5", className)}>
+      {label != null && (
+        <p className="typography-body-small-regular text-content-presentation-global-secondary">
+          {label}
+        </p>
+      )}
+      {valueNode != null ? (
+        <div className="typography-body-medium-medium text-content-presentation-global-primary">
+          {valueNode}
+        </div>
+      ) : (
+        <span className="typography-body-medium-medium text-content-presentation-global-primary">
+          {value != null && value !== "" ? value : "—"}
+        </span>
+      )}
+    </div>
+  );
+}
+
+DisplayField.displayName = "DisplayField";

package/apps/lib/components/FormBuilder/context.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+export type FormBuilderMode = "edit" | "view";
+export type FieldDirection = "horizontal" | "vertical";
+
+/** Loading flag — drives the Submit spinner and disables inputs. */
+export const LoadingContext = createContext<boolean>(false);
+export const useLoading = () => useContext(LoadingContext);
+
+/** Edit vs read-only. Fields render `DisplayField` in `"view"`. */
+export const ModeContext = createContext<FormBuilderMode>("edit");
+export const useMode = () => useContext(ModeContext);
+
+/**
+ * The `<form>`'s `id`. Provided by the FormBuilder root so a `FormBuilder.Submit` rendered
+ * **outside** the `<form>` element — the absolute header's action pill, or the drawer header —
+ * can still submit it via native `form={id}` association without the caller wiring an id by hand.
+ */
+export const FormIdContext = createContext<string | undefined>(undefined);
+export const useFormId = () => useContext(FormIdContext);
+
+/**
+ * Field row direction — set via `FormBuilder`'s `fieldDirection` prop. `undefined` (the default)
+ * means "don't force one": `FieldSection` then uses its own responsive `flexible` layout, which
+ * stacks on small screens and goes two-column at `lg`. Only set this to pin a direction.
+ */
+export const DirectionContext = createContext<FieldDirection | undefined>(undefined);
+export const useDirection = () => useContext(DirectionContext);
+
+/**
+ * Cell mode — set to `true` by `FormBuilder.Table` around each cell's field so `FieldShell`
+ * renders just the control (no label/row chrome) and surfaces validation errors as a tooltip
+ * on the control instead of a stacked hint. Off (`false`) everywhere else, so normal fields
+ * keep their full `FieldSection` layout.
+ */
+export const CellContext = createContext<boolean>(false);
+export const useCell = () => useContext(CellContext);
+
+/**
+ * Step registry — a `FormBuilder.Step` provides this so the fields rendered
+ * inside it can register their `name`. `FormBuilder.Next` then validates just
+ * those names before advancing. `null` when not inside a stepper.
+ */
+export interface StepRegistry {
+  register: (name: string) => void;
+  unregister: (name: string) => void;
+}
+export const StepContext = createContext<StepRegistry | null>(null);
+export const useStepRegistry = () => useContext(StepContext);
+
+/** Stepper state shared by the nav + Back/Next/Submit buttons. */
+export interface StepperContextValue {
+  currentStep: number;
+  totalSteps: number;
+  titles: string[];
+  isFirstStep: boolean;
+  isLastStep: boolean;
+  goToNext: () => void | Promise<void>;
+  goToPrevious: () => void;
+  goToStep: (index: number) => void;
+  /** Field names registered per step, for per-step validation. */
+  stepFields: Record<number, Set<string>>;
+}
+export const StepperContext = createContext<StepperContextValue | null>(null);
+export const useStepper = () => {
+  const ctx = useContext(StepperContext);
+  if (!ctx) throw new Error("FormBuilder.Step/Back/Next must be used within FormBuilder.Stepper");
+  return ctx;
+};

package/apps/lib/components/FormBuilder/fields/ChoiceFields.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { LabeledCheckBox } from "../../LabeledCheckBox";
+import { RadioGroup } from "../../Radio";
+import { RadioCard } from "../../RadioCard";
+import { useLoading } from "../context";
+import { formatFieldView } from "../viewFormat";
+import type { CheckboxFieldProps, RadioCardsFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/**
+ * `FormBuilder.Checkbox` — a single boolean checkbox. The field `label` sits in the
+ * normal label column; an optional `subLabel` renders inline beside the checkbox (via
+ * the clickable `LabeledCheckBox`).
+ */
+export function CheckboxField({ subLabel, ...props }: CheckboxFieldProps) {
+  const loading = useLoading();
+  return (
+    <FieldShell {...props} view={(v) => formatFieldView({ kind: "boolean", value: v })}>
+      {(field) => (
+        <div className="flex w-full items-center ps-2.5">
+          <LabeledCheckBox
+            id={props.name}
+            label={subLabel ?? ""}
+            checked={!!field.value}
+            size="S"
+            onCheckedChange={(checked) => field.onChange(checked === true)}
+            disabled={props.disabled || loading}
+          />
+        </div>
+      )}
+    </FieldShell>
+  );
+}
+
+/** `FormBuilder.RadioCards` — radio options rendered as cards (Glare `RadioCard`). */
+export function RadioCardsField(props: RadioCardsFieldProps) {
+  const loading = useLoading();
+  const options = props.options.map((o) => ({
+    label: typeof o.label === "string" ? o.label : String(o.value),
+    value: o.value,
+  }));
+  return (
+    <FieldShell {...props} view={(v) => formatFieldView({ kind: "option", value: v, options })}>
+      {(field) => (
+        <RadioGroup
+          value={field.value ?? ""}
+          onValueChange={field.onChange}
+          className="grid w-full grid-cols-2 gap-3"
+        >
+          {props.options.map((opt) => (
+            <RadioCard
+              key={opt.value}
+              id={`${props.name}-${opt.value}`}
+              value={opt.value}
+              headerLabel={opt.label}
+              description={opt.description}
+              disabled={opt.disabled || props.disabled || loading}
+            />
+          ))}
+        </RadioGroup>
+      )}
+    </FieldShell>
+  );
+}

package/apps/lib/components/FormBuilder/fields/ColorField.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { InputField } from "../../InputField";
+import { ColorPicker, CHECKERBOARD } from "../../ColorPicker";
+import { useLoading } from "../context";
+import type { ColorFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/**
+ * `FormBuilder.Color` — an `InputField` holding the hex text, with a trailing action button that
+ * carries the colour itself. That button is the `ColorPicker` trigger: clicking it opens the full
+ * palette. Value is a hex string.
+ */
+export function ColorField(props: ColorFieldProps) {
+  const loading = useLoading();
+
+  return (
+    <FieldShell
+      {...props}
+      view={(v) =>
+        v
+          ? {
+              valueNode: (
+                <span className="inline-flex items-center gap-2">
+                  <span
+                    className="h-4 w-4 rounded-[4px] border border-border-presentation-action-primary"
+                    style={{ background: String(v) }}
+                  />
+                  {String(v)}
+                </span>
+              ),
+            }
+          : { value: "" }
+      }
+    >
+      {(field) => {
+        const value = typeof field.value === "string" ? field.value : "";
+        const disabled = props.disabled || loading;
+        return (
+          // The InputField IS the trigger: ColorPicker detects it as an input (it takes a `value`)
+          // and feeds it the hex, so clicking the field opens the palette.
+          <ColorPicker
+            value={value || undefined}
+            onChange={field.onChange}
+            presets={props.presets}
+            alpha={props.alpha ?? true}
+            disabled={disabled}
+          >
+            <InputField
+              // Explicit — otherwise Radix's trigger `type="button"` would land on the input.
+              type="text"
+              value={value}
+              onChange={(e) => field.onChange(e.target.value)}
+              placeholder={props.placeholder ?? "#000000"}
+              disabled={disabled}
+              className="w-full"
+              // The trailing action button holds the colour itself.
+              childrenSide={
+                <span
+                  aria-hidden
+                  className="block h-[26px] w-[26px] shrink-0 overflow-hidden rounded-[6px] border border-border-presentation-action-primary"
+                  style={CHECKERBOARD}
+                >
+                  <span
+                    className="block h-full w-full"
+                    style={{ backgroundColor: value || "#000000" }}
+                  />
+                </span>
+              }
+            />
+          </ColorPicker>
+        );
+      }}
+    </FieldShell>
+  );
+}

package/apps/lib/components/FormBuilder/fields/CustomField.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import type { CustomFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/** `FormBuilder.Custom` — render any control, keeping the FieldSection + validation wiring. */
+export function CustomField(props: CustomFieldProps) {
+  return (
+    <FieldShell
+      {...props}
+      view={(v) => ({ valueNode: props.formatView ? props.formatView(v) : String(v ?? "—") })}
+    >
+      {(field, fieldState) => props.render({ field, fieldState })}
+    </FieldShell>
+  );
+}

package/apps/lib/components/FormBuilder/fields/DateField.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { DatePicker } from "../../DatePicker";
+import { useCell } from "../context";
+import { formatFieldView } from "../viewFormat";
+import type { DateFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/**
+ * `FormBuilder.Date` (single) — and, via `mode`/`timePicker`, the presets
+ * `.DateRange` (value `{from,to}`), `.DateMultiple` (value `Date[]`), and
+ * `.DateTime` (date + time). All back onto the one Glare `DatePicker`.
+ */
+export function DateField(props: DateFieldProps) {
+  const kind = props.mode === "range" ? "daterange" : props.mode === "multiple" ? "dates" : "date";
+  const cell = useCell();
+
+  return (
+    <FieldShell {...props} view={(v) => formatFieldView({ kind, value: v })}>
+      {(field) => (
+        <DatePicker
+          mode={props.mode ?? "single"}
+          timePicker={props.timePicker}
+          dateFormat={props.dateFormat}
+          value={field.value}
+          onTable={cell}
+          onChange={(e) =>
+            field.onChange((e as unknown as { target: { value: unknown } }).target.value)
+          }
+        />
+      )}
+    </FieldShell>
+  );
+}