@developer_tribe/react-builder 1.2.19 → 1.2.21

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -21,6 +22,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface PaywallBackgroundStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface PaywallCloseButtonStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -10,9 +10,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">PaywallProvider"
-    ],
+    "desiredParent": [">PaywallProvider"],
     "label": "Paywall Close Button",
     "description": "Paywall Close Button component.",
     "styles": {}

package/src/build-components/PaywallCounter/PaywallCounterProps.generated.ts

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface PaywallCounterStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -21,4 +21,3 @@
     }
   }
 }
-

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

@@ -1,4 +1,4 @@
-import React, { useId, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import type { PaywallOptionsComponentProps } from './PaywallOptionsProps.generated';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';

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

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface PaywallOptionsStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -10,9 +10,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">PaywallProvider"
-    ],
+    "desiredParent": [">PaywallProvider"],
     "label": "Paywall Options",
     "description": "Paywall options selector component.",
     "styles": {}

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

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface PaywallProviderStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -17,9 +17,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "all"
-    ],
+    "desiredParent": ["all"],
     "label": "Paywall Provider",
     "description": "Provider/wrapper for paywall screen components.",
     "attributes": {

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

@@ -15,6 +15,7 @@ export type FontWeightOptionType =
   | '800'
   | '900';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -35,6 +36,7 @@ export interface PaywallSubscribeButtonStyleGenerated {
   fontSize?: string;
   fontWeight?: FontWeightOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -23,9 +23,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">PaywallProvider"
-    ],
+    "desiredParent": [">PaywallProvider"],
     "label": "Paywall Subscribe Button",
     "description": "Paywall subscribe call-to-action button. Extends Button.",
     "styles": {}

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

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface RadioButtonStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -13,9 +13,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "all"
-    ],
+    "desiredParent": ["all"],
     "label": "Radio Button",
     "description": "Generic radio button icon.",
     "styles": {

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

@@ -74,7 +74,7 @@ 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';
+import View from './View/View';
 
 type BuilderNode =
   | (BIconComponentProps['node'] & { type: 'BIcon' })

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

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -21,6 +22,7 @@ export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 
 export interface TextStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -1,7 +1,7 @@
 import React, { useId } from 'react';
 import type { ViewComponentProps } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
-import { Node } from '../../types/Node';
+import type { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
@@ -9,31 +9,35 @@ import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 
-export function View({ node }: ViewComponentProps) {
+function View({ node }: ViewComponentProps) {
   useLogRender('View');
   node = useNode(node);
+
   const generatedId = useId();
-  const attributeName = node.sourceType ?? node.type ?? 'view';
+  const attributeName = node.sourceType ?? node.type ?? 'View';
   const attributeKey = node.key ?? generatedId;
+
   const { previewMode, selectedKey } = useBuilderParams();
+
   const baseStyle = useExtractViewStyle(node);
+
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,
     node,
   });
-  const viewStyle = useMergedStyle(
+  const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
+
   return (
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      style={{ ...viewStyle, boxSizing: 'border-box' }}
-      className="scroll-container"
+      style={style}
     >
-      <RenderNode node={node.children as Node} />
+      {node.children && <RenderNode node={node.children as Node} />}
     </div>
   );
 }

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

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface ViewStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -7,6 +7,7 @@
       "scrollable": "boolean",
       "style": {
         "flexDirection": ["row", "column"],
+        "flexWrap": ["nowrap", "wrap", "wrap-reverse"],
         "alignItems": [
           "flex-start",
           "center",
@@ -117,6 +118,13 @@
         "specialCategory": null,
         "sort": 4
       },
+      "flexWrap": {
+        "label": "Flex Wrap",
+        "description": "Controls whether flex items wrap to multiple lines.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 4.5
+      },
       "alignItems": {
         "label": "Align Items",
         "description": "Controls cross-axis alignment.",