torch-glare 2.4.1 → 2.4.2

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

@@ -0,0 +1,174 @@
+"use client";
+
+import { ReactNode, useEffect } from "react";
+import {
+  useFormContext,
+  useFormState,
+  type ControllerRenderProps,
+  type ControllerFieldState,
+  type FieldErrors,
+  type FieldValues,
+  type FieldPath,
+} from "react-hook-form";
+
+import { FieldSection } from "../../../layouts/FieldSection";
+import { FormField, FormItem, FormControl } from "../../Form";
+import { FieldHint } from "../../FieldHint";
+import { Tooltip } from "../../Tooltip";
+import { DisplayField } from "../DisplayField";
+import { useMode, useDirection, useStepRegistry, useCell } from "../context";
+import type { FieldView } from "../viewFormat";
+
+export interface FieldShellProps {
+  name: string;
+  label?: ReactNode;
+  description?: ReactNode;
+  required?: boolean;
+  fullWidth?: boolean;
+  hidden?: boolean;
+  /** Force the field's layout direction, overriding the form's `useDirection()` context. */
+  direction?: "horizontal" | "vertical" | "flexible";
+  /** Edit-mode input, wired to the react-hook-form field. */
+  children: (
+    field: ControllerRenderProps<FieldValues, string>,
+    fieldState: ControllerFieldState,
+  ) => ReactNode;
+  /** Read-only rendering (view mode) computed from the current value. */
+  view?: (value: unknown) => FieldView;
+}
+
+/**
+ * Shared wrapper for every `FormBuilder.*` field: the FieldSection row + the RHF
+ * `FormField`/`FormItem`/`FormControl`/`FormMessage` scaffolding in edit mode, or
+ * `DisplayField` in view mode. Also registers the field name into the enclosing
+ * `FormBuilder.Step` (if any) so the stepper can validate per step.
+ */
+export function FieldShell({
+  name,
+  label,
+  description,
+  required,
+  fullWidth,
+  hidden,
+  direction: directionProp,
+  children,
+  view,
+}: FieldShellProps) {
+  const form = useFormContext();
+  const mode = useMode();
+  const cell = useCell();
+  const ctxDirection = useDirection();
+  // A field may pin its own direction (e.g. RichText forces vertical), else the form's. When
+  // neither is set this stays `undefined` — FieldSection then falls back to its responsive
+  // `flexible` layout rather than a fixed two-column one.
+  const direction = directionProp ?? ctxDirection;
+  const step = useStepRegistry();
+
+  // Read this field's error at the shell level (not inside the FormField render) so
+  // the FieldHint can go in FieldSection's `childrenUnderLabel` — under the label.
+  // Subscribe to the whole `errors` object and resolve the field's path ourselves:
+  // `getFieldState(name)` misses controls that register late (DatePicker, RichText),
+  // whereas the errors object always carries every failing key from the resolver.
+  const { errors } = useFormState({ control: form.control });
+  const fieldError = resolveFieldError(errors, name);
+
+  useEffect(() => {
+    if (!step) return;
+    step.register(name);
+    return () => step.unregister(name);
+  }, [step, name]);
+
+  if (hidden) return null;
+
+  // Cell mode (inside FormBuilder.Table): render just the control — no FieldSection label/row.
+  // Errors surface as a tooltip on the control rather than a stacked FieldHint, so a row stays
+  // one line tall. Step registration + view formatting above still apply.
+  if (cell) {
+    if (mode === "view") {
+      const value = form.getValues(name);
+      const v = view ? view(value) : { value: value == null ? "" : String(value) };
+      return <DisplayField value={v.value} valueNode={v.valueNode} />;
+    }
+    return (
+      <FormField
+        control={form.control}
+        name={name as FieldPath<FieldValues>}
+        render={({ field, fieldState }) => (
+          <FormItem className="w-full">
+            <FormControl>
+              <Tooltip
+                open={Boolean(fieldError)}
+                text={fieldError ?? ""}
+                toolTipSide="top"
+                variant="highlight"
+              >
+                <div className="w-full">{children(field, fieldState)}</div>
+              </Tooltip>
+            </FormControl>
+          </FormItem>
+        )}
+      />
+    );
+  }
+
+  if (mode === "view") {
+    const value = form.getValues(name);
+    const v = view ? view(value) : { value: value == null ? "" : String(value) };
+    return (
+      <FieldSection
+        label={label}
+        secondaryLabel={description}
+        direction={direction}
+        className={fullWidth ? "max-w-full" : undefined}
+      >
+        <DisplayField value={v.value} valueNode={v.valueNode} />
+      </FieldSection>
+    );
+  }
+
+  return (
+    <FieldSection
+      label={label}
+      requiredLabel={required ? "(Required)" : undefined}
+      secondaryLabel={description}
+      direction={direction}
+      className={fullWidth ? "max-w-full" : undefined}
+      childrenUnderLabel={<FieldError message={fieldError} />}
+    >
+      <FormField
+        control={form.control}
+        name={name as FieldPath<FieldValues>}
+        render={({ field, fieldState }) => (
+          <FormItem className="w-full">
+            <FormControl>
+              <div className="w-full">{children(field, fieldState)}</div>
+            </FormControl>
+          </FormItem>
+        )}
+      />
+    </FieldSection>
+  );
+}
+
+/** Validation error, shown as a `FieldHint` alert (no tooltip); null when there's none. */
+function FieldError({ message }: { message?: string }) {
+  if (!message) return null;
+  return <FieldHint state="error" label={message} />;
+}
+
+/**
+ * Resolve a field's error message from the RHF `errors` tree by its dotted `name`
+ * (handles nested field-array paths like `contacts.0.email`). Reading the errors
+ * object directly is more reliable than `getFieldState` for controls that register
+ * late (DatePicker, RichText), whose hints were otherwise missing.
+ */
+function resolveFieldError(errors: FieldErrors, name: string): string | undefined {
+  const node = name
+    .split(".")
+    .reduce<unknown>(
+      (acc, key) => (acc == null ? undefined : (acc as Record<string, unknown>)[key]),
+      errors,
+    );
+  const message = (node as { message?: unknown } | undefined)?.message;
+  return typeof message === "string" ? message : undefined;
+}

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { ImageAttachment } from "../../ImageAttachment";
+import { useLoading } from "../context";
+import { formatFieldView } from "../viewFormat";
+import type { FileFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/** `FormBuilder.File` / `.Image` — stores the selected `File` (consumer uploads). */
+export function FileField(props: FileFieldProps & { image?: boolean }) {
+  const loading = useLoading();
+  return (
+    <FieldShell {...props} view={(v) => formatFieldView({ kind: "file", value: v })}>
+      {(field) => {
+        const current: unknown = field.value;
+        const fileName = Array.isArray(current)
+          ? `${current.length} file(s)`
+          : current instanceof File
+            ? current.name
+            : "";
+        return (
+          <ImageAttachment
+            mainLabel={props.placeholder ?? (props.image ? "Upload image" : "Upload file")}
+            secondaryLabel={
+              fileName || (typeof props.description === "string" ? props.description : "")
+            }
+            accept={props.accept ?? (props.image ? "image/*" : undefined)}
+            multiple={props.multiple}
+            disabled={props.disabled || loading}
+            onChange={(e) => {
+              const files = (e.target as HTMLInputElement).files;
+              if (!files || files.length === 0) return;
+              field.onChange(props.multiple ? Array.from(files) : files[0]);
+            }}
+          />
+        );
+      }}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,139 @@
+"use client";
+
+import { ReactNode } from "react";
+
+import { cn } from "../../../utils/cn";
+import { Label } from "../../Label";
+import { RadioGroup, Radio } from "../../Radio";
+import { Checkbox } from "../../Checkbox";
+import { useLoading } from "../context";
+import { formatFieldView } from "../viewFormat";
+import type { OptionItem, OptionsFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/**
+ * The `#f9f9f9` rounded box that holds the option rows, with a full-width divider
+ * between each (design nodes 8999:170512 / 8999:170546).
+ */
+function OptionBox({ children }: { children: ReactNode }) {
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col rounded-[8px] px-[10px]",
+        "bg-background-presentation-form-field-primary",
+        "divide-y divide-border-presentation-global-primary",
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * One option row: control on the **left**, then the primary label and an optional
+ * secondary label. Uses the `Label` component so the row is a real `<label>` — the
+ * whole row is clickable and toggles the control (same mechanism as `LabeledCheckBox`
+ * / `LabeledRadio`). `w-full` makes the entire row width tappable; `reverseChildren`
+ * puts the control first (left) and `justify-end` keeps the content left-packed.
+ */
+function OptionRow({
+  control,
+  label,
+  description,
+}: {
+  control: ReactNode;
+  label?: string;
+  description?: string;
+}) {
+  return (
+    <Label
+      label={label}
+      secondaryLabel={description}
+      labelDirections="horizontal"
+      childrenDirections="horizontal"
+      reverseChildren
+      className="w-full cursor-pointer justify-end gap-[6px] py-[8px]"
+    >
+      {control}
+    </Label>
+  );
+}
+
+/**
+ * `FormBuilder.RadioList` — single-select options (`string`) as a boxed, divided list
+ * (design nodes 8999:170512). Uses the Radix `RadioGroup` for roving-focus / arrow-key nav.
+ */
+export function RadioListField(props: OptionsFieldProps) {
+  const loading = useLoading();
+  return (
+    <FieldShell
+      {...props}
+      view={(v) => formatFieldView({ kind: "option", value: v, options: props.options })}
+    >
+      {(field) => (
+        <RadioGroup value={field.value ?? ""} onValueChange={field.onChange} className="w-full">
+          <OptionBox>
+            {props.options.map((opt: OptionItem) => (
+              <OptionRow
+                key={opt.value}
+                label={opt.label}
+                description={opt.description}
+                control={
+                  <Radio
+                    id={`${props.name}-${opt.value}`}
+                    value={opt.value}
+                    size="S"
+                    disabled={props.disabled || loading}
+                  />
+                }
+              />
+            ))}
+          </OptionBox>
+        </RadioGroup>
+      )}
+    </FieldShell>
+  );
+}
+
+/**
+ * `FormBuilder.CheckboxGroup` — multi-select options as a boxed, divided list (design
+ * node 8999:170546). Value is a `string[]` of the selected option values.
+ */
+export function CheckboxGroupField(props: OptionsFieldProps) {
+  const loading = useLoading();
+  return (
+    <FieldShell
+      {...props}
+      view={(v) => formatFieldView({ kind: "multi", value: v, options: props.options })}
+    >
+      {(field) => {
+        const selected: string[] = Array.isArray(field.value) ? field.value : [];
+        const toggle = (value: string, checked: boolean) => {
+          field.onChange(checked ? [...selected, value] : selected.filter((v) => v !== value));
+        };
+        return (
+          <div role="group" aria-label={typeof props.label === "string" ? props.label : undefined}>
+            <OptionBox>
+              {props.options.map((opt: OptionItem) => (
+                <OptionRow
+                  key={opt.value}
+                  label={opt.label}
+                  description={opt.description}
+                  control={
+                    <Checkbox
+                      id={`${props.name}-${opt.value}`}
+                      size="S"
+                      checked={selected.includes(opt.value)}
+                      onCheckedChange={(checked) => toggle(opt.value, checked === true)}
+                      disabled={props.disabled || loading}
+                    />
+                  }
+                />
+              ))}
+            </OptionBox>
+          </div>
+        );
+      }}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "../../InputOTP";
+import { useLoading } from "../context";
+import { formatFieldView } from "../viewFormat";
+import type { OtpFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/** `FormBuilder.Otp` — a code / PIN input (Glare `InputOTP`). Value is a string. */
+export function OtpField(props: OtpFieldProps) {
+  const loading = useLoading();
+  const length = props.length ?? 6;
+
+  return (
+    <FieldShell {...props} view={(v) => formatFieldView({ kind: "text", value: v })}>
+      {(field) => (
+        <InputOTP
+          maxLength={length}
+          value={field.value ?? ""}
+          onChange={(v: string) => field.onChange(v)}
+          disabled={props.disabled || loading}
+        >
+          <InputOTPGroup>
+            {Array.from({ length }, (_, i) => (
+              <InputOTPSlot key={i} index={i} />
+            ))}
+          </InputOTPGroup>
+        </InputOTP>
+      )}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,82 @@
+"use client";
+
+import { Select, SelectTrigger, SelectContent, SelectItem } from "../../Select";
+import { InputField } from "../../InputField";
+import { useLoading, useCell } from "../context";
+import { formatFieldView } from "../viewFormat";
+import type { PhoneFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+import { COUNTRIES, countryByCode, countryByDial, flagEmoji } from "./countries";
+
+// Dial codes longest-first, so "+1" doesn't shadow "+1…"-style codes when prefix-matching.
+const DIALS = [...new Set(COUNTRIES.map((c) => c.dial))].sort((a, b) => b.length - a.length);
+
+function splitPhone(value: unknown, defaultDial: string): { dial: string; number: string } {
+  const s = typeof value === "string" ? value.trim() : "";
+  if (!s) return { dial: defaultDial, number: "" };
+  const idx = s.indexOf(" ");
+  if (s.startsWith("+") && idx > 0) {
+    return { dial: s.slice(0, idx), number: s.slice(idx + 1).trim() };
+  }
+  if (s.startsWith("+")) {
+    const dial = DIALS.find((d) => s.startsWith(d));
+    if (dial) return { dial, number: s.slice(dial.length).trim() };
+  }
+  return { dial: defaultDial, number: s };
+}
+
+/**
+ * `FormBuilder.Phone` — country dial-code (every country) + number. The picker is keyed by the
+ * unique ISO code (dial codes repeat); the value is stored as a `"+<dial> <number>"` string.
+ */
+export function PhoneField(props: PhoneFieldProps) {
+  const loading = useLoading();
+  const cell = useCell();
+  const defaultDial = props.defaultCountry ?? "+964"; // Iraq
+
+  return (
+    <FieldShell {...props} view={(v) => formatFieldView({ kind: "text", value: v })}>
+      {(field) => {
+        const { dial, number } = splitPhone(field.value, defaultDial);
+        const country = countryByDial(dial);
+        const disabled = props.disabled || loading;
+        const commit = (d: string, n: string) => field.onChange(n ? `${d} ${n}` : d);
+        return (
+          <div className="flex w-full min-w-0 items-center gap-2">
+            <Select
+              value={country?.code ?? ""}
+              onValueChange={(code) => commit(countryByCode(code)?.dial ?? dial, number)}
+              disabled={disabled}
+            >
+              {/* Compact trigger — flag + dial. The dropdown rows carry the full country name. */}
+              <SelectTrigger size="XL" onTable={cell} className="shrink-0">
+                <span className="whitespace-nowrap">
+                  {country ? `${flagEmoji(country.code)} ${country.dial}` : dial}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {COUNTRIES.map((c) => (
+                  <SelectItem key={c.code} value={c.code}>
+                    {`${flagEmoji(c.code)} ${c.name} ${c.dial}`}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <div className="min-w-0 flex-1">
+              <InputField
+                type="tel"
+                inputMode="tel"
+                value={number}
+                onChange={(e) => commit(dial, e.target.value.replace(/[^\d\s-]/g, ""))}
+                placeholder={props.placeholder ?? "Phone number"}
+                disabled={disabled}
+                onTable={cell}
+                className="w-full"
+              />
+            </div>
+          </div>
+        );
+      }}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,37 @@
+"use client";
+
+import type { OutputData } from "@editorjs/editorjs";
+
+// Import the lazy wrapper from its file directly, NOT the folder barrel: the barrel
+// statically re-exports `TextEditor` (which loads EditorJS at module init) and would drag
+// it into the SSR bundle, crashing server rendering. This path stays SSR-safe (lazy inside).
+import { RichTextField as RichTextEditor } from "../../TextEditor/RichTextField";
+import { formatFieldView } from "../viewFormat";
+import type { BaseFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/**
+ * `FormBuilder.RichText` — EditorJS content (value = `OutputData`).
+ *
+ * Forced to a **vertical, full-width** layout (label on top, editor below spanning the whole
+ * section): the editor + its toolbar need the full width, not the cramped right column.
+ */
+export function RichTextField(props: BaseFieldProps) {
+  return (
+    <FieldShell
+      {...props}
+      direction="vertical"
+      fullWidth
+      view={(v) => formatFieldView({ kind: "richtext", value: v })}
+    >
+      {(field) => (
+        <RichTextEditor
+          data={field.value as OutputData | undefined}
+          onChange={field.onChange}
+          readOnly={props.disabled}
+          placeholder={props.placeholder}
+        />
+      )}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,101 @@
+"use client";
+
+import { SearchableSelect } from "../../SearchableSelect";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../Select";
+import { BadgeField } from "../../BadgeField";
+import type { Tag } from "../../../hooks/useTagSelection";
+import { useLoading, useCell } from "../context";
+import { formatFieldView } from "../viewFormat";
+import type { SelectFieldProps, SearchableSelectFieldProps, OptionsFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/** `FormBuilder.Select` — the plain `Select` dropdown. */
+export function SelectField(props: SelectFieldProps) {
+  const loading = useLoading();
+  const cell = useCell();
+
+  return (
+    <FieldShell
+      {...props}
+      view={(v) => formatFieldView({ kind: "option", value: v, options: props.options })}
+    >
+      {(field) => (
+        <Select
+          value={typeof field.value === "string" ? field.value : ""}
+          onValueChange={field.onChange}
+          disabled={props.disabled || loading}
+        >
+          <SelectTrigger size="XL" onTable={cell} className="w-full">
+            <SelectValue placeholder={props.placeholder ?? "Select…"} />
+          </SelectTrigger>
+          <SelectContent>
+            {props.options.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </FieldShell>
+  );
+}
+
+/**
+ * `FormBuilder.SearchableSelect` — the `SearchableSelect` combobox: a search box with
+ * client-side filtering, or server-side search + infinite scroll via the async props.
+ */
+export function SearchableSelectField(props: SearchableSelectFieldProps) {
+  const cell = useCell();
+  return (
+    <FieldShell
+      {...props}
+      view={(v) => formatFieldView({ kind: "option", value: v, options: props.options })}
+    >
+      {(field) => (
+        <SearchableSelect
+          options={props.options}
+          value={field.value ?? null}
+          onValueChange={(value) => field.onChange(value)}
+          placeholder={props.placeholder ?? "Select…"}
+          filterClientSide={props.filterClientSide ?? true}
+          onSearchChange={props.onSearchChange}
+          onLoadMore={props.onLoadMore}
+          hasMore={props.hasMore}
+          loading={props.loading}
+          onTable={cell}
+          className="w-full"
+        />
+      )}
+    </FieldShell>
+  );
+}
+
+/** `FormBuilder.MultiSelect` / `.Tags` — BadgeField, value is `string[]`. */
+export function MultiSelectField(props: OptionsFieldProps) {
+  const cell = useCell();
+  return (
+    <FieldShell
+      {...props}
+      view={(v) => formatFieldView({ kind: "multi", value: v, options: props.options })}
+    >
+      {(field) => {
+        const selected = new Set<string>(Array.isArray(field.value) ? field.value : []);
+        const tags: Tag[] = props.options.map((opt) => ({
+          id: opt.value,
+          name: opt.label,
+          value: opt.value,
+          isSelected: selected.has(opt.value),
+        }));
+        return (
+          <BadgeField
+            tags={tags}
+            onValueChange={(picked) => field.onChange(picked.map((t) => t.value ?? t.id))}
+            onTable={cell}
+            className="w-full"
+          />
+        );
+      }}
+    </FieldShell>
+  );
+}