@developer_tribe/react-builder 1.2.38 → 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,8 @@
                       "styles": {
                         "height": 350
                       },
-                      "testID": "OnboardImage-test-id"
+                      "testID": "OnboardImage-test-id-1",
+                      "fetchStrategy": "highIfItsAppLaunch"
                     }
                   },
                   {
@@ -90,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"
@@ -99,7 +100,7 @@
                 "attributes": {
                   "description": "Onboarding sayfası. (#1)",
                   "title": "OnboardItem 1",
-                  "testID": "OnboardItem-test-id"
+                  "testID": "OnboardItem-test-id-1"
                 }
               },
               {
@@ -117,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"
@@ -130,7 +131,8 @@
                       "styles": {
                         "height": 350
                       },
-                      "testID": "OnboardImage-test-id"
+                      "testID": "OnboardImage-test-id-2",
+                      "fetchStrategy": "normal"
                     }
                   },
                   {
@@ -144,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"
@@ -153,7 +155,7 @@
                 "attributes": {
                   "description": "Onboarding sayfası. (#2)",
                   "title": "OnboardItem 2",
-                  "testID": "OnboardItem-test-id"
+                  "testID": "OnboardItem-test-id-2"
                 }
               },
               {
@@ -171,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"
@@ -184,7 +186,8 @@
                       "styles": {
                         "height": 350
                       },
-                      "testID": "OnboardImage-test-id"
+                      "testID": "OnboardImage-test-id-3",
+                      "fetchStrategy": "normal"
                     }
                   },
                   {
@@ -198,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"
@@ -207,7 +210,7 @@
                 "attributes": {
                   "description": "Onboarding sayfası. (#3)",
                   "title": "OnboardItem 3",
-                  "testID": "OnboardItem-test-id"
+                  "testID": "OnboardItem-test-id-3"
                 }
               },
               {
@@ -225,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"
@@ -238,7 +241,8 @@
                       "styles": {
                         "height": 350
                       },
-                      "testID": "OnboardImage-test-id"
+                      "testID": "OnboardImage-test-id-4",
+                      "fetchStrategy": "normal"
                     }
                   },
                   {
@@ -252,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"
@@ -261,7 +265,7 @@
                 "attributes": {
                   "description": "Onboarding sayfası. (#4)",
                   "title": "OnboardItem 4",
-                  "testID": "OnboardItem-test-id"
+                  "testID": "OnboardItem-test-id-4"
                 }
               }
             ],
@@ -271,7 +275,7 @@
               "styles": {
                 "flex": 1
               },
-              "testID": "Onboard-test-id"
+              "testID": "Onboard-test-id-1"
             },
             "key": "Onboard-dg1zmwdawmg"
           },
@@ -286,7 +290,7 @@
                 "paddingVertical": 12,
                 "dot_thickness": "10@s"
               },
-              "testID": "OnboardDot-test-id"
+              "testID": "OnboardDot-test-id-1"
             }
           },
           {
@@ -303,7 +307,7 @@
                 "flexShrink": 0,
                 "paddingBottom": "5@s"
               },
-              "testID": "OnboardButtons-test-id"
+              "testID": "OnboardButtons-test-id-1"
             },
             "children": [
               {
@@ -361,7 +365,7 @@
                 "flexShrink": 0,
                 "paddingBottom": "5@s"
               },
-              "testID": "OnboardButtons-test-id"
+              "testID": "OnboardButtons-test-id-2"
             },
             "children": [
               {
@@ -427,7 +431,7 @@
                 "flexShrink": 0,
                 "paddingBottom": "5@s"
               },
-              "testID": "OnboardButtons-test-id"
+              "testID": "OnboardButtons-test-id-3"
             },
             "children": [
               {
@@ -489,7 +493,7 @@
                 "flexShrink": 0,
                 "paddingBottom": "5@s"
               },
-              "testID": "OnboardButtons-test-id"
+              "testID": "OnboardButtons-test-id-4"
             },
             "children": [
               {
@@ -526,7 +530,7 @@
                 "marginHorizontal": 25,
                 "flexShrink": 0
               },
-              "testID": "View-test-id"
+              "testID": "View-test-id-1"
             },
             "children": [
               {
@@ -544,7 +548,7 @@
                     "color": "THEME_COLORS.ONBOARD_FOOTER_TEXT",
                     "fontSize": "12@fs"
                   },
-                  "testID": "OnboardFooter-test-id"
+                  "testID": "OnboardFooter-test-id-1"
                 }
               }
             ],
@@ -555,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/BIcon/BIconProps.generated.ts

