@developer_tribe/react-builder 1.2.8 → 1.2.10

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

@@ -25,7 +25,8 @@
     ],
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "theme": {
         "label": "Theme",
         "description": "Controls which app theme(s) this onboarding is intended for.",

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

@@ -25,9 +25,6 @@ export interface OnboardSubtitleStyleGenerated {
   fontFamily?: string;
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
-  adjustsFontSizeToFit?: boolean;
-  showEllipsis?: boolean;
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -67,6 +64,9 @@ export interface OnboardSubtitlePropsGenerated {
   child: string;
   attributes: {
     style?: OnboardSubtitleStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    scrollable?: boolean;
   };
 }
 

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

@@ -25,9 +25,6 @@ export interface OnboardTitleStyleGenerated {
   fontFamily?: string;
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
-  adjustsFontSizeToFit?: boolean;
-  showEllipsis?: boolean;
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -67,6 +64,9 @@ export interface OnboardTitlePropsGenerated {
   child: string;
   attributes: {
     style?: OnboardTitleStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    scrollable?: boolean;
   };
 }
 

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

@@ -2,7 +2,7 @@ import React, { useId, useMemo } from 'react';
 import type { PaywallBackgroundComponentProps } from './PaywallBackgroundProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';

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

@@ -19,7 +19,6 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface PaywallBackgroundStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -59,6 +58,7 @@ export interface PaywallBackgroundPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallBackgroundStyleGenerated;
+    scrollable?: boolean;
   };
 }
 

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

@@ -2,7 +2,7 @@ import React, { useId, useMemo } from 'react';
 import type { PaywallCloseButtonComponentProps } from './PaywallCloseButtonProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -33,9 +33,10 @@ function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
-  const styleBag = node.attributes?.style;
-  const iconType = styleBag?.iconType ?? 'close';
-  const size = styleBag?.size ?? (style.fontSize as number | undefined) ?? 24;
+  const attrs = node.attributes;
+  const styleBag = attrs?.style;
+  const iconType = attrs?.iconType ?? 'close';
+  const size = attrs?.size ?? (style.fontSize as number | undefined) ?? 24;
   const color =
     (style.color as string | undefined) ??
     (styleBag?.color as string | undefined);

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

@@ -20,17 +20,11 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface PaywallCloseButtonStyleGenerated {
-  iconType?: string;
-  size?: number;
-  strokeWidth?: number;
   color?: string;
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
-  adjustsFontSizeToFit?: boolean;
-  showEllipsis?: boolean;
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -70,6 +64,12 @@ export interface PaywallCloseButtonPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallCloseButtonStyleGenerated;
+    iconType?: string;
+    size?: number;
+    strokeWidth?: number;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    scrollable?: boolean;
   };
 }
 

package/src/build-components/PaywallOptions/PaywallOptionButton.tsx

@@ -1,6 +1,6 @@
 import { useId, useMemo } from 'react';
 import type { Product } from '../../paywall/types/paywall-types';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import type { NodeData } from '../../types/Node';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';

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

@@ -19,7 +19,6 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface PaywallOptionsStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -59,6 +58,7 @@ export interface PaywallOptionsPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallOptionsStyleGenerated;
+    scrollable?: boolean;
   };
 }
 

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

@@ -3,7 +3,7 @@ import type { PaywallProviderComponentProps } from './PaywallProviderProps.gener
 import RenderNode from '../RenderNode.generated';
 import type { Node } from '../../types/Node';
 import useNode from '../useNode';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';

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

@@ -19,7 +19,6 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface PaywallProviderStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -59,6 +58,7 @@ export interface PaywallProviderPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallProviderStyleGenerated;
+    scrollable?: boolean;
   };
 }
 

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

@@ -3,7 +3,7 @@ import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeBut
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';

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

@@ -34,7 +34,6 @@ export interface PaywallSubscribeButtonStyleGenerated {
   color?: string;
   fontSize?: string;
   fontWeight?: FontWeightOptionType;
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -74,6 +73,7 @@ export interface PaywallSubscribeButtonPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallSubscribeButtonStyleGenerated;
+    scrollable?: boolean;
   };
 }
 

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

