@developer_tribe/react-builder 1.2.39 → 1.2.40

package/src/assets/samples/vpn-onboard-7.json

@@ -13,7 +13,7 @@
       "styles": {
         "paddingBottom": 16
       },
-      "testID": "Main-test-id"
+      "testID": "Main-test-id-1"
     },
     "children": [
       {
@@ -24,7 +24,7 @@
           "styles": {
             "backgroundColor": "THEME_COLORS.BACKGROUND"
           },
-          "testID": "StatusBarColor-test-id"
+          "testID": "StatusBarColor-test-id-1"
         },
         "children": null,
         "key": "StatusBarColor-sxj19suwkrn"
@@ -37,7 +37,7 @@
           "styles": {
             "backgroundColor": "THEME_COLORS.BACKGROUND"
           },
-          "testID": "NavigationBarColor-test-id"
+          "testID": "NavigationBarColor-test-id-1"
         },
         "children": null,
         "key": "NavigationBarColor-rhzn570dc5o"
@@ -63,7 +63,7 @@
                         "marginTop": 40,
                         "fontSize": "28@fs"
                       },
-                      "testID": "OnboardTitle-test-id"
+                      "testID": "OnboardTitle-test-id-1"
                     },
                     "children": "base.onboard.title.one-page",
                     "key": "OnboardTitle-5t0p86nj13m"
@@ -76,7 +76,7 @@
                       "styles": {
                         "height": 350
                       },
-                      "testID": "OnboardImage-test-id",
+                      "testID": "OnboardImage-test-id-1",
                       "fetchStrategy": "highIfItsAppLaunch"
                     }
                   },
@@ -91,7 +91,7 @@
                         "textAlign": "center",
                         "paddingTop": "30@vs"
                       },
-                      "testID": "OnboardSubtitle-test-id"
+                      "testID": "OnboardSubtitle-test-id-1"
                     },
                     "children": "base.onboard.subtitle.one-page",
                     "key": "OnboardSubtitle-0max8wno7l5b"
@@ -100,7 +100,7 @@
                 "attributes": {
                   "description": "Onboarding sayfası. (#1)",
                   "title": "OnboardItem 1",
-                  "testID": "OnboardItem-test-id"
+                  "testID": "OnboardItem-test-id-1"
                 }
               },
               {
@@ -118,7 +118,7 @@
                         "marginTop": 40,
                         "fontSize": "28@fs"
                       },
-                      "testID": "OnboardTitle-test-id"
+                      "testID": "OnboardTitle-test-id-2"
                     },
                     "children": "base.onboard.title.two-page",
                     "key": "OnboardTitle-ne9iihu925k"
@@ -131,7 +131,7 @@
                       "styles": {
                         "height": 350
                       },
-                      "testID": "OnboardImage-test-id",
+                      "testID": "OnboardImage-test-id-2",
                       "fetchStrategy": "normal"
                     }
                   },
@@ -146,7 +146,7 @@
                         "textAlign": "center",
                         "paddingTop": "30@vs"
                       },
-                      "testID": "OnboardSubtitle-test-id"
+                      "testID": "OnboardSubtitle-test-id-2"
                     },
                     "children": "base.onboard.subtitle.two-page",
                     "key": "OnboardSubtitle-jq9469r7c2"
@@ -155,7 +155,7 @@
                 "attributes": {
                   "description": "Onboarding sayfası. (#2)",
                   "title": "OnboardItem 2",
-                  "testID": "OnboardItem-test-id"
+                  "testID": "OnboardItem-test-id-2"
                 }
               },
               {
@@ -173,7 +173,7 @@
                         "marginTop": 40,
                         "fontSize": "28@fs"
                       },
-                      "testID": "OnboardTitle-test-id"
+                      "testID": "OnboardTitle-test-id-3"
                     },
                     "children": "base.onboard.title.three-page",
                     "key": "OnboardTitle-hczvlbg7gqj"
@@ -186,7 +186,7 @@
                       "styles": {
                         "height": 350
                       },
-                      "testID": "OnboardImage-test-id",
+                      "testID": "OnboardImage-test-id-3",
                       "fetchStrategy": "normal"
                     }
                   },
@@ -201,7 +201,7 @@
                         "textAlign": "center",
                         "paddingTop": "30@vs"
                       },
