@developer_tribe/react-builder 1.0.1 → 1.0.2

package/src/build-components/Onboard/OnboardProps.generated.ts

@@ -2,9 +2,47 @@
 
 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 interface OnboardPropsGenerated {
   child: string;
-  attributes: {};
+  attributes: {
+    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;
+    height?: string;
+  };
 }
 
 export interface OnboardComponentProps {

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

@@ -4,6 +4,17 @@
   "pattern": {
     "type": "Onboard",
     "children": "node",
+    "extends": "View",
+    "attributes": {},
+    "defaults": {
+      "flexDirection": "row"
+    }
+  },
+  "meta": {
+    "desiredParent": ["=OnboardProvider"],
+    "desiredChildren": ["=OnboardItem"],
+    "label": "Onboard",
+    "description": "Wraps the onboarding flow.",
     "attributes": {}
   }
 }

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

@@ -1,18 +1,29 @@
-import React, { useContext } from 'react';
-import type { OnboardButtonComponentProps } from './OnboardButtonProps.generated';
+import React, { useContext, useMemo, useRef } from 'react';
+import type {
+  EventObjectGenerated,
+  OnboardButtonComponentProps,
+} from './OnboardButtonProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useMockOSContext, useMockPermission } from '../../mockOS';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
   node = useNode(node);
+  const attributeKey =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
   const { appConfig } = useRenderStore((s) => ({
     appConfig: s.appConfig,
   }));
 
+  const context = useMockOSContext();
+  const mockPermissionManager = useMockPermission(context);
+  const handledEventsRef = useRef<EventObjectGenerated[]>([]);
+
   const labelRaw = node.attributes?.labelKey ?? '';
   const label =
     (appConfig.localication?.[appConfig.defaultLanguage ?? 'en']?.[
@@ -22,18 +33,46 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const flex = node.attributes?.flex ?? 1;
   const textColor = node.attributes?.button_text_color ?? '#FFFFFF';
   const backgroundColor = node.attributes?.button_background_color ?? '#0066FF';
+  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
 
   const handleClick = () => {
-    const events = (node.attributes as any)?.events || [];
+    //TODO: any ??
+    const events: EventObjectGenerated[] = node.attributes?.events ?? [];
     let navigateHandled = false;
+
     for (const e of events) {
+      // Check if event is already handled
+      if (handledEventsRef.current.includes(e)) {
+        continue;
+      }
+
       if (e.type === 'Permission') {
-        alert(`Permission requested: ${e.permission ?? 'unknown'}`);
+        const permission = e.permission ?? 'camera';
+        mockPermissionManager.requestPermission(permission);
+        handledEventsRef.current.push(e);
+        //TODO: cause user to click second time
+        return;
       } else if (e.type === 'Navigate') {
-        const eventTargetIndex = (e as any)?.targetIndex;
+        const eventTargetIndex = e.targetIndex;
         if (typeof eventTargetIndex === 'number') {
           emblaApi?.scrollTo(eventTargetIndex);
           navigateHandled = true;
+          handledEventsRef.current.push(e);
+          //TODO: cause user to click second time
+          return;
+        } else if (e.navigate_to) {
+          const eventTarget = e.navigate_to;
+          if (typeof eventTarget === 'string') {
+            navigateHandled = true;
+            handledEventsRef.current.push(e);
+            //TODO: cause user to click second time
+            if (context) {
+              context.navigation(eventTarget as any);
+            } else {
+              alert('Mock OS context not available for navigation.');
+            }
+          }
+          return;
         }
       }
     }
@@ -42,9 +81,11 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
 
   return (
     <button
+      attribute-key={attributeKey}
       className="onboard__button"
       onClick={handleClick}
       style={{
+        ...viewStyle,
         flex,
         color: textColor,
         backgroundColor,

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

@@ -4,6 +4,20 @@ 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 AnimationOptionType =
   | 'simple-animation'
   | 'line-animation'
@@ -21,6 +35,28 @@ export interface EventObjectGenerated {
 export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
+    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;
+    height?: string;
     labelKey?: string;
     button_text_color?: string;
     animation?: AnimationOptionType;

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

@@ -4,9 +4,10 @@
   "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 +15,83 @@
         "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.",
+    "attributes": {
+      "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,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
@@ -6,10 +6,13 @@ 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 attributeKey =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardButtons';
   const { appConfig } = useRenderStore((s) => ({
     appConfig: s.appConfig,
   }));
@@ -26,13 +29,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 =
@@ -47,8 +43,22 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     return <RenderNode node={node.children as Node} />;
   };
 
+  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+
+  // 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-key={attributeKey} style={viewStyle}>
       <div
         className="onboard__separator"
         style={{
@@ -71,7 +81,7 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
       >
         {renderChildren()}
       </div>
-    </>
+    </div>
   );
 }
 

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

@@ -2,6 +2,20 @@
 
 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 ButtonTypeOptionType =
   | 'previous_button'
   | 'next_button'
@@ -12,6 +26,28 @@ export type ConditionOptionType = 'carousel-index';
 export interface OnboardButtonsPropsGenerated {
   child: string;
   attributes: {
+    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;
+    height?: string;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
     buttons_direction?: ButtonsDirectionOptionType;

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

@@ -4,14 +4,80 @@
   "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.",
+    "attributes": {
+      "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,13 +1,113 @@
-import React from 'react';
-import type { OnboardDotComponentProps } from './OnboardExpandingDotProps.generated';
-import CarouselDots from '../CarouselDots/CarouselDots';
+import React, { useContext, useEffect, 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';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
   useLogRender('OnboardDot');
+
   node = useNode(node);
-  return <CarouselDots node={{ ...node, type: 'carouselDots' } as any} />;
+
+  const attributeKey = node.type ?? 'OnboardDot';
+  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');
+
+  // 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 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 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]);
+
+  // Parse dot_style if provided
+  const parsedDotStyle = useMemo(() => {
+    if (!dotStyle) return {};
+    try {
+      return JSON.parse(dotStyle);
+    } catch (e) {
+      return {};
+    }
+  }, [dotStyle]);
+
+  return (
+    <div
+      attribute-key={attributeKey}
+      className={`embla__dots embla__dots--${dotType}`}
+      style={style}
+    >
+      {scrollSnaps.map((snap, index) => {
+        const isSelected = selectedIndex === index;
+        const dotStyles: React.CSSProperties = {
+          ...parsedDotStyle,
+          opacity: isSelected ? 1 : inactiveDotOpacity,
+        };
+
+        if (activeDotColor && isSelected) {
+          dotStyles.color = activeDotColor;
+        } else if (!isSelected) {
+          dotStyles.color = inactiveDotColor;
+        }
+
+        return (
+          <button
+            key={index}
+            onClick={() => emblaApi?.scrollTo(snap)}
+            className={`embla__dot ${isSelected ? 'embla__dot--selected' : ''}`}
+            style={dotStyles}
+          >
+            {isSelected ? '●' : '○'}
+          </button>
+        );
+      })}
+    </div>
+  );
 }
 
 export default React.memo(OnboardDot);

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

@@ -13,6 +13,28 @@ export type DotTypeOptionType =
 export interface OnboardDotPropsGenerated {
   child: string;
   attributes: {
+    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;
+    height?: string;
     dotType?: DotTypeOptionType;
     inactive_dot_opacity?: number;
     expanding_dot_width?: number;