torch-glare 2.5.5 → 2.6.0

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

@@ -1,39 +0,0 @@
-"use client";
-
-import { ImageAttachment } from "../../ImageAttachment";
-import { useLoading } from "../context";
-import type { FileFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-/** `FormBuilder.File` / `.Image` — stores the selected `File` (consumer uploads). */
-export function FileField(props: FileFieldProps & { image?: boolean }) {
-  const loading = useLoading();
-  return (
-    <FieldShell {...props}>
-      {(field) => {
-        const current: unknown = field.value;
-        const fileName = Array.isArray(current)
-          ? `${current.length} file(s)`
-          : current instanceof File
-            ? current.name
-            : "";
-        return (
-          <ImageAttachment
-            mainLabel={props.placeholder ?? (props.image ? "Upload image" : "Upload file")}
-            secondaryLabel={
-              fileName || (typeof props.description === "string" ? props.description : "")
-            }
-            accept={props.accept ?? (props.image ? "image/*" : undefined)}
-            multiple={props.multiple}
-            disabled={props.disabled || loading}
-            onChange={(e) => {
-              const files = (e.target as HTMLInputElement).files;
-              if (!files || files.length === 0) return;
-              field.onChange(props.multiple ? Array.from(files) : files[0]);
-            }}
-          />
-        );
-      }}
-    </FieldShell>
-  );
-}

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

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

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

@@ -1,109 +0,0 @@
-"use client";
-
-import { SearchableSelect } from "../../SearchableSelect";
-import { InputField } from "../../InputField";
-import { cn } from "../../../utils/cn";
-import { useLoading, useBare, useOnTable } 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.
- *
- * **Inside a `FormBuilder.Table` cell** this collapses to a single plain number input: the
- * fixed-width picker imposed a ~155px floor on the column and left the number truncated,
- * and two controls in one cell is not a table column. Add a separate column (e.g. a
- * `FormBuilder.Select` of dial codes) when a table needs the country code.
- */
-export function PhoneField(props: PhoneFieldProps) {
-  const loading = useLoading();
-  // Neither a table cell nor a narrow config rail has room for the dial-code composite, so both
-  // collapse to a single tel input — but only a real table cell takes the flush border.
-  const bare = useBare();
-  const onTable = useOnTable();
-  const defaultDial = props.defaultCountry ?? "+964"; // Iraq
-
-  if (bare) {
-    return (
-      <FieldShell {...props}>
-        {(field) => (
-          <InputField
-            type="tel"
-            inputMode="tel"
-            value={typeof field.value === "string" ? field.value : ""}
-            onChange={(e) => field.onChange(e.target.value.replace(/[^\d\s+-]/g, ""))}
-            onBlur={field.onBlur}
-            placeholder={props.placeholder ?? "Phone number"}
-            disabled={props.disabled || loading}
-            onTable={onTable}
-            className="w-full"
-          />
-        )}
-      </FieldShell>
-    );
-  }
-
-  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"
-              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}
-                className="w-full"
-              />
-            </div>
-          </div>
-        );
-      }}
-    </FieldShell>
-  );
-}

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

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

@@ -1,91 +0,0 @@
-"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, useOnTable } 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 onTable = useOnTable();
-
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <Select
-          value={typeof field.value === "string" ? field.value : ""}
-          onValueChange={field.onChange}
-          disabled={props.disabled || loading}
-        >
-          <SelectTrigger size="XL" onTable={onTable} 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 onTable = useOnTable();
-  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={onTable}
-          className="w-full"
-        />
-      )}
-    </FieldShell>
-  );
-}
-
-/** `FormBuilder.MultiSelect` / `.Tags` — BadgeField, value is `string[]`. */
-export function MultiSelectField(props: OptionsFieldProps) {
-  const onTable = useOnTable();
-  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={onTable}
-            className="w-full"
-          />
-        );
-      }}
-    </FieldShell>
-  );
-}

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