@developer_tribe/react-builder 1.0.2 → 1.0.4

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

@@ -2,6 +2,7 @@ import React, {
   createContext,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useState,
 } from 'react';
@@ -19,26 +20,44 @@ export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
   useLogRender('OnboardProvider');
   node = useNode(node);
-  const attributeKey =
+  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(() => {
@@ -59,24 +78,20 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   const viewStyle = useMemo(() => {
     const style = extractViewStyle(
       node as NodeData<ViewPropsGenerated['attributes']>,
+      { appConfig, projectColors },
     );
     //NOTE: Embla için istisna
     style.display = 'block';
     return style;
-  }, [node]);
+  }, [node, appConfig, projectColors]);
 
   return (
     <onboardContext.Provider value={{ emblaApi, selectedIndex }}>
       <div
+        attribute-name={attributeName}
         attribute-key={attributeKey}
         className="carousel-provider"
-        style={{
-          ...viewStyle,
-          paddingTop: node.attributes?.paddingTop,
-          paddingRight: node.attributes?.paddingRight,
-          paddingBottom: node.attributes?.paddingBottom,
-          paddingLeft: node.attributes?.paddingLeft,
-        }}
+        style={viewStyle}
       >
         <div className="embla">
           <div className="embla__viewport" ref={emblaRef}>

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

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardProviderPropsGenerated {
   child: string;
@@ -42,7 +43,13 @@ export interface OnboardProviderPropsGenerated {
     borderRadius?: never;
     width?: string;
     height?: string;
-    theme?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     use_safe_area_inset?: boolean;
   };
 }

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

@@ -6,7 +6,6 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "theme": "string",
       "use_safe_area_inset": "boolean",
       "borderRadius": "never"
     }
@@ -22,13 +21,6 @@
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
     "attributes": {
-      "theme": {
-        "label": "Theme",
-        "description": "Theme key for onboarding screens.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 1
-      },
       "use_safe_area_inset": {
         "label": "Use Safe Area Inset",
         "description": "Adds safe area padding.",

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

@@ -29,6 +29,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardSubtitlePropsGenerated {
   child: string;
@@ -59,6 +60,13 @@ export interface OnboardSubtitlePropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
   };
 }
 

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

@@ -3,7 +3,7 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "OnboardSubtitle",
-    "children": "node",
+    "children": "string",
     "extends": "Text",
     "attributes": {}
   },

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

@@ -29,6 +29,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardTitlePropsGenerated {
   child: string;
@@ -59,6 +60,13 @@ export interface OnboardTitlePropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
   };
 }
 

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

@@ -3,7 +3,7 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "OnboardTitle",
-    "children": "node",
+    "children": "string",
     "extends": "Text",
     "attributes": {}
   },

package/src/build-components/RenderNode.generated.tsx

