@developer_tribe/react-builder 1.2.30 → 1.2.32

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

@@ -13,41 +13,24 @@ import { useLocalize } from '../../hooks/useLocalize';
 import { parseColor } from '../../utils/parseColor';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
-function OnboardButton({ node }: OnboardButtonComponentProps) {
+export function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
   const { theme, projectColors } = useBuilderParams();
-
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
   const handledEventsRef = useRef<EventObjectGenerated[]>([]);
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
-
   const attrs = node.attributes;
-  const attrRecord = toAttributeRecord(attrs);
-  const styleBag = getStyleBag(attrs);
   const labelRaw = attrs?.labelKey ?? '';
   const localize = useLocalize();
   const label = localize(labelRaw);
-
-  const flex = (attrRecord.flex ?? styleBag?.flex ?? 1) as number;
-
-  // The editor saves color attrs inside `styles` (meta category === 'style'),
-  // but legacy JSON may have them at the top level.
-  const rawTextColor = (attrRecord.button_text_color ??
-    styleBag?.button_text_color) as string | undefined;
-  const rawBgColor = (attrRecord.button_background_color ??
-    styleBag?.button_background_color) as string | undefined;
-
-  const textColor =
-    parseColor(rawTextColor, { projectColors, theme }) ?? '#FFFFFF';
-  const backgroundColor =
-    parseColor(rawBgColor, { projectColors, theme }) ?? '#0066FF';
+  const rawTextColor = attrs?.styles?.color as string | undefined;
+  const textColor = parseColor(rawTextColor, { projectColors, theme });
   const viewStyle = useExtractViewStyle(node);
-
   const handleClick = () => {
     //TODO: any ??
     const events: EventObjectGenerated[] = attrs?.events ?? [];
@@ -93,9 +76,7 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
       onClick={handleClick}
       style={{
         ...viewStyle,
-        flex,
         color: textColor,
-        backgroundColor,
         border: 'none',
         display: 'flex',
         justifyContent: 'center',

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -69,19 +69,17 @@ export interface OnboardButtonStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
+  color?: string;
 }
 
 export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: OnboardButtonStyleGenerated;
+    styles?: OnboardButtonStyleGenerated;
     scrollable?: boolean;
     labelKey?: string;
-    button_text_color?: string;
     animation?: AnimationOptionType;
     animation_color?: string;
-    button_background_color?: string;
-    flex?: number;
     events?: EventObjectGenerated[];
   };
 }

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

@@ -8,7 +8,6 @@
     "extends": "View",
     "attributes": {
       "labelKey": "string",
-      "button_text_color": "color",
       "animation": [
         "simple-animation",
         "line-animation",
@@ -17,36 +16,56 @@
         "blur-line-animation"
       ],
       "animation_color": "color",
-      "button_background_color": "color",
-      "flex": "number",
-      "events": "EventObject[]"
+      "events": "EventObject[]",
+      "styles": {
+        "color": "color"
+      }
     },
     "defaults": {
-      "style": {
+      "styles": {
         "height": "40@vs",
-        "borderRadius": "12@s"
+        "borderRadius": "12@s",
+        "color": "THEME_COLORS.ONBOARD_BUTTON_PRIMARY_TEXT"
       }
     }
   },
   "types": {
     "EventObject": {
-      "type": ["Permission", "Navigate"],
-      "permission": ["att", "notification", "rating", "GDPR", "null"],
+      "type": [
+        "Permission",
+        "Navigate"
+      ],
+      "permission": [
+        "att",
+        "notification",
+        "rating",
+        "GDPR",
+        "null"
+      ],
       "navigate_to": "string",
       "targetIndex": "number"
     }
   },
   "meta": {
-    "desiredParent": ["=OnboardButtons"],
+    "desiredParent": [
+      "=OnboardButtons"
+    ],
     "label": "Onboard Button",
     "description": "Single action button for onboarding.",
-    "styles": {
-      "button_text_color": {
-        "label": "Button Text Color",
-        "description": "Text color of the button.",
-        "category": "style",
+    "attributes": {
+      "labelKey": {
+        "label": "Label Key",
+        "description": "Localization key for the button text.",
+        "category": "other",
         "specialCategory": null,
-        "sort": 2
+        "sort": 1
+      },
+      "events": {
+        "label": "Events",
+        "description": "List of events fired by the button.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 7
       },
       "animation": {
         "label": "Animation",
@@ -62,35 +81,14 @@
         "specialCategory": null,
         "sort": 4
       },
-      "button_background_color": {
-        "label": "Button Background Color",
-        "description": "Background color of the button.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 5
-      }
-    },
-    "attributes": {
-      "labelKey": {
-        "label": "Label Key",
-        "description": "Localization key for the button text.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 1
-      },
-      "flex": {
-        "label": "Flex",
-        "description": "Flex grow value in layout.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 6
-      },
-      "events": {
-        "label": "Events",
-        "description": "List of events fired by the button.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 7
+      "styles": {
+        "color": {
+          "label": "Color",
+          "description": "Text color.",
+          "category": "style",
+          "specialCategory": null,
+          "sort": 1
+        }
       }
     }
   }

package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts

@@ -65,7 +65,7 @@ export interface OnboardButtonsStyleGenerated {
 export interface OnboardButtonsPropsGenerated {
   child: string;
   attributes: {
-    style?: OnboardButtonsStyleGenerated;
+    styles?: OnboardButtonsStyleGenerated;
     scrollable?: boolean;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;

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

@@ -7,16 +7,25 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "buttonType": ["previous_button", "next_button", "skip_button"],
+      "buttonType": [
+        "previous_button",
+        "next_button",
+        "skip_button"
+      ],
       "skipNumber": "number",
-      "buttons_direction": ["row", "column"],
+      "buttons_direction": [
+        "row",
+        "column"
+      ],
       "forIndex": "number",
       "seperatorColor": "color",
-      "condition": ["carousel-index"],
+      "condition": [
+        "carousel-index"
+      ],
       "conditionVariable": "number"
     },
     "defaults": {
-      "style": {
+      "styles": {
         "display": "flex",
         "flexDirection": "row",
         "gap": 12,
@@ -28,7 +37,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["=OnboardItem"],
+    "desiredParent": [
+      "=OnboardItem"
+    ],
     "label": "Onboard Buttons",
     "description": "Wrapper for onboarding button set.",
     "styles": {

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

@@ -11,7 +11,7 @@ import { parseColor } from '../../utils/parseColor';
 import { parseSize } from '../../size-matters';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
-function OnboardDot({ node }: OnboardDotComponentProps) {
+export function OnboardDot({ node }: OnboardDotComponentProps) {
   useLogRender('OnboardDot');
 
   node = useNode(node);
@@ -26,8 +26,6 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     (stylesBag?.dotType as string | undefined) ??
     (attrRecord.dotType as string | undefined) ??
     'normal_dot';
-  const GHOST_DOT_DARK_COLOR = '#E4E5E7';
-  const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const {
     previewMode,
     selectedKey,
@@ -35,12 +33,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     projectColors,
     baseSize,
   } = useBuilderParams();
-  const isDark = theme === 'dark';
-
   // OnboardDot specific attributes
-  const inactiveDotColor = isDark
-    ? GHOST_DOT_DARK_COLOR
-    : GHOST_DOT_LIGHT_COLOR;
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
     (attrRecord.inactive_dot_opacity as number | undefined) ??
@@ -55,13 +48,10 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     () => parseColor(activeDotColor, { theme, projectColors }),
     [activeDotColor, theme, projectColors],
   );
-  const resolvedInactiveDotColor = useMemo(() => {
-    const parsed = parseColor(inactiveDotColorOverride, {
-      theme,
-      projectColors,
-    });
-    return parsed ?? inactiveDotColor;
-  }, [inactiveDotColor, inactiveDotColorOverride, theme, projectColors]);
+  const resolvedInactiveDotColor = useMemo(
+    () => parseColor(inactiveDotColorOverride, { theme, projectColors }),
+    [inactiveDotColorOverride, theme, projectColors],
+  );
 
   const extractedStyle = useExtractViewStyle(node);
   const baseStyle = useMemo(() => {
@@ -138,14 +128,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
       className={`embla__dots embla__dots--${dotType}`}
       style={containerStyle}
     >
-      {scrollSnaps.map((snap, index) => {
+      {scrollSnaps.map((_, index) => {
         const isDotSelected = selectedIndex === index;
-        const resolvedColor =
-          isDotSelected && resolvedActiveDotColor
-            ? resolvedActiveDotColor
-            : resolvedInactiveDotColor;
-        const activeFallback = '#007AFF';
-        const dotColor = resolvedColor ?? activeFallback;
+        const resolvedColor = isDotSelected
+          ? resolvedActiveDotColor
+          : resolvedInactiveDotColor;
+        const dotColor = resolvedColor ?? undefined;
 
         return (
           <button

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -66,7 +66,7 @@ export interface OnboardDotStyleGenerated {
 export interface OnboardDotPropsGenerated {
   child: string;
   attributes: {
-    style?: OnboardDotStyleGenerated;
+    styles?: OnboardDotStyleGenerated;
     scrollable?: boolean;
     dotType?: DotTypeOptionType;
     dot_thickness?: string;

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

@@ -28,8 +28,9 @@
     "dotType": "expanding_dot",
     "dot_thickness": 10,
     "inactive_dot_opacity": 0.3,
-    "active_dot_color": "#007AFF",
-    "style": {
+    "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
+    "inactive_dot_color": "THEME_COLORS.BACKGROUND",
+    "styles": {
       "flexDirection": "row",
       "alignItems": "center",
       "justifyContent": "center",
@@ -37,7 +38,9 @@
     }
   },
   "meta": {
-    "desiredParent": [">OnboardProvider"],
+    "desiredParent": [
+      ">OnboardProvider"
+    ],
     "label": "Onboard Dot",
     "description": "Renders onboarding progress dots.",
     "styles": {

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

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

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

@@ -17,7 +17,7 @@
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "flexDirection": "row",
       "flexWrap": "wrap",
       "alignItems": "center",
@@ -27,7 +27,9 @@
     }
   },
   "meta": {
-    "desiredParent": [">OnboardItem"],
+    "desiredParent": [
+      ">OnboardItem"
+    ],
     "label": "Onboard Footer",
     "description": "Footer text with optional links.",
     "styles": {

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

@@ -61,7 +61,7 @@ export interface OnboardImageStyleGenerated {
 export interface OnboardImagePropsGenerated {
   child: string;
   attributes: {
-    style?: OnboardImageStyleGenerated;
+    styles?: OnboardImageStyleGenerated;
     src?: string;
     scrollable?: boolean;
     video_url?: string;

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -60,7 +60,7 @@ export interface OnboardItemStyleGenerated {
 export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
-    style?: OnboardItemStyleGenerated;
+    styles?: OnboardItemStyleGenerated;
     scrollable?: boolean;
     display?: DisplayOptionType;
     gap?: string;

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

@@ -7,22 +7,30 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "display": ["flex", "block"],
+      "display": [
+        "flex",
+        "block"
+      ],
       "gap": "size",
-      "flexDirection": ["row", "column"],
+      "flexDirection": [
+        "row",
+        "column"
+      ],
       "paddingHorizontal": "size"
     }
   },
   "defaults": {
     "display": "flex",
-    "style": {
+    "styles": {
       "gap": "16@vs",
       "flexDirection": "column",
       "paddingHorizontal": "24@s"
     }
   },
   "meta": {
-    "desiredParent": ["=Onboard"],
+    "desiredParent": [
+      "=Onboard"
+    ],
     "label": "Onboard Item",
     "description": "Single onboarding screen section.",
     "styles": {},

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -60,7 +60,7 @@ export interface OnboardProviderStyleGenerated {
 export interface OnboardProviderPropsGenerated {
   child: string;
   attributes: {
-    style?: OnboardProviderStyleGenerated;
+    styles?: OnboardProviderStyleGenerated;
     scrollable?: boolean;
     theme?: ThemeOptionType;
     borderRadius?: never;

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

@@ -7,18 +7,24 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "theme": ["light", "dark", "all"],
+      "theme": [
+        "light",
+        "dark",
+        "all"
+      ],
       "borderRadius": "never"
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "width": "100%",
       "height": "100%"
     }
   },
   "meta": {
-    "desiredParent": ["root"],
+    "desiredParent": [
+      "root"
+    ],
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
     "styles": {},

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

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

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

@@ -8,13 +8,16 @@
     "extends": "Text"
   },
   "defaults": {
-    "style": {
+    "styles": {
       "fontSize": "14@fs",
       "fontWeight": "600"
     }
   },
   "meta": {
-    "desiredParent": [">OnboardProvider", ">OnboardItem"],
+    "desiredParent": [
+      ">OnboardProvider",
+      ">OnboardItem"
+    ],
     "label": "Onboard Subtitle",
     "description": "Subtitle text for an onboarding step.",
     "styles": {}

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

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

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

@@ -8,14 +8,17 @@
     "extends": "Text"
   },
   "defaults": {
-    "style": {
+    "styles": {
       "fontSize": "24@fs",
       "fontWeight": "700",
       "textAlign": "center"
     }
   },
   "meta": {
-    "desiredParent": [">OnboardItem", ">OnboardProvider"],
+    "desiredParent": [
+      ">OnboardItem",
+      ">OnboardProvider"
+    ],
     "label": "Onboard Title",
     "description": "Title text for an onboarding step.",
     "styles": {}

package/src/build-components/PaywallBackground/PaywallBackgroundProps.generated.ts

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

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

@@ -8,7 +8,7 @@
     "extends": "BackgroundImage",
     "defaults": {
       "resizeMode": "cover",
-      "style": {
+      "styles": {
         "width": "100%",
         "height": "100%",
         "position": "absolute",
@@ -20,7 +20,9 @@
     }
   },
   "meta": {
-    "desiredParent": [">PaywallProvider"],
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
     "label": "Paywall Background",
     "description": "Paywall Background component.",
     "styles": {}

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

@@ -11,7 +11,7 @@ import { Icon } from '../../components/Icon.generated';
 import { IconsType } from '../../types/Icons.generated';
 import { usePaywallContext } from '../PaywallProvider/PaywallContext';
 
-function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
+export function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
   useLogRender('PaywallCloseButton');
   node = useNode(node);
   const { onClose, isBackAllowed } = usePaywallContext();
@@ -40,7 +40,7 @@ function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
   }
 
   const attrs = node.attributes;
-  const styleBag = attrs?.style;
+  const styleBag = attrs?.styles;
   const iconType = attrs?.iconType ?? 'close';
   const size = attrs?.size ?? (textStyle.fontSize as number | undefined) ?? 24;
   const color =

package/src/build-components/PaywallCloseButton/PaywallCloseButtonProps.generated.ts

@@ -63,7 +63,7 @@ export interface PaywallCloseButtonStyleGenerated {
 export interface PaywallCloseButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: PaywallCloseButtonStyleGenerated;
+    styles?: PaywallCloseButtonStyleGenerated;
     iconType?: string;
     size?: number;
     strokeWidth?: number;

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

@@ -8,7 +8,9 @@
     "extends": "BIcon"
   },
   "meta": {
-    "desiredParent": [">PaywallProvider"],
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
     "label": "Paywall Close Button",
     "description": "Paywall Close Button component.",
     "styles": {}
@@ -16,7 +18,7 @@
   "defaults": {
     "iconType": "close",
     "size": 24,
-    "style": {
+    "styles": {
       "position": "absolute",
       "top": "35@vs",
       "left": "24@s",

package/src/build-components/PaywallOptions/PaywallOptionsProps.generated.ts

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

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

@@ -8,13 +8,15 @@
     "children": "node"
   },
   "meta": {
-    "desiredParent": [">PaywallProvider"],
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
     "label": "Paywall Options",
     "description": "Paywall options selector component.",
     "styles": {}
   },
   "defaults": {
-    "style": {
+    "styles": {
       "flexDirection": "row",
       "justifyContent": "space-between",
       "alignItems": "center",

package/src/build-components/PaywallProvider/PaywallProviderProps.generated.ts

@@ -59,7 +59,7 @@ export interface PaywallProviderStyleGenerated {
 export interface PaywallProviderPropsGenerated {
   child: string;
   attributes: {
-    style?: PaywallProviderStyleGenerated;
+    styles?: PaywallProviderStyleGenerated;
     scrollable?: boolean;
     delay?: number;
   };