@developer_tribe/react-builder 1.0.8 → 1.0.9

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

@@ -1,4 +1,4 @@
-import React, { useId, useMemo } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
 import type { PaywallProviderComponentProps } from './PaywallProviderProps.generated';
 import RenderNode from '../RenderNode.generated';
 import type { Node } from '../../types/Node';
@@ -10,6 +10,8 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { LocalizationParamsProvider } from '../../components/LocalizationParamsProvider';
 import { useBuilderParams } from '../../components/BuilderProvider';
+import { PaywallContext } from './PaywallContext';
+import { useMockOSContext } from '../../mockOS/context/MockOSContextBase';
 
 function PaywallProvider({ node }: PaywallProviderComponentProps) {
   useLogRender('PaywallProvider');
@@ -29,7 +31,9 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     }),
   );
 
-  const { benefits } = useBuilderParams();
+  const { benefits, products, onPaywallClose, onPaywallSubscribe } =
+    useBuilderParams();
+  const mockOS = useMockOSContext();
   const benefitLocalizationParams = useMemo(() => {
     const raw =
       benefits && typeof benefits === 'object' && !Array.isArray(benefits)
@@ -62,15 +66,108 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
+  const [selectedProductId, setSelectedProductId] = useState<string>('');
+  useEffect(() => {
+    const list = Array.isArray(products) ? products : [];
+    if (list.length === 0) {
+      if (selectedProductId) setSelectedProductId('');
+      return;
+    }
+
+    const exists = list.some((p) => p?.productId === selectedProductId);
+    if (!selectedProductId || !exists) {
+      setSelectedProductId(list[0]?.productId ?? '');
+    }
+  }, [products, selectedProductId]);
+
+  const selectedProduct = useMemo(() => {
+    const list = Array.isArray(products) ? products : [];
+    return (
+      list.find((p) => p?.productId === selectedProductId) ??
+      (list.length > 0 ? list[0] : undefined)
+    );
+  }, [products, selectedProductId]);
+
+  const handleClose = useCallback(() => {
+    // Host app override wins.
+    if (onPaywallClose) {
+      onPaywallClose();
+    }
+
+    // Default: in MockOS go back (simulate dismissing paywall screen).
+    // TODO: at react native merge it will change
+    if (mockOS?.isEnabled && mockOS.goBack) {
+      mockOS.goBack();
+    }
+  }, [mockOS, onPaywallClose]);
+
+  const handleSubscribe = useCallback(
+    async (product?: { productId?: string }) => {
+      // Host app override wins.
+      if (onPaywallSubscribe) {
+        const result = onPaywallSubscribe(product as any);
+        const ok =
+          result instanceof Promise
+            ? await result
+            : result === true
+              ? true
+              : false;
+
+        // If host signals success, go back (OS return).
+        if (ok && mockOS?.isEnabled) {
+          mockOS.goBack?.();
+        }
+        return;
+      }
+
+      // Default: in MockOS show a native-like subscription prompt.
+      // TODO: at react native merge it will change
+      const productId = product?.productId;
+      if (
+        mockOS?.isEnabled &&
+        productId &&
+        mockOS.requestSubscriptionPurchase
+      ) {
+        const ok = await mockOS.requestSubscriptionPurchase(productId);
+        if (ok) {
+          // On success, go back (simulate dismissing paywall after purchase).
+          // TODO: at react native merge it will change
+          mockOS.goBack?.();
+        }
+      }
+    },
+    [mockOS, onPaywallSubscribe],
+  );
+
+  const paywallContextValue = useMemo(
+    () => ({
+      products: Array.isArray(products) ? products : [],
+      selectedProductId,
+      setSelectedProductId,
+      selectedProduct,
+      onClose: handleClose,
+      onSubscribe: handleSubscribe as any,
+    }),
+    [
+      products,
+      selectedProductId,
+      selectedProduct,
+      handleClose,
+      handleSubscribe,
+    ],
+  );
+
   return (
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
       style={style}
     >
-      <LocalizationParamsProvider params={benefitLocalizationParams}>
-        <RenderNode node={node.children as Node} />
-      </LocalizationParamsProvider>
+      <PaywallContext.Provider value={paywallContextValue}>
+        <LocalizationParamsProvider params={benefitLocalizationParams}>
+          <RenderNode node={node.children as Node} />
+        </LocalizationParamsProvider>
+      </PaywallContext.Provider>
     </div>
   );
 }

package/src/build-components/PaywallProvider/PaywallProviderProps.generated.ts

@@ -21,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface PaywallProviderPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -54,7 +55,6 @@ export interface PaywallProviderPropsGenerated {
     left?: string;
     right?: string;
     zIndex?: number;
-    [key: string]: string | number | boolean | undefined;
   };
 }
 

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

