torch-glare 2.5.5 → 2.6.0

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

@@ -1,41 +0,0 @@
-"use client";
-
-import { Switch } from "../../Switch";
-import { useLoading } from "../context";
-import type { SwitchBoxFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-/**
- * `FormBuilder.SwitchBox` — a switch inside a `#f9f9f9` field box (design node
- * 8999:170563). Value is a `boolean`.
- *
- * Renders like any other field: the field `label` sits in the normal `FieldShell` label
- * column. The control is the box, which holds an optional inline `subLabel` (the design's
- * "Sub-Field-Header"), a vertical divider, and the switch on the right.
- */
-export function SwitchBoxField({ subLabel, ...props }: SwitchBoxFieldProps) {
-  const loading = useLoading();
-  const hasSubLabel = subLabel != null && subLabel !== "";
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <div className="flex w-full items-center justify-end gap-[10px] rounded-[8px] bg-background-presentation-form-field-primary px-[10px] py-[6px]">
-          {hasSubLabel && (
-            <>
-              <span className="min-w-0 flex-1 typography-headers-small-regular text-content-presentation-global-primary">
-                {subLabel}
-              </span>
-              <div className="h-[20px] w-px shrink-0 bg-border-presentation-global-primary" />
-            </>
-          )}
-          <Switch
-            id={props.name}
-            checked={!!field.value}
-            onCheckedChange={field.onChange}
-            disabled={props.disabled || loading}
-          />
-        </div>
-      )}
-    </FieldShell>
-  );
-}

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

