@developer_tribe/react-builder 1.2.19 → 1.2.21

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

@@ -20,8 +20,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const attributeName = node.type ?? 'OnboardDot';
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
-  const styleBag = attrs?.style;
-  const dotType = attrs?.dotType || 'normal_dot';
+  const stylesBag =
+    ((attrs as any)?.styles as Record<string, unknown> | undefined) ??
+    ((attrs as any)?.style as Record<string, unknown> | undefined) ??
+    undefined;
+  const dotType =
+    (stylesBag?.dotType as any) ?? (attrs as any)?.dotType ?? 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const {
@@ -37,12 +41,32 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const inactiveDotColor = isDark
     ? GHOST_DOT_DARK_COLOR
     : GHOST_DOT_LIGHT_COLOR;
-  const inactiveDotOpacity = attrs?.inactive_dot_opacity ?? 0.3;
-  const activeDotColor = attrs?.active_dot_color;
+  const inactiveDotOpacity =
+    (stylesBag?.inactive_dot_opacity as number | undefined) ??
+    (attrs as any)?.inactive_dot_opacity ??
+    0.3;
+  const inactiveDotColorOverride =
+    (stylesBag?.inactive_dot_color as string | undefined) ??
+    (attrs as any)?.inactive_dot_color;
+  const activeDotColor =
+    (stylesBag?.active_dot_color as string | undefined) ??
+    (attrs as any)?.active_dot_color;
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
     [activeDotColor, appConfig.theme, projectColors],
   );
+  const resolvedInactiveDotColor = useMemo(() => {
+    const parsed = parseColor(inactiveDotColorOverride, {
+      theme: appConfig.theme,
+      projectColors,
+    });
+    return parsed ?? inactiveDotColor;
+  }, [
+    inactiveDotColor,
+    inactiveDotColorOverride,
+    appConfig.theme,
+    projectColors,
+  ]);
 
   const extractedStyle = useExtractViewStyle(node);
   const baseStyle = useMemo(() => {
@@ -58,27 +82,31 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const expandingDotWidthRaw = attrs?.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': cssWidth,
-    } as React.CSSProperties & Record<`--${string}`, string>;
-  }, [expandingDotWidthRaw]);
-  const containerStyle = useMergedStyle(style, expandingDotWidthOverride);
+  const dotThicknessRaw =
+    (stylesBag?.dot_thickness as any) ?? (attrs as any)?.dot_thickness;
+  const dotSizeCss = useMemo((): string => {
+    const parsed = parseSize(dotThicknessRaw);
+    if (parsed === undefined) return '10px';
+    if (typeof parsed === 'number') return `${parsed}px`;
+    if (typeof parsed === 'string' && parsed.trim()) return parsed;
+    return '10px';
+  }, [dotThicknessRaw]);
+  const dotGapCss = useMemo((): string => {
+    // Prefer px math when possible; otherwise fall back to 10px/3.
+    const px =
+      typeof dotSizeCss === 'string' && dotSizeCss.trim().endsWith('px')
+        ? Number.parseFloat(dotSizeCss)
+        : Number.NaN;
+    const n = Number.isFinite(px) ? px : 10;
+    return `${Math.max(0, n / 3)}px`;
+  }, [dotSizeCss]);
+  const gapValue = (style as any)?.gap ?? dotGapCss;
+  const containerStyle = useMergedStyle(style, {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: gapValue,
+    alignItems: 'center',
+  });
 
   const onboardApi = useContext(onboardContext);
   const emblaApi = onboardApi?.emblaApi;
@@ -115,30 +143,33 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     >
       {scrollSnaps.map((snap, index) => {
         const isDotSelected = selectedIndex === index;
-        const dotStyles: React.CSSProperties & Record<`--${string}`, string> = {
-          opacity: isDotSelected ? 1 : inactiveDotOpacity,
-        };
-
-        if (resolvedActiveDotColor && isDotSelected) {
-          // Style the actual visual dot (rendered via `.embla__dot:after`) using a CSS variable.
-          dotStyles['--embla-dot-color'] = resolvedActiveDotColor;
-        } else if (!isDotSelected) {
-          dotStyles['--embla-dot-color'] = inactiveDotColor;
-        }
+        const resolvedColor =
+          isDotSelected && resolvedActiveDotColor
+            ? resolvedActiveDotColor
+            : resolvedInactiveDotColor;
+        const activeFallback = '#007AFF';
+        const dotColor = resolvedColor ?? activeFallback;
 
         return (
           <button
             key={index}
-            onClick={() => {
-              emblaApi?.scrollTo(snap);
+            className="embla__dot"
+            style={{
+              width: dotSizeCss,
+              height: dotSizeCss,
+              backgroundColor: dotColor,
+              opacity: isDotSelected ? 1 : inactiveDotOpacity,
+              borderRadius: '9999px',
+              border: 0,
+              padding: 0,
+              margin: 0,
+              display: 'inline-block',
+              cursor: 'pointer',
+              boxSizing: 'border-box',
             }}
-            className={`embla__dot ${isDotSelected ? 'embla__dot--selected' : ''}`}
-            style={dotStyles}
             aria-label={`Go to slide ${index + 1}`}
             aria-current={isDotSelected ? 'true' : undefined}
-          >
-            {/* Dot visuals are rendered via CSS (`.embla__dot:after`). */}
-          </button>
+          />
         );
       })}
     </div>

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

@@ -10,6 +10,7 @@ export type DotTypeOptionType =
   | 'sliding_dot'
   | 'liquid_like';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -27,6 +28,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardDotStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;
@@ -69,8 +71,9 @@ export interface OnboardDotPropsGenerated {
     title?: string;
     description?: string;
     dotType?: DotTypeOptionType;
+    dot_thickness?: string;
     inactive_dot_opacity?: number;
-    expanding_dot_width?: string;
+    inactive_dot_color?: string;
     active_dot_color?: string;
     flexDirection?: never;
     alignItems?: never;

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

@@ -15,18 +15,29 @@
         "sliding_dot",
         "liquid_like"
       ],
+      "dot_thickness": "size",
       "inactive_dot_opacity": "number",
-      "expanding_dot_width": "size",
+      "inactive_dot_color": "color",
       "active_dot_color": "color",
       "flexDirection": "never",
       "alignItems": "never",
       "justifyContent": "never"
     }
   },