-                      "testID": "OnboardSubtitle-test-id"
+                      "testID": "OnboardSubtitle-test-id-3"
                     },
                     "children": "base.onboard.subtitle.three-page",
                     "key": "OnboardSubtitle-rufjwid9yug"
@@ -210,7 +210,7 @@
                 "attributes": {
                   "description": "Onboarding sayfası. (#3)",
                   "title": "OnboardItem 3",
-                  "testID": "OnboardItem-test-id"
+                  "testID": "OnboardItem-test-id-3"
                 }
               },
               {
@@ -228,7 +228,7 @@
                         "marginTop": 40,
                         "fontSize": "28@fs"
                       },
-                      "testID": "OnboardTitle-test-id"
+                      "testID": "OnboardTitle-test-id-4"
                     },
                     "children": "base.onboard.title.four-page",
                     "key": "OnboardTitle-f2ekfc0wcbl"
@@ -241,7 +241,7 @@
                       "styles": {
                         "height": 350
                       },
-                      "testID": "OnboardImage-test-id",
+                      "testID": "OnboardImage-test-id-4",
                       "fetchStrategy": "normal"
                     }
                   },
@@ -256,7 +256,7 @@
                         "textAlign": "center",
                         "paddingTop": "30@vs"
                       },
-                      "testID": "OnboardSubtitle-test-id"
+                      "testID": "OnboardSubtitle-test-id-4"
                     },
                     "children": "base.onboard.subtitle.four-page",
                     "key": "OnboardSubtitle-qkw2jn84xem"
@@ -265,7 +265,7 @@
                 "attributes": {
                   "description": "Onboarding sayfası. (#4)",
                   "title": "OnboardItem 4",
-                  "testID": "OnboardItem-test-id"
+                  "testID": "OnboardItem-test-id-4"
                 }
               }
             ],
@@ -275,7 +275,7 @@
               "styles": {
                 "flex": 1
               },
-              "testID": "Onboard-test-id"
+              "testID": "Onboard-test-id-1"
             },
             "key": "Onboard-dg1zmwdawmg"
           },
@@ -290,7 +290,7 @@
                 "paddingVertical": 12,
                 "dot_thickness": "10@s"
               },
-              "testID": "OnboardDot-test-id"
+              "testID": "OnboardDot-test-id-1"
             }
           },
           {
@@ -307,7 +307,7 @@
                 "flexShrink": 0,
                 "paddingBottom": "5@s"
               },
-              "testID": "OnboardButtons-test-id"
+              "testID": "OnboardButtons-test-id-1"
             },
             "children": [
               {
@@ -365,7 +365,7 @@
                 "flexShrink": 0,
                 "paddingBottom": "5@s"
               },
-              "testID": "OnboardButtons-test-id"
+              "testID": "OnboardButtons-test-id-2"
             },
             "children": [
               {
@@ -431,7 +431,7 @@
                 "flexShrink": 0,
                 "paddingBottom": "5@s"
               },
-              "testID": "OnboardButtons-test-id"
+              "testID": "OnboardButtons-test-id-3"
             },
             "children": [
               {
@@ -493,7 +493,7 @@
                 "flexShrink": 0,
                 "paddingBottom": "5@s"
               },
-              "testID": "OnboardButtons-test-id"
+              "testID": "OnboardButtons-test-id-4"
             },
             "children": [
               {
@@ -530,7 +530,7 @@
                 "marginHorizontal": 25,
                 "flexShrink": 0
               },
-              "testID": "View-test-id"
+              "testID": "View-test-id-1"
             },
             "children": [
               {
@@ -548,7 +548,7 @@
                     "color": "THEME_COLORS.ONBOARD_FOOTER_TEXT",
                     "fontSize": "12@fs"
                   },
-                  "testID": "OnboardFooter-test-id"
+                  "testID": "OnboardFooter-test-id-1"
                 }
               }
             ],
@@ -559,13 +559,13 @@
           "theme": "dark",
           "description": "Onboarding sağlayıcısı. (#1)",
           "title": "OnboardProvider 1",
-          "testID": "OnboardProvider-test-id"
+          "testID": "OnboardProvider-test-id-1"
         },
         "key": "OnboardProvider-pvc5b6o5gu"
       }
     ]
   },
   "attributes": {
-    "testID": "onboard-test-id"
+    "testID": "onboard-test-id-1"
   }
 }

package/src/attribute-analyser/style/web/useExtractImageStyle.ts

