@developer_tribe/react-builder 1.2.14 → 1.2.15

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

@@ -0,0 +1,78 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 CountDownStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: 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;
+}
+
+export interface CountDownPropsGenerated {
+  child: string;
+  attributes: {
+    style?: CountDownStyleGenerated;
+    count?: number;
+    title?: string;
+    description?: string;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    scrollable?: boolean;
+  };
+}
+
+export interface CountDownComponentProps {
+  node: NodeData<CountDownPropsGenerated['attributes']>;
+}

package/src/build-components/CountDown/formatCountdownTime.ts

@@ -0,0 +1,10 @@
+import moment from 'moment';
+
+export function formatCountdownTime(
+  targetTimeMs: number,
+  format: string,
+  nowMs: number = Date.now(),
+): string {
+  const diffMs = Math.max(0, targetTimeMs - nowMs);
+  return moment(diffMs).format(format);
+}

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

@@ -0,0 +1,24 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "CountDown",
+    "children": "never",
+    "extends": "Counter",
+    "attributes": {}
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Count Down",
+    "description": "Displays a countdown timer.",
+    "attributes": {
+      "count": {
+        "label": "Count (ms)",
+        "description": "Countdown duration in milliseconds.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,44 @@
+import React, { useId } from 'react';
+import type { CounterComponentProps } from './CounterProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+
+//Optimzation trade off by readability: skip React.memo to keep named exports.
+export function Counter({ node }: CounterComponentProps) {
+  useLogRender('Counter');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'Counter';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, selectedKey } = useBuilderParams();
+  const baseStyle = useExtractTextStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  const rawCount = node.attributes?.count;
+  const count =
+    typeof rawCount === 'number' && Number.isFinite(rawCount) ? rawCount : 0;
+
+  return (
+    <p
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      {String(count)}
+    </p>
+  );
+}

package/src/build-components/Counter/CounterProps.generated.ts

@@ -0,0 +1,78 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 CounterStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: 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;
+}
+
+export interface CounterPropsGenerated {
+  child: string;
+  attributes: {
+    style?: CounterStyleGenerated;
+    title?: string;
+    description?: string;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    scrollable?: boolean;
+    count?: number;
+  };
+}
+
+export interface CounterComponentProps {
+  node: NodeData<CounterPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,26 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "Counter",
+    "children": "never",
+    "extends": "Text",
+    "attributes": {
+      "count": "number"
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Counter",
+    "description": "Displays a numeric counter.",
+    "attributes": {
+      "count": {
+        "label": "Count",
+        "description": "Numeric value to display.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      }
+    }
+  }
+}
+

package/src/build-components/Image/ImageProps.generated.ts

@@ -59,6 +59,8 @@ export interface ImagePropsGenerated {
   child: string;
   attributes: {
     style?: ImageStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     src?: string;
     width?: string;

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

@@ -5,6 +5,8 @@
     "children": "never",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "src": "string",
       "width": "size",
       "height": "size",

package/src/build-components/Main/MainProps.generated.ts

@@ -58,6 +58,8 @@ export interface MainPropsGenerated {
   child: string;
   attributes: {
     style?: MainStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     useSafeAreaView?: boolean;
   };

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

@@ -5,6 +5,8 @@
     "children": "node",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "useSafeAreaView": "boolean"
     }
   },

package/src/build-components/Onboard/OnboardProps.generated.ts

@@ -58,6 +58,8 @@ export interface OnboardPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
   };
 }

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

@@ -4,7 +4,10 @@
     "type": "Onboard",
     "children": "node",
     "extends": "View",
