@developer_tribe/react-builder 1.0.4 → 1.0.5

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

@@ -46,6 +46,10 @@ export interface OnboardImagePropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    maxHeight?: string;
     flex?: number;
     position?: PositionOptionType;
     top?: string;

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

@@ -1,7 +1,7 @@
 import React, { useId, useMemo } from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
-import { RenderNode } from '../..';
+import RenderNode from '../RenderNode.generated';
 import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
 import { useLogRender } from '../../utils/useLogRender';

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

@@ -43,7 +43,11 @@ export interface OnboardItemPropsGenerated {
     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/OnboardProvider/OnboardProviderProps.generated.ts

@@ -42,7 +42,11 @@ export interface OnboardProviderPropsGenerated {
     backgroundColor?: string;
     borderRadius?: never;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
     flex?: number;
     position?: PositionOptionType;
     top?: string;
@@ -50,7 +54,6 @@ export interface OnboardProviderPropsGenerated {
     left?: string;
     right?: string;
     zIndex?: number;
-    use_safe_area_inset?: boolean;
   };
 }
 

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

@@ -6,55 +6,45 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "use_safe_area_inset": "boolean",
       "borderRadius": "never"
     }
   },
   "defaults": {
-    "paddingTop": 0,
-    "paddingRight": 0,
-    "paddingBottom": 8,
-    "paddingLeft": 0
+    "width": "100%",
+    "height": "100%"
   },
   "meta": {
     "desiredParent": ["root"],
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
     "attributes": {
-      "use_safe_area_inset": {
-        "label": "Use Safe Area Inset",
-        "description": "Adds safe area padding.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 2
-      },
       "paddingTop": {
         "label": "Padding Top",
         "description": "Top padding for the provider.",
         "category": "container",
         "specialCategory": "padding",
-        "sort": 3
+        "sort": 1
       },
       "paddingRight": {
         "label": "Padding Right",
         "description": "Right padding for the provider.",
         "category": "container",
         "specialCategory": "padding",
-        "sort": 4
+        "sort": 2
       },
       "paddingBottom": {
         "label": "Padding Bottom",
         "description": "Bottom padding for the provider.",
         "category": "container",
         "specialCategory": "padding",
-        "sort": 5
+        "sort": 3
       },
       "paddingLeft": {
         "label": "Padding Left",
         "description": "Left padding for the provider.",
         "category": "container",
         "specialCategory": "padding",
-        "sort": 6
+        "sort": 4
       }
     }
   }

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

