@developer_tribe/react-builder 1.0.4 → 1.0.6

package/src/attributes-editor/SpecialCategorySection.tsx

@@ -277,7 +277,7 @@ export function SpecialCategorySection({
             className="special-category-section__toggle"
             data-active={showAdvanced}
           >
-            {showAdvanced ? 'Hide advanced' : 'Show advanced'}
+            {showAdvanced ? 'Show less' : 'Show more'}
           </button>
         ) : null}
       </div>

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

@@ -0,0 +1,56 @@
+import React, { useId, useMemo } from 'react';
+import type { BIconComponentProps } from './BIconProps.generated';
+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 { Icon } from '../../components/Icon.generated';
+import { IconsType } from '../../types/Icons';
+import { extractTextStyle } from '../../utils/extractTextStyle';
+
+function BIcon({ node }: BIconComponentProps) {
+  useLogRender('BIcon');
+  node = useNode(node);
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'BIcon';
+  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(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+  const iconType = node.attributes?.iconType ?? 'activity';
+  const strokeWidth = node.attributes?.strokeWidth;
+
+  return (
+    <Icon
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      iconType={iconType as IconsType}
+      //TODO: font size general like theme
+      size={(style.fontSize as number) ?? 16}
+      strokeWidth={typeof strokeWidth === 'number' ? strokeWidth : undefined}
+      style={style}
+      color={style.color}
+      alt=""
+    />
+  );
+}
+
+export default React.memo(BIcon);

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -0,0 +1,82 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FontWeightOptionType =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900';
+export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
+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 BIconPropsGenerated {
+  child: string;
+  attributes: {
+    color?: string;
+    fontSize?: string;
+    fontWeight?: FontWeightOptionType;
+    textAlign?: TextAlignOptionType;
+    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;
+    iconType?: string;
+    size?: number;
+    strokeWidth?: number;
+  };
+}
+
+export interface BIconComponentProps {
+  node: NodeData<BIconPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,47 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "BIcon",
+    "children": "never",
+    "extends": "Text",
+    "attributes": {
+      "iconType": "iconType",
+      "size": "number",
+      "strokeWidth": "number"
+    },
+    "defaults": {
+      "iconType": "activity",
+      "fontSize": "16",
+      "strokeWidth": 1.5
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "BIcon",
+    "description": "Renders an icon from the icon set.",
+    "attributes": {
+      "iconType": {
+        "label": "Icon",
+        "description": "Which icon to render.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "size": {
+        "label": "Size",
+        "description": "Icon size (px).",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "strokeWidth": {
+        "label": "Stroke Width",
+        "description": "SVG stroke width override (applied to the icon paths).",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      }
+    }
+  }
+}

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

@@ -43,7 +43,11 @@ 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;

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

@@ -25,9 +25,22 @@ function Button({ node }: ButtonComponentProps) {
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
+  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(
-    baseStyle,
+    withButtonDefaults,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 

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

@@ -54,7 +54,11 @@ 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;

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/CarouselProps.generated.ts

@@ -42,7 +42,11 @@ 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;

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,11 @@ 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;

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,11 @@ 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;

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,11 @@ 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;

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,11 @@ 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;

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/ImageProps.generated.ts

@@ -43,7 +43,11 @@ 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;

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

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

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,11 @@ 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;

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

@@ -57,7 +57,11 @@ 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;

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

@@ -48,7 +48,11 @@ 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;

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

@@ -35,7 +35,11 @@ export interface OnboardDotPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
     flex?: number;
     position?: PositionOptionType;
     top?: string;

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -59,7 +59,11 @@ export interface OnboardFooterPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
     flex?: number;
     position?: PositionOptionType;
     top?: string;