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

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,52 @@
+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';
+import { useGlobalContext } from '../GlobalProvider/GlobalContext';
+
+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 globalCtx = useGlobalContext();
+  const attrs = node.attributes;
+
+  const runPlacementEvents = usePlacementButtonEvents(attrs?.events, {
+    context,
+    requestPermission: (permission) =>
+      mockPermissionManager.requestPermission(permission),
+    globalNavigate,
+    setCondition: globalCtx?.setCondition,
+  });
+
+  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,114 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type TypeOptionType =
+  | 'Permission'
+  | 'Navigate'
+  | 'Placement'
+  | 'SetCondition';
+export type PermissionOptionType =
+  | 'notification'
+  | 'camera'
+  | 'microphone'
+  | 'location'
+  | 'photos'
+  | 'contacts'
+  | 'att'
+  | 'rating'
+  | 'GDPR';
+export type PlacementKeyOptionType =
+  | 'terms'
+  | 'onboard'
+  | 'paywall'
+  | 'subscription'
+  | 'home';
+export type ConditionKeyOptionType = 'termsAccepted';
+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?: PermissionOptionType;
+  navigate_to?: string;
+  targetIndex?: number;
+  placementKey?: PlacementKeyOptionType;
+  conditionKey?: ConditionKeyOptionType;
+  value?: boolean;
+}
+
+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,51 @@
+import React from 'react';
+import type { GlobalProviderComponentProps } from './GlobalProviderProps.generated';
+import { GlobalContext } from './GlobalContext';
+import { useGlobalProviderLogic } from './useGlobalProviderLogic';
+import RenderNode from '../RenderNode.generated';
+import { useLogRender } from '../../utils/useLogRender';
+
+function GlobalProvider({ node }: GlobalProviderComponentProps) {
+  useLogRender('GlobalProvider');
+
+  const { attributeName, attributeKey, attrs, activePage, contextValue } =
+    useGlobalProviderLogic({ node });
+
+  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);

