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

package/dist/components/NavigationComponent.js

@@ -0,0 +1,302 @@
+"use strict";
+/**
+ * NavigationComponent - React Native
+ *
+ * Multi-screen paywall navigation with state management.
+ * Features:
+ * - Page stack navigation
+ * - State integration for current page tracking
+ * - Transition animations (slide, fade, push, none)
+ * - Swipe gesture navigation
+ * - Forward/back navigation
+ * - Entry/exit condition support
+ */
+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.NavigationComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+const NavigationComponent = ({ component, stateManager, isPreviewMode = false, renderComponent, }) => {
+    const props = component.properties;
+    const componentId = component.id;
+    // Configuration
+    const transition = props.transition || 'slide';
+    const transitionDirection = props.transitionDirection || 'horizontal';
+    const transitionDuration = props.transitionDuration || 300;
+    const swipeEnabled = props.swipeEnabled !== false;
+    const swipeThreshold = props.swipeThreshold || 0.3;
+    const initialPage = props.initialPage || 0;
+    // Get pages from children
+    const pages = component.children || [];
+    const totalPages = pages.length;
+    // State
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(initialPage);
+    const [history, setHistory] = (0, react_1.useState)([initialPage]);
+    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const panValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    // State manager integration
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            // Initialize state
+            stateManager.updateState(`element:${componentId}.currentIndex`, currentIndex);
+            stateManager.updateState(`element:${componentId}.totalPages`, totalPages);
+            stateManager.updateState(`element:${componentId}.canGoBack`, history.length > 1);
+            stateManager.updateState(`element:${componentId}.history`, history);
+            // Subscribe to external navigation commands
+            const unsubscribe = stateManager.subscribeToState(`element:${componentId}.navigateTo`, (value) => {
+                if (value !== null && value >= 0 && value < totalPages && value !== currentIndex) {
+                    navigateToPage(value);
+                }
+            });
+            return unsubscribe;
+        }
+    }, [componentId, stateManager, currentIndex, totalPages, history]);
+    // Update state manager when current index changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            stateManager.updateState(`element:${componentId}.currentIndex`, currentIndex);
+            stateManager.updateState(`element:${componentId}.canGoBack`, history.length > 1);
+            stateManager.updateState(`element:${componentId}.history`, history);
+        }
+    }, [currentIndex, history, componentId, stateManager]);
+    // Navigate to a specific page
+    const navigateToPage = (0, react_1.useCallback)((pageIndex, options) => {
+        if (pageIndex < 0 || pageIndex >= totalPages || pageIndex === currentIndex)
+            return;
+        const direction = pageIndex > currentIndex ? 1 : -1;
+        // Animate transition
+        react_native_1.Animated.timing(animatedValue, {
+            toValue: direction,
+            duration: transitionDuration,
+            useNativeDriver: true,
+        }).start(() => {
+            setCurrentIndex(pageIndex);
+            // Update history
+            if (options === null || options === void 0 ? void 0 : options.replace) {
+                setHistory(prev => [...prev.slice(0, -1), pageIndex]);
+            }
+            else {
+                setHistory(prev => [...prev, pageIndex]);
+            }
+            animatedValue.setValue(0);
+        });
+    }, [currentIndex, totalPages, transitionDuration, animatedValue]);
+    // Go back in history
+    const goBack = (0, react_1.useCallback)(() => {
+        if (history.length <= 1)
+            return;
+        const newHistory = [...history];
+        newHistory.pop();
+        const previousPage = newHistory[newHistory.length - 1];
+        react_native_1.Animated.timing(animatedValue, {
+            toValue: -1,
+            duration: transitionDuration,
+            useNativeDriver: true,
+        }).start(() => {
+            setCurrentIndex(previousPage);
+            setHistory(newHistory);
+            animatedValue.setValue(0);
+        });
+        if (stateManager) {
+            stateManager.updateState(`element:${componentId}.currentIndex`, previousPage);
+        }
+    }, [history, transitionDuration, animatedValue, componentId, stateManager]);
+    // Go to next page
+    const goNext = (0, react_1.useCallback)(() => {
+        if (currentIndex < totalPages - 1) {
+            navigateToPage(currentIndex + 1);
+        }
+    }, [currentIndex, totalPages, navigateToPage]);
+    // Go to previous page
+    const goPrevious = (0, react_1.useCallback)(() => {
+        if (currentIndex > 0) {
+            navigateToPage(currentIndex - 1);
+        }
+    }, [currentIndex, navigateToPage]);
+    // Pan responder for swipe navigation
+    const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            if (!swipeEnabled)
+                return false;
+            const { dx, dy } = gestureState;
+            const isHorizontal = transitionDirection === 'horizontal';
+            if (isHorizontal) {
+                return Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10;
+            }
+            else {
+                return Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 10;
+            }
+        },
+        onPanResponderMove: (_, gestureState) => {
+            const { dx, dy } = gestureState;
+            const isHorizontal = transitionDirection === 'horizontal';
+            const delta = isHorizontal ? dx : dy;
+            const size = isHorizontal ? SCREEN_WIDTH : SCREEN_HEIGHT;
+            // Normalize pan value between -1 and 1
+            const normalizedDelta = delta / size;
+            // Check boundaries
+            if (normalizedDelta > 0 && currentIndex === 0) {
+                panValue.setValue(normalizedDelta * 0.2); // Resistance at start
+            }
+            else if (normalizedDelta < 0 && currentIndex === totalPages - 1) {
+                panValue.setValue(normalizedDelta * 0.2); // Resistance at end
+            }
+            else {
+                panValue.setValue(normalizedDelta);
+            }
+        },
+        onPanResponderRelease: (_, gestureState) => {
+            const { dx, dy, vx, vy } = gestureState;
+            const isHorizontal = transitionDirection === 'horizontal';
+            const delta = isHorizontal ? dx : dy;
+            const velocity = isHorizontal ? vx : vy;
+            const size = isHorizontal ? SCREEN_WIDTH : SCREEN_HEIGHT;
+            const normalizedDelta = delta / size;
+            // Determine if we should navigate
+            if (Math.abs(normalizedDelta) > swipeThreshold || Math.abs(velocity) > 0.5) {
+                if (normalizedDelta > 0 && currentIndex > 0) {
+                    // Swipe right/down - go back
+                    react_native_1.Animated.timing(panValue, {
+                        toValue: 1,
+                        duration: 200,
+                        useNativeDriver: true,
+                    }).start(() => {
+                        panValue.setValue(0);
+                        goPrevious();
+                    });
+                }
+                else if (normalizedDelta < 0 && currentIndex < totalPages - 1) {
+                    // Swipe left/up - go forward
+                    react_native_1.Animated.timing(panValue, {
+                        toValue: -1,
+                        duration: 200,
+                        useNativeDriver: true,
+                    }).start(() => {
+                        panValue.setValue(0);
+                        goNext();
+                    });
+                }
+                else {
+                    // Snap back
+                    react_native_1.Animated.spring(panValue, {
+                        toValue: 0,
+                        useNativeDriver: true,
+                    }).start();
+                }
+            }
+            else {
+                // Snap back
+                react_native_1.Animated.spring(panValue, {
+                    toValue: 0,
+                    useNativeDriver: true,
+                }).start();
+            }
+        },
+    })).current;
+    // Calculate animated transform based on transition type
+    const getTransformStyle = (pageOffset) => {
+        const isHorizontal = transitionDirection === 'horizontal';
+        const size = isHorizontal ? SCREEN_WIDTH : SCREEN_HEIGHT;
+        const combinedOffset = react_native_1.Animated.add(animatedValue, panValue);
+        switch (transition) {
+            case 'slide':
+                const translateX = isHorizontal
+                    ? react_native_1.Animated.multiply(combinedOffset, new react_native_1.Animated.Value(-size)).interpolate({
+                        inputRange: [-1, 0, 1],
+                        outputRange: [size + pageOffset * size, pageOffset * size, -size + pageOffset * size],
+                    })
+                    : 0;
+                const translateY = !isHorizontal
+                    ? react_native_1.Animated.multiply(combinedOffset, new react_native_1.Animated.Value(-size)).interpolate({
+                        inputRange: [-1, 0, 1],
+                        outputRange: [size + pageOffset * size, pageOffset * size, -size + pageOffset * size],
+                    })
+                    : 0;
+                return { transform: [{ translateX }, { translateY }] };
+            case 'fade':
+                return {
+                    opacity: combinedOffset.interpolate({
+                        inputRange: [-1, 0, 1],
+                        outputRange: pageOffset === 0 ? [0, 1, 0] : [1, 0, 1],
+                    }),
+                };
+            case 'push':
+                const pushTranslate = isHorizontal
+                    ? combinedOffset.interpolate({
+                        inputRange: [-1, 0, 1],
+                        outputRange: [size * 0.3, pageOffset * size, -size * 0.3],
+                    })
+                    : combinedOffset.interpolate({
+                        inputRange: [-1, 0, 1],
+                        outputRange: [size * 0.3, pageOffset * size, -size * 0.3],
+                    });
+                const scale = combinedOffset.interpolate({
+                    inputRange: [-1, 0, 1],
+                    outputRange: pageOffset === 0 ? [0.9, 1, 0.9] : [1, 0.9, 1],
+                });
+                return {
+                    transform: [
+                        isHorizontal ? { translateX: pushTranslate } : { translateY: pushTranslate },
+                        { scale },
+                    ],
+                };
+            case 'none':
+            default:
+                return {};
+        }
+    };
+    // Render current page
+    const currentPage = pages[currentIndex];
+    if (!currentPage) {
+        return null;
+    }
+    return (<react_native_1.View style={styles.container} {...panResponder.panHandlers}>
+      <react_native_1.Animated.View style={[styles.page, getTransformStyle(0)]}>
+        {renderComponent === null || renderComponent === void 0 ? void 0 : renderComponent(currentPage)}
+      </react_native_1.Animated.View>
+    </react_native_1.View>);
+};
+exports.NavigationComponent = NavigationComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        overflow: 'hidden',
+    },
+    page: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+    },
+});

