@developer_tribe/react-builder 1.0.4 → 1.0.5

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

@@ -0,0 +1,42 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": true,
+  "pattern": {
+    "type": "RadioButton",
+    "children": "never",
+    "extends": "View",
+    "attributes": {
+      "selected": "boolean",
+      "color": "color",
+      "size": "number"
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Radio Button",
+    "description": "Generic radio button icon.",
+    "attributes": {
+      "selected": {
+        "label": "Selected",
+        "description": "Whether the radio is selected.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 0
+      },
+      "color": {
+        "label": "Color",
+        "description": "Radio color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "size": {
+        "label": "Size",
+        "description": "Radio size in px.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      }
+    }
+  }
+}

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

@@ -1,17 +1,48 @@
 /* AUTO-GENERATED FILE - DO NOT EDIT */
 import React from 'react';
 
+import { normalizeComponentType } from '../utils/patterns';
+
+import type { Node } from '../types/Node';
 import {
-  Node,
-  NodeData,
   isNodeArray,
   isNodeNullOrUndefined,
   isNodeString,
-} from '../index';
+} from '../utils/analyseNode';
 
 import { other } from './other';
 
 // Builder components
+import type { BIconComponentProps } from './BIcon/BIconProps.generated';
+import type { BackgroundImageComponentProps } from './BackgroundImage/BackgroundImageProps.generated';
+import type { ButtonComponentProps } from './Button/ButtonProps.generated';
+import type { CarouselComponentProps } from './Carousel/CarouselProps.generated';
+import type { CarouselButtonsComponentProps } from './CarouselButtons/CarouselButtonsProps.generated';
+import type { CarouselDotsComponentProps } from './CarouselDots/CarouselDotsProps.generated';
+import type { CarouselItemComponentProps } from './CarouselItem/CarouselItemProps.generated';
+import type { CarouselProviderComponentProps } from './CarouselProvider/CarouselProviderProps.generated';
+import type { ImageComponentProps } from './Image/ImageProps.generated';
+import type { MainComponentProps } from './Main/MainProps.generated';
+import type { OnboardComponentProps } from './Onboard/OnboardProps.generated';
+import type { OnboardButtonComponentProps } from './OnboardButton/OnboardButtonProps.generated';
+import type { OnboardButtonsComponentProps } from './OnboardButtons/OnboardButtonsProps.generated';
+import type { OnboardDotComponentProps } from './OnboardDot/OnboardDotProps.generated';
+import type { OnboardFooterComponentProps } from './OnboardFooter/OnboardFooterProps.generated';
+import type { OnboardImageComponentProps } from './OnboardImage/OnboardImageProps.generated';
+import type { OnboardItemComponentProps } from './OnboardItem/OnboardItemProps.generated';
+import type { OnboardProviderComponentProps } from './OnboardProvider/OnboardProviderProps.generated';
+import type { OnboardSubtitleComponentProps } from './OnboardSubtitle/OnboardSubtitleProps.generated';
+import type { OnboardTitleComponentProps } from './OnboardTitle/OnboardTitleProps.generated';
+import type { PaywallBackgroundComponentProps } from './PaywallBackground/PaywallBackgroundProps.generated';
+import type { PaywallCloseButtonComponentProps } from './PaywallCloseButton/PaywallCloseButtonProps.generated';
+import type { PaywallOptionsComponentProps } from './PaywallOptions/PaywallOptionsProps.generated';
+import type { PaywallProviderComponentProps } from './PaywallProvider/PaywallProviderProps.generated';
+import type { PaywallSubscriButtonComponentProps } from './PaywallSubscriButton/PaywallSubscriButtonProps.generated';
+import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
+import type { RadioButtonComponentProps } from './RadioButton/RadioButtonProps.generated';
+import type { TextComponentProps } from './Text/TextProps.generated';
+import type { ViewComponentProps } from './View/ViewProps.generated';
+import BIcon from './BIcon/BIcon';
 import BackgroundImage from './BackgroundImage/BackgroundImage';
 import Button from './Button/Button';
 import Carousel from './Carousel/Carousel';
@@ -20,6 +51,7 @@ import CarouselDots from './CarouselDots/CarouselDots';
 import CarouselItem from './CarouselItem/CarouselItem';
 import CarouselProvider from './CarouselProvider/CarouselProvider';
 import Image from './Image/Image';
+import Main from './Main/Main';
 import Onboard from './Onboard/Onboard';
 import OnboardButton from './OnboardButton/OnboardButton';
 import OnboardButtons from './OnboardButtons/OnboardButtons';
@@ -30,15 +62,57 @@ import OnboardItem from './OnboardItem/OnboardItem';
 import OnboardProvider from './OnboardProvider/OnboardProvider';
 import OnboardSubtitle from './OnboardSubtitle/OnboardSubtitle';
 import OnboardTitle from './OnboardTitle/OnboardTitle';