@@ -1,336 +0,0 @@
-"use client";
-
-import { type ReactNode, useState } from "react";
-import { useFormContext, useFieldArray, type FieldValues, type ArrayPath } from "react-hook-form";
-import { CSS } from "@dnd-kit/utilities";
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-
-import { cn } from "../../../utils/cn";
-import { SectionBlock } from "../../SectionBlock";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableEndAction,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TableScroller,
-} from "../../Table";
-import { Checkbox } from "../../Checkbox";
-import { Button } from "../../Button";
-import { CellContext, useLoading } from "../context";
-import type { TableColumn, TableFieldProps } from "../types";
-
-const ALIGN: Record<NonNullable<TableColumn["align"]>, string> = {
-  start: "justify-start text-start",
-  center: "justify-center text-center",
-  end: "justify-end text-end",
-};
-
-/**
- * `FormBuilder.Table` — an editable data-grid field built on the FieldArray pattern.
- * Rows are records; each column cell is any `FormBuilder.*` field, rendered "bare" via
- * `CellContext`. Rows can be checkbox-selected, drag-reordered, added and removed.
- */
-export function TableField(props: TableFieldProps) {
-  const { name, columns, selectable = true, reorderable = true } = props;
-  const form = useFormContext<FieldValues>();
-  const loading = useLoading();
-
-  const { fields, append, remove, move, replace } = useFieldArray({
-    control: form.control,
-    name: name as ArrayPath<FieldValues>,
-  });
-
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [sort, setSort] = useState<{ key: string; dir: "asc" | "desc" } | null>(null);
-  // Drag-resized column widths, keyed by column index; falls back to `column.width`.
-  const [resized, setResized] = useState<Record<number, number>>({});
-
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  );
-
-  if (props.hidden) return null;
-
-  const showHandle = reorderable;
-  const showSelect = selectable;
-
-  const toggleRow = (id: string) =>
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-
-  const allSelected = fields.length > 0 && fields.every((f) => selected.has(f.id));
-  const someSelected = fields.some((f) => selected.has(f.id));
-  const toggleAll = () => setSelected(allSelected ? new Set() : new Set(fields.map((f) => f.id)));
-
-  const deleteSelected = () => {
-    if (loading) return;
-    const indices = fields.map((f, i) => (selected.has(f.id) ? i : -1)).filter((i) => i >= 0);
-    remove(indices);
-    setSelected(new Set());
-  };
-
-  const onDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-    const oldIndex = fields.findIndex((f) => f.id === active.id);
-    const newIndex = fields.findIndex((f) => f.id === over.id);
-    if (oldIndex >= 0 && newIndex >= 0) move(oldIndex, newIndex);
-  };
-
-  // Sort the rows by a column's key (asc/desc toggle). `replace` re-keys the field ids,
-  // so selection (keyed by id) is cleared afterwards.
-  const applySort = (key: string) => {
-    if (loading) return;
-    const dir: "asc" | "desc" = sort?.key === key && sort.dir === "asc" ? "desc" : "asc";
-    const rows = (form.getValues(name) as Record<string, unknown>[] | undefined) ?? [];
-    const sorted = [...rows].sort((a, b) => {
-      const av = a?.[key];
-      const bv = b?.[key];
-      if (av == null) return bv == null ? 0 : 1;
-      if (bv == null) return -1;
-      const cmp =
-        typeof av === "number" && typeof bv === "number"
-          ? av - bv
-          : String(av).localeCompare(String(bv));
-      return dir === "asc" ? cmp : -cmp;
-    });
-    replace(sorted);
-    setSort({ key, dir });
-    setSelected(new Set());
-  };
-
-  const totalCols = columns.length + (showHandle ? 1 : 0) + (showSelect ? 1 : 0);
-
-  // Under the browser's default `table-layout: auto`, a column's `width` is only a hint —
-  // content (an input's intrinsic size, a currency prefix) silently widens it, which is why
-  // a `width: 110` column used to render at 200-odd px. When every column declares a width
-  // we can switch to fixed layout and have them honoured exactly. Mixed/absent widths keep
-  // auto layout, since under fixed layout an unsized column would collapse to nothing.
-  //
-  // Fixed layout also needs a *definite* table width — with `width: auto` the browser sizes
-  // the table from content and then redistributes, throwing the declared widths (and any
-  // drag-resize) away. So the widths are owned here and totalled onto the table, which is
-  // what lets a drag grow the table instead of stealing space from the next column.
-  const DUMMY_COL_WIDTH = 40; // the design's onset / selector columns
-  const colWidth = (col: TableColumn, ci: number) => resized[ci] ?? col.width;
-  const fixedLayout = columns.length > 0 && columns.every((col, ci) => !!colWidth(col, ci));
-  const tableWidth = fixedLayout
-    ? columns.reduce((sum, col, ci) => sum + (colWidth(col, ci) ?? 0), 0) +
-      (showHandle ? DUMMY_COL_WIDTH : 0) +
-      (showSelect ? DUMMY_COL_WIDTH : 0)
-    : undefined;
-
-  const rowCells = (rowName: string, index: number) => (
-    <>
-      {showSelect && (
-        <TableCell isDummy>
-          <Checkbox
-            size="S"
-            checked={selected.has(fields[index].id)}
-            onCheckedChange={() => toggleRow(fields[index].id)}
-          />
-        </TableCell>
-      )}
-      {columns.map((col, ci) => (
-        <TableCell
-          key={ci}
-          style={colWidth(col, ci) ? { width: colWidth(col, ci) } : undefined}
-          // Column widths come from `col.width`, so opt out of TableCell's 200px floor —
-          // otherwise a narrow column (e.g. `width: 110`) silently renders at 200px.
-          minWidth={0}
-          // Every cell here holds a form control, and the right-edge fade washes out whatever
-          // sits at its end — a Select's chevron, a date picker's button.
-          fade={false}
-          childrenClassName={cn("min-w-0 w-full", col.align && ALIGN[col.align])}
-        >
-          <CellContext.Provider value="table">{col.cell(rowName, index)}</CellContext.Provider>
-        </TableCell>
-      ))}
-    </>
-  );
-
-  const table = (
-    // `min-w-full` so the grid still spans the card when the columns are narrower than it,
-    // while staying free to overflow (and scroll) when they aren't.
-    <Table
-      className={cn("min-w-full", fixedLayout && "[table-layout:fixed]")}
-      style={tableWidth ? { width: tableWidth } : undefined}
-    >
-      <TableHeader>
-        <TableRow>
-          {/* Fixed 40px, per the design — and so these unsized columns can't absorb the
-              table's slack width and push the data columns off-screen. */}
-          {showHandle && <TableHead isDummy style={{ width: DUMMY_COL_WIDTH }} />}
-          {showSelect && (
-            <TableHead isDummy style={{ width: DUMMY_COL_WIDTH }}>
-              <Checkbox
-                size="S"
-                checked={allSelected ? true : someSelected ? "indeterminate" : false}
-                onCheckedChange={toggleAll}
-              />
-            </TableHead>
-          )}
-          {columns.map((col, ci) => (
-            <TableHead
-              key={ci}
-              // Width goes on the <th> too, so header and body columns agree.
-              style={colWidth(col, ci) ? { width: colWidth(col, ci) } : undefined}
-              onResize={(w) => setResized((prev) => ({ ...prev, [ci]: w }))}
-              sortType={col.sortKey && sort?.key === col.sortKey ? sort.dir : undefined}
-              sortLabel={typeof col.header === "string" ? col.header : undefined}
-              onSort={col.sortKey ? () => applySort(col.sortKey as string) : undefined}
-            >
-              {col.header}
-            </TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-
-      <TableBody>
-        {showHandle ? (
-          <SortableContext items={fields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
-            {fields.map((f, index) => (
-              <SortableRow key={f.id} id={f.id} state={selected.has(f.id) ? "selected" : undefined}>
-                {rowCells(`${name}.${index}`, index)}
-              </SortableRow>
-            ))}
-          </SortableContext>
-        ) : (
-          fields.map((f, index) => (
-            <TableRow key={f.id} state={selected.has(f.id) ? "selected" : undefined}>
-              {rowCells(`${name}.${index}`, index)}
-            </TableRow>
-          ))
-        )}
-
-        {fields.length === 0 && (
-          <TableRow>
-            <TableCell colSpan={totalCols} minWidth={0}>
-              <span className="typography-body-small-regular text-content-presentation-global-secondary">
-                No rows yet.
-              </span>
-            </TableCell>
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-
-  // Header actions on the right of the SectionBlock title row: a "Delete Row" that's disabled
-  // until rows are selected, and a primary "Add New". They live outside the scroll container,
-  // so they stay put while the grid scrolls sideways.
-  const headerActions = (
-    <>
-      {selectable && (
-        <Button
-          type="button"
-          size="M"
-          variant="BorderStyle"
-          disabled={loading || selected.size === 0}
-          onClick={deleteSelected}
-        >
-          Delete Row
-        </Button>
-      )}
-      <Button
-        type="button"
-        size="M"
-        variant="BluColStyle"
-        disabled={loading}
-        onClick={() => append((props.defaultItem ?? {}) as never)}
-      >
-        {props.addLabel ?? "Add New"}
-      </Button>
-    </>
-  );
-
-  return (
-    <SectionBlock
-      variant="Table"
-      title={props.title}
-      color={props.color}
-      icon={props.icon}
-      action={headerActions}
-    >
-      {props.description && (
-        <p className="px-[16px] pt-[12px] typography-body-small-regular text-content-presentation-global-secondary">
-          {props.description}
-        </p>
-      )}
-
-      {/* The table is the only horizontally scrolling element … */}
-      <TableScroller>
-        {showHandle ? (
-          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
-            {table}
-          </DndContext>
-        ) : (
-          table
-        )}
-      </TableScroller>
-
-      {/* … so this stays visible no matter how far right the columns are scrolled. */}
-      <TableEndAction disabled={loading} onClick={() => append((props.defaultItem ?? {}) as never)}>
-        <i className="ri-add-line" />
-        {props.addLabel ?? "Add New"}
-      </TableEndAction>
-    </SectionBlock>
-  );
-}
-
-/** A draggable table row — the drag handle lives in the leading `isDummy` cell. */
-function SortableRow({
-  id,
-  state,
-  children,
-}: {
-  id: string;
-  state?: "selected";
-  children: ReactNode;
-}) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  return (
-    <TableRow ref={setNodeRef} style={style} state={state}>
-      <TableCell
-        {...attributes}
-        {...listeners}
-        className="cursor-grab active:cursor-grabbing"
-        isDummy
-      >
-        <i className="ri-draggable text-[18px] text-content-presentation-global-secondary" />
-      </TableCell>
-      {children}
-    </TableRow>
-  );
-}

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

@@ -1,213 +0,0 @@
-"use client";
-
-import { ReactNode, useEffect, useLayoutEffect, useRef, useState, type ChangeEvent } from "react";
-import type { ControllerRenderProps, FieldValues } from "react-hook-form";
-
-import { InputField } from "../../InputField";
-import { Textarea } from "../../Textarea";
-import { PasswordLevel } from "../../PasswordLevel";
-import { useLoading, useOnTable } from "../context";
-import { formatNumber } from "../numberFormat";
-import type { BaseFieldProps, CurrencyFieldProps, PasswordFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-// Run before paint on the client; fall back to useEffect on the server (no SSR warning).
-const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-
-/**
- * A number input that shows a **live** thousands-separated value (e.g. "1,299")
- * while storing the raw `number` in the form. Commas are inserted as you type and
- * the caret is preserved; decimals (and a trailing ".") are kept intact.
- */
-function NumberInput({
-  field,
-  icon,
-  placeholder,
-  disabled,
-  onTable,
-}: {
-  field: ControllerRenderProps<FieldValues, string>;
-  icon?: ReactNode;
-  placeholder?: string;
-  disabled?: boolean;
-  onTable?: boolean;
-}) {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const caretRef = useRef<number | null>(null);
-  const [text, setText] = useState<string>(() => formatNumber(field.value));
-
-  // Reflect external value changes (e.g. edit data loading) while not editing.
-  useEffect(() => {
-    if (document.activeElement === inputRef.current) return;
-    setText(formatNumber(field.value));
-  }, [field.value]);
-
-  // Restore the caret after a live reformat (commas shift positions).
-  useIsoLayoutEffect(() => {
-    if (caretRef.current != null && inputRef.current) {
-      inputRef.current.setSelectionRange(caretRef.current, caretRef.current);
-      caretRef.current = null;
-    }
-  });
-
-  const setRefs = (el: HTMLInputElement | null) => {
-    inputRef.current = el;
-    if (typeof field.ref === "function") field.ref(el);
-  };
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const raw = e.target.value;
-    const caret = e.target.selectionStart ?? raw.length;
-    const digitsBeforeCaret = raw.slice(0, caret).replace(/\D/g, "").length;
-
-    // Keep digits and a single decimal point.
-    let cleaned = raw.replace(/[^\d.]/g, "");
-    const dot = cleaned.indexOf(".");
-    if (dot !== -1) {
-      cleaned = cleaned.slice(0, dot + 1) + cleaned.slice(dot + 1).replace(/\./g, "");
-    }
-
-    let formatted = "";
-    if (cleaned !== "") {
-      const [intPart, decPart] = cleaned.split(".");
-      const intFmt = intPart === "" ? "" : Number(intPart).toLocaleString("en-US");
-      formatted = decPart !== undefined ? `${intFmt}.${decPart}` : intFmt;
-    }
-
-    // Caret goes after the same count of digits, skipping the inserted commas.
-    let pos = 0;
-    let seen = 0;
-    while (pos < formatted.length && seen < digitsBeforeCaret) {
-      if (/\d/.test(formatted[pos])) seen++;
-      pos++;
-    }
-    caretRef.current = pos;
-
-    setText(formatted);
-    field.onChange(cleaned === "" || cleaned === "." ? undefined : Number(cleaned));
-  };
-
-  return (
-    <InputField
-      name={field.name}
-      ref={setRefs}
-      type="text"
-      inputMode="decimal"
-      icon={icon}
-      value={text}
-      placeholder={placeholder}
-      disabled={disabled}
-      onTable={onTable}
-      className="w-full"
-      onChange={handleChange}
-      onBlur={() => field.onBlur()}
-    />
-  );
-}
-
-function TextLike({ props, type }: { props: BaseFieldProps; type: "text" | "email" | "password" }) {
-  const loading = useLoading();
-  const onTable = useOnTable();
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <InputField
-          {...field}
-          type={type}
-          value={field.value ?? ""}
-          placeholder={props.placeholder}
-          disabled={props.disabled || loading}
-          onTable={onTable}
-          className="w-full"
-        />
-      )}
-    </FieldShell>
-  );
-}
-
-export function TextField(props: BaseFieldProps) {
-  return <TextLike props={props} type="text" />;
-}
-export function EmailField(props: BaseFieldProps) {
-  return <TextLike props={props} type="email" />;
-}
-export function PasswordField(props: PasswordFieldProps) {
-  const loading = useLoading();
-  const onTable = useOnTable();
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <div className="flex w-full flex-col gap-2">
-          <InputField
-            {...field}
-            type="password"
-            value={field.value ?? ""}
-            placeholder={props.placeholder}
-            disabled={props.disabled || loading}
-            onTable={onTable}
-            className="w-full"
-          />
-          {props.strengthMeter && <PasswordLevel value={field.value ?? ""} />}
-        </div>
-      )}
-    </FieldShell>
-  );
-}
-
-export function NumberField(props: BaseFieldProps) {
-  const loading = useLoading();
-  const onTable = useOnTable();
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <NumberInput
-          field={field}
-          placeholder={props.placeholder}
-          disabled={props.disabled || loading}
-          onTable={onTable}
-        />
-      )}
-    </FieldShell>
-  );
-}
-
-export function CurrencyField(props: CurrencyFieldProps) {
-  const loading = useLoading();
-  const onTable = useOnTable();
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <NumberInput
-          field={field}
-          icon={
-            props.currencySymbol ? (
-              <span className="typography-body-small-medium">{props.currencySymbol}</span>
-            ) : undefined
-          }
-          placeholder={props.placeholder}
-          disabled={props.disabled || loading}
-          onTable={onTable}
-        />
-      )}
-    </FieldShell>
-  );
-}
-
-export function TextareaField(props: BaseFieldProps & { rows?: number }) {
-  const loading = useLoading();
-  return (
-    <FieldShell {...props}>
-      {(field, fieldState) => (
-        <Textarea
-          {...field}
-          value={field.value ?? ""}
-          rows={props.rows}
-          placeholder={props.placeholder}
-          disabled={props.disabled || loading}
-          state={fieldState.error ? "negative" : undefined}
-          className="w-full"
-        />
-      )}
-    </FieldShell>
-  );
-}

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

