@developer_tribe/react-builder 1.0.1 → 1.0.3

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

@@ -4,6 +4,13 @@
   "pattern": {
     "type": "carouselItem",
     "children": "node",
+    "extends": "View",
+    "attributes": {}
+  },
+  "meta": {
+    "desiredParent": ["=Carousel"],
+    "label": "Carousel Item",
+    "description": "Single slide inside a carousel.",
     "attributes": {}
   }
 }

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

@@ -1,16 +1,35 @@
-import React, { createContext } from 'react';
+import React, { createContext, useId, useMemo } from 'react';
 import type { CarouselProviderComponentProps } from './CarouselProviderProps.generated';
 import { RenderNode } from '../..';
 import useEmblaCarousel from 'embla-carousel-react';
 import useNode from '../useNode';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useRenderStore } from '../../store';
 
 export const carouselContext = createContext<any>(undefined);
 function CarouselProvider({ node }: CarouselProviderComponentProps) {
   node = useNode(node);
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'carouselProvider';
+  const attributeKey = node.key ?? generatedId;
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
   return (
     <carouselContext.Provider value={emblaApi}>
-      <div className="carousel-provider">
+      <div
+        attribute-name={attributeName}
+        attribute-key={attributeKey}
+        className="carousel-provider"
+        style={viewStyle}
+      >
         <div className="embla">
           <div className="embla__viewport" ref={emblaRef}>
             {node.children && <RenderNode node={node.children} />}

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

@@ -2,9 +2,54 @@
 
 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 interface CarouselProviderPropsGenerated {
   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;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
+  };
 }
 
 export interface CarouselProviderComponentProps {

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

@@ -4,6 +4,13 @@
   "pattern": {
     "type": "carouselProvider",
     "children": "node",
+    "extends": "View",
+    "attributes": {}
+  },
+  "meta": {
+    "desiredParent": ["root", ">View"],
+    "label": "Carousel Provider",
+    "description": "Provides carousel context to its children.",
     "attributes": {}
   }
 }

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

@@ -1,19 +1,50 @@
-import React from 'react';
+import React, { useId, useMemo } from 'react';
 import type { ImageComponentProps } from './ImageProps.generated';
 import useNode from '../useNode';
+import { useRenderStore } from '../../store';
 import { extractImageStyle } from '../../utils/extractImageStyle';
+import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 
 function Image({ node }: ImageComponentProps) {
   useLogRender('Image');
   node = useNode(node);
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'image';
+  const attributeKey = node.key ?? generatedId;
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+  const imageStyle = extractImageStyle(node);
+  const isSelected =
+    previewMode &&
+    !!current &&
+    (current as any)?.key &&
+    (node as any)?.key &&
+    (current as any).key === (node as any).key;
+  const style = {
+    ...viewStyle,
+    ...imageStyle,
+    ...(isSelected ? { outline: '2px solid #2684FF' } : {}),
+  };
   return (
     <img
       key={node.key}
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
       src={node.attributes?.src}
       width={node.attributes?.width}
       height={node.attributes?.height}
-      style={extractImageStyle(node)}
+      style={style}
       alt=""
     />
   );

package/src/build-components/Image/ImageProps.generated.ts

@@ -2,16 +2,56 @@
 
 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 ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 
 export interface ImagePropsGenerated {
   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;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     src?: string;
-    width?: number;
-    height?: number;
     resizeMode?: ResizeModeOptionType;
-    borderRadius?: number;
   };
 }
 

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

@@ -4,12 +4,55 @@
   "pattern": {
     "type": "image",
     "children": "never",
+    "extends": "View",
     "attributes": {
       "src": "string",
-      "width": "number",
-      "height": "number",
+      "width": "size",
+      "height": "size",
       "resizeMode": ["cover", "contain", "stretch", "center"],
-      "borderRadius": "number"
+      "borderRadius": "size"
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Image",
+    "description": "Shows an image or graphic.",
+    "attributes": {
+      "src": {
+        "label": "Src",
+        "description": "Image source URL.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "width": {
+        "label": "Width",
+        "description": "Image width.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "height": {
+        "label": "Height",
+        "description": "Image height.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "resizeMode": {
+        "label": "Resize Mode",
+        "description": "How the image fits the frame.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "borderRadius": {
+        "label": "Border Radius",
+        "description": "Corner rounding.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 5
+      }
     }
   }
 }

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

@@ -7,7 +7,12 @@ import { useLogRender } from '../../utils/useLogRender';
 function Onboard({ node }: OnboardComponentProps) {
   useLogRender('Onboard');
   node = useNode(node);
-  return <Carousel node={{ ...node, type: 'carousel' } as any} />;
+  const attributeName = node.type ?? 'Onboard';
+  return (
+    <Carousel
+      node={{ ...node, type: 'carousel', sourceType: attributeName } as any}
+    />
+  );
 }
 
 export default React.memo(Onboard);

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

@@ -2,9 +2,54 @@
 
 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 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;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
+  };
 }
 
 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,32 @@
-import React, { useContext } from 'react';
-import type { OnboardButtonComponentProps } from './OnboardButtonProps.generated';
+import React, { useContext, useId, 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 attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { appConfig } = useRenderStore((s) => ({
+  const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
+    projectColors: s.projectColors,
   }));
 
+  const context = useMockOSContext();
+  const mockPermissionManager = useMockPermission(context);
+  const handledEventsRef = useRef<EventObjectGenerated[]>([]);
+  const generatedId = useId();
+  const attributeKey = node.key ?? generatedId;
+
   const labelRaw = node.attributes?.labelKey ?? '';
   const label =
     (appConfig.localication?.[appConfig.defaultLanguage ?? 'en']?.[
@@ -22,18 +36,49 @@ 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, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
 
   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 +87,12 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
 
   return (
     <button
+      attribute-name={attributeName}
+      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,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,6 +36,34 @@ 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;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     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
+      }
+    }
   }
 }