@@ -8,10 +8,15 @@ import { extractImageStyle } from '../../../utils/extractImageStyle';
 export function useExtractImageStyle<
   T extends ImagePropsGenerated['attributes'],
 >(node: NodeData<T>): CSSProperties {
-  const { selectedTheme: theme, projectColors, baseSize } = useBuilderParams();
+  const {
+    selectedTheme: theme,
+    projectColors,
+    baseSize,
+    device,
+  } = useBuilderParams();
 
   return useMemo(
-    () => extractImageStyle(node, { theme, projectColors, baseSize }),
-    [node, theme, projectColors, baseSize],
+    () => extractImageStyle(node, { theme, projectColors, baseSize, device }),
+    [node, theme, projectColors, baseSize, device],
   );
 }

package/src/attribute-analyser/style/web/useExtractViewStyle.ts

@@ -8,10 +8,15 @@ import { extractViewStyle } from '../../../utils/extractViewStyle';
 export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
 ): CSSProperties {
-  const { selectedTheme: theme, projectColors, baseSize } = useBuilderParams();
+  const {
+    selectedTheme: theme,
+    projectColors,
+    baseSize,
+    device,
+  } = useBuilderParams();
 
   return useMemo(
-    () => extractViewStyle(node, { theme, projectColors, baseSize }),
-    [node, theme, projectColors, baseSize],
+    () => extractViewStyle(node, { theme, projectColors, baseSize, device }),
+    [node, theme, projectColors, baseSize, device],
   );
 }

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

@@ -34,7 +34,12 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const onboardApi = useContext(onboardContext);
   const emblaApi = isOnboard ? onboardApi?.emblaApi : carouselApi;
 
-  const { selectedTheme: theme, projectColors, baseSize } = useBuilderParams();
+  const {
+    selectedTheme: theme,
+    projectColors,
+    baseSize,
+    device,
+  } = useBuilderParams();
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
     (attrRecord.inactive_dot_opacity as number | undefined) ??
@@ -59,12 +64,12 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   );
 
   const dotSizeCss = useMemo(() => {
-    const parsed = parseSize(dotThicknessRaw, baseSize);
+    const parsed = parseSize(dotThicknessRaw, baseSize, device!);
     if (parsed === undefined) return '10px';
     if (typeof parsed === 'number') return `${parsed}px`;
     if (typeof parsed === 'string' && parsed.trim()) return parsed;
     return '10px';
-  }, [dotThicknessRaw, baseSize]);
+  }, [dotThicknessRaw, baseSize, device]);
 
   const dotGapCss = useMemo((): string => {
     const px =

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

@@ -4,6 +4,7 @@ import RenderNode from '../RenderNode.generated';
 import type { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
+import { useRenderStore } from '../../store';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -19,11 +20,12 @@ function Main({ node }: MainComponentProps) {
   const attributeKey = node.key ?? generatedId;
 
   const { previewMode, selectedKey } = useBuilderParams();
+  const device = useRenderStore((s) => s.device);
 
   const baseStyle = useExtractViewStyle(node);
 
   const useSafeAreaView = node.attributes?.useSafeAreaView ?? true;
-  const layoutStyle = useSafeAreaViewStyle(baseStyle, useSafeAreaView);
+  const layoutStyle = useSafeAreaViewStyle(baseStyle, useSafeAreaView, device);
 
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,

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

@@ -15,6 +15,9 @@ function NavigationBarColor({ node }: NavigationBarColorComponentProps) {
   const setNavBarOverrideColor = useRenderStore(
     (s) => s.setNavBarOverrideColor,
   );
+  const setNavBarOverrideTranslucent = useRenderStore(
+    (s) => s.setNavBarOverrideTranslucent,
+  );
 
   const rawBg = getStyleBag(node.attributes)?.backgroundColor as
     | string
@@ -24,14 +27,25 @@ function NavigationBarColor({ node }: NavigationBarColorComponentProps) {
     theme,
   });
 
+  const translucent = node.attributes?.translucent;
+
   useEffect(() => {
     if (resolvedColor) {
       setNavBarOverrideColor(resolvedColor);
     }
+    if (translucent !== undefined) {
+      setNavBarOverrideTranslucent(translucent);
+    }
     return () => {
       setNavBarOverrideColor(null);
+      setNavBarOverrideTranslucent(null);
     };
-  }, [resolvedColor, setNavBarOverrideColor]);
+  }, [
+    resolvedColor,
+    setNavBarOverrideColor,
+    translucent,
+    setNavBarOverrideTranslucent,
+  ]);
 
   return null;
 }

package/src/build-components/NavigationBarColor/NavigationBarColorProps.generated.ts

@@ -2,66 +2,15 @@
 
 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 NavigationBarColorStyleGenerated {
-  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 NavigationBarColorPropsGenerated {
   child: string;
   attributes: {
     styles?: NavigationBarColorStyleGenerated;
-    scrollable?: boolean;
-    testID?: string;
+    translucent?: boolean;
   };
 }
 

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

@@ -5,11 +5,11 @@
     "title": "title",
     "description": "description",
     "children": "never",
-    "extends": "View",
     "attributes": {
       "styles": {
         "backgroundColor": "color"
-      }
+      },
+      "translucent": "boolean"
     }
   },
   "meta": {
@@ -24,6 +24,15 @@
         "specialCategory": null,
         "sort": 1
       }
