@developer_tribe/react-builder 1.2.25 → 1.2.26

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

@@ -8,12 +8,7 @@
     "extends": "View",
     "attributes": {
       "src": "string",
-      "resizeMode": [
-        "cover",
-        "contain",
-        "stretch",
-        "center"
-      ]
+      "resizeMode": ["cover", "contain", "stretch", "center"]
     },
     "defaults": {
       "resizeMode": "cover",
@@ -29,10 +24,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "all",
-      "background"
-    ],
+    "desiredParent": ["all", "background"],
     "label": "Background Image",
     "description": "Background image.",
     "styles": {

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

@@ -27,9 +27,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "all"
-    ],
+    "desiredParent": ["all"],
     "label": "Button",
     "description": "Simple action button.",
     "styles": {

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

@@ -1,4 +1,4 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { CarouselComponentProps } from './CarouselProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { isCarouselItem } from '../../utils/isCarousel';

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

@@ -9,17 +9,11 @@
     "attributes": {
       "loop": "boolean",
       "dragFree": "boolean",
-      "align": [
-        "start",
-        "center",
-        "end"
-      ]
+      "align": ["start", "center", "end"]
     }
   },
   "meta": {
-    "desiredParent": [
-      "=CarouselProvider"
-    ],
+    "desiredParent": ["=CarouselProvider"],
     "label": "Carousel",
     "description": "Container for carousel items.",
     "styles": {}

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

@@ -7,19 +7,12 @@
     "children": "never",
     "extends": "View",
     "attributes": {
-      "buttonType": [
-        "previous_button",
-        "next_button",
-        "skip_button"
-      ],
+      "buttonType": ["previous_button", "next_button", "skip_button"],
       "skipNumber": "number"
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider",
-      ">CarouselProvider"
-    ],
+    "desiredParent": [">OnboardProvider", ">CarouselProvider"],
     "label": "Carousel Buttons",
     "description": "Renders built-in carousel buttons.",
     "styles": {},

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

@@ -18,9 +18,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">CarouselProvider"
-    ],
+    "desiredParent": [">CarouselProvider"],
     "label": "Carousel Dots",
     "description": "Renders page indicator dots.",
     "styles": {

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

@@ -8,9 +8,7 @@
     "extends": "View"
   },
   "meta": {
-    "desiredParent": [
-      "=Carousel"
-    ],
+    "desiredParent": ["=Carousel"],
     "label": "Carousel Item",
     "description": "Single slide inside a carousel.",
     "styles": {}

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

@@ -1,4 +1,4 @@
-import React, { createContext, useId, useMemo } from 'react';
+import React, { createContext, useId } from 'react';
 import type { CarouselProviderComponentProps } from './CarouselProviderProps.generated';
 import RenderNode from '../RenderNode.generated';
 import useEmblaCarousel from 'embla-carousel-react';

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

@@ -15,10 +15,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "root",
-      ">View"
-    ],
+    "desiredParent": ["root", ">View"],
     "label": "Carousel Provider",
     "description": "Provides carousel context to its children.",
     "attributes": {}

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

@@ -69,11 +69,35 @@ export function CountDown({ node }: CountDownComponentProps) {
     };
   }, [delayMs]);
 
