@developer_tribe/react-builder 1.2.30 → 1.2.32

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

@@ -288,8 +288,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -298,7 +296,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -306,8 +306,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -316,7 +314,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -343,8 +343,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Permission",
@@ -357,7 +355,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -365,8 +365,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -379,7 +377,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -406,8 +406,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -416,7 +414,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -424,8 +424,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -438,7 +436,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -465,8 +465,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -478,7 +476,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }

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

@@ -9,7 +9,7 @@ import { Icon } from '../../components/Icon.generated';
 import { IconsType } from '../../types/Icons.generated';
 import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 
-function BIcon({ node }: BIconComponentProps) {
+export function BIcon({ node }: BIconComponentProps) {
   useLogRender('BIcon');
   node = useNode(node);
   const generatedId = useId();

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -63,7 +63,7 @@ export interface BIconStyleGenerated {
 export interface BIconPropsGenerated {
   child: string;
   attributes: {
-    style?: BIconStyleGenerated;
+    styles?: BIconStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     translateCounter?: number;

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

@@ -13,7 +13,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "BIcon",
     "description": "Renders an icon from the icon set.",
     "styles": {},
@@ -44,7 +46,7 @@
   "defaults": {
     "iconType": "activity",
     "strokeWidth": 1.5,
-    "style": {
+    "styles": {
       "fontSize": "16"
     }
   }

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

@@ -8,7 +8,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 
-function BackgroundImage({ node }: BackgroundImageComponentProps) {
+export function BackgroundImage({ node }: BackgroundImageComponentProps) {
   useLogRender('BackgroundImage');
   node = useNode(node);
   const generatedId = useId();
@@ -20,7 +20,7 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
   const baseStyle = useExtractViewStyle(node);
   const backgroundStyle = useMemo(() => {
     const attrs = node.attributes;
-    const styleBag = attrs?.style;
+    const styleBag = attrs?.styles;
     const style: React.CSSProperties = {
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',

package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts

@@ -60,7 +60,7 @@ export interface BackgroundImageStyleGenerated {
 export interface BackgroundImagePropsGenerated {
   child: string;
   attributes: {
-    style?: BackgroundImageStyleGenerated;
+    styles?: BackgroundImageStyleGenerated;
     scrollable?: boolean;
     src?: string;
     resizeMode?: ResizeModeOptionType;

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

@@ -8,11 +8,16 @@
     "extends": "View",
     "attributes": {
       "src": "string",
-      "resizeMode": ["cover", "contain", "stretch", "center"]
+      "resizeMode": [
+        "cover",
+        "contain",
+        "stretch",
+        "center"
+      ]
     },
     "defaults": {
       "resizeMode": "cover",
-      "style": {
+      "styles": {
         "width": "100%",
         "height": "100%",
         "position": "absolute",
@@ -24,7 +29,10 @@
     }
   },
   "meta": {
-    "desiredParent": ["all", "background"],
+    "desiredParent": [
+      "all",
+      "background"
+    ],
     "label": "Background Image",
     "description": "Background image.",
     "styles": {

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

@@ -9,7 +9,7 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
 
-function Button({ node }: ButtonComponentProps) {
+export function Button({ node }: ButtonComponentProps) {
   useLogRender('Button');
   node = useNode(node);
   const generatedId = useId();
@@ -33,7 +33,7 @@ function Button({ node }: ButtonComponentProps) {
     combinedTextStyle.textAlign,
   ]);
   const buttonDefaults = useMemo(() => {
-    const styleBag = node?.attributes?.style;
+    const styleBag = node?.attributes?.styles;
     const hasExplicitBackground =
       styleBag?.backgroundColor !== undefined &&
       styleBag?.backgroundColor !== null &&
@@ -45,7 +45,7 @@ function Button({ node }: ButtonComponentProps) {
         ? undefined
         : { backgroundColor: 'transparent' }),
     } as React.CSSProperties;
-  }, [node?.attributes?.style]);
+  }, [node?.attributes?.styles]);
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,

package/src/build-components/Button/ButtonProps.generated.ts

@@ -74,7 +74,7 @@ export interface ButtonStyleGenerated {
 export interface ButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: ButtonStyleGenerated;
+    styles?: ButtonStyleGenerated;
     scrollable?: boolean;
   };
 }

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

@@ -7,7 +7,7 @@
     "children": "string",
     "extends": "View",
     "attributes": {
-      "style": {
+      "styles": {
         "color": "color",
         "fontSize": "size",
         "fontWeight": [
@@ -27,7 +27,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Button",
     "description": "Simple action button.",
     "styles": {
@@ -55,7 +57,7 @@
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "display": "flex",
       "alignItems": "center",
       "justifyContent": "center",

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -60,7 +60,7 @@ export interface CarouselStyleGenerated {
 export interface CarouselPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselStyleGenerated;
+    styles?: CarouselStyleGenerated;
     scrollable?: boolean;
     loop?: boolean;
     dragFree?: boolean;

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

@@ -9,17 +9,23 @@
     "attributes": {
       "loop": "boolean",
       "dragFree": "boolean",
-      "align": ["start", "center", "end"]
+      "align": [
+        "start",
+        "center",
+        "end"
+      ]
     }
   },
   "meta": {
-    "desiredParent": ["=CarouselProvider"],
+    "desiredParent": [
+      "=CarouselProvider"
+    ],
     "label": "Carousel",
     "description": "Container for carousel items.",
     "styles": {}
   },
   "defaults": {
-    "style": {
+    "styles": {
       "flexDirection": "row"
     }
   }

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -63,7 +63,7 @@ export interface CarouselButtonsStyleGenerated {
 export interface CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselButtonsStyleGenerated;
+    styles?: CarouselButtonsStyleGenerated;
     scrollable?: boolean;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;

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

@@ -34,9 +34,7 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const onboardApi = useContext(onboardContext);
   const emblaApi = isOnboard ? onboardApi?.emblaApi : carouselApi;
 
-  // When used as OnboardDot (sourceType), support OnboardDot-specific attributes too.
-  const GHOST_DOT_DARK_COLOR = '#E4E5E7';
-  const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
+  const { mockTheme: theme, projectColors, baseSize } = useBuilderParams();
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
     (attrRecord.inactive_dot_opacity as number | undefined) ??
@@ -51,23 +49,14 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
     (stylesBag?.dot_thickness as string | number | undefined) ??
     (attrRecord.dot_thickness as string | number | undefined);
 
-  const { mockTheme: theme, projectColors, baseSize } = useBuilderParams();
-  const isDark = theme === 'dark';
-  const inactiveDotColorBase = isDark
-    ? GHOST_DOT_DARK_COLOR
-    : GHOST_DOT_LIGHT_COLOR;
-
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme, projectColors }),
     [activeDotColor, theme, projectColors],
   );
-  const resolvedInactiveDotColor = useMemo(() => {
-    const parsed = parseColor(inactiveDotColorOverride, {
-      theme,
-      projectColors,
-    });
-    return parsed ?? inactiveDotColorBase;
-  }, [inactiveDotColorBase, inactiveDotColorOverride, theme, projectColors]);
+  const resolvedInactiveDotColor = useMemo(
+    () => parseColor(inactiveDotColorOverride, { theme, projectColors }),
+    [inactiveDotColorOverride, theme, projectColors],
+  );
 
   const dotSizeCss = useMemo(() => {
     const parsed = parseSize(dotThicknessRaw, baseSize);
@@ -132,7 +121,9 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
           isDotSelected && resolvedActiveDotColor
             ? resolvedActiveDotColor
             : resolvedInactiveDotColor;
-        const activeFallback = '#007AFF';
+        const activeFallback =
+          resolvedActiveDotColor ??
+          parseColor('STATIC_COLORS.ONBOARD_DOT_ACTIVE', { projectColors });
         const dotColor = resolvedColor ?? activeFallback;
 
         return (

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -66,9 +66,13 @@ export interface CarouselDotsStyleGenerated {
 export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselDotsStyleGenerated;
+    styles?: CarouselDotsStyleGenerated;
     scrollable?: boolean;
     dotType?: DotTypeOptionType;
+    dot_thickness?: string;
+    inactive_dot_opacity?: number;
+    inactive_dot_color?: string;
+    active_dot_color?: string;
   };
 }
 

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

@@ -14,9 +14,20 @@
         "sliding_border",
         "sliding_dot",
         "liquid_like"
-      ]
+      ],
+      "dot_thickness": "size",
+      "inactive_dot_opacity": "number",
+      "inactive_dot_color": "color",
+      "active_dot_color": "color"
     }
   },
+  "defaults": {
+    "dotType": "expanding_dot",
+    "dot_thickness": 10,
+    "inactive_dot_opacity": 0.3,
+    "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
+    "inactive_dot_color": "THEME_COLORS.BACKGROUND"
+  },
   "meta": {
     "desiredParent": [">CarouselProvider"],
     "label": "Carousel Dots",

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

@@ -59,7 +59,7 @@ export interface CarouselItemStyleGenerated {
 export interface CarouselItemPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselItemStyleGenerated;
+    styles?: CarouselItemStyleGenerated;
     scrollable?: boolean;
   };
 }

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

@@ -59,7 +59,7 @@ export interface CarouselProviderStyleGenerated {
 export interface CarouselProviderPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselProviderStyleGenerated;
+    styles?: CarouselProviderStyleGenerated;
     scrollable?: boolean;
   };
 }

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

@@ -8,14 +8,17 @@
     "children": "node",
     "extends": "View",
     "defaults": {
-      "style": {
+      "styles": {
         "width": "100%",
         "height": "100%"
       }
     }
   },
   "meta": {
-    "desiredParent": ["root", ">View"],
+    "desiredParent": [
+      "root",
+      ">View"
+    ],
     "label": "Carousel Provider",
     "description": "Provides carousel context to its children.",
     "attributes": {}

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

@@ -64,7 +64,7 @@ export interface CountDownStyleGenerated {
 export interface CountDownPropsGenerated {
   child: string;
   attributes: {
-    style?: CountDownStyleGenerated;
+    styles?: CountDownStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     translateCounter?: number;

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

@@ -8,14 +8,16 @@
     "extends": "Text",
     "attributes": {
       "count": "number",
-      "style": {
+      "styles": {
         "width": "never",
         "textAlign": "never"
       }
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Count Down",
     "description": "Displays a countdown timer.",
     "attributes": {

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

@@ -61,7 +61,7 @@ export interface ImageStyleGenerated {
 export interface ImagePropsGenerated {
   child: string;
   attributes: {
-    style?: ImageStyleGenerated;
+    styles?: ImageStyleGenerated;
     scrollable?: boolean;
     src?: string;
   };

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

@@ -8,18 +8,25 @@
     "extends": "View",
     "attributes": {
       "src": "string",
-      "style": {
-        "resizeMode": ["cover", "contain", "stretch", "center"]
+      "styles": {
+        "resizeMode": [
+          "cover",
+          "contain",
+          "stretch",
+          "center"
+        ]
       }
     },
     "defaults": {
-      "style": {
+      "styles": {
         "resizeMode": "contain"
       }
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Image",
     "description": "Shows an image or graphic.",
     "styles": {

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

@@ -33,6 +33,7 @@ function Main({ node }: MainComponentProps) {
   const style = useMergedStyle(
     layoutStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+    { boxSizing: 'content-box' },
   );
 
   return (

package/src/build-components/Main/MainProps.generated.ts

@@ -59,7 +59,7 @@ export interface MainStyleGenerated {
 export interface MainPropsGenerated {
   child: string;
   attributes: {
-    style?: MainStyleGenerated;
+    styles?: MainStyleGenerated;
     scrollable?: boolean;
     useSafeAreaView?: boolean;
   };

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

@@ -12,7 +12,7 @@
   },
   "defaults": {
     "useSafeAreaView": true,
-    "style": {
+    "styles": {
       "width": "100%",
       "height": "100%",
       "flex": 1,
@@ -20,7 +20,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["root"],
+    "desiredParent": [
+      "root"
+    ],
     "label": "Main",
     "description": "Top-level screen wrapper (safe area, base layout).",
     "hideAllAttributes": true,

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

@@ -59,7 +59,7 @@ export interface NavigationBarColorStyleGenerated {
 export interface NavigationBarColorPropsGenerated {
   child: string;
   attributes: {
-    style?: NavigationBarColorStyleGenerated;
+    styles?: NavigationBarColorStyleGenerated;
     scrollable?: boolean;
   };
 }

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

@@ -7,13 +7,15 @@
     "children": "never",
     "extends": "View",
     "attributes": {
-      "style": {
+      "styles": {
         "backgroundColor": "color"
       }
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Navigation Bar Color",
     "description": "Sets the OS navigation bar background color.",
     "styles": {
@@ -27,7 +29,7 @@
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "backgroundColor": "THEME_COLORS.BACKGROUND"
     }
   }

package/src/build-components/Onboard/OnboardProps.generated.ts

@@ -59,7 +59,7 @@ export interface OnboardStyleGenerated {
 export interface OnboardPropsGenerated {
   child: string;
   attributes: {
-    style?: OnboardStyleGenerated;
+    styles?: OnboardStyleGenerated;
     scrollable?: boolean;
   };
 }

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

@@ -8,14 +8,18 @@
     "extends": "View"
   },
   "meta": {
-    "desiredParent": ["=OnboardProvider"],
-    "desiredChildren": ["=OnboardItem"],
+    "desiredParent": [
+      "=OnboardProvider"
+    ],
+    "desiredChildren": [
+      "=OnboardItem"
+    ],
     "label": "Onboard",
     "description": "Wraps the onboarding flow.",
     "styles": {}
   },
   "defaults": {
-    "style": {
+    "styles": {
       "flexDirection": "row"
     }
   }