@developer_tribe/react-builder 1.0.2 → 1.0.3

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

@@ -0,0 +1,87 @@
+import React, { useId, useMemo } from 'react';
+import type { BackgroundImageComponentProps } from './BackgroundImageProps.generated';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+
+function BackgroundImage({ node }: BackgroundImageComponentProps) {
+  useLogRender('BackgroundImage');
+  node = useNode(node);
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'background-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 baseStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+  const backgroundStyle = useMemo(() => {
+    const attrs = node.attributes;
+    const style: React.CSSProperties = {
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+    };
+
+    if (attrs?.src) {
+      style.backgroundImage = `url(${attrs.src})`;
+    }
+
+    switch (attrs?.resizeMode) {
+      case 'cover':
+        style.backgroundSize = 'cover';
+        break;
+      case 'contain':
+        style.backgroundSize = 'contain';
+        break;
+      case 'stretch':
+        style.backgroundSize = '100% 100%';
+        break;
+      case 'center':
+        style.backgroundSize = 'auto';
+        break;
+      default:
+        style.backgroundSize = 'cover';
+    }
+
+    return style;
+  }, [node]);
+  const isSelected =
+    previewMode &&
+    !!current &&
+    (current as any)?.key &&
+    (node as any)?.key &&
+    (current as any).key === (node as any).key;
+
+  const mergedStyle = useMemo(
+    () => ({
+      ...baseStyle,
+      ...backgroundStyle,
+    }),
+    [baseStyle, backgroundStyle],
+  );
+
+  const style = isSelected
+    ? { ...mergedStyle, outline: '2px solid #2684FF' }
+    : mergedStyle;
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    />
+  );
+}
+
+export default React.memo(BackgroundImage);

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