@@ -12,6 +12,7 @@ import {
 import { other } from './other';
 
 // Builder components
+import BackgroundImage from './BackgroundImage/BackgroundImage';
 import Button from './Button/Button';
 import Carousel from './Carousel/Carousel';
 import CarouselButtons from './CarouselButtons/CarouselButtons';
@@ -51,6 +52,8 @@ function RenderNode({ node }: { node: Node }) {
 
   const simpleNode = node as NodeData;
   switch (simpleNode?.type) {
+    case 'background-image':
+      return <BackgroundImage node={simpleNode} />;
     case 'button':
       return <Button node={simpleNode} />;
     case 'carousel':

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

@@ -1,26 +1,44 @@
-import React, { useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { extractTextStyle } from '../../utils/extractTextStyle';
-import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function Text({ node }: TextComponentProps) {
   useLogRender('Text');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'text';
-  const { appConfig } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-  }));
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'text';
+  const attributeKey = node.key ?? generatedId;
+  const { appConfig, projectColors, previewMode, current } = useRenderStore(
+    (s) => ({
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+      previewMode: s.previewMode,
+      current: s.current,
+    }),
+  );
   const { defaultLanguage, localication } = appConfig;
   const keyOrText: string = node.children as string;
-  const textStyle = extractTextStyle(node);
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
-  const style = { ...viewStyle, ...textStyle };
+  const textStyle = useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    textStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
 
   return (
-    <p attribute-key={attributeKey} style={style}>
+    <p
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
       {localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText}
     </p>
   );

package/src/build-components/Text/TextProps.generated.ts

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type FontWeightOptionType =
   | 'normal'
   | 'bold'
@@ -55,6 +56,13 @@ export interface TextPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     color?: string;
     fontSize?: string;
     fontWeight?: FontWeightOptionType;

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

@@ -1,18 +1,40 @@
-import React, { useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { ViewComponentProps } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
+import { useRenderStore } from '../../store';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 export function View({ node }: ViewComponentProps) {
   useLogRender('View');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'view';
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'view';
+  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 baseStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const viewStyle = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
   return (
     <div
+      attribute-name={attributeName}
       attribute-key={attributeKey}
       style={viewStyle}
       className="scroll-container"

package/src/build-components/View/ViewProps.generated.ts

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface ViewPropsGenerated {
   child: string;
@@ -42,6 +43,13 @@ export interface ViewPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
   };
 }
 

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

@@ -33,7 +33,14 @@
       "backgroundColor": "color",
       "borderRadius": "size",
       "width": "size",
-      "height": "size"
+      "height": "size",
+      "flex": "number",
+      "position": ["relative", "absolute"],
+      "top": "size",
+      "bottom": "size",
+      "left": "size",
+      "right": "size",
+      "zIndex": "number"
     },
     "defaults": {
       "flexDirection": "column"
@@ -61,6 +68,12 @@
         "description": "Fixed dimensions.",
         "category": "container",
         "sort": 3
+      },
+      "offset": {
+        "label": "Offset",
+        "description": "Absolute positioning offsets.",
+        "category": "container",
+        "sort": 4
       }
     },
     "attributes": {
@@ -242,6 +255,59 @@
         "specialCategory": "size",
         "sort": 1,
         "preferedScale": "vs"
+      },
+      "flex": {
+        "label": "Flex",
+        "description": "Flex grow factor (e.g. 1 fills available space).",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 2
+      },
+      "position": {
+        "label": "Position",
+        "description": "Sets layout positioning mode.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "top": {
+        "label": "Top",
+        "description": "Offset from the top edge.",
+        "category": "container",
+        "specialCategory": "offset",
+        "sort": 22,
+        "preferedScale": "vs"
+      },
+      "bottom": {
+        "label": "Bottom",
+        "description": "Offset from the bottom edge.",
+        "category": "container",
+        "specialCategory": "offset",
+        "sort": 23,
+        "preferedScale": "vs"
+      },
+      "left": {
+        "label": "Left",
+        "description": "Offset from the left edge.",
+        "category": "container",
+        "specialCategory": "offset",
+        "sort": 24,
+        "preferedScale": "s"
+      },
+      "right": {
+        "label": "Right",
+        "description": "Offset from the right edge.",
+        "category": "container",
+        "specialCategory": "offset",
+        "sort": 25,
+        "preferedScale": "s"
+      },
+      "zIndex": {
+        "label": "Z-Index",
+        "description": "Controls stacking order.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 26
       }
     }
   }

package/src/build-components/index.ts

@@ -5,6 +5,7 @@ export { default as RenderNode } from './RenderNode.generated';
 export { patterns } from './patterns.generated';
 
 export const allcomponentNames = [
+  'background-image',
   'button',
   'carousel',
   'carouselButtons',
@@ -26,6 +27,10 @@ export const allcomponentNames = [
   'view',
 ] as const;
 
+export type {
+  BackgroundImagePropsGenerated,
+  BackgroundImageComponentProps,
+} from './BackgroundImage/BackgroundImageProps.generated';
 export type {
   ButtonPropsGenerated,
   ButtonComponentProps,