@developer_tribe/react-builder 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "type": "module",
   "restricted": true,
   "main": "dist/index.cjs.js",

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

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import type { OnboardButtonComponentProps } from './OnboardButtonProps.generated';
-import { carouselContext } from '../CarouselProvider/CarouselProvider';
+import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import { mainNodeContext } from '../../RenderMainNode';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
-  const emblaApi = useContext(carouselContext);
+  const { emblaApi } = useContext(onboardContext) ?? {};
   const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
 
   const labelRaw = node.attributes?.labelKey ?? '';

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

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
-import { carouselContext } from '../CarouselProvider/CarouselProvider';
+import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import RenderNode from '../RenderNode.generated';
 
 const THEME_COLORS = {
@@ -9,22 +9,21 @@ const THEME_COLORS = {
 };
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
-  const emblaApi = useContext(carouselContext);
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const ctx = useContext(onboardContext) ?? {};
+  const emblaApi = ctx.emblaApi;
+  const [selectedIndex, setSelectedIndex] = useState(ctx.selectedIndex ?? 0);
 
   useEffect(() => {
-    if (!emblaApi) return;
-    setSelectedIndex(emblaApi.selectedScrollSnap());
-    emblaApi.on('select', () => {
-      setSelectedIndex(emblaApi.selectedScrollSnap());
-    });
-  }, [emblaApi]);
+    if (typeof ctx.selectedIndex === 'number') {
+      setSelectedIndex(ctx.selectedIndex);
+    }
+  }, [ctx.selectedIndex]);
 
-  if (
-    typeof node.attributes?.forIndex === 'number' &&
-    node.attributes?.forIndex !== selectedIndex
-  ) {
-    return null;
+  // 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 =

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

@@ -10,6 +10,8 @@ export interface OnboardButtonsPropsGenerated {
     buttons_direction?: 'row' | 'column';
     forIndex?: number;
     seperatorColor?: string;
+    condition?: 'carousel-index';
+    conditionVariable?: number;
   };
 }
 

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

@@ -9,7 +9,9 @@
       "skipNumber": "number",
       "buttons_direction": ["row", "column"],
       "forIndex": "number",
-      "seperatorColor": "string"
+      "seperatorColor": "string",
+      "condition": ["carousel-index"],
+      "conditionVariable": "number"
     }
   }
 }

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

@@ -12,6 +12,11 @@ export interface OnboardDotPropsGenerated {
       | 'sliding_border'
       | 'sliding_dot'
       | 'liquid_like';
+    inactive_dot_opacity?: number;
+    expanding_dot_width?: number;
+    dot_style?: string;
+    container_style?: string;
+    active_dot_color?: string;
   };
 }
 

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

@@ -12,7 +12,12 @@
         "sliding_border",
         "sliding_dot",
         "liquid_like"
-      ]
+      ],
+      "inactive_dot_opacity": "number",
+      "expanding_dot_width": "number",
+      "dot_style": "string",
+      "container_style": "string",
+      "active_dot_color": "string"
     }
   }
 }

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

@@ -1,12 +1,17 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import type { NodeData } from '../../types/Node';
 import type { OnboardProviderComponentProps } from './OnboardProviderProps.generated';
-import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import { mainNodeContext } from '../../RenderMainNode';
-import { isNodeArray } from '../../utils/analyseNode';
 import useEmblaCarousel from 'embla-carousel-react';
 import RenderNode from '../RenderNode.generated';
 
+export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   const { theme, setWarning } = useContext(mainNodeContext) ?? {};
@@ -43,7 +48,7 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   }, [theme]);
 
   return (
-    <carouselContext.Provider value={emblaApi}>
+    <onboardContext.Provider value={{ emblaApi, selectedIndex }}>
       <div className="carousel-provider">
         <div className="embla">
           <div className="embla__viewport" ref={emblaRef}>
@@ -51,7 +56,7 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
           </div>
         </div>
       </div>
-    </carouselContext.Provider>
+    </onboardContext.Provider>
   );
 }
 

package/src/utils/novaToJson.ts

@@ -77,6 +77,13 @@ function buildCarouselItem(
   const components = (page?.attributes?.components || []) as any[];
   const children: Node[] = [];
 
+  // Resolve page index for condition mapping
+  const currentKey = page?.attributes?.key as string | undefined;
+  const pageIndex =
+    typeof currentKey === 'string' && pageKeyToIndex.has(currentKey)
+      ? pageKeyToIndex.get(currentKey)!
+      : undefined;
+
   for (const comp of components) {
     if (comp?.layout === 'title-layout') {
       const title = comp?.attributes?.title_localization_key || '';
@@ -195,11 +202,14 @@ function buildCarouselItem(
       }
 
       if (buttonNodes.length > 0) {
-        // Place buttons inside the page (OnboardItem) instead of provider level
-        children.push({
+        // Place buttons at provider level with visibility conditioned by page index
+        providerLevelButtons.push({
           type: 'OnboardButtons',
           attributes: {
             ...(direction ? { buttons_direction: direction } : {}),
+            ...(typeof pageIndex === 'number'
+              ? { condition: 'carousel-index', conditionVariable: pageIndex }
+              : {}),
           },
           children: buttonNodes as unknown as Node,
         } as unknown as NodeData);
@@ -223,16 +233,52 @@ function mapDotsFromGeneralComponents(generalComponents: any[]): Node | null {
   const dots = generalComponents.find((gc) => gc?.layout === 'dots-layout');
   if (!dots) return null;
   const dotArray = dots?.attributes?.dot || [];
-  const dotType = dotArray?.[0]?.layout as
+  const firstDot = dotArray?.[0];
+  const dotType = firstDot?.layout as
     | 'expanding_dot'
     | 'normal_dot'
     | 'scaling_dot'
     | 'sliding_border'
     | 'sliding_dot'
     | 'liquid_like';
+  const dotAttrs = (firstDot?.attributes || {}) as Record<string, unknown>;
+
+  const parseNumber = (value: unknown): number | undefined => {
+    if (typeof value === 'number') return value;
+    if (typeof value === 'string' && value.trim().length > 0) {
+      const n = Number(value);
+      return Number.isFinite(n) ? n : undefined;
+    }
+    return undefined;
+  };
+
+  const inactiveDotOpacity = parseNumber(dotAttrs?.inactive_dot_opacity);
+  const expandingDotWidth = parseNumber(dotAttrs?.expanding_dot_width);
+  const dot_style =
+    typeof dotAttrs?.dot_style === 'string'
+      ? (dotAttrs.dot_style as string)
+      : undefined;
+  const container_style =
+    typeof dotAttrs?.container_style === 'string'
+      ? (dotAttrs.container_style as string)
+      : undefined;
+  const active_dot_color =
+    typeof dotAttrs?.active_dot_color === 'string'
+      ? (dotAttrs.active_dot_color as string)
+      : undefined;
+
+  const attributes: Record<string, unknown> = {};
+  if (dotType) attributes.dotType = dotType;
+  if (inactiveDotOpacity !== undefined)
+    attributes.inactive_dot_opacity = inactiveDotOpacity;
+  if (expandingDotWidth !== undefined)
+    attributes.expanding_dot_width = expandingDotWidth;
+  if (dot_style) attributes.dot_style = dot_style;
+  if (container_style) attributes.container_style = container_style;
+  if (active_dot_color) attributes.active_dot_color = active_dot_color;
   return {
     type: 'OnboardDot',
-    attributes: dotType ? { dotType } : undefined,
+    attributes: Object.keys(attributes).length ? attributes : undefined,
     children: undefined as unknown as Node,
   } as unknown as NodeData;
 }