torch-glare 2.4.1 → 2.4.2

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

@@ -0,0 +1,222 @@
+"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 { formatFieldView } from "../viewFormat";
+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} view={(v) => formatFieldView({ kind: "text", value: v })}>
+      {(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}
+      view={(v) => formatFieldView({ kind: "text", value: v ? "••••••••" : "" })}
+    >
+      {(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} view={(v) => formatFieldView({ kind: "number", value: v })}>
+      {(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}
+      view={(v) =>
+        formatFieldView({ kind: "currency", value: v, currencySymbol: props.currencySymbol })
+      }
+    >
+      {(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} view={(v) => formatFieldView({ kind: "text", value: v })}>
+      {(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,49 @@
+"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}
+      view={(v) => {
+        const node = findById(v);
+        return { value: node ? String(props.getNodeLabel(node)) : "" };
+      }}
+    >
+      {(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>
+  );
+}

package/apps/lib/components/FormBuilder/fields/countries.ts

@@ -0,0 +1,303 @@
+/**
+ * ISO 3166-1 countries + their E.164 calling codes, for `FormBuilder.Phone`.
+ *
+ * Data is stored compactly as `[isoCode, name, dial]`; the flag emoji is derived from the ISO code
+ * (regional-indicator letters) rather than stored. Dial codes are NOT unique (US/Canada share +1,
+ * etc.) — that's why the picker keys options by the unique ISO `code`, and `countryByDial` resolves
+ * a stored dial back to a representative country.
+ */
+
+export interface Country {
+  /** ISO 3166-1 alpha-2 code, unique — e.g. "US". */
+  code: string;
+  name: string;
+  /** E.164 calling code with leading "+", e.g. "+1". */
+  dial: string;
+}
+
+// [ISO code, name, dial(no +)]
+const DATA: ReadonlyArray<readonly [string, string, string]> = [
+  ["AF", "Afghanistan", "93"],
+  ["AX", "Åland Islands", "358"],
+  ["AL", "Albania", "355"],
+  ["DZ", "Algeria", "213"],
+  ["AS", "American Samoa", "1"],
+  ["AD", "Andorra", "376"],
+  ["AO", "Angola", "244"],
+  ["AI", "Anguilla", "1"],
+  ["AG", "Antigua and Barbuda", "1"],
+  ["AR", "Argentina", "54"],
+  ["AM", "Armenia", "374"],
+  ["AW", "Aruba", "297"],
+  ["AU", "Australia", "61"],
+  ["AT", "Austria", "43"],
+  ["AZ", "Azerbaijan", "994"],
+  ["BS", "Bahamas", "1"],
+  ["BH", "Bahrain", "973"],
+  ["BD", "Bangladesh", "880"],
+  ["BB", "Barbados", "1"],
+  ["BY", "Belarus", "375"],
+  ["BE", "Belgium", "32"],
+  ["BZ", "Belize", "501"],
+  ["BJ", "Benin", "229"],
+  ["BM", "Bermuda", "1"],
+  ["BT", "Bhutan", "975"],
+  ["BO", "Bolivia", "591"],
+  ["BA", "Bosnia and Herzegovina", "387"],
+  ["BW", "Botswana", "267"],
+  ["BR", "Brazil", "55"],
+  ["IO", "British Indian Ocean Territory", "246"],
+  ["VG", "British Virgin Islands", "1"],
+  ["BN", "Brunei", "673"],
+  ["BG", "Bulgaria", "359"],
+  ["BF", "Burkina Faso", "226"],
+  ["BI", "Burundi", "257"],
+  ["KH", "Cambodia", "855"],
+  ["CM", "Cameroon", "237"],
+  ["CA", "Canada", "1"],
+  ["CV", "Cape Verde", "238"],
+  ["KY", "Cayman Islands", "1"],
+  ["CF", "Central African Republic", "236"],
+  ["TD", "Chad", "235"],
+  ["CL", "Chile", "56"],
+  ["CN", "China", "86"],
+  ["CX", "Christmas Island", "61"],
+  ["CC", "Cocos (Keeling) Islands", "61"],
+  ["CO", "Colombia", "57"],
+  ["KM", "Comoros", "269"],
+  ["CG", "Congo - Brazzaville", "242"],
+  ["CD", "Congo - Kinshasa", "243"],
+  ["CK", "Cook Islands", "682"],
+  ["CR", "Costa Rica", "506"],
+  ["CI", "Côte d’Ivoire", "225"],
+  ["HR", "Croatia", "385"],
+  ["CU", "Cuba", "53"],
+  ["CW", "Curaçao", "599"],
+  ["CY", "Cyprus", "357"],
+  ["CZ", "Czechia", "420"],
+  ["DK", "Denmark", "45"],
+  ["DJ", "Djibouti", "253"],
+  ["DM", "Dominica", "1"],
+  ["DO", "Dominican Republic", "1"],
+  ["EC", "Ecuador", "593"],
+  ["EG", "Egypt", "20"],
+  ["SV", "El Salvador", "503"],
+  ["GQ", "Equatorial Guinea", "240"],
+  ["ER", "Eritrea", "291"],
+  ["EE", "Estonia", "372"],
+  ["SZ", "Eswatini", "268"],
+  ["ET", "Ethiopia", "251"],
+  ["FK", "Falkland Islands", "500"],
+  ["FO", "Faroe Islands", "298"],
+  ["FJ", "Fiji", "679"],
+  ["FI", "Finland", "358"],
+  ["FR", "France", "33"],
+  ["GF", "French Guiana", "594"],
+  ["PF", "French Polynesia", "689"],
+  ["GA", "Gabon", "241"],
+  ["GM", "Gambia", "220"],
+  ["GE", "Georgia", "995"],
+  ["DE", "Germany", "49"],
+  ["GH", "Ghana", "233"],
+  ["GI", "Gibraltar", "350"],
+  ["GR", "Greece", "30"],
+  ["GL", "Greenland", "299"],
+  ["GD", "Grenada", "1"],
+  ["GP", "Guadeloupe", "590"],
+  ["GU", "Guam", "1"],
+  ["GT", "Guatemala", "502"],
+  ["GG", "Guernsey", "44"],
+  ["GN", "Guinea", "224"],
+  ["GW", "Guinea-Bissau", "245"],
+  ["GY", "Guyana", "592"],
+  ["HT", "Haiti", "509"],
+  ["HN", "Honduras", "504"],
+  ["HK", "Hong Kong", "852"],
+  ["HU", "Hungary", "36"],
+  ["IS", "Iceland", "354"],
+  ["IN", "India", "91"],
+  ["ID", "Indonesia", "62"],
+  ["IR", "Iran", "98"],
+  ["IQ", "Iraq", "964"],
+  ["IE", "Ireland", "353"],
+  ["IM", "Isle of Man", "44"],
+  ["IT", "Italy", "39"],
+  ["JM", "Jamaica", "1"],
+  ["JP", "Japan", "81"],
+  ["JE", "Jersey", "44"],
+  ["JO", "Jordan", "962"],
+  ["KZ", "Kazakhstan", "7"],
+  ["KE", "Kenya", "254"],
+  ["KI", "Kiribati", "686"],
+  ["XK", "Kosovo", "383"],
+  ["KW", "Kuwait", "965"],
+  ["KG", "Kyrgyzstan", "996"],
+  ["LA", "Laos", "856"],
+  ["LV", "Latvia", "371"],
+  ["LB", "Lebanon", "961"],
+  ["LS", "Lesotho", "266"],
+  ["LR", "Liberia", "231"],
+  ["LY", "Libya", "218"],
+  ["LI", "Liechtenstein", "423"],
+  ["LT", "Lithuania", "370"],
+  ["LU", "Luxembourg", "352"],
+  ["MO", "Macau", "853"],
+  ["MG", "Madagascar", "261"],
+  ["MW", "Malawi", "265"],
+  ["MY", "Malaysia", "60"],
+  ["MV", "Maldives", "960"],
+  ["ML", "Mali", "223"],
+  ["MT", "Malta", "356"],
+  ["MH", "Marshall Islands", "692"],
+  ["MQ", "Martinique", "596"],
+  ["MR", "Mauritania", "222"],
+  ["MU", "Mauritius", "230"],
+  ["YT", "Mayotte", "262"],
+  ["MX", "Mexico", "52"],
+  ["FM", "Micronesia", "691"],
+  ["MD", "Moldova", "373"],
+  ["MC", "Monaco", "377"],
+  ["MN", "Mongolia", "976"],
+  ["ME", "Montenegro", "382"],
+  ["MS", "Montserrat", "1"],
+  ["MA", "Morocco", "212"],
+  ["MZ", "Mozambique", "258"],
+  ["MM", "Myanmar (Burma)", "95"],
+  ["NA", "Namibia", "264"],
+  ["NR", "Nauru", "674"],
+  ["NP", "Nepal", "977"],
+  ["NL", "Netherlands", "31"],
+  ["NC", "New Caledonia", "687"],
+  ["NZ", "New Zealand", "64"],
+  ["NI", "Nicaragua", "505"],
+  ["NE", "Niger", "227"],
+  ["NG", "Nigeria", "234"],
+  ["NU", "Niue", "683"],
+  ["NF", "Norfolk Island", "672"],
+  ["KP", "North Korea", "850"],
+  ["MK", "North Macedonia", "389"],
+  ["MP", "Northern Mariana Islands", "1"],
+  ["NO", "Norway", "47"],
+  ["OM", "Oman", "968"],
+  ["PK", "Pakistan", "92"],
+  ["PW", "Palau", "680"],
+  ["PS", "Palestine", "970"],
+  ["PA", "Panama", "507"],
+  ["PG", "Papua New Guinea", "675"],
+  ["PY", "Paraguay", "595"],
+  ["PE", "Peru", "51"],
+  ["PH", "Philippines", "63"],
+  ["PL", "Poland", "48"],
+  ["PT", "Portugal", "351"],
+  ["PR", "Puerto Rico", "1"],
+  ["QA", "Qatar", "974"],
+  ["RE", "Réunion", "262"],
+  ["RO", "Romania", "40"],
+  ["RU", "Russia", "7"],
+  ["RW", "Rwanda", "250"],
+  ["WS", "Samoa", "685"],
+  ["SM", "San Marino", "378"],
+  ["ST", "São Tomé and Príncipe", "239"],
+  ["SA", "Saudi Arabia", "966"],
+  ["SN", "Senegal", "221"],
+  ["RS", "Serbia", "381"],
+  ["SC", "Seychelles", "248"],
+  ["SL", "Sierra Leone", "232"],
+  ["SG", "Singapore", "65"],
+  ["SX", "Sint Maarten", "1"],
+  ["SK", "Slovakia", "421"],
+  ["SI", "Slovenia", "386"],
+  ["SB", "Solomon Islands", "677"],
+  ["SO", "Somalia", "252"],
+  ["ZA", "South Africa", "27"],
+  ["KR", "South Korea", "82"],
+  ["SS", "South Sudan", "211"],
+  ["ES", "Spain", "34"],
+  ["LK", "Sri Lanka", "94"],
+  ["BL", "St. Barthélemy", "590"],
+  ["SH", "St. Helena", "290"],
+  ["KN", "St. Kitts and Nevis", "1"],
+  ["LC", "St. Lucia", "1"],
+  ["MF", "St. Martin", "590"],
+  ["PM", "St. Pierre and Miquelon", "508"],
+  ["VC", "St. Vincent and the Grenadines", "1"],
+  ["SD", "Sudan", "249"],
+  ["SR", "Suriname", "597"],
+  ["SE", "Sweden", "46"],
+  ["CH", "Switzerland", "41"],
+  ["SY", "Syria", "963"],
+  ["TW", "Taiwan", "886"],
+  ["TJ", "Tajikistan", "992"],
+  ["TZ", "Tanzania", "255"],
+  ["TH", "Thailand", "66"],
+  ["TL", "Timor-Leste", "670"],
+  ["TG", "Togo", "228"],
+  ["TK", "Tokelau", "690"],
+  ["TO", "Tonga", "676"],
+  ["TT", "Trinidad and Tobago", "1"],
+  ["TN", "Tunisia", "216"],
+  ["TR", "Turkey", "90"],
+  ["TM", "Turkmenistan", "993"],
+  ["TC", "Turks and Caicos Islands", "1"],
+  ["TV", "Tuvalu", "688"],
+  ["UG", "Uganda", "256"],
+  ["UA", "Ukraine", "380"],
+  ["AE", "United Arab Emirates", "971"],
+  ["GB", "United Kingdom", "44"],
+  ["US", "United States", "1"],
+  ["UY", "Uruguay", "598"],
+  ["UZ", "Uzbekistan", "998"],
+  ["VU", "Vanuatu", "678"],
+  ["VA", "Vatican City", "39"],
+  ["VE", "Venezuela", "58"],
+  ["VN", "Vietnam", "84"],
+  ["VI", "U.S. Virgin Islands", "1"],
+  ["WF", "Wallis and Futuna", "681"],
+  ["YE", "Yemen", "967"],
+  ["ZM", "Zambia", "260"],
+  ["ZW", "Zimbabwe", "263"],
+];
+
+/** The full list, sorted by name. */
+export const COUNTRIES: Country[] = DATA.map(([code, name, dial]) => ({
+  code,
+  name,
+  dial: `+${dial}`,
+})).sort((a, b) => a.name.localeCompare(b.name));
+
+const BY_CODE = new Map(COUNTRIES.map((c) => [c.code, c]));
+
+/** Flag emoji from an ISO 3166-1 alpha-2 code (regional-indicator letters). */
+export function flagEmoji(code: string): string {
+  return code
+    .toUpperCase()
+    .replace(/[^A-Z]/g, "")
+    .replace(/./g, (c) => String.fromCodePoint(127397 + c.charCodeAt(0)));
+}
+
+export function countryByCode(code: string): Country | undefined {
+  return BY_CODE.get(code);
+}
+
+// For dial codes shared by several countries, the one to show when resolving a stored dial back.
+const PREFERRED_BY_DIAL: Record<string, string> = {
+  "+964": "IQ",
+  "+1": "US",
+  "+7": "RU",
+  "+44": "GB",
+  "+61": "AU",
+  "+39": "IT",
+  "+212": "MA",
+  "+262": "RE",
+  "+358": "FI",
+  "+590": "GP",
+  "+596": "MQ",
+  "+599": "CW",
+};
+
+/** A representative country for a dial code (dial codes aren't unique). */
+export function countryByDial(dial: string): Country | undefined {
+  const preferred = PREFERRED_BY_DIAL[dial];
+  if (preferred) return BY_CODE.get(preferred);
+  return COUNTRIES.find((c) => c.dial === dial);
+}

package/apps/lib/components/FormBuilder/fields/index.ts

@@ -0,0 +1,25 @@
+export {
+  TextField,
+  EmailField,
+  PasswordField,
+  NumberField,
+  CurrencyField,
+  TextareaField,
+} from "./TextField";
+export { SelectField, SearchableSelectField, MultiSelectField } from "./SelectField";
+export { CheckboxField, RadioCardsField } from "./ChoiceFields";
+export { RadioListField, CheckboxGroupField } from "./OptionListFields";
+export { SwitchBoxField } from "./SwitchBoxField";
+export { DateField } from "./DateField";
+export { OtpField } from "./OtpField";
+export { TreeSelectField } from "./TreeSelectField";
+export { SliderField } from "./SliderField";
+export { ColorField } from "./ColorField";
+export { SignatureField } from "./SignatureField";
+export { PhoneField } from "./PhoneField";
+export { FieldArray } from "./FieldArray";
+export { TableField } from "./TableField";
+export { FileField } from "./FileField";
+export { RichTextField } from "./RichTextEditorField";
+export { CustomField } from "./CustomField";
+export { FieldShell } from "./FieldShell";