@developer_tribe/react-builder 1.0.3 → 1.0.5

package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts

@@ -43,7 +43,12 @@ export interface BackgroundImagePropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
-    "type": "background-image",
+    "type": "BackgroundImage",
     "children": "never",
     "extends": "View",
     "attributes": {
@@ -13,7 +13,7 @@
       "resizeMode": "cover",
       "width": "100%",
       "height": "100%",
-      "position": "fixed",
+      "position": "absolute",
       "top": 0,
       "left": 0,
       "right": 0,

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

@@ -4,6 +4,8 @@ import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function Button({ node }: ButtonComponentProps) {
   useLogRender('Button');
@@ -23,15 +25,24 @@ function Button({ node }: ButtonComponentProps) {
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
-  const isSelected =
-    previewMode &&
-    !!current &&
-    (current as any)?.key &&
-    (node as any)?.key &&
-    (current as any).key === (node as any).key;
-  const style = isSelected
-    ? { ...baseStyle, outline: '2px solid #2684FF' }
-    : baseStyle;
+  const buttonDefaults = useMemo(() => {
+    const hasExplicitBackground =
+      node?.attributes?.backgroundColor !== undefined &&
+      node?.attributes?.backgroundColor !== null &&
+      String(node?.attributes?.backgroundColor).trim() !== '';
+    return {
+      cursor: 'pointer',
+      ...(hasExplicitBackground
+        ? undefined
+        : { backgroundColor: 'transparent' }),
+    } as React.CSSProperties;
+  }, [node?.attributes?.backgroundColor]);
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const withButtonDefaults = useMergedStyle(baseStyle, buttonDefaults);
+  const style = useMergedStyle(
+    withButtonDefaults,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
 
   return (
     <div

package/src/build-components/Button/ButtonProps.generated.ts

@@ -54,7 +54,12 @@ export interface ButtonPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
-    "type": "button",
+    "type": "Button",
     "children": "string",
     "extends": "View",
     "attributes": {
@@ -21,6 +21,9 @@
         "800",
         "900"
       ]
+    },
+    "defaults": {
+      "backgroundColor": "transparent"
     }
   },
   "meta": {

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

@@ -6,6 +6,8 @@ import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function Carousel({ node }: CarouselComponentProps) {
   useLogRender('Carousel');
@@ -25,15 +27,11 @@ function Carousel({ node }: CarouselComponentProps) {
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
-  const isSelected =
-    previewMode &&
-    !!current &&
-    (current as any)?.key &&
-    (node as any)?.key &&
-    (current as any).key === (node as any).key;
-  const style = isSelected
-    ? { ...baseStyle, outline: '2px solid #2684FF' }
-    : baseStyle;
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
   // Ensure children are carouselItems
   const renderChildren = () => {
     if (Array.isArray(node.children)) {

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -42,7 +42,12 @@ export interface CarouselPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -3,8 +3,8 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "extends": "View",
-    "type": "carousel",
-    "children": "carouselItem",
+    "type": "Carousel",
+    "children": "CarouselItem",
     "attributes": {},
     "defaults": {
       "flexDirection": "row"

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -46,7 +46,12 @@ export interface CarouselButtonsPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
-    "type": "carouselButtons",
+    "type": "CarouselButtons",
     "children": "never",
     "extends": "View",
     "attributes": {

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -49,7 +49,12 @@ export interface CarouselDotsPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
-    "type": "carouselDots",
+    "type": "CarouselDots",
     "children": "never",
     "extends": "View",
     "attributes": {

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

@@ -1,6 +1,6 @@
 import React, { useId, useMemo } from 'react';
 import type { CarouselItemComponentProps } from './CarouselItemProps.generated';
-import { RenderNode } from '../..';
+import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

@@ -42,7 +42,12 @@ export interface CarouselItemPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
-    "type": "carouselItem",
+    "type": "CarouselItem",
     "children": "node",
     "extends": "View",
     "attributes": {}

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

@@ -1,6 +1,6 @@
 import React, { createContext, useId, useMemo } from 'react';
 import type { CarouselProviderComponentProps } from './CarouselProviderProps.generated';
-import { RenderNode } from '../..';
+import RenderNode from '../RenderNode.generated';
 import useEmblaCarousel from 'embla-carousel-react';
 import useNode from '../useNode';
 import { extractViewStyle } from '../../utils/extractViewStyle';

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

@@ -42,7 +42,12 @@ export interface CarouselProviderPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
-    "type": "carouselProvider",
+    "type": "CarouselProvider",
     "children": "node",
     "extends": "View",
     "attributes": {}

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

@@ -3,8 +3,9 @@ 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';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function Image({ node }: ImageComponentProps) {
   useLogRender('Image');
@@ -20,30 +21,22 @@ function Image({ node }: ImageComponentProps) {
       projectColors: s.projectColors,
     }),
   );
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
+  const imageStyle = useMemo(
+    () => extractImageStyle(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' } : {}),
-  };
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    imageStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
   return (
     <img
-      key={node.key}
+      key={node.key + (node.attributes?.src ?? '-')}
       attribute-name={attributeName}
       attribute-key={attributeKey}
       src={node.attributes?.src}
-      width={node.attributes?.width}
-      height={node.attributes?.height}
       style={style}
       alt=""
     />

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

@@ -43,7 +43,12 @@ export interface ImagePropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -2,15 +2,14 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
-    "type": "image",
+    "type": "Image",
     "children": "never",
     "extends": "View",
     "attributes": {
       "src": "string",
       "width": "size",
       "height": "size",
-      "resizeMode": ["cover", "contain", "stretch", "center"],
-      "borderRadius": "size"
+      "resizeMode": ["cover", "contain", "stretch", "center"]
     }
   },
   "meta": {
@@ -45,13 +44,6 @@
         "category": "style",
         "specialCategory": null,
         "sort": 4
-      },
-      "borderRadius": {
-        "label": "Border Radius",
-        "description": "Corner rounding.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 5
       }
     }
   }

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

@@ -0,0 +1,61 @@
+import React, { useId, useMemo } from 'react';
+import type { MainComponentProps } from './MainProps.generated';
+import RenderNode from '../RenderNode.generated';
+import type { 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';
+import { useSafeAreaViewStyle } from '../../hooks/useSafeAreaViewStyle';
+import type { NodeData } from '../../types/Node';
+import { ViewPropsGenerated } from '../View/ViewProps.generated';
+
+function Main({ node }: MainComponentProps) {
+  useLogRender('Main');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'Main';
+  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 as NodeData<ViewPropsGenerated['attributes']>, {
+        appConfig,
+        projectColors,
+      }),
+    [node, appConfig, projectColors],
+  );
+
+  const useSafeAreaView = (node.attributes as any)?.useSafeAreaView ?? true;
+  const layoutStyle = useSafeAreaViewStyle(baseStyle, useSafeAreaView);
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    layoutStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      <RenderNode node={node.children as Node} />
+    </div>
+  );
+}
+
+export default React.memo(Main);

package/src/build-components/Main/MainProps.generated.ts

@@ -0,0 +1,64 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+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 MainPropsGenerated {
+  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;
+    minWidth?: string;
+    maxWidth?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
+    useSafeAreaView?: boolean;
+    [key: string]: string | number | boolean | undefined;
+  };
+}
+
+export interface MainComponentProps {
+  node: NodeData<MainPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,35 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": true,
+  "pattern": {
+    "type": "Main",
+    "children": ["node", "array"],
+    "extends": "View",
+    "attributes": {
+      "useSafeAreaView": "boolean"
+    }
+  },
+  "defaults": {
+    "useSafeAreaView": true,
+    "width": "100%",
+    "height": "100%",
+    "flex": 1,
+    "position": "relative"
+  },
+  "meta": {
+    "desiredParent": ["root"],
+    "label": "Main",
+    "description": "Top-level screen wrapper (safe area, base layout).",
+    "hideAllAttributes": true,
+    "attributes": {
+      "useSafeAreaView": {
+        "label": "Use Safe Area View",
+        "description": "Wraps content with a safe-area-aware container (when supported by the target).",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 1,
+        "forceVisible": true
+      }
+    }
+  }
+}

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

@@ -42,7 +42,12 @@ export interface OnboardPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -57,7 +57,6 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
         mockPermissionManager.requestPermission(permission);
         handledEventsRef.current.push(e);
         //TODO: cause user to click second time
-        return;
       } else if (e.type === 'Navigate') {
         const eventTargetIndex = e.targetIndex;
         if (typeof eventTargetIndex === 'number') {
@@ -65,7 +64,6 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
           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') {
@@ -78,7 +76,6 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
               alert('Mock OS context not available for navigation.');
             }
           }
-          return;
         }
       }
     }

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

@@ -57,7 +57,12 @@ export interface OnboardButtonPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;
@@ -69,7 +74,6 @@ export interface OnboardButtonPropsGenerated {
     animation?: AnimationOptionType;
     animation_color?: string;
     button_background_color?: string;
-    flex?: number;
     events?: EventObjectGenerated[];
   };
 }

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

@@ -48,7 +48,12 @@ export interface OnboardButtonsPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;