+    },
+    "attributes": {
+      "translucent": {
+        "label": "Translucent",
+        "description": "Sets the navigation bar to translucent.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      }
     }
   },
   "defaults": {

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

@@ -34,6 +34,7 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
     selectedTheme: theme,
     projectColors,
     baseSize,
+    device,
   } = useBuilderParams();
   // OnboardDot specific attributes
   const inactiveDotOpacity =
@@ -74,12 +75,12 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
     (attrRecord.dot_thickness as string | number | undefined) ??
     (stylesBag?.dot_thickness as string | number | undefined);
   const dotSizeCss = useMemo((): string => {
-    const parsed = parseSize(dotThicknessRaw, baseSize);
+    const parsed = parseSize(dotThicknessRaw, baseSize, device!);
     if (parsed === undefined) return '10px';
     if (typeof parsed === 'number') return `${parsed}px`;
     if (typeof parsed === 'string' && parsed.trim()) return parsed;
     return '10px';
-  }, [dotThicknessRaw, baseSize]);
+  }, [dotThicknessRaw, baseSize, device]);
   const dotGapCss = useMemo((): string => {
     // Prefer px math when possible; otherwise fall back to 10px/3.
     const px =

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

@@ -14,6 +14,7 @@
     "styles": {}
   },
   "defaults": {
+    "testID": "paywall-close-button",
     "iconType": "close",
     "size": 24,
     "styles": {

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

@@ -15,6 +15,9 @@ function StatusBarColor({ node }: StatusBarColorComponentProps) {
   const setStatusBarOverrideColor = useRenderStore(
     (s) => s.setStatusBarOverrideColor,
   );
+  const setStatusBarOverrideTranslucent = useRenderStore(
+    (s) => s.setStatusBarOverrideTranslucent,
+  );
 
   const rawBg = getStyleBag(node.attributes)?.backgroundColor as
     | string
@@ -24,14 +27,25 @@ function StatusBarColor({ node }: StatusBarColorComponentProps) {
     theme,
   });
 
+  const translucent = node.attributes?.translucent;
+
   useEffect(() => {
     if (resolvedColor) {
       setStatusBarOverrideColor(resolvedColor);
     }
+    if (translucent !== undefined) {
+      setStatusBarOverrideTranslucent(translucent);
+    }
     return () => {
       setStatusBarOverrideColor(null);
+      setStatusBarOverrideTranslucent(null);
     };
-  }, [resolvedColor, setStatusBarOverrideColor]);
+  }, [
+    resolvedColor,
+    setStatusBarOverrideColor,
+    translucent,
+    setStatusBarOverrideTranslucent,
+  ]);
 
   return null;
 }

package/src/build-components/StatusBarColor/StatusBarColorProps.generated.ts

@@ -10,7 +10,7 @@ export interface StatusBarColorPropsGenerated {
   child: string;
   attributes: {
     styles?: StatusBarColorStyleGenerated;
-    testID?: string;
+    translucent?: boolean;
   };
 }
 

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

@@ -9,7 +9,7 @@
       "styles": {
         "backgroundColor": "color"
       },
-      "testID": "string"
+      "translucent": "boolean"
     }
   },
   "meta": {
@@ -24,6 +24,15 @@
         "specialCategory": null,
         "sort": 1
       }
+    },
+    "attributes": {
+      "translucent": {
+        "label": "Translucent",
+        "description": "Sets the status bar to translucent.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      }
     }
   },
   "defaults": {