@@ -1,43 +0,0 @@
-"use client";
-
-import { SearchableTree } from "../../SearchableTree";
-import type { TreeSelectFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-/**
- * `FormBuilder.TreeSelect` — hierarchical single-select (Glare `SearchableTree`).
- * Stores the selected node's id; seeds the picker + view label by finding the
- * node back from that id.
- */
-export function TreeSelectField<T>(props: TreeSelectFieldProps<T>) {
-  const findById = (id: unknown): T | null => {
-    const target = String(id ?? "");
-    if (!target) return null;
-    // Works for both nested (getNodeChildren) and flat node lists.
-    const stack: T[] = [...props.nodes];
-    while (stack.length) {
-      const node = stack.pop() as T;
-      if (props.getNodeId(node) === target) return node;
-      const kids = props.getNodeChildren?.(node);
-      if (kids && kids.length) stack.push(...kids);
-    }
-    return null;
-  };
-
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <SearchableTree
-          nodes={props.nodes}
-          getNodeId={props.getNodeId}
-          getNodeLabel={props.getNodeLabel}
-          getNodeChildren={props.getNodeChildren}
-          parentIdKey={props.parentIdKey as (keyof T & string) | undefined}
-          selectableFolders={props.selectableFolders}
-          value={findById(field.value)}
-          onSelect={(node) => field.onChange(props.getNodeId(node))}
-        />
-      )}
-    </FieldShell>
-  );
-}