torch-glare 2.4.1 → 2.4.2

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

@@ -0,0 +1,175 @@
+"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
+      view={(v) =>
+        typeof v === "string" && v
+          ? {
+              valueNode: (
+                // eslint-disable-next-line @next/next/no-img-element -- data-URL preview, no optimization applies
+                <img
+                  src={v}
+                  alt="Signature"
+                  className="max-h-[120px] rounded-[8px] border border-border-presentation-action-primary bg-white"
+                />
+              ),
+            }
+          : { value: "" }
+      }
+    >
+      {(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

@@ -0,0 +1,72 @@
+"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}
+      view={(v) => ({
+        value: Array.isArray(v) ? `${fmt(v[0])} – ${fmt(v[1])}` : v == null ? "" : fmt(v as number),
+      })}
+    >
+      {(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

@@ -0,0 +1,42 @@
+"use client";
+
+import { Switch } from "../../Switch";
+import { useLoading } from "../context";
+import { formatFieldView } from "../viewFormat";
+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} view={(v) => formatFieldView({ kind: "boolean", value: v })}>
+      {(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

@@ -0,0 +1,312 @@
+"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, useMode } 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 mode = useMode();
+  const loading = useLoading();
+  const isView = mode === "view";
+
+  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 && !isView;
+  const showSelect = selectable && !isView;
+
+  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>
+        )}
+
+        {!isView && (
+          <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 (edit mode only): a "Delete Row"
+  // that's disabled until rows are selected, and a primary "Add New".
+  const headerActions = !isView ? (
+    <>
+      {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>
+    </>
+  ) : undefined;
+
+  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>
+  );
+}