@developer_tribe/react-builder 1.2.20 → 1.2.21

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

@@ -2,13 +2,13 @@ import React, { useId, useMemo } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { parseSize } from '../../size-matters';
 import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
-import { isNodeSelected } from '../../utils/selection';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { defaultAppConfig } from '../../types/PreviewConfig';
+import { parseColor } from '../../utils/parseColor';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -98,48 +98,57 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     appConfig: builderAppConfig,
     previewMode,
     selectedKey,
+    projectColors: builderProjectColors,
   } = useBuilderParams();
   const appConfig = builderAppConfig ?? defaultAppConfig;
-  const { localication, defaultLanguage } = appConfig;
+  const projectColors = builderProjectColors;
+  const { localication, defaultLanguage, theme } = appConfig;
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const attrs = node?.attributes;
-  const styleBag = attrs?.style;
   const text = t(attrs?.textLocalizationKey);
-  const textStyle = useExtractTextStyle(node);
+  const textStyle = useExtractTextStyle(node, true);
   const viewStyle = useExtractViewStyle(node);
 
-  const linkStyle = (color?: string): React.CSSProperties => ({
-    color,
-    cursor: color ? 'pointer' : undefined,
-  });
-
-  const paddingHorizontal = parseSize(styleBag?.paddingHorizontal);
-  const layoutStyle = useMemo<React.CSSProperties>(
-    () => ({
-      paddingLeft: paddingHorizontal,
-      paddingRight: paddingHorizontal,
-      textAlign: 'center',
-    }),
-    [paddingHorizontal],
+  // Parse colors for linked words
+  const parsedFirstColor = useMemo(
+    () =>
+      parseColor(attrs?.linkedWordFirstColor, {
+        projectColors,
+        theme,
+      }),
+    [attrs?.linkedWordFirstColor, projectColors, theme],
+  );
+  const parsedSecondColor = useMemo(
+    () =>
+      parseColor(attrs?.linkedWordSecondColor, {
+        projectColors,
+        theme,
+      }),
+    [attrs?.linkedWordSecondColor, projectColors, theme],
   );
 
+  const mergedTextStyle = useMergedStyle(textStyle, {
+    cursor: 'pointer',
+  });
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,
     node,
   });
