@developer_tribe/react-builder 1.2.7 → 1.2.9

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?.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,51 +24,48 @@ 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 {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
 
 export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: CarouselDotsStyleGenerated;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
     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

@@ -18,43 +18,47 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface CarouselItemStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
 export interface CarouselItemPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: CarouselItemStyleGenerated;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
   };
 }
 

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

@@ -18,43 +18,47 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface CarouselProviderStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
 export interface CarouselProviderPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: CarouselProviderStyleGenerated;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
   };
 }
 

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');
@@ -16,6 +16,7 @@ function Image({ node }: ImageComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const { previewMode, selectedKey } = useBuilderParams();
   const imageStyle = useExtractImageStyle(node);
+  const src = node.attributes?.src;
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,
@@ -28,10 +29,10 @@ function Image({ node }: ImageComponentProps) {
 
   return (
     <img
-      key={node.key + (node.attributes?.src ?? '-')}
+      key={node.key + (src ?? '-')}
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      src={resolveImageSrc(node.attributes?.src)}
+      src={resolveImageSrc(src)}
       style={style}
       alt=""
     />

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,46 +18,51 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
+
+export interface ImageStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
 
 export interface ImagePropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: ImageStyleGenerated;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
+    src?: string;
     width?: string;
-    minWidth?: string;
-    maxWidth?: string;
     height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
-    src?: string;
     resizeMode?: ResizeModeOptionType;
   };
 }

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

@@ -8,21 +8,15 @@
       "src": "string",
       "width": "size",
       "height": "size",
-      "resizeMode": [
-        "cover",
-        "contain",
-        "stretch",
-        "center"
-      ]
+      "resizeMode": ["cover", "contain", "stretch", "center"]
     }
   },
   "meta": {
-    "desiredParent": [
-      "all"
-    ],
+    "desiredParent": ["all"],
     "label": "Image",
     "description": "Shows an image or graphic.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "src": {
         "label": "Src",
         "description": "Image source URL.",
@@ -47,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';

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

@@ -18,43 +18,47 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface MainStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
 export interface MainPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: MainStyleGenerated;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
     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

@@ -18,43 +18,47 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface OnboardStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
 export interface OnboardPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: OnboardStyleGenerated;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
   };
 }
 

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,18 +24,20 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
 
-  const labelRaw = node.attributes?.labelKey ?? '';
+  const attrs = node.attributes;
+  const styleBag = attrs?.style;
+  const labelRaw = attrs?.labelKey ?? '';
   const localize = useLocalize({ appConfig });
   const label = localize(labelRaw);
 
-  const flex = node.attributes?.flex ?? 1;
-  const textColor = node.attributes?.button_text_color ?? '#FFFFFF';
-  const backgroundColor = node.attributes?.button_background_color ?? '#0066FF';
+  const flex = styleBag?.flex ?? 1;
+  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[] = node.attributes?.events ?? [];
+    const events: EventObjectGenerated[] = attrs?.events ?? [];
     let navigateHandled = false;
 
     for (const e of events) {