+import PaywallBackground from './PaywallBackground/PaywallBackground';
+import PaywallCloseButton from './PaywallCloseButton/PaywallCloseButton';
+import PaywallOptions from './PaywallOptions/PaywallOptions';
+import PaywallProvider from './PaywallProvider/PaywallProvider';
+import PaywallSubscriButton from './PaywallSubscriButton/PaywallSubscriButton';
+import PaywallSubscribeButton from './PaywallSubscribeButton/PaywallSubscribeButton';
+import RadioButton from './RadioButton/RadioButton';
 import Text from './Text/Text';
 import View from './View/View';
 
+type BuilderNode =
+  | (BIconComponentProps['node'] & { type: 'BIcon' })
+  | (BackgroundImageComponentProps['node'] & { type: 'BackgroundImage' })
+  | (ButtonComponentProps['node'] & { type: 'Button' })
+  | (CarouselComponentProps['node'] & { type: 'Carousel' })
+  | (CarouselButtonsComponentProps['node'] & { type: 'CarouselButtons' })
+  | (CarouselDotsComponentProps['node'] & { type: 'CarouselDots' })
+  | (CarouselItemComponentProps['node'] & { type: 'CarouselItem' })
+  | (CarouselProviderComponentProps['node'] & { type: 'CarouselProvider' })
+  | (ImageComponentProps['node'] & { type: 'Image' })
+  | (MainComponentProps['node'] & { type: 'Main' })
+  | (OnboardComponentProps['node'] & { type: 'Onboard' })
+  | (OnboardButtonComponentProps['node'] & { type: 'OnboardButton' })
+  | (OnboardButtonsComponentProps['node'] & { type: 'OnboardButtons' })
+  | (OnboardDotComponentProps['node'] & { type: 'OnboardDot' })
+  | (OnboardFooterComponentProps['node'] & { type: 'OnboardFooter' })
+  | (OnboardImageComponentProps['node'] & { type: 'OnboardImage' })
+  | (OnboardItemComponentProps['node'] & { type: 'OnboardItem' })
+  | (OnboardProviderComponentProps['node'] & { type: 'OnboardProvider' })
+  | (OnboardSubtitleComponentProps['node'] & { type: 'OnboardSubtitle' })
+  | (OnboardTitleComponentProps['node'] & { type: 'OnboardTitle' })
+  | (PaywallBackgroundComponentProps['node'] & { type: 'PaywallBackground' })
+  | (PaywallCloseButtonComponentProps['node'] & { type: 'PaywallCloseButton' })
+  | (PaywallOptionsComponentProps['node'] & { type: 'PaywallOptions' })
+  | (PaywallProviderComponentProps['node'] & { type: 'PaywallProvider' })
+  | (PaywallSubscriButtonComponentProps['node'] & {
+      type: 'PaywallSubscriButton';
+    })
+  | (PaywallSubscribeButtonComponentProps['node'] & {
+      type: 'PaywallSubscribeButton';
+    })
+  | (RadioButtonComponentProps['node'] & { type: 'RadioButton' })
+  | (TextComponentProps['node'] & { type: 'Text' })
+  | (ViewComponentProps['node'] & { type: 'View' });
+
 function RenderNode({ node }: { node: Node }) {
   if (isNodeNullOrUndefined(node)) {
     return null;
   }
   if (isNodeString(node)) {
-    return <Text node={{ children: node as string, type: 'text' }} />;
+    return <Text node={{ children: node as string, type: 'Text' }} />;
   }
   if (isNodeArray(node)) {
     return (
@@ -50,50 +124,79 @@ function RenderNode({ node }: { node: Node }) {
     );
   }
 
-  const simpleNode = node as NodeData;
-  switch (simpleNode?.type) {
-    case 'background-image':
-      return <BackgroundImage node={simpleNode} />;
-    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} />;
+  const nodeType =
+    typeof (node as { type?: unknown })?.type === 'string'
+      ? (node as { type: string }).type
+      : 'unknown';
+
+  const normalizedType = normalizeComponentType(nodeType) ?? nodeType;
+
+  // Force a stable discriminant so TS can narrow the BuilderNode union.
+  const normalizedNode = {
+    ...(node as any),
+    type: normalizedType,
+  } as BuilderNode;
+  switch (normalizedNode.type) {
+    case 'BIcon':
+      return <BIcon node={normalizedNode} />;
+    case 'BackgroundImage':
+      return <BackgroundImage node={normalizedNode} />;
+    case 'Button':
+      return <Button node={normalizedNode} />;
+    case 'Carousel':
+      return <Carousel node={normalizedNode} />;
+    case 'CarouselButtons':
+      return <CarouselButtons node={normalizedNode} />;
+    case 'CarouselDots':
+      return <CarouselDots node={normalizedNode} />;
+    case 'CarouselItem':
+      return <CarouselItem node={normalizedNode} />;
+    case 'CarouselProvider':
+      return <CarouselProvider node={normalizedNode} />;
+    case 'Image':
+      return <Image node={normalizedNode} />;
+    case 'Main':
+      return <Main node={normalizedNode} />;
     case 'Onboard':
-      return <Onboard node={simpleNode} />;
+      return <Onboard node={normalizedNode} />;
     case 'OnboardButton':
-      return <OnboardButton node={simpleNode} />;
+      return <OnboardButton node={normalizedNode} />;
     case 'OnboardButtons':
-      return <OnboardButtons node={simpleNode} />;
+      return <OnboardButtons node={normalizedNode} />;
     case 'OnboardDot':
-      return <OnboardDot node={simpleNode} />;
+      return <OnboardDot node={normalizedNode} />;
     case 'OnboardFooter':
-      return <OnboardFooter node={simpleNode} />;
+      return <OnboardFooter node={normalizedNode} />;
     case 'OnboardImage':
-      return <OnboardImage node={simpleNode} />;
+      return <OnboardImage node={normalizedNode} />;
     case 'OnboardItem':
-      return <OnboardItem node={simpleNode} />;
+      return <OnboardItem node={normalizedNode} />;
     case 'OnboardProvider':
-      return <OnboardProvider node={simpleNode} />;
+      return <OnboardProvider node={normalizedNode} />;
     case 'OnboardSubtitle':
-      return <OnboardSubtitle node={simpleNode} />;
+      return <OnboardSubtitle node={normalizedNode} />;
     case 'OnboardTitle':
-      return <OnboardTitle node={simpleNode} />;
-    case 'text':
-      return <Text node={simpleNode} />;
-    case 'view':
-      return <View node={simpleNode} />;
+      return <OnboardTitle node={normalizedNode} />;
+    case 'PaywallBackground':
+      return <PaywallBackground node={normalizedNode} />;
+    case 'PaywallCloseButton':
+      return <PaywallCloseButton node={normalizedNode} />;
+    case 'PaywallOptions':
+      return <PaywallOptions node={normalizedNode} />;
+    case 'PaywallProvider':
+      return <PaywallProvider node={normalizedNode} />;
+    case 'PaywallSubscriButton':
+      return <PaywallSubscriButton node={normalizedNode} />;
+    case 'PaywallSubscribeButton':
+      return <PaywallSubscribeButton node={normalizedNode} />;
+    case 'RadioButton':
+      return <RadioButton node={normalizedNode} />;
+    case 'Text':
+      return <Text node={normalizedNode} />;
+    case 'View':
+      return <View node={normalizedNode} />;
     default:
-      return other(simpleNode?.type, node);
+      return other(nodeType, node);
   }
 }
 

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

@@ -6,6 +6,7 @@ import { extractTextStyle } from '../../utils/extractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
+import { useLocalize } from '../../hooks/useLocalize';
 
 function Text({ node }: TextComponentProps) {
   useLogRender('Text');
@@ -21,7 +22,6 @@ function Text({ node }: TextComponentProps) {
       current: s.current,
     }),
   );
