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

package/src/utils/animations.ts

@@ -0,0 +1,232 @@
+/**
+ * Animation utilities for React Native tap behavior transitions
+ */
+
+import { Animated, Easing } from 'react-native';
+
+export type TransitionType = 'none' | 'shrink' | 'grow' | 'fade' | 'bounce' | 'slide' | 'rotate' | 'pulse';
+
+/**
+ * Play a transition animation on an Animated.Value
+ */
+export async function playTransition(
+  scaleValue: Animated.Value,
+  opacityValue: Animated.Value,
+  type: TransitionType,
+  duration: number
+): Promise<void> {
+  if (type === 'none') return;
+
+  return new Promise((resolve) => {
+    const animation = getTransitionAnimation(scaleValue, opacityValue, type, duration);
+    animation.start(() => resolve());
+  });
+}
+
+/**
+ * Get the appropriate animation for a transition type
+ */
+function getTransitionAnimation(
+  scaleValue: Animated.Value,
+  opacityValue: Animated.Value,
+  type: TransitionType,
+  duration: number
+): Animated.CompositeAnimation {
+  const halfDuration = duration / 2;
+  const quarterDuration = duration / 4;
+
+  switch (type) {
+    case 'shrink':
+      return Animated.sequence([
+        Animated.timing(scaleValue, {
+          toValue: 0.95,
+          duration: halfDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleValue, {
+          toValue: 1,
+          duration: halfDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]);
+
+    case 'grow':
+      return Animated.sequence([
+        Animated.timing(scaleValue, {
+          toValue: 1.05,
+          duration: halfDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleValue, {
+          toValue: 1,
+          duration: halfDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]);
+
+    case 'fade':
+      return Animated.sequence([
+        Animated.timing(opacityValue, {
+          toValue: 0.5,
+          duration: halfDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacityValue, {
+          toValue: 1,
+          duration: halfDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]);
+
+    case 'bounce':
+      return Animated.sequence([
+        Animated.timing(scaleValue, {
+          toValue: 0.9,
+          duration: quarterDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.spring(scaleValue, {
+          toValue: 1,
+          friction: 3,
+          tension: 100,
+          useNativeDriver: true,
+        }),
+      ]);
+
+    case 'pulse':
+      return Animated.sequence([
+        Animated.parallel([
+          Animated.timing(scaleValue, {
+            toValue: 1.1,
+            duration: halfDuration,
+            easing: Easing.out(Easing.ease),
+            useNativeDriver: true,
+          }),
+          Animated.timing(opacityValue, {
+            toValue: 0.8,
+            duration: halfDuration,
+            easing: Easing.out(Easing.ease),
+            useNativeDriver: true,
+          }),
+        ]),
+        Animated.parallel([
+          Animated.timing(scaleValue, {
+            toValue: 1,
+            duration: halfDuration,
+            easing: Easing.out(Easing.ease),
+            useNativeDriver: true,
+          }),
+          Animated.timing(opacityValue, {
+            toValue: 1,
+            duration: halfDuration,
+            easing: Easing.out(Easing.ease),
+            useNativeDriver: true,
+          }),
+        ]),
+      ]);
+
+    case 'slide':
+      // For slide, we need a translateX value - this is a simplified version
+      return Animated.sequence([
+        Animated.timing(scaleValue, {
+          toValue: 0.98,
+          duration: quarterDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleValue, {
+          toValue: 1.02,
+          duration: quarterDuration,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleValue, {
+          toValue: 1,
+          duration: quarterDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]);
+
+    case 'rotate':
+      // Note: Rotation requires a different animated value
+      return Animated.sequence([
+        Animated.timing(scaleValue, {
+          toValue: 0.98,
+          duration: quarterDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleValue, {
+          toValue: 1,
+          duration: quarterDuration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]);
+
+    default:
+      return Animated.timing(scaleValue, {
+        toValue: 1,
+        duration: 0,
+        useNativeDriver: true,
+      });
+  }
+}
+
+/**
+ * Create animation values for a button
+ */
+export function createAnimationValues(): {
+  scale: Animated.Value;
+  opacity: Animated.Value;
+  translateX: Animated.Value;
+  rotate: Animated.Value;
+} {
+  return {
+    scale: new Animated.Value(1),
+    opacity: new Animated.Value(1),
+    translateX: new Animated.Value(0),
+    rotate: new Animated.Value(0),
+  };
+}
+
+/**
+ * Reset animation values to default
+ */
+export function resetAnimationValues(values: {
+  scale: Animated.Value;
+  opacity: Animated.Value;
+  translateX: Animated.Value;
+  rotate: Animated.Value;
+}): void {
+  values.scale.setValue(1);
+  values.opacity.setValue(1);
+  values.translateX.setValue(0);
+  values.rotate.setValue(0);
+}
+
+/**
+ * Get animated style from animation values
+ */
+export function getAnimatedStyle(values: {
+  scale: Animated.Value;
+  opacity: Animated.Value;
+  translateX: Animated.Value;
+  rotate: Animated.Value;
+}): {
+  transform: { scale: Animated.Value }[];
+  opacity: Animated.Value;
+} {
+  return {
+    transform: [{ scale: values.scale }],
+    opacity: values.opacity,
+  };
+}

package/src/utils/calendarIntegration.ts

@@ -0,0 +1,113 @@
+import { Platform, PermissionsAndroid } from 'react-native';
+// Note: Requires 'react-native-calendar-events' package to be installed
+
+export interface CalendarEvent {
+  title: string;
+  description?: string;
+  location?: string;
+  startDate: Date;
+  endDate: Date;
+  allDay?: boolean;
+  url?: string;
+  notes?: string;
+}
+
+export interface CalendarPermissionStatus {
+  granted: boolean;
+  canRequest: boolean;
+}
+
+export interface CalendarResult {
+  success: boolean;
+  eventId?: string;
+  error?: string;
+}
+
+/**
+ * Request calendar permissions
+ * Note: Requires react-native-calendar-events package
+ */
+export async function requestCalendarPermission(): Promise<CalendarPermissionStatus> {
+  try {
+    // Dynamic import to avoid errors if package not installed
+    const RNCalendarEvents = require('react-native-calendar-events');
+    
+    if (Platform.OS === 'android' && Platform.Version >= 23) {
+      const granted = await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.WRITE_CALENDAR
+      );
+      return {
+        granted: granted === PermissionsAndroid.RESULTS.GRANTED,
+        canRequest: granted !== PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN,
+      };
+    }
+    
+    const status = await RNCalendarEvents.requestPermissions();
+    return {
+      granted: status === 'authorized',
+      canRequest: status === 'undetermined',
+    };
+  } catch (error) {
+    console.warn('react-native-calendar-events not installed');
+    return { granted: false, canRequest: false };
+  }
+}
+
+/**
+ * Check current calendar permission status
+ */
+export async function checkCalendarPermission(): Promise<CalendarPermissionStatus> {
+  try {
+    const RNCalendarEvents = require('react-native-calendar-events');
+    const status = await RNCalendarEvents.checkPermissions();
+    return {
+      granted: status === 'authorized',
+      canRequest: status === 'undetermined',
+    };
+  } catch (error) {
+    return { granted: false, canRequest: false };
+  }
+}
+
+/**
+ * Add event to calendar
+ */
+export async function addCalendarEvent(event: CalendarEvent): Promise<CalendarResult> {
+  try {
+    const RNCalendarEvents = require('react-native-calendar-events');
+    
+    const permission = await checkCalendarPermission();
+    if (!permission.granted) {
+      return { success: false, error: 'Calendar permission not granted' };
+    }
+    
+    const eventId = await RNCalendarEvents.saveEvent(event.title, {
+      startDate: event.startDate.toISOString(),
+      endDate: event.endDate.toISOString(),
+      description: event.description,
+      location: event.location,
+      allDay: event.allDay,
+      notes: event.notes,
+      url: event.url,
+    });
+    
+    return { success: true, eventId };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to add event',
+    };
+  }
+}
+
+/**
+ * Check if calendar is supported
+ */
+export function isCalendarSupported(): boolean {
+  try {
+    require('react-native-calendar-events');
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/utils/configurationResolver.ts

@@ -0,0 +1,106 @@
+/**
+ * Configuration resolver for React Native
+ * Implements fallback logic for multi-device configurations
+ */
+
+import { PaywallConfiguration } from '../types';
+import { DeviceCategory } from './deviceDetection';
+
+export interface MultiPaywallConfig {
+  phone_portrait?: PaywallConfiguration;
+  phone_landscape?: PaywallConfiguration;
+  xl_phone_portrait?: PaywallConfiguration;
+  xl_phone_landscape?: PaywallConfiguration;
+  tablet_portrait?: PaywallConfiguration;
+  tablet_landscape?: PaywallConfiguration;
+  desktop_web?: PaywallConfiguration;
+}
+
+const DEVICE_GROUPS = {
+  phone_portrait: { group: 'phone', orientation: 'portrait' },
+  phone_landscape: { group: 'phone', orientation: 'landscape' },
+  xl_phone_portrait: { group: 'xl_phone', orientation: 'portrait' },
+  xl_phone_landscape: { group: 'xl_phone', orientation: 'landscape' },
+  tablet_portrait: { group: 'tablet', orientation: 'portrait' },
+  tablet_landscape: { group: 'tablet', orientation: 'landscape' },
+  desktop_web: { group: 'desktop', orientation: 'landscape' },
+};
+
+/**
+ * Find the nearest existing configuration for fallback
+ */
+export function findNearestConfig(
+  multiConfig: MultiPaywallConfig,
+  targetCategory: DeviceCategory
+): DeviceCategory | null {
+  const targetInfo = DEVICE_GROUPS[targetCategory];
+  
+  // Priority 1: Same device group, same orientation
+  const sameGroupSameOrientation = (Object.keys(DEVICE_GROUPS) as DeviceCategory[])
+    .find(cat => 
+      cat !== targetCategory &&
+      DEVICE_GROUPS[cat].group === targetInfo.group &&
+      DEVICE_GROUPS[cat].orientation === targetInfo.orientation &&
+      multiConfig[cat]
+    );
+  
+  if (sameGroupSameOrientation) return sameGroupSameOrientation;
+  
+  // Priority 2: Same device group, different orientation
+  const sameGroupDiffOrientation = (Object.keys(DEVICE_GROUPS) as DeviceCategory[])
+    .find(cat => 
+      cat !== targetCategory &&
+      DEVICE_GROUPS[cat].group === targetInfo.group &&
+      multiConfig[cat]
+    );
+  
+  if (sameGroupDiffOrientation) return sameGroupDiffOrientation;
+  
+  // Priority 3: Fallback to smaller device in same orientation
+  if (targetInfo.group === 'xl_phone') {
+    const phoneEquivalent = targetInfo.orientation === 'portrait' 
+      ? 'phone_portrait' 
+      : 'phone_landscape';
+    if (multiConfig[phoneEquivalent]) return phoneEquivalent;
+  }
+  
+  if (targetInfo.group === 'tablet') {
+    const xlPhoneEquivalent = targetInfo.orientation === 'portrait'
+      ? 'xl_phone_portrait'
+      : 'xl_phone_landscape';
+    if (multiConfig[xlPhoneEquivalent]) return xlPhoneEquivalent;
+    
+    const phoneEquivalent = targetInfo.orientation === 'portrait'
+      ? 'phone_portrait'
+      : 'phone_landscape';
+    if (multiConfig[phoneEquivalent]) return phoneEquivalent;
+  }
+  
+  // Priority 4: Phone portrait (base config - ALWAYS exists)
+  if (multiConfig.phone_portrait && targetCategory !== 'phone_portrait') {
+    return 'phone_portrait';
+  }
+  
+  return null;
+}
+
+/**
+ * Resolve the appropriate configuration with fallback logic
+ */
+export function resolveConfiguration(
+  multiConfig: MultiPaywallConfig,
+  targetCategory: DeviceCategory
+): PaywallConfiguration | null {
+  // Try to get specific configuration
+  let config = multiConfig[targetCategory];
+  
+  // If not found, use fallback logic
+  if (!config) {
+    const nearestCategory = findNearestConfig(multiConfig, targetCategory);
+    if (nearestCategory) {
+      config = multiConfig[nearestCategory];
+    }
+  }
+  
+  return config || null;
+}

package/src/utils/deviceDetection.ts

@@ -0,0 +1,83 @@
+/**
+ * Device detection utilities for React Native
+ */
+
+import { Dimensions, Platform } from 'react-native';
+
+export type DeviceCategory =
+  | 'phone_portrait'
+  | 'phone_landscape'
+  | 'xl_phone_portrait'
+  | 'xl_phone_landscape'
+  | 'tablet_portrait'
+  | 'tablet_landscape'
+  | 'desktop_web';
+
+export interface DeviceCategoryInfo {
+  category: DeviceCategory;
+  label: string;
+  dimensions: { width: number; height: number };
+  orientation: 'portrait' | 'landscape';
+  group: 'phone' | 'xl_phone' | 'tablet' | 'desktop';
+  osName: string;
+  osVersion: string;
+}
+
+/**
+ * Detect device category based on current dimensions
+ */
+export function detectDeviceCategory(): DeviceCategory {
+  const { width, height } = Dimensions.get('window');
+  const isLandscape = width > height;
+  
+  // Desktop web (viewport >= 1200px)
+  if (width >= 1200) return 'desktop_web';
+  
+  // Tablet range (700-1200px)
+  if (width >= 700 && width < 1200) {
+    return isLandscape ? 'tablet_landscape' : 'tablet_portrait';
+  }
+  
+  // XL Phone range (430-700px width)
+  if (width >= 430 && width < 700) {
+    return isLandscape ? 'xl_phone_landscape' : 'xl_phone_portrait';
+  }
+  
+  // Standard phone (<430px)
+  return isLandscape ? 'phone_landscape' : 'phone_portrait';
+}
+
+/**
+ * Get device info including OS details
+ */
+export function getDeviceInfo() {
+  const { width, height } = Dimensions.get('window');
+  const category = detectDeviceCategory();
+  
+  // Get OS name (capitalize first letter)
+  const osName = Platform.OS === 'ios' ? 'iOS' : Platform.OS === 'android' ? 'Android' : 'Web';
+  
+  // Get OS version
+  const osVersion = String(Platform.Version || 'Unknown');
+  
+  return {
+    width,
+    height,
+    category,
+    platform: Platform.OS,
+    osName,
+    osVersion,
+    isTablet: category.includes('tablet'),
+    isPhone: category.includes('phone'),
+    orientation: width > height ? 'landscape' : 'portrait',
+  };
+}
+
+/**
+ * Check if device is a tablet
+ */
+export function isTablet(): boolean {
+  const { width, height } = Dimensions.get('window');
+  const minDimension = Math.min(width, height);
+  return minDimension >= 700;
+}

package/src/utils/hapticFeedback.ts

@@ -0,0 +1,55 @@
+/**
+ * Haptic feedback utilities for React Native
+ */
+
+import { Platform, Vibration } from 'react-native';
+
+export type HapticType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error';
+
+/**
+ * Trigger haptic feedback
+ * Phase 4.5: Integrated with paywall action execution
+ */
+export function triggerHaptic(type: HapticType, intensity: number = 1.0): void {
+  if (Platform.OS === 'ios') {
+    // iOS uses native haptic feedback (requires expo-haptics or react-native-haptic-feedback)
+    // For now, use basic vibration
+    const duration = getHapticDuration(type, intensity);
+    Vibration.vibrate(duration);
+  } else if (Platform.OS === 'android') {
+    // Android vibration
+    const duration = getHapticDuration(type, intensity);
+    Vibration.vibrate(duration);
+  }
+}
+
+/**
+ * Trigger haptic from WebView action (Phase 4.5)
+ */
+export function triggerHapticFromAction(hapticType?: string): void {
+  const type = (hapticType || 'medium') as HapticType;
+  triggerHaptic(type);
+}
+
+/**
+ * Get vibration duration for haptic type
+ */
+function getHapticDuration(type: HapticType, intensity: number): number {
+  const baseDurations: Record<HapticType, number> = {
+    light: 10,
+    medium: 20,
+    heavy: 40,
+    success: 15,
+    warning: 25,
+    error: 30,
+  };
+  
+  return Math.round(baseDurations[type] * intensity);
+}
+
+/**
+ * Check if haptic feedback is available
+ */
+export function isHapticAvailable(): boolean {
+  return Platform.OS === 'ios' || Platform.OS === 'android';
+}

package/src/utils/iconMapper.ts

@@ -0,0 +1,102 @@
+import * as LucideIcons from 'lucide-react-native';
+
+/**
+ * React Native uses Lucide directly - no mapping needed
+ * This file exists for consistency with other platforms
+ * and to provide a unified API
+ */
+
+export interface IconMapperResult {
+  component: React.ComponentType<any> | null;
+  fallback: string | null;
+}
+
+/**
+ * Get Lucide icon component by name
+ * React Native renders Lucide icons directly (best cross-platform solution for RN)
+ */
+export function getLucideIcon(iconName: string): IconMapperResult {
+  const icons = LucideIcons as any;
+  const IconComponent = icons[iconName];
+  
+  if (IconComponent && typeof IconComponent === 'function') {
+    return {
+      component: IconComponent,
+      fallback: null,
+    };
+  }
+  
+  // Return fallback
+  return {
+    component: null,
+    fallback: iconName,
+  };
+}
+
+/**
+ * Check if icon exists in Lucide library
+ */
+export function hasLucideIcon(iconName: string): boolean {
+  const icons = LucideIcons as any;
+  return iconName in icons && typeof icons[iconName] === 'function';
+}
+
+/**
+ * Get all available Lucide icon names
+ */
+export function getAvailableIcons(): string[] {
+  const icons = LucideIcons as any;
+  return Object.keys(icons).filter(key => typeof icons[key] === 'function');
+}
+
+/**
+ * Recommended cross-platform icons (guaranteed to look good everywhere)
+ */
+export const RECOMMENDED_ICONS = [
+  // Core Navigation & Actions
+  'Star', 'Heart', 'Home', 'Settings', 'User', 'Search', 'Menu', 'X', 'Check',
+  'ChevronRight', 'ChevronLeft', 'ChevronDown', 'ChevronUp', 'Plus', 'Minus',
+  'Edit', 'Trash', 'Calendar', 'Clock', 'Mail', 'Phone', 'Camera', 'Image',
+  'Video', 'Music', 'Download', 'Upload', 'Share', 'Info', 'AlertTriangle',
+  'Lock', 'Eye', 'Bell', 'ShoppingCart', 'Gift', 'Globe', 'ArrowRight', 'ArrowLeft',
+  
+  // Forms & Controls (expanded)
+  'CheckSquare', 'Square', 'ToggleRight', 'Bold', 'Italic', 'AlignLeft',
+  'AlignCenter', 'AlignRight', 'List', 'Palette', 'Crop', 'RotateCw',
+  
+  // Arrows & Navigation (expanded)
+  'ArrowUp', 'ArrowDown', 'ArrowUpRight', 'ChevronsRight', 'Repeat', 'Undo',
+  'Redo', 'Navigation', 'Compass', 'Expand', 'Minimize',
+  
+  // E-commerce (expanded)
+  'Store', 'ShoppingBag', 'Wallet', 'CreditCard', 'Package', 'Truck',
+  'Receipt', 'Barcode', 'QrCode', 'Tag', 'Percent',
+  
+  // Communication (expanded)
+  'MessageCircle', 'MessageSquare', 'MailOpen', 'Inbox', 'Send', 'Reply',
+  'Phone', 'Mic', 'Users', 'UserPlus', 'Contact', 'Award',
+  
+  // Files & Documents (expanded)
+  'File', 'FileText', 'Folder', 'FolderOpen', 'Save', 'Copy', 'Clipboard',
+  'Paperclip', 'Link', 'Database',
+  
+  // Media (expanded)
+  'Play', 'Pause', 'SkipForward', 'Volume2', 'Film', 'Radio', 'Tv',
+  
+  // Charts & Data (expanded)
+  'BarChart', 'LineChart', 'PieChart', 'Activity', 'TrendingUp', 'TrendingDown',
+  'Zap', 'Signal', 'Network',
+  
+  // Transportation
+  'Car', 'Bus', 'Train', 'Plane', 'Bike', 'MapPin', 'Map',
+  
+  // Health & Lifestyle
+  'Heart', 'Pill', 'Coffee', 'Pizza', 'Leaf', 'Accessibility',
+  
+  // Weather
+  'Sun', 'Moon', 'Cloud', 'CloudRain', 'CloudSnow', 'Droplet', 'Wind',
+  
+  // System & Miscellaneous
+  'Grid', 'Layers', 'Filter', 'RefreshCw', 'Code', 'Power', 'Battery',
+  'Sparkles', 'Crown', 'Shield', 'Timer', 'Flag', 'Target',
+];