@developer_tribe/react-builder 1.2.43 → 1.2.44-test.2

package/src/build-components/Checkbox/CheckboxProps.generated.ts

@@ -0,0 +1,84 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface CheckboxStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: string;
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: number;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+  checkIconSize?: number;
+  checkIconStrokeWidth?: number;
+}
+
+export interface CheckboxPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: CheckboxStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    numberOfLines?: number;
+    translateCounter?: number;
+    scrollable?: boolean;
+    testID?: string;
+    checked?: boolean;
+    label?: string;
+    checkedColor?: string;
+    syncTermsAccepted?: boolean;
+  };
+}
+
+export interface CheckboxComponentProps {
+  node: NodeData<CheckboxPropsGenerated['attributes']>;
+}

package/src/build-components/Checkbox/pattern.json

@@ -0,0 +1,83 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "Checkbox",
+    "title": "Checkbox",
+    "description": "A standard checkbox component.",
+    "children": "never",
+    "extends": "Text",
+    "attributes": {
+      "checked": "boolean",
+      "label": "string",
+      "checkedColor": "color",
+      "syncTermsAccepted": "boolean",
+      "styles": {
+        "borderRadius": "number",
+        "checkIconSize": "number",
+        "checkIconStrokeWidth": "number"
+      }
+    },
+    "defaults": {
+      "checked": false,
+      "label": "view.terms.checkbox.label",
+      "styles": {
+        "borderRadius": 4,
+        "checkIconSize": 12,
+        "checkIconStrokeWidth": 1.7,
+        "flexDirection": "row"
+      },
+      "checkedColor": "THEME_COLORS.CHECKBOX_ACTIVE_COLOR"
+    }
+  },
+  "meta": {
+    "label": "Checkbox",
+    "description": "A checkbox with an optional label.",
+    "attributes": {
+      "checked": {
+        "label": "Checked",
+        "description": "Whether the checkbox is checked by default.",
+        "category": "other",
+        "sort": 1
+      },
+      "label": {
+        "label": "Label",
+        "description": "The text label next to the checkbox.",
+        "category": "other",
+        "sort": 2
+      },
+      "checkedColor": {
+        "label": "Checked color",
+        "description": "The color of the checkbox when checked.",
+        "category": "style",
+        "sort": 3
+      },
+      "styles": {
+        "width": {
+          "label": "Box Width",
+          "description": "Width of the checkbox box (px).",
+          "category": "style"
+        },
+        "height": {
+          "label": "Box Height",
+          "description": "Height of the checkbox box (px).",
+          "category": "style"
+        },
+        "borderRadius": {
+          "label": "Box Border Radius",
+          "description": "Border radius of the checkbox box (px).",
+          "category": "style"
+        },
+        "checkIconSize": {
+          "label": "Check Icon Size",
+          "description": "Size of the check icon inside the box (px).",
+          "category": "style"
+        },
+        "checkIconStrokeWidth": {
+          "label": "Check Icon Stroke Width",
+          "description": "Stroke width of the check icon inside the box.",
+          "category": "style"
+        }
+      }
+    }
+  }
+}

package/src/build-components/FormCheckbox/FormCheckbox.tsx

@@ -0,0 +1,108 @@
+import React, { useContext } from 'react';
+import { Controller } from 'react-hook-form';
+import type {
+  FieldValues,
+  Control,
+  ControllerRenderProps,
+} from 'react-hook-form';
+import type { FormCheckboxComponentProps } from './FormCheckboxProps.generated';
+import { formContext } from '../FormProvider/FormProvider';
+import { Checkbox } from '../Checkbox/Checkbox';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+
+/**
+ * Converts builder validation array to react-hook-form rules.
+ * Builder must send validation as key-value pairs; e.g. ['required'] or ['min', 2], ['max', 5].
+ * If 'min' or 'max' is the last element (no value following), that rule is skipped (no crash).
+ */
+function validationArrayToRules(validation: string[] | undefined): {
+  required?: boolean;
+  min?: number;
+  max?: number;
+} {
+  const rules: { required?: boolean; min?: number; max?: number } = {};
+  if (!Array.isArray(validation)) return rules;
+  if (validation.includes('required')) rules.required = true;
+  const minIdx = validation.indexOf('min');
+  if (minIdx >= 0) {
+    if (validation[minIdx + 1] != null) {
+      const minVal = Number(validation[minIdx + 1]);
+      if (Number.isFinite(minVal)) rules.min = minVal;
+      else {
+        console.warn(
+          '[FormCheckbox] validation "min" rule skipped: value must be a number.',
+          'Received:',
+          validation[minIdx + 1],
+          '— Expected e.g. ["min", 2].',
+        );
+      }
+    } else {
+      console.warn(
+        '[FormCheckbox] validation "min" rule skipped: no value after "min".',
+        'Expected e.g. ["min", 2], got:',
+        validation,
+      );
+    }
+  }
+  const maxIdx = validation.indexOf('max');
+  if (maxIdx >= 0) {
+    if (validation[maxIdx + 1] != null) {
+      const maxVal = Number(validation[maxIdx + 1]);
+      if (Number.isFinite(maxVal)) rules.max = maxVal;
+      else {
+        console.warn(
+          '[FormCheckbox] validation "max" rule skipped: value must be a number.',
+          'Received:',
+          validation[maxIdx + 1],
+          '— Expected e.g. ["max", 5].',
+        );
+      }
+    } else {
+      console.warn(
+        '[FormCheckbox] validation "max" rule skipped: no value after "max".',
+        'Expected e.g. ["max", 5], got:',
+        validation,
+      );
+    }
+  }
+  return rules;
+}
+
+/** FormCheckbox wraps Checkbox with RHF; UI and styling come from Checkbox. */
+// eslint-disable-next-line react/prop-types
+export function FormCheckbox({ node }: FormCheckboxComponentProps) {
+  useLogRender('FormCheckbox');
+  node = useNode(node);
+  const ctx = useContext(formContext);
+  // eslint-disable-next-line react/prop-types
+  const attrs = node?.attributes;
+  const name = attrs?.name as string | undefined;
+  const validation = attrs?.validation as string[] | undefined;
+
+  if (!ctx || !name) {
+    return <Checkbox node={node as Parameters<typeof Checkbox>[0]['node']} />;
+  }
+
+  const control = ctx.control as Control<FieldValues>;
+  const rules = validationArrayToRules(validation);
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({
+        field,
+      }: {
+        field: ControllerRenderProps<FieldValues, string>;
+      }) => (
+        <Checkbox
+          node={node as Parameters<typeof Checkbox>[0]['node']}
+          checked={Boolean(field.value)}
+          onCheckedChange={(value) => field.onChange(value)}
+        />
+      )}
+    />
+  );
+}

