@developer_tribe/react-builder 0.1.0 → 0.1.2

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

@@ -0,0 +1,76 @@
+import React, { useContext, useEffect, useState } from 'react';
+import type { NodeData, Node } from '../../types/Node';
+import type { OnboardButtonsProps } from './OnboardButtonsProps';
+import { carouselContext } from '../CarouselProvider/CarouselProvider';
+import RenderNode from '../RenderNode.generated';
+
+const THEME_COLORS = {
+  ONBOARD_SEPARATOR_COLOR: '#E5E7EB',
+};
+
+type OnboardButtonsComponentProps = {
+  node: NodeData<OnboardButtonsProps['attributes']>;
+};
+
+function OnboardButtons({ node }: OnboardButtonsComponentProps) {
+  const emblaApi = useContext(carouselContext);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    setSelectedIndex(emblaApi.selectedScrollSnap());
+    emblaApi.on('select', () => {
+      setSelectedIndex(emblaApi.selectedScrollSnap());
+    });
+  }, [emblaApi]);
+
+  if (
+    typeof node.attributes?.forIndex === 'number' &&
+    node.attributes?.forIndex !== selectedIndex
+  ) {
+    return null;
+  }
+
+  const direction =
+    node.attributes?.buttons_direction === 'column' ? 'column' : 'row';
+  const seperatorColor = node.attributes?.seperatorColor;
+
+  const renderChildren = () => {
+    if (Array.isArray(node.children)) {
+      return (node.children as Node[]).map((child, idx) => (
+        <RenderNode key={idx} node={child} />
+      ));
+    }
+    return <RenderNode node={node.children as Node} />;
+  };
+
+  return (
+    <>
+      <div
+        className="onboard__separator"
+        style={{
+          height: 1,
+          backgroundColor:
+            seperatorColor ?? THEME_COLORS.ONBOARD_SEPARATOR_COLOR,
+          width: '100%',
+        }}
+      />
+      <div
+        className="onboard__buttons"
+        style={{
+          display: 'flex',
+          flexDirection: direction as any,
+          height: 40,
+          gap: 12,
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: '12px 24px',
+        }}
+      >
+        {renderChildren()}
+      </div>
+    </>
+  );
+}
+
+export default React.memo(OnboardButtons);

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

@@ -0,0 +1,12 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface OnboardButtonsPropsGenerated {
+  child: string;
+  attributes: {
+    buttonType?: 'previous_button' | 'next_button' | 'skip_button';
+    skipNumber?: number;
+    buttons_direction?: 'row' | 'column';
+    forIndex?: number;
+    seperatorColor?: string;
+  };
+}

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

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

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