@@ -59,7 +59,11 @@ export interface OnboardSubtitlePropsGenerated {
     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/OnboardTitle/OnboardTitleProps.generated.ts

@@ -59,7 +59,11 @@ export interface OnboardTitlePropsGenerated {
     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/PaywallBackground/PaywallBackground.tsx

@@ -0,0 +1,47 @@
+import React, { useId, useMemo } from 'react';
+import type { PaywallBackgroundComponentProps } from './PaywallBackgroundProps.generated';
+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';
+
+function PaywallBackground({ node }: PaywallBackgroundComponentProps) {
+  useLogRender('PaywallBackground');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.type ?? 'PaywallBackground';
+  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 style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    />
+  );
+}
+
+export default React.memo(PaywallBackground);

package/src/build-components/PaywallBackground/PaywallBackgroundProps.generated.ts

@@ -0,0 +1,63 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 type PositionOptionType = 'relative' | 'absolute';
+
+export interface PaywallBackgroundPropsGenerated {
+  child: string;
+  attributes: {
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: string;
+    marginVertical?: string;
+    marginTop?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    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;
+    [key: string]: string | number | boolean | undefined;
+  };
+}
+
+export interface PaywallBackgroundComponentProps {
+  node: NodeData<PaywallBackgroundPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,16 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": true,
+  "pattern": {
+    "type": "PaywallBackground",
+    "children": "never",
+    "extends": "View",
+    "attributes": {}
+  },
+  "meta": {
+    "desiredParent": [">PaywallProvider"],
+    "label": "Paywall Background",
+    "description": "Paywall Background component.",
+    "attributes": {}
+  }
+}

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

@@ -0,0 +1,62 @@
+import React, { useId, useMemo } from 'react';
+import type { PaywallCloseButtonComponentProps } from './PaywallCloseButtonProps.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 { Icon } from '../../components/Icon.generated';
+import { IconsType } from '../../types/Icons';
+
+function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
+  useLogRender('PaywallCloseButton');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'PaywallCloseButton';
+  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(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  const iconType = node.attributes?.iconType ?? 'close';
+  const size =
+    node.attributes?.size ?? (style.fontSize as number | undefined) ?? 24;
+  const color =
+    (style.color as string | undefined) ??
+    (node.attributes?.color as string | undefined);
+
+  return (
+    <a
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      href="#"
+      onClick={(e) => e.preventDefault()}
+      aria-label="Close"
+      style={{ ...style, cursor: 'pointer', textDecoration: 'none' }}
+    >
+      <Icon iconType={iconType as IconsType} size={size} color={color} alt="" />
+    </a>
+  );
+}
+
+export default React.memo(PaywallCloseButton);

package/src/build-components/PaywallCloseButton/PaywallCloseButtonProps.generated.ts

@@ -0,0 +1,83 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+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 type PositionOptionType = 'relative' | 'absolute';
+
+export interface PaywallCloseButtonPropsGenerated {
+  child: string;
+  attributes: {
+    iconType?: string;
+    size?: number;
+    strokeWidth?: number;
+    color?: string;
+    fontSize?: string;
+    fontWeight?: FontWeightOptionType;
+    textAlign?: TextAlignOptionType;
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: string;
+    marginVertical?: string;
+    marginTop?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    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;
+    [key: string]: string | number | boolean | undefined;
+  };
+}
+
+export interface PaywallCloseButtonComponentProps {
+  node: NodeData<PaywallCloseButtonPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,23 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": true,
+  "pattern": {
+    "type": "PaywallCloseButton",
+    "children": "never",
+    "extends": "BIcon",
+    "attributes": {},
+    "defaults": {
+      "iconType": "close",
+      "size": 24,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "alignItems": "center"
+    }
+  },
+  "meta": {
+    "desiredParent": [">PaywallProvider"],
+    "label": "Paywall Close Button",
+    "description": "Paywall Close Button component.",
+    "attributes": {}
+  }
+}

package/src/build-components/PaywallOptions/PaywallOptionButton.tsx

@@ -0,0 +1,64 @@
+import { useId, useMemo } from 'react';
+import type { Product } from '../../paywall/types/paywall-types';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import type { NodeData } from '../../types/Node';
+import { useRenderStore } from '../../store';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { RenderNode } from '../..';
+
+export type OptionsButtonProps = {
+  product: Product;
+  selected: boolean;
+  onPress: (productId: string) => void;
+  node: NodeData<any>;
+};
+
+export function PaywallOptionButton({
+  product,
+  selected,
+  onPress,
+  node,
+}: OptionsButtonProps) {
+  const generatedId = useId();
+  const productId = (product.productId ?? '').trim();
+
+  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],
+  );
+  console.log('-->', { node, baseStyle });
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+
+  const mergedStyle = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'text';
+  const baseAttributeKey = (node.key ?? generatedId) as string;
+  const attributeKey = productId
+    ? `${baseAttributeKey}:${productId}`
+    : baseAttributeKey;
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      role="button"
+      tabIndex={0}
+      onClick={() => onPress(productId)}
+      style={{ ...mergedStyle, cursor: 'pointer' }}
+    >
+      <RenderNode node={node.children as Node} />
+    </div>
+  );
+}

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

