@developer_tribe/react-builder 1.0.1 → 1.0.3

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

@@ -1,14 +1,28 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
 import useNode from '../useNode';
 import Lottie from 'lottie-react';
 import { useLogRender } from '../../utils/useLogRender';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useRenderStore } from '../../store';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
   useLogRender('OnboardImage');
   node = useNode(node);
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardImage';
+  const attributeKey = node.key ?? generatedId;
   const [lottie, setLottie] = useState<string | null>(null);
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
 
   useEffect(() => {
     if (node.attributes?.lottie) {
@@ -19,18 +33,48 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   }, [node.attributes?.lottie]);
 
   if (node.attributes?.video_url) {
-    return <video autoPlay muted loop src={node.attributes?.video_url} />;
+    return (
+      <video
+        attribute-name={attributeName}
+        attribute-key={attributeKey}
+        autoPlay
+        muted
+        loop
+        src={node.attributes?.video_url}
+        style={viewStyle}
+      />
+    );
   }
 
   if (node.attributes?.lottie) {
     if (lottie) {
-      return <Lottie animationData={lottie} />;
+      return (
+        <div
+          attribute-name={attributeName}
+          attribute-key={attributeKey}
+          style={viewStyle}
+        >
+          <Lottie animationData={lottie} />
+        </div>
+      );
     } else {
-      return <div>Loading...</div>;
+      return (
+        <div
+          attribute-name={attributeName}
+          attribute-key={attributeKey}
+          style={viewStyle}
+        >
+          Loading...
+        </div>
+      );
     }
   }
 
-  return <Image node={{ ...node, type: 'image' } as any} />;
+  return (
+    <Image
+      node={{ ...node, type: 'image', sourceType: attributeName } as any}
+    />
+  );
 }
 
 export default React.memo(OnboardImage);

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

@@ -3,15 +3,55 @@
 import type { NodeData } from '../../types/Node';
 
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
+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 OnboardImagePropsGenerated {
   child: string;
   attributes: {
     src?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
     resizeMode?: ResizeModeOptionType;
-    borderRadius?: number;
+    borderRadius?: string;
+    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;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     video_url?: string;
     lottie?: string;
   };

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

@@ -9,5 +9,26 @@
       "video_url": "string",
       "lottie": "string"
     }
+  },
+  "meta": {
+    "desiredParent": [">OnboardProvider", ">OnboardItem", "!=Onboard"],
+    "label": "Onboard Image",
+    "description": "Onboarding hero image with media.",
+    "attributes": {
+      "video_url": {
+        "label": "Video Url",
+        "description": "URL for the onboarding video.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "lottie": {
+        "label": "Lottie",
+        "description": "Path to the lottie animation.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
+      }
+    }
   }
 }

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

@@ -1,20 +1,36 @@
-import React from 'react';
+import React, { useId, useMemo } from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import { RenderNode } from '../..';
+import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
 import { useLogRender } from '../../utils/useLogRender';
+import { extractViewStyle } from '../../utils/extractViewStyle';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
   useLogRender('OnboardItem');
   node = useNode(node);
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
+  const attributeKey = node.key ?? generatedId;
   const flexDirection = node.attributes?.flexDirection;
   const display = node.attributes?.display;
   const paddingHorizontal = parseSize(node.attributes?.paddingHorizontal);
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
   return (
     <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
       className="embla__slide"
       style={{
+        ...viewStyle,
         gap: parseSize(node.attributes?.gap),
         flexDirection,
         display,

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -2,16 +2,55 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type DisplayOptionType = 'flex' | 'block';
 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 DisplayOptionType = 'flex' | 'block';
 
 export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
-    display?: DisplayOptionType;
-    gap?: string;
+    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;
+    display?: DisplayOptionType;
   };
 }
 

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

@@ -4,11 +4,12 @@
   "pattern": {
     "type": "OnboardItem",
     "children": "node",
+    "extends": "View",
     "attributes": {
       "display": ["flex", "block"],
-      "gap": "string",
+      "gap": "size",
       "flexDirection": ["row", "column"],
-      "paddingHorizontal": "string"
+      "paddingHorizontal": "size"
     }
   },
   "defaults": {
@@ -16,5 +17,40 @@
     "display": "flex",
     "flexDirection": "column",
     "paddingHorizontal": "24@s"
+  },
+  "meta": {
+    "desiredParent": ["=Onboard"],
+    "label": "Onboard Item",
+    "description": "Single onboarding screen section.",
+    "attributes": {
+      "display": {
+        "label": "Display",
+        "description": "Controls layout display mode.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "gap": {
+        "label": "Gap",
+        "description": "Space between child blocks.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "flexDirection": {
+        "label": "Flex Direction",
+        "description": "Order of child stacking.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "paddingHorizontal": {
+        "label": "Padding Horizontal",
+        "description": "Left and right padding.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 4
+      }
+    }
   }
 }

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

@@ -2,6 +2,7 @@ import React, {
   createContext,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useState,
 } from 'react';
