@developer_tribe/react-builder 1.1.0 → 1.2.1

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

@@ -0,0 +1,63 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 PaywallProviderPropsGenerated {
+  child: string;
+  attributes: {
+    style?: Record<string, unknown>;
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: 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 PaywallProviderComponentProps {
+  node: NodeData<PaywallProviderPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,27 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "PaywallProvider",
+    "children": "node",
+    "extends": "View",
+    "attributes": {}
+  },
+  "defaults": {
+    "style": {
+      "width": "100%",
+      "height": "100%"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      "all"
+    ],
+    "label": "Paywall Provider",
+    "description": "Provider/wrapper for paywall screen components.",
+    "mockableFeatures": {
+      "products": true,
+      "benefits": true
+    },
+    "styles": {}
+  }
+}

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

@@ -0,0 +1,67 @@
+import React, { useId, useMemo } from 'react';
+import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeButtonProps.generated';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
+import { useLogRender } from '../../utils/useLogRender';
+import { extractTextStyle } from '../../utils/extractTextStyle';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { useLocalize } from '../../hooks/useLocalize';
+import { usePaywallContext } from '../PaywallProvider/PaywallContext';
+
+function PaywallSubscribeButton({
+  node,
+}: PaywallSubscribeButtonComponentProps) {
+  useLogRender('PaywallSubscribeButton');
+  node = useNode(node);
+  const { onSubscribe, selectedProduct } = usePaywallContext();
+
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'PaywallSubscribeButton';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
+
+  const baseStyle = useMemo(
+    () => extractTextStyle(node as any, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  const localize = useLocalize();
+  const label =
+    typeof node.children === 'string' && node.children.trim().length > 0
+      ? node.children
+      : 'Subscribe';
+
+  return (
+    <a
+      type="button"
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      href="#"
+      onClick={(e) => {
+        e.preventDefault();
+        onSubscribe?.(selectedProduct);
+      }}
+      style={{ ...style, cursor: 'pointer' }}
+    >
+      {localize(label)}
+    </a>
+  );
+}
+
+export default React.memo(PaywallSubscribeButton);

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

@@ -0,0 +1,78 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FontWeightOptionType =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900';
+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 PaywallSubscribeButtonPropsGenerated {
+  child: string;
+  attributes: {
+    style?: Record<string, unknown>;
+    color?: string;
+    fontSize?: string;
+    fontWeight?: FontWeightOptionType;
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: 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 PaywallSubscribeButtonComponentProps {
+  node: NodeData<PaywallSubscribeButtonPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,30 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "PaywallSubscribeButton",
+    "children": "string",
+    "extends": "Button",
+    "attributes": {}
+  },
+  "defaults": {
+    "style": {
+      "paddingHorizontal": "20@s",
+      "paddingVertical": "12@vs",
+      "borderRadius": "12@s",
+      "backgroundColor": "#6495ED",
+      "color": "#FFFFFF",
+      "fontSize": "16@fs",
+      "fontWeight": "700",
+      "justifyContent": "center",
+      "alignItems": "center"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
+    "label": "Paywall Subscribe Button",
+    "description": "Paywall subscribe call-to-action button. Extends Button.",
+    "styles": {}
+  }
+}

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

@@ -0,0 +1,123 @@
+import React, { useContext, useId, useMemo } from 'react';
+import type { RadioButtonComponentProps } from './RadioButtonProps.generated';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { ParamsContext } from '../../components/ParamsProvider';
+
+function parseNumberLike(value: unknown): number | undefined {
+  if (value === null || value === undefined) return undefined;
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value !== 'string') return undefined;
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+  const normalized = trimmed.replace(',', '.');
+  const parsed = Number.parseFloat(normalized);
+  if (!Number.isFinite(parsed)) return undefined;
+  return parsed;
+}
+
+export type RadioButtonBaseProps = {
+  selected: boolean;
+  color?: string;
+  size?: number;
+};
+
+export function RadioButtonBase({
+  selected,
+  color = '#A6A6A6',
+  size = 24,
+}: RadioButtonBaseProps) {
+  const borderWidth = Math.round(size * 0.1);
+  const sizeHalf = Math.round(size * 0.5);
+
+  const paramsContext = useContext(ParamsContext);
+  const otherParams = paramsContext?.otherParams ?? {};
+  const newSelected =
+    otherParams.isSelected !== undefined
+      ? String(otherParams.isSelected).toLowerCase() === 'true'
+      : selected;
+  return (
+    <div style={{ marginLeft: 8, marginRight: 16 }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderWidth,
+          borderStyle: 'solid',
+          borderColor: color,
+          width: size,
+          height: size,
+          borderRadius: sizeHalf,
+          boxSizing: 'border-box',
+          flex: '0 0 auto',
+        }}
+      >
+        {newSelected ? (
+          <div
+            style={{
+              width: sizeHalf,
+              height: sizeHalf,
+              borderRadius: sizeHalf * 2,
+              backgroundColor: color,
+            }}
+          />
+        ) : (
+          <div style={{ width: size, height: size, borderRadius: sizeHalf }} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function RadioButton({ node }: RadioButtonComponentProps) {
+  useLogRender('RadioButton');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.type ?? 'RadioButton';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
+
+  const baseStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  const selected = Boolean((node.attributes as any)?.selected);
+  const color =
+    typeof (node.attributes as any)?.color === 'string'
+      ? ((node.attributes as any)?.color as string)
+      : undefined;
+  const size = parseNumberLike((node.attributes as any)?.size);
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      <RadioButtonBase selected={selected} color={color} size={size} />
+    </div>
+  );
+}
+
+export default React.memo(RadioButton);

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

@@ -0,0 +1,66 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 RadioButtonPropsGenerated {
+  child: string;
+  attributes: {
+    style?: Record<string, unknown>;
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: 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;
+    selected?: boolean;
+    color?: string;
+    size?: number;
+  };
+}
+
+export interface RadioButtonComponentProps {
+  node: NodeData<RadioButtonPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,43 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "RadioButton",
+    "children": "never",
+    "extends": "View",
+    "attributes": {
+      "selected": "boolean",
+      "color": "color",
+      "size": "number"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      "all"
+    ],
+    "label": "Radio Button",
+    "description": "Generic radio button icon.",
+    "styles": {
+      "selected": {
+        "label": "Selected",
+        "description": "Whether the radio is selected.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 0
+      },
+      "color": {
+        "label": "Color",
+        "description": "Radio color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "size": {
+        "label": "Size",
+        "description": "Radio size in px.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      }
+    }
+  }
+}