@developer_tribe/react-builder 1.0.1 → 1.0.3

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

@@ -1,12 +1,47 @@
-import React 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);
-  return String(node?.type ?? 'button');
+  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-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      {String(node?.type ?? 'button')}
+    </div>
+  );
 }
 
 export default React.memo(Button);

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

@@ -2,6 +2,21 @@
 
 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 FontWeightOptionType =
   | 'normal'
   | 'bold'
@@ -18,8 +33,36 @@ export type FontWeightOptionType =
 export interface ButtonPropsGenerated {
   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;
     color?: string;
-    fontSize?: number;
+    fontSize?: string;
     fontWeight?: FontWeightOptionType;
   };
 }

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

@@ -4,9 +4,10 @@
   "pattern": {
     "type": "button",
     "children": "string",
+    "extends": "View",
     "attributes": {
-      "color": "string",
-      "fontSize": "number",
+      "color": "color",
+      "fontSize": "size",
       "fontWeight": [
         "normal",
         "bold",
@@ -21,5 +22,33 @@
         "900"
       ]
     }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Button",
+    "description": "Simple action button.",
+    "attributes": {
+      "color": {
+        "label": "Color",
+        "description": "Text color of the button.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "fontSize": {
+        "label": "Font Size",
+        "description": "Text size of the button.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "fontWeight": {
+        "label": "Font Weight",
+        "description": "Text weight of the button.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      }
+    }
   }
 }

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

@@ -1,13 +1,39 @@
-import React 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 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)) {
@@ -20,7 +46,18 @@ function Carousel({ node }: CarouselComponentProps) {
     ) : null;
   };
 
-  return <div className="embla__container">{renderChildren()}</div>;
+  //NOTE: I don't know how to force declare attribute-key. It must be added/checked manually.
+  //TODO: add to md file for agents
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      className="embla__container"
+      style={style}
+    >
+      {renderChildren()}
+    </div>
+  );
 }
 
 export default React.memo(Carousel);

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

@@ -2,9 +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 CarouselPropsGenerated {
   child: string;
-  attributes: {};
+  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;
+  };
 }
 
 export interface CarouselComponentProps {

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

@@ -2,8 +2,18 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
+    "extends": "View",
     "type": "carousel",
     "children": "carouselItem",
+    "attributes": {},
+    "defaults": {
+      "flexDirection": "row"
+    }
+  },
+  "meta": {
+    "desiredParent": ["=CarouselProvider"],
+    "label": "Carousel",
+    "description": "Container for carousel items.",
     "attributes": {}
   }
 }

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

@@ -1,12 +1,26 @@
-import React, { useContext } 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 generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'carouselButtons';
+  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',
@@ -14,7 +28,12 @@ function CarouselButtons({ node }: CarouselButtonsComponentProps) {
   ];
 
   return (
-    <div className="embla__buttons">
+    <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

@@ -2,6 +2,21 @@
 
 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 ButtonTypeOptionType =
   | 'previous_button'
   | 'next_button'
@@ -10,6 +25,34 @@ export type ButtonTypeOptionType =
 export interface CarouselButtonsPropsGenerated {
   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;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
   };

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

@@ -4,9 +4,31 @@
   "pattern": {
     "type": "carouselButtons",
     "children": "never",
+    "extends": "View",
     "attributes": {
       "buttonType": ["previous_button", "next_button", "skip_button"],
       "skipNumber": "number"
     }
+  },
+  "meta": {
+    "desiredParent": [">OnboardProvider", ">CarouselProvider"],
+    "label": "Carousel Buttons",
+    "description": "Renders built-in carousel buttons.",
+    "attributes": {
+      "buttonType": {
+        "label": "Button Type",
+        "description": "Which carousel button to show.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "skipNumber": {
+        "label": "Skip Number",
+        "description": "Index to skip to when tapped.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
+      }
+    }
   }
 }

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

@@ -1,28 +1,69 @@
-import React, { useContext, useEffect, 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 generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'carouselDots';
+  const attributeKey = node.key ?? generatedId;
+
   const dotType = node.attributes?.dotType || 'normal_dot';
-  const emblaApi = useContext(carouselContext);
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+
+  const style = useMemo(() => {
+    return extractViewStyle(node, { appConfig, projectColors });
+  }, [node, appConfig, projectColors]);
+
+  // Use the appropriate context based on sourceType
+  const isOnboard = (node as any)?.sourceType === 'OnboardDot';
+  const carouselApi = useContext(carouselContext);
+  const onboardApi = useContext(onboardContext);
+  const emblaApi = isOnboard ? onboardApi?.emblaApi : carouselApi;
+
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
 
   useEffect(() => {
     if (!emblaApi) return;
-    setScrollSnaps(emblaApi.scrollSnapList());
-    setSelectedIndex(emblaApi.selectedScrollSnap());
-    emblaApi.on('select', () => {
-      setSelectedIndex(emblaApi.selectedScrollSnap());
-    });
+    const snaps = emblaApi.scrollSnapList();
+    const selected = emblaApi.selectedScrollSnap();
+    setScrollSnaps(snaps);
+    setSelectedIndex(selected);
+
+    const onSelect = () => {
+      const sel = emblaApi.selectedScrollSnap();
+      setSelectedIndex(sel);
+    };
+    emblaApi.on('select', onSelect);
+
+    // Potential cleanup if necessary
+    return () => {
+      if (emblaApi && emblaApi.off) {
+        emblaApi.off('select', onSelect);
+      }
+    };
   }, [emblaApi]);
 
   return (
-    <div className={`embla__dots embla__dots--${dotType}`}>
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      className={`embla__dots embla__dots--${dotType}`}
+      style={style}
+    >
       {scrollSnaps.map((snap, index) => (
         <button
           key={index}

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

@@ -2,6 +2,21 @@
 
 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 DotTypeOptionType =
   | 'expanding_dot'
   | 'normal_dot'
@@ -13,6 +28,34 @@ export type DotTypeOptionType =
 export interface CarouselDotsPropsGenerated {
   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;
     dotType?: DotTypeOptionType;
   };
 }

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

@@ -4,6 +4,7 @@
   "pattern": {
     "type": "carouselDots",
     "children": "never",
+    "extends": "View",
     "attributes": {
       "dotType": [
         "expanding_dot",
@@ -14,5 +15,19 @@
         "liquid_like"
       ]
     }
+  },
+  "meta": {
+    "desiredParent": [">CarouselProvider"],
+    "label": "Carousel Dots",
+    "description": "Renders page indicator dots.",
+    "attributes": {
+      "dotType": {
+        "label": "Dot Type",
+        "description": "Style used for the dots.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      }
+    }
   }
 }

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

@@ -1,14 +1,33 @@
-import React 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 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" {...node.attributes}>
+    <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

@@ -2,9 +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 CarouselItemPropsGenerated {
   child: string;
-  attributes: {};
+  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;
+  };
 }
 
 export interface CarouselItemComponentProps {