@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -4,6 +4,21 @@ import type { NodeData } from '../../types/Node';
 
 export type TypeOptionType = 'Permission' | 'Navigate';
 export type PermissionOptionType = 'att' | 'notification' | 'rating' | 'GDPR';
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type AnimationOptionType =
   | 'simple-animation'
   | 'line-animation'
@@ -21,12 +36,45 @@ export interface EventObjectGenerated {
 export interface OnboardButtonPropsGenerated {
   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;
     labelKey?: string;
     button_text_color?: string;
     animation?: AnimationOptionType;
     animation_color?: string;
     button_background_color?: string;
-    flex?: number;
     events?: EventObjectGenerated[];
   };
 }

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

@@ -1,12 +1,12 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardButton",
     "children": "never",
+    "extends": "View",
     "attributes": {
       "labelKey": "string",
-      "button_text_color": "string",
+      "button_text_color": "color",
       "animation": [
         "simple-animation",
         "line-animation",
@@ -14,18 +14,85 @@
         "blur-animation",
         "blur-line-animation"
       ],
-      "animation_color": "string",
-      "button_background_color": "string",
+      "animation_color": "color",
+      "button_background_color": "color",
       "flex": "number",
       "events": "EventObject[]"
     }
   },
   "types": {
     "EventObject": {
-      "type": ["Permission", "Navigate"],
-      "permission": ["att", "notification", "rating", "GDPR", "null"],
+      "type": [
+        "Permission",
+        "Navigate"
+      ],
+      "permission": [
+        "att",
+        "notification",
+        "rating",
+        "GDPR",
+        "null"
+      ],
       "navigate_to": "string",
       "targetIndex": "number"
     }
+  },
+  "meta": {
+    "desiredParent": [
+      "=OnboardButtons"
+    ],
+    "label": "Onboard Button",
+    "description": "Single action button for onboarding.",
+    "styles": {
+      "labelKey": {
+        "label": "Label Key",
+        "description": "Localization key for the button text.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "button_text_color": {
+        "label": "Button Text Color",
+        "description": "Text color of the button.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "animation": {
+        "label": "Animation",
+        "description": "Animation style for the button.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "animation_color": {
+        "label": "Animation Color",
+        "description": "Color used by the animation.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "button_background_color": {
+        "label": "Button Background Color",
+        "description": "Background color of the button.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 5
+      },
+      "flex": {
+        "label": "Flex",
+        "description": "Flex grow value in layout.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 6
+      },
+      "events": {
+        "label": "Events",
+        "description": "List of events fired by the button.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 7
+      }
+    }
   }
 }

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

@@ -1,15 +1,21 @@
-import React, { useContext, useEffect, 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';
 import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
+import { useLogRender } from '../../utils/useLogRender';
+import { extractViewStyle } from '../../utils/extractViewStyle';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
+  useLogRender('OnboardButtons');
   node = useNode(node);
-  const { appConfig } = useRenderStore((s) => ({
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardButtons';
+  const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
+    projectColors: s.projectColors,
   }));
   const seperatorColorDefault =
     appConfig.theme === 'light'
@@ -24,13 +30,6 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     }
   }, [ctx.selectedIndex]);
 
-  // New condition logic: hide when condition is carousel-index and does not match
-  const condition = (node.attributes as any)?.condition;
-  const conditionVariable = (node.attributes as any)?.conditionVariable;
-  if (condition === 'carousel-index' && typeof conditionVariable === 'number') {
-    if (conditionVariable !== selectedIndex) return null;
-  }
-
   const direction =
     node.attributes?.buttons_direction === 'column' ? 'column' : 'row';
   const seperatorColor =
