@developer_tribe/react-builder 1.2.31 → 1.2.32

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

@@ -11,7 +11,6 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
 import { parseColor } from '../../utils/parseColor';
-import { defaultProjectColors } from '../../utils/projectColors';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 export function OnboardButton({ node }: OnboardButtonComponentProps) {
@@ -20,36 +19,18 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
   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;
-
-  // color and backgroundColor are now stored inside `styles`
-  const rawTextColor = styleBag?.color as string | undefined;
-  const rawBgColor = styleBag?.backgroundColor as string | undefined;
-
-  const textColor =
-    parseColor(rawTextColor, { projectColors, theme }) ??
-    projectColors?.STATIC_COLORS?.ONBOARD_BUTTON_PRIMARY_TEXT ??
-    defaultProjectColors.STATIC_COLORS!.ONBOARD_BUTTON_PRIMARY_TEXT;
-  const backgroundColor =
-    parseColor(rawBgColor, { projectColors, theme }) ??
-    projectColors?.STATIC_COLORS?.ONBOARD_BUTTON_PRIMARY_BACKGROUND ??
-    defaultProjectColors.STATIC_COLORS!.ONBOARD_BUTTON_PRIMARY_BACKGROUND;
+  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 ?? [];
@@ -95,9 +76,7 @@ export 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,17 +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;
     animation?: AnimationOptionType;
     animation_color?: string;
-    flex?: number;
     events?: EventObjectGenerated[];
   };
 }

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

@@ -16,44 +16,42 @@
         "blur-line-animation"
       ],
       "animation_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": {
-      "animation": {
-        "label": "Animation",
-        "description": "Animation style for the button.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 3
-      },
-      "animation_color": {
-        "label": "Animation Color",
-        "description": "Color used by the animation.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 4
-      }
-    },
     "attributes": {
       "labelKey": {
         "label": "Label Key",
@@ -62,19 +60,35 @@
         "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
+      },
+      "animation": {
+        "label": "Animation",
+        "description": "Animation style for the button.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "animation_color": {
+        "label": "Animation Color",
+        "description": "Color used by the animation.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "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/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

@@ -30,7 +30,7 @@
     "inactive_dot_opacity": 0.3,
     "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
     "inactive_dot_color": "THEME_COLORS.BACKGROUND",
-    "style": {
+    "styles": {
       "flexDirection": "row",
       "alignItems": "center",
       "justifyContent": "center",
@@ -38,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

@@ -40,7 +40,7 @@ export 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;
   };

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

@@ -11,13 +11,15 @@
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "width": "100%",
       "height": "100%"
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Paywall Provider",
     "description": "Provider/wrapper for paywall screen components.",
     "attributes": {

package/src/build-components/PaywallSubscribeButton/PaywallSubscribeButtonProps.generated.ts

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

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

@@ -8,7 +8,7 @@
     "extends": "Button"
   },
   "defaults": {
-    "style": {
+    "styles": {
       "paddingHorizontal": "20@s",
       "paddingVertical": "12@vs",
       "borderRadius": "12@s",
@@ -21,7 +21,9 @@
     }
   },
   "meta": {
-    "desiredParent": [">PaywallProvider"],
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
     "label": "Paywall Subscribe Button",
     "description": "Paywall subscribe call-to-action button. Extends Button.",
     "styles": {}

package/src/build-components/PriceTag/PriceTagProps.generated.ts

@@ -68,7 +68,7 @@ export interface PriceTagStyleGenerated {
 export interface PriceTagPropsGenerated {
   child: string;
   attributes: {
-    style?: PriceTagStyleGenerated;
+    styles?: PriceTagStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     translateCounter?: number;

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

@@ -9,19 +9,25 @@
     "attributes": {
       "showOriginalPricePossible": "boolean",
       "hideIfItsNotDiscount": "boolean",
-      "style": {
-        "textDecorationLine": ["none", "underline", "line-through"]
+      "styles": {
+        "textDecorationLine": [
+          "none",
+          "underline",
+          "line-through"
+        ]
       }
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "fontSize": "16@fs",
       "fontWeight": "700"
     }
   },
   "meta": {
-    "desiredParent": [">PaywallProvider"],
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
     "label": "Price Tag",
     "description": "Displays a price tag text. Extends Text.",
     "styles": {