@@ -0,0 +1,60 @@
+/* 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 type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
+
+export interface BackgroundImagePropsGenerated {
+  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;
+    resizeMode?: ResizeModeOptionType;
+  };
+}
+
+export interface BackgroundImageComponentProps {
+  node: NodeData<BackgroundImagePropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,45 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "background-image",
+    "children": "never",
+    "extends": "View",
+    "attributes": {
+      "src": "string",
+      "resizeMode": ["cover", "contain", "stretch", "center"]
+    },
+    "defaults": {
+      "resizeMode": "cover",
+      "width": "100%",
+      "height": "100%",
+      "position": "fixed",
+      "top": 0,
+      "left": 0,
+      "right": 0,
+      "bottom": 0,
+      "zIndex": 0
+    }
+  },
+  "meta": {
+    "desiredParent": ["all", "background"],
+    "label": "Background Image",
+    "description": "Background image.",
+    "attributes": {
+      "src": {
+        "label": "Src",
+        "description": "Image source URL.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "resizeMode": {
+        "label": "Resize Mode",
+        "description": "How the image fits its container.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      }
+    }
+  }
+}

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

@@ -1,17 +1,44 @@
-import React, { useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { ButtonComponentProps } from './ButtonProps.generated';
 import useNode from '../useNode';
+import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 
 function Button({ node }: ButtonComponentProps) {
   useLogRender('Button');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'button';
-  const style = useMemo(() => extractViewStyle(node), [node]);
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'button';
+  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 =
+    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;
 
   return (
-    <div attribute-key={attributeKey} style={style}>
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
       {String(node?.type ?? 'button')}
     </div>
   );

package/src/build-components/Button/ButtonProps.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'
@@ -54,6 +55,12 @@ export interface ButtonPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     color?: string;
     fontSize?: string;
     fontWeight?: FontWeightOptionType;

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

@@ -1,16 +1,39 @@
-import React, { useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { CarouselComponentProps } from './CarouselProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { isCarouselItem } from '../../utils/isCarousel';
 import useNode from '../useNode';
+import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 
 function Carousel({ node }: CarouselComponentProps) {
   useLogRender('Carousel');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'carousel';
-  const style = useMemo(() => extractViewStyle(node), [node]);
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'carousel';
+  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 =
+    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;
   // Ensure children are carouselItems
   const renderChildren = () => {
     if (Array.isArray(node.children)) {
@@ -27,6 +50,7 @@ function Carousel({ node }: CarouselComponentProps) {
   //TODO: add to md file for agents
   return (
     <div
+      attribute-name={attributeName}
       attribute-key={attributeKey}
       className="embla__container"
       style={style}

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

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

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

@@ -1,16 +1,26 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useId, useMemo } from 'react';
 import type { CarouselButtonsComponentProps } from './CarouselButtonsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useRenderStore } from '../../store';
 
 function CarouselButtons({ node }: CarouselButtonsComponentProps) {
   useLogRender('CarouselButtons');
   node = useNode(node);
-  const attributeKey =
+  const generatedId = useId();
+  const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'carouselButtons';
-  const style = useMemo(() => extractViewStyle(node), [node]);
+  const attributeKey = node.key ?? generatedId;
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const style = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
   const emblaApi = useContext(carouselContext);
   const buttonTypes = node.attributes?.buttonType || [
     'previous_button',
@@ -18,7 +28,12 @@ function CarouselButtons({ node }: CarouselButtonsComponentProps) {
   ];
 
   return (
-    <div attribute-key={attributeKey} className="embla__buttons" style={style}>
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      className="embla__buttons"
+      style={style}
+    >
       {buttonTypes.includes('previous_button') && (
         <button
           onClick={() => emblaApi?.scrollPrev()}

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

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type ButtonTypeOptionType =
   | 'previous_button'
   | 'next_button'
@@ -46,6 +47,12 @@ export interface CarouselButtonsPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
   };

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

@@ -1,23 +1,31 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
 import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useRenderStore } from '../../store';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
   useLogRender('CarouselDots');
 
   node = useNode(node);
 
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'carouselDots';
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'carouselDots';
+  const attributeKey = node.key ?? generatedId;
 
   const dotType = node.attributes?.dotType || 'normal_dot';
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
 
   const style = useMemo(() => {
-    return extractViewStyle(node);
-  }, [node]);
+    return extractViewStyle(node, { appConfig, projectColors });
+  }, [node, appConfig, projectColors]);
 
   // Use the appropriate context based on sourceType
   const isOnboard = (node as any)?.sourceType === 'OnboardDot';
@@ -51,6 +59,7 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
 
   return (
     <div
+      attribute-name={attributeName}
       attribute-key={attributeKey}
       className={`embla__dots embla__dots--${dotType}`}
       style={style}

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

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type DotTypeOptionType =
   | 'expanding_dot'
   | 'normal_dot'
@@ -49,6 +50,12 @@ export interface CarouselDotsPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     dotType?: DotTypeOptionType;
   };
 }

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

@@ -1,17 +1,33 @@
-import React, { useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { CarouselItemComponentProps } from './CarouselItemProps.generated';
 import { RenderNode } from '../..';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useRenderStore } from '../../store';
 
 export function CarouselItem({ node }: CarouselItemComponentProps) {
   useLogRender('CarouselItem');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'carouselItem';
-  const style = useMemo(() => extractViewStyle(node), [node]);
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'carouselItem';
+  const attributeKey = node.key ?? generatedId;
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const style = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
   return (
-    <div className="embla__slide" attribute-key={attributeKey} style={style}>
+    <div
+      className="embla__slide"
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
       {node.children && <RenderNode node={node.children} />}
     </div>
   );

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

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

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

@@ -1,20 +1,31 @@
-import React, { createContext, useMemo } 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 attributeKey =
+  const generatedId = useId();
+  const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'carouselProvider';
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  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
+        attribute-name={attributeName}
         attribute-key={attributeKey}
         className="carousel-provider"
         style={viewStyle}

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

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

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

@@ -1,6 +1,7 @@
-import React, { useMemo } 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';
@@ -8,13 +9,37 @@ import { useLogRender } from '../../utils/useLogRender';
 function Image({ node }: ImageComponentProps) {
   useLogRender('Image');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'image';
-  const viewStyle = useMemo(() => extractViewStyle(node), [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 style = { ...viewStyle, ...imageStyle };
+  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}

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

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 
 export interface ImagePropsGenerated {
@@ -43,6 +44,12 @@ export interface ImagePropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     src?: string;
     resizeMode?: ResizeModeOptionType;
   };

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

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