@billdog.io/react-native 1.0.0-beta.2

package/dist/components/ProgressLoaderComponent.js

@@ -0,0 +1,308 @@
+"use strict";
+/**
+ * ProgressLoaderComponent - Native React Native implementation
+ * Supports 5 display modes: spinner, loading-text, bar, circular, loader-set
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressLoaderComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+// Helper to extract color from fill value (handles gradients by taking first stop)
+const getColorFromFill = (fill, fallback = '#3B82F6') => {
+    var _a;
+    if (!fill)
+        return fallback;
+    if (typeof fill === 'string')
+        return fill;
+    if (typeof fill === 'object') {
+        if (fill.type === 'solid' && fill.color)
+            return fill.color;
+        if (fill.type === 'gradient' && ((_a = fill.stops) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            return fill.stops[0].color || fallback;
+        }
+        if (fill.color)
+            return fill.color;
+    }
+    return fallback;
+};
+// Animated circle component for spinner
+const AnimatedCircle = react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Circle);
+const ProgressLoaderComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const props = component.properties;
+    const displayMode = props.displayMode || 'circular';
+    const progress = (_a = props.progress) !== null && _a !== void 0 ? _a : 65;
+    const animated = props.animated !== false;
+    // Spinner properties
+    const spinnerSize = (_b = props.spinnerSize) !== null && _b !== void 0 ? _b : 48;
+    const spinnerThickness = (_c = props.spinnerThickness) !== null && _c !== void 0 ? _c : 4;
+    const spinnerFill = getColorFromFill(props.spinnerFill, '#3B82F6');
+    const spinnerTrackFill = getColorFromFill(props.spinnerTrackFill, '#E5E7EB');
+    // Bar properties
+    const barHeight = (_d = props.barHeight) !== null && _d !== void 0 ? _d : 8;
+    const barFill = getColorFromFill(props.barFill, '#3B82F6');
+    const barTrackFill = getColorFromFill(props.barTrackFill, '#E5E7EB');
+    const barBorderRadius = (_e = props.barBorderRadius) !== null && _e !== void 0 ? _e : 4;
+    // Circular properties
+    const circularSize = (_f = props.circularSize) !== null && _f !== void 0 ? _f : 80;
+    const circularThickness = (_g = props.circularThickness) !== null && _g !== void 0 ? _g : 8;
+    const circularFill = getColorFromFill(props.circularFill, '#3B82F6');
+    const circularTrackFill = getColorFromFill(props.circularTrackFill, '#E5E7EB');
+    const showPercentage = props.showPercentage !== false;
+    const percentageFill = getColorFromFill(props.percentageFill, '#1F2937');
+    const percentageFontSize = (_h = props.percentageFontSize) !== null && _h !== void 0 ? _h : 18;
+    // Loading text properties
+    const loadingText = props.loadingText || 'Loading...';
+    const loadingTextFill = getColorFromFill(props.loadingTextFill, '#1F2937');
+    const loadingTextSize = (_j = props.loadingTextSize) !== null && _j !== void 0 ? _j : 16;
+    // Loader-set properties
+    const loaderCount = (_k = props.loaderCount) !== null && _k !== void 0 ? _k : 3;
+    const loaders = [];
+    for (let i = 1; i <= loaderCount; i++) {
+        loaders.push({
+            label: props[`loader${i}Label`] || `Step ${i}`,
+            progress: (_l = props[`loader${i}Progress`]) !== null && _l !== void 0 ? _l : Math.min(100, progress + (i - 1) * 10),
+        });
+    }
+    // Animation values
+    const spinRotation = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    // Spinner rotation animation
+    (0, react_1.useEffect)(() => {
+        if (displayMode === 'spinner' && animated) {
+            const animation = react_native_1.Animated.loop(react_native_1.Animated.timing(spinRotation, {
+                toValue: 1,
+                duration: 1000,
+                easing: react_native_1.Easing.linear,
+                useNativeDriver: true,
+            }));
+            animation.start();
+            return () => animation.stop();
+        }
+    }, [displayMode, animated, spinRotation]);
+    // Progress animation
+    (0, react_1.useEffect)(() => {
+        if (animated) {
+            react_native_1.Animated.timing(progressAnim, {
+                toValue: progress,
+                duration: 500,
+                easing: react_native_1.Easing.out(react_native_1.Easing.quad),
+                useNativeDriver: false,
+            }).start();
+        }
+        else {
+            progressAnim.setValue(progress);
+        }
+    }, [progress, animated, progressAnim]);
+    // Render spinner mode
+    const renderSpinner = () => {
+        const rotation = spinRotation.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0deg', '360deg'],
+        });
+        const radius = (spinnerSize - spinnerThickness) / 2;
+        const circumference = 2 * Math.PI * radius;
+        return (<react_native_1.View style={styles.centered}>
+        <react_native_1.Animated.View style={{ transform: [{ rotate: rotation }] }}>
+          <react_native_svg_1.default width={spinnerSize} height={spinnerSize}>
+            <react_native_svg_1.Circle cx={spinnerSize / 2} cy={spinnerSize / 2} r={radius} stroke={spinnerTrackFill} strokeWidth={spinnerThickness} fill="none"/>
+            <react_native_svg_1.Circle cx={spinnerSize / 2} cy={spinnerSize / 2} r={radius} stroke={spinnerFill} strokeWidth={spinnerThickness} fill="none" strokeDasharray={`${circumference * 0.25} ${circumference * 0.75}`} strokeLinecap="round"/>
+          </react_native_svg_1.default>
+        </react_native_1.Animated.View>
+      </react_native_1.View>);
+    };
+    // Render loading text mode
+    const renderLoadingText = () => {
+        return (<react_native_1.View style={styles.centered}>
+        <react_native_1.Text style={[styles.loadingText, { color: loadingTextFill, fontSize: loadingTextSize }]}>
+          {loadingText}
+        </react_native_1.Text>
+      </react_native_1.View>);
+    };
+    // Render bar mode
+    const renderBar = () => {
+        const barWidth = progressAnim.interpolate({
+            inputRange: [0, 100],
+            outputRange: ['0%', '100%'],
+            extrapolate: 'clamp',
+        });
+        return (<react_native_1.View style={styles.barContainer}>
+        <react_native_1.View style={[
+                styles.barTrack,
+                {
+                    height: barHeight,
+                    backgroundColor: barTrackFill,
+                    borderRadius: barBorderRadius,
+                },
+            ]}>
+          <react_native_1.Animated.View style={[
+                styles.barFill,
+                {
+                    width: barWidth,
+                    backgroundColor: barFill,
+                    borderRadius: barBorderRadius,
+                },
+            ]}/>
+        </react_native_1.View>
+      </react_native_1.View>);
+    };
+    // Render circular mode
+    const renderCircular = () => {
+        const radius = (circularSize - circularThickness) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const strokeDashoffset = progressAnim.interpolate({
+            inputRange: [0, 100],
+            outputRange: [circumference, 0],
+            extrapolate: 'clamp',
+        });
+        return (<react_native_1.View style={[styles.centered, { width: circularSize, height: circularSize }]}>
+        <react_native_svg_1.default width={circularSize} height={circularSize}>
+          <react_native_svg_1.G rotation="-90" origin={`${circularSize / 2}, ${circularSize / 2}`}>
+            <react_native_svg_1.Circle cx={circularSize / 2} cy={circularSize / 2} r={radius} stroke={circularTrackFill} strokeWidth={circularThickness} fill="none"/>
+            <AnimatedCircle cx={circularSize / 2} cy={circularSize / 2} r={radius} stroke={circularFill} strokeWidth={circularThickness} fill="none" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} strokeLinecap="round"/>
+          </react_native_svg_1.G>
+        </react_native_svg_1.default>
+        {showPercentage && (<react_native_1.View style={react_native_1.StyleSheet.absoluteFill}>
+            <react_native_1.View style={styles.percentageContainer}>
+              <react_native_1.Text style={[styles.percentageText, { color: percentageFill, fontSize: percentageFontSize }]}>
+                {Math.round(progress)}%
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>)}
+      </react_native_1.View>);
+    };
+    // Render loader-set mode
+    const renderLoaderSet = () => {
+        return (<react_native_1.View style={styles.loaderSetContainer}>
+        {loaders.map((loader, index) => (<react_native_1.View key={index} style={styles.loaderSetItem}>
+            <react_native_1.View style={styles.loaderSetHeader}>
+              <react_native_1.Text style={styles.loaderSetLabel}>{loader.label}</react_native_1.Text>
+              <react_native_1.Text style={styles.loaderSetProgress}>{loader.progress}%</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={[
+                    styles.barTrack,
+                    {
+                        height: barHeight,
+                        backgroundColor: barTrackFill,
+                        borderRadius: barBorderRadius,
+                    },
+                ]}>
+              <react_native_1.View style={[
+                    styles.barFill,
+                    {
+                        width: `${loader.progress}%`,
+                        backgroundColor: barFill,
+                        borderRadius: barBorderRadius,
+                    },
+                ]}/>
+            </react_native_1.View>
+          </react_native_1.View>))}
+      </react_native_1.View>);
+    };
+    // Render based on display mode
+    const renderContent = () => {
+        switch (displayMode) {
+            case 'spinner':
+                return renderSpinner();
+            case 'loading-text':
+                return renderLoadingText();
+            case 'bar':
+                return renderBar();
+            case 'circular':
+                return renderCircular();
+            case 'loader-set':
+                return renderLoaderSet();
+            default:
+                return renderCircular();
+        }
+    };
+    return <react_native_1.View style={styles.container}>{renderContent()}</react_native_1.View>;
+};
+exports.ProgressLoaderComponent = ProgressLoaderComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    centered: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    loadingText: {
+        fontWeight: '500',
+    },
+    barContainer: {
+        width: '100%',
+    },
+    barTrack: {
+        width: '100%',
+        overflow: 'hidden',
+    },
+    barFill: {
+        height: '100%',
+    },
+    percentageContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    percentageText: {
+        fontWeight: '600',
+    },
+    loaderSetContainer: {
+        width: '100%',
+        gap: 16,
+    },
+    loaderSetItem: {
+        width: '100%',
+        gap: 6,
+    },
+    loaderSetHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    loaderSetLabel: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: '#374151',
+    },
+    loaderSetProgress: {
+        fontSize: 12,
+        color: '#6B7280',
+    },
+});

package/dist/components/ProgressStepperComponent.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ProgressStepperComponent - React Native
+ *
+ * Multi-step progress indicator with customizable appearance.
+ * Features:
+ * - Horizontal/vertical orientation
+ * - Animated transitions
+ * - State manager integration
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface ProgressStepperComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const ProgressStepperComponent: React.FC<ProgressStepperComponentProps>;
+export {};

package/dist/components/ProgressStepperComponent.js

@@ -0,0 +1,228 @@
+"use strict";
+/**
+ * ProgressStepperComponent - React Native
+ *
+ * Multi-step progress indicator with customizable appearance.
+ * Features:
+ * - Horizontal/vertical orientation
+ * - Animated transitions
+ * - State manager integration
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressStepperComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Helper to extract color from fill value
+const getColorFromFill = (fill, fallback) => {
+    if (!fill)
+        return fallback;
+    if (typeof fill === 'string')
+        return fill;
+    if (fill.type === 'color' && fill.color)
+        return fill.color;
+    return fallback;
+};
+const ProgressStepperComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const props = component.properties;
+    const componentId = component.id;
+    // Configuration
+    const totalSteps = Math.max(2, Math.min(10, (_a = props.totalSteps) !== null && _a !== void 0 ? _a : 4));
+    const initialStep = Math.max(1, Math.min(totalSteps, (_b = props.currentStep) !== null && _b !== void 0 ? _b : 1));
+    const orientation = (_c = props.orientation) !== null && _c !== void 0 ? _c : 'horizontal';
+    // Labels
+    const showLabels = (_d = props.showLabels) !== null && _d !== void 0 ? _d : false;
+    const showNumbers = (_e = props.showNumbers) !== null && _e !== void 0 ? _e : true;
+    const labels = [];
+    for (let i = 1; i <= totalSteps; i++) {
+        labels.push((_f = props[`step${i}Label`]) !== null && _f !== void 0 ? _f : `Step ${i}`);
+    }
+    // Styling
+    const stepSize = (_g = props.stepSize) !== null && _g !== void 0 ? _g : 32;
+    const lineThickness = (_h = props.lineThickness) !== null && _h !== void 0 ? _h : 2;
+    const stepGap = (_j = props.stepGap) !== null && _j !== void 0 ? _j : 8;
+    // Colors
+    const completedColor = getColorFromFill(props.completedFill, '#3B82F6');
+    const activeColor = getColorFromFill(props.activeFill, '#3B82F6');
+    const inactiveColor = getColorFromFill(props.inactiveFill, '#E5E7EB');
+    const lineColor = getColorFromFill(props.lineFill, '#E5E7EB');
+    const completedLineColor = getColorFromFill(props.completedLineFill, '#3B82F6');
+    const textColor = getColorFromFill(props.textFill, '#FFFFFF');
+    const labelColor = getColorFromFill(props.labelFill, '#6B7280');
+    // Animation
+    const animated = (_k = props.animated) !== null && _k !== void 0 ? _k : true;
+    const [currentStep, setCurrentStep] = (0, react_1.useState)(initialStep);
+    const [animatedValues] = (0, react_1.useState)(() => Array.from({ length: totalSteps }, () => new react_native_1.Animated.Value(1)));
+    // Connect to state manager
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            // Initialize state
+            stateManager.updateState(`element:${componentId}.currentStep`, currentStep);
+            stateManager.updateState(`element:${componentId}.totalSteps`, totalSteps);
+            stateManager.updateState(`element:${componentId}.progress`, currentStep / totalSteps);
+            stateManager.updateState(`element:${componentId}.isComplete`, currentStep >= totalSteps);
+            // Subscribe to external changes
+            return stateManager.subscribeToState(`element:${componentId}.currentStep`, (value) => {
+                if (typeof value === 'number' && value !== currentStep) {
+                    setCurrentStep(Math.min(Math.max(1, value), totalSteps));
+                }
+            });
+        }
+    }, [componentId, totalSteps, currentStep, stateManager]);
+    // Animate when step changes
+    (0, react_1.useEffect)(() => {
+        if (animated) {
+            // Animate current step
+            react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(animatedValues[currentStep - 1], {
+                    toValue: 1.15,
+                    duration: 100,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValues[currentStep - 1], {
+                    toValue: 1,
+                    duration: 100,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+        if (stateManager) {
+            stateManager.updateState(`element:${componentId}.currentStep`, currentStep);
+            stateManager.updateState(`element:${componentId}.progress`, currentStep / totalSteps);
+            stateManager.updateState(`element:${componentId}.isComplete`, currentStep >= totalSteps);
+        }
+    }, [currentStep, animated, animatedValues, componentId, totalSteps, stateManager]);
+    const isHorizontal = orientation === 'horizontal';
+    return (<react_native_1.View style={[
+            styles.container,
+            {
+                flexDirection: isHorizontal ? 'row' : 'column',
+                gap: stepGap,
+            },
+        ]}>
+      {Array.from({ length: totalSteps }).map((_, index) => {
+            const stepNumber = index + 1;
+            const isCompleted = stepNumber < currentStep;
+            const isActive = stepNumber === currentStep;
+            const isLast = index === totalSteps - 1;
+            const bgColor = isCompleted ? completedColor : isActive ? activeColor : inactiveColor;
+            const currentLineColor = isCompleted ? completedLineColor : lineColor;
+            return (<react_native_1.View key={index} style={[
+                    styles.stepContainer,
+                    {
+                        flexDirection: isHorizontal ? 'row' : 'column',
+                        flex: isLast ? undefined : 1,
+                    },
+                ]}>
+            {/* Step with optional label */}
+            <react_native_1.View style={styles.stepContent}>
+              {/* Step Circle */}
+              <react_native_1.Animated.View style={[
+                    styles.stepCircle,
+                    {
+                        width: stepSize,
+                        height: stepSize,
+                        borderRadius: stepSize / 2,
+                        backgroundColor: bgColor,
+                        transform: [{ scale: animatedValues[index] }],
+                    },
+                ]}>
+                {isCompleted ? (<react_native_1.Text style={[styles.stepIcon, { color: textColor, fontSize: stepSize * 0.5 }]}>
+                    ✓
+                  </react_native_1.Text>) : showNumbers ? (<react_native_1.Text style={[styles.stepNumber, { color: isActive ? textColor : '#6B7280', fontSize: stepSize * 0.4 }]}>
+                    {stepNumber}
+                  </react_native_1.Text>) : null}
+              </react_native_1.Animated.View>
+              
+              {/* Step Label */}
+              {showLabels && (<react_native_1.Text style={[
+                        styles.stepLabel,
+                        {
+                            color: isCompleted || isActive ? textColor : labelColor,
+                            fontSize: 12,
+                        },
+                    ]} numberOfLines={1}>
+                  {labels[index]}
+                </react_native_1.Text>)}
+            </react_native_1.View>
+            
+            {/* Connecting Line */}
+            {!isLast && (<react_native_1.View style={[
+                        styles.line,
+                        {
+                            backgroundColor: currentLineColor,
+                            height: isHorizontal ? lineThickness : undefined,
+                            width: isHorizontal ? undefined : lineThickness,
+                            flex: 1,
+                            minWidth: isHorizontal ? 20 : undefined,
+                            minHeight: isHorizontal ? undefined : 20,
+                            marginHorizontal: isHorizontal ? stepGap : 0,
+                            marginVertical: isHorizontal ? 0 : stepGap,
+                            borderRadius: lineThickness / 2,
+                        },
+                    ]}/>)}
+          </react_native_1.View>);
+        })}
+    </react_native_1.View>);
+};
+exports.ProgressStepperComponent = ProgressStepperComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+        alignItems: 'center',
+    },
+    stepContainer: {
+        alignItems: 'center',
+    },
+    stepContent: {
+        alignItems: 'center',
+        gap: 4,
+    },
+    stepCircle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stepNumber: {
+        fontWeight: '600',
+    },
+    stepIcon: {
+        fontWeight: 'bold',
+    },
+    stepLabel: {
+        textAlign: 'center',
+    },
+    line: {},
+});

package/dist/components/SegmentedPickerComponent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface SegmentedPickerComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    renderChild?: (child: PaywallComponent, index: number, isSelected: boolean) => React.ReactNode;
+}
+export declare const SegmentedPickerComponent: React.FC<SegmentedPickerComponentProps>;
+export {};