@developer_tribe/react-builder 1.2.42 → 1.2.44-test.1

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} />;
+}

package/src/build-components/FormProvider/FormProviderProps.generated.ts

@@ -0,0 +1,72 @@
+/* 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 FormProviderStyleGenerated {
+  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 FormProviderPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: FormProviderStyleGenerated;
+    scrollable?: boolean;
+    testID?: string;
+    defaultValues?: string;
+    validationErrorMessageKey?: string;
+  };
+}
+
+export interface FormProviderComponentProps {
+  node: NodeData<FormProviderPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,33 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "FormProvider",
+    "title": "FormProvider",
+    "description": "Form context provider using react-hook-form. Children (FormCheckbox, FormSubmitButton) use this context for validation and submit.",
+    "children": "node",
+    "extends": "View",
+    "attributes": {
+      "defaultValues": "string",
+      "validationErrorMessageKey": "string"
+    }
+  },
+  "meta": {
+    "desiredParent": ["root", "all"],
+    "label": "Form Provider",
+    "description": "Wraps form fields and submit button; provides validation state and handleSubmit.",
+    "attributes": {
+      "defaultValues": {
+        "label": "Default values",
+        "description": "Optional JSON string of field names to initial values (e.g. {\"termsAccepted\": false}).",
+        "category": "other",
+        "sort": 1
+      },
+      "validationErrorMessageKey": {
+        "label": "Validation error message key",
+        "description": "Localization key shown when submit is attempted with invalid form (e.g. view.terms.error.must_accept).",
+        "category": "other",
+        "sort": 2
+      }
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+import React, { useContext } from 'react';
+import type { FormSubmitButtonComponentProps } from './FormSubmitButtonProps.generated';
+import { formContext } from '../FormProvider/FormProvider';
+import { SystemButton } from '../SystemButton/SystemButton';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { useMockOSContext, useMockPermission } from '../../mockOS';
+import { usePlacementButtonEvents } from '../SystemButton/usePlacementButtonEvents';
+import { useGlobalNavigation } from '../GlobalProvider/useGlobalNavigation';
+
+export function FormSubmitButton({ node }: FormSubmitButtonComponentProps) {
+  useLogRender('FormSubmitButton');
+  node = useNode(node);
+  const ctx = useContext(formContext);
+  const context = useMockOSContext();
+  const mockPermissionManager = useMockPermission(context);
+  const globalNavigate = useGlobalNavigation();
+  const attrs = node.attributes;
+
+  const runPlacementEvents = usePlacementButtonEvents(attrs?.events, {
+    context,
+    requestPermission: (permission) =>
+      mockPermissionManager.requestPermission(permission),
+    globalNavigate,
+  });
+
+  const validationRequired =
+    (attrs as { validationRequired?: boolean })?.validationRequired === true;
+  const disableIfUnvalidated =
+    (attrs as { disableIfUnvalidated?: boolean })?.disableIfUnvalidated ===
+    true;
+  const disabled =
+    validationRequired && disableIfUnvalidated && ctx !== null && !ctx.isValid;
+
+  const handleClick =
+    ctx !== null
+      ? ctx.handleSubmit(() => {
+          runPlacementEvents();
+        })
+      : runPlacementEvents;
+
+  return (
+    <SystemButton
+      node={node as Parameters<typeof SystemButton>[0]['node']}
+      onClick={ctx !== null ? handleClick : undefined}
+      disabled={ctx !== null ? disabled : false}
+    />
+  );
+}

package/src/build-components/FormSubmitButton/FormSubmitButtonProps.generated.ts

@@ -0,0 +1,91 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type TypeOptionType = 'Permission' | 'Navigate' | 'Placement';
+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 EventObjectGenerated {
+  type?: TypeOptionType;
+  permission?: string;
+  navigate_to?: string;
+  targetIndex?: number;
+  placementKey?: string;
+}
+
+export interface FormSubmitButtonStyleGenerated {
+  color?: string;
+  backgroundColor?: string;
+  height?: string;
+  borderRadius?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  fontFamily?: 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;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface FormSubmitButtonPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: FormSubmitButtonStyleGenerated;
+    labelKey?: string;
+    events?: EventObjectGenerated[];
+    testID?: string;
+    adjustsFontSizeToFit?: boolean;
+    numberOfLines?: number;
+    translateCounter?: number;
+    scrollable?: boolean;
+    disableIfUnvalidated?: boolean;
+    validationRequired?: boolean;
+  };
+}
+
+export interface FormSubmitButtonComponentProps {
+  node: NodeData<FormSubmitButtonPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,33 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "FormSubmitButton",
+    "title": "FormSubmitButton",
+    "description": "Submit button bound to FormProvider; can disable when form is invalid.",
+    "children": "never",
+    "extends": "SystemButton",
+    "attributes": {
+      "disableIfUnvalidated": "boolean",
+      "validationRequired": "boolean"
+    }
+  },
+  "meta": {
+    "desiredParent": [">FormProvider"],
+    "label": "Form Submit Button",
+    "description": "Submit button that runs form validation; when validationRequired and disableIfUnvalidated, disabled until form is valid.",
+    "attributes": {
+      "disableIfUnvalidated": {
+        "label": "Disable if unvalidated",
+        "description": "When true (and validationRequired is true), button is disabled until form is valid.",
+        "category": "other",
+        "sort": 4
+      },
+      "validationRequired": {
+        "label": "Validation required",
+        "description": "When true, button uses form validation state (e.g. for disableIfUnvalidated).",
+        "category": "other",
+        "sort": 5
+      }
+    }
+  }
+}

package/src/build-components/GlobalProvider/GlobalContext.ts

@@ -0,0 +1,48 @@
+import { createContext, useContext } from 'react';
+import type { NodeData } from '../../types/Node';
+
+/** Supported transition animations when navigating to this page (platform-style names).
+ *  rn stack transition animations
+ */
+export const GLOBAL_PAGE_ANIMATIONS = [
+  'default',
+  'fade',
+  'fade_from_bottom',
+  'fade_from_right',
+  'reveal_from_bottom',
+  'scale_from_center',
+  'slide_from_right',
+  'slide_from_left',
+  'slide_from_bottom',
+  'none',
+] as const;
+
+export type GlobalPageAnimationType = (typeof GLOBAL_PAGE_ANIMATIONS)[number];
+
+export interface GlobalPage {
+  key: string;
+  node: NodeData;
+  /** Condition key: this page is skipped when conditions[skipIf] === true */
+  skipIf?: string;
+  /** Optional transition animation when this page is shown (push/enter). */
+  animation?: string;
+  index: number;
+}
+
+export interface GlobalContextValue {
+  currentPageKey: string;
+  pages: GlobalPage[];
+  pageStack: string[];
+  navigate: (key: string) => void;
+  goNext: () => void;
+  goBack: () => boolean;
+  /** Runtime boolean conditions (e.g. termsAccepted) */
+  conditions: Record<string, boolean>;
+  setCondition: (key: string, value: boolean) => void;
+}
+
+export const GlobalContext = createContext<GlobalContextValue | null>(null);
+
+export function useGlobalContext(): GlobalContextValue | null {
+  return useContext(GlobalContext);
+}

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

