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

package/src/components/OAuthButtonComponent.tsx

@@ -0,0 +1,266 @@
+/**
+ * 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, { useState, useCallback, useEffect, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  NativeEventEmitter,
+  NativeModules,
+  Platform,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+type OAuthProvider = 'google' | 'apple' | 'facebook';
+type ButtonState = 'idle' | 'loading' | 'success' | 'error';
+
+interface OAuthButtonComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  onOAuthRequest?: (provider: OAuthProvider, componentId: string) => void;
+}
+
+// Provider branding
+const PROVIDER_BRANDING: Record<OAuthProvider, { bg: string; text: string; icon: string }> = {
+  google: {
+    bg: '#FFFFFF',
+    text: '#1F1F1F',
+    icon: 'G',
+  },
+  apple: {
+    bg: '#000000',
+    text: '#FFFFFF',
+    icon: '',
+  },
+  facebook: {
+    bg: '#1877F2',
+    text: '#FFFFFF',
+    icon: 'f',
+  },
+};
+
+export const OAuthButtonComponent: React.FC<OAuthButtonComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  onOAuthRequest,
+}) => {
+  const props = component.properties as any;
+  const componentId = component.id;
+  
+  // Configuration
+  const provider: OAuthProvider = 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] = useState<ButtonState>('idle');
+  const [error, setError] = useState<string | null>(null);
+  
+  // Get provider branding
+  const branding = PROVIDER_BRANDING[provider];
+  
+  // Compute button colors
+  const computedColors = 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 = 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)
+  useEffect(() => {
+    if (stateManager) {
+      // Subscribe to auth result events
+      return stateManager.subscribeToState(
+        `element:${componentId}.authComplete`,
+        (result: { success: boolean; error?: string; data?: any }) => {
+          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 = 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 (
+      <Text style={{ fontSize: iconSize }}>
+        {iconText}
+      </Text>
+    );
+  };
+  
+  return (
+    <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 && (
+        <ActivityIndicator size="small" color={computedColors.text} />
+      )}
+      
+      {/* Success Check */}
+      {buttonState === 'success' && (
+        <Text style={{ fontSize: iconSize, color: '#10B981' }}>✓</Text>
+      )}
+      
+      {/* Error Icon */}
+      {buttonState === 'error' && (
+        <Text style={{ fontSize: iconSize, color: '#EF4444' }}>⚠</Text>
+      )}
+      
+      {/* Provider Icon */}
+      {buttonState === 'idle' && renderIcon()}
+      
+      {/* Button Text */}
+      <Text
+        style={[
+          styles.buttonText,
+          {
+            fontSize,
+            fontWeight: fontWeight as any,
+            color: buttonState === 'error' ? '#EF4444' : computedColors.text,
+          },
+        ]}
+      >
+        {currentText}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    textAlign: 'center',
+  },
+});

package/src/components/ProgressLoaderComponent.tsx