package/dist/components/OAuthButtonComponent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * OAuthButtonComponent - React Native
+ *
+ * Social login button with provider branding.
+ * Features:
+ * - Provider-specific branding (Google, Apple, Facebook)
+ * - Loading, success, and error states
+ * - Native bridge delegation for OAuth flow
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+type OAuthProvider = 'google' | 'apple' | 'facebook';
+interface OAuthButtonComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    onOAuthRequest?: (provider: OAuthProvider, componentId: string) => void;
+}
+export declare const OAuthButtonComponent: React.FC<OAuthButtonComponentProps>;
+export {};

package/dist/components/OAuthButtonComponent.js

@@ -0,0 +1,237 @@
+"use strict";
+/**
+ * OAuthButtonComponent - React Native
+ *
+ * Social login button with provider branding.
+ * Features:
+ * - Provider-specific branding (Google, Apple, Facebook)
+ * - Loading, success, and error states
+ * - Native bridge delegation for OAuth flow
+ */
+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.OAuthButtonComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Provider branding
+const PROVIDER_BRANDING = {
+    google: {
+        bg: '#FFFFFF',
+        text: '#1F1F1F',
+        icon: 'G',
+    },
+    apple: {
+        bg: '#000000',
+        text: '#FFFFFF',
+        icon: '',
+    },
+    facebook: {
+        bg: '#1877F2',
+        text: '#FFFFFF',
+        icon: 'f',
+    },
+};
+const OAuthButtonComponent = ({ component, stateManager, isPreviewMode = false, onOAuthRequest, }) => {
+    const props = component.properties;
+    const componentId = component.id;
+    // Configuration
+    const provider = props.provider || 'google';
+    const buttonText = props.buttonText || `Continue with ${provider.charAt(0).toUpperCase() + provider.slice(1)}`;
+    const showIcon = props.showIcon !== false;
+    const iconPosition = props.iconPosition || 'left';
+    const buttonStyle = props.buttonStyle || 'branded';
+    const customBackgroundColor = props.backgroundColor;
+    const customTextColor = props.textColor;
+    const borderColor = props.borderColor || '#D1D5DB';
+    const borderWidth = props.borderWidth || 1;
+    const borderRadius = props.borderRadius || 8;
+    const buttonHeight = props.buttonHeight || 48;
+    const iconSize = props.iconSize || 20;
+    const iconGap = props.iconGap || 12;
+    const fontSize = props.fontSize || 16;
+    const fontWeight = props.fontWeight || '500';
+    const loadingText = props.loadingText || 'Signing in...';
+    const showLoadingSpinner = props.showLoadingSpinner !== false;
+    const errorText = props.errorText || 'Sign in failed. Try again.';
+    const successText = props.successText || 'Signed in!';
+    const [buttonState, setButtonState] = (0, react_1.useState)('idle');
+    const [error, setError] = (0, react_1.useState)(null);
+    // Get provider branding
+    const branding = PROVIDER_BRANDING[provider];
+    // Compute button colors
+    const computedColors = (0, react_1.useMemo)(() => {
+        if (buttonStyle === 'branded') {
+            return {
+                bg: branding.bg,
+                text: branding.text,
+                border: branding.bg,
+            };
+        }
+        if (buttonStyle === 'outline') {
+            return {
+                bg: 'transparent',
+                text: customTextColor || '#1F2937',
+                border: borderColor,
+            };
+        }
+        return {
+            bg: customBackgroundColor || branding.bg,
+            text: customTextColor || branding.text,
+            border: borderColor,
+        };
+    }, [buttonStyle, branding, customBackgroundColor, customTextColor, borderColor]);
+    // Handle button press
+    const handlePress = (0, react_1.useCallback)(() => {
+        if (buttonState !== 'idle')
+            return;
+        setButtonState('loading');
+        setError(null);
+        // Call native OAuth handler
+        if (onOAuthRequest) {
+            onOAuthRequest(provider, componentId);
+        }
+        // Simulate success in preview mode
+        if (isPreviewMode) {
+            setTimeout(() => {
+                setButtonState('success');
+                if (stateManager) {
+                    stateManager.updateState(`element:${componentId}.authenticated`, true);
+                    stateManager.updateState(`element:${componentId}.authResult`, {
+                        userId: 'preview_user_123',
+                        email: 'user@example.com',
+                        displayName: 'Preview User',
+                    });
+                }
+                // Reset after success
+                setTimeout(() => setButtonState('idle'), 2000);
+            }, 1500);
+        }
+    }, [buttonState, provider, componentId, isPreviewMode, onOAuthRequest, stateManager]);
+    // External method to set result (called by native bridge)
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            // Subscribe to auth result events
+            return stateManager.subscribeToState(`element:${componentId}.authComplete`, (result) => {
+                if (result.success) {
+                    setButtonState('success');
+                    stateManager.updateState(`element:${componentId}.authenticated`, true);
+                    stateManager.updateState(`element:${componentId}.authResult`, result.data);
+                    setTimeout(() => setButtonState('idle'), 2000);
+                }
+                else {
+                    setButtonState('error');
+                    setError(result.error || errorText);
+                    stateManager.updateState(`element:${componentId}.authenticated`, false);
+                    stateManager.updateState(`element:${componentId}.authError`, result.error);
+                    setTimeout(() => {
+                        setButtonState('idle');
+                        setError(null);
+                    }, 3000);
+                }
+            });
+        }
+    }, [componentId, stateManager, errorText]);
+    // Get current display text
+    const currentText = (0, react_1.useMemo)(() => {
+        switch (buttonState) {
+            case 'loading':
+                return loadingText;
+            case 'success':
+                return successText;
+            case 'error':
+                return error || errorText;
+            default:
+                return buttonText;
+        }
+    }, [buttonState, loadingText, successText, errorText, error, buttonText]);
+    // Render provider icon
+    const renderIcon = () => {
+        if (!showIcon || buttonState !== 'idle')
+            return null;
+        // Use text-based icons (in real app, use actual SVG or Icon components)
+        const iconText = provider === 'google' ? '🔵' : provider === 'apple' ? '🍎' : '📘';
+        return (<react_native_1.Text style={{ fontSize: iconSize }}>
+        {iconText}
+      </react_native_1.Text>);
+    };
+    return (<react_native_1.TouchableOpacity onPress={handlePress} disabled={buttonState === 'loading' || buttonState === 'success'} activeOpacity={0.8} style={[
+            styles.button,
+            {
+                height: buttonHeight,
+                backgroundColor: computedColors.bg,
+                borderColor: buttonState === 'error' ? '#EF4444' : computedColors.border,
+                borderWidth,
+                borderRadius,
+                flexDirection: iconPosition === 'right' ? 'row-reverse' : 'row',
+                gap: iconGap,
+                opacity: buttonState === 'loading' ? 0.8 : 1,
+            },
+        ]}>
+      {/* Loading Spinner */}
+      {buttonState === 'loading' && showLoadingSpinner && (<react_native_1.ActivityIndicator size="small" color={computedColors.text}/>)}
+      
+      {/* Success Check */}
+      {buttonState === 'success' && (<react_native_1.Text style={{ fontSize: iconSize, color: '#10B981' }}>✓</react_native_1.Text>)}
+      
+      {/* Error Icon */}
+      {buttonState === 'error' && (<react_native_1.Text style={{ fontSize: iconSize, color: '#EF4444' }}>⚠</react_native_1.Text>)}
+      
+      {/* Provider Icon */}
+      {buttonState === 'idle' && renderIcon()}
+      
+      {/* Button Text */}
+      <react_native_1.Text style={[
+            styles.buttonText,
+            {
+                fontSize,
+                fontWeight: fontWeight,
+                color: buttonState === 'error' ? '#EF4444' : computedColors.text,
+            },
+        ]}>
+        {currentText}
+      </react_native_1.Text>
+    </react_native_1.TouchableOpacity>);
+};
+exports.OAuthButtonComponent = OAuthButtonComponent;
+const styles = react_native_1.StyleSheet.create({
+    button: {
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonText: {
+        textAlign: 'center',
+    },
+});

package/dist/components/ProgressLoaderComponent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ProgressLoaderComponent - Native React Native implementation
+ * Supports 5 display modes: spinner, loading-text, bar, circular, loader-set
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface ProgressLoaderComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const ProgressLoaderComponent: React.FC<ProgressLoaderComponentProps>;
+export {};