torch-glare 2.4.1 → 2.4.3

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

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

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

@@ -0,0 +1,83 @@
+"use client";
+
+import { SearchableSelect } from "../../SearchableSelect";
+import { InputField } from "../../InputField";
+import { cn } from "../../../utils/cn";
+import { useLoading, useCell } 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.
+ */
+export function PhoneField(props: PhoneFieldProps) {
+  const loading = useLoading();
+  const cell = useCell();
+  const defaultDial = props.defaultCountry ?? "+964"; // Iraq
+
+  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"
+              onTable={cell}
+              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}
+                onTable={cell}
+                className="w-full"
+              />
+            </div>
+          </div>
+        );
+      }}
+    </FieldShell>
+  );
+}

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

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

@@ -0,0 +1,91 @@
+"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, useCell } 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 cell = useCell();
+
+  return (
+    <FieldShell {...props}>
+      {(field) => (
+        <Select
+          value={typeof field.value === "string" ? field.value : ""}
+          onValueChange={field.onChange}
+          disabled={props.disabled || loading}
+        >
+          <SelectTrigger size="XL" onTable={cell} 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 cell = useCell();
+  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={cell}
+          className="w-full"
+        />
+      )}
+    </FieldShell>
+  );
+}
+
+/** `FormBuilder.MultiSelect` / `.Tags` — BadgeField, value is `string[]`. */
+export function MultiSelectField(props: OptionsFieldProps) {
+  const cell = useCell();
+  return (
+    <FieldShell {...props}>
+      {(field) => {
+        const selected = new Set<string>(Array.isArray(field.value) ? field.value : []);
+        const tags: Tag[] = props.options.map((opt) => ({
+          id: opt.value,
+          name: opt.label,
+          value: opt.value,
+          isSelected: selected.has(opt.value),
+        }));
+        return (
+          <BadgeField
+            tags={tags}
+            onValueChange={(picked) => field.onChange(picked.map((t) => t.value ?? t.id))}
+            onTable={cell}
+            className="w-full"
+          />
+        );
+      }}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,157 @@
+"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

@@ -0,0 +1,67 @@
+"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

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