@@ -0,0 +1,191 @@
+import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
+import type { GlobalProviderComponentProps } from './GlobalProviderProps.generated';
+import type { GlobalContextValue, GlobalPage } from './GlobalContext';
+import { GlobalContext } from './GlobalContext';
+import {
+  buildPages,
+  loadProgress,
+  normalizeSkipConditions,
+  persistProgress,
+  resolveEffectivePage,
+} from './globalProviderUtils';
+import RenderNode from '../RenderNode.generated';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import type { NodeData } from '../../types/Node';
+
+function GlobalProvider({ node }: GlobalProviderComponentProps) {
+  useLogRender('GlobalProvider');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'GlobalProvider';
+  const attributeKey = node.key ?? generatedId;
+  const attrs = node.attributes;
+  const shouldPersist = attrs?.persistProgress === true;
+
+  const childNodes = useMemo((): NodeData[] => {
+    const raw = node.children;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw as NodeData[];
+    return [raw as NodeData];
+  }, [node.children]);
+
+  // skipConditions is stored as SkipConditionEntry[] in the schema (array of
+  // {pageKey, conditionKey} objects). Normalize to a lookup map here.
+  const skipConditions = useMemo(
+    () => normalizeSkipConditions(attrs?.skipConditions),
+    [attrs?.skipConditions],
+  );
+
+  const pages = useMemo(
+    () => buildPages(childNodes, skipConditions),
+    [childNodes, skipConditions],
+  );
+
+  const storageKey = attributeKey;
+
+  const [conditions, setConditions] = useState<Record<string, boolean>>(() => {
+    if (shouldPersist) {
+      return loadProgress(storageKey)?.conditions ?? {};
+    }
+    return {};
+  });
+
+  const [pageStack, setPageStack] = useState<string[]>(() => {
+    const firstEffective = (() => {
+      if (shouldPersist) {
+        const saved = loadProgress(storageKey);
+        if (saved?.currentPageKey) return saved.currentPageKey;
+      }
+      const requestedKey =
+        typeof attrs?.initialPage === 'string'
+          ? attrs.initialPage
+          : (pages[0]?.key ?? '');
+      return resolveEffectivePage(requestedKey, pages, {});
+    })();
+    return firstEffective ? [firstEffective] : [];
+  });
+
+  const currentPageKey = pageStack[pageStack.length - 1] ?? pages[0]?.key ?? '';
+
+  // Keep ref of latest conditions for persist calls in callbacks
+  const conditionsRef = useRef(conditions);
+  conditionsRef.current = conditions;
+
+  const setCondition = useCallback(
+    (key: string, value: boolean) => {
+      setConditions((prev) => {
+        const next = { ...prev, [key]: value };
+        if (shouldPersist) {
+          const currentKey = pageStack[pageStack.length - 1] ?? '';
+          persistProgress(storageKey, currentKey, next);
+        }
+        return next;
+      });
+    },
+    [shouldPersist, storageKey, pageStack],
+  );
+
+  const navigate = useCallback(
+    (key: string) => {
+      const effective = resolveEffectivePage(key, pages, conditionsRef.current);
+      setPageStack((prev) => {
+        const last = prev[prev.length - 1];
+        if (last === effective) return prev;
+        const next = [...prev, effective];
+        if (shouldPersist) {
+          persistProgress(storageKey, effective, conditionsRef.current);
+        }
+        return next;
+      });
+    },
+    [pages, shouldPersist, storageKey],
+  );
+
+  const goNext = useCallback(() => {
+    const currentIdx = pages.findIndex((p) => p.key === currentPageKey);
+    if (currentIdx === -1 || currentIdx >= pages.length - 1) return;
+    const nextPage = pages[currentIdx + 1];
+    if (!nextPage) return;
+    navigate(nextPage.key);
+  }, [pages, currentPageKey, navigate]);
+
+  const goBack = useCallback((): boolean => {
+    if (pageStack.length <= 1) return false;
+    setPageStack((prev) => {
+      const next = prev.slice(0, -1);
+      const prevKey = next[next.length - 1] ?? '';
+      if (shouldPersist) {
+        persistProgress(storageKey, prevKey, conditionsRef.current);
+      }
+      return next;
+    });
+    return true;
+  }, [pageStack.length, shouldPersist, storageKey]);
+
+  const contextValue = useMemo<GlobalContextValue>(
+    () => ({
+      currentPageKey,
+      pages,
+      pageStack,
+      navigate,
+      goNext,
+      goBack,
+      conditions,
+      setCondition,
+    }),
+    [
+      currentPageKey,
+      pages,
+      pageStack,
+      navigate,
+      goNext,
+      goBack,
+      conditions,
+      setCondition,
+    ],
+  );
+
+  const activePage: GlobalPage | undefined = pages.find(
+    (p) => p.key === currentPageKey,
+  );
+
+  const animationClass = (() => {
+    const a = activePage?.animation;
+    if (a === 'default') return 'global-provider-page--default';
+    if (!a || a === 'none') return ''; // No modifier: no animation at all
+    return `global-provider-page--${a}`;
+  })();
+
+  return (
+    <GlobalContext.Provider value={contextValue}>
+      <div
+        attribute-name={attributeName}
+        attribute-key={attributeKey}
+        {...(attrs?.testID ? { 'data-testid': attrs.testID } : {})}
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+        }}
+      >
+        {activePage ? (
+          <div
+            key={activePage.key}
+            className={
+              animationClass
+                ? `global-provider-page ${animationClass}`
+                : 'global-provider-page'
+            }
+          >
+            <RenderNode node={activePage.node} />
+          </div>
+        ) : null}
+      </div>
+    </GlobalContext.Provider>
+  );
+}
+
+export default React.memo(GlobalProvider);