@developer_tribe/react-builder 1.0.3 → 1.0.4

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

@@ -5,6 +5,10 @@ import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useRenderStore } from '../../store';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { parseColor } from '../../utils/parseColor';
+import { parseSize } from '../../size-matters';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
   useLogRender('OnboardDot');
@@ -17,10 +21,14 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const dotType = node.attributes?.dotType || 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
   const isDark = appConfig.theme === 'dark';
 
   // OnboardDot specific attributes
@@ -28,23 +36,43 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     ? GHOST_DOT_DARK_COLOR
     : GHOST_DOT_LIGHT_COLOR;
   const inactiveDotOpacity = node.attributes?.inactive_dot_opacity ?? 0.3;
-  const dotStyle = node.attributes?.dot_style;
-  const containerStyle = node.attributes?.container_style;
   const activeDotColor = node.attributes?.active_dot_color;
+  const resolvedActiveDotColor = useMemo(
+    () => parseColor(activeDotColor, { appConfig, projectColors }),
+    [activeDotColor, appConfig, projectColors],
+  );
 
-  const style = useMemo(() => {
-    const baseStyle = extractViewStyle(node, { appConfig, projectColors });
-    // Merge container_style if provided
-    if (containerStyle) {
-      try {
-        const parsedContainerStyle = JSON.parse(containerStyle);
-        Object.assign(baseStyle, parsedContainerStyle);
-      } catch (e) {
-        // Invalid JSON, ignore
-      }
-    }
-    return baseStyle;
-  }, [node, containerStyle, appConfig, projectColors]);
+  const baseStyle = useMemo(() => {
+    let innerStyle = extractViewStyle(node, { appConfig, projectColors });
+    delete innerStyle.flexDirection;
+    return innerStyle;
+  }, [node, appConfig, projectColors]);
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+  const expandingDotWidthRaw = node.attributes?.expanding_dot_width;
+  const expandingDotWidthOverride = useMemo(() => {
+    const parsed = parseSize(expandingDotWidthRaw);
+    if (parsed === undefined) return undefined;
+
+    // `parseSize` may return number (px) or a string (e.g. "50%").
+    const cssWidth =
+      typeof parsed === 'number'
+        ? `${parsed}px`
+        : typeof parsed === 'string'
+          ? parsed
+          : undefined;
+
+    if (!cssWidth) return undefined;
+
+    return {
+      // Controls the actual dot diameter (`.embla__dot:after`).
+      ['--embla-dot-size' as any]: cssWidth,
+    } as React.CSSProperties;
+  }, [expandingDotWidthRaw]);
+  const containerStyle = useMergedStyle(style, expandingDotWidthOverride);
 
   const onboardApi = useContext(onboardContext);
   const emblaApi = onboardApi?.emblaApi;
@@ -72,34 +100,24 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     };
   }, [emblaApi]);
 
-  // Parse dot_style if provided
-  const parsedDotStyle = useMemo(() => {
-    if (!dotStyle) return {};
-    try {
-      return JSON.parse(dotStyle);
-    } catch (e) {
-      return {};
-    }
-  }, [dotStyle]);
-
   return (
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
       className={`embla__dots embla__dots--${dotType}`}
-      style={style}
+      style={containerStyle}
     >
       {scrollSnaps.map((snap, index) => {
-        const isSelected = selectedIndex === index;
+        const isDotSelected = selectedIndex === index;
         const dotStyles: React.CSSProperties = {
-          ...parsedDotStyle,
-          opacity: isSelected ? 1 : inactiveDotOpacity,
+          opacity: isDotSelected ? 1 : inactiveDotOpacity,
         };
 
-        if (activeDotColor && isSelected) {
-          dotStyles.color = activeDotColor;
-        } else if (!isSelected) {
-          dotStyles.color = inactiveDotColor;
+        if (resolvedActiveDotColor && isDotSelected) {
+          // Style the actual visual dot (rendered via `.embla__dot:after`) using a CSS variable.
+          (dotStyles as any)['--embla-dot-color'] = resolvedActiveDotColor;
+        } else if (!isDotSelected) {
+          (dotStyles as any)['--embla-dot-color'] = inactiveDotColor;
         }
 
         return (
@@ -108,10 +126,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
             onClick={() => {
               emblaApi?.scrollTo(snap);
             }}
-            className={`embla__dot ${isSelected ? 'embla__dot--selected' : ''}`}
+            className={`embla__dot ${isDotSelected ? 'embla__dot--selected' : ''}`}
             style={dotStyles}
+            aria-label={`Go to slide ${index + 1}`}
+            aria-current={isDotSelected ? 'true' : undefined}
           >
-            {isSelected ? '●' : '○'}
+            {/* Dot visuals are rendered via CSS (`.embla__dot:after`). */}
           </button>
         );
       })}

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -36,6 +36,7 @@ export interface OnboardDotPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;
@@ -44,9 +45,7 @@ export interface OnboardDotPropsGenerated {
     zIndex?: number;
     dotType?: DotTypeOptionType;
     inactive_dot_opacity?: number;
-    expanding_dot_width?: number;
-    dot_style?: string;
-    container_style?: string;
+    expanding_dot_width?: string;
     active_dot_color?: string;
   };
 }

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

@@ -15,9 +15,7 @@
         "liquid_like"
       ],
       "inactive_dot_opacity": "number",
