torch-glare 2.4.1 → 2.4.3

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

@@ -0,0 +1,308 @@
+"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, TableHead, TableHeader, TableRow } 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);
+
+  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);
+
+  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={col.width ? { width: col.width } : undefined}
+          childrenClassName={cn(
+            "min-w-0 w-full [&:has(input)]:bg-transparent",
+            col.align && ALIGN[col.align],
+          )}
+        >
+          <CellContext.Provider value={true}>{col.cell(rowName, index)}</CellContext.Provider>
+        </TableCell>
+      ))}
+    </>
+  );
+
+  const table = (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          {showHandle && <TableHead isDummy />}
+          {showSelect && (
+            <TableHead isDummy>
+              <Checkbox
+                size="S"
+                checked={allSelected ? true : someSelected ? "indeterminate" : false}
+                onCheckedChange={toggleAll}
+              />
+            </TableHead>
+          )}
+          {columns.map((col, ci) => (
+            <TableHead
+              key={ci}
+              sortType={col.sortKey && sort?.key === col.sortKey ? sort.dir : 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}>
+              <span className="typography-body-small-regular text-content-presentation-global-secondary">
+                No rows yet.
+              </span>
+            </TableCell>
+          </TableRow>
+        )}
+
+        <TableRow className="h-[40px]">
+          <TableCell
+            colSpan={totalCols}
+            className="border-t-2 border-transparent hover:border-border-presentation-table-action-hover hover:bg-background-presentation-table-acton-hover"
+          >
+            <button
+              type="button"
+              disabled={loading}
+              onClick={() => append((props.defaultItem ?? {}) as never)}
+              className="flex w-full items-center justify-start gap-2 typography-body-medium-semibold text-content-presentation-action-light-primary [&_i]:text-[20px]"
+            >
+              <i className="ri-add-line" />
+              {props.addLabel ?? "Add New"}
+            </button>
+          </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".
+  const headerActions = (
+    <>
+      {selectable && (
+        <Button
+          type="button"
+          size="S"
+          variant="BorderStyle"
+          disabled={loading || selected.size === 0}
+          onClick={deleteSelected}
+        >
+          <i className="ri-delete-bin-line" />
+          Delete Row
+        </Button>
+      )}
+      <Button
+        type="button"
+        size="S"
+        variant="BluColStyle"
+        disabled={loading}
+        onClick={() => append((props.defaultItem ?? {}) as never)}
+      >
+        <i className="ri-add-line" />
+        {props.addLabel ?? "Add New"}
+      </Button>
+    </>
+  );
+
+  return (
+    <SectionBlock
+      title={props.title}
+      color={props.color}
+      icon={props.icon}
+      action={headerActions}
+      bodyClassName="px-[16px]"
+      // The bottom "Add New" footer is the last element, so drop SectionBlock's default
+      // bottom padding to keep the table flush with the card edge (matches the Figma).
+      containerClassName="pb-0"
+    >
+      <div className="flex w-full flex-col gap-2">
+        {props.description && (
+          <p className="typography-body-small-regular text-content-presentation-global-secondary">
+            {props.description}
+          </p>
+        )}
+
+        <div className="w-full overflow-x-auto">
+          {showHandle ? (
+            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+              {table}
+            </DndContext>
+          ) : (
+            table
+          )}
+        </div>
+      </div>
+    </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

@@ -0,0 +1,213 @@
+"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, useCell } 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 cell = useCell();
+  return (
+    <FieldShell {...props}>
+      {(field) => (
+        <InputField
+          {...field}
+          type={type}
+          value={field.value ?? ""}
+          placeholder={props.placeholder}
+          disabled={props.disabled || loading}
+          onTable={cell}
+          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 cell = useCell();
+  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={cell}
+            className="w-full"
+          />
+          {props.strengthMeter && <PasswordLevel value={field.value ?? ""} />}
+        </div>
+      )}
+    </FieldShell>
+  );
+}
+
+export function NumberField(props: BaseFieldProps) {
+  const loading = useLoading();
+  const cell = useCell();
+  return (
+    <FieldShell {...props}>
+      {(field) => (
+        <NumberInput
+          field={field}
+          placeholder={props.placeholder}
+          disabled={props.disabled || loading}
+          onTable={cell}
+        />
+      )}
+    </FieldShell>
+  );
+}
+
+export function CurrencyField(props: CurrencyFieldProps) {
+  const loading = useLoading();
+  const cell = useCell();
+  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={cell}
+        />
+      )}
+    </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

@@ -0,0 +1,43 @@
+"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>
+  );
+}