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

package/src/components/ConfettiComponent.tsx

@@ -0,0 +1,178 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { View, StyleSheet, Animated, Dimensions } from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface ConfettiComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+interface ConfettiPiece {
+  id: number;
+  x: Animated.Value;
+  y: Animated.Value;
+  rotation: Animated.Value;
+  color: string;
+  size: number;
+  shape: 'square' | 'circle';
+}
+
+// Color presets for confetti
+const COLOR_PRESETS: Record<string, string[]> = {
+  celebration: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8'],
+  rainbow: ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3'],
+  metallic: ['#FFD700', '#C0C0C0', '#DAA520', '#B8860B', '#E8E8E8'],
+  pastel: ['#FFB3BA', '#BAFFC9', '#BAE1FF', '#FFFFBA', '#FFDFBA'],
+  brand: ['#6366F1', '#8B5CF6', '#A855F7', '#D946EF'],
+};
+
+export const ConfettiComponent: React.FC<ConfettiComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  const pieceCount = props.pieceCount ?? 150;
+  const trigger = props.trigger ?? 'onLoad';
+  const duration = props.duration ?? 3000;
+  const recycle = props.recycle ?? false;
+  const shape = props.shape ?? 'mix';
+  const gravity = props.gravity ?? 1;
+  const colorPreset = props.colorPreset ?? 'celebration';
+  const customColors = props.customColors;
+
+  const [pieces, setPieces] = useState<ConfettiPiece[]>([]);
+  const recycleTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const { width, height } = Dimensions.get('window');
+
+  // Get colors based on preset or custom
+  const getColors = useCallback((): string[] => {
+    if (colorPreset === 'custom' && customColors) {
+      return customColors.split(',').map((c: string) => c.trim()).filter((c: string) => c.startsWith('#'));
+    }
+    return COLOR_PRESETS[colorPreset] || COLOR_PRESETS.celebration;
+  }, [colorPreset, customColors]);
+
+  const createPieces = useCallback((): ConfettiPiece[] => {
+    const colors = getColors();
+    return Array.from({ length: pieceCount }, (_, i) => ({
+      id: i,
+      x: new Animated.Value(Math.random() * width),
+      y: new Animated.Value(-50 - Math.random() * 100),
+      rotation: new Animated.Value(0),
+      color: colors[Math.floor(Math.random() * colors.length)],
+      size: 8 + Math.random() * 8,
+      shape: shape === 'mix' 
+        ? (Math.random() > 0.5 ? 'square' : 'circle') 
+        : shape as 'square' | 'circle',
+    }));
+  }, [pieceCount, width, shape, getColors]);
+
+  const fireConfetti = useCallback(() => {
+    const newPieces = createPieces();
+    setPieces(newPieces);
+
+    newPieces.forEach((piece) => {
+      const fallDuration = (duration / gravity) * (0.8 + Math.random() * 0.4);
+      const drift = (Math.random() - 0.5) * 200;
+
+      Animated.parallel([
+        Animated.timing(piece.y, {
+          toValue: height + 50,
+          duration: fallDuration,
+          useNativeDriver: true,
+        }),
+        Animated.timing(piece.x, {
+          toValue: (piece.x as any)._value + drift,
+          duration: fallDuration,
+          useNativeDriver: true,
+        }),
+        Animated.timing(piece.rotation, {
+          toValue: 360 * (2 + Math.random() * 3),
+          duration: fallDuration,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    });
+
+    if (recycle) {
+      recycleTimerRef.current = setTimeout(fireConfetti, duration);
+    }
+  }, [createPieces, duration, gravity, height, recycle]);
+
+  // Subscribe to manual trigger state changes
+  useEffect(() => {
+    if (!stateManager || trigger !== 'manual') return;
+
+    const stateKey = `element:${component.id}.fire`;
+    
+    const unsubscribe = stateManager.subscribe(stateKey, (value: boolean) => {
+      if (value === true) {
+        fireConfetti();
+        // Reset the state after firing
+        setTimeout(() => {
+          stateManager.setState(stateKey, false);
+        }, 50);
+      }
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [stateManager, trigger, component.id, fireConfetti]);
+
+  useEffect(() => {
+    if (trigger === 'onLoad') {
+      const timer = setTimeout(fireConfetti, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [trigger, fireConfetti]);
+
+  useEffect(() => {
+    return () => {
+      if (recycleTimerRef.current) {
+        clearTimeout(recycleTimerRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <View style={styles.container} pointerEvents="none">
+      {pieces.map((piece) => (
+        <Animated.View
+          key={piece.id}
+          style={[
+            styles.piece,
+            {
+              width: piece.size,
+              height: piece.size,
+              backgroundColor: piece.color,
+              borderRadius: piece.shape === 'circle' ? piece.size / 2 : 0,
+              transform: [
+                { translateX: piece.x },
+                { translateY: piece.y },
+                {
+                  rotate: piece.rotation.interpolate({
+                    inputRange: [0, 360],
+                    outputRange: ['0deg', '360deg'],
+                  }),
+                },
+              ],
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+  piece: {
+    position: 'absolute',
+  },
+});

package/src/components/CountdownComponent.tsx

@@ -0,0 +1,454 @@
+/**
+ * Countdown Component - Native React Native implementation
+ * Supports variant (boxed/text/digital/flip), styling, and state manager integration
+ */
+
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+
+interface CountdownComponentProps {
+  component: PaywallComponent;
+  configuration: PaywallConfiguration;
+  style?: ViewStyle;
+  onComplete?: () => void;
+  onStateChange?: (key: string, value: any) => void;
+}
+
+interface TimeRemaining {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  totalSeconds: number;
+  isExpired: boolean;
+}
+
+export const CountdownComponent: React.FC<CountdownComponentProps> = ({
+  component,
+  configuration,
+  style,
+  onComplete,
+  onStateChange,
+}) => {
+  const properties = component.properties || {};
+  
+  // MARK: - Parse Properties
+  const endTimeStr = (properties.endTime as string) || '';
+  const durationSeconds = (properties.duration as number) || 0;
+  const format = (properties.format as string) || 'digital';
+  
+  // Determine variant from explicit value or map from format
+  const variant = useMemo(() => {
+    if (properties.variant) return properties.variant as string;
+    switch (format) {
+      case 'digital':
+      case 'digital_full':
+      case 'compact':
+        return 'boxed';
+      case 'short':
+      case 'long':
+        return 'text';
+      default:
+        return 'boxed';
+    }
+  }, [properties.variant, format]);
+  
+  const showDays = properties.showDays !== false;
+  const showHours = properties.showHours !== false;
+  const showMinutes = properties.showMinutes !== false;
+  const showSeconds = properties.showSeconds !== false;
+  const showLabels = properties.showLabels === true;
+  const separator = (properties.separator as string) || ':';
+  const labelStyle = (properties.labelStyle as string) || 'short';
+  
+  // MARK: - Styling Properties
+  const fontSize = (properties.fontSize as number) || 32;
+  const textColor = (properties.textColor as string) || undefined;  // Fixed: use textColor not color
+  const backgroundColor = (properties.backgroundColor as string) || '#F3F4F6';
+  const separatorColor = (properties.separatorColor as string) || textColor;
+  const hasExplicitSeparatorColor = !!properties.separatorColor;
+  const unitColor = (properties.unitColor as string) || '#9CA3AF';
+  const fontWeight = (properties.fontWeight as string) || 'bold';
+  const fontFamily = (properties.fontFamily as string) || 'monospace';
+  const padding = (properties.padding as number) || 12;
+  const gap = (properties.gap as number) || 8;
+  const borderRadius = (properties.borderRadius as number) || 8;
+  const expiredText = (properties.expiredText as string) || '00:00:00';
+  
+  // MARK: - Calculate Target Time
+  const targetTime = useMemo(() => {
+    const trimmedEndTime = endTimeStr.trim();
+    
+    if (trimmedEndTime) {
+      // Handle relative time (+7d, +1h, +30m, +60s)
+      if (trimmedEndTime.startsWith('+')) {
+        const valueStr = trimmedEndTime.slice(1, -1);
+        const unit = trimmedEndTime.slice(-1);
+        const value = parseInt(valueStr, 10) || 0;
+        
+        let multiplier = 1000; // default seconds
+        switch (unit) {
+          case 'd': multiplier = 86400000; break;
+          case 'h': multiplier = 3600000; break;
+          case 'm': multiplier = 60000; break;
+          case 's': multiplier = 1000; break;
+        }
+        return Date.now() + (value * multiplier);
+      }
+      
+      // Handle ISO date string
+      const parsed = Date.parse(trimmedEndTime);
+      if (!isNaN(parsed)) {
+        return parsed;
+      }
+    }
+    
+    // Use duration if specified
+    if (durationSeconds > 0) {
+      return Date.now() + (durationSeconds * 1000);
+    }
+    
+    // Default 1 hour
+    return Date.now() + 3600000;
+  }, [endTimeStr, durationSeconds]);
+  
+  // State for remaining time
+  const [timeRemaining, setTimeRemaining] = useState<TimeRemaining>(() => 
+    calculateTimeRemaining(targetTime)
+  );
+  
+  // Calculate time remaining
+  function calculateTimeRemaining(target: number): TimeRemaining {
+    const now = Date.now();
+    const diff = Math.max(0, target - now);
+    const totalSeconds = Math.floor(diff / 1000);
+    
+    return {
+      days: Math.floor(totalSeconds / 86400),
+      hours: Math.floor((totalSeconds % 86400) / 3600),
+      minutes: Math.floor((totalSeconds % 3600) / 60),
+      seconds: totalSeconds % 60,
+      totalSeconds,
+      isExpired: diff <= 0,
+    };
+  }
+  
+  // Timer effect
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const remaining = calculateTimeRemaining(targetTime);
+      setTimeRemaining(remaining);
+      
+      // Publish state changes
+      onStateChange?.(`element:${component.id}.remainingSeconds`, remaining.totalSeconds);
+      onStateChange?.(`element:${component.id}.isExpired`, remaining.isExpired);
+      
+      if (remaining.isExpired) {
+        clearInterval(interval);
+        onComplete?.();
+      }
+    }, 1000);
+    
+    // Publish initial state
+    onStateChange?.(`element:${component.id}.remainingSeconds`, timeRemaining.totalSeconds);
+    onStateChange?.(`element:${component.id}.isExpired`, timeRemaining.isExpired);
+    
+    return () => clearInterval(interval);
+  }, [targetTime, onComplete, onStateChange, component.id]);
+  
+  // MARK: - Label Formatting
+  const getLabelForUnit = useCallback((unit: string): string => {
+    switch (labelStyle) {
+      case 'full':
+        switch (unit) {
+          case 'days': return 'Days';
+          case 'hours': return 'Hours';
+          case 'minutes': return 'Minutes';
+          case 'seconds': return 'Seconds';
+          default: return unit;
+        }
+      case 'none':
+        return '';
+      default: // 'short'
+        switch (unit) {
+          case 'days': return 'D';
+          case 'hours': return 'H';
+          case 'minutes': return 'M';
+          case 'seconds': return 'S';
+          default: return unit.charAt(0).toUpperCase();
+        }
+    }
+  }, [labelStyle]);
+  
+  // Format the display string for digital variant
+  const formattedTime = useMemo(() => {
+    const { days, hours, minutes, seconds, totalSeconds, isExpired } = timeRemaining;
+    
+    if (isExpired) return expiredText;
+    
+    const pad = (n: number) => n.toString().padStart(2, '0');
+    
+    switch (format) {
+      case 'digital_full':
+        return `${pad(days)}${separator}${pad(hours)}${separator}${pad(minutes)}${separator}${pad(seconds)}`;
+      
+      case 'digital':
+        if (days > 0) {
+          return `${pad(days)}${separator}${pad(hours)}${separator}${pad(minutes)}${separator}${pad(seconds)}`;
+        }
+        return `${pad(hours)}${separator}${pad(minutes)}${separator}${pad(seconds)}`;
+      
+      case 'short': {
+        const parts: string[] = [];
+        if (showDays && days > 0) parts.push(`${days}d`);
+        if (showHours) parts.push(`${hours}h`);
+        if (showMinutes) parts.push(`${minutes}m`);
+        if (showSeconds) parts.push(`${seconds}s`);
+        return parts.join(' ');
+      }
+      
+      case 'long': {
+        const parts: string[] = [];
+        if (showDays && days > 0) parts.push(`${days} days`);
+        if (showHours) parts.push(`${hours} hours`);
+        if (showMinutes) parts.push(`${minutes} minutes`);
+        if (showSeconds) parts.push(`${seconds} seconds`);
+        return parts.join(', ');
+      }
+      
+      case 'compact':
+        return `${days}:${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+      
+      case 'days_only':
+        return `${days}`;
+      
+      case 'hours_only':
+        return `${days * 24 + hours}`;
+      
+      case 'minutes_only':
+        return `${(days * 24 + hours) * 60 + minutes}`;
+      
+      case 'seconds_only':
+        return `${totalSeconds}`;
+      
+      default:
+        return `${pad(hours)}${separator}${pad(minutes)}${separator}${pad(seconds)}`;
+    }
+  }, [timeRemaining, format, separator, showDays, showHours, showMinutes, showSeconds, expiredText]);
+  
+  // MARK: - Font Weight Helper
+  const getFontWeight = useCallback((): TextStyle['fontWeight'] => {
+    switch (fontWeight) {
+      case '100':
+      case 'thin': return '100';
+      case '200':
+      case 'extraLight': return '200';
+      case '300':
+      case 'light': return '300';
+      case '400':
+      case 'normal':
+      case 'regular': return '400';
+      case '500':
+      case 'medium': return '500';
+      case '600':
+      case 'semibold': return '600';
+      case '700':
+      case 'bold': return '700';
+      case '800':
+      case 'extraBold': return '800';
+      case '900':
+      case 'black': return '900';
+      default: return 'bold';
+    }
+  }, [fontWeight]);
+  
+  // MARK: - Render Helpers
+  
+  const renderTimeUnitBox = (value: number, label: string) => (
+    <View style={styles.unitContainer}>
+      <View style={[
+        styles.unitBox, 
+        { 
+          backgroundColor,
+          borderRadius,
+          paddingHorizontal: padding,
+          paddingVertical: padding * 0.67,
+        }
+      ]}>
+        <Text style={[
+          styles.unitValue,
+          {
+            fontSize,
+            fontWeight: getFontWeight(),
+            fontFamily,
+            ...(textColor && { color: textColor }),
+          }
+        ]}>
+          {value.toString().padStart(2, '0')}
+        </Text>
+      </View>
+      {showLabels && label && (
+        <Text style={[styles.unitLabel, { color: unitColor, fontSize: fontSize * 0.3 }]}>
+          {label}
+        </Text>
+      )}
+    </View>
+  );
+  
+  const renderSeparator = () => (
+    <Text style={[
+      styles.separator,
+      {
+        fontSize,
+        fontWeight: getFontWeight(),
+        fontFamily,
+        color: separatorColor || textColor,
+        ...(!hasExplicitSeparatorColor && { opacity: 0.6 }),
+      }
+    ]}>
+      {separator}
+    </Text>
+  );
+  
+  const renderTimeUnitText = (value: number, label: string) => (
+    <View style={styles.textUnit}>
+      <Text style={[
+        styles.textValue,
+        {
+          fontSize,
+          fontWeight: getFontWeight(),
+          fontFamily,
+          ...(textColor && { color: textColor }),
+        }
+      ]}>
+        {value}
+      </Text>
+      <Text style={[styles.textLabel, { color: unitColor, fontSize: fontSize * 0.5 }]}>
+        {' '}{label}
+      </Text>
+    </View>
+  );
+  
+  // MARK: - Variant Renderers
+  
+  const renderBoxedVariant = () => {
+    const { days, hours, minutes, seconds } = timeRemaining;
+    
+    return (
+      <View style={[styles.boxedContainer, { gap }, style]}>
+        {showDays && days > 0 && (
+          <>
+            {renderTimeUnitBox(days, getLabelForUnit('days'))}
+            {renderSeparator()}
+          </>
+        )}
+        {showHours && (
+          <>
+            {renderTimeUnitBox(hours, getLabelForUnit('hours'))}
+            {renderSeparator()}
+          </>
+        )}
+        {showMinutes && (
+          <>
+            {renderTimeUnitBox(minutes, getLabelForUnit('minutes'))}
+            {showSeconds && renderSeparator()}
+          </>
+        )}
+        {showSeconds && renderTimeUnitBox(seconds, getLabelForUnit('seconds'))}
+      </View>
+    );
+  };
+  
+  const renderTextVariant = () => {
+    const { days, hours, minutes, seconds } = timeRemaining;
+    
+    return (
+      <View style={[styles.textContainer, { gap: gap * 2 }, style]}>
+        {showDays && days > 0 && renderTimeUnitText(days, getLabelForUnit('days'))}
+        {showHours && renderTimeUnitText(hours, getLabelForUnit('hours'))}
+        {showMinutes && renderTimeUnitText(minutes, getLabelForUnit('minutes'))}
+        {showSeconds && renderTimeUnitText(seconds, getLabelForUnit('seconds'))}
+      </View>
+    );
+  };
+  
+  const renderDigitalVariant = () => (
+    <View style={[styles.container, style]}>
+      <Text style={[
+        styles.digitalText,
+        {
+          fontSize,
+          fontWeight: getFontWeight(),
+          fontFamily,
+          ...(textColor && { color: textColor }),
+        }
+      ]}>
+        {formattedTime}
+      </Text>
+    </View>
+  );
+  
+  // MARK: - Main Render
+  
+  switch (variant) {
+    case 'boxed':
+      return renderBoxedVariant();
+    case 'text':
+      return renderTextVariant();
+    case 'flip':
+      // Flip uses boxed layout (full flip animation would need more work)
+      return renderBoxedVariant();
+    default:
+      return renderDigitalVariant();
+  }
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  boxedContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  unitContainer: {
+    alignItems: 'center',
+  },
+  unitBox: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  unitValue: {
+    textAlign: 'center',
+  },
+  unitLabel: {
+    marginTop: 4,
+    textAlign: 'center',
+  },
+  separator: {
+    marginHorizontal: 2,
+  },
+  textUnit: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  textValue: {
+    textAlign: 'center',
+  },
+  textLabel: {
+    marginBottom: 2,
+  },
+  digitalText: {
+    textAlign: 'center',
+  },
+});
+
+export default CountdownComponent;