@developer_tribe/react-builder 1.2.7 → 1.2.9

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -19,50 +19,54 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface BIconStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  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 BIconPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    color?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    textAlign?: TextAlignOptionType;
+    style?: BIconStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     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;
     iconType?: string;
     size?: number;
     strokeWidth?: number;

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

@@ -11,12 +11,11 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "all"
-    ],
+    "desiredParent": ["all"],
     "label": "BIcon",
     "description": "Renders an icon from the icon set.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "iconType": {
         "label": "Icon",
         "description": "Which icon to render.",
@@ -27,14 +26,14 @@
       "size": {
         "label": "Size",
         "description": "Icon size (px).",
-        "category": "style",
+        "category": "other",
         "specialCategory": null,
         "sort": 2
       },
       "strokeWidth": {
         "label": "Stroke Width",
         "description": "SVG stroke width override (applied to the icon paths).",
-        "category": "style",
+        "category": "other",
         "specialCategory": null,
         "sort": 3
       }

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

@@ -2,7 +2,7 @@ import React, { useId, useMemo } from 'react';
 import type { BackgroundImageComponentProps } from './BackgroundImageProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -20,17 +20,20 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
   const baseStyle = useExtractViewStyle(node);
   const backgroundStyle = useMemo(() => {
     const attrs = node.attributes;
+    const styleBag = attrs?.style;
     const style: React.CSSProperties = {
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',
     };
 
-    if (attrs?.src) {
-      const resolved = resolveImageSrc(attrs.src);
+    const src = attrs?.src;
+    if (src) {
+      const resolved = resolveImageSrc(src);
       if (resolved) style.backgroundImage = `url(${resolved})`;
     }
 
-    switch (attrs?.resizeMode) {
+    const resizeMode = attrs?.resizeMode ?? (styleBag as any)?.resizeMode;
+    switch (resizeMode) {
       case 'cover':
         style.backgroundSize = 'cover';
         break;

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,45 +18,48 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
+
+export interface BackgroundImageStyleGenerated {
+  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 BackgroundImagePropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: BackgroundImageStyleGenerated;
     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;
     src?: string;
     resizeMode?: ResizeModeOptionType;
   };

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

@@ -6,29 +6,21 @@
     "extends": "View",
     "attributes": {
       "src": "string",
-      "resizeMode": [
-        "cover",
-        "contain",
-        "stretch",
-        "center"
-      ]
+      "resizeMode": ["cover", "contain", "stretch", "center"]
     }
   },
   "meta": {
-    "desiredParent": [
-      "all",
-      "background"
-    ],
+    "desiredParent": ["all", "background"],
     "label": "Background Image",
     "description": "Background image.",
+    "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
-      },
       "resizeMode": {
         "label": "Resize Mode",
         "description": "How the image fits its container.",

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';
@@ -33,10 +33,11 @@ function Button({ node }: ButtonComponentProps) {
     combinedTextStyle.textAlign,
   ]);
   const buttonDefaults = useMemo(() => {
+    const styleBag = node?.attributes?.style;
     const hasExplicitBackground =
-      node?.attributes?.backgroundColor !== undefined &&
-      node?.attributes?.backgroundColor !== null &&
-      String(node?.attributes?.backgroundColor).trim() !== '';
+      styleBag?.backgroundColor !== undefined &&
+      styleBag?.backgroundColor !== null &&
+      String(styleBag?.backgroundColor).trim() !== '';
     return {
       cursor: 'pointer',
       textDecoration: 'none',
@@ -44,7 +45,7 @@ function Button({ node }: ButtonComponentProps) {
         ? undefined
         : { backgroundColor: 'transparent' }),
     } as React.CSSProperties;
-  }, [node?.attributes?.backgroundColor]);
+  }, [node?.attributes?.style]);
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,

package/src/build-components/Button/ButtonProps.generated.ts

@@ -30,46 +30,50 @@ export type FontWeightOptionType =
   | '800'
   | '900';
 
+export interface ButtonStyleGenerated {
+  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;
+  color?: string;
+  fontSize?: string;
+  fontWeight?: FontWeightOptionType;
+}
+
 export interface ButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: ButtonStyleGenerated;
     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;
-    color?: string;
-    fontSize?: string;
-    fontWeight?: FontWeightOptionType;
   };
 }
 

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,45 +18,48 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type AlignOptionType = 'start' | 'center' | 'end';
+
+export interface CarouselStyleGenerated {
+  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 CarouselPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: CarouselStyleGenerated;
     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;
     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,10 +13,8 @@ function CarouselButtons({ node }: CarouselButtonsComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const style = useExtractViewStyle(node);
   const emblaApi = useContext(carouselContext);
-  const buttonTypes = node.attributes?.buttonType || [
-    'previous_button',
-    'next_button',
-  ];
+  const attrs = node.attributes;
+  const buttonTypes = attrs?.buttonType || ['previous_button', 'next_button'];
 
   return (
     <div
@@ -43,7 +41,7 @@ function CarouselButtons({ node }: CarouselButtonsComponentProps) {
       )}
       {buttonTypes.includes('skip_button') && (
         <button
-          onClick={() => emblaApi?.scrollTo(node.attributes?.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,48 +21,48 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ButtonTypeOptionType =
-  | 'previous_button'
-  | 'next_button'
-  | 'skip_button';
+
+export interface CarouselButtonsStyleGenerated {
+  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 CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: 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;
-    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;
   };

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.",