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

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

@@ -1,155 +1,15 @@
-import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
+import React 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 { useGlobalProviderLogic } from './useGlobalProviderLogic';
 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 { attributeName, attributeKey, attrs, activePage, contextValue } =
+    useGlobalProviderLogic({ node });
 
   const animationClass = (() => {
     const a = activePage?.animation;

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

@@ -11,22 +11,32 @@ const TYPE_KEY_MAP: Record<string, string> = {
 };
 
 /**
- * Derives a stable page key for a child node.
- * Priority: node.key (standard NodeData field) → TYPE_KEY_MAP → "${type}-{index}"
- *
- * Using node.key avoids adding unknown attributes to child components that
- * would fail builder validation.
+ * 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): string {
+export function derivePageKey(
+  node: NodeData,
+  index: number,
+  existingKeys: Set<string>,
+): string {
+  let baseKey = '';
   if (typeof node.key === 'string' && node.key.trim()) {
-    return node.key.trim();
+    baseKey = node.key.trim();
+  } else {
+    baseKey = TYPE_KEY_MAP[node.type] || node.type?.toLowerCase?.() || 'page';
   }
-  const mapped = TYPE_KEY_MAP[node.type];
-  if (mapped) {
-    return mapped;
+
+  let finalKey = baseKey;
+  let counter = 1;
+
+  // Ensure uniqueness among siblings
+  while (existingKeys.has(finalKey)) {
+    finalKey = `${baseKey}-${index + counter}`;
+    counter++;
   }
-  const typeSlug = node.type?.toLowerCase?.() ?? 'page';
-  return `${typeSlug}-${index}`;
+
+  existingKeys.add(finalKey);
+  return finalKey;
 }
 
 /** Runtime shape of a SkipConditionEntry (mirrors the types block in pattern.json). */
@@ -37,8 +47,6 @@ export interface SkipConditionEntry {
 
 /**
  * Converts SkipConditionEntry[] (from pattern schema) to a lookup map for fast access.
- * Array format is used in pattern.json because the schema system doesn't support
- * plain Record/object attribute types.
  */
 export function normalizeSkipConditions(raw: unknown): Record<string, string> {
   if (!Array.isArray(raw)) return {};
@@ -60,17 +68,14 @@ export function normalizeSkipConditions(raw: unknown): Record<string, string> {
 
 /**
  * Builds the page list for GlobalProvider.
- *
- * @param children - direct child nodes of GlobalProvider
- * @param skipConditions - lookup map of pageKey → conditionKey, already normalized
- *   from SkipConditionEntry[] via normalizeSkipConditions().
  */
 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);
+    const key = derivePageKey(node, index, existingKeys);
     const skipIf = skipConditions[key] ?? undefined;
     const animation =
       typeof (node.attributes as Record<string, unknown>)?.animation ===
@@ -92,10 +97,11 @@ export function resolveEffectivePage(
   targetKey: string,
   pages: GlobalPage[],
   conditions: Record<string, boolean>,
-): string {
+): string | null {
   const targetIdx = pages.findIndex((p) => p.key === targetKey);
   if (targetIdx === -1) {
-    return pages[0]?.key ?? targetKey;
+    // 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
@@ -108,34 +114,73 @@ export function resolveEffectivePage(
     return page.key;
   }
 
-  // All remaining pages are skipped — return last page key anyway
-  return pages[pages.length - 1]?.key ?? targetKey;
+  // 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 {
-  try {
-    localStorage.setItem(
-      `${STORAGE_KEY_PREFIX}-${storageKey}`,
-      JSON.stringify({ currentPageKey, conditions }),
-    );
-  } catch {
-    // localStorage unavailable (SSR, private browsing etc.)
-  }
+  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 raw = localStorage.getItem(`${STORAGE_KEY_PREFIX}-${storageKey}`);
-    if (!raw) return null;
     const parsed = JSON.parse(raw) as unknown;
     if (
       parsed &&
@@ -155,9 +200,5 @@ export function loadProgress(storageKey: string): {
 }
 
 export function clearProgress(storageKey: string): void {
-  try {
-    localStorage.removeItem(`${STORAGE_KEY_PREFIX}-${storageKey}`);
-  } catch {
-    // localStorage unavailable
-  }
+  storage.removeItem(`${STORAGE_KEY_PREFIX}-${storageKey}`);
 }

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

@@ -36,8 +36,6 @@ export function useGlobalNavigation(): (target: string) => boolean {
     (target: string): boolean => {
       if (globalCtx) {
         // Direct page key match
-        console.log('target', target);
-        console.log('globalCtx.pages', globalCtx.pages);
         if (globalCtx.pages.some((p) => p.key === target)) {
           globalCtx.navigate(target);
           return true;
@@ -45,18 +43,15 @@ export function useGlobalNavigation(): (target: string) => boolean {
 
         // Alias resolution: map incoming target to canonical page key
         const canonicalKey = GLOBAL_ROUTE_ALIASES[target];
-        console.log('canonicalKey', canonicalKey);
         if (
           canonicalKey &&
           globalCtx.pages.some((p) => p.key === canonicalKey)
         ) {
-          console.log('navigate to canonicalKey', canonicalKey);
           globalCtx.navigate(canonicalKey);
           return true;
         }
       }
 
-      console.log('fallback to MockOSContext', target);
       // Fallback: delegate to MockOSContext
       if (mockOS) {
         mockOS.navigation(target as RouteType);

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

@@ -0,0 +1,172 @@
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import type { GlobalContextValue } from './GlobalContext';
+import {
+  buildPages,
+  loadProgress,
+  normalizeSkipConditions,
+  persistProgress,
+  resolveEffectivePage,
+} from './globalProviderUtils';
+import useNode from '../useNode';
+import type { NodeData } from '../../types/Node';
+
+export interface UseGlobalProviderLogicOptions {
+  node: NodeData;
+}
+
+export function useGlobalProviderLogic({
+  node: rawNode,
+}: UseGlobalProviderLogicOptions) {
+  const node = useNode(rawNode);
+
+  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]);
+
+  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 saved = shouldPersist ? loadProgress(storageKey) : null;
+    const initialConditions = saved?.conditions ?? {};
+
+    const firstEffective = (() => {
+      if (saved?.currentPageKey) {
+        return resolveEffectivePage(
+          saved.currentPageKey,
+          pages,
+          initialConditions,
+        );
+      }
+
+      const requestedKey =
+        typeof attrs?.initialPage === 'string'
+          ? attrs.initialPage
+          : (pages[0]?.key ?? '');
+      return resolveEffectivePage(requestedKey, pages, initialConditions);
+    })();
+    return firstEffective ? [firstEffective] : [];
+  });
+
+  const currentPageKey = pageStack[pageStack.length - 1] ?? '';
+
+  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);
+      if (!effective) return;
+
+      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 activePage = useMemo(
+    () => pages.find((p) => p.key === currentPageKey),
+    [pages, currentPageKey],
+  );
+
+  const contextValue = useMemo<GlobalContextValue>(
+    () => ({
+      currentPageKey,
+      pages,
+      pageStack,
+      navigate,
+      goNext,
+      goBack,
+      conditions,
+      setCondition,
+    }),
+    [
+      currentPageKey,
+      pages,
+      pageStack,
+      navigate,
+      goNext,
+      goBack,
+      conditions,
+      setCondition,
+    ],
+  );
+
+  return {
+    node,
+    attributeName,
+    attributeKey,
+    attrs,
+    pages,
+    currentPageKey,
+    activePage,
+    contextValue,
+  };
+}

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

@@ -13,6 +13,7 @@ import {
   type PlacementEventObject,
 } from '../SystemButton/usePlacementButtonEvents';
 import { useGlobalNavigation } from '../GlobalProvider/useGlobalNavigation';
+import { useGlobalContext } from '../GlobalProvider/GlobalContext';
 
 export function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
@@ -23,6 +24,7 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
   const globalNavigate = useGlobalNavigation();
+  const globalCtx = useGlobalContext();
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
@@ -68,6 +70,7 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
       mockPermissionManager.requestPermission(permission),
     onNavigateWithoutPlacement,
     globalNavigate,
+    setCondition: globalCtx?.setCondition,
   });
 
   return (

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -2,7 +2,28 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TypeOptionType = 'Permission' | 'Navigate' | 'Placement';
+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 TestIDOptionType = 'onboardSkip' | 'onboardNext';
 export type AnimationOptionType =
   | 'simple-animation'
@@ -29,10 +50,12 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface EventObjectGenerated {
   type?: TypeOptionType;
-  permission?: string;
+  permission?: PermissionOptionType;
   navigate_to?: string;
   targetIndex?: number;
-  placementKey?: string;
+  placementKey?: PlacementKeyOptionType;
+  conditionKey?: ConditionKeyOptionType;
+  value?: boolean;
 }
 
 export interface OnboardButtonStyleGenerated {

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

@@ -32,11 +32,13 @@
   },
   "types": {
     "EventObject": {
-      "type": ["Permission", "Navigate", "Placement"],
-      "permission": "string",
+      "type": "$ref:event-constants.eventTypes",
+      "permission": "$ref:event-constants.permissionTypes",
       "navigate_to": "string",
       "targetIndex": "number",
-      "placementKey": "string"
+      "placementKey": "$ref:event-constants.placementKeys",
+      "conditionKey": "$ref:event-constants.conditionKeys",
+      "value": "boolean"
     }
   },
   "meta": {

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

@@ -9,6 +9,7 @@ import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
 import { usePlacementButtonEvents } from './usePlacementButtonEvents';
 import { useGlobalNavigation } from '../GlobalProvider/useGlobalNavigation';
+import { useGlobalContext } from '../GlobalProvider/GlobalContext';
 
 export type SystemButtonOptionalProps = {
   onClick?: () => void;
@@ -26,6 +27,7 @@ export function SystemButton({
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
   const globalNavigate = useGlobalNavigation();
+  const globalCtx = useGlobalContext();
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
@@ -40,6 +42,7 @@ export function SystemButton({
     requestPermission: (permission) =>
       mockPermissionManager.requestPermission(permission),
     globalNavigate,
+    setCondition: globalCtx?.setCondition,
   });
 
   const handleClick = onClickProp ?? placementClick;

package/src/build-components/SystemButton/SystemButtonProps.generated.ts

@@ -2,7 +2,28 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TypeOptionType = 'Permission' | 'Navigate' | 'Placement';
+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 =
@@ -22,10 +43,12 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface EventObjectGenerated {
   type?: TypeOptionType;
-  permission?: string;
+  permission?: PermissionOptionType;
   navigate_to?: string;
   targetIndex?: number;
-  placementKey?: string;
+  placementKey?: PlacementKeyOptionType;
+  conditionKey?: ConditionKeyOptionType;
+  value?: boolean;
 }
 
 export interface SystemButtonStyleGenerated {