+  "defaults": {
+    "dotType": "expanding_dot",
+    "dot_thickness": 10,
+    "inactive_dot_opacity": 0.3,
+    "active_dot_color": "#007AFF",
+    "style": {
+      "flexDirection": "row",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "gap": "12@s"
+    }
+  },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider"
-    ],
+    "desiredParent": [">OnboardProvider"],
     "label": "Onboard Dot",
     "description": "Renders onboarding progress dots.",
     "styles": {
@@ -42,21 +53,28 @@
         "description": "Opacity for inactive dots.",
         "category": "style",
         "specialCategory": null,
-        "sort": 2
+        "sort": 3
       },
-      "expanding_dot_width": {
-        "label": "Expanding Dot Width",
-        "description": "Width used while expanding.",
+      "inactive_dot_color": {
+        "label": "Inactive Dot Color",
+        "description": "Color of inactive dots.",
         "category": "style",
         "specialCategory": null,
-        "sort": 3
+        "sort": 4
+      },
+      "dot_thickness": {
+        "label": "Dot Thickness",
+        "description": "Dot size/diameter.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
       },
       "active_dot_color": {
         "label": "Active Dot Color",
         "description": "Color of the active dot.",
         "category": "style",
         "specialCategory": null,
-        "sort": 4
+        "sort": 5
       }
     }
   }

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

@@ -2,13 +2,13 @@ import React, { useId, useMemo } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { parseSize } from '../../size-matters';
 import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
-import { isNodeSelected } from '../../utils/selection';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { defaultAppConfig } from '../../types/PreviewConfig';
+import { parseColor } from '../../utils/parseColor';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -98,48 +98,57 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     appConfig: builderAppConfig,
     previewMode,
     selectedKey,
+    projectColors: builderProjectColors,
   } = useBuilderParams();
   const appConfig = builderAppConfig ?? defaultAppConfig;
-  const { localication, defaultLanguage } = appConfig;
+  const projectColors = builderProjectColors;
+  const { localication, defaultLanguage, theme } = appConfig;
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const attrs = node?.attributes;
-  const styleBag = attrs?.style;
   const text = t(attrs?.textLocalizationKey);
-  const textStyle = useExtractTextStyle(node);
+  const textStyle = useExtractTextStyle(node, true);
   const viewStyle = useExtractViewStyle(node);
 
-  const linkStyle = (color?: string): React.CSSProperties => ({
-    color,
-    cursor: color ? 'pointer' : undefined,
-  });
-
-  const paddingHorizontal = parseSize(styleBag?.paddingHorizontal);
-  const layoutStyle = useMemo<React.CSSProperties>(
-    () => ({
-      paddingLeft: paddingHorizontal,
-      paddingRight: paddingHorizontal,
-      textAlign: 'center',
-    }),
-    [paddingHorizontal],
+  // Parse colors for linked words
+  const parsedFirstColor = useMemo(
+    () =>
+      parseColor(attrs?.linkedWordFirstColor, {
+        projectColors,
+        theme,
+      }),
+    [attrs?.linkedWordFirstColor, projectColors, theme],
+  );
+  const parsedSecondColor = useMemo(
+    () =>
+      parseColor(attrs?.linkedWordSecondColor, {
+        projectColors,
+        theme,
+      }),
+    [attrs?.linkedWordSecondColor, projectColors, theme],
   );
 
+  const mergedTextStyle = useMergedStyle(textStyle, {
+    cursor: 'pointer',
+  });
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,
     node,
   });
