@developer_tribe/react-builder 0.1.31 → 1.0.1

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ButtonComponentProps } from './ButtonProps.generated';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Button({ node }: ButtonComponentProps) {
+  useLogRender('Button');
   node = useNode(node);
   return String(node?.type ?? 'button');
 }

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

@@ -2,23 +2,25 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type FontWeightOptionType =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900';
+
 export interface ButtonPropsGenerated {
   child: string;
   attributes: {
     color?: string;
     fontSize?: number;
-    fontWeight?:
-      | 'normal'
-      | 'bold'
-      | '100'
-      | '200'
-      | '300'
-      | '400'
-      | '500'
-      | '600'
-      | '700'
-      | '800'
-      | '900';
+    fontWeight?: FontWeightOptionType;
   };
 }
 

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

@@ -3,8 +3,10 @@ import type { CarouselComponentProps } from './CarouselProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { isCarouselItem } from '../../utils/isCarousel';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Carousel({ node }: CarouselComponentProps) {
+  useLogRender('Carousel');
   node = useNode(node);
   // Ensure children are carouselItems
   const renderChildren = () => {

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

@@ -2,8 +2,10 @@ import React, { useContext } from 'react';
 import type { CarouselButtonsComponentProps } from './CarouselButtonsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function CarouselButtons({ node }: CarouselButtonsComponentProps) {
+  useLogRender('CarouselButtons');
   node = useNode(node);
   const emblaApi = useContext(carouselContext);
   const buttonTypes = node.attributes?.buttonType || [

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

@@ -2,10 +2,15 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ButtonTypeOptionType =
+  | 'previous_button'
+  | 'next_button'
+  | 'skip_button';
+
 export interface CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
-    buttonType?: 'previous_button' | 'next_button' | 'skip_button';
+    buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
   };
 }

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

@@ -2,8 +2,10 @@ import React, { useContext, useEffect, useState } from 'react';
 import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
+  useLogRender('CarouselDots');
   node = useNode(node);
   const dotType = node.attributes?.dotType || 'normal_dot';
   const emblaApi = useContext(carouselContext);

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

@@ -2,16 +2,18 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type DotTypeOptionType =
+  | 'expanding_dot'
+  | 'normal_dot'
+  | 'scaling_dot'
+  | 'sliding_border'
+  | 'sliding_dot'
+  | 'liquid_like';
+
 export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