-  const baseStyle = useMergedStyle(viewStyle, textStyle);
-  const paddedStyle = useMergedStyle(baseStyle, layoutStyle);
+  const mergedViewStyle = useMergedStyle(
+    viewStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
+
   return (
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      className={isSelected ? 'rb-node-selected' : undefined}
-      style={paddedStyle}
+      style={mergedViewStyle}
     >
       {!!text &&
         (() => {
@@ -148,57 +157,60 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
           const { segments, matchCount } = buildSegments(text, [
             {
               value: firstText,
-              color: attrs?.linkedWordFirstColor,
-              page: (attrs as any)?.linkedWordFirstPage,
+              color: parsedFirstColor,
+              page: attrs?.linkedWordFirstPage,
             },
             {
               value: secondText,
-              color: attrs?.linkedWordSecondColor,
-              page: (attrs as any)?.linkedWordSecondPage,
+              color: parsedSecondColor,
+              page: attrs?.linkedWordSecondPage,
             },
           ]);
 
-          const textColor = styleBag?.color;
-
           const handleClick = (page?: string) => {
             if (!page) return;
           };
 
           return (
             <>
-              <p style={{ color: textColor, alignItems: 'center' }}>
-                {segments.map((seg, i) =>
-                  seg.type === 'text' ? (
-                    <span key={i}>{seg.value}</span>
-                  ) : (
-                    <span
-                      key={i}
-                      style={linkStyle(seg.color)}
-                      onClick={() => handleClick(seg.page)}
-                    >
-                      {seg.value}
-                    </span>
-                  ),
-                )}
-              </p>
+              {segments.map((seg, i) =>
+                seg.type === 'text' ? (
+                  <span key={i} style={mergedTextStyle}>
+                    {seg.value}
+                  </span>
+                ) : (
+                  <span
+                    key={i}
+                    style={{
+                      ...mergedTextStyle,
+                      color: seg.color,
+                    }}
+                    onClick={() => handleClick(seg.page)}
+                  >
+                    {seg.value}
+                  </span>
+                ),
+              )}
               {matchCount === 0 && (
                 <div>
                   {attrs?.linkedWordFirstLocalizationKey && (
                     <span
-                      style={linkStyle(attrs?.linkedWordFirstColor)}
-                      onClick={() =>
-                        handleClick((attrs as any)?.linkedWordFirstPage)
-                      }
+                      style={{
+                        ...mergedTextStyle,
+                        color: parsedFirstColor,
+                      }}
+                      onClick={() => handleClick(attrs?.linkedWordFirstPage)}
                     >
                       {firstText}
                     </span>
                   )}
                   {attrs?.linkedWordSecondLocalizationKey && (
                     <span
-                      style={linkStyle(attrs?.linkedWordSecondColor)}
-                      onClick={() =>
-                        handleClick((attrs as any)?.linkedWordSecondPage)
-                      }
+                      style={{
+                        ...mergedTextStyle,
+                        color: parsedSecondColor,
+                      }}
+                      onClick={() => handleClick(attrs?.linkedWordSecondPage)}
                     >
                       {secondText}
                     </span>

package/src/build-components/OnboardFooter/OnboardFooterProps.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 OnboardFooterStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -18,13 +18,16 @@
   },
   "defaults": {
     "style": {
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "textAlign": "center",
       "paddingHorizontal": "24@s"
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardItem"
-    ],
+    "desiredParent": [">OnboardItem"],
     "label": "Onboard Footer",
     "description": "Footer text with optional links.",
     "styles": {

package/src/build-components/OnboardImage/OnboardImageProps.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 OnboardImageStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -12,11 +12,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider",
-      ">OnboardItem",
-      "!=Onboard"
-    ],
+    "desiredParent": [">OnboardProvider", ">OnboardItem", "!=Onboard"],
     "label": "Onboard Image",
     "description": "Onboarding hero image with media.",
     "styles": {},

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type DisplayOptionType = 'flex' | 'block';
 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 OnboardItemStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -7,15 +7,9 @@
     "attributes": {
       "title": "title",
       "description": "description",
-      "display": [
-        "flex",
-        "block"
-      ],
+      "display": ["flex", "block"],
       "gap": "size",
-      "flexDirection": [
-        "row",
-        "column"
-      ],
+      "flexDirection": ["row", "column"],
       "paddingHorizontal": "size"
     }
   },
@@ -28,9 +22,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "=Onboard"
-    ],
+    "desiredParent": ["=Onboard"],
     "label": "Onboard Item",
     "description": "Single onboarding screen section.",
     "styles": {},

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type ThemeOptionType = 'light' | 'dark' | 'all';
 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 OnboardProviderStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -7,11 +7,7 @@
     "attributes": {
       "title": "title",
       "description": "description",
-      "theme": [
-        "light",
-        "dark",
-        "all"
-      ],
+      "theme": ["light", "dark", "all"],
       "borderRadius": "never"
     }
   },
@@ -22,9 +18,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "root"
-    ],
+    "desiredParent": ["root"],
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
     "styles": {},

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.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 OnboardSubtitleStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -16,10 +16,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider",
-      ">OnboardItem"
-    ],
+    "desiredParent": [">OnboardProvider", ">OnboardItem"],
     "label": "Onboard Subtitle",
     "description": "Subtitle text for an onboarding step.",
     "styles": {}

package/src/build-components/OnboardTitle/OnboardTitleProps.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 OnboardTitleStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -17,10 +17,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardItem",
-      ">OnboardProvider"
-    ],
+    "desiredParent": [">OnboardItem", ">OnboardProvider"],
     "label": "Onboard Title",
     "description": "Title text for an onboarding step.",
     "styles": {}

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;