@@ -1,24 +1,27 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": true,
+  "schemaVersion": 2,
   "pattern": {
     "type": "PaywallProvider",
-    "children": ["node", "array"],
+    "children": "node",
     "extends": "View",
     "attributes": {}
   },
   "defaults": {
-    "width": "100%",
-    "height": "100%"
+    "style": {
+      "width": "100%",
+      "height": "100%"
+    }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Paywall Provider",
     "description": "Provider/wrapper for paywall screen components.",
-    "attributes": {},
     "mockableFeatures": {
       "products": true,
       "benefits": true
-    }
+    },
+    "styles": {}
   }
 }

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

@@ -7,12 +7,14 @@ import { extractTextStyle } from '../../utils/extractTextStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
+import { usePaywallContext } from '../PaywallProvider/PaywallContext';
 
 function PaywallSubscribeButton({
   node,
 }: PaywallSubscribeButtonComponentProps) {
   useLogRender('PaywallSubscribeButton');
   node = useNode(node);
+  const { onSubscribe, selectedProduct } = usePaywallContext();
 
   const generatedId = useId();
   const attributeName =
@@ -50,6 +52,11 @@ function PaywallSubscribeButton({
       type="button"
       attribute-name={attributeName}
       attribute-key={attributeKey}
+      href="#"
+      onClick={(e) => {
+        e.preventDefault();
+        onSubscribe?.(selectedProduct);
+      }}
       style={{ ...style, cursor: 'pointer' }}
     >
       {localize(label)}

package/src/build-components/PaywallSubscribeButton/PaywallSubscribeButtonProps.generated.ts

@@ -33,6 +33,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface PaywallSubscribeButtonPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     color?: string;
     fontSize?: string;
     fontWeight?: FontWeightOptionType;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "PaywallSubscribeButton",
     "children": "string",
@@ -8,20 +7,24 @@
     "attributes": {}
   },
   "defaults": {
-    "paddingHorizontal": "20@s",
-    "paddingVertical": "12@vs",
-    "borderRadius": "12@s",
-    "backgroundColor": "#6495ED",
-    "color": "#FFFFFF",
-    "fontSize": "16@fs",
-    "fontWeight": "700",
-    "justifyContent": "center",
-    "alignItems": "center"
+    "style": {
+      "paddingHorizontal": "20@s",
+      "paddingVertical": "12@vs",
+      "borderRadius": "12@s",
+      "backgroundColor": "#6495ED",
+      "color": "#FFFFFF",
+      "fontSize": "16@fs",
+      "fontWeight": "700",
+      "justifyContent": "center",
+      "alignItems": "center"
+    }
   },
   "meta": {
-    "desiredParent": [">PaywallProvider"],
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
     "label": "Paywall Subscribe Button",
     "description": "Paywall subscribe call-to-action button. Extends Button.",
-    "attributes": {}
+    "styles": {}
   }
 }

package/src/build-components/RadioButton/RadioButtonProps.generated.ts

@@ -21,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface RadioButtonPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -57,7 +58,6 @@ export interface RadioButtonPropsGenerated {
     selected?: boolean;
     color?: string;
     size?: number;
-    [key: string]: string | number | boolean | undefined;
   };
 }
 

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": true,
+  "schemaVersion": 2,
   "pattern": {
     "type": "RadioButton",
     "children": "never",
@@ -12,10 +11,12 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Radio Button",
     "description": "Generic radio button icon.",
-    "attributes": {
+    "styles": {
       "selected": {
         "label": "Selected",
         "description": "Whether the radio is selected.",

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

@@ -1,4 +1,10 @@
-import React, { useId, useMemo } 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';
@@ -14,6 +20,8 @@ function Text({ node }: TextComponentProps) {
   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,
@@ -28,18 +36,113 @@ function Text({ node }: TextComponentProps) {
     [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(
-    textStyle,
+    useMergedStyle(textStyle, extraStyle),
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const localize = useLocalize();
+
   return (
     <p
+      ref={textRef}
       attribute-name={attributeName}
       attribute-key={attributeKey}
       style={style}
     >
-      {localize(keyOrText)}
+      {localizedText}
     </p>
   );
 }

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

@@ -34,6 +34,7 @@ export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export interface TextPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -71,6 +72,8 @@ export interface TextPropsGenerated {
     fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
   };
 }
 

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "Text",
     "children": "string",
@@ -21,14 +20,16 @@
         "800",
         "900"
       ],
-      "textAlign": ["left", "center", "right", "justify"]
+      "textAlign": ["left", "center", "right", "justify"],
+      "adjustsFontSizeToFit": "boolean",
+      "showEllipsis": "boolean"
     }
   },
   "meta": {
     "desiredParent": ["all"],
     "label": "Text",
     "description": "Displays simple text.",
-    "attributes": {
+    "styles": {
       "color": {
         "label": "Color",
         "description": "Text color.",
@@ -57,6 +58,20 @@
         "category": "style",
         "specialCategory": null,
         "sort": 4
+      },
+      "adjustsFontSizeToFit": {
+        "label": "Adjust Font Size To Fit",
+        "description": "Automatically reduces font size to fit the available space.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 5
+      },
+      "showEllipsis": {
+        "label": "Show Ellipsis",
+        "description": "If text overflows, show ellipsis (…); applied as single-line truncation.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 6
       }
     }
   }

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

@@ -21,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface ViewPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,13 +1,21 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "View",
-    "children": ["node", "array"],
+    "children": "node",
     "attributes": {
       "scrollable": "boolean",
-      "flexDirection": ["row", "column"],
-      "alignItems": ["flex-start", "center", "flex-end", "stretch", "baseline"],
+      "flexDirection": [
+        "row",
+        "column"
+      ],
+      "alignItems": [
+        "flex-start",
+        "center",
+        "flex-end",
+        "stretch",
+        "baseline"
+      ],
       "justifyContent": [
         "flex-start",
         "center",
@@ -39,21 +47,21 @@
       "minHeight": "size",
       "maxHeight": "size",
       "flex": "number",
-      "position": ["relative", "absolute"],
+      "position": [
+        "relative",
+        "absolute"
+      ],
       "top": "size",
       "bottom": "size",
       "left": "size",
       "right": "size",
       "zIndex": "number"
-    },
-    "defaults": {
-      "flexDirection": "column",
-      "position": "relative",
-      "zIndex": 1
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "View",
     "description": "Base layout container.",
     "specialCategories": {
@@ -82,7 +90,7 @@
         "sort": 4
       }
     },
-    "attributes": {
+    "styles": {
       "scrollable": {
         "label": "Scrollable",
         "description": "Turns scroll interaction on.",
@@ -348,5 +356,12 @@
         "sort": 26
       }
     }
+  },
+  "defaults": {
+    "style": {
+      "flexDirection": "column",
+      "position": "relative",
+      "zIndex": 1
+    }
   }
 }

package/src/build-components/other.tsx

@@ -2,5 +2,20 @@ import React from 'react';
 import type { Node } from '../types/Node';
 
 export function other(type: string, node: Node): React.ReactNode {
+  // Intentionally-crashing component for testing error boundaries / unvalidated flows.
+  // NOTE: This is NOT part of the generated component patterns, so it will never
+  // show up in the "Add component" modal. It can only be used by loading JSON
+  // that contains { type: "CrashComponent" }.
+  if (type === 'CrashComponent') {
+    const details =
+      node && typeof node === 'object' && !Array.isArray(node)
+        ? (node as any).attributes
+        : undefined;
+    throw new Error(
+      `CrashComponent: intentional crash for testing${
+        details ? ` (attributes=${JSON.stringify(details)})` : ''
+      }`,
+    );
+  }
   return null;
 }