-    dotType?:
-      | 'expanding_dot'
-      | 'normal_dot'
-      | 'scaling_dot'
-      | 'sliding_border'
-      | 'sliding_dot'
-      | 'liquid_like';
+    dotType?: DotTypeOptionType;
   };
 }
 

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { CarouselItemComponentProps } from './CarouselItemProps.generated';
 import { RenderNode } from '../..';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 export function CarouselItem({ node }: CarouselItemComponentProps) {
+  useLogRender('CarouselItem');
   node = useNode(node);
   return (
     <div className="embla__slide" {...node.attributes}>

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { ImageComponentProps } from './ImageProps.generated';
 import useNode from '../useNode';
 import { extractImageStyle } from '../../utils/extractImageStyle';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Image({ node }: ImageComponentProps) {
+  useLogRender('Image');
   node = useNode(node);
   return (
     <img

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

@@ -2,13 +2,15 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
+
 export interface ImagePropsGenerated {
   child: string;
   attributes: {
     src?: string;
     width?: number;
     height?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+    resizeMode?: ResizeModeOptionType;
     borderRadius?: number;
   };
 }

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardComponentProps } from './OnboardProps.generated';
 import Carousel from '../Carousel/Carousel';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Onboard({ node }: OnboardComponentProps) {
+  useLogRender('Onboard');
   node = useNode(node);
   return <Carousel node={{ ...node, type: 'carousel' } as any} />;
 }

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

@@ -3,18 +3,21 @@ import type { OnboardButtonComponentProps } from './OnboardButtonProps.generated
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
+  useLogRender('OnboardButton');
   node = useNode(node);
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { defaultLanguage, localication } = useRenderStore((s) => ({
-    defaultLanguage: s.defaultLanguage,
-    localication: s.localication,
+  const { appConfig } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
   }));
 
   const labelRaw = node.attributes?.labelKey ?? '';
   const label =
-    (localication?.[defaultLanguage ?? 'en']?.[labelRaw] as string) ?? labelRaw;
+    (appConfig.localication?.[appConfig.defaultLanguage ?? 'en']?.[
+      labelRaw
+    ] as string) ?? labelRaw;
 
   const flex = node.attributes?.flex ?? 1;
   const textColor = node.attributes?.button_text_color ?? '#FFFFFF';

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

@@ -2,10 +2,20 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type TypeOptionType = 'Permission' | 'Navigate';
+export type PermissionOptionType = 'att' | 'notification' | 'rating' | 'GDPR';
+export type AnimationOptionType =
+  | 'simple-animation'
+  | 'line-animation'
+  | 'blur'
+  | 'blur-animation'
+  | 'blur-line-animation';
+
 export interface EventObjectGenerated {
-  type?: 'Permission' | 'Navigate';
-  permission?: 'att' | 'notification' | 'rating' | 'null';
-  navigate_to?: 'string' | 'null';
+  type?: TypeOptionType;
+  permission?: PermissionOptionType | null;
+  navigate_to?: string;
+  targetIndex?: number;
 }
 
 export interface OnboardButtonPropsGenerated {
@@ -13,12 +23,7 @@ export interface OnboardButtonPropsGenerated {
   attributes: {
     labelKey?: string;
     button_text_color?: string;
-    animation?:
-      | 'simple-animation'
-      | 'line-animation'
-      | 'blur'
-      | 'blur-animation'
-      | 'blur-line-animation';
+    animation?: AnimationOptionType;
     animation_color?: string;
     button_background_color?: string;
     flex?: number;

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

@@ -23,8 +23,9 @@
   "types": {
     "EventObject": {
       "type": ["Permission", "Navigate"],
-      "permission": ["att", "notification", "rating", "null"],
-      "navigate_to": ["string", "null"]
+      "permission": ["att", "notification", "rating", "GDPR", "null"],
+      "navigate_to": "string",
+      "targetIndex": "number"
     }
   }
 }

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

@@ -5,19 +5,19 @@ import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
+  useLogRender('OnboardButtons');
   node = useNode(node);
-  const { screenStyle, theme } = useRenderStore((s) => ({
-    screenStyle: s.screenStyle,
-    theme: s.theme,
+  const { appConfig } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
   }));
   const seperatorColorDefault =
-    theme === 'light'
-      ? screenStyle.light.seperatorColor
-      : screenStyle.dark.seperatorColor;
+    appConfig.theme === 'light'
+      ? appConfig.screenStyle.light.seperatorColor
+      : appConfig.screenStyle.dark.seperatorColor;
   const ctx = useContext(onboardContext) ?? {};
-  const emblaApi = ctx.emblaApi;
   const [selectedIndex, setSelectedIndex] = useState(ctx.selectedIndex ?? 0);
 
   useEffect(() => {

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

@@ -2,15 +2,22 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ButtonTypeOptionType =
+  | 'previous_button'
+  | 'next_button'
+  | 'skip_button';
+export type ButtonsDirectionOptionType = 'row' | 'column';
+export type ConditionOptionType = 'carousel-index';
+
 export interface OnboardButtonsPropsGenerated {
   child: string;
   attributes: {
-    buttonType?: 'previous_button' | 'next_button' | 'skip_button';
+    buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
-    buttons_direction?: 'row' | 'column';
+    buttons_direction?: ButtonsDirectionOptionType;
     forIndex?: number;
     seperatorColor?: string;
-    condition?: 'carousel-index';
+    condition?: ConditionOptionType;
     conditionVariable?: number;
   };
 }

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardDotComponentProps } from './OnboardExpandingDotProps.generated';
 import CarouselDots from '../CarouselDots/CarouselDots';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
+  useLogRender('OnboardDot');
   node = useNode(node);
   return <CarouselDots node={{ ...node, type: 'carouselDots' } as any} />;
 }

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

@@ -2,16 +2,18 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type DotTypeOptionType =
+  | 'expanding_dot'
+  | 'normal_dot'
+  | 'scaling_dot'
+  | 'sliding_border'
+  | 'sliding_dot'
+  | 'liquid_like';
+
 export interface OnboardDotPropsGenerated {
   child: string;
   attributes: {
-    dotType?:
-      | 'expanding_dot'
-      | 'normal_dot'
-      | 'scaling_dot'
-      | 'sliding_border'
-      | 'sliding_dot'
-      | 'liquid_like';
+    dotType?: DotTypeOptionType;
     inactive_dot_opacity?: number;
     expanding_dot_width?: number;
     dot_style?: string;

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

@@ -4,6 +4,7 @@ import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
 import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useLogRender } from '../../utils/useLogRender';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -86,11 +87,12 @@ function buildSegments(
 }
 
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
+  useLogRender('OnboardFooter');
   node = useNode(node);
-  const { defaultLanguage, localication } = useRenderStore((s) => ({
-    defaultLanguage: s.defaultLanguage,
-    localication: s.localication,
+  const { appConfig } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
   }));
+  const { localication, defaultLanguage } = appConfig;
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 

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

@@ -2,34 +2,45 @@
 
 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 interface OnboardFooterPropsGenerated {
   child: string;
   attributes: {
     color?: string;
     fontSize?: number;
-    fontWeight?:
-      | 'normal'
-      | 'bold'
-      | '100'
-      | '200'
-      | '300'
-      | '400'
-      | '500'
-      | '600'
-      | '700'
-      | '800'
-      | '900';
-    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    fontWeight?: FontWeightOptionType;
+    textAlign?: TextAlignOptionType;
     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';
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
     gap?: string;
     padding?: number;
     paddingHorizontal?: string;

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

@@ -1,10 +1,35 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
 import useNode from '../useNode';
+import Lottie from 'lottie-react';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
+  useLogRender('OnboardImage');
   node = useNode(node);
+  const [lottie, setLottie] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (node.attributes?.lottie) {
+      fetch(node.attributes?.lottie)
+        .then((res) => res.json())
+        .then((data) => setLottie(data));
+    }
+  }, [node.attributes?.lottie]);
+
+  if (node.attributes?.video_url) {
+    return <video autoPlay muted loop src={node.attributes?.video_url} />;
+  }
+
+  if (node.attributes?.lottie) {
+    if (lottie) {
+      return <Lottie animationData={lottie} />;
+    } else {
+      return <div>Loading...</div>;
+    }
+  }
+
   return <Image node={{ ...node, type: 'image' } as any} />;
 }
 

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

@@ -2,14 +2,18 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
+
 export interface OnboardImagePropsGenerated {
   child: string;
   attributes: {
     src?: string;
     width?: number;
     height?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+    resizeMode?: ResizeModeOptionType;
     borderRadius?: number;
+    video_url?: string;
+    lottie?: string;
   };
 }
 

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

@@ -4,12 +4,10 @@
   "pattern": {
     "type": "OnboardImage",
     "children": "node",
+    "extends": "Image",
     "attributes": {
-      "src": "string",
-      "width": "number",
-      "height": "number",
-      "resizeMode": ["cover", "contain", "stretch", "center"],
-      "borderRadius": "number"
+      "video_url": "string",
+      "lottie": "string"
     }
   }
 }

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

@@ -3,8 +3,10 @@ import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import { RenderNode } from '../..';
 import { parseSize } from '../../size-matters';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
+  useLogRender('OnboardItem');
   node = useNode(node);
   const flexDirection = node.attributes?.flexDirection;
   const display = node.attributes?.display;

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

@@ -2,12 +2,15 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type DisplayOptionType = 'flex' | 'block';
+export type FlexDirectionOptionType = 'row' | 'column';
+
 export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
-    display?: 'flex' | 'block';
+    display?: DisplayOptionType;
     gap?: string;
-    flexDirection?: 'row' | 'column';
+    flexDirection?: FlexDirectionOptionType;
     paddingHorizontal?: string;
   };
 }

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

@@ -11,9 +11,11 @@ import useEmblaCarousel from 'embla-carousel-react';
 import RenderNode from '../RenderNode.generated';
 import { useRenderStore } from '../../store';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
+  useLogRender('OnboardProvider');
   node = useNode(node);
   const device = useRenderStore((s) => s.device);
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardSubtitleComponentProps } from './OnboardSubtitleProps.generated';
 import Text from '../Text/Text';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardSubtitle({ node }: OnboardSubtitleComponentProps) {
+  useLogRender('OnboardSubtitle');
   node = useNode(node);
   return <Text node={node} />;
 }

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

@@ -2,34 +2,45 @@
 
 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 interface OnboardSubtitlePropsGenerated {
   child: string;
   attributes: {
     color?: string;
     fontSize?: number;
-    fontWeight?:
-      | 'normal'
-      | 'bold'
-      | '100'
-      | '200'
-      | '300'
-      | '400'
-      | '500'
-      | '600'
-      | '700'
-      | '800'
-      | '900';
-    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    fontWeight?: FontWeightOptionType;
+    textAlign?: TextAlignOptionType;
     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';
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
     gap?: string;
     padding?: number;
     paddingHorizontal?: string;

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardTitleComponentProps } from './OnboardTitleProps.generated';
 import Text from '../Text/Text';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardTitle({ node }: OnboardTitleComponentProps) {
+  useLogRender('OnboardTitle');
   node = useNode(node);
   return <Text node={node} />;
 }