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

package/src/components/DelayedXComponent.tsx

@@ -0,0 +1,266 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated, TouchableOpacity } from 'react-native';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+
+interface DelayedXComponentProps {
+  component: PaywallComponent;
+  configuration?: PaywallConfiguration;
+  renderChild?: (child: PaywallComponent) => JSX.Element;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  onButtonPress?: (componentId: string, action: string) => void;
+}
+
+type AnimationType = 'fade' | 'scale' | 'slide' | 'none';
+type CountdownStyle = 'circular' | 'text' | 'none';
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export const DelayedXComponent: React.FC<DelayedXComponentProps> = ({
+  component,
+  configuration,
+  renderChild,
+  stateManager,
+  isPreviewMode = false,
+  onButtonPress,
+}) => {
+  const props = component.properties as any;
+  
+  // Properties with full parity
+  const delay = props.delay ?? 3;
+  const showCountdown = props.showCountdown ?? false;
+  const countdownStyle: CountdownStyle = props.countdownStyle ?? 'circular';
+  const animationType: AnimationType = props.animationType ?? 'scale';
+  const disabled = props.disabled ?? false;
+  const position: Position = props.position ?? 'top-right';
+  const buttonSize = props.buttonSize ?? 32;
+  const backgroundColor = props.backgroundColor ?? 'rgba(0, 0, 0, 0.3)';
+  const iconColor = props.iconColor ?? '#FFFFFF';
+  const iconSize = props.iconSize ?? 14;
+
+  const [isVisible, setIsVisible] = useState(!isPreviewMode);
+  const [remainingTime, setRemainingTime] = useState(delay);
+  const [hasError, setHasError] = useState(false);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.8)).current;
+  const slideAnim = useRef(new Animated.Value(-50)).current;
+
+  // Expose state to state manager
+  useEffect(() => {
+    if (stateManager) {
+      stateManager.setState?.(`element:${component.id}.isVisible`, isVisible);
+      stateManager.setState?.(`element:${component.id}.remainingTime`, remainingTime);
+    }
+  }, [isVisible, remainingTime, component.id, stateManager]);
+
+  useEffect(() => {
+    // If disabled, never show
+    if (disabled) {
+      setIsVisible(false);
+      return;
+    }
+
+    // In builder mode, always show content
+    if (!isPreviewMode) {
+      setIsVisible(true);
+      fadeAnim.setValue(1);
+      scaleAnim.setValue(1);
+      slideAnim.setValue(0);
+      return;
+    }
+
+    setIsVisible(false);
+    setRemainingTime(delay);
+    fadeAnim.setValue(0);
+    scaleAnim.setValue(0.8);
+    slideAnim.setValue(-50);
+
+    let countdownInterval: NodeJS.Timeout;
+    let showTimeout: NodeJS.Timeout;
+
+    try {
+      // Countdown timer
+      countdownInterval = setInterval(() => {
+        setRemainingTime((prev: number) => {
+          if (prev <= 1) {
+            clearInterval(countdownInterval);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      // Show after delay with animation
+      showTimeout = setTimeout(() => {
+        setIsVisible(true);
+        runAppearAnimation();
+      }, delay * 1000);
+    } catch (error) {
+      // Error handling: show immediately if timer fails
+      console.warn('DelayedXComponent timer error, showing immediately:', error);
+      setHasError(true);
+      setIsVisible(true);
+      fadeAnim.setValue(1);
+      scaleAnim.setValue(1);
+      slideAnim.setValue(0);
+    }
+
+    return () => {
+      clearInterval(countdownInterval);
+      clearTimeout(showTimeout);
+    };
+  }, [delay, isPreviewMode, disabled]);
+
+  const runAppearAnimation = () => {
+    const animations: Animated.CompositeAnimation[] = [];
+
+    if (animationType === 'fade' || animationType === 'scale') {
+      animations.push(
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
+        })
+      );
+    }
+
+    if (animationType === 'scale') {
+      animations.push(
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 8,
+        })
+      );
+    }
+
+    if (animationType === 'slide') {
+      animations.push(
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        })
+      );
+      animations.push(
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
+        })
+      );
+    }
+
+    if (animationType === 'none') {
+      fadeAnim.setValue(1);
+      scaleAnim.setValue(1);
+      slideAnim.setValue(0);
+    } else {
+      Animated.parallel(animations).start();
+    }
+  };
+
+  const getAnimatedStyle = () => {
+    switch (animationType) {
+      case 'fade':
+        return { opacity: fadeAnim };
+      case 'scale':
+        return {
+          opacity: fadeAnim,
+          transform: [{ scale: scaleAnim }],
+        };
+      case 'slide':
+        return {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }],
+        };
+      case 'none':
+      default:
+        return {};
+    }
+  };
+
+  const getPositionStyle = () => {
+    const base = { position: 'absolute' as const };
+    switch (position) {
+      case 'top-left':
+        return { ...base, top: 16, left: 16 };
+      case 'top-right':
+        return { ...base, top: 16, right: 16 };
+      case 'bottom-left':
+        return { ...base, bottom: 16, left: 16 };
+      case 'bottom-right':
+        return { ...base, bottom: 16, right: 16 };
+      default:
+        return { ...base, top: 16, right: 16 };
+    }
+  };
+
+  const handlePress = () => {
+    onButtonPress?.(component.id, 'close');
+  };
+
+  // If disabled, render nothing
+  if (disabled) {
+    return null;
+  }
+
+  // In builder mode, always render children
+  if (!isPreviewMode) {
+    return (
+      <View style={styles.container}>
+        {component.children?.map((child) => 
+          renderChild ? renderChild(child) : null
+        )}
+      </View>
+    );
+  }
+
+  if (isVisible) {
+    return (
+      <Animated.View style={[styles.container, getAnimatedStyle()]}>
+        {component.children?.map((child) => 
+          renderChild ? renderChild(child) : null
+        )}
+      </Animated.View>
+    );
+  }
+
+  // Render countdown based on style
+  if (showCountdown && countdownStyle !== 'none') {
+    if (countdownStyle === 'circular') {
+      return (
+        <View style={[styles.countdownContainer, { width: buttonSize, height: buttonSize, borderRadius: buttonSize / 2, backgroundColor }]}>
+          <Text style={[styles.countdownText, { color: iconColor, fontSize: iconSize }]}>{remainingTime}</Text>
+        </View>
+      );
+    }
+    
+    if (countdownStyle === 'text') {
+      return (
+        <Text style={[styles.countdownTextOnly, { color: iconColor, fontSize: iconSize }]}>
+          {remainingTime}s
+        </Text>
+      );
+    }
+  }
+
+  return null;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    // Container inherits layout from parent
+  },
+  countdownContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  countdownText: {
+    fontWeight: '600',
+  },
+  countdownTextOnly: {
+    fontWeight: '600',
+    opacity: 0.6,
+  },
+});

