torch-glare 2.5.6 → 2.6.0

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

@@ -1,168 +0,0 @@
-"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 { useDirection, useStepRegistry, useBare, useRequiredLabel } from "../context";
-import type { FieldHintSpec } from "../types";
-
-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";
-  /** Alerts stacked under the validation error. See `FieldHintSpec`. */
-  hints?: FieldHintSpec[];
-  /** The input, wired to the react-hook-form field. */
-  children: (
-    field: ControllerRenderProps<FieldValues, string>,
-    fieldState: ControllerFieldState,
-  ) => ReactNode;
-}
-
-/**
- * Shared wrapper for every `FormBuilder.*` field: the FieldSection row + the RHF
- * `FormField`/`FormItem`/`FormControl`/`FormMessage` scaffolding. Also registers the
- * field name into the enclosing `FormRenderer.Step` (if any) so the stepper can
- * validate per step.
- */
-export function FieldShell({
-  name,
-  label,
-  description,
-  required,
-  fullWidth,
-  hidden,
-  direction: directionProp,
-  hints,
-  children,
-}: FieldShellProps) {
-  const form = useFormContext();
-  const bare = useBare();
-  const ctxDirection = useDirection();
-  // LOCAL PATCH (Contact Center): upstream hardcodes "(Required)". See context.ts.
-  const requiredLabel = useRequiredLabel();
-  // 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;
-
-  // Chrome-less mode — a `FormBuilder.Table` cell (`"table"`) or a panel field (`"bare"`).
-  // Render just the control: no FieldSection label/row, so a row stays one line tall. Step
-  // registration above still applies. The control's border treatment is the caller's call,
-  // via `useOnTable`.
-  //
-  // LOCAL PATCH (Contact Center): the error Tooltip that used to wrap the control is gone.
-  // Upstream bound it to `open={Boolean(fieldError)}`, so it was not a hover tooltip at all — it
-  // was a bubble pinned open for as long as the field was invalid, anchored `top`, which in a
-  // table's first row sat directly on top of the column header. Several invalid cells meant
-  // several permanent bubbles over the header row. Its `TooltipTrigger` also stamped
-  // `aria-label="Open tooltip"` onto EVERY cell wrapper, error or not, so a screen reader
-  // announced every table input that way.
-  //
-  // The controls already signal invalidity themselves (`state="negative"` / `invalid`), so the
-  // red border remains; only the bubble is dropped. Re-apply after any `npx torch-glare update`.
-  if (bare) {
-    return (
-      <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>
-        )}
-      />
-    );
-  }
-
-  return (
-    <FieldSection
-      label={label}
-      requiredLabel={required ? requiredLabel : undefined}
-      secondaryLabel={description}
-      direction={direction}
-      className={fullWidth ? "max-w-full" : undefined}
-      childrenUnderLabel={<FieldMessages message={fieldError} hints={hints} />}
-    >
-      <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>
-  );
-}
-
-/**
- * The stack under a field: the validation error first (it is the actionable one), then any author
- * `hints` in order. Renders nothing when there is neither, so a field without hints is unchanged.
- */
-function FieldMessages({ message, hints }: { message?: string; hints?: FieldHintSpec[] }) {
-  if (!message && !hints?.length) return null;
-  return (
-    <div className="flex flex-col items-start gap-[4px]">
-      {message && <FieldHint state="error" label={message} />}
-      {hints?.map((hint, i) => (
-        <FieldHint key={i} state={hint.state ?? "info"} label={hint.label} icon={hint.icon} />
-      ))}
-    </div>
-  );
-}
-
-/**
- * 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

@@ -1,39 +0,0 @@
-"use client";
-
-import { ImageAttachment } from "../../ImageAttachment";
-import { useLoading } from "../context";
-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}>
-      {(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

@@ -1,132 +0,0 @@
-"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 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}>
-      {(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}>
-      {(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

@@ -1,31 +0,0 @@
-"use client";
-
-import { InputOTP, InputOTPGroup, InputOTPSlot } from "../../InputOTP";
-import { useLoading } from "../context";
-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}>
-      {(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

@@ -1,109 +0,0 @@
-"use client";
-
-import { SearchableSelect } from "../../SearchableSelect";
-import { InputField } from "../../InputField";
-import { cn } from "../../../utils/cn";
-import { useLoading, useBare, useOnTable } from "../context";
-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);
-
-// Country picker rows. Keyed by the unique ISO code; the row shows flag + dial, but `searchText`
-// makes filtering match the country NAME (typing a dial code won't match).
-const COUNTRY_OPTIONS = COUNTRIES.map((c) => ({
-  value: c.code,
-  label: `${flagEmoji(c.code)} ${c.dial}`,
-  searchText: c.name,
-}));
-
-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 a
- * `SearchableSelect` keyed by the unique ISO code (dial codes repeat) — type to filter by
- * country name or dial. The value is stored as a `"+<dial> <number>"` string.
- *
- * **Inside a `FormBuilder.Table` cell** this collapses to a single plain number input: the
- * fixed-width picker imposed a ~155px floor on the column and left the number truncated,
- * and two controls in one cell is not a table column. Add a separate column (e.g. a
- * `FormBuilder.Select` of dial codes) when a table needs the country code.
- */
-export function PhoneField(props: PhoneFieldProps) {
-  const loading = useLoading();
-  // Neither a table cell nor a narrow config rail has room for the dial-code composite, so both
-  // collapse to a single tel input — but only a real table cell takes the flush border.
-  const bare = useBare();
-  const onTable = useOnTable();
-  const defaultDial = props.defaultCountry ?? "+964"; // Iraq
-
-  if (bare) {
-    return (
-      <FieldShell {...props}>
-        {(field) => (
-          <InputField
-            type="tel"
-            inputMode="tel"
-            value={typeof field.value === "string" ? field.value : ""}
-            onChange={(e) => field.onChange(e.target.value.replace(/[^\d\s+-]/g, ""))}
-            onBlur={field.onBlur}
-            placeholder={props.placeholder ?? "Phone number"}
-            disabled={props.disabled || loading}
-            onTable={onTable}
-            className="w-full"
-          />
-        )}
-      </FieldShell>
-    );
-  }
-
-  return (
-    <FieldShell {...props}>
-      {(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">
-            {/* Searchable country picker — filter by name or dial; rows carry the full country name. */}
-            <SearchableSelect
-              options={COUNTRY_OPTIONS}
-              value={country?.code ?? null}
-              onValueChange={(code) => commit(countryByCode(code)?.dial ?? dial, number)}
-              placeholder="+964"
-              size="M"
-              inputClassName="w-[100px] min-w-[0px]"
-              className={cn("w-[113px] shrink-0", disabled && "pointer-events-none opacity-60")}
-            />
-            <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}
-                className="w-full"
-              />
-            </div>
-          </div>
-        );
-      }}
-    </FieldShell>
-  );
-}

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