-      "expanding_dot_width": "number",
-      "dot_style": "string",
-      "container_style": "string",
+      "expanding_dot_width": "size",
       "active_dot_color": "color",
       "flexDirection": "never",
       "alignItems": "never",
@@ -50,26 +48,12 @@
         "specialCategory": null,
         "sort": 3
       },
-      "dot_style": {
-        "label": "Dot Style",
-        "description": "Custom style for each dot.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 4
-      },
-      "container_style": {
-        "label": "Container Style",
-        "description": "Style for the dot wrapper.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 5
-      },
       "active_dot_color": {
         "label": "Active Dot Color",
         "description": "Color of the active dot.",
         "category": "style",
         "specialCategory": null,
-        "sort": 6
+        "sort": 4
       }
     }
   }

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

@@ -6,6 +6,8 @@ import { parseSize } from '../../size-matters';
 import { extractTextStyle } from '../../utils/extractTextStyle';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -92,19 +94,23 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   node = useNode(node);
   const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardFooter';
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
+  const { appConfig, projectColors, previewMode, current } = useRenderStore(
+    (s) => ({
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+      previewMode: s.previewMode,
+      current: s.current,
+    }),
+  );
   const { localication, defaultLanguage } = appConfig;
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const text = t(node?.attributes?.textLocalizationKey);
-  const textStyle: React.CSSProperties = extractTextStyle(node, {
-    appConfig,
-    projectColors,
-  });
+  const textStyle = useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
   const viewStyle = useMemo(
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
@@ -116,19 +122,26 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   });
 
   const paddingHorizontal = parseSize(node?.attributes?.paddingHorizontal);