package/src/build-components/FormCheckbox/FormCheckboxProps.generated.ts

@@ -0,0 +1,86 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface FormCheckboxStyleGenerated {
+  borderRadius?: string;
+  checkIconSize?: number;
+  checkIconStrokeWidth?: number;
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: string;
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface FormCheckboxPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: FormCheckboxStyleGenerated;
+    checked?: boolean;
+    label?: string;
+    checkedColor?: string;
+    syncTermsAccepted?: boolean;
+    adjustsFontSizeToFit?: boolean;
+    numberOfLines?: number;
+    translateCounter?: number;
+    scrollable?: boolean;
+    testID?: string;
+    name?: string;
+    validation?: string[];
+  };
+}
+
+export interface FormCheckboxComponentProps {
+  node: NodeData<FormCheckboxPropsGenerated['attributes']>;
+}

package/src/build-components/FormCheckbox/pattern.json

@@ -0,0 +1,39 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "FormCheckbox",
+    "title": "FormCheckbox",
+    "description": "Checkbox bound to FormProvider; supports validation (required, min, max).",
+    "children": "never",
+    "extends": "Checkbox",
+    "attributes": {
+      "name": "string",
+      "validation": "string[]"
+    }
+  },
+  "defaults": {
+    "styles": {
+      "flexDirection": "row",
+      "alignItems": "center"
+    }
+  },
+  "meta": {
+    "desiredParent": [">FormProvider"],
+    "label": "Form Checkbox",
+    "description": "Checkbox registered with form context; use name for form field (e.g. termsAccepted).",
+    "attributes": {
+      "name": {
+        "label": "Field name",
+        "description": "Form field name for react-hook-form (e.g. termsAccepted).",
+        "category": "other",
+        "sort": 5
+      },
+      "validation": {
+        "label": "Validation",
+        "description": "Validation rules as key-value pairs: e.g. ['required'] or ['min', 2], ['max', 5]. Builder must send min/max with their value in the next array slot.",
+        "category": "other",
+        "sort": 6
+      }
+    }
+  }
+}

package/src/build-components/FormErrorText/FormErrorText.tsx

@@ -0,0 +1,34 @@
+import React, { useContext, useMemo } from 'react';
+import type { FormErrorTextComponentProps } from './FormErrorTextProps.generated';
+import { formContext } from '../FormProvider/FormProvider';
+import { Text } from '../Text/Text';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { useLocalize } from '../../hooks/useLocalize';
+
+/** Renders FormProvider globalError as Text when present; only valid inside FormProvider. */
+export function FormErrorText({ node }: FormErrorTextComponentProps) {
+  useLogRender('FormErrorText');
+  node = useNode(node);
+  const ctx = useContext(formContext);
+  const localize = useLocalize();
+
+  const displayMessage = useMemo(
+    () => (ctx?.globalError ? localize(ctx.globalError) : ''),
+    [ctx?.globalError, localize],
+  );
+
+  if (!ctx?.globalError || !displayMessage) return null;
+
+  const textNode = {
+    ...node,
+    type: 'Text',
+    children: displayMessage,
+  } as Parameters<typeof Text>[0]['node'];
+
+  return (
+    <div role="alert" aria-live="polite">
+      <Text node={textNode} />
+    </div>
+  );
+}

package/src/build-components/FormErrorText/FormErrorTextProps.generated.ts

