torch-glare 2.4.1 → 2.4.3

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";

package/apps/lib/components/FormBuilder/form-builder.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import * as React from "react";
+import { ReactNode } from "react";
+import { useForm, type FieldValues } from "react-hook-form";
+
+import { cn } from "../../utils/cn";
+import { Form } from "../Form";
+import { SectionBlock, type SectionColor } from "../SectionBlock";
+import { LoadingContext, DirectionContext, StepperContext, FormIdContext } from "./context";
+import { Header } from "./header";
+import type { FormBuilderRootProps } from "./types";
+import {
+  TextField,
+  EmailField,
+  PasswordField,
+  NumberField,
+  CurrencyField,
+  TextareaField,
+  SelectField,
+  SearchableSelectField,
+  MultiSelectField,
+  CheckboxField,
+  RadioCardsField,
+  RadioListField,
+  CheckboxGroupField,
+  SwitchBoxField,
+  DateField,
+  OtpField,
+  TreeSelectField,
+  SliderField,
+  ColorField,
+  SignatureField,
+  PhoneField,
+  FieldArray,
+  TableField,
+  FileField,
+  RichTextField,
+  CustomField,
+} from "./fields";
+import {
+  Stepper,
+  Step,
+  Back,
+  Next,
+  StepperNav,
+  StepSlot,
+  useStepperState,
+  isStepElement,
+  isStepperElement,
+} from "./stepper";
+import { SubmitButton } from "./submit";
+
+// ─── Section ─────────────────────────────────────────────────────────────────
+
+export interface SectionProps {
+  title?: ReactNode;
+  color?: SectionColor;
+  icon?: ReactNode;
+  children: ReactNode;
+}
+
+/** `FormBuilder.Section` — a titled Glare SectionBlock grouping fields. */
+function Section({ title, color, icon, children }: SectionProps) {
+  return (
+    <SectionBlock title={title} color={color} icon={icon}>
+      {children}
+    </SectionBlock>
+  );
+}
+
+function isHeaderElement(node: React.ReactNode): node is React.ReactElement {
+  return (
+    React.isValidElement(node) &&
+    (node.type as { __isFormHeader?: boolean })?.__isFormHeader === true
+  );
+}
+
+// ─── Root ────────────────────────────────────────────────────────────────────
+
+function FormBuilderRoot<T extends FieldValues = FieldValues>({
+  children,
+  id,
+  form: formProp,
+  onSubmit,
+  onInvalid,
+  resolver,
+  defaultValues,
+  values,
+  loading = false,
+  fieldDirection,
+  resetOnSuccess,
+  conclusion,
+  className,
+}: FormBuilderRootProps<T>) {
+  // Hooks can't be conditional, so always create one; `formProp` wins when given
+  // (the caller hoisted `useForm` to share values with something outside the form).
+  const ownForm = useForm<T>({ resolver, defaultValues, values });
+  const form = formProp ?? ownForm;
+  // Don't force a direction — left undefined, FieldSection uses its responsive `flexible`
+  // layout (stacked on small screens, two-column at `lg`). Only a caller-set `fieldDirection`
+  // (e.g. vertical inside a drawer) pins it.
+  const direction = fieldDirection;
+
+  const handleValid = async (v: T) => {
+    await onSubmit(v);
+    if (resetOnSuccess) form.reset();
+  };
+
+  // Split out a FormBuilder.Header (renders absolutely) and detect a Stepper child.
+  const childArray = React.Children.toArray(children);
+  const header = childArray.find(isHeaderElement);
+  const rest = childArray.filter((n) => !isHeaderElement(n));
+
+  const stepperEl = rest.find(isStepperElement);
+  const stepChildren = stepperEl ? React.Children.toArray(stepperEl.props.children) : [];
+  const steps = stepChildren.filter(isStepElement);
+  const stepExtras = stepChildren.filter((n) => !isStepElement(n));
+  const isStepper = !!stepperEl;
+
+  // Stepper state is lifted HERE so the nav can live in its own grid column, outside the
+  // `<form>`. Called unconditionally (inert when there are no steps) to keep hooks order stable.
+  const stepper = useStepperState(steps, form.trigger as Parameters<typeof useStepperState>[1]);
+
+  // The stepper nav is its own column beside the fields, inside the form surface.
+  const nav = isStepper ? <StepperNav /> : null;
+
+  // The fields the `<form>` wraps: the stepper's steps (+ any custom footer extras like
+  // Back/Next), or the plain children. The Submit itself lives outside the form (see FormRenderer).
+  const fields = isStepper ? (
+    <>
+      {steps.map((step, i) => (
+        <StepSlot key={i} index={i} active={i === stepper.currentStep}>
+          {step.props.children}
+        </StepSlot>
+      ))}
+      {stepExtras}
+    </>
+  ) : (
+    rest
+  );
+
+  // The fields column caps at 1200px and centers — as the middle column of the grid, and
+  // standalone.
+  const fieldsInner = (
+    <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4 px-[48px]">{fields}</div>
+  );
+
+  const formEl = (
+    <form id={id} className="w-full min-w-0" onSubmit={form.handleSubmit(handleValid, onInvalid)}>
+      {fieldsInner}
+    </form>
+  );
+
+  // Inside the form surface: the stepper rail beside the fields. Columns never wrap — the
+  // layout stays side-by-side at every screen size (the fields column shrinks instead).
+  const bodyInner = nav ? (
+    <div className="grid w-full grid-cols-[1fr_minmax(0,1100px)_1fr] gap-8">
+      {nav}
+      {formEl}
+      {/* Empty third column — balances the rail's gutter so the middle column is centred. */}
+      <div />
+    </div>
+  ) : (
+    formEl
+  );
+
+  const surface = header ? (
+    // Scroll shell: the absolute header floats over the scrollable body. No fixed height — it
+    // fills whatever the parent gives it (like the drawer's panel fills its tray) and the body
+    // scrolls internally.
+    <div className="relative isolate flex h-full w-full flex-col overflow-hidden rounded-2xl bg-background-presentation-body-primary">
+      {header}
+      <div className="relative z-[1] flex min-h-0 w-full flex-1 flex-col overflow-y-auto px-6 py-6 pt-[72px] scrollbar-hide">
+        {bodyInner}
+      </div>
+    </div>
+  ) : (
+    bodyInner
+  );
+
+  // The conclusion lives OUTSIDE the form surface — its own panel beside it, exactly like the
+  // drawer's tray (`FormDrawer` puts the conclusion next to the form panel with a 6px gutter).
+  // It never wraps below the form: the two stay side-by-side at every screen size.
+  const body = conclusion ? (
+    <div className="flex h-full flex-row items-stretch gap-[6px]">
+      <div className="min-h-0 min-w-0 flex-1">{surface}</div>
+      <div className="flex min-h-0">{conclusion}</div>
+    </div>
+  ) : (
+    surface
+  );
+
+  // `className` lands on the OUTERMOST element — the one a parent lays out (e.g. `flex-1 min-h-0`
+  // to fill a flex column). `h-full` fills a parent that has a definite height.
+  const outerClassName = cn("h-full w-full @container", className);
+
+  const tree = (
+    <Form {...form}>
+      <div className={outerClassName}>{body}</div>
+    </Form>
+  );
+
+  return (
+    <FormIdContext.Provider value={id}>
+      <LoadingContext.Provider value={loading}>
+        <DirectionContext.Provider value={direction}>
+          {isStepper ? (
+            <StepperContext.Provider value={stepper}>{tree}</StepperContext.Provider>
+          ) : (
+            tree
+          )}
+        </DirectionContext.Provider>
+      </LoadingContext.Provider>
+    </FormIdContext.Provider>
+  );
+}
+
+/**
+ * FormBuilder — a compound, composition-based form. Author a form as JSX:
+ *
+ * ```tsx
+ * <FormBuilder onSubmit={fn} resolver={r} defaultValues={d}>
+ *   <FormBuilder.Section title="Identity" color="Blue">
+ *     <FormBuilder.Text name="name" label="Name" required />
+ *   </FormBuilder.Section>
+ *   <FormBuilder.Submit>Save</FormBuilder.Submit>
+ * </FormBuilder>
+ * ```
+ *
+ * Steps are components (`FormBuilder.Stepper` + `FormBuilder.Step`). FormBuilder is
+ * drawer-unaware — to show a form in a drawer, wrap it in `FormRenderer`'s `FormDrawer`
+ * (or use `FormRenderer` with `display: "drawer"`).
+ */
+export const FormBuilder = Object.assign(FormBuilderRoot, {
+  // fields
+  Text: TextField,
+  Email: EmailField,
+  Password: PasswordField,
+  Number: NumberField,
+  Currency: CurrencyField,
+  Textarea: TextareaField,
+  Select: SelectField,
+  SearchableSelect: SearchableSelectField,
+  MultiSelect: MultiSelectField,
+  Tags: MultiSelectField,
+  RadioList: RadioListField,
+  RadioCards: RadioCardsField,
+  Checkbox: CheckboxField,
+  CheckboxGroup: CheckboxGroupField,
+  SwitchBox: SwitchBoxField,
+  Otp: OtpField,
+  TreeSelect: TreeSelectField,
+  Slider: SliderField,
+  Color: ColorField,
+  Signature: SignatureField,
+  Phone: PhoneField,
+  FieldArray: FieldArray,
+  Table: TableField,
+  Date: DateField,
+  DateRange: (props: Parameters<typeof DateField>[0]) => <DateField {...props} mode="range" />,
+  DateMultiple: (props: Parameters<typeof DateField>[0]) => (
+    <DateField {...props} mode="multiple" />
+  ),
+  DateTime: (props: Parameters<typeof DateField>[0]) => <DateField {...props} timePicker />,
+  File: FileField,
+  Image: (props: Parameters<typeof FileField>[0]) => <FileField {...props} image />,
+  RichText: RichTextField,
+  Custom: CustomField,
+  // layout
+  Section,
+  Header,
+  Submit: SubmitButton,
+  // stepper
+  Stepper,
+  Step,
+  Back,
+  Next,
+});