@@ -2,7 +2,7 @@ import React, { useContext, useId, useMemo } from 'react';
 import type { RadioButtonComponentProps } from './RadioButtonProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -96,10 +96,10 @@ function RadioButton({ node }: RadioButtonComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
-  const styleBag = node.attributes?.style;
-  const selected = Boolean(styleBag?.selected);
-  const color = styleBag?.color;
-  const size = parseNumberLike(styleBag?.size);
+  const attrs = node.attributes;
+  const selected = Boolean(attrs?.selected);
+  const color = attrs?.color;
+  const size = parseNumberLike(attrs?.size);
 
   return (
     <div

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

@@ -19,7 +19,6 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface RadioButtonStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -53,15 +52,16 @@ export interface RadioButtonStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  selected?: boolean;
-  color?: string;
-  size?: number;
 }
 
 export interface RadioButtonPropsGenerated {
   child: string;
   attributes: {
     style?: RadioButtonStyleGenerated;
+    scrollable?: boolean;
+    selected?: boolean;
+    color?: string;
+    size?: number;
   };
 }
 

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

@@ -17,13 +17,6 @@
     "label": "Radio Button",
     "description": "Generic radio button icon.",
     "styles": {
-      "selected": {
-        "label": "Selected",
-        "description": "Whether the radio is selected.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 0
-      },
       "color": {
         "label": "Color",
         "description": "Radio color.",
@@ -38,6 +31,15 @@
         "specialCategory": null,
         "sort": 2
       }
+    },
+    "attributes": {
+      "selected": {
+        "label": "Selected",
+        "description": "Whether the radio is selected.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 0
+      }
     }
   }
 }

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

@@ -8,7 +8,7 @@ import React, {
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -37,11 +37,11 @@ function Text({ node }: TextComponentProps) {
     [localize, keyOrText],
   );
 
-  const attrs = node.attributes;
-  const styleBag = attrs?.style;
-  const adjustsFontSizeToFit =
-    (styleBag?.adjustsFontSizeToFit as boolean | undefined) ?? false;
-  const showEllipsis = (styleBag?.showEllipsis as boolean | undefined) ?? false;
+  const styleBag = node.attributes?.style as unknown as
+    | { adjustsFontSizeToFit?: boolean; showEllipsis?: boolean }
+    | undefined;
+  const adjustsFontSizeToFit = styleBag?.adjustsFontSizeToFit ?? false;
+  const showEllipsis = styleBag?.showEllipsis ?? false;
 
   useLayoutEffect(() => {
     if (!adjustsFontSizeToFit) {

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

@@ -20,7 +20,6 @@ export type PositionOptionType = 'relative' | 'absolute';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 
 export interface TextStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -59,14 +58,15 @@ export interface TextStyleGenerated {
   fontFamily?: string;
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
-  adjustsFontSizeToFit?: boolean;
-  showEllipsis?: boolean;
 }
 
 export interface TextPropsGenerated {
   child: string;
   attributes: {
     style?: TextStyleGenerated;
+    scrollable?: boolean;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
   };
 }
 

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

@@ -5,13 +5,15 @@
     "children": "string",
     "extends": "View",
     "attributes": {
-      "color": "color",
-      "fontSize": "size",
-      "fontFamily": "fontFamily",
-      "fontWeight": "fontWeight",
-      "textAlign": ["left", "center", "right", "justify"],
       "adjustsFontSizeToFit": "boolean",
-      "showEllipsis": "boolean"
+      "showEllipsis": "boolean",
+      "style": {
+        "color": "color",
+        "fontSize": "size",
+        "fontFamily": "fontFamily",
+        "fontWeight": "fontWeight",
+        "textAlign": ["left", "center", "right", "justify"]
+      }
     }
   },
   "meta": {
@@ -54,20 +56,22 @@
         "category": "style",
         "specialCategory": null,
         "sort": 5
-      },
+      }
+    },
+    "attributes": {
       "adjustsFontSizeToFit": {
         "label": "Adjust Font Size To Fit",
         "description": "Automatically reduces font size to fit the available space.",
-        "category": "style",
+        "category": "other",
         "specialCategory": null,
-        "sort": 6
+        "sort": 1
       },
       "showEllipsis": {
         "label": "Show Ellipsis",
         "description": "If text overflows, show ellipsis (…); applied as single-line truncation.",
-        "category": "style",
+        "category": "other",
         "specialCategory": null,
-        "sort": 7
+        "sort": 2
       }
     }
   }

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

@@ -4,7 +4,7 @@ import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';

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

@@ -19,7 +19,6 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface ViewStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -59,6 +58,7 @@ export interface ViewPropsGenerated {
   child: string;
   attributes: {
     style?: ViewStyleGenerated;
+    scrollable?: boolean;
   };
 }
 

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

@@ -5,57 +5,60 @@
     "children": "node",
     "attributes": {
       "scrollable": "boolean",
-      "flexDirection": [
-        "row",
-        "column"
-      ],
-      "alignItems": [
-        "flex-start",
-        "center",
-        "flex-end",
-        "stretch",
-        "baseline"
-      ],
-      "justifyContent": [
-        "flex-start",
-        "center",
-        "flex-end",
-        "space-between",
-        "space-around",
-        "space-evenly"
-      ],
-      "gap": "size",
-      "padding": "size",
-      "paddingHorizontal": "size",
-      "paddingVertical": "size",
-      "paddingTop": "size",
-      "paddingBottom": "size",
-      "paddingLeft": "size",
-      "paddingRight": "size",
-      "margin": "size",
-      "marginVertical": "size",
-      "marginTop": "size",
-      "marginBottom": "size",
-      "marginLeft": "size",
-      "marginRight": "size",
-      "backgroundColor": "color",
-      "borderRadius": "size",
-      "width": "size",
-      "minWidth": "size",
-      "maxWidth": "size",
-      "height": "size",
-      "minHeight": "size",
-      "maxHeight": "size",
-      "flex": "number",
-      "position": [
-        "relative",
-        "absolute"
-      ],
-      "top": "size",
-      "bottom": "size",
-      "left": "size",
-      "right": "size",
-      "zIndex": "number"
+      "style": {
+        "flexDirection": [
+          "row",
+          "column"
+        ],
+        "alignItems": [
+          "flex-start",
+          "center",
+          "flex-end",
+          "stretch",
+          "baseline"
+        ],
+        "justifyContent": [
+          "flex-start",
+          "center",
+          "flex-end",
+          "space-between",
+          "space-around",
+          "space-evenly"
+        ],
+        "gap": "size",
+        "padding": "size",
+        "paddingHorizontal": "size",
+        "paddingVertical": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "margin": "size",
+        "marginHorizontal": "size",
+        "marginVertical": "size",
+        "marginTop": "size",
+        "marginBottom": "size",
+        "marginLeft": "size",
+        "marginRight": "size",
+        "backgroundColor": "color",
+        "borderRadius": "size",
+        "width": "size",
+        "minWidth": "size",
+        "maxWidth": "size",
+        "height": "size",
+        "minHeight": "size",
+        "maxHeight": "size",
+        "flex": "number",
+        "position": [
+          "relative",
+          "absolute"
+        ],
+        "top": "size",
+        "bottom": "size",
+        "left": "size",
+        "right": "size",
+        "zIndex": "number"
+      }
     }
   },
   "meta": {
@@ -91,6 +94,23 @@
       }
     },
     "styles": {
+      "backgroundColor": {
+        "label": "Background Color",
+        "description": "Background fill color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 20
+      },
+      "borderRadius": {
+        "label": "Border Radius",
+        "description": "Corner rounding amount.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 21,
+        "preferedScale": "s"
+      }
+    },
+    "attributes": {
       "scrollable": {
         "label": "Scrollable",
         "description": "Turns scroll interaction on.",
@@ -239,21 +259,6 @@
         "sort": 19,
         "preferedScale": "s"
       },
-      "backgroundColor": {
-        "label": "Background Color",
-        "description": "Background fill color.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 20
-      },
-      "borderRadius": {
-        "label": "Border Radius",
-        "description": "Corner rounding amount.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 21,
-        "preferedScale": "s"
-      },
       "width": {
         "label": "Width",
         "description": "Fixed width value.",