torch-glare 2.5.6 → 2.6.0

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

@@ -1,157 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-
-import { Button } from "../../Button";
-import { GroupStyles } from "../../Input";
-import { cn } from "../../../utils/cn";
-import { useLoading } from "../context";
-import type { SignatureFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-/**
- * `FormBuilder.Signature` — a freehand signature pad (native `<canvas>` + pointer
- * events, no dependency). Value is a PNG data-URL string (`""` when empty), so it
- * registers/validates/submits/views like any other field via `FieldShell`.
- *
- * Forced to a **vertical, full-width** layout (label on top, pad below spanning the whole
- * section) — like `FormBuilder.RichText`: the canvas needs the full width, not the right column.
- */
-export function SignatureField(props: SignatureFieldProps) {
-  const loading = useLoading();
-  const penColor = props.penColor ?? "#111827";
-
-  return (
-    <FieldShell {...props} direction="vertical" fullWidth>
-      {(field) => (
-        <SignaturePad
-          value={typeof field.value === "string" ? field.value : ""}
-          onChange={field.onChange}
-          disabled={props.disabled || loading}
-          penColor={penColor}
-        />
-      )}
-    </FieldShell>
-  );
-}
-
-interface SignaturePadProps {
-  value: string;
-  onChange: (value: string) => void;
-  disabled?: boolean;
-  penColor: string;
-}
-
-function SignaturePad({ value, onChange, disabled, penColor }: SignaturePadProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const drawing = useRef(false);
-  const last = useRef<{ x: number; y: number } | null>(null);
-  // Track whether the canvas currently holds strokes, so Clear can no-op cleanly.
-  const dirty = useRef(false);
-
-  // Size the backing store to the element box (accounting for DPR) and seed it
-  // from the current value. Runs once on mount; a remount `key` re-seeds on edit.
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    const rect = canvas.getBoundingClientRect();
-    const dpr = window.devicePixelRatio || 1;
-    canvas.width = Math.max(1, Math.round(rect.width * dpr));
-    canvas.height = Math.max(1, Math.round(rect.height * dpr));
-    ctx.scale(dpr, dpr);
-    ctx.lineWidth = 2;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    ctx.strokeStyle = penColor;
-
-    if (value) {
-      const img = new Image();
-      img.onload = () => ctx.drawImage(img, 0, 0, rect.width, rect.height);
-      img.src = value;
-      dirty.current = true;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- initial-only seed (like date/richtext)
-  }, []);
-
-  const pointToCanvas = (e: React.PointerEvent<HTMLCanvasElement>) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
-  };
-
-  const handleDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
-    if (disabled) return;
-    e.currentTarget.setPointerCapture(e.pointerId);
-    drawing.current = true;
-    last.current = pointToCanvas(e);
-  };
-
-  const handleMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
-    if (!drawing.current || disabled) return;
-    const ctx = canvasRef.current?.getContext("2d");
-    if (!ctx || !last.current) return;
-    const p = pointToCanvas(e);
-    ctx.beginPath();
-    ctx.moveTo(last.current.x, last.current.y);
-    ctx.lineTo(p.x, p.y);
-    ctx.stroke();
-    last.current = p;
-    dirty.current = true;
-  };
-
-  const handleUp = () => {
-    if (!drawing.current) return;
-    drawing.current = false;
-    last.current = null;
-    if (disabled) return;
-    const canvas = canvasRef.current;
-    if (canvas && dirty.current) onChange(canvas.toDataURL("image/png"));
-  };
-
-  const clear = () => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    if (canvas && ctx) {
-      const rect = canvas.getBoundingClientRect();
-      ctx.clearRect(0, 0, rect.width, rect.height);
-    }
-    dirty.current = false;
-    onChange("");
-  };
-
-  return (
-    <div
-      className={cn(
-        GroupStyles({ size: "M", variant: "PresentationStyle" }),
-        "relative h-[440px] w-full overflow-hidden p-0",
-        disabled && "opacity-60",
-      )}
-    >
-      <canvas
-        ref={canvasRef}
-        onPointerDown={handleDown}
-        onPointerMove={handleMove}
-        onPointerUp={handleUp}
-        onPointerLeave={handleUp}
-        className={cn(
-          "h-full w-full touch-none bg-white",
-          disabled ? "cursor-not-allowed" : "cursor-crosshair",
-        )}
-      />
-      {!disabled && (
-        <Button
-          type="button"
-          size="S"
-          variant="BorderStyle"
-          onClick={clear}
-          className="absolute right-2 top-2"
-        >
-          <i className="ri-eraser-line" />
-          Clear
-        </Button>
-      )}
-    </div>
-  );
-}

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

@@ -1,67 +0,0 @@
-"use client";
-
-import * as Slider from "@radix-ui/react-slider";
-
-import { cn } from "../../../utils/cn";
-import { useLoading } from "../context";
-import type { SliderFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-// The white knob + soft shadow, matching the design (same knob token + shadow as `Switch`).
-const THUMB = cn(
-  "block size-[12px] rounded-full bg-background-presentation-switcher-knob",
-  "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.04),0px_3px_8px_0px_rgba(0,0,0,0.15),0px_3px_1px_0px_rgba(0,0,0,0.06)]",
-  "outline-none transition-transform hover:scale-110",
-  "focus-visible:ring-2 focus-visible:ring-background-presentation-body-scroller-hover",
-);
-
-/**
- * `FormBuilder.Slider` — numeric slider (single value or a `[min,max]` range).
- * A `@radix-ui/react-slider` styled to the Figma range field: a `#f9f9f9` box holding a
- * 6px track, a blue fill, a white knob, and the live value readout on the right.
- */
-export function SliderField(props: SliderFieldProps) {
-  const loading = useLoading();
-  const min = props.min ?? 0;
-  const max = props.max ?? 100;
-  const step = props.step ?? 1;
-  const suffix = props.suffix ?? "";
-  const fmt = (n: number) => `${n}${suffix}`;
-
-  return (
-    <FieldShell {...props}>
-      {(field) => {
-        const raw = field.value;
-        const values: number[] = props.range
-          ? Array.isArray(raw)
-            ? (raw as number[])
-            : [min, max]
-          : [typeof raw === "number" ? raw : min];
-        const disabled = props.disabled || loading;
-        return (
-          <div className="flex w-full items-center gap-[10px] rounded-[8px] bg-background-presentation-form-field-primary px-[10px] py-[6px]">
-            <Slider.Root
-              className="relative flex h-[12px] w-full grow touch-none select-none items-center"
-              min={min}
-              max={max}
-              step={step}
-              value={values}
-              onValueChange={(v) => field.onChange(props.range ? v : v[0])}
-              disabled={disabled}
-            >
-              <Slider.Track className="relative h-[6px] grow rounded-[10px] bg-background-presentation-body-scroller-default">
-                <Slider.Range className="absolute h-full rounded-[10px] bg-background-presentation-body-scroller-hover" />
-              </Slider.Track>
-              {values.map((_, i) => (
-                <Slider.Thumb key={i} className={THUMB} />
-              ))}
-            </Slider.Root>
-            <span className="min-w-[40px] shrink-0 whitespace-nowrap text-right tabular-nums typography-body-medium-regular text-content-presentation-global-primary">
-              {props.range ? `${values[0]}–${fmt(values[1])}` : fmt(values[0])}
-            </span>
-          </div>
-        );
-      }}
-    </FieldShell>
-  );
-}

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>
-  );
-}