@@ -12,29 +13,52 @@ import RenderNode from '../RenderNode.generated';
 import { useRenderStore } from '../../store';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { ViewPropsGenerated } from '../View/ViewProps.generated';
 
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
   useLogRender('OnboardProvider');
   node = useNode(node);
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardProvider';
   const device = useRenderStore((s) => s.device);
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const attributeKey = node.key ?? generatedId;
 
   const children = useMemo(() => {
-    const onboardChild: NodeData = (node.children as NodeData[]).filter(
-      (c) => c.type === 'Onboard',
-    )[0];
-    if (onboardChild?.type !== 'Onboard') {
-      throw new Error('OnboardProvider at least has an Onboard child');
+    const allChildren = (node.children as NodeData[]) ?? [];
+
+    // Find the main Onboard child, if any
+    const onboardChild = allChildren.find((c) => c.type === 'Onboard');
+    if (!onboardChild || onboardChild.type !== 'Onboard') {
+      // Fallback: no onboard structure, just render original children
+      return allChildren;
+    }
+
+    const onboardItems = (onboardChild.children as NodeData[]) ?? [];
+    if (!onboardItems.length) {
+      return allChildren;
     }
-    const onboardItems = onboardChild.children as NodeData[];
 
+    // Clamp selected index to available items
+    const clampedIndex = Math.min(
+      Math.max(selectedIndex, 0),
+      onboardItems.length - 1,
+    );
+
+    const selectedItem = onboardItems[clampedIndex];
     const onboardButtons = (
-      onboardItems[selectedIndex].children as NodeData[]
-    ).filter((s) => (s as NodeData)?.type == 'OnboardButtons');
-    const children: NodeData[] = node.children as NodeData[];
-    return [...children, ...onboardButtons];
+      (selectedItem?.children as NodeData[]) ?? []
+    ).filter((s) => (s as NodeData)?.type === 'OnboardButtons');
+
+    return [...allChildren, ...onboardButtons];
   }, [selectedIndex, node.children]);
 
   useEffect(() => {
@@ -51,19 +75,29 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
     }
   }, [theme]);*/
 
+  //TODO: pattern içinde direk gömmek yerine orada da inhertince eklenebilir
+  const viewStyle = useMemo(() => {
+    const style = extractViewStyle(
+      node as NodeData<ViewPropsGenerated['attributes']>,
+      { appConfig, projectColors },
+    );
+    //NOTE: Embla için istisna
+    style.display = 'block';
+    return style;
+  }, [node, appConfig, projectColors]);
+
   return (
     <onboardContext.Provider value={{ emblaApi, selectedIndex }}>
       <div
+        attribute-name={attributeName}
+        attribute-key={attributeKey}
         className="carousel-provider"
         style={{
-          paddingTop:
-            device?.insets?.[0] + (node.attributes as any)?.paddingTop,
-          paddingRight:
-            device?.insets?.[1] + (node.attributes as any)?.paddingRight,
-          paddingBottom:
-            device?.insets?.[2] + (node.attributes as any)?.paddingBottom,
-          paddingLeft:
-            device?.insets?.[3] + (node.attributes as any)?.paddingLeft,
+          ...viewStyle,
+          paddingTop: node.attributes?.paddingTop,
+          paddingRight: node.attributes?.paddingRight,
+          paddingBottom: node.attributes?.paddingBottom,
+          paddingLeft: node.attributes?.paddingLeft,
         }}
       >
         <div className="embla">

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -2,15 +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 OnboardProviderPropsGenerated {
   child: string;
   attributes: {
-    theme?: string;
+    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?: never;
+    width?: string;
+    height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     use_safe_area_inset?: boolean;
-    paddingTop?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingLeft?: number;
   };
 }
 

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

@@ -4,13 +4,10 @@
   "pattern": {
     "type": "OnboardProvider",
     "children": "node",
+    "extends": "View",
     "attributes": {
-      "theme": "string",
       "use_safe_area_inset": "boolean",
-      "paddingTop": "number",
-      "paddingRight": "number",
-      "paddingBottom": "number",
-      "paddingLeft": "number"
+      "borderRadius": "never"
     }
   },
   "defaults": {
@@ -18,5 +15,47 @@
     "paddingRight": 0,
     "paddingBottom": 8,
     "paddingLeft": 0
+  },
+  "meta": {
+    "desiredParent": ["root"],
+    "label": "Onboard Provider",
+    "description": "Provides shared settings for onboarding.",
+    "attributes": {
+      "use_safe_area_inset": {
+        "label": "Use Safe Area Inset",
+        "description": "Adds safe area padding.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "paddingTop": {
+        "label": "Padding Top",
+        "description": "Top padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 3
+      },
+      "paddingRight": {
+        "label": "Padding Right",
+        "description": "Right padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 4
+      },
+      "paddingBottom": {
+        "label": "Padding Bottom",
+        "description": "Bottom padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 5
+      },
+      "paddingLeft": {
+        "label": "Padding Left",
+        "description": "Left padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 6
+      }
+    }
   }
 }

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -29,12 +29,13 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardSubtitlePropsGenerated {
   child: string;
   attributes: {
     color?: string;
-    fontSize?: number;
+    fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
     scrollable?: boolean;
@@ -42,7 +43,7 @@ export interface OnboardSubtitlePropsGenerated {
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -50,7 +51,6 @@ export interface OnboardSubtitlePropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -58,8 +58,14 @@ export interface OnboardSubtitlePropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
   };
 }
 

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

@@ -3,12 +3,18 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "OnboardSubtitle",
-    "children": "node",
+    "children": "string",
     "extends": "Text",
     "attributes": {}
   },
   "defaults": {
     "fontSize": "14@fs",
     "fontWeight": "600"
+  },
+  "meta": {
+    "desiredParent": [">OnboardProvider", ">OnboardItem"],
+    "label": "Onboard Subtitle",
+    "description": "Subtitle text for an onboarding step.",
+    "attributes": {}
   }
 }

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -29,12 +29,13 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardTitlePropsGenerated {
   child: string;
   attributes: {
     color?: string;
-    fontSize?: number;
+    fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
     scrollable?: boolean;
@@ -42,7 +43,7 @@ export interface OnboardTitlePropsGenerated {
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -50,7 +51,6 @@ export interface OnboardTitlePropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -58,8 +58,14 @@ export interface OnboardTitlePropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
   };
 }