@@ -0,0 +1,15 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "OnboardButtons",
+    "children": "node",
+    "attributes": {
+      "buttonType": ["previous_button", "next_button", "skip_button"],
+      "skipNumber": "number",
+      "buttons_direction": ["row", "column"],
+      "forIndex": "number",
+      "seperatorColor": "string"
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { NodeData } from '../../types/Node';
+import type { OnboardExpandingDotProps } from './OnboardExpandingDotProps';
+import CarouselDots from '../CarouselDots/CarouselDots';
+
+type OnboardExpandingDotComponentProps = {
+  node: NodeData<OnboardExpandingDotProps['attributes']>;
+};
+
+function OnboardExpandingDot({ node }: OnboardExpandingDotComponentProps) {
+  return <CarouselDots node={{ ...node, type: 'carouselDots' } as any} />;
+}
+
+export default React.memo(OnboardExpandingDot);

package/src/build-components/OnboardExpandingDot/OnboardExpandingDotProps.generated.ts

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

package/src/build-components/OnboardExpandingDot/OnboardExpandingDotProps.ts

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface OnboardFooterPropsGenerated {
+  child: string;
+  attributes: {
+    scrollable?: boolean;
+    flexDirection?: 'row' | 'column';
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    justifyContent?:
+      | 'flex-start'
+      | 'center'
+      | 'flex-end'
+      | 'space-between'
+      | 'space-around'
+      | 'space-evenly';
+    gap?: number;
+    padding?: number;
+    margin?: number;
+    backgroundColor?: string;
+    borderRadius?: number;
+    width?: number;
+    height?: number;
+  };
+}

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

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

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

@@ -0,0 +1,28 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "OnboardFooter",
+    "children": "node",
+    "attributes": {
+      "scrollable": "boolean",
+      "flexDirection": ["row", "column"],
+      "alignItems": ["flex-start", "center", "flex-end", "stretch", "baseline"],
+      "justifyContent": [
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around",
+        "space-evenly"
+      ],
+      "gap": "number",
+      "padding": "number",
+      "margin": "number",
+      "backgroundColor": "string",
+      "borderRadius": "number",
+      "width": "number",
+      "height": "number"
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { NodeData } from '../../types/Node';
+import type { OnboardImageProps } from './OnboardImageProps';
+import Image from '../Image/Image';
+
+type OnboardImageComponentProps = {
+  node: NodeData<OnboardImageProps['attributes']>;
+};
+
+function OnboardImage({ node }: OnboardImageComponentProps) {
+  return <Image node={{ ...node, type: 'image' } as any} />;
+}
+
+export default React.memo(OnboardImage);

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

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

package/src/build-components/OnboardImage/OnboardImageProps.ts

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

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

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

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

@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import type { NodeData } from '../../types/Node';
+import type { OnboardItemProps } from './OnboardItemProps';
+import CarouselItem from '../CarouselItem/CarouselItem';
+import { isNodeArray } from '../../utils/analyseNode';
+
+type OnboardItemComponentProps = {
+  node: NodeData<OnboardItemProps['attributes']>;
+};
+
+function OnboardItem({ node }: OnboardItemComponentProps) {
+  const children = useMemo(() => {
+    return (
+      (
+        (isNodeArray(node.children)
+          ? node.children
+          : [node.children]) as NodeData[]
+      )
+        //NOTE: İstisna!! Onboard button carousel dışında olacak
+        .filter((s) => (s as NodeData)?.type != 'OnboardButtons')
+    );
+  }, [node.children]) as NodeData[];
+
+  return (
+    <CarouselItem node={{ ...node, type: 'carouselItem', children } as any} />
+  );
+}
+
+export default React.memo(OnboardItem);

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

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

package/src/build-components/OnboardItem/OnboardItemProps.ts

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

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

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

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

@@ -0,0 +1,65 @@
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import type { NodeData } from '../../types/Node';
+import type { OnboardProviderProps } from './OnboardProviderProps';
+import { carouselContext } from '../CarouselProvider/CarouselProvider';
+import { mainNodeContext } from '../../RenderMainNode';
+import { isNodeArray } from '../../utils/analyseNode';
+import useEmblaCarousel from 'embla-carousel-react';
+import RenderNode from '../RenderNode.generated';
+
+type OnboardProviderComponentProps = {
+  node: NodeData<OnboardProviderProps['attributes']>;
+};
+
+function OnboardProvider({ node }: OnboardProviderComponentProps) {
+  const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
+  const { theme, setWarning } = useContext(mainNodeContext) ?? {};
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const children = useMemo(() => {
+    console.log('node', node);
+    console.log('node.children', node.children);
+
+    const onboardChild: NodeData = (node.children as NodeData[]).filter(
+      (c) => c.type === 'Onboard',
+    )[0];
+    if (onboardChild?.type !== 'Onboard') {
+      throw new Error('OnboardProvider at least has an Onboard child');
+    }
+    const onboardItems = onboardChild.children as NodeData[];
+
+    const onboardButtons = (
+      onboardItems[selectedIndex].children as NodeData[]
+    ).filter((s) => (s as NodeData)?.type == 'OnboardButtons');
+    const children: NodeData[] = node.children as NodeData[];
+    return [...children, ...onboardButtons];
+  }, [selectedIndex, node.children]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    setSelectedIndex(emblaApi.selectedScrollSnap());
+    emblaApi.on('select', () => {
+      setSelectedIndex(emblaApi.selectedScrollSnap());
+    });
+  }, [emblaApi]);
+
+  useEffect(() => {
+    if (theme !== (node.attributes as any)?.theme) {
+      setWarning?.('Wrong theme');
+    }
+  }, [theme]);
+
+  return (
+    <carouselContext.Provider value={emblaApi}>
+      <div className="carousel-provider">
+        <div className="embla">
+          <div className="embla__viewport" ref={emblaRef}>
+            {node.children && <RenderNode node={children} />}
+          </div>
+        </div>
+      </div>
+    </carouselContext.Provider>
+  );
+}
+
+export default React.memo(OnboardProvider);

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

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

package/src/build-components/OnboardProvider/OnboardProviderProps.ts

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

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

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

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

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

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

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

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.ts

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

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

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

package/src/build-components/RenderNode.generated.tsx

@@ -0,0 +1,97 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+import React from 'react';
+
+import {
+  Node,
+  NodeData,
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from '../index';
+
+import { other } from './other';
+
+// Builder components
+import Button from './Button/Button';
+import Carousel from './Carousel/Carousel';
+import CarouselButtons from './CarouselButtons/CarouselButtons';
+import CarouselDots from './CarouselDots/CarouselDots';
+import CarouselItem from './CarouselItem/CarouselItem';
+import CarouselProvider from './CarouselProvider/CarouselProvider';
+import Image from './Image/Image';
+import Onboard from './Onboard/Onboard';
+import OnboardBoardTitle from './OnboardBoardTitle/OnboardBoardTitle';
+import OnboardButton from './OnboardButton/OnboardButton';
+import OnboardButtons from './OnboardButtons/OnboardButtons';
+import OnboardExpandingDot from './OnboardExpandingDot/OnboardExpandingDot';
+import OnboardFooter from './OnboardFooter/OnboardFooter';
+import OnboardImage from './OnboardImage/OnboardImage';
+import OnboardItem from './OnboardItem/OnboardItem';
+import OnboardProvider from './OnboardProvider/OnboardProvider';
+import OnboardSubtitle from './OnboardSubtitle/OnboardSubtitle';
+import Text from './Text/Text';
+import View from './View/View';
+
+function RenderNode({ node }: { node: Node }) {
+  if (isNodeNullOrUndefined(node)) {
+    return null;
+  }
+  if (isNodeString(node)) {
+    return <Text node={{ children: node as string, type: 'text' }} />;
+  }
+  if (isNodeArray(node)) {
+    return (
+      <>
+        {(node as Node[]).map((item: Node, index) => (
+          <RenderNode key={index} node={item} />
+        ))}
+      </>
+    );
+  }
+
+  const simpleNode = node as NodeData;
+  switch (simpleNode?.type) {
+    case 'button':
+      return <Button node={simpleNode} />;
+    case 'carousel':
+      return <Carousel node={simpleNode} />;
+    case 'carouselButtons':
+      return <CarouselButtons node={simpleNode} />;
+    case 'carouselDots':
+      return <CarouselDots node={simpleNode} />;
+    case 'carouselItem':
+      return <CarouselItem node={simpleNode} />;
+    case 'carouselProvider':
+      return <CarouselProvider node={simpleNode} />;
+    case 'image':
+      return <Image node={simpleNode} />;
+    case 'Onboard':
+      return <Onboard node={simpleNode} />;
+    case 'OnboardBoardTitle':
+      return <OnboardBoardTitle node={simpleNode} />;
+    case 'OnboardButton':
+      return <OnboardButton node={simpleNode} />;
+    case 'OnboardButtons':
+      return <OnboardButtons node={simpleNode} />;
+    case 'OnboardExpandingDot':
+      return <OnboardExpandingDot node={simpleNode} />;
+    case 'OnboardFooter':
+      return <OnboardFooter node={simpleNode} />;
+    case 'OnboardImage':
+      return <OnboardImage node={simpleNode} />;
+    case 'OnboardItem':
+      return <OnboardItem node={simpleNode} />;
+    case 'OnboardProvider':
+      return <OnboardProvider node={simpleNode} />;
+    case 'OnboardSubtitle':
+      return <OnboardSubtitle node={simpleNode} />;
+    case 'text':
+      return <Text node={simpleNode} />;
+    case 'view':
+      return <View node={simpleNode} />;
+    default:
+      return other(simpleNode?.type, node);
+  }
+}
+
+export default React.memo(RenderNode);

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

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import type { NodeData } from '../../types/Node';
+import type { TextProps } from './TextProps';
+import { mainNodeContext } from '../../RenderMainNode';
+
+type TextComponentProps = {
+  node: NodeData<TextProps['attributes']>;
+};
+
+function Text({ node }: TextComponentProps) {
+  const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
+  const keyOrText: string = node.children as string;
+  return (
+    <p
+      style={node.attributes as React.CSSProperties}
+      className="primitive primitive-text"
+    >
+      {localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText}
+    </p>
+  );
+}
+
+export default React.memo(Text);

package/src/build-components/Text/TextProps.generated.ts

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

package/src/build-components/Text/TextProps.ts

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