@@ -68,8 +68,8 @@ export interface BIconPropsGenerated {
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     translateCounter?: number;
-    testID?: string;
     scrollable?: boolean;
+    testID?: string;
     iconType?: string;
     size?: number;
     strokeWidth?: number;

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

@@ -9,8 +9,7 @@
     "attributes": {
       "iconType": "iconType",
       "size": "number",
-      "strokeWidth": "number",
-      "testID": "string"
+      "strokeWidth": "number"
     }
   },
   "meta": {

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

@@ -8,8 +8,7 @@
     "extends": "View",
     "attributes": {
       "src": "string",
-      "resizeMode": ["cover", "contain", "stretch", "center"],
-      "testID": "string"
+      "resizeMode": ["cover", "contain", "stretch", "center"]
     },
     "defaults": {
       "resizeMode": "cover",

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

@@ -23,8 +23,7 @@
           "800",
           "900"
         ]
-      },
-      "testID": "string"
+      }
     }
   },
   "meta": {

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

@@ -9,8 +9,7 @@
     "attributes": {
       "loop": "boolean",
       "dragFree": "boolean",
-      "align": ["start", "center", "end"],
-      "testID": "string"
+      "align": ["start", "center", "end"]
     }
   },
   "meta": {

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

@@ -8,8 +8,7 @@
     "extends": "View",
     "attributes": {
       "buttonType": ["previous_button", "next_button", "skip_button"],
-      "skipNumber": "number",
-      "testID": "string"
+      "skipNumber": "number"
     }
   },
   "meta": {

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/CarouselDots/pattern.json

@@ -18,8 +18,7 @@
       "dot_thickness": "size",
       "inactive_dot_opacity": "number",
       "inactive_dot_color": "color",
-      "active_dot_color": "color",
-      "testID": "string"
+      "active_dot_color": "color"
     }
   },
   "defaults": {

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

@@ -5,10 +5,7 @@
     "title": "title",
     "description": "description",
     "children": "node",
-    "extends": "View",
-    "attributes": {
-      "testID": "string"
-    }
+    "extends": "View"
   },
   "meta": {
     "desiredParent": ["=Carousel"],

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

@@ -12,9 +12,6 @@
         "width": "100%",
         "height": "100%"
       }
-    },
-    "attributes": {
-      "testID": "string"
     }
   },
   "meta": {

package/src/build-components/CountDown/CountDownProps.generated.ts

@@ -68,8 +68,8 @@ export interface CountDownPropsGenerated {
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     translateCounter?: number;
-    testID?: string;
     scrollable?: boolean;
+    testID?: string;
     count?: number;
   };
 }

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

@@ -11,8 +11,7 @@
       "styles": {
         "width": "never",
         "textAlign": "never"
-      },
-      "testID": "string"
+      }
     }
   },
   "meta": {

package/src/build-components/Image/ImageProps.generated.ts

@@ -2,6 +2,11 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type FetchStrategyOptionType =
+  | 'highIfItsAppLaunch'
+  | 'normal'
+  | 'lazy'
+  | 'none';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -65,6 +70,7 @@ export interface ImagePropsGenerated {
     scrollable?: boolean;
     testID?: string;
     src?: string;
+    fetchStrategy?: FetchStrategyOptionType;
   };
 }
 

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

@@ -8,12 +8,13 @@
     "extends": "View",
     "attributes": {
       "src": "string",
+      "fetchStrategy": ["highIfItsAppLaunch", "normal", "lazy", "none"],
       "styles": {
         "resizeMode": ["cover", "contain", "stretch", "center"]
-      },
-      "testID": "string"
+      }
     },
     "defaults": {
+      "fetchStrategy": "normal",
       "styles": {
         "resizeMode": "contain"
       }
@@ -39,6 +40,13 @@
         "category": "other",
         "specialCategory": null,
         "sort": 1
+      },
+      "fetchStrategy": {
+        "label": "Fetch Strategy",
+        "description": "highIfItsAppLaunch ilk başta yükleniyor eğer app_launch placeholder'i ile gelirse\nnormal sonra bütün hepsi toplanıp prefetch ediniyor\nlazy builder açılır açılmaz\nnone ise os'a bırakıldı",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
       }
     }
   }

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/Main/pattern.json

@@ -7,8 +7,7 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "useSafeAreaView": "boolean",
-      "testID": "string"
+      "useSafeAreaView": "boolean"
     }
   },
   "defaults": {

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,12 +5,11 @@
     "title": "title",
     "description": "description",
     "children": "never",
-    "extends": "View",
     "attributes": {
       "styles": {
         "backgroundColor": "color"
       },
-      "testID": "string"
+      "translucent": "boolean"
     }
   },
   "meta": {
@@ -25,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": {