@@ -0,0 +1,78 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface FormErrorTextStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: string;
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface FormErrorTextPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: FormErrorTextStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    numberOfLines?: number;
+    translateCounter?: number;
+    scrollable?: boolean;
+    testID?: string;
+  };
+}
+
+export interface FormErrorTextComponentProps {
+  node: NodeData<FormErrorTextPropsGenerated['attributes']>;
+}

package/src/build-components/FormErrorText/pattern.json

@@ -0,0 +1,21 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "FormErrorText",
+    "title": "FormErrorText",
+    "description": "Displays FormProvider global submit/async error as text. Only valid as child of FormProvider.",
+    "children": "never",
+    "extends": "Text"
+  },
+  "defaults": {
+    "styles": {
+      "color": "THEME_COLORS.FORM_ERROR_TEXT_COLOR",
+      "fontSize": "14@fs"
+    }
+  },
+  "meta": {
+    "desiredParent": [">FormProvider"],
+    "label": "Form Error Text",
+    "description": "Shows form global error (e.g. submit failure). Place inside FormProvider where the error should appear."
+  }
+}

package/src/build-components/FormProvider/FormProvider.tsx

@@ -0,0 +1,131 @@
+import React, { createContext, useCallback, useMemo, useState } from 'react';
+import { FormProvider as RHFFormProvider, useForm } from 'react-hook-form';
+import type { UseFormReturn } from 'react-hook-form';
+import type { FormProviderComponentProps } from './FormProviderProps.generated';
+import RenderNode from '../RenderNode.generated';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+
+export type FormContextValue = {
+  handleSubmit: (
+    callback: (data: Record<string, unknown>) => void | Promise<unknown>,
+  ) => (e?: React.BaseSyntheticEvent) => void;
+  isValid: boolean;
+  globalError: string | null;
+  control: UseFormReturn<Record<string, unknown>>['control'];
+};
+
+export const formContext = createContext<FormContextValue | null>(null);
+
+function parseDefaultValues(raw: string | undefined): Record<string, unknown> {
+  if (raw == null || typeof raw !== 'string' || raw.trim() === '') {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    return typeof parsed === 'object' &&
+      parsed !== null &&
+      !Array.isArray(parsed)
+      ? (parsed as Record<string, unknown>)
+      : {};
+  } catch (err) {
+    console.warn(
+      '[FormProvider] parseDefaultValues: invalid defaultValues JSON',
+      raw,
+      err,
+    );
+    return {};
+  }
+}
+
+function FormProviderInner({ node }: FormProviderComponentProps) {
+  useLogRender('FormProvider');
+  node = useNode(node);
+  const attrs = node.attributes;
+  const defaultValues = useMemo(
+    () => parseDefaultValues(attrs?.defaultValues as string | undefined),
+    [attrs?.defaultValues],
+  );
+
+  const form = useForm<Record<string, unknown>>({
+    defaultValues,
+    mode: 'onChange',
+  });
+
+  const [globalError, setGlobalError] = useState<string | null>(null);
+
+  const validationErrorKey =
+    (attrs?.validationErrorMessageKey as string | undefined) ??
+    'form.error.validation_required';
+
+  const handleSubmit = useCallback(
+    (callback: (data: Record<string, unknown>) => void | Promise<unknown>) => {
+      const onValid = (data: Record<string, unknown>) => {
+        setGlobalError(null);
+        try {
+          const result = callback(data);
+          const promise =
+            result !== undefined &&
+            result !== null &&
+            typeof (result as Promise<unknown>).then === 'function'
+              ? (result as Promise<unknown>)
+              : null;
+          if (promise) {
+            promise.catch((e: unknown) => {
+              setGlobalError(e instanceof Error ? e.message : String(e));
+              throw e;
+            });
+          }
+        } catch (e) {
+          setGlobalError(e instanceof Error ? e.message : String(e));
+          throw e;
+        }
+      };
+      const onInvalid = () => {
+        setGlobalError(validationErrorKey);
+      };
+      return form.handleSubmit(onValid, onInvalid);
+    },
+    [form, validationErrorKey],
+  );
+
+  const contextValue = useMemo<FormContextValue>(
+    () => ({
+      handleSubmit,
+      isValid: form.formState.isValid,
+      globalError,
+      control: form.control,
+    }),
+    [handleSubmit, form.formState.isValid, form.control, globalError],
+  );
+
+  const viewStyle = useExtractViewStyle(node);
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+  };
+
+  return (
+    <formContext.Provider value={contextValue}>
+      <RHFFormProvider {...form}>
+        <form
+          onSubmit={onSubmit}
+          style={viewStyle}
+          attribute-name={node.sourceType ?? node.type ?? 'FormProvider'}
+          attribute-key={node.key}
+        >
+          {node.children ? (
+            <RenderNode
+              node={node.children as Parameters<typeof RenderNode>[0]['node']}
+            />
+          ) : null}
+        </form>
+      </RHFFormProvider>
+    </formContext.Provider>
+  );
+}
+
+export function FormProvider(props: FormProviderComponentProps) {
+  return <FormProviderInner node={props.node} />;
+}