-  const { defaultLanguage, localication } = appConfig;
   const keyOrText: string = node.children as string;
   const textStyle = useMemo(
     () => extractTextStyle(node, { appConfig, projectColors }),
@@ -32,14 +32,14 @@ function Text({ node }: TextComponentProps) {
     textStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-
+  const localize = useLocalize();
   return (
     <p
       attribute-name={attributeName}
       attribute-key={attributeKey}
       style={style}
     >
-      {localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText}
+      {localize(keyOrText)}
     </p>
   );
 }

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

@@ -55,7 +55,11 @@ export interface TextPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
     flex?: number;
     position?: PositionOptionType;
     top?: string;

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

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
-    "type": "text",
+    "type": "Text",
     "children": "string",
     "extends": "View",
     "attributes": {

package/src/build-components/View/ViewProps.generated.ts

@@ -42,7 +42,11 @@ export interface ViewPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
     flex?: number;
     position?: PositionOptionType;
     top?: string;

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

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "allowUnknownAttributes": false,
   "pattern": {
-    "type": "view",
+    "type": "View",
     "children": ["node", "array"],
     "attributes": {
       "scrollable": "boolean",
@@ -33,7 +33,11 @@
       "backgroundColor": "color",
       "borderRadius": "size",
       "width": "size",
+      "minWidth": "size",
+      "maxWidth": "size",
       "height": "size",
+      "minHeight": "size",
+      "maxHeight": "size",
       "flex": "number",
       "position": ["relative", "absolute"],
       "top": "size",
@@ -43,7 +47,9 @@
       "zIndex": "number"
     },
     "defaults": {
-      "flexDirection": "column"
+      "flexDirection": "column",
+      "position": "relative",
+      "zIndex": 1
     }
   },
   "meta": {
@@ -248,12 +254,44 @@
         "sort": 0,
         "preferedScale": "s"
       },
+      "minWidth": {
+        "label": "Min Width",
+        "description": "Minimum width constraint.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 1,
+        "preferedScale": "s"
+      },
+      "maxWidth": {
+        "label": "Max Width",
+        "description": "Maximum width constraint.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 2,
+        "preferedScale": "s"
+      },
       "height": {
         "label": "Height",
         "description": "Fixed height value.",
         "category": "container",
         "specialCategory": "size",
-        "sort": 1,
+        "sort": 3,
+        "preferedScale": "vs"
+      },
+      "minHeight": {
+        "label": "Min Height",
+        "description": "Minimum height constraint.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 4,
+        "preferedScale": "vs"
+      },
+      "maxHeight": {
+        "label": "Max Height",
+        "description": "Maximum height constraint.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 5,
         "preferedScale": "vs"
       },
       "flex": {
@@ -261,7 +299,7 @@
         "description": "Flex grow factor (e.g. 1 fills available space).",
         "category": "container",
         "specialCategory": "size",
-        "sort": 2
+        "sort": 6
       },
       "position": {
         "label": "Position",

package/src/build-components/index.ts

@@ -5,14 +5,16 @@ export { default as RenderNode } from './RenderNode.generated';
 export { patterns } from './patterns.generated';
 
 export const allcomponentNames = [
-  'background-image',
-  'button',
-  'carousel',
-  'carouselButtons',
-  'carouselDots',
-  'carouselItem',
-  'carouselProvider',
-  'image',
+  'BIcon',
+  'BackgroundImage',
+  'Button',
+  'Carousel',
+  'CarouselButtons',
+  'CarouselDots',
+  'CarouselItem',
+  'CarouselProvider',
+  'Image',
+  'Main',
   'Onboard',
   'OnboardButton',
   'OnboardButtons',
@@ -23,10 +25,21 @@ export const allcomponentNames = [
   'OnboardProvider',
   'OnboardSubtitle',
   'OnboardTitle',
-  'text',
-  'view',
+  'PaywallBackground',
+  'PaywallCloseButton',
+  'PaywallOptions',
+  'PaywallProvider',
+  'PaywallSubscriButton',
+  'PaywallSubscribeButton',
+  'RadioButton',
+  'Text',
+  'View',
 ] as const;
 
+export type {
+  BIconPropsGenerated,
+  BIconComponentProps,
+} from './BIcon/BIconProps.generated';
 export type {
   BackgroundImagePropsGenerated,
   BackgroundImageComponentProps,
@@ -59,6 +72,10 @@ export type {
   ImagePropsGenerated,
   ImageComponentProps,
 } from './Image/ImageProps.generated';
+export type {
+  MainPropsGenerated,
+  MainComponentProps,
+} from './Main/MainProps.generated';
 export type {
   OnboardPropsGenerated,
   OnboardComponentProps,
@@ -99,6 +116,34 @@ export type {
   OnboardTitlePropsGenerated,
   OnboardTitleComponentProps,
 } from './OnboardTitle/OnboardTitleProps.generated';
+export type {
+  PaywallBackgroundPropsGenerated,
+  PaywallBackgroundComponentProps,
+} from './PaywallBackground/PaywallBackgroundProps.generated';
+export type {
+  PaywallCloseButtonPropsGenerated,
+  PaywallCloseButtonComponentProps,
+} from './PaywallCloseButton/PaywallCloseButtonProps.generated';
+export type {
+  PaywallOptionsPropsGenerated,
+  PaywallOptionsComponentProps,
+} from './PaywallOptions/PaywallOptionsProps.generated';
+export type {
+  PaywallProviderPropsGenerated,
+  PaywallProviderComponentProps,
+} from './PaywallProvider/PaywallProviderProps.generated';
+export type {
+  PaywallSubscriButtonPropsGenerated,
+  PaywallSubscriButtonComponentProps,
+} from './PaywallSubscriButton/PaywallSubscriButtonProps.generated';
+export type {
+  PaywallSubscribeButtonPropsGenerated,
+  PaywallSubscribeButtonComponentProps,
+} from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
+export type {
+  RadioButtonPropsGenerated,
+  RadioButtonComponentProps,
+} from './RadioButton/RadioButtonProps.generated';
 export type {
   TextPropsGenerated,
   TextComponentProps,