@developer_tribe/react-builder 1.2.30 → 1.2.32

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": {

package/src/build-components/Pricing/PricingProps.generated.ts

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

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

@@ -9,7 +9,7 @@
   },
   "defaults": {
     "translateCounter": 2,
-    "style": {
+    "styles": {
       "textAlign": "center",
       "fontSize": "12@fs",
       "fontWeight": "400",
@@ -17,7 +17,9 @@
     }
   },
   "meta": {
-    "desiredParent": [">PaywallProvider"],
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
     "label": "Pricing",
     "description": "Displays pricing details (e.g. promo/trial breakdown). Extends Text.",
     "styles": {}

package/src/build-components/Promo/PromoProps.generated.ts

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

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

@@ -9,7 +9,7 @@
   },
   "defaults": {
     "translateCounter": 2,
-    "style": {
+    "styles": {
       "textAlign": "center",
       "fontSize": "12@fs",
       "fontWeight": "600",
@@ -17,7 +17,9 @@
     }
   },
   "meta": {
-    "desiredParent": [">PaywallProvider"],
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
     "label": "Promo",
     "description": "Displays promotional badge/text (e.g. discount percentage). Extends Text.",
     "styles": {}

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

@@ -28,11 +28,14 @@ export type RadioButtonBaseProps = {
 
 export function RadioButtonBase({
   selected,
-  color = '#A6A6A6',
+  color,
   size = 24,
 }: RadioButtonBaseProps) {
   const borderWidth = Math.round(size * 0.1);
   const sizeHalf = Math.round(size * 0.5);
+  const { projectColors } = useBuilderParams();
+  const resolvedColor =
+    color ?? projectColors?.STATIC_COLORS?.RADIO_BUTTON_COLOR ?? '#A6A6A6';
 
   const paramsContext = useContext(ParamsContext);
   const { singleProductIsSelected: contextIsSelected } =
@@ -47,7 +50,7 @@ export function RadioButtonBase({
           alignItems: 'center',
           borderWidth,
           borderStyle: 'solid',
-          borderColor: color,
+          borderColor: resolvedColor,
           width: size,
           height: size,
           borderRadius: sizeHalf,
@@ -61,7 +64,7 @@ export function RadioButtonBase({
               width: sizeHalf,
               height: sizeHalf,
               borderRadius: sizeHalf * 2,
-              backgroundColor: color,
+              backgroundColor: resolvedColor,
             }}
           />
         ) : (

package/src/build-components/RadioButton/RadioButtonProps.generated.ts

@@ -59,7 +59,7 @@ export interface RadioButtonStyleGenerated {
 export interface RadioButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: RadioButtonStyleGenerated;
+    styles?: RadioButtonStyleGenerated;
     scrollable?: boolean;
     selected?: boolean;
     color?: string;

package/src/build-components/RenderNode.generated.tsx

@@ -48,9 +48,9 @@ import type { SeparatorComponentProps } from './Separator/SeparatorProps.generat
 import type { StatusBarColorComponentProps } from './StatusBarColor/StatusBarColorProps.generated';
 import type { TextComponentProps } from './Text/TextProps.generated';
 import type { ViewComponentProps } from './View/ViewProps.generated';
-import BIcon from './BIcon/BIcon';
-import BackgroundImage from './BackgroundImage/BackgroundImage';
-import Button from './Button/Button';
+import { BIcon } from './BIcon/BIcon';
+import { BackgroundImage } from './BackgroundImage/BackgroundImage';
+import { Button } from './Button/Button';
 import Carousel from './Carousel/Carousel';
 import CarouselButtons from './CarouselButtons/CarouselButtons';
 import CarouselDots from './CarouselDots/CarouselDots';
@@ -61,9 +61,9 @@ import Image from './Image/Image';
 import Main from './Main/Main';
 import NavigationBarColor from './NavigationBarColor/NavigationBarColor';
 import Onboard from './Onboard/Onboard';
-import OnboardButton from './OnboardButton/OnboardButton';
+import { OnboardButton } from './OnboardButton/OnboardButton';
 import OnboardButtons from './OnboardButtons/OnboardButtons';
-import OnboardDot from './OnboardDot/OnboardDot';
+import { OnboardDot } from './OnboardDot/OnboardDot';
 import OnboardFooter from './OnboardFooter/OnboardFooter';
 import OnboardImage from './OnboardImage/OnboardImage';
 import OnboardItem from './OnboardItem/OnboardItem';
@@ -71,7 +71,7 @@ import OnboardProvider from './OnboardProvider/OnboardProvider';
 import OnboardSubtitle from './OnboardSubtitle/OnboardSubtitle';
 import OnboardTitle from './OnboardTitle/OnboardTitle';
 import PaywallBackground from './PaywallBackground/PaywallBackground';
-import PaywallCloseButton from './PaywallCloseButton/PaywallCloseButton';
+import { PaywallCloseButton } from './PaywallCloseButton/PaywallCloseButton';
 import PaywallOptions from './PaywallOptions/PaywallOptions';
 import PaywallProvider from './PaywallProvider/PaywallProvider';
 import PaywallSubscribeButton from './PaywallSubscribeButton/PaywallSubscribeButton';
@@ -81,7 +81,7 @@ import Promo from './Promo/Promo';
 import RadioButton from './RadioButton/RadioButton';
 import Separator from './Separator/Separator';
 import StatusBarColor from './StatusBarColor/StatusBarColor';
-import Text from './Text/Text';
+import { Text } from './Text/Text';
 import View from './View/View';
 
 type BuilderNode =

package/src/build-components/Separator/SeparatorProps.generated.ts

@@ -15,7 +15,7 @@ export interface SeparatorStyleGenerated {
 export interface SeparatorPropsGenerated {
   child: string;
   attributes: {
-    style?: SeparatorStyleGenerated;
+    styles?: SeparatorStyleGenerated;
   };
 }
 

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

@@ -6,7 +6,7 @@
     "description": "description",
     "children": "never",
     "attributes": {
-      "style": {
+      "styles": {
         "backgroundColor": "color",
         "width": "size",
         "height": "size",
@@ -18,7 +18,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Separator",
     "description": "Horizontal line separator.",
     "styles": {
@@ -50,7 +52,7 @@
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "width": "100%",
       "height": 2,
       "backgroundColor": "#000000"

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

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

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

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

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

@@ -8,7 +8,7 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
 
-function Text({ node }: TextComponentProps) {
+export function Text({ node }: TextComponentProps) {
   useLogRender('Text');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'text';
@@ -39,7 +39,7 @@ function Text({ node }: TextComponentProps) {
     //Optimzation trade off by readability: could avoid dict lookup on subsequent passes
   }, [localize, keyOrText, translateCounter]);
 
-  const styleBag = node.attributes?.style as unknown as
+  const styleBag = node.attributes?.styles as unknown as
     | { adjustsFontSizeToFit?: boolean; showEllipsis?: boolean }
     | undefined;
   const adjustsFontSizeToFit = styleBag?.adjustsFontSizeToFit ?? false;

package/src/build-components/Text/TextProps.generated.ts

@@ -63,7 +63,7 @@ export interface TextStyleGenerated {
 export interface TextPropsGenerated {
   child: string;
   attributes: {
-    style?: TextStyleGenerated;
+    styles?: TextStyleGenerated;
     scrollable?: boolean;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;

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

@@ -10,7 +10,7 @@
       "adjustsFontSizeToFit": "boolean",
       "showEllipsis": "boolean",
       "translateCounter": "number",
-      "style": {
+      "styles": {
         "color": "color",
         "fontSize": "size",
         "fontFamily": "fontFamily",
@@ -19,7 +19,7 @@
     },
     "defaults": {
       "translateCounter": 1,
-      "style": {
+      "styles": {
         "color": "THEME_COLORS.TEXT",
         "fontSize": "16@fs",
         "fontWeight": "400"
@@ -27,7 +27,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Text",
     "description": "Displays simple text.",
     "styles": {

package/src/build-components/View/ViewProps.generated.ts

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

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

@@ -7,9 +7,16 @@
     "children": "node",
     "attributes": {
       "scrollable": "boolean",
-      "style": {
-        "flexDirection": ["row", "column"],
-        "flexWrap": ["nowrap", "wrap", "wrap-reverse"],
+      "styles": {
+        "flexDirection": [
+          "row",
+          "column"
+        ],
+        "flexWrap": [
+          "nowrap",
+          "wrap",
+          "wrap-reverse"
+        ],
         "alignItems": [
           "flex-start",
           "center",
@@ -49,7 +56,10 @@
         "minHeight": "size",
         "maxHeight": "size",
         "flex": "number",
-        "position": ["relative", "absolute"],
+        "position": [
+          "relative",
+          "absolute"
+        ],
         "top": "size",
         "bottom": "size",
         "left": "size",
@@ -59,7 +69,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "View",
     "description": "Base layout container.",
     "specialCategories": {
@@ -365,7 +377,7 @@
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "flexDirection": "column",
       "position": "relative",
       "zIndex": 1,