package/src/build-components/GlobalProvider/GlobalProviderProps.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 SkipConditionEntryGenerated {
+  pageKey?: string;
+  conditionKey?: string;
+}
+
+export interface GlobalProviderStyleGenerated {
+  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 GlobalProviderPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: GlobalProviderStyleGenerated;
+    scrollable?: boolean;
+    testID?: string;
+    initialPage?: string;
+    persistProgress?: boolean;
+    skipConditions?: SkipConditionEntryGenerated[];
+  };
+}
+
+export interface GlobalProviderComponentProps {
+  node: NodeData<GlobalProviderPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,204 @@
+import type { NodeData } from '../../types/Node';
+import type { GlobalPage } from './GlobalContext';
+
+/** Maps node type to a canonical page key when no explicit pageKey attribute is provided. */
+const TYPE_KEY_MAP: Record<string, string> = {
+  TermsProvider: 'terms',
+  OnboardProvider: 'onboard',
+  PaywallProvider: 'paywall',
+  FormProvider: 'form',
+  CarouselProvider: 'carousel',
+};
+
+/**
+ * Derives a stable and unique page key for a child node.
+ * Priority: node.key → TYPE_KEY_MAP → "${type}-${index}"
+ */
+export function derivePageKey(
+  node: NodeData,
+  index: number,
+  existingKeys: Set<string>,
+): string {
+  let baseKey = '';
+  if (typeof node.key === 'string' && node.key.trim()) {
+    baseKey = node.key.trim();
+  } else {
+    baseKey = TYPE_KEY_MAP[node.type] || node.type?.toLowerCase?.() || 'page';
+  }
+
+  let finalKey = baseKey;
+  let counter = 1;
+
+  // Ensure uniqueness among siblings
+  while (existingKeys.has(finalKey)) {
+    finalKey = `${baseKey}-${index + counter}`;
+    counter++;
+  }
+
+  existingKeys.add(finalKey);
+  return finalKey;
+}
+
+/** Runtime shape of a SkipConditionEntry (mirrors the types block in pattern.json). */
+export interface SkipConditionEntry {
+  pageKey: string;
+  conditionKey: string;
+}
+
+/**
+ * Converts SkipConditionEntry[] (from pattern schema) to a lookup map for fast access.
+ */
+export function normalizeSkipConditions(raw: unknown): Record<string, string> {
+  if (!Array.isArray(raw)) return {};
+  const result: Record<string, string> = {};
+  for (const entry of raw) {
+    if (
+      entry &&
+      typeof entry === 'object' &&
+      typeof (entry as SkipConditionEntry).pageKey === 'string' &&
+      typeof (entry as SkipConditionEntry).conditionKey === 'string'
+    ) {
+      result[(entry as SkipConditionEntry).pageKey] = (
+        entry as SkipConditionEntry
+      ).conditionKey;
+    }
+  }
+  return result;
+}
+
+/**
+ * Builds the page list for GlobalProvider.
+ */
+export function buildPages(
+  children: NodeData[],
+  skipConditions: Record<string, string> = {},
+): GlobalPage[] {
+  const existingKeys = new Set<string>();
+  return children.map((node, index) => {
+    const key = derivePageKey(node, index, existingKeys);
+    const skipIf = skipConditions[key] ?? undefined;
+    const animation =
+      typeof (node.attributes as Record<string, unknown>)?.animation ===
+      'string'
+        ? (node.attributes as Record<string, string>).animation
+        : undefined;
+    return {
+      key,
+      node,
+      skipIf,
+      animation,
+      index,
+    };
+  });
+}
+
+/** Returns the first non-skipped page key, starting from the requested key. */
+export function resolveEffectivePage(
+  targetKey: string,
+  pages: GlobalPage[],
+  conditions: Record<string, boolean>,
+): string | null {
+  const targetIdx = pages.findIndex((p) => p.key === targetKey);
+  if (targetIdx === -1) {
+    // If target not found, start from the first non-skipped page
+    return resolveFirstNonSkippedPage(pages, conditions);
+  }
+
+  // Walk forward from target, skipping pages whose condition is met
+  for (let i = targetIdx; i < pages.length; i++) {
+    const page = pages[i];
+    if (!page) break;
+    if (page.skipIf && conditions[page.skipIf] === true) {
+      continue;
+    }
+    return page.key;
+  }
+
+  // If all remaining pages are skipped, return null instead of falling back to the last page.
+  // This allows the caller to handle the "no available pages" state explicitly.
+  return null;
+}
+
+function resolveFirstNonSkippedPage(
+  pages: GlobalPage[],
+  conditions: Record<string, boolean>,
+): string | null {
+  for (const page of pages) {
+    if (!(page.skipIf && conditions[page.skipIf] === true)) {
+      return page.key;
+    }
+  }
+  return null;
+}
+
+const STORAGE_KEY_PREFIX = 'global-provider-progress';
+
+/**
+ * Internal storage abstraction. In a real RN environment, this would be swapped
+ * for AsyncStorage. For now, it defaults to localStorage with safe checks.
+ */
+const storage = {
+  getItem: (key: string) => {
+    try {
+      return typeof localStorage !== 'undefined'
+        ? localStorage.getItem(key)
+        : null;
+    } catch {
+      return null;
+    }
+  },
+  setItem: (key: string, value: string) => {
+    try {
+      if (typeof localStorage !== 'undefined') localStorage.setItem(key, value);
+    } catch {
+      // ignore
+    }
+  },
+  removeItem: (key: string) => {
+    try {
+      if (typeof localStorage !== 'undefined') localStorage.removeItem(key);
+    } catch {
+      // ignore
+    }
+  },
+};
+
+export function persistProgress(
+  storageKey: string,
+  currentPageKey: string,
+  conditions: Record<string, boolean>,
+): void {
+  storage.setItem(
+    `${STORAGE_KEY_PREFIX}-${storageKey}`,
+    JSON.stringify({ currentPageKey, conditions }),
+  );
+}
+
+export function loadProgress(storageKey: string): {
+  currentPageKey: string;
+  conditions: Record<string, boolean>;
+} | null {
+  const raw = storage.getItem(`${STORAGE_KEY_PREFIX}-${storageKey}`);
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (
+      parsed &&
+      typeof parsed === 'object' &&
+      !Array.isArray(parsed) &&
+      typeof (parsed as Record<string, unknown>).currentPageKey === 'string'
+    ) {
+      return parsed as {
+        currentPageKey: string;
+        conditions: Record<string, boolean>;
+      };
+    }
+  } catch {
+    // parse error
+  }
+  return null;
+}
+
+export function clearProgress(storageKey: string): void {
+  storage.removeItem(`${STORAGE_KEY_PREFIX}-${storageKey}`);
+}