@developer_tribe/react-builder 0.1.0 → 0.1.2

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { NodeData } from '../../types/Node';
+import type { ButtonProps } from './ButtonProps';
+
+type ButtonComponentProps = {
+  node: NodeData<ButtonProps['attributes']>;
+};
+
+function Button({ node }: ButtonComponentProps) {
+  return String(node?.type ?? 'button');
+}
+
+export default React.memo(Button);

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

@@ -0,0 +1,21 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface ButtonPropsGenerated {
+  child: string;
+  attributes: {
+    color?: string;
+    fontSize?: number;
+    fontWeight?:
+      | 'normal'
+      | 'bold'
+      | '100'
+      | '200'
+      | '300'
+      | '400'
+      | '500'
+      | '600'
+      | '700'
+      | '800'
+      | '900';
+  };
+}

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

@@ -0,0 +1,3 @@
+import type { ButtonPropsGenerated } from './ButtonProps.generated';
+
+export interface ButtonProps extends ButtonPropsGenerated {}

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

@@ -0,0 +1,25 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "button",
+    "children": "string",
+    "attributes": {
+      "color": "string",
+      "fontSize": "number",
+      "fontWeight": [
+        "normal",
+        "bold",
+        "100",
+        "200",
+        "300",
+        "400",
+        "500",
+        "600",
+        "700",
+        "800",
+        "900"
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { NodeData } from '../../types/Node';
+import type { CarouselProps } from './CarouselProps';
+import RenderNode from '../RenderNode.generated';
+import { isCarouselItem } from '../../utils/isCarousel';
+
+type CarouselComponentProps = {
+  node: NodeData<CarouselProps['attributes']>;
+};
+
+function Carousel({ node }: CarouselComponentProps) {
+  // Ensure children are carouselItems
+  const renderChildren = () => {
+    if (Array.isArray(node.children)) {
+      return node.children.map((item, index) => (
+        <RenderNode key={index} node={item} />
+      ));
+    }
+    return isCarouselItem(node.children) ? (
+      <RenderNode node={node.children} />
+    ) : null;
+  };
+
+  return <div className="embla__container">{renderChildren()}</div>;
+}
+
+export default React.memo(Carousel);

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

@@ -0,0 +1,6 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface CarouselPropsGenerated {
+  child: string;
+  attributes: {};
+}

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

@@ -0,0 +1,3 @@
+import type { CarouselPropsGenerated } from './CarouselProps.generated';
+
+export interface CarouselProps extends CarouselPropsGenerated {}

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

@@ -0,0 +1,9 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "carousel",
+    "children": "carouselItem",
+    "attributes": {}
+  }
+}

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

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import type { NodeData } from '../../types/Node';
+import type { CarouselButtonsProps } from './CarouselButtonsProps';
+import { carouselContext } from '../CarouselProvider/CarouselProvider';
+
+type CarouselButtonsComponentProps = {
+  node: NodeData<CarouselButtonsProps['attributes']>;
+};
+
+function CarouselButtons({ node }: CarouselButtonsComponentProps) {
+  const emblaApi = useContext(carouselContext);
+  const buttonTypes = node.attributes?.buttonType || [
+    'previous_button',
+    'next_button',
+  ];
+
+  return (
+    <div className="embla__buttons">
+      {buttonTypes.includes('previous_button') && (
+        <button
+          onClick={() => emblaApi?.scrollPrev()}
+          className="embla__button embla__button--prev"
+        >
+          Previous
+        </button>
+      )}
+      {buttonTypes.includes('next_button') && (
+        <button
+          onClick={() => emblaApi?.scrollNext()}
+          className="embla__button embla__button--next"
+        >
+          Next
+        </button>
+      )}
+      {buttonTypes.includes('skip_button') && (
+        <button
+          onClick={() => emblaApi?.scrollTo(node.attributes?.skipNumber)}
+          className="embla__button embla__button--skip"
+        >
+          Skip
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default React.memo(CarouselButtons);

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

@@ -0,0 +1,9 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface CarouselButtonsPropsGenerated {
+  child: string;
+  attributes: {
+    buttonType?: 'previous_button' | 'next_button' | 'skip_button';
+    skipNumber?: number;
+  };
+}

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

@@ -0,0 +1,3 @@
+import type { CarouselButtonsPropsGenerated } from './CarouselButtonsProps.generated';
+
+export interface CarouselButtonsProps extends CarouselButtonsPropsGenerated {}

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

@@ -0,0 +1,12 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "carouselButtons",
+    "children": "never",
+    "attributes": {
+      "buttonType": ["previous_button", "next_button", "skip_button"],
+      "skipNumber": "number"
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import React, { useContext, useEffect, useState } from 'react';
+import type { NodeData } from '../../types/Node';
+import type { CarouselDotsProps } from './CarouselDotsProps';
+import { carouselContext } from '../CarouselProvider/CarouselProvider';
+
+type CarouselDotsComponentProps = {
+  node: NodeData<CarouselDotsProps['attributes']>;
+};
+
+function CarouselDots({ node }: CarouselDotsComponentProps) {
+  const dotType = node.attributes?.dotType || 'normal_dot';
+  const emblaApi = useContext(carouselContext);
+  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());
+    });
+  }, [emblaApi]);
+
+  return (
+    <div className={`embla__dots embla__dots--${dotType}`}>
+      {scrollSnaps.map((snap, index) => (
+        <button
+          key={index}
+          onClick={() => emblaApi?.scrollTo(snap)}
+          className={`embla__dot ${selectedIndex === index ? 'embla__dot--selected' : ''}`}
+        >
+          {index === selectedIndex ? '●' : '○'}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default React.memo(CarouselDots);

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

@@ -0,0 +1,14 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface CarouselDotsPropsGenerated {
+  child: string;
+  attributes: {
+    dotType?:
+      | 'expanding_dot'
+      | 'normal_dot'
+      | 'scaling_dot'
+      | 'sliding_border'
+      | 'sliding_dot'
+      | 'liquid_like';
+  };
+}

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

@@ -0,0 +1,3 @@
+import type { CarouselDotsPropsGenerated } from './CarouselDotsProps.generated';
+
+export interface CarouselDotsProps extends CarouselDotsPropsGenerated {}

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

@@ -0,0 +1,18 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "carouselDots",
+    "children": "never",
+    "attributes": {
+      "dotType": [
+        "expanding_dot",
+        "normal_dot",
+        "scaling_dot",
+        "sliding_border",
+        "sliding_dot",
+        "liquid_like"
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { NodeData } from '../../types/Node';
+import type { CarouselItemProps } from './CarouselItemProps';
+import { RenderNode } from '../..';
+
+type CarouselItemComponentProps = {
+  node: NodeData<CarouselItemProps['attributes']>;
+};
+
+export function CarouselItem({ node }: CarouselItemComponentProps) {
+  return (
+    <div className="embla__slide" {...node.attributes}>
+      {node.children && <RenderNode node={node.children} />}
+    </div>
+  );
+}
+
+export default React.memo(CarouselItem);

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

@@ -0,0 +1,6 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface CarouselItemPropsGenerated {
+  child: string;
+  attributes: {};
+}

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

@@ -0,0 +1,3 @@
+import type { CarouselItemPropsGenerated } from './CarouselItemProps.generated';
+
+export interface CarouselItemProps extends CarouselItemPropsGenerated {}

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

@@ -0,0 +1,9 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "carouselItem",
+    "children": "node",
+    "attributes": {}
+  }
+}

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

@@ -0,0 +1,26 @@
+import React, { createContext } from 'react';
+import type { NodeData } from '../../types/Node';
+import type { CarouselProviderProps } from './CarouselProviderProps';
+import { RenderNode } from '../..';
+import useEmblaCarousel from 'embla-carousel-react';
+
+type CarouselProviderComponentProps = {
+  node: NodeData<CarouselProviderProps['attributes']>;
+};
+export const carouselContext = createContext<any>(undefined);
+function CarouselProvider({ node }: CarouselProviderComponentProps) {
+  const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
+  return (
+    <carouselContext.Provider value={emblaApi}>
+      <div className="carousel-provider">
+        <div className="embla">
+          <div className="embla__viewport" ref={emblaRef}>
+            {node.children && <RenderNode node={node.children} />}
+          </div>
+        </div>
+      </div>
+    </carouselContext.Provider>
+  );
+}
+
+export default React.memo(CarouselProvider);

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

@@ -0,0 +1,6 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface CarouselProviderPropsGenerated {
+  child: string;
+  attributes: {};
+}

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

@@ -0,0 +1,3 @@
+import type { CarouselProviderPropsGenerated } from './CarouselProviderProps.generated';
+
+export interface CarouselProviderProps extends CarouselProviderPropsGenerated {}

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

@@ -0,0 +1,9 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "carouselProvider",
+    "children": "node",
+    "attributes": {}
+  }
+}

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { NodeData } from '../../types/Node';
+import type { ImageProps } from './ImageProps';
+
+type ImageComponentProps = {
+  node: NodeData<ImageProps['attributes']>;
+};
+
+function Image({ node }: ImageComponentProps) {
+  return (
+    <img
+      key={node.key}
+      className="primitive primitive-image"
+      src={node.attributes?.src}
+      width={node.attributes?.width}
+      height={node.attributes?.height}
+      style={{
+        width: node.attributes?.width,
+        height: node.attributes?.height,
+        borderRadius: node.attributes?.borderRadius,
+        objectFit:
+          node.attributes?.resizeMode === 'cover'
+            ? 'cover'
+            : node.attributes?.resizeMode === 'contain'
+              ? 'contain'
+              : node.attributes?.resizeMode === 'stretch'
+                ? 'fill'
+                : undefined,
+      }}
+      alt=""
+    />
+  );
+}
+
+export default React.memo(Image);

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

@@ -0,0 +1,12 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface ImagePropsGenerated {
+  child: string;
+  attributes: {
+    src?: string;
+    width?: number;
+    height?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+    borderRadius?: number;
+  };
+}

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

@@ -0,0 +1,3 @@
+import type { ImagePropsGenerated } from './ImageProps.generated';
+
+export interface ImageProps extends ImagePropsGenerated {}

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

@@ -0,0 +1,15 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "image",
+    "children": "never",
+    "attributes": {
+      "src": "string",
+      "width": "number",
+      "height": "number",
+      "resizeMode": ["cover", "contain", "stretch", "center"],
+      "borderRadius": "number"
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { NodeData } from '../../types/Node';
+import type { OnboardProps } from './OnboardProps';
+import Carousel from '../Carousel/Carousel';
+
+type OnboardComponentProps = {
+  node: NodeData<OnboardProps['attributes']>;
+};
+
+function Onboard({ node }: OnboardComponentProps) {
+  return <Carousel node={{ ...node, type: 'carousel' } as any} />;
+}
+
+export default React.memo(Onboard);

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

@@ -0,0 +1,6 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface OnboardPropsGenerated {
+  child: string;
+  attributes: {};
+}

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

@@ -0,0 +1,3 @@
+import type { OnboardPropsGenerated } from './OnboardProps.generated';
+
+export interface OnboardProps extends OnboardPropsGenerated {}

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

@@ -0,0 +1,9 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "Onboard",
+    "children": "node",
+    "attributes": {}
+  }
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { NodeData } from '../../types/Node';
+import type { OnboardBoardTitleProps } from './OnboardBoardTitleProps';
+import Text from '../Text/Text';
+
+type OnboardBoardTitleComponentProps = {
+  node: NodeData<OnboardBoardTitleProps['attributes']>;
+};
+
+function OnboardBoardTitle({ node }: OnboardBoardTitleComponentProps) {
+  return (
+    <Text
+      node={
+        {
+          ...node,
+          type: 'text',
+          attributes: {
+            fontSize: 24,
+            fontWeight: '700',
+            ...(node.attributes as any),
+          },
+        } as any
+      }
+    />
+  );
+}
+
+export default React.memo(OnboardBoardTitle);

package/src/build-components/OnboardBoardTitle/OnboardBoardTitleProps.generated.ts

@@ -0,0 +1,21 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface OnboardBoardTitlePropsGenerated {
+  child: string;
+  attributes: {
+    color?: string;
+    fontSize?: number;
+    fontWeight?:
+      | 'normal'
+      | 'bold'
+      | '100'
+      | '200'
+      | '300'
+      | '400'
+      | '500'
+      | '600'
+      | '700'
+      | '800'
+      | '900';
+  };
+}

package/src/build-components/OnboardBoardTitle/OnboardBoardTitleProps.ts

@@ -0,0 +1,4 @@
+import type { OnboardBoardTitlePropsGenerated } from './OnboardBoardTitleProps.generated';
+
+export interface OnboardBoardTitleProps
+  extends OnboardBoardTitlePropsGenerated {}

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

@@ -0,0 +1,25 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "OnboardBoardTitle",
+    "children": "node",
+    "attributes": {
+      "color": "string",
+      "fontSize": "number",
+      "fontWeight": [
+        "normal",
+        "bold",
+        "100",
+        "200",
+        "300",
+        "400",
+        "500",
+        "600",
+        "700",
+        "800",
+        "900"
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import React, { useContext } from 'react';
+import type { NodeData } from '../../types/Node';
+import type { OnboardButtonProps } from './OnboardButtonProps';
+import { carouselContext } from '../CarouselProvider/CarouselProvider';
+import { mainNodeContext } from '../../RenderMainNode';
+
+type OnboardButtonComponentProps = {
+  node: NodeData<OnboardButtonProps['attributes']>;
+};
+
+function OnboardButton({ node }: OnboardButtonComponentProps) {
+  const emblaApi = useContext(carouselContext);
+  const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
+
+  const labelRaw = node.attributes?.labelKey ?? '';
+  const label =
+    (localication?.[defaultLanguage ?? 'en']?.[labelRaw] as string) ?? labelRaw;
+
+  const flex = node.attributes?.flex ?? 1;
+  const textColor = node.attributes?.button_text_color ?? '#FFFFFF';
+  const backgroundColor = node.attributes?.button_background_color ?? '#0066FF';
+
+  const handleClick = () => {
+    const events = (node.attributes as any)?.events || [];
+    for (const e of events) {
+      if (e.type === 'Permission') {
+        alert(`Permission requested: ${e.permission ?? 'unknown'}`);
+      } else if (e.type === 'Navigate') {
+        // no-op for web demo
+      }
+    }
+    if (typeof node.attributes?.targetIndex === 'number') {
+      emblaApi?.scrollTo(node.attributes.targetIndex);
+    }
+  };
+
+  return (
+    <button
+      className="onboard__button"
+      onClick={handleClick}
+      style={{
+        flex,
+        color: textColor,
+        backgroundColor,
+        border: 'none',
+        borderRadius: 20,
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+      }}
+    >
+      {label}
+    </button>
+  );
+}
+
+export default React.memo(OnboardButton);

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

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface OnboardButtonPropsGenerated {
+  child: string;
+  attributes: {
+    labelKey?: string;
+    button_text_color?: string;
+    button_background_color?: string;
+    flex?: number;
+    targetIndex?: number;
+    events?: string;
+  };
+}

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

@@ -0,0 +1,3 @@
+import type { OnboardButtonPropsGenerated } from './OnboardButtonProps.generated';
+
+export interface OnboardButtonProps extends OnboardButtonPropsGenerated {}

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

@@ -0,0 +1,16 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "OnboardButton",
+    "children": "never",
+    "attributes": {
+      "labelKey": "string",
+      "button_text_color": "string",
+      "button_background_color": "string",
+      "flex": "number",
+      "targetIndex": "number",
+      "events": "string"
+    }
+  }
+}