@developer_tribe/react-builder 1.1.0 → 1.2.0

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 { 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';
 import CarouselButtons from './CarouselButtons/CarouselButtons';
@@ -19,6 +50,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';
@@ -29,15 +61,53 @@ 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 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' })
+  | (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 (
@@ -49,48 +119,77 @@ function RenderNode({ node }: { node: Node }) {
     );
   }
 
-  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} />;
+  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 '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

@@ -1,21 +1,148 @@
-import React from 'react';
+import React, {
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 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');
   node = useNode(node);
-  const { appConfig } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-  }));
-  const { defaultLanguage, localication } = appConfig;
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'text';
+  const attributeKey = node.key ?? generatedId;
+  const textRef = useRef<HTMLParagraphElement | null>(null);
+  const [autoFontSizePx, setAutoFontSizePx] = useState<number | null>(null);
+  const { appConfig, projectColors, previewMode, current } = useRenderStore(
+    (s) => ({
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+      previewMode: s.previewMode,
+      current: s.current,
+    }),
+  );
   const keyOrText: string = node.children as string;
-  const style = extractTextStyle(node);
+  const textStyle = useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const localize = useLocalize();
+
+  const localizedText = useMemo(
+    () => localize(keyOrText),
+    [localize, keyOrText],
+  );
+
+  const attrs = (node as any)?.attributes as
+    | (Record<string, unknown> & { style?: Record<string, unknown> })
+    | undefined;
+  const styleBag = attrs?.style;
+  const adjustsFontSizeToFit =
+    (attrs?.adjustsFontSizeToFit as boolean | undefined) ??
+    (styleBag?.adjustsFontSizeToFit as boolean | undefined) ??
+    false;
+  const showEllipsis =
+    (attrs?.showEllipsis as boolean | undefined) ??
+    (styleBag?.showEllipsis as boolean | undefined) ??
+    false;
+
+  useLayoutEffect(() => {
+    if (!adjustsFontSizeToFit) {
+      setAutoFontSizePx(null);
+      return;
+    }
+
+    const el = textRef.current;
+    if (!el) return;
+
+    const compute = () => {
+      const availableWidth = el.clientWidth;
+      const availableHeight = el.clientHeight;
+      const len = localizedText?.length ?? 0;
+
+      if (!availableWidth || !availableHeight || !len) {
+        setAutoFontSizePx(null);
+        return;
+      }
+
+      // TODO: fontSize = Math.sqrt(textWidth*textHeight/text.length)
+      const candidate = Math.sqrt((availableWidth * availableHeight) / len);
+      const computedFontSizePx = Number.parseFloat(
+        window.getComputedStyle(el).fontSize,
+      );
+      const maxPx = Number.isFinite(computedFontSizePx)
+        ? computedFontSizePx
+        : undefined;
+
+      // Keep it within a sane range and never increase beyond current font size.
+      const clamped = Math.max(
+        8,
+        maxPx ? Math.min(candidate, maxPx) : candidate,
+      );
+      setAutoFontSizePx(Number.isFinite(clamped) ? clamped : null);
+    };
+
+    compute();
+
+    let ro: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      ro = new ResizeObserver(() => compute());
+      ro.observe(el);
+    } else {
+      window.addEventListener('resize', compute);
+    }
+
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener('resize', compute);
+    };
+  }, [adjustsFontSizeToFit, localizedText]);
+
+  const extraStyle = useMemo((): React.CSSProperties | undefined => {
+    let next: React.CSSProperties | undefined;
+
+    if (showEllipsis) {
+      next = {
+        ...(next ?? {}),
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      };
+    }
+
+    if (autoFontSizePx !== null) {
+      next = {
+        ...(next ?? {}),
+        fontSize: `${autoFontSizePx}px`,
+      };
+    }
+
+    return next;
+  }, [showEllipsis, autoFontSizePx]);
+
+  const style = useMergedStyle(
+    useMergedStyle(textStyle, extraStyle),
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
 
   return (
-    <p style={style}>
-      {localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText}
+    <p
+      ref={textRef}
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      {localizedText}
     </p>
   );
 }

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

@@ -16,29 +16,19 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
+export type PositionOptionType = 'relative' | 'absolute';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 
 export interface TextPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -46,7 +36,6 @@ export interface TextPropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -54,12 +43,26 @@ export interface TextPropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     color?: string;
-    fontSize?: number;
-    fontWeight?: FontWeightOptionType;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
     textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
   };
 }
 

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

@@ -1,27 +1,74 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
-    "type": "text",
+    "type": "Text",
     "children": "string",
     "extends": "View",
     "attributes": {
-      "color": "string",
-      "fontSize": "number",
-      "fontWeight": [
-        "normal",
-        "bold",
-        "100",
-        "200",
-        "300",
-        "400",
-        "500",
-        "600",
-        "700",
-        "800",
-        "900"
-      ],
-      "textAlign": ["left", "center", "right", "justify"]
+      "color": "color",
+      "fontSize": "size",
+      "fontFamily": "fontFamily",
+      "fontWeight": "fontWeight",
+      "textAlign": ["left", "center", "right", "justify"],
+      "adjustsFontSizeToFit": "boolean",
+      "showEllipsis": "boolean"
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Text",
+    "description": "Displays simple text.",
+    "styles": {
+      "color": {
+        "label": "Color",
+        "description": "Text color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "fontSize": {
+        "label": "Font Size",
+        "description": "Text size.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2,
+        "preferedScale": "s"
+      },
+      "fontFamily": {
+        "label": "Font Family",
+        "description": "Font family used for the text.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "fontWeight": {
+        "label": "Font Weight",
+        "description": "Text weight.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "textAlign": {
+        "label": "Text Align",
+        "description": "Text alignment.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 5
+      },
+      "adjustsFontSizeToFit": {
+        "label": "Adjust Font Size To Fit",
+        "description": "Automatically reduces font size to fit the available space.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 6
+      },
+      "showEllipsis": {
+        "label": "Show Ellipsis",
+        "description": "If text overflows, show ellipsis (…); applied as single-line truncation.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 7
+      }
     }
   }
 }

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

@@ -1,17 +1,44 @@
-import React from 'react';
-import type {
-  ViewComponentProps,
-  ViewPropsGenerated,
-} from './ViewProps.generated';
+import React, { useId, useMemo } from 'react';
+import type { ViewComponentProps } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
+import { useRenderStore } from '../../store';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 export function View({ node }: ViewComponentProps) {
+  useLogRender('View');
   node = useNode(node);
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'view';
+  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 = isNodeSelected({ previewMode, current, node });
+  const viewStyle = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
   return (
-    <div style={extractViewStyle(node)} className="scroll-container">
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={viewStyle}
+      className="scroll-container"
+    >
       <RenderNode node={node.children as Node} />
     </div>
   );

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

@@ -16,16 +16,18 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface ViewPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -33,7 +35,6 @@ export interface ViewPropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -41,8 +42,19 @@ export interface ViewPropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
   };
 }