+  const fontSize =
+    typeof style?.fontSize === 'number'
+      ? style.fontSize
+      : typeof style?.fontSize === 'string'
+        ? parseFloat(style.fontSize)
+        : 16;
+
+  const letterSpacing =
+    typeof style?.letterSpacing === 'number'
+      ? style.letterSpacing
+      : typeof style?.letterSpacing === 'string'
+        ? parseFloat(style.letterSpacing)
+        : 0;
+
+  // "00:00" format needs ~5 characters width
+  const charCount = 5;
+  const width = fontSize * charCount * 0.6 + letterSpacing * (charCount - 1);
+
   return (
     <p
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      style={style}
+      style={{
+        ...style,
+        width,
+        textAlign: 'left',
+        alignItems: 'left',
+        alignSelf: 'center',
+      }}
     >
       {time}
     </p>

package/src/build-components/CountDown/CountDownProps.generated.ts

@@ -2,7 +2,6 @@
 
 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 =
@@ -25,7 +24,7 @@ export interface CountDownStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
-  textAlign?: TextAlignOptionType;
+  textAlign?: never;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -47,7 +46,7 @@ export interface CountDownStyleGenerated {
   marginRight?: string;
   backgroundColor?: string;
   borderRadius?: string;
-  width?: string;
+  width?: never;
   minWidth?: string;
   maxWidth?: string;
   height?: string;
@@ -66,10 +65,10 @@ export interface CountDownPropsGenerated {
   child: string;
   attributes: {
     style?: CountDownStyleGenerated;
-    count?: number;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;
+    count?: number;
   };
 }
 

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

@@ -5,12 +5,17 @@
     "title": "title",
     "description": "description",
     "children": "never",
-    "extends": "Counter"
+    "extends": "Text",
+    "attributes": {
+      "count": "number",
+      "style": {
+        "width": "never",
+        "textAlign": "never"
+      }
+    }
   },
   "meta": {
-    "desiredParent": [
-      "all"
-    ],
+    "desiredParent": ["all"],
     "label": "Count Down",
     "description": "Displays a countdown timer.",
     "attributes": {

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

@@ -20,9 +20,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "root"
-    ],
+    "desiredParent": ["root"],
     "label": "Main",
     "description": "Top-level screen wrapper (safe area, base layout).",
     "hideAllAttributes": true,

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

@@ -13,9 +13,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "all"
-    ],
+    "desiredParent": ["all"],
     "label": "Navigation Bar Color",
     "description": "Sets the OS navigation bar background color.",
     "styles": {

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

@@ -8,12 +8,8 @@
     "extends": "View"
   },
   "meta": {
-    "desiredParent": [
-      "=OnboardProvider"
-    ],
-    "desiredChildren": [
-      "=OnboardItem"
-    ],
+    "desiredParent": ["=OnboardProvider"],
+    "desiredChildren": ["=OnboardItem"],
     "label": "Onboard",
     "description": "Wraps the onboarding flow.",
     "styles": {}

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

@@ -1,4 +1,4 @@
-import React, { useContext, useId, useMemo, useRef } from 'react';
+import React, { useContext, useId, useRef } from 'react';
 import type {
   EventObjectGenerated,
   OnboardButtonComponentProps,
@@ -52,7 +52,6 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const handleClick = () => {
     //TODO: any ??
     const events: EventObjectGenerated[] = attrs?.events ?? [];
-    let navigateHandled = false;
 
     for (const e of events) {
       // Check if event is already handled
@@ -69,13 +68,11 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
         const eventTargetIndex = e.targetIndex;
         if (typeof eventTargetIndex === 'number') {
           emblaApi?.scrollTo(eventTargetIndex);
-          navigateHandled = true;
           handledEventsRef.current.push(e);
           //TODO: cause user to click second time
         } else if (e.navigate_to) {
           const eventTarget = e.navigate_to;
           if (typeof eventTarget === 'string') {
-            navigateHandled = true;
             handledEventsRef.current.push(e);
             //TODO: cause user to click second time
             if (context) {

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

@@ -30,25 +30,14 @@
   },
   "types": {
     "EventObject": {
-      "type": [
-        "Permission",
-        "Navigate"
-      ],
-      "permission": [
-        "att",
-        "notification",
-        "rating",
-        "GDPR",
-        "null"
-      ],
+      "type": ["Permission", "Navigate"],
+      "permission": ["att", "notification", "rating", "GDPR", "null"],
       "navigate_to": "string",
       "targetIndex": "number"
     }
   },
   "meta": {
-    "desiredParent": [
-      "=OnboardButtons"
-    ],
+    "desiredParent": ["=OnboardButtons"],
     "label": "Onboard Button",
     "description": "Single action button for onboarding.",
     "styles": {

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

@@ -15,11 +15,7 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButtons';
-  const { appConfig, previewMode, selectedKey } = useBuilderParams();
-  const seperatorColorDefault =
-    appConfig?.theme === 'light'
-      ? appConfig?.screenStyle?.light?.seperatorColor
-      : appConfig?.screenStyle?.dark?.seperatorColor;
+  const { previewMode, selectedKey } = useBuilderParams();
   const ctx = useContext(onboardContext) ?? {};
   const [selectedIndex, setSelectedIndex] = useState(ctx.selectedIndex ?? 0);
 
@@ -31,10 +27,6 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
 
   const attrRecord = toAttributeRecord(node.attributes);
   const styleBag = getStyleBag(node.attributes);
-  const direction =
-    (attrRecord.buttons_direction ?? styleBag?.buttons_direction) === 'column'
-      ? 'column'
-      : 'row';
 
   const children = useMemo(() => {
     const raw = node.children as unknown;

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

@@ -7,21 +7,12 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "buttonType": [
-        "previous_button",
-        "next_button",
-        "skip_button"
-      ],
+      "buttonType": ["previous_button", "next_button", "skip_button"],
       "skipNumber": "number",
-      "buttons_direction": [
-        "row",
-        "column"
-      ],
+      "buttons_direction": ["row", "column"],
       "forIndex": "number",
       "seperatorColor": "color",
-      "condition": [
-        "carousel-index"
-      ],
+      "condition": ["carousel-index"],
       "conditionVariable": "number"
     },
     "defaults": {
@@ -37,9 +28,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "=OnboardItem"
-    ],
+    "desiredParent": ["=OnboardItem"],
     "label": "Onboard Buttons",
     "description": "Wrapper for onboarding button set.",
     "styles": {

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

@@ -71,7 +71,8 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
 
   const extractedStyle = useExtractViewStyle(node);
   const baseStyle = useMemo(() => {
-    const { flexDirection: _flexDirection, ...innerStyle } = extractedStyle;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { flexDirection, ...innerStyle } = extractedStyle;
     return innerStyle;
   }, [extractedStyle]);
   const isSelected = isNodeSelected({

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

@@ -37,9 +37,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider"
-    ],
+    "desiredParent": [">OnboardProvider"],
     "label": "Onboard Dot",
     "description": "Renders onboarding progress dots.",
     "styles": {

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

@@ -27,9 +27,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardItem"
-    ],
+    "desiredParent": [">OnboardItem"],
     "label": "Onboard Footer",
     "description": "Footer text with optional links.",
     "styles": {

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/OnboardItem.tsx

@@ -1,4 +1,4 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import RenderNode from '../RenderNode.generated';

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

@@ -7,15 +7,9 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "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/OnboardProvider.tsx

@@ -1,6 +1,5 @@
 import React, {
   createContext,
-  useContext,
   useEffect,
   useId,
   useMemo,

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

@@ -7,11 +7,7 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "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/pattern.json

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { useId, useMemo } from 'react';
+import { useId } from 'react';
 import type { Product } from '../../paywall/types/paywall-types';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import type { NodeData } from '../../types/Node';
@@ -16,7 +16,6 @@ export type OptionsButtonProps = {
 
 export function PaywallOptionButton({
   product,
-  selected,
   onPress,
   node,
 }: OptionsButtonProps) {

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

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

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

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react';
 import type { Product } from '../../paywall/types/paywall-types';
 
 export type PaywallContextValue = {

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

@@ -13,7 +13,6 @@ import { PaywallContext } from './PaywallContext';
 import { useMockOSContext } from '../../mockOS/context/MockOSContextBase';
 import type { Product } from '../../paywall/types/paywall-types';
 import { useChangeDelayByPaywall } from '../../paywall/hooks/useChangeDelayByPaywall';
-import { useHandleGoBack } from '../../paywall/hooks/useHandleGoBack';
 import { useMockOSBackHandler } from '../../paywall/hooks/useMockOSBackHandler';
 
 function PaywallProvider({ node }: PaywallProviderComponentProps) {
@@ -99,15 +98,6 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     }
   }, [mockOS, isBackAllowed]);
 
-  const handleGoBack = useCallback(() => {
-    if (!isBackAllowed) {
-      return false;
-    }
-    return true;
-  }, [isBackAllowed]);
-
-  useHandleGoBack(handleGoBack);
-
   const handleSubscribe = useCallback(
     async (product?: Product): Promise<boolean> => {
       // Host app override wins.

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/PaywallSubscribeButton.tsx

@@ -1,4 +1,4 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeButtonProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';

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

@@ -21,9 +21,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/RadioButton.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useId, useMemo } from 'react';
+import React, { useContext, useId } from 'react';
 import type { RadioButtonComponentProps } from './RadioButtonProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';