@developer_tribe/react-builder 1.2.6 → 1.2.8

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

@@ -22,45 +22,49 @@ export type ButtonTypeOptionType =
   | 'next_button'
   | 'skip_button';
 
+export interface CarouselButtonsStyleGenerated {
+  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;
+  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;
+  buttonType?: ButtonTypeOptionType;
+  skipNumber?: number;
+}
+
 export interface CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    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;
-    buttonType?: ButtonTypeOptionType;
-    skipNumber?: number;
+    style?: CarouselButtonsStyleGenerated;
   };
 }
 

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

@@ -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?.style?.dotType ?? 'normal_dot';
   const style = useExtractViewStyle(node);
 
   // Use the appropriate context based on sourceType

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

@@ -25,44 +25,48 @@ export type DotTypeOptionType =
   | 'sliding_dot'
   | 'liquid_like';
 
+export interface 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;
+  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;
+  dotType?: DotTypeOptionType;
+}
+
 export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    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;
+    style?: CarouselDotsStyleGenerated;
   };
 }
 

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 {
+  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;
+  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>;
-    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;
+    style?: CarouselItemStyleGenerated;
   };
 }
 

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 {
+  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;
+  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>;
-    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;
+    style?: CarouselProviderStyleGenerated;
   };
 }
 

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

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

@@ -19,45 +19,49 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 
+export interface 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;
+  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;
+  resizeMode?: ResizeModeOptionType;
+}
+
 export interface ImagePropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    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;
+    style?: ImageStyleGenerated;
     src?: string;
-    resizeMode?: ResizeModeOptionType;
   };
 }
 

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

@@ -8,28 +8,21 @@
       "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.",
+    "src": {
+      "label": "Src",
+      "description": "Image source URL.",
+      "category": "other",
+      "specialCategory": null,
+      "sort": 1
+    },
     "styles": {
-      "src": {
-        "label": "Src",
-        "description": "Image source URL.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 1
-      },
       "width": {
         "label": "Width",
         "description": "Image width.",

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

@@ -22,7 +22,7 @@ function Main({ node }: MainComponentProps) {
 
   const baseStyle = useExtractViewStyle(node);
 
-  const useSafeAreaView = node.attributes?.useSafeAreaView ?? true;
+  const useSafeAreaView = node.attributes?.style?.useSafeAreaView ?? true;
   const layoutStyle = useSafeAreaViewStyle(baseStyle, useSafeAreaView);
 
   const isSelected = isNodeSelected({

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

@@ -18,44 +18,48 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface 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;
+  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;
+  useSafeAreaView?: boolean;
+}
+
 export interface MainPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    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;
+    style?: MainStyleGenerated;
   };
 }
 

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 {
+  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;
+  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>;
-    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;
+    style?: OnboardStyleGenerated;
   };
 }
 

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

@@ -24,18 +24,19 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
 
-  const labelRaw = node.attributes?.labelKey ?? '';
+  const styleBag = node.attributes?.style;
+  const labelRaw = styleBag?.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 = styleBag?.button_text_color ?? '#FFFFFF';
+  const backgroundColor = styleBag?.button_background_color ?? '#0066FF';
   const viewStyle = useExtractViewStyle(node);
 
   const handleClick = () => {
     //TODO: any ??
-    const events: EventObjectGenerated[] = node.attributes?.events ?? [];
+    const events: EventObjectGenerated[] = styleBag?.events ?? [];
     let navigateHandled = false;
 
     for (const e of events) {