@developer_tribe/react-builder 1.2.31 → 1.2.32

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/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/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

@@ -39,7 +39,7 @@ export 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,

package/src/build-components/patterns.generated.ts

@@ -13,7 +13,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -478,7 +478,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -879,7 +879,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -1297,7 +1297,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -1678,7 +1678,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -2072,7 +2072,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -2474,7 +2474,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -2852,7 +2852,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -3235,7 +3235,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -3683,7 +3683,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -4078,7 +4078,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -4471,7 +4471,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -4850,7 +4850,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -5229,7 +5229,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -5277,6 +5277,7 @@ export const patterns = [
           left: 'size',
           right: 'size',
           zIndex: 'number',
+          color: 'color',
         },
         labelKey: 'string',
         animation: [
@@ -5287,7 +5288,6 @@ export const patterns = [
           'blur-line-animation',
         ],
         animation_color: 'color',
-        flex: 'number',
         events: 'EventObject[]',
       },
     },
@@ -5337,20 +5337,6 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-        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: {
         scrollable: {
@@ -5558,9 +5544,9 @@ export const patterns = [
         },
         flex: {
           label: 'Flex',
-          description: 'Flex grow value in layout.',
+          description: 'Flex grow factor (e.g. 1 fills available space).',
           category: 'container',
-          specialCategory: null,
+          specialCategory: 'size',
           sort: 6,
         },
         position: {
@@ -5623,6 +5609,29 @@ export const patterns = [
           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,
+          },
+        },
       },
     },
     defaults: {
@@ -5635,6 +5644,7 @@ export const patterns = [
         flexShrink: 0,
         height: '40@vs',
         borderRadius: '12@s',
+        color: 'THEME_COLORS.ONBOARD_BUTTON_PRIMARY_TEXT',
       },
     },
     types: {
@@ -5655,7 +5665,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -6095,7 +6105,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -6533,7 +6543,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -7033,7 +7043,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         src: 'string',
-        style: {
+        styles: {
           resizeMode: ['cover', 'contain', 'stretch', 'center'],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
@@ -7444,7 +7454,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -7834,7 +7844,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -8222,7 +8232,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -8663,7 +8673,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -9105,7 +9115,7 @@ export const patterns = [
         src: 'string',
         resizeMode: ['cover', 'contain', 'stretch', 'center'],
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -9509,7 +9519,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -9976,7 +9986,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -10357,7 +10367,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -10746,7 +10756,7 @@ export const patterns = [
       description: 'description',
       children: 'string',
       attributes: {
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontWeight: [
@@ -11173,7 +11183,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -11640,7 +11650,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -12083,7 +12093,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -12524,7 +12534,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -12925,7 +12935,7 @@ export const patterns = [
       description: 'description',
       children: 'never',
       attributes: {
-        style: {
+        styles: {
           backgroundColor: 'color',
           width: 'size',
           height: 'size',
@@ -12981,7 +12991,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -13360,7 +13370,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -13801,7 +13811,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [