@developer_tribe/react-builder 1.2.8 → 1.2.10

package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts

@@ -2,6 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,10 +18,8 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 
 export interface BackgroundImageStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -54,14 +53,15 @@ export interface BackgroundImageStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  resizeMode?: ResizeModeOptionType;
 }
 
 export interface BackgroundImagePropsGenerated {
   child: string;
   attributes: {
     style?: BackgroundImageStyleGenerated;
+    scrollable?: boolean;
     src?: string;
+    resizeMode?: ResizeModeOptionType;
   };
 }
 

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

@@ -3,8 +3,8 @@ import type { ButtonComponentProps } from './ButtonProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
-import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+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/Button/ButtonProps.generated.ts

@@ -31,7 +31,6 @@ export type FontWeightOptionType =
   | '900';
 
 export interface ButtonStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -74,6 +73,7 @@ export interface ButtonPropsGenerated {
   child: string;
   attributes: {
     style?: ButtonStyleGenerated;
+    scrollable?: boolean;
   };
 }
 

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

@@ -5,21 +5,23 @@
     "children": "string",
     "extends": "View",
     "attributes": {
-      "color": "color",
-      "fontSize": "size",
-      "fontWeight": [
-        "normal",
-        "bold",
-        "100",
-        "200",
-        "300",
-        "400",
-        "500",
-        "600",
-        "700",
-        "800",
-        "900"
-      ]
+      "style": {
+        "color": "color",
+        "fontSize": "size",
+        "fontWeight": [
+          "normal",
+          "bold",
+          "100",
+          "200",
+          "300",
+          "400",
+          "500",
+          "600",
+          "700",
+          "800",
+          "900"
+        ]
+      }
     }
   },
   "meta": {

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

@@ -5,7 +5,7 @@ import { isCarouselItem } from '../../utils/isCarousel';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -2,6 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type AlignOptionType = 'start' | 'center' | 'end';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,10 +18,8 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type AlignOptionType = 'start' | 'center' | 'end';
 
 export interface CarouselStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -60,6 +59,7 @@ export interface CarouselPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselStyleGenerated;
+    scrollable?: boolean;
     loop?: boolean;
     dragFree?: boolean;
     align?: AlignOptionType;

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

@@ -3,7 +3,7 @@ import type { CarouselButtonsComponentProps } from './CarouselButtonsProps.gener
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 function CarouselButtons({ node }: CarouselButtonsComponentProps) {
   useLogRender('CarouselButtons');
@@ -13,11 +13,8 @@ function CarouselButtons({ node }: CarouselButtonsComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const style = useExtractViewStyle(node);
   const emblaApi = useContext(carouselContext);
-  const styleBag = node.attributes?.style;
-  const buttonTypes = styleBag?.buttonType || [
-    'previous_button',
-    'next_button',
-  ];
+  const attrs = node.attributes;
+  const buttonTypes = attrs?.buttonType || ['previous_button', 'next_button'];
 
   return (
     <div
@@ -44,7 +41,7 @@ function CarouselButtons({ node }: CarouselButtonsComponentProps) {
       )}
       {buttonTypes.includes('skip_button') && (
         <button
-          onClick={() => emblaApi?.scrollTo(styleBag?.skipNumber)}
+          onClick={() => emblaApi?.scrollTo(attrs?.skipNumber)}
           className="embla__button embla__button--skip"
         >
           Skip

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -2,6 +2,10 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ButtonTypeOptionType =
+  | 'previous_button'
+  | 'next_button'
+  | 'skip_button';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,13 +21,8 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ButtonTypeOptionType =
-  | 'previous_button'
-  | 'next_button'
-  | 'skip_button';
 
 export interface CarouselButtonsStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -57,14 +56,15 @@ export interface CarouselButtonsStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  buttonType?: ButtonTypeOptionType;
-  skipNumber?: number;
 }
 
 export interface CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselButtonsStyleGenerated;
+    scrollable?: boolean;
+    buttonType?: ButtonTypeOptionType;
+    skipNumber?: number;
   };
 }
 

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

@@ -20,7 +20,8 @@
     ],
     "label": "Carousel Buttons",
     "description": "Renders built-in carousel buttons.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "buttonType": {
         "label": "Button Type",
         "description": "Which carousel button to show.",

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

@@ -4,7 +4,7 @@ import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
   useLogRender('CarouselDots');
@@ -15,7 +15,7 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const attributeName = node.sourceType ?? node.type ?? 'carouselDots';
   const attributeKey = node.key ?? generatedId;
 
-  const dotType = node.attributes?.style?.dotType ?? 'normal_dot';
+  const dotType = node.attributes?.dotType ?? 'normal_dot';
   const style = useExtractViewStyle(node);
 
   // Use the appropriate context based on sourceType

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -2,6 +2,13 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type DotTypeOptionType =
+  | 'expanding_dot'
+  | 'normal_dot'
+  | 'scaling_dot'
+  | 'sliding_border'
+  | 'sliding_dot'
+  | 'liquid_like';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,16 +24,8 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type DotTypeOptionType =
-  | 'expanding_dot'
-  | 'normal_dot'
-  | 'scaling_dot'
-  | 'sliding_border'
-  | 'sliding_dot'
-  | 'liquid_like';
 
 export interface CarouselDotsStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -60,13 +59,14 @@ export interface CarouselDotsStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  dotType?: DotTypeOptionType;
 }
 
 export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselDotsStyleGenerated;
+    scrollable?: boolean;
+    dotType?: DotTypeOptionType;
   };
 }
 

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

@@ -3,7 +3,7 @@ import type { CarouselItemComponentProps } from './CarouselItemProps.generated';
 import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 export function CarouselItem({ node }: CarouselItemComponentProps) {
   useLogRender('CarouselItem');

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

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

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

@@ -3,7 +3,7 @@ import type { CarouselProviderComponentProps } from './CarouselProviderProps.gen
 import RenderNode from '../RenderNode.generated';
 import useEmblaCarousel from 'embla-carousel-react';
 import useNode from '../useNode';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { isCarousel } from '../../utils/isCarousel';
 import type { Node, NodeData } from '../../types/Node';
 

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

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

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

@@ -6,7 +6,7 @@ import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
-import { useExtractImageStyle } from '../../hooks/useExtractImageStyle';
+import { useExtractImageStyle } from '../../attribute-analyser/style/web/useExtractImageStyle';
 
 function Image({ node }: ImageComponentProps) {
   useLogRender('Image');

package/src/build-components/Image/ImageProps.generated.ts

@@ -2,6 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,10 +18,8 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 
 export interface ImageStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -54,14 +53,17 @@ export interface ImageStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  resizeMode?: ResizeModeOptionType;
 }
 
 export interface ImagePropsGenerated {
   child: string;
   attributes: {
     style?: ImageStyleGenerated;
+    scrollable?: boolean;
     src?: string;
+    width?: string;
+    height?: string;
+    resizeMode?: ResizeModeOptionType;
   };
 }
 

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

@@ -15,14 +15,15 @@
     "desiredParent": ["all"],
     "label": "Image",
     "description": "Shows an image or graphic.",
-    "src": {
-      "label": "Src",
-      "description": "Image source URL.",
-      "category": "other",
-      "specialCategory": null,
-      "sort": 1
-    },
-    "styles": {
+    "styles": {},
+    "attributes": {
+      "src": {
+        "label": "Src",
+        "description": "Image source URL.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
       "width": {
         "label": "Width",
         "description": "Image width.",
@@ -40,7 +41,7 @@
       "resizeMode": {
         "label": "Resize Mode",
         "description": "How the image fits the frame.",
-        "category": "style",
+        "category": "other",
         "specialCategory": null,
         "sort": 4
       }

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

@@ -4,7 +4,7 @@ import RenderNode from '../RenderNode.generated';
 import type { 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';
@@ -22,7 +22,7 @@ function Main({ node }: MainComponentProps) {
 
   const baseStyle = useExtractViewStyle(node);
 
-  const useSafeAreaView = node.attributes?.style?.useSafeAreaView ?? true;
+  const useSafeAreaView = node.attributes?.useSafeAreaView ?? true;
   const layoutStyle = useSafeAreaViewStyle(baseStyle, useSafeAreaView);
 
   const isSelected = isNodeSelected({

package/src/build-components/Main/MainProps.generated.ts

@@ -19,7 +19,6 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface MainStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -53,13 +52,14 @@ export interface MainStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  useSafeAreaView?: boolean;
 }
 
 export interface MainPropsGenerated {
   child: string;
   attributes: {
     style?: MainStyleGenerated;
+    scrollable?: boolean;
+    useSafeAreaView?: boolean;
   };
 }
 

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

@@ -24,7 +24,8 @@
     "label": "Main",
     "description": "Top-level screen wrapper (safe area, base layout).",
     "hideAllAttributes": true,
-    "styles": {
+    "styles": {},
+    "attributes": {
       "useSafeAreaView": {
         "label": "Use Safe Area View",
         "description": "Wraps content with a safe-area-aware container (when supported by the target).",

package/src/build-components/Onboard/OnboardProps.generated.ts

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

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

@@ -7,7 +7,7 @@ import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
 
@@ -24,19 +24,20 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
 
-  const styleBag = node.attributes?.style;
-  const labelRaw = styleBag?.labelKey ?? '';
+  const attrs = node.attributes;
+  const styleBag = attrs?.style;
+  const labelRaw = attrs?.labelKey ?? '';
   const localize = useLocalize({ appConfig });
   const label = localize(labelRaw);
 
   const flex = styleBag?.flex ?? 1;
-  const textColor = styleBag?.button_text_color ?? '#FFFFFF';
-  const backgroundColor = styleBag?.button_background_color ?? '#0066FF';
+  const textColor = attrs?.button_text_color ?? '#FFFFFF';
+  const backgroundColor = attrs?.button_background_color ?? '#0066FF';
   const viewStyle = useExtractViewStyle(node);
 
   const handleClick = () => {
     //TODO: any ??
-    const events: EventObjectGenerated[] = styleBag?.events ?? [];
+    const events: EventObjectGenerated[] = attrs?.events ?? [];
     let navigateHandled = false;
 
     for (const e of events) {

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

@@ -4,6 +4,12 @@ import type { NodeData } from '../../types/Node';
 
 export type TypeOptionType = 'Permission' | 'Navigate';
 export type PermissionOptionType = 'att' | 'notification' | 'rating' | 'GDPR';
+export type AnimationOptionType =
+  | 'simple-animation'
+  | 'line-animation'
+  | 'blur'
+  | 'blur-animation'
+  | 'blur-line-animation';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -19,12 +25,6 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type AnimationOptionType =
-  | 'simple-animation'
-  | 'line-animation'
-  | 'blur'
-  | 'blur-animation'
-  | 'blur-line-animation';
 
 export interface EventObjectGenerated {
   type?: TypeOptionType;
@@ -34,7 +34,6 @@ export interface EventObjectGenerated {
 }
 
 export interface OnboardButtonStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -68,18 +67,20 @@ export interface OnboardButtonStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  labelKey?: string;
-  button_text_color?: string;
-  animation?: AnimationOptionType;
-  animation_color?: string;
-  button_background_color?: string;
-  events?: EventObjectGenerated[];
 }
 
 export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
     style?: 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

@@ -44,13 +44,6 @@
     "label": "Onboard Button",
     "description": "Single action button for onboarding.",
     "styles": {
-      "labelKey": {
-        "label": "Label Key",
-        "description": "Localization key for the button text.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 1
-      },
       "button_text_color": {
         "label": "Button Text Color",
         "description": "Text color of the button.",
@@ -78,6 +71,15 @@
         "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",