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

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

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,163 @@
+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 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.
+ */
+export function derivePageKey(node: NodeData, index: number): string {
+  if (typeof node.key === 'string' && node.key.trim()) {
+    return node.key.trim();
+  }
+  const mapped = TYPE_KEY_MAP[node.type];
+  if (mapped) {
+    return mapped;
+  }
+  const typeSlug = node.type?.toLowerCase?.() ?? 'page';
+  return `${typeSlug}-${index}`;
+}
+
+/** 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.
+ * 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 {};
+  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.
+ *
+ * @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[] {
+  return children.map((node, index) => {
+    const key = derivePageKey(node, index);
+    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 {
+  const targetIdx = pages.findIndex((p) => p.key === targetKey);
+  if (targetIdx === -1) {
+    return pages[0]?.key ?? targetKey;
+  }
+
+  // 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;
+  }
+
+  // All remaining pages are skipped — return last page key anyway
+  return pages[pages.length - 1]?.key ?? targetKey;
+}
+
+const STORAGE_KEY_PREFIX = 'global-provider-progress';
+
+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.)
+  }
+}
+
+export function loadProgress(storageKey: string): {
+  currentPageKey: string;
+  conditions: Record<string, boolean>;
+} | null {
+  try {
+    const raw = localStorage.getItem(`${STORAGE_KEY_PREFIX}-${storageKey}`);
+    if (!raw) return null;
+    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 {
+  try {
+    localStorage.removeItem(`${STORAGE_KEY_PREFIX}-${storageKey}`);
+  } catch {
+    // localStorage unavailable
+  }
+}

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

@@ -0,0 +1,55 @@
+{
+  "schemaVersion": 2,
+  "types": {
+    "SkipConditionEntry": {
+      "pageKey": "string",
+      "conditionKey": "string"
+    }
+  },
+  "pattern": {
+    "type": "GlobalProvider",
+    "title": "title",
+    "description": "description",
+    "children": "node",
+    "extends": "View",
+    "attributes": {
+      "initialPage": "string",
+      "persistProgress": "boolean",
+      "skipConditions": "SkipConditionEntry[]"
+    }
+  },
+  "defaults": {
+    "styles": {
+      "flex": 1
+    }
+  },
+  "meta": {
+    "desiredParent": ["root"],
+    "label": "Global Provider",
+    "description": "Top-level provider that manages multi-page flow (Terms → Onboard → Paywall). Each direct child is treated as a page.",
+    "attributes": {
+      "initialPage": {
+        "label": "Initial Page Key",
+        "description": "The page key to show first. Defaults to the first child.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "persistProgress": {
+        "label": "Persist Progress",
+        "description": "Save current page and conditions to localStorage so the user continues from where they left off.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "skipConditions": {
+        "label": "Skip Conditions",
+        "description": "List of page skip rules. Each entry maps a pageKey to a conditionKey: when conditions[conditionKey] is true, that page is skipped on navigate.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 3
+      }
+    },
+    "styles": {}
+  }
+}

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

@@ -0,0 +1,70 @@
+import { useCallback } from 'react';
+import { useGlobalContext } from './GlobalContext';
+import { useMockOSContext } from '../../mockOS/context/MockOSContextBase';
+import type { RouteType } from '../../mockOS/context/MockOSContextBase';
+
+/**
+ * Maps route/placement aliases to their canonical GlobalProvider page keys.
+ *
+ * Add entries here when a new alias should resolve to an existing page key.
+ * Keys are the incoming target strings (from JSON events / usePlacementButtonEvents).
+ * Values are the canonical page key that GlobalContext.navigate() will receive.
+ *
+ * Exported so other modules (e.g. a navigation-flow visualiser) can inspect
+ * which aliases exist without duplicating this logic.
+ */
+export const GLOBAL_ROUTE_ALIASES: Record<string, string> = {
+  subscription: 'paywall',
+  paywall: 'paywall',
+  onboard: 'onboard',
+  terms: 'terms',
+  home: 'home',
+};
+
+/**
+ * Returns a navigate function that first attempts to route within GlobalContext
+ * (when a GlobalProvider is active), then falls back to MockOSContext navigation.
+ *
+ * Used by SystemButton and OnboardButton so that events defined in JSON work
+ * transparently whether rendered inside a GlobalProvider or standalone.
+ */
+export function useGlobalNavigation(): (target: string) => boolean {
+  const globalCtx = useGlobalContext();
+  const mockOS = useMockOSContext();
+
+  return useCallback(
+    (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;
+        }
+
+        // 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);
+        return true;
+      }
+
+      return false;
+    },
+    [globalCtx, mockOS],
+  );
+}