-  const baseStyle = useMergedStyle(viewStyle, textStyle);
-  const paddedStyle = useMergedStyle(baseStyle, layoutStyle);
+  const mergedViewStyle = useMergedStyle(
+    viewStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
+
   return (
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      className={isSelected ? 'rb-node-selected' : undefined}
-      style={paddedStyle}
+      style={mergedViewStyle}
     >
       {!!text &&
         (() => {
@@ -148,57 +157,60 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
           const { segments, matchCount } = buildSegments(text, [
             {
               value: firstText,
-              color: attrs?.linkedWordFirstColor,
-              page: (attrs as any)?.linkedWordFirstPage,
+              color: parsedFirstColor,
+              page: attrs?.linkedWordFirstPage,
             },
             {
               value: secondText,
-              color: attrs?.linkedWordSecondColor,
-              page: (attrs as any)?.linkedWordSecondPage,
+              color: parsedSecondColor,
+              page: attrs?.linkedWordSecondPage,
             },
           ]);
 
-          const textColor = styleBag?.color;
-
           const handleClick = (page?: string) => {
             if (!page) return;
           };
 
           return (
             <>
-              <p style={{ color: textColor, alignItems: 'center' }}>
-                {segments.map((seg, i) =>
-                  seg.type === 'text' ? (
-                    <span key={i}>{seg.value}</span>
-                  ) : (
-                    <span
-                      key={i}
-                      style={linkStyle(seg.color)}
-                      onClick={() => handleClick(seg.page)}
-                    >
-                      {seg.value}
-                    </span>
-                  ),
-                )}
-              </p>
+              {segments.map((seg, i) =>
+                seg.type === 'text' ? (
+                  <span key={i} style={mergedTextStyle}>
+                    {seg.value}
+                  </span>
+                ) : (
+                  <span
+                    key={i}
+                    style={{
+                      ...mergedTextStyle,
+                      color: seg.color,
+                    }}
+                    onClick={() => handleClick(seg.page)}
+                  >
+                    {seg.value}
+                  </span>
+                ),
+              )}
               {matchCount === 0 && (
                 <div>
                   {attrs?.linkedWordFirstLocalizationKey && (
                     <span
-                      style={linkStyle(attrs?.linkedWordFirstColor)}
-                      onClick={() =>
-                        handleClick((attrs as any)?.linkedWordFirstPage)
-                      }
+                      style={{
+                        ...mergedTextStyle,
+                        color: parsedFirstColor,
+                      }}
+                      onClick={() => handleClick(attrs?.linkedWordFirstPage)}
                     >
                       {firstText}
                     </span>
                   )}
                   {attrs?.linkedWordSecondLocalizationKey && (
                     <span
-                      style={linkStyle(attrs?.linkedWordSecondColor)}
-                      onClick={() =>
-                        handleClick((attrs as any)?.linkedWordSecondPage)
-                      }
+                      style={{
+                        ...mergedTextStyle,
+                        color: parsedSecondColor,
+                      }}
+                      onClick={() => handleClick(attrs?.linkedWordSecondPage)}
                     >
                       {secondText}
                     </span>

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface OnboardFooterStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -18,13 +18,16 @@
   },
   "defaults": {
     "style": {
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "textAlign": "center",
       "paddingHorizontal": "24@s"
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardItem"
-    ],
+    "desiredParent": [">OnboardItem"],
     "label": "Onboard Footer",
     "description": "Footer text with optional links.",
     "styles": {

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -21,6 +22,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardImageStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -12,11 +12,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider",
-      ">OnboardItem",
-      "!=Onboard"
-    ],
+    "desiredParent": [">OnboardProvider", ">OnboardItem", "!=Onboard"],
     "label": "Onboard Image",
     "description": "Onboarding hero image with media.",
     "styles": {},

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type DisplayOptionType = 'flex' | 'block';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -21,6 +22,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardItemStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -7,15 +7,9 @@
     "attributes": {
       "title": "title",
       "description": "description",
-      "display": [
-        "flex",
-        "block"
-      ],
+      "display": ["flex", "block"],
       "gap": "size",
-      "flexDirection": [
-        "row",
-        "column"
-      ],
+      "flexDirection": ["row", "column"],
       "paddingHorizontal": "size"
     }
   },
@@ -28,9 +22,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "=Onboard"
-    ],
+    "desiredParent": ["=Onboard"],
     "label": "Onboard Item",
     "description": "Single onboarding screen section.",
     "styles": {},

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type ThemeOptionType = 'light' | 'dark' | 'all';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -21,6 +22,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardProviderStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -7,11 +7,7 @@
     "attributes": {
       "title": "title",
       "description": "description",
-      "theme": [
-        "light",
-        "dark",
-        "all"
-      ],
+      "theme": ["light", "dark", "all"],
       "borderRadius": "never"
     }
   },
@@ -22,9 +18,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "root"
-    ],
+    "desiredParent": ["root"],
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
     "styles": {},

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface OnboardSubtitleStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -16,10 +16,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider",
-      ">OnboardItem"
-    ],
+    "desiredParent": [">OnboardProvider", ">OnboardItem"],
     "label": "Onboard Subtitle",
     "description": "Subtitle text for an onboarding step.",
     "styles": {}

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface OnboardTitleStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -17,10 +17,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardItem",
-      ">OnboardProvider"
-    ],
+    "desiredParent": [">OnboardItem", ">OnboardProvider"],
     "label": "Onboard Title",
     "description": "Title text for an onboarding step.",
     "styles": {}