+  const layoutStyle = useMemo<React.CSSProperties>(
+    () => ({
+      paddingLeft: paddingHorizontal,
+      paddingRight: paddingHorizontal,
+      textAlign: 'center',
+    }),
+    [paddingHorizontal],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const baseStyle = useMergedStyle(viewStyle, textStyle);
+  const paddedStyle = useMergedStyle(baseStyle, layoutStyle);
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
   return (
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      style={{
-        ...viewStyle,
-        ...textStyle,
-        paddingLeft: paddingHorizontal,
-        paddingRight: paddingHorizontal,
-        textAlign: 'center',
-      }}
+      className={isSelected ? 'rb-node-selected' : undefined}
+      style={paddedStyle}
     >
       {!!text &&
         (() => {

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -60,6 +60,7 @@ export interface OnboardFooterPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

@@ -26,7 +26,6 @@ export interface OnboardImagePropsGenerated {
     width?: string;
     height?: string;
     resizeMode?: ResizeModeOptionType;
-    borderRadius?: string;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -46,6 +45,8 @@ export interface OnboardImagePropsGenerated {
     marginLeft?: string;
     marginRight?: string;
     backgroundColor?: string;
+    borderRadius?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -13,9 +13,6 @@ function OnboardItem({ node }: OnboardItemComponentProps) {
   const generatedId = useId();
   const attributeName = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
   const attributeKey = node.key ?? generatedId;
-  const flexDirection = node.attributes?.flexDirection;
-  const display = node.attributes?.display;
-  const paddingHorizontal = parseSize(node.attributes?.paddingHorizontal);
   const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
     projectColors: s.projectColors,
@@ -29,14 +26,7 @@ function OnboardItem({ node }: OnboardItemComponentProps) {
       attribute-name={attributeName}
       attribute-key={attributeKey}
       className="embla__slide"
-      style={{
-        ...viewStyle,
-        gap: parseSize(node.attributes?.gap),
-        flexDirection,
-        display,
-        paddingRight: paddingHorizontal,
-        paddingLeft: paddingHorizontal,
-      }}
+      style={viewStyle}
     >
       {node.children && <RenderNode node={node.children} />}
     </div>

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -44,6 +44,7 @@ export interface OnboardItemPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -23,7 +23,6 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   const generatedId = useId();
   const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardProvider';
-  const device = useRenderStore((s) => s.device);
   const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
     projectColors: s.projectColors,
@@ -92,13 +91,7 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
         attribute-name={attributeName}
         attribute-key={attributeKey}
         className="carousel-provider"
-        style={{
-          ...viewStyle,
-          paddingTop: node.attributes?.paddingTop,
-          paddingRight: node.attributes?.paddingRight,
-          paddingBottom: node.attributes?.paddingBottom,
-          paddingLeft: node.attributes?.paddingLeft,
-        }}
+        style={viewStyle}
       >
         <div className="embla">
           <div className="embla__viewport" ref={emblaRef}>

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -43,6 +43,7 @@ export interface OnboardProviderPropsGenerated {
     borderRadius?: never;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -60,6 +60,7 @@ export interface OnboardSubtitlePropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -60,6 +60,7 @@ export interface OnboardTitlePropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -3,8 +3,9 @@ import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { extractTextStyle } from '../../utils/extractTextStyle';
-import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function Text({ node }: TextComponentProps) {
   useLogRender('Text');
@@ -22,22 +23,15 @@ function Text({ node }: TextComponentProps) {
   );
   const { defaultLanguage, localication } = appConfig;
   const keyOrText: string = node.children as string;
-  const textStyle = extractTextStyle(node, { appConfig, projectColors });
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
+  const textStyle = useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
-  const isSelected =
-    previewMode &&
-    !!current &&
-    (current as any)?.key &&
-    (node as any)?.key &&
-    (current as any).key === (node as any).key;
-  const style = {
-    ...viewStyle,
-    ...textStyle,
-    ...(isSelected ? { outline: '2px solid #2684FF' } : {}),
-  };
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    textStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
 
   return (
     <p

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

@@ -56,6 +56,7 @@ export interface TextPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -6,6 +6,8 @@ import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 export function View({ node }: ViewComponentProps) {
   useLogRender('View');
@@ -25,15 +27,11 @@ export function View({ node }: ViewComponentProps) {
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
-  const isSelected =
-    previewMode &&
-    !!current &&
-    (current as any)?.key &&
-    (node as any)?.key &&
-    (current as any).key === (node as any).key;
-  const viewStyle = isSelected
-    ? { ...baseStyle, outline: '2px solid #2684FF' }
-    : baseStyle;
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const viewStyle = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
   return (
     <div
       attribute-name={attributeName}

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

@@ -43,6 +43,7 @@ export interface ViewPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -34,6 +34,7 @@
       "borderRadius": "size",
       "width": "size",
       "height": "size",
+      "flex": "number",
       "position": ["relative", "absolute"],
       "top": "size",
       "bottom": "size",
@@ -255,12 +256,19 @@
         "sort": 1,
         "preferedScale": "vs"
       },
+      "flex": {
+        "label": "Flex",
+        "description": "Flex grow factor (e.g. 1 fills available space).",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 2
+      },
       "position": {
         "label": "Position",
         "description": "Sets layout positioning mode.",
         "category": "container",
         "specialCategory": null,
-        "sort": 2
+        "sort": 3
       },
       "top": {
         "label": "Top",