@developer_tribe/react-builder 0.1.20 → 0.1.22

package/dist/styles.css

@@ -0,0 +1 @@
+.embla{max-width:48rem;margin:auto;--slide-height: 19rem;--slide-spacing: 1rem;--slide-size: 70%}.embla__viewport{overflow:hidden}.embla__container{display:flex;touch-action:pan-y pinch-zoom;margin-left:calc(var(--slide-spacing)*-1)}.embla__slide{transform:translate3d(0, 0, 0);flex:0 0 var(--slide-size);min-width:0;padding-left:var(--slide-spacing);flex:0 0 100%}.embla__slide__number{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);border-radius:1.8rem;font-size:4rem;font-weight:600;display:flex;align-items:center;justify-content:center;height:var(--slide-height);user-select:none}.embla__controls{display:grid;grid-template-columns:auto 1fr;justify-content:space-between;gap:1.2rem;margin-top:1.8rem}.embla__buttons{display:grid;grid-template-columns:repeat(2, 1fr);gap:.6rem;align-items:center}.embla__button{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:3.6rem;height:3.6rem;z-index:1;border-radius:50%;color:var(--text-body);display:flex;align-items:center;justify-content:center}.embla__button:disabled{color:var(--detail-high-contrast)}.embla__button__svg{width:35%;height:35%}.embla__dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-right:0;height:50px}.embla__dot{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;border-radius:50%}.embla__dot:after{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:1.4rem;height:1.4rem;border-radius:50%;display:flex;align-items:center;content:""}.embla__dot--selected:after{box-shadow:inset 0 0 0 .2rem var(--text-body)}.carousel-provider{height:100%}.embla{height:100%}.embla__viewport{height:100%;display:flex;flex-direction:column}.embla__container{flex:1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.20",
+  "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;
 }