@@ -1,31 +0,0 @@
-"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 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>
-      {(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

@@ -1,114 +0,0 @@
-"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, useOnTable } from "../context";
-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 onTable = useOnTable();
-
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <Select
-          value={typeof field.value === "string" ? field.value : ""}
-          onValueChange={field.onChange}
-          disabled={props.disabled || loading}
-        >
-          <SelectTrigger size="XL" onTable={onTable} 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 onTable = useOnTable();
-  return (
-    <FieldShell {...props}>
-      {(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={onTable}
-          className="w-full"
-        />
-      )}
-    </FieldShell>
-  );
-}
-
-/**
- * `FormBuilder.MultiSelect` / `.Tags` — BadgeField, value is `string[]`.
- *
- * With `creatable`, the user can type a value that is not in `options` and it becomes a badge —
- * so a free-text list (emails, aliases, tags) is one field rather than a one-column table. Pass
- * `options={[]}` for a pure free-text list.
- */
-export function MultiSelectField(props: OptionsFieldProps) {
-  const onTable = useOnTable();
-  return (
-    <FieldShell {...props}>
-      {(field) => {
-        const values: string[] = Array.isArray(field.value) ? field.value : [];
-        const byValue = new Map(props.options.map((opt) => [opt.value, opt]));
-        // Selected first, IN VALUE ORDER, then whatever is left to offer. Order matters: the
-        // hook re-syncs from this list, so building it in `options` order would reshuffle the
-        // user's badges on every keystroke — and drop any created value that is not an option.
-        const tags: Tag[] = [
-          ...values.map((value) => ({
-            id: value,
-            name: byValue.get(value)?.label ?? value,
-            value,
-            isSelected: true,
-          })),
-          ...props.options
-            .filter((opt) => !values.includes(opt.value))
-            .map((opt) => ({
-              id: opt.value,
-              name: opt.label,
-              value: opt.value,
-              isSelected: false,
-            })),
-        ];
-        return (
-          <BadgeField
-            tags={tags}
-            creatable={props.creatable}
-            placeholder={props.placeholder}
-            disabled={props.disabled}
-            onValueChange={(picked) => field.onChange(picked.map((t) => t.value ?? t.id))}
-            onTable={onTable}
-            className="w-full"
-          />
-        );
-      }}
-    </FieldShell>
-  );
-}