@developer_tribe/react-builder 1.2.15 → 1.2.18

package/src/build-components/Text/TextProps.generated.ts

@@ -64,9 +64,9 @@ export interface TextPropsGenerated {
   child: string;
   attributes: {
     style?: TextStyleGenerated;
+    scrollable?: boolean;
     title?: string;
     description?: string;
-    scrollable?: boolean;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
   };

package/src/build-components/View/ViewProps.generated.ts

@@ -58,8 +58,6 @@ export interface ViewPropsGenerated {
   child: string;
   attributes: {
     style?: ViewStyleGenerated;
-    title?: string;
-    description?: string;
     scrollable?: boolean;
   };
 }

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

@@ -4,8 +4,6 @@
     "type": "View",
     "children": "node",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "scrollable": "boolean",
       "style": {
         "flexDirection": ["row", "column"],

package/src/build-components/patterns.generated.ts

@@ -466,8 +466,6 @@ export const patterns = [
       type: 'BackgroundImage',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -517,6 +515,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         src: 'string',
         resizeMode: ['cover', 'contain', 'stretch', 'center'],
       },
@@ -871,8 +871,6 @@ export const patterns = [
       type: 'Button',
       children: 'string',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -937,6 +935,8 @@ export const patterns = [
             '900',
           ],
         },
+        title: 'title',
+        description: 'description',
       },
     },
     meta: {
@@ -1281,8 +1281,6 @@ export const patterns = [
       type: 'Carousel',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -1332,6 +1330,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         loop: 'boolean',
         dragFree: 'boolean',
         align: ['start', 'center', 'end'],
@@ -1654,8 +1654,6 @@ export const patterns = [
       type: 'CarouselButtons',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -1705,6 +1703,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         buttonType: ['previous_button', 'next_button', 'skip_button'],
         skipNumber: 'number',
       },
@@ -2040,8 +2040,6 @@ export const patterns = [
       type: 'CarouselDots',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -2091,6 +2089,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         dotType: [
           'expanding_dot',
           'normal_dot',
@@ -2425,8 +2425,6 @@ export const patterns = [
       type: 'CarouselItem',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -2476,6 +2474,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
       },
     },
     meta: {
@@ -2795,8 +2795,6 @@ export const patterns = [
       type: 'CarouselProvider',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -2846,6 +2844,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
       },
     },
     meta: {
@@ -4044,8 +4044,6 @@ export const patterns = [
       type: 'Image',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -4095,6 +4093,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         src: 'string',
         width: 'size',
         height: 'size',
@@ -4430,8 +4430,6 @@ export const patterns = [
       type: 'Main',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -4481,6 +4479,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         useSafeAreaView: 'boolean',
       },
     },
@@ -4815,8 +4815,6 @@ export const patterns = [
       type: 'Onboard',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -4866,6 +4864,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
       },
     },
     meta: {
@@ -5186,8 +5186,6 @@ export const patterns = [
       type: 'OnboardButton',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -5237,6 +5235,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         labelKey: 'string',
         button_text_color: 'color',
         animation: [
@@ -5618,8 +5618,6 @@ export const patterns = [
       type: 'OnboardButtons',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -5669,6 +5667,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         buttonType: ['previous_button', 'next_button', 'skip_button'],
         skipNumber: 'number',
         buttons_direction: ['row', 'column'],
@@ -6044,8 +6044,6 @@ export const patterns = [
       type: 'OnboardDot',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -6095,6 +6093,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         dotType: [
           'expanding_dot',
           'normal_dot',
@@ -7348,8 +7348,6 @@ export const patterns = [
       type: 'OnboardItem',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -7399,6 +7397,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         display: ['flex', 'block'],
         gap: 'size',
         flexDirection: ['row', 'column'],
@@ -7730,8 +7730,6 @@ export const patterns = [
       type: 'OnboardProvider',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -7781,6 +7779,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         theme: ['light', 'dark', 'all'],
         borderRadius: 'never',
       },
@@ -9823,11 +9823,13 @@ export const patterns = [
       style: {
         fontSize: '16',
         flexDirection: 'row',
-        position: 'relative',
+        position: 'absolute',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        top: '35@vs',
+        left: '24@s',
         justifyContent: 'center',
         alignItems: 'center',
       },
@@ -10281,8 +10283,6 @@ export const patterns = [
       type: 'PaywallOptions',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -10332,6 +10332,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
       },
     },
     meta: {
@@ -10654,8 +10656,6 @@ export const patterns = [
       type: 'PaywallProvider',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -10705,6 +10705,9 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
+        delay: 'number',
       },
     },
     meta: {
@@ -11004,6 +11007,14 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
+        delay: {
+          label: 'Back Delay (ms)',
+          description:
+            'Milliseconds before the paywall can be dismissed via back/close.',
+          category: 'other',
+          specialCategory: null,
+          sort: 1,
+        },
       },
       mockableFeatures: { products: true, benefits: true },
     },
@@ -11443,8 +11454,6 @@ export const patterns = [
       type: 'RadioButton',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -11494,6 +11503,8 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        title: 'title',
+        description: 'description',
         selected: 'boolean',
         color: 'color',
         size: 'number',
@@ -11837,8 +11848,6 @@ export const patterns = [
       type: 'Text',
       children: 'string',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -11893,6 +11902,8 @@ export const patterns = [
           fontWeight: 'fontWeight',
           textAlign: ['left', 'center', 'right', 'justify'],
         },
+        title: 'title',
+        description: 'description',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
       },
@@ -12268,8 +12279,6 @@ export const patterns = [
       type: 'View',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],

package/src/components/BuilderProvider.tsx

@@ -90,15 +90,6 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
     ],
   );
 
-  useEffect(() => {
-    console.info('[preview] BuilderProvider params', {
-      previewMode: value.previewMode,
-      selectedKey: value.selectedKey,
-      platform: value.platform,
-      productsCount: Array.isArray(value.products) ? value.products.length : 0,
-    });
-  }, [value.previewMode, value.selectedKey, value.platform, value.products]);
-
   return (
     <BuilderContext.Provider value={value}>{children}</BuilderContext.Provider>
   );

package/src/components/DeviceNavigationBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Device } from '../types/Device';
+import { emitMockOSBackPress } from '../mockOS/backHandler';
 import { useMockOSContext } from '../mockOS/context/MockOSContextBase';
 
 type DeviceNavigationBarProps = {
@@ -37,6 +38,10 @@ export function DeviceNavigationBar({
     : 'rgba(0, 0, 0, 0.4)';
 
   function handleBackButton() {
+    if (!emitMockOSBackPress()) {
+      return;
+    }
+
     if (context) {
       const canGoBack = context.goBack();
       // If can't go back, go to launchscreen

package/src/index.ts

@@ -27,11 +27,9 @@ export type {
 
 // Paywall hooks (RN-safe placeholders)
 export {
-  usePaywallCounter,
-  useCloseStatusPaywall,
-  useCarouselOptionsSeperator,
   useCalculateLocalizedPrice,
   useDiscountRate,
+  useChangeDelayByPaywall,
 } from './paywall/hooks';
 
 // Context (RN-safe). In React Native, `products` should come from an IAP wrapper

package/src/mockOS/backHandler.ts

@@ -0,0 +1,35 @@
+export type MockOSBackHandler = () => boolean;
+
+const backHandlers: MockOSBackHandler[] = [];
+
+export function registerMockOSBackHandler(
+  handler: MockOSBackHandler,
+): () => void {
+  backHandlers.push(handler);
+
+  return () => {
+    const index = backHandlers.lastIndexOf(handler);
+    if (index >= 0) {
+      backHandlers.splice(index, 1);
+    }
+  };
+}
+
+export function emitMockOSBackPress(): boolean {
+  if (backHandlers.length === 0) {
+    return true;
+  }
+
+  for (let i = backHandlers.length - 1; i >= 0; i -= 1) {
+    const allow = backHandlers[i]?.();
+    if (!allow) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function clearMockOSBackHandlers(): void {
+  backHandlers.length = 0;
+}

package/src/mockOS/managers/navigationManager.ts

@@ -83,8 +83,5 @@ export class MockNavigationManager {
 
   clearStack(): void {
     this.stack = [];
-    if (this.context) {
-      console.info('[Mock OS] Navigation stack cleared');
-    }
   }
 }

package/src/pages/ProjectMigrationPage.tsx

@@ -71,7 +71,9 @@ export function ProjectMigrationPage({
               type="button"
               className="editor-button"
               disabled={!!migrating}
-              onClick={() => onMigrateNow?.()}
+              onClick={() => {
+                onMigrateNow?.();
+              }}
             >
               {migrating ? 'Migrating…' : 'Migrate now'}
             </button>

package/src/paywall/hooks/index.ts

@@ -1,5 +1,5 @@
-export { usePaywallCounter } from './usePaywallCounter';
-export { useCloseStatusPaywall } from './useCloseStatusPaywall';
-export { useCarouselOptionsSeperator } from './useCarouselOptionsSeperator';
 export { useCalculateLocalizedPrice } from './useCalculateLocalizedPrice';
 export { useDiscountRate } from './useDiscountRate';
+export { useChangeDelayByPaywall } from './useChangeDelayByPaywall';
+export { useHandleGoBack } from './useHandleGoBack';
+export { useMockOSBackHandler } from './useMockOSBackHandler';

package/src/paywall/hooks/useChangeDelayByPaywall.ts

@@ -0,0 +1,25 @@
+import { useEffect, useMemo } from 'react';
+import type { NodeData } from '../../types/Node';
+
+export function useChangeDelayByPaywall(
+  node: NodeData<{ delay?: number }> | null | undefined,
+  setIsBackAllowed: (value: boolean) => void,
+) {
+  const delay = useMemo(() => {
+    const delayAttribute = node?.attributes?.delay
+      ? parseInt(String(node?.attributes?.delay), 10)
+      : 1000;
+    return delayAttribute;
+  }, [node?.attributes?.delay]);
+
+  useEffect(() => {
+    if (!delay || delay <= 0) {
+      setIsBackAllowed(true);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      setIsBackAllowed(true);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [delay, setIsBackAllowed]);
+}

package/src/paywall/hooks/useHandleGoBack.ts

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { useMockOSContext } from '../../mockOS/context/MockOSContextBase';
+
+export function useHandleGoBack(
+  handleGoBack: () => boolean | null | undefined,
+) {
+  const mockOS = useMockOSContext();
+
+  useEffect(() => {
+    if (!mockOS?.isEnabled) {
+      return;
+    }
+
+    const handleBackPress = (event?: KeyboardEvent | PopStateEvent) => {
+      const result = handleGoBack();
+
+      // Only allow navigation if result is explicitly true
+      if (result !== true) {
+        // Prevent navigation
+        if (event instanceof KeyboardEvent) {
+          event.preventDefault();
+          event.stopPropagation();
+        } else if (event instanceof PopStateEvent) {
+          // Prevent browser navigation by pushing state back
+          window.history.pushState(null, '', window.location.href);
+        }
+        return;
+      }
+
+      // Allow navigation - execute MockOS goBack
+      const canGoBack = mockOS.goBack();
+      if (!canGoBack) {
+        mockOS.navigation('launchscreen');
+      }
+    };
+
+    // Handle Escape key
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleBackPress(e);
+      }
+    };
+
+    // Handle browser back button
+    const handlePopState = (e: PopStateEvent) => {
+      handleBackPress(e);
+    };
+
+    // Push a state to track back navigation
+    window.history.pushState(null, '', window.location.href);
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('popstate', handlePopState);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, [handleGoBack, mockOS]);
+}

package/src/paywall/hooks/useMockOSBackHandler.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { registerMockOSBackHandler } from '../../mockOS/backHandler';
+
+export function useMockOSBackHandler(isBackAllowed: boolean) {
+  useEffect(() => {
+    const unsubscribe = registerMockOSBackHandler(() => isBackAllowed);
+    return unsubscribe;
+  }, [isBackAllowed]);
+}

package/dist/paywall/hooks/useCarouselOptionsSeperator.d.ts

@@ -1,6 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- *
- * NOTE: name kept as `Seperator` to match existing external API usage.
- */
-export declare function useCarouselOptionsSeperator(): string;

package/dist/paywall/hooks/useCloseStatusPaywall.d.ts

@@ -1,4 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- */
-export declare function useCloseStatusPaywall(): boolean;

package/dist/paywall/hooks/usePaywallCounter.d.ts

@@ -1,4 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- */
-export declare function usePaywallCounter(): number;

package/src/paywall/hooks/useCarouselOptionsSeperator.ts

@@ -1,8 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- *
- * NOTE: name kept as `Seperator` to match existing external API usage.
- */
-export function useCarouselOptionsSeperator(): string {
-  return '';
-}

package/src/paywall/hooks/useCloseStatusPaywall.ts

@@ -1,6 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- */
-export function useCloseStatusPaywall(): boolean {
-  return false;
-}

package/src/paywall/hooks/usePaywallCounter.ts

@@ -1,6 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- */
-export function usePaywallCounter(): number {
-  return 0;
-}