@developer_tribe/react-builder 1.0.8 → 1.0.9

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardButton",
     "children": "never",
@@ -39,10 +38,12 @@
     }
   },
   "meta": {
-    "desiredParent": ["=OnboardButtons"],
+    "desiredParent": [
+      "=OnboardButtons"
+    ],
     "label": "Onboard Button",
     "description": "Single action button for onboarding.",
-    "attributes": {
+    "styles": {
       "labelKey": {
         "label": "Label Key",
         "description": "Localization key for the button text.",

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

@@ -27,6 +27,7 @@ export type ConditionOptionType = 'carousel-index';
 export interface OnboardButtonsPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardButtons",
     "children": "node",
@@ -25,10 +24,12 @@
     }
   },
   "meta": {
-    "desiredParent": ["=OnboardItem"],
+    "desiredParent": [
+      "=OnboardItem"
+    ],
     "label": "Onboard Buttons",
     "description": "Wrapper for onboarding button set.",
-    "attributes": {
+    "styles": {
       "buttonType": {
         "label": "Button Type",
         "description": "Which onboard button to show.",

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

@@ -14,6 +14,7 @@ export type DotTypeOptionType =
 export interface OnboardDotPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: never;
     alignItems?: never;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardDot",
     "children": "never",
@@ -23,10 +22,12 @@
     }
   },
   "meta": {
-    "desiredParent": [">OnboardProvider"],
+    "desiredParent": [
+      ">OnboardProvider"
+    ],
     "label": "Onboard Dot",
     "description": "Renders onboarding progress dots.",
-    "attributes": {
+    "styles": {
       "dotType": {
         "label": "Dot Type",
         "description": "Dot animation style.",

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

@@ -34,10 +34,13 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface OnboardFooterPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     color?: string;
     fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardFooter",
     "children": "node",
@@ -16,13 +15,17 @@
     }
   },
   "defaults": {
-    "paddingHorizontal": "24@s"
+    "style": {
+      "paddingHorizontal": "24@s"
+    }
   },
   "meta": {
-    "desiredParent": [">OnboardItem"],
+    "desiredParent": [
+      ">OnboardItem"
+    ],
     "label": "Onboard Footer",
     "description": "Footer text with optional links.",
-    "attributes": {
+    "styles": {
       "textLocalizationKey": {
         "label": "Text Localization Key",
         "description": "Localization key for the footer text.",

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

@@ -22,6 +22,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface OnboardImagePropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     src?: string;
     width?: string;
     height?: string;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardImage",
     "children": "node",
@@ -11,10 +10,14 @@
     }
   },
   "meta": {
-    "desiredParent": [">OnboardProvider", ">OnboardItem", "!=Onboard"],
+    "desiredParent": [
+      ">OnboardProvider",
+      ">OnboardItem",
+      "!=Onboard"
+    ],
     "label": "Onboard Image",
     "description": "Onboarding hero image with media.",
-    "attributes": {
+    "styles": {
       "video_url": {
         "label": "Video Url",
         "description": "URL for the onboarding video.",

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

@@ -22,6 +22,7 @@ export type DisplayOptionType = 'flex' | 'block';
 export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,28 +1,37 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardItem",
     "children": "node",
     "extends": "View",
     "attributes": {
-      "display": ["flex", "block"],
+      "display": [
+        "flex",
+        "block"
+      ],
       "gap": "size",
-      "flexDirection": ["row", "column"],
+      "flexDirection": [
+        "row",
+        "column"
+      ],
       "paddingHorizontal": "size"
     }
   },
   "defaults": {
-    "gap": "16@vs",
     "display": "flex",
-    "flexDirection": "column",
-    "paddingHorizontal": "24@s"
+    "style": {
+      "gap": "16@vs",
+      "flexDirection": "column",
+      "paddingHorizontal": "24@s"
+    }
   },
   "meta": {
-    "desiredParent": ["=Onboard"],
+    "desiredParent": [
+      "=Onboard"
+    ],
     "label": "Onboard Item",
     "description": "Single onboarding screen section.",
-    "attributes": {
+    "styles": {
       "display": {
         "label": "Display",
         "description": "Controls layout display mode.",

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -17,10 +17,12 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
+export type ThemeOptionType = 'light' | 'dark' | 'all';
 
 export interface OnboardProviderPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -54,6 +56,7 @@ export interface OnboardProviderPropsGenerated {
     left?: string;
     right?: string;
     zIndex?: number;
+    theme?: ThemeOptionType;
   };
 }
 

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

@@ -1,23 +1,38 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardProvider",
     "children": "node",
     "extends": "View",
     "attributes": {
+      "theme": [
+        "light",
+        "dark",
+        "all"
+      ],
       "borderRadius": "never"
     }
   },
   "defaults": {
-    "width": "100%",
-    "height": "100%"
+    "style": {
+      "width": "100%",
+      "height": "100%"
+    }
   },
   "meta": {
-    "desiredParent": ["root"],
+    "desiredParent": [
+      "root"
+    ],
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
-    "attributes": {
+    "styles": {
+      "theme": {
+        "label": "Theme",
+        "description": "Controls which app theme(s) this onboarding is intended for.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": -10
+      },
       "paddingTop": {
         "label": "Padding Top",
         "description": "Top padding for the provider.",

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

@@ -34,10 +34,13 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface OnboardSubtitlePropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     color?: string;
     fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardSubtitle",
     "children": "string",
@@ -8,13 +7,18 @@
     "attributes": {}
   },
   "defaults": {
-    "fontSize": "14@fs",
-    "fontWeight": "600"
+    "style": {
+      "fontSize": "14@fs",
+      "fontWeight": "600"
+    }
   },
   "meta": {
-    "desiredParent": [">OnboardProvider", ">OnboardItem"],
+    "desiredParent": [
+      ">OnboardProvider",
+      ">OnboardItem"
+    ],
     "label": "Onboard Subtitle",
     "description": "Subtitle text for an onboarding step.",
-    "attributes": {}
+    "styles": {}
   }
 }

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -34,10 +34,13 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface OnboardTitlePropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     color?: string;
     fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardTitle",
     "children": "string",
@@ -8,14 +7,19 @@
     "attributes": {}
   },
   "defaults": {
-    "fontSize": "24@fs",
-    "fontWeight": "700",
-    "textAlign": "center"
+    "style": {
+      "fontSize": "24@fs",
+      "fontWeight": "700",
+      "textAlign": "center"
+    }
   },
   "meta": {
-    "desiredParent": [">OnboardItem", ">OnboardProvider"],
+    "desiredParent": [
+      ">OnboardItem",
+      ">OnboardProvider"
+    ],
     "label": "Onboard Title",
     "description": "Title text for an onboarding step.",
-    "attributes": {}
+    "styles": {}
   }
 }

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

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

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": true,
+  "schemaVersion": 2,
   "pattern": {
     "type": "PaywallBackground",
     "children": "never",
@@ -8,9 +7,11 @@
     "attributes": {}
   },
   "meta": {
-    "desiredParent": [">PaywallProvider"],
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
     "label": "Paywall Background",
     "description": "Paywall Background component.",
-    "attributes": {}
+    "styles": {}
   }
 }

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

@@ -8,10 +8,12 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { Icon } from '../../components/Icon.generated';
 import { IconsType } from '../../types/Icons';
+import { usePaywallContext } from '../PaywallProvider/PaywallContext';
 
 function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
   useLogRender('PaywallCloseButton');
   node = useNode(node);
+  const { onClose } = usePaywallContext();
 
   const generatedId = useId();
   const attributeName =
@@ -50,7 +52,10 @@ function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
       attribute-name={attributeName}
       attribute-key={attributeKey}
       href="#"
-      onClick={(e) => e.preventDefault()}
+      onClick={(e) => {
+        e.preventDefault();
+        onClose?.();
+      }}
       aria-label="Close"
       style={{ ...style, cursor: 'pointer', textDecoration: 'none' }}
     >

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

@@ -34,6 +34,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface PaywallCloseButtonPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     iconType?: string;
     size?: number;
     strokeWidth?: number;
@@ -41,6 +42,8 @@ export interface PaywallCloseButtonPropsGenerated {
     fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -74,7 +77,6 @@ export interface PaywallCloseButtonPropsGenerated {
     left?: string;
     right?: string;
     zIndex?: number;
-    [key: string]: string | number | boolean | undefined;
   };
 }
 

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

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

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

@@ -36,7 +36,6 @@ export function PaywallOptionButton({
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
-  console.log('-->', { node, baseStyle });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
 

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

@@ -1,4 +1,4 @@
-import React, { useId, useMemo, useState } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { PaywallOptionsComponentProps } from './PaywallOptionsProps.generated';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
@@ -7,6 +7,7 @@ import { ParamsProvider } from '../../components/ParamsProvider';
 import type { Product } from '../../paywall/types/paywall-types';
 import { PaywallOptionButton } from './PaywallOptionButton';
 import { usePaywallOptionParamsFactory } from './usePaywallOptionParamsFactory';
+import { usePaywallContext } from '../PaywallProvider/PaywallContext';
 
 function parseNumberLike(value: unknown): number | undefined {
   if (value === null || value === undefined) return undefined;
@@ -51,7 +52,7 @@ function PaywallOptions({ node }: PaywallOptionsComponentProps) {
   useLogRender('PaywallOptions');
   node = useNode(node);
   const { products } = useBuilderParams();
-  const [selectedProductId, setSelectedProductId] = useState<string>('');
+  const { selectedProductId, setSelectedProductId } = usePaywallContext();
   const getParamsForProduct = usePaywallOptionParamsFactory();
 
   const sortedProducts = useMemo(() => {

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

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

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

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

package/src/build-components/PaywallProvider/PaywallContext.ts

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from 'react';
+import type { Product } from '../../paywall/types/paywall-types';
+
+export type PaywallContextValue = {
+  products: Product[];
+  selectedProductId: string;
+  setSelectedProductId: (productId: string) => void;
+  selectedProduct?: Product;
+  onClose?: () => void;
+  onSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
+};
+
+export const PaywallContext = createContext<PaywallContextValue | undefined>(
+  undefined,
+);
+
+export function usePaywallContext(): PaywallContextValue {
+  return (
+    useContext(PaywallContext) ?? {
+      products: [],
+      selectedProductId: '',
+      setSelectedProductId: () => {},
+    }
+  );
+}