@@ -0,0 +1,92 @@
+import React, { useId, useMemo, useState } from 'react';
+import type { PaywallOptionsComponentProps } from './PaywallOptionsProps.generated';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { ParamsProvider } from '../../components/ParamsProvider';
+import type { Product } from '../../paywall/types/paywall-types';
+import { PaywallOptionButton } from './PaywallOptionButton';
+import { usePaywallOptionParamsFactory } from './usePaywallOptionParamsFactory';
+
+function parseNumberLike(value: unknown): number | undefined {
+  if (value === null || value === undefined) return undefined;
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value !== 'string') return undefined;
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+  const normalized = trimmed.replace(',', '.');
+  const parsed = Number.parseFloat(normalized);
+  if (!Number.isFinite(parsed)) return undefined;
+  return parsed;
+}
+
+function compareProducts(
+  a: Product,
+  b: Product,
+  aIndex: number,
+  bIndex: number,
+): number {
+  const aPrice = parseNumberLike(a.price);
+  const bPrice = parseNumberLike(b.price);
+  if (aPrice !== undefined && bPrice !== undefined && aPrice !== bPrice) {
+    return aPrice - bPrice;
+  }
+
+  const aTitle = (a.title ?? '').trim();
+  const bTitle = (b.title ?? '').trim();
+  if (aTitle && bTitle && aTitle !== bTitle)
+    return aTitle.localeCompare(bTitle);
+  if (aTitle && !bTitle) return -1;
+  if (!aTitle && bTitle) return 1;
+
+  const aId = (a.productId ?? '').trim();
+  const bId = (b.productId ?? '').trim();
+  if (aId !== bId) return aId.localeCompare(bId);
+
+  // Stable fallback
+  return aIndex - bIndex;
+}
+
+function PaywallOptions({ node }: PaywallOptionsComponentProps) {
+  useLogRender('PaywallOptions');
+  node = useNode(node);
+  const { products } = useBuilderParams();
+  const [selectedProductId, setSelectedProductId] = useState<string>('');
+  const getParamsForProduct = usePaywallOptionParamsFactory();
+
+  const sortedProducts = useMemo(() => {
+    const list = Array.isArray(products) ? products : [];
+    return list
+      .map((p, idx) => ({ p, idx }))
+      .sort((a, b) => compareProducts(a.p, b.p, a.idx, b.idx))
+      .map(({ p }) => p);
+  }, [products]);
+
+  return (
+    <>
+      {sortedProducts.map((p, index) => {
+        const productId = p.productId || `${index}`;
+        const isSelected = selectedProductId === productId;
+        const { localizationParams, otherParams } = getParamsForProduct(p, {
+          isSelected,
+        });
+        return (
+          <ParamsProvider
+            key={productId}
+            localizationParams={localizationParams}
+            otherParams={otherParams}
+          >
+            <PaywallOptionButton
+              node={node}
+              product={p}
+              selected={isSelected}
+              onPress={setSelectedProductId}
+            />
+          </ParamsProvider>
+        );
+      })}
+    </>
+  );
+}
+
+export default React.memo(PaywallOptions);

package/src/build-components/PaywallOptions/PaywallOptionsProps.generated.ts

@@ -0,0 +1,63 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 type PositionOptionType = 'relative' | 'absolute';
+
+export interface PaywallOptionsPropsGenerated {
+  child: string;
+  attributes: {
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: string;
+    marginVertical?: string;
+    marginTop?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    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;
+    [key: string]: string | number | boolean | undefined;
+  };
+}
+
+export interface PaywallOptionsComponentProps {
+  node: NodeData<PaywallOptionsPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,22 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": true,
+  "pattern": {
+    "type": "PaywallOptions",
+    "extends": "View",
+    "children": ["node", "array"],
+    "attributes": {},
+    "defaults": {
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "alignItems": "center",
+      "minHeight": "60px"
+    }
+  },
+  "meta": {
+    "desiredParent": [">PaywallProvider"],
+    "label": "Paywall Options",
+    "description": "Paywall options selector component.",
+    "attributes": {}
+  }
+}