@@ -0,0 +1,366 @@
+/**
+ * ProgressLoaderComponent - Native React Native implementation
+ * Supports 5 display modes: spinner, loading-text, bar, circular, loader-set
+ */
+
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  Easing,
+  ViewStyle,
+} from 'react-native';
+import Svg, { Circle, G } from 'react-native-svg';
+import { PaywallComponent } from '../types';
+
+interface ProgressLoaderComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+// Helper to extract color from fill value (handles gradients by taking first stop)
+const getColorFromFill = (fill: any, fallback: string = '#3B82F6'): string => {
+  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' && fill.stops?.length > 0) {
+      return fill.stops[0].color || fallback;
+    }
+    if (fill.color) return fill.color;
+  }
+  
+  return fallback;
+};
+
+// Animated circle component for spinner
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+export const ProgressLoaderComponent: React.FC<ProgressLoaderComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  const displayMode = props.displayMode || 'circular';
+  const progress = props.progress ?? 65;
+  const animated = props.animated !== false;
+  
+  // Spinner properties
+  const spinnerSize = props.spinnerSize ?? 48;
+  const spinnerThickness = props.spinnerThickness ?? 4;
+  const spinnerFill = getColorFromFill(props.spinnerFill, '#3B82F6');
+  const spinnerTrackFill = getColorFromFill(props.spinnerTrackFill, '#E5E7EB');
+  
+  // Bar properties
+  const barHeight = props.barHeight ?? 8;
+  const barFill = getColorFromFill(props.barFill, '#3B82F6');
+  const barTrackFill = getColorFromFill(props.barTrackFill, '#E5E7EB');
+  const barBorderRadius = props.barBorderRadius ?? 4;
+  
+  // Circular properties
+  const circularSize = props.circularSize ?? 80;
+  const circularThickness = props.circularThickness ?? 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 = props.percentageFontSize ?? 18;
+  
+  // Loading text properties
+  const loadingText = props.loadingText || 'Loading...';
+  const loadingTextFill = getColorFromFill(props.loadingTextFill, '#1F2937');
+  const loadingTextSize = props.loadingTextSize ?? 16;
+  
+  // Loader-set properties
+  const loaderCount = props.loaderCount ?? 3;
+  const loaders: { label: string; progress: number }[] = [];
+  for (let i = 1; i <= loaderCount; i++) {
+    loaders.push({
+      label: props[`loader${i}Label`] || `Step ${i}`,
+      progress: props[`loader${i}Progress`] ?? Math.min(100, progress + (i - 1) * 10),
+    });
+  }
+  
+  // Animation values
+  const spinRotation = useRef(new Animated.Value(0)).current;
+  const progressAnim = useRef(new Animated.Value(0)).current;
+  
+  // Spinner rotation animation
+  useEffect(() => {
+    if (displayMode === 'spinner' && animated) {
+      const animation = Animated.loop(
+        Animated.timing(spinRotation, {
+          toValue: 1,
+          duration: 1000,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        })
+      );
+      animation.start();
+      return () => animation.stop();
+    }
+  }, [displayMode, animated, spinRotation]);
+  
+  // Progress animation
+  useEffect(() => {
+    if (animated) {
+      Animated.timing(progressAnim, {
+        toValue: progress,
+        duration: 500,
+        easing: Easing.out(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 (
+      <View style={styles.centered}>
+        <Animated.View style={{ transform: [{ rotate: rotation }] }}>
+          <Svg width={spinnerSize} height={spinnerSize}>
+            <Circle
+              cx={spinnerSize / 2}
+              cy={spinnerSize / 2}
+              r={radius}
+              stroke={spinnerTrackFill}
+              strokeWidth={spinnerThickness}
+              fill="none"
+            />
+            <Circle
+              cx={spinnerSize / 2}
+              cy={spinnerSize / 2}
+              r={radius}
+              stroke={spinnerFill}
+              strokeWidth={spinnerThickness}
+              fill="none"
+              strokeDasharray={`${circumference * 0.25} ${circumference * 0.75}`}
+              strokeLinecap="round"
+            />
+          </Svg>
+        </Animated.View>
+      </View>
+    );
+  };
+  
+  // Render loading text mode
+  const renderLoadingText = () => {
+    return (
+      <View style={styles.centered}>
+        <Text style={[styles.loadingText, { color: loadingTextFill, fontSize: loadingTextSize }]}>
+          {loadingText}
+        </Text>
+      </View>
+    );
+  };
+  
+  // Render bar mode
+  const renderBar = () => {
+    const barWidth = progressAnim.interpolate({
+      inputRange: [0, 100],
+      outputRange: ['0%', '100%'],
+      extrapolate: 'clamp',
+    });
+    
+    return (
+      <View style={styles.barContainer}>
+        <View
+          style={[
+            styles.barTrack,
+            {
+              height: barHeight,
+              backgroundColor: barTrackFill,
+              borderRadius: barBorderRadius,
+            },
+          ]}
+        >
+          <Animated.View
+            style={[
+              styles.barFill,
+              {
+                width: barWidth,
+                backgroundColor: barFill,
+                borderRadius: barBorderRadius,
+              },
+            ]}
+          />
+        </View>
+      </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 (
+      <View style={[styles.centered, { width: circularSize, height: circularSize }]}>
+        <Svg width={circularSize} height={circularSize}>
+          <G rotation="-90" origin={`${circularSize / 2}, ${circularSize / 2}`}>
+            <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"
+            />
+          </G>
+        </Svg>
+        {showPercentage && (
+          <View style={StyleSheet.absoluteFill}>
+            <View style={styles.percentageContainer}>
+              <Text style={[styles.percentageText, { color: percentageFill, fontSize: percentageFontSize }]}>
+                {Math.round(progress)}%
+              </Text>
+            </View>
+          </View>
+        )}
+      </View>
+    );
+  };
+  
+  // Render loader-set mode
+  const renderLoaderSet = () => {
+    return (
+      <View style={styles.loaderSetContainer}>
+        {loaders.map((loader, index) => (
+          <View key={index} style={styles.loaderSetItem}>
+            <View style={styles.loaderSetHeader}>
+              <Text style={styles.loaderSetLabel}>{loader.label}</Text>
+              <Text style={styles.loaderSetProgress}>{loader.progress}%</Text>
+            </View>
+            <View
+              style={[
+                styles.barTrack,
+                {
+                  height: barHeight,
+                  backgroundColor: barTrackFill,
+                  borderRadius: barBorderRadius,
+                },
+              ]}
+            >
+              <View
+                style={[
+                  styles.barFill,
+                  {
+                    width: `${loader.progress}%`,
+                    backgroundColor: barFill,
+                    borderRadius: barBorderRadius,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        ))}
+      </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 <View style={styles.container}>{renderContent()}</View>;
+};
+
+const styles = 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',
+  },
+});