package/src/components/DrawerModalComponent.tsx

@@ -0,0 +1,324 @@
+/**
+ * DrawerModalComponent - React Native
+ * 
+ * Slide-in drawer/modal with overlay, animation, and gesture support.
+ * Features:
+ * - State integration for open/close control
+ * - Overlay tap to dismiss
+ * - Pan gesture to dismiss
+ * - Smooth animations
+ */
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  TouchableWithoutFeedback,
+  Animated,
+  PanResponder,
+  Dimensions,
+  StyleSheet,
+  Modal,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface DrawerModalComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  renderComponent?: (component: PaywallComponent) => React.ReactNode;
+}
+
+type Direction = 'left' | 'right' | 'top' | 'bottom';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export const DrawerModalComponent: React.FC<DrawerModalComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  renderComponent,
+}) => {
+  const props = component.properties as any;
+  const componentId = component.id;
+  
+  // Configuration
+  const direction: Direction = props.direction || 'bottom';
+  const showOverlay = props.showOverlay !== false;
+  const overlayColor = props.overlayColor || '#000000';
+  const overlayOpacity = (props.overlayOpacity ?? 50) / 100;
+  const closeOnOverlayClick = props.closeOnOverlayClick !== false;
+  const dismissType = props.dismissType || 'interactive';
+  
+  // Animation settings
+  const animationDuration = props.animationDuration || 300;
+  
+  // Sizing
+  const drawerWidthValue = props.drawerWidth?.value || 85;
+  const drawerWidthUnit = props.drawerWidth?.unit || '%';
+  const drawerHeightValue = props.drawerHeight?.value || 400;
+  const drawerHeightUnit = props.drawerHeight?.unit || 'px';
+  
+  // Calculate actual dimensions
+  const drawerWidth = drawerWidthUnit === '%' 
+    ? (SCREEN_WIDTH * drawerWidthValue / 100) 
+    : drawerWidthValue;
+  const drawerHeight = drawerHeightUnit === '%' 
+    ? (SCREEN_HEIGHT * drawerHeightValue / 100) 
+    : drawerHeightValue;
+  
+  // Corner radius
+  const cornerRadius = props.cornerRadius?.value || 16;
+  
+  // Background
+  const backgroundColor = props.backgroundColor?.color || '#FFFFFF';
+  
+  // State
+  const [isOpen, setIsOpen] = useState(props.isOpen !== false);
+  const animatedValue = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+  const panValue = useRef(new Animated.Value(0)).current;
+  
+  // Get translation values based on direction
+  const getTranslation = useCallback(() => {
+    const isHorizontal = direction === 'left' || direction === 'right';
+    const size = isHorizontal ? drawerWidth : drawerHeight;
+    const multiplier = direction === 'right' || direction === 'bottom' ? 1 : -1;
+    
+    return {
+      isHorizontal,
+      size,
+      multiplier,
+      closedValue: size * multiplier,
+    };
+  }, [direction, drawerWidth, drawerHeight]);
+  
+  // Subscribe to state manager
+  useEffect(() => {
+    if (stateManager) {
+      // Initialize state
+      stateManager.updateState(`element:${componentId}.isOpen`, isOpen);
+      
+      return stateManager.subscribeToState(
+        `element:${componentId}.isOpen`,
+        (value: boolean) => {
+          if (value !== isOpen) {
+            setIsOpen(value);
+          }
+        }
+      );
+    }
+  }, [componentId, stateManager]);
+  
+  // Animate when isOpen changes
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: isOpen ? 1 : 0,
+      duration: animationDuration,
+      useNativeDriver: true,
+    }).start();
+    
+    if (stateManager) {
+      stateManager.updateState(`element:${componentId}.isOpen`, isOpen);
+      stateManager.updateState(`element:${componentId}.direction`, direction);
+    }
+  }, [isOpen, animationDuration, animatedValue, componentId, stateManager, direction]);
+  
+  // Handle close
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    if (stateManager) {
+      stateManager.updateState(`element:${componentId}.isOpen`, false);
+    }
+  }, [componentId, stateManager]);
+  
+  // Pan responder for interactive dismiss
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => dismissType === 'interactive',
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        if (dismissType !== 'interactive') return false;
+        
+        const { dx, dy } = gestureState;
+        const { isHorizontal, multiplier } = getTranslation();
+        
+        // Only respond if dragging in the correct direction
+        if (isHorizontal) {
+          return Math.abs(dx) > Math.abs(dy) && dx * multiplier > 0;
+        } else {
+          return Math.abs(dy) > Math.abs(dx) && dy * multiplier > 0;
+        }
+      },
+      onPanResponderMove: (_, gestureState) => {
+        const { isHorizontal, multiplier } = getTranslation();
+        const delta = isHorizontal ? gestureState.dx : gestureState.dy;
+        
+        // Only allow dragging in dismiss direction
+        if (delta * multiplier > 0) {
+          panValue.setValue(delta);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const { isHorizontal, size, multiplier } = getTranslation();
+        const delta = isHorizontal ? gestureState.dx : gestureState.dy;
+        const velocity = isHorizontal ? gestureState.vx : gestureState.vy;
+        
+        // Dismiss if dragged more than 30% or with sufficient velocity
+        if ((Math.abs(delta) > size * 0.3) || (Math.abs(velocity) > 0.5 && delta * multiplier > 0)) {
+          // Animate out then close
+          Animated.timing(panValue, {
+            toValue: size * multiplier,
+            duration: 200,
+            useNativeDriver: true,
+          }).start(() => {
+            panValue.setValue(0);
+            handleClose();
+          });
+        } else {
+          // Snap back
+          Animated.spring(panValue, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+  
+  // Calculate animated styles
+  const { isHorizontal, closedValue } = getTranslation();
+  
+  const overlayAnimatedStyle = {
+    opacity: animatedValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, overlayOpacity],
+    }),
+  };
+  
+  const drawerBaseTranslate = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [closedValue, 0],
+  });
+  
+  const drawerTransform = isHorizontal
+    ? { translateX: Animated.add(drawerBaseTranslate, panValue) }
+    : { translateY: Animated.add(drawerBaseTranslate, panValue) };
+  
+  // Position styles based on direction
+  const getPositionStyle = (): any => {
+    switch (direction) {
+      case 'left':
+        return { left: 0, top: 0, bottom: 0, width: drawerWidth };
+      case 'right':
+        return { right: 0, top: 0, bottom: 0, width: drawerWidth };
+      case 'top':
+        return { top: 0, left: 0, right: 0, height: drawerHeight };
+      case 'bottom':
+      default:
+        return { bottom: 0, left: 0, right: 0, height: drawerHeight };
+    }
+  };
+  
+  // Border radius based on direction
+  const getBorderRadius = () => {
+    switch (direction) {
+      case 'left':
+        return { borderTopRightRadius: cornerRadius, borderBottomRightRadius: cornerRadius };
+      case 'right':
+        return { borderTopLeftRadius: cornerRadius, borderBottomLeftRadius: cornerRadius };
+      case 'top':
+        return { borderBottomLeftRadius: cornerRadius, borderBottomRightRadius: cornerRadius };
+      case 'bottom':
+      default:
+        return { borderTopLeftRadius: cornerRadius, borderTopRightRadius: cornerRadius };
+    }
+  };
+  
+  // Don't render if not open and animation complete
+  if (!isOpen && (animatedValue as any)._value === 0) {
+    return null;
+  }
+  
+  return (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType="none"
+      onRequestClose={handleClose}
+    >
+      <View style={styles.container}>
+        {/* Overlay */}
+        {showOverlay && (
+          <TouchableWithoutFeedback 
+            onPress={closeOnOverlayClick ? handleClose : undefined}
+          >
+            <Animated.View 
+              style={[
+                styles.overlay, 
+                { backgroundColor: overlayColor },
+                overlayAnimatedStyle,
+              ]} 
+            />
+          </TouchableWithoutFeedback>
+        )}
+        
+        {/* Drawer */}
+        <Animated.View
+          style={[
+            styles.drawer,
+            getPositionStyle(),
+            getBorderRadius(),
+            { backgroundColor },
+            { transform: [drawerTransform] },
+          ]}
+          {...panResponder.panHandlers}
+        >
+          {/* Drag handle for bottom/top drawers */}
+          {dismissType === 'interactive' && (direction === 'bottom' || direction === 'top') && (
+            <View style={styles.dragHandleContainer}>
+              <View style={styles.dragHandle} />
+            </View>
+          )}
+          
+          {/* Children */}
+          <View style={styles.content}>
+            {component.children?.map((child, index) => (
+              <View key={child.id || index}>
+                {renderComponent?.(child)}
+              </View>
+            ))}
+          </View>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  drawer: {
+    position: 'absolute',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 16,
+  },
+  dragHandleContainer: {
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  dragHandle: {
+    width: 36,
+    height: 4,
+    backgroundColor: '#D1D5DB',
+    borderRadius: 2,
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+});

package/src/components/GradientView.tsx

@@ -0,0 +1,129 @@
+/**
+ * GradientView Component
+ * Wraps content with a gradient background using LinearGradient
+ * Falls back to solid color if LinearGradient is not available
+ */
+
+import React, { useMemo } from 'react';
+import { View, ViewStyle, StyleProp } from 'react-native';
+import { GradientConfig, angleToGradientPoints } from '../utils/CSSConverter';
+
+// Try to import LinearGradient - user must have expo-linear-gradient or react-native-linear-gradient installed
+let LinearGradient: any = null;
+
+try {
+  // Try expo-linear-gradient first (most common in Expo projects)
+  LinearGradient = require('expo-linear-gradient').LinearGradient;
+} catch {
+  try {
+    // Fall back to react-native-linear-gradient
+    LinearGradient = require('react-native-linear-gradient').default;
+  } catch {
+    // LinearGradient not available - will use fallback
+    LinearGradient = null;
+  }
+}
+
+export interface GradientViewProps {
+  gradient: GradientConfig;
+  fallbackColor?: string;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  /** Border radius to apply to gradient */
+  borderRadius?: number;
+  /** Border width */
+  borderWidth?: number;
+  /** Border color */
+  borderColor?: string;
+}
+
+/**
+ * GradientView renders a gradient background
+ * Uses LinearGradient if available, falls back to first stop color otherwise
+ */
+export const GradientView: React.FC<GradientViewProps> = ({
+  gradient,
+  fallbackColor,
+  style,
+  children,
+  borderRadius,
+  borderWidth,
+  borderColor,
+}) => {
+  // Calculate gradient colors and positions
+  const { colors, locations, start, end } = useMemo(() => {
+    const colors = gradient.stops.map(stop => stop.color);
+    const locations = gradient.stops.map(stop => {
+      const pos = stop.position ?? 0;
+      return pos <= 1 ? pos : pos / 100;
+    });
+    
+    // Get start/end points based on angle
+    const points = gradient.type === 'linear' 
+      ? angleToGradientPoints(gradient.angle ?? 180)
+      : { start: { x: 0.5, y: 0.5 }, end: { x: 1, y: 1 } }; // Radial approximation
+    
+    return { colors, locations, ...points };
+  }, [gradient]);
+
+  // Container style with border properties
+  const containerStyle: ViewStyle = {
+    borderRadius,
+    borderWidth,
+    borderColor,
+    overflow: 'hidden', // Ensure gradient respects borderRadius
+  };
+
+  // If LinearGradient is available, use it
+  if (LinearGradient && gradient.type === 'linear') {
+    return (
+      <LinearGradient
+        colors={colors}
+        locations={locations}
+        start={start}
+        end={end}
+        style={[style, containerStyle]}
+      >
+        {children}
+      </LinearGradient>
+    );
+  }
+
+  // For radial gradients or if LinearGradient isn't available, use fallback
+  const backgroundColor = fallbackColor || colors[0] || 'transparent';
+  
+  return (
+    <View style={[style, containerStyle, { backgroundColor }]}>
+      {children}
+    </View>
+  );
+};
+
+/**
+ * Check if LinearGradient is available
+ */
+export function isGradientSupported(): boolean {
+  return LinearGradient !== null;
+}
+
+/**
+ * Get gradient background style or fallback color
+ * Use this when you need to decide between GradientView or regular View
+ */
+export function getGradientStyleOrFallback(
+  gradient: GradientConfig | undefined,
+  fallbackColor?: string
+): { useGradient: boolean; backgroundColor: string; gradient?: GradientConfig } {
+  if (!gradient || !LinearGradient) {
+    return {
+      useGradient: false,
+      backgroundColor: fallbackColor || gradient?.stops[0]?.color || 'transparent',
+    };
+  }
+
+  return {
+    useGradient: true,
+    backgroundColor: fallbackColor || gradient.stops[0]?.color || 'transparent',
+    gradient,
+  };
+}