@developer_tribe/react-builder 1.0.2 → 1.0.4

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
 import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
@@ -11,10 +11,11 @@ import { extractViewStyle } from '../../utils/extractViewStyle';
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
   node = useNode(node);
-  const attributeKey =
+  const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardButtons';
-  const { appConfig } = useRenderStore((s) => ({
+  const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
+    projectColors: s.projectColors,
   }));
   const seperatorColorDefault =
     appConfig.theme === 'light'
@@ -43,7 +44,14 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     return <RenderNode node={node.children as Node} />;
   };
 
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  // NOTE: Hooks must not be called conditionally.
+  // Generate the id before any early returns so the hook order stays stable.
+  const generatedId = useId();
 
   // New condition logic: hide when condition is carousel-index and does not match
   const condition = (node.attributes as any)?.condition;
@@ -58,7 +66,11 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   }
 
   return (
-    <div attribute-key={attributeKey} style={viewStyle}>
+    <div
+      attribute-name={attributeName}
+      attribute-key={node.key ?? generatedId}
+      style={viewStyle}
+    >
       <div
         className="onboard__separator"
         style={{

package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type ButtonTypeOptionType =
   | 'previous_button'
   | 'next_button'
@@ -48,6 +49,13 @@ export interface OnboardButtonsPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
     buttons_direction?: ButtonsDirectionOptionType;

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

@@ -1,44 +1,78 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
 import type { OnboardDotComponentProps } from './OnboardDotProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 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');
 
   node = useNode(node);
 
-  const attributeKey = node.type ?? 'OnboardDot';
+  const generatedId = useId();
+  const attributeName = node.type ?? 'OnboardDot';
+  const attributeKey = node.key ?? generatedId;
   const dotType = node.attributes?.dotType || 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
-  const isDark = useRenderStore((s) => s.appConfig.theme === 'dark');
+  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
   const inactiveDotColor = isDark
     ? 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);
-    // 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]);
+  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;
@@ -66,43 +100,38 @@ 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 (
           <button
             key={index}
-            onClick={() => emblaApi?.scrollTo(snap)}
-            className={`embla__dot ${isSelected ? 'embla__dot--selected' : ''}`}
+            onClick={() => {
+              emblaApi?.scrollTo(snap);
+            }}
+            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

@@ -2,6 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type PositionOptionType = 'relative' | 'absolute';
 export type DotTypeOptionType =
   | 'expanding_dot'
   | 'normal_dot'
@@ -35,11 +36,16 @@ export interface OnboardDotPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    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

@@ -3,7 +3,7 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "OnboardDot",
-    "children": "node",
+    "children": "never",
     "extends": "View",
     "attributes": {
       "dotType": [
@@ -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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
@@ -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 }
@@ -90,18 +92,29 @@ function buildSegments(
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
   useLogRender('OnboardFooter');
   node = useNode(node);
-  const attributeKey =
+  const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardFooter';
-  const { appConfig } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-  }));
+  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);
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const textStyle = useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
 
   const linkStyle = (color?: string): React.CSSProperties => ({
     color,
@@ -109,16 +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

@@ -29,6 +29,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardFooterPropsGenerated {
   child: string;
@@ -59,6 +60,13 @@ export interface OnboardFooterPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     textLocalizationKey?: string;
     linkedWordFirstLocalizationKey?: string;
     linkedWordFirstColor?: string;

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

@@ -1,17 +1,28 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
 import useNode from '../useNode';
 import Lottie from 'lottie-react';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useRenderStore } from '../../store';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
   useLogRender('OnboardImage');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'OnboardImage';
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardImage';
+  const attributeKey = node.key ?? generatedId;
   const [lottie, setLottie] = useState<string | null>(null);
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
 
   useEffect(() => {
     if (node.attributes?.lottie) {
@@ -24,6 +35,7 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   if (node.attributes?.video_url) {
     return (
       <video
+        attribute-name={attributeName}
         attribute-key={attributeKey}
         autoPlay
         muted
@@ -37,13 +49,21 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   if (node.attributes?.lottie) {
     if (lottie) {
       return (
-        <div attribute-key={attributeKey} style={viewStyle}>
+        <div
+          attribute-name={attributeName}
+          attribute-key={attributeKey}
+          style={viewStyle}
+        >
           <Lottie animationData={lottie} />
         </div>
       );
     } else {
       return (
-        <div attribute-key={attributeKey} style={viewStyle}>
+        <div
+          attribute-name={attributeName}
+          attribute-key={attributeKey}
+          style={viewStyle}
+        >
           Loading...
         </div>
       );
@@ -51,7 +71,9 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   }
 
   return (
-    <Image node={{ ...node, type: 'image', sourceType: attributeKey } as any} />
+    <Image
+      node={{ ...node, type: 'image', sourceType: attributeName } as any}
+    />
   );
 }
 

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

@@ -17,6 +17,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardImagePropsGenerated {
   child: string;
@@ -25,7 +26,6 @@ export interface OnboardImagePropsGenerated {
     width?: string;
     height?: string;
     resizeMode?: ResizeModeOptionType;
-    borderRadius?: string;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -45,6 +45,14 @@ export interface OnboardImagePropsGenerated {
     marginLeft?: string;
     marginRight?: string;
     backgroundColor?: string;
+    borderRadius?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     video_url?: string;
     lottie?: string;
   };

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

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import { RenderNode } from '../..';
+import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
@@ -9,23 +10,23 @@ import { extractViewStyle } from '../../utils/extractViewStyle';
 function OnboardItem({ node }: OnboardItemComponentProps) {
   useLogRender('OnboardItem');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
-  const flexDirection = node.attributes?.flexDirection;
-  const display = node.attributes?.display;
-  const paddingHorizontal = parseSize(node.attributes?.paddingHorizontal);
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
+  const attributeKey = node.key ?? generatedId;
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
   return (
     <div
+      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

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type DisplayOptionType = 'flex' | 'block';
 
 export interface OnboardItemPropsGenerated {
@@ -43,6 +44,13 @@ export interface OnboardItemPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     display?: DisplayOptionType;
   };
 }