@@ -45,8 +44,33 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     return <RenderNode node={node.children as 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;
+  const conditionVariable = (node.attributes as any)?.conditionVariable;
+  const shouldHide =
+    condition === 'carousel-index' &&
+    typeof conditionVariable === 'number' &&
+    conditionVariable !== selectedIndex;
+
+  if (shouldHide) {
+    return null;
+  }
+
   return (
-    <>
+    <div
+      attribute-name={attributeName}
+      attribute-key={node.key ?? generatedId}
+      style={viewStyle}
+    >
       <div
         className="onboard__separator"
         style={{
@@ -69,7 +93,7 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
       >
         {renderChildren()}
       </div>
-    </>
+    </div>
   );
 }
 

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

@@ -2,6 +2,21 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type ButtonTypeOptionType =
   | 'previous_button'
   | 'next_button'
@@ -12,6 +27,40 @@ export type ConditionOptionType = 'carousel-index';
 export interface OnboardButtonsPropsGenerated {
   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;
     buttons_direction?: ButtonsDirectionOptionType;

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

@@ -1,17 +1,84 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardButtons",
     "children": "node",
+    "extends": "View",
     "attributes": {
-      "buttonType": ["previous_button", "next_button", "skip_button"],
+      "buttonType": [
+        "previous_button",
+        "next_button",
+        "skip_button"
+      ],
       "skipNumber": "number",
-      "buttons_direction": ["row", "column"],
+      "buttons_direction": [
+        "row",
+        "column"
+      ],
       "forIndex": "number",
-      "seperatorColor": "string",
-      "condition": ["carousel-index"],
+      "seperatorColor": "color",
+      "condition": [
+        "carousel-index"
+      ],
       "conditionVariable": "number"
     }
+  },
+  "meta": {
+    "desiredParent": [
+      "=OnboardItem"
+    ],
+    "label": "Onboard Buttons",
+    "description": "Wrapper for onboarding button set.",
+    "styles": {
+      "buttonType": {
+        "label": "Button Type",
+        "description": "Which onboard button to show.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "skipNumber": {
+        "label": "Skip Number",
+        "description": "Slide index to skip to.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "buttons_direction": {
+        "label": "Buttons Direction",
+        "description": "Direction to lay out buttons.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "forIndex": {
+        "label": "For Index",
+        "description": "Show only for this slide index.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "seperatorColor": {
+        "label": "Seperator Color",
+        "description": "Color of the divider line.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 5
+      },
+      "condition": {
+        "label": "Condition",
+        "description": "Built-in condition to check.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 6
+      },
+      "conditionVariable": {
+        "label": "Condition Variable",
+        "description": "Value used when checking the condition.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 7
+      }
+    }
   }
 }

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

@@ -1,11 +1,142 @@
-import React from 'react';
-import type { OnboardDotComponentProps } from './OnboardExpandingDotProps.generated';
-import CarouselDots from '../CarouselDots/CarouselDots';
+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);
-  return <CarouselDots node={{ ...node, type: 'carouselDots' } as any} />;
+
+  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 { 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 activeDotColor = node.attributes?.active_dot_color;
+  const resolvedActiveDotColor = useMemo(
+    () => parseColor(activeDotColor, { appConfig, projectColors }),
+    [activeDotColor, 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;
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    const snaps = emblaApi.scrollSnapList();
+    const selected = emblaApi.selectedScrollSnap();
+    setScrollSnaps(snaps);
+    setSelectedIndex(selected);
+
+    const onSelect = () => {
+      const sel = emblaApi.selectedScrollSnap();
+      setSelectedIndex(sel);
+    };
+    emblaApi.on('select', onSelect);
+
+    return () => {
+      if (emblaApi && emblaApi.off) {
+        emblaApi.off('select', onSelect);
+      }
+    };
+  }, [emblaApi]);
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      className={`embla__dots embla__dots--${dotType}`}
+      style={containerStyle}
+    >
+      {scrollSnaps.map((snap, index) => {
+        const isDotSelected = selectedIndex === index;
+        const dotStyles: React.CSSProperties = {
+          opacity: isDotSelected ? 1 : inactiveDotOpacity,
+        };
+
+        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 ${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>
+  );
 }
 
 export default React.memo(OnboardDot);

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'
@@ -13,11 +14,43 @@ export type DotTypeOptionType =
 export interface OnboardDotPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
+    scrollable?: boolean;
+    flexDirection?: never;
+    alignItems?: never;
+    justifyContent?: never;
+    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;
     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

@@ -1,9 +1,9 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardDot",
-    "children": "node",
+    "children": "never",
+    "extends": "View",
     "attributes": {
       "dotType": [
         "expanding_dot",
@@ -14,10 +14,48 @@
         "liquid_like"
       ],
       "inactive_dot_opacity": "number",
-      "expanding_dot_width": "number",
-      "dot_style": "string",
-      "container_style": "string",
-      "active_dot_color": "string"
+      "expanding_dot_width": "size",
+      "active_dot_color": "color",
+      "flexDirection": "never",
+      "alignItems": "never",
+      "justifyContent": "never"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      ">OnboardProvider"
+    ],
+    "label": "Onboard Dot",
+    "description": "Renders onboarding progress dots.",
+    "styles": {
+      "dotType": {
+        "label": "Dot Type",
+        "description": "Dot animation style.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "inactive_dot_opacity": {
+        "label": "Inactive Dot Opacity",
+        "description": "Opacity for inactive dots.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "expanding_dot_width": {
+        "label": "Expanding Dot Width",
+        "description": "Width used while expanding.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "active_dot_color": {
+        "label": "Active Dot Color",
+        "description": "Color of the active dot.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      }
     }
   }
 }