-    "attributes": {}
+    "attributes": {
+      "title": "title",
+      "description": "description"
+    }
   },
   "meta": {
     "desiredParent": [

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -73,6 +73,8 @@ export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardButtonStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     labelKey?: string;
     button_text_color?: string;

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

@@ -5,6 +5,8 @@
     "children": "never",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "labelKey": "string",
       "button_text_color": "color",
       "animation": [

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

@@ -64,6 +64,8 @@ export interface OnboardButtonsPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardButtonsStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;

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

@@ -5,6 +5,8 @@
     "children": "node",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "buttonType": [
         "previous_button",
         "next_button",

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

@@ -65,6 +65,8 @@ export interface OnboardDotPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardDotStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     dotType?: DotTypeOptionType;
     inactive_dot_opacity?: number;

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

@@ -5,6 +5,8 @@
     "children": "never",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "dotType": [
         "expanding_dot",
         "normal_dot",

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

@@ -64,6 +64,8 @@ export interface OnboardFooterPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardFooterStyleGenerated;
+    title?: string;
+    description?: string;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;

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

@@ -5,6 +5,8 @@
     "children": "node",
     "extends": "Text",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "textLocalizationKey": "string",
       "linkedWordFirstLocalizationKey": "string",
       "linkedWordFirstColor": "color",

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

@@ -59,6 +59,8 @@ export interface OnboardImagePropsGenerated {
   child: string;
   attributes: {
     style?: OnboardImageStyleGenerated;
+    title?: string;
+    description?: string;
     src?: string;
     width?: string;
     height?: string;

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

@@ -5,6 +5,8 @@
     "children": "node",
     "extends": "Image",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "video_url": "string",
       "lottie": "string"
     }

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

@@ -59,6 +59,8 @@ export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardItemStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     display?: DisplayOptionType;
     gap?: string;

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

@@ -5,6 +5,8 @@
     "children": "node",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "display": [
         "flex",
         "block"

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

@@ -59,6 +59,8 @@ export interface OnboardProviderPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardProviderStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     theme?: ThemeOptionType;
     borderRadius?: never;

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

@@ -5,6 +5,8 @@
     "children": "node",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "theme": [
         "light",
         "dark",

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

@@ -64,6 +64,8 @@ export interface OnboardSubtitlePropsGenerated {
   child: string;
   attributes: {
     style?: OnboardSubtitleStyleGenerated;
+    title?: string;
+    description?: string;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;

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

@@ -4,7 +4,10 @@
     "type": "OnboardSubtitle",
     "children": "string",
     "extends": "Text",
-    "attributes": {}
+    "attributes": {
+      "title": "title",
+      "description": "description"
+    }
   },
   "defaults": {
     "style": {

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

@@ -64,6 +64,8 @@ export interface OnboardTitlePropsGenerated {
   child: string;
   attributes: {
     style?: OnboardTitleStyleGenerated;
+    title?: string;
+    description?: string;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;

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

@@ -4,7 +4,10 @@
     "type": "OnboardTitle",
     "children": "string",
     "extends": "Text",
-    "attributes": {}
+    "attributes": {
+      "title": "title",
+      "description": "description"
+    }
   },
   "defaults": {
     "style": {

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

@@ -59,6 +59,8 @@ export interface PaywallBackgroundPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallBackgroundStyleGenerated;
+    title?: string;
+    description?: string;
     src?: string;
     resizeMode?: ResizeModeOptionType;
     scrollable?: boolean;

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

@@ -4,7 +4,10 @@
     "type": "PaywallBackground",
     "children": "never",
     "extends": "BackgroundImage",
-    "attributes": {},
+    "attributes": {
+      "title": "title",
+      "description": "description"
+    },
     "defaults": {
       "resizeMode": "cover",
       "style": {

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

@@ -1,8 +1,9 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { PaywallCloseButtonComponentProps } from './PaywallCloseButtonProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -21,7 +22,8 @@ function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
 
   const { previewMode, selectedKey } = useBuilderParams();
 
-  const baseStyle = useExtractTextStyle(node);
+  const viewStyle = useExtractViewStyle(node);
+  const textStyle = useExtractTextStyle(node);
 
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
@@ -29,16 +31,16 @@ function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
     node,
   });
   const style = useMergedStyle(
-    baseStyle,
+    viewStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
   const attrs = node.attributes;
   const styleBag = attrs?.style;
   const iconType = attrs?.iconType ?? 'close';
-  const size = attrs?.size ?? (style.fontSize as number | undefined) ?? 24;
+  const size = attrs?.size ?? (textStyle.fontSize as number | undefined) ?? 24;
   const color =
-    (style.color as string | undefined) ??
+    (textStyle.color as string | undefined) ??
     (styleBag?.color as string | undefined);
 
   return (

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

@@ -64,6 +64,8 @@ export interface PaywallCloseButtonPropsGenerated {
   child: string;
   attributes: {
     style?: PaywallCloseButtonStyleGenerated;
+    title?: string;
+    description?: string;
     iconType?: string;
     size?: number;
     strokeWidth?: number;

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

@@ -4,7 +4,10 @@
     "type": "PaywallCloseButton",
     "children": "never",
     "extends": "BIcon",
-    "attributes": {}
+    "attributes": {
+      "title": "title",
+      "description": "description"
+    }
   },
   "meta": {
     "desiredParent": [

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

@@ -0,0 +1,49 @@
+import React, { useId } from 'react';
+import type { PaywallCounterComponentProps } from './PaywallCounterProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { usePaywallCounter } from '../../paywall/hooks';
+
+//Optimzation trade off by readability: skip React.memo to keep named exports.
+export function PaywallCounter({ node }: PaywallCounterComponentProps) {
+  useLogRender('PaywallCounter');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'PaywallCounter';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, selectedKey } = useBuilderParams();
+  const baseStyle = useExtractTextStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  const paywallCount = usePaywallCounter();
+  const fallbackCount = node.attributes?.count;
+  const count = Number.isFinite(paywallCount)
+    ? paywallCount
+    : typeof fallbackCount === 'number' && Number.isFinite(fallbackCount)
+      ? fallbackCount
+      : 0;
+
+  return (
+    <p
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      {String(count)}
+    </p>
+  );
+}