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

package/src/components/AccordionComponent.tsx

@@ -0,0 +1,213 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+// Enable LayoutAnimation on Android
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+interface AccordionComponentProps {
+  component: PaywallComponent;
+  renderChild: (child: PaywallComponent) => React.ReactNode;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+export const AccordionComponent: React.FC<AccordionComponentProps> = ({
+  component,
+  renderChild,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  const allowMultiple = props.allowMultiple ?? false;
+  const defaultExpanded = props.defaultExpandedIndex ?? -1;
+  const animated = props.animated !== false;
+  const gap = props.gap ?? 4;
+  const headerPadding = props.headerPadding ?? 12;
+  const contentPadding = props.contentPadding ?? 12;
+  const opacity = props.opacity ?? 1;
+  const headerBackground = props.headerBackground ?? '#f5f5f5';
+
+  const [expandedIndexes, setExpandedIndexes] = useState<number[]>(
+    defaultExpanded >= 0 ? [defaultExpanded] : []
+  );
+
+  // Get items from children only
+  const items: PaywallComponent[] = component.children || [];
+
+  // Register initial state
+  useEffect(() => {
+    if (stateManager) {
+      const currentIndex = expandedIndexes.length > 0 ? expandedIndexes[0] : -1;
+      stateManager.updateState(`element:${component.id}.currentIndex`, currentIndex);
+      stateManager.updateState(`element:${component.id}.expandedIndexes`, expandedIndexes);
+      stateManager.updateState(`element:${component.id}.totalItems`, items.length);
+    }
+  }, []);
+
+  // Subscribe to external state changes
+  useEffect(() => {
+    if (stateManager) {
+      const unsubscribe = stateManager.subscribeToState(
+        `element:${component.id}.currentIndex`,
+        (value: number) => {
+          const current = expandedIndexes.length > 0 ? expandedIndexes[0] : -1;
+          if (value !== current) {
+            if (animated) {
+              LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+            }
+            setExpandedIndexes(value >= 0 ? [value] : []);
+          }
+        }
+      );
+      
+      const unsubscribeMultiple = stateManager.subscribeToState(
+        `element:${component.id}.expandedIndexes`,
+        (value: number[]) => {
+          if (Array.isArray(value) && allowMultiple) {
+            if (animated) {
+              LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+            }
+            setExpandedIndexes(value);
+          }
+        }
+      );
+      
+      return () => {
+        unsubscribe?.();
+        unsubscribeMultiple?.();
+      };
+    }
+  }, [component.id, stateManager, allowMultiple]);
+
+  const toggleItem = (index: number) => {
+    if (animated) {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    }
+
+    let newExpandedIndexes: number[];
+    if (allowMultiple) {
+      newExpandedIndexes = expandedIndexes.includes(index)
+        ? expandedIndexes.filter(i => i !== index)
+        : [...expandedIndexes, index];
+    } else {
+      newExpandedIndexes = expandedIndexes.includes(index) ? [] : [index];
+    }
+
+    setExpandedIndexes(newExpandedIndexes);
+
+    if (stateManager) {
+      const currentIndex = newExpandedIndexes.length > 0 ? newExpandedIndexes[0] : -1;
+      stateManager.updateState(`element:${component.id}.currentIndex`, currentIndex);
+      stateManager.updateState(`element:${component.id}.expandedIndexes`, newExpandedIndexes);
+    }
+  };
+
+  return (
+    <View style={[styles.container, { opacity, gap }]}>
+      {items.map((item, index) => {
+        const isExpanded = expandedIndexes.includes(index);
+        const itemProps = item.properties as any;
+        
+        const header = item.children?.find((c: PaywallComponent) =>
+          c.properties?.role === 'header' || c.type === 'accordion-header'
+        );
+        const contentChildren = item.children?.filter((c: PaywallComponent) =>
+          c.properties?.role !== 'header' && c.type !== 'accordion-header'
+        ) || [];
+
+        return (
+          <View key={item.id} style={styles.item}>
+            {/* Header */}
+            <TouchableOpacity
+              onPress={() => toggleItem(index)}
+              style={[
+                styles.header,
+                { 
+                  backgroundColor: itemProps?.headerBackground ?? headerBackground,
+                  padding: headerPadding,
+                }
+              ]}
+              activeOpacity={0.7}
+            >
+              <View style={styles.headerContent}>
+                {header ? (
+                  renderChild(header)
+                ) : (
+                  <Text style={styles.headerText}>
+                    {itemProps?.title ?? `Item ${index + 1}`}
+                  </Text>
+                )}
+              </View>
+              <Text style={[
+                styles.chevron,
+                isExpanded && styles.chevronExpanded
+              ]}>
+                ▼
+              </Text>
+            </TouchableOpacity>
+
+            {/* Content */}
+            {isExpanded && (
+              <View style={[styles.content, { padding: contentPadding }]}>
+                {contentChildren.length > 0 
+                  ? contentChildren.map((child: PaywallComponent) => (
+                      <View key={child.id}>
+                        {renderChild(child)}
+                      </View>
+                    ))
+                  : itemProps?.content && <Text>{itemProps.content}</Text>
+                }
+              </View>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  item: {
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerContent: {
+    flex: 1,
+  },
+  headerText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  chevron: {
+    fontSize: 12,
+    color: '#666',
+    marginLeft: 8,
+  },
+  chevronExpanded: {
+    transform: [{ rotate: '180deg' }],
+  },
+  content: {
+    borderTopWidth: 1,
+    borderTopColor: '#e0e0e0',
+  },
+});

package/src/components/AnimatedWrapper.tsx

@@ -0,0 +1,316 @@
+/**
+ * AnimatedWrapper - React Native animation component
+ * Wraps children with animations based on preset configurations
+ */
+
+import React, { useEffect, useRef, useMemo } from 'react';
+import {
+  Animated,
+  Easing,
+  ViewStyle,
+  EasingFunction,
+} from 'react-native';
+// Local copy of packages/core/src/animations/presets (see src/animations/presets.ts).
+// Imported locally because ANIMATION_PRESETS is a runtime value and tsc rootDir
+// cannot span files outside this package.
+import { ANIMATION_PRESETS, EasingType, AnimationKeyframe } from '../animations/presets';
+
+interface AnimatedWrapperProps {
+  preset?: string;
+  trigger?: 'enter' | 'loop' | 'tap';
+  duration?: number;
+  delay?: number;
+  easing?: EasingType;
+  iterations?: number;
+  children: React.ReactNode;
+  style?: ViewStyle;
+  onAnimationComplete?: () => void;
+}
+
+/**
+ * Map easing type to React Native Easing function
+ */
+function getEasingFunction(easing: EasingType): EasingFunction {
+  switch (easing) {
+    case 'linear':
+      return Easing.linear;
+    case 'ease':
+      return Easing.ease;
+    case 'ease-in':
+      return Easing.in(Easing.ease);
+    case 'ease-out':
+      return Easing.out(Easing.ease);
+    case 'ease-in-out':
+      return Easing.inOut(Easing.ease);
+    case 'spring':
+      return Easing.elastic(1);
+    default:
+      return Easing.ease;
+  }
+}
+
+/**
+ * Calculate interpolated value at a specific progress point
+ */
+function interpolateKeyframes(
+  keyframes: AnimationKeyframe[],
+  property: keyof AnimationKeyframe,
+  progress: number
+): number | undefined {
+  if (keyframes.length === 0) return undefined;
+  
+  // Find surrounding keyframes
+  let prevFrame = keyframes[0];
+  let nextFrame = keyframes[keyframes.length - 1];
+  
+  for (let i = 0; i < keyframes.length - 1; i++) {
+    if (keyframes[i].offset <= progress && keyframes[i + 1].offset >= progress) {
+      prevFrame = keyframes[i];
+      nextFrame = keyframes[i + 1];
+      break;
+    }
+  }
+  
+  const prevValue = prevFrame[property];
+  const nextValue = nextFrame[property];
+  
+  if (prevValue === undefined || nextValue === undefined) return undefined;
+  if (typeof prevValue !== 'number' || typeof nextValue !== 'number') return undefined;
+  
+  // Linear interpolation between keyframes
+  const range = nextFrame.offset - prevFrame.offset;
+  if (range === 0) return prevValue;
+  
+  const localProgress = (progress - prevFrame.offset) / range;
+  return prevValue + (nextValue - prevValue) * localProgress;
+}
+
+export const AnimatedWrapper: React.FC<AnimatedWrapperProps> = ({
+  preset,
+  trigger = 'enter',
+  duration: customDuration,
+  delay: customDelay,
+  easing: customEasing,
+  iterations: customIterations,
+  children,
+  style,
+  onAnimationComplete,
+}) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  
+  // Get preset configuration
+  const presetConfig = preset ? ANIMATION_PRESETS[preset] : undefined;
+  
+  // Merge custom parameters with preset defaults
+  const animationParams = useMemo(() => {
+    if (!presetConfig) {
+      return { duration: 300, delay: 0, easing: 'ease-out' as EasingType, iterations: 1 };
+    }
+    
+    return {
+      duration: customDuration ?? presetConfig.defaultDuration,
+      delay: customDelay ?? presetConfig.defaultDelay,
+      easing: customEasing ?? presetConfig.defaultEasing,
+      iterations: customIterations ?? presetConfig.defaultIterations,
+    };
+  }, [presetConfig, customDuration, customDelay, customEasing, customIterations]);
+  
+  // Run animation on mount or when trigger changes
+  useEffect(() => {
+    if (!presetConfig) return;
+    
+    const isLooping = animationParams.iterations === -1 || trigger === 'loop';
+    
+    const runAnimation = () => {
+      animatedValue.setValue(0);
+      
+      const animation = Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: animationParams.duration,
+        delay: animationParams.delay,
+        easing: getEasingFunction(animationParams.easing),
+        useNativeDriver: true,
+      });
+      
+      if (isLooping) {
+        Animated.loop(animation).start();
+      } else {
+        animation.start(({ finished }) => {
+          if (finished && onAnimationComplete) {
+            onAnimationComplete();
+          }
+        });
+      }
+    };
+    
+    runAnimation();
+    
+    return () => {
+      animatedValue.stopAnimation();
+    };
+  }, [preset, trigger, animationParams]);
+  
+  // Build animated style from keyframes
+  const animatedStyle = useMemo(() => {
+    if (!presetConfig) return {};
+    
+    const { keyframes } = presetConfig;
+    const transforms: any[] = [];
+    
+    // Extract unique offsets for input range
+    const offsets = keyframes.map(kf => kf.offset);
+    
+    // Opacity interpolation
+    const opacityValues = keyframes.map(kf => kf.opacity).filter(v => v !== undefined);
+    const hasOpacity = opacityValues.length > 0;
+    
+    // Scale interpolation
+    const scaleValues = keyframes.map(kf => kf.scale ?? 1);
+    const hasScale = keyframes.some(kf => kf.scale !== undefined);
+    
+    // TranslateX interpolation
+    const translateXValues = keyframes.map(kf => {
+      const val = kf.translateX;
+      if (typeof val === 'string' && val.includes('%')) {
+        // Convert percentage to pixels (approximate with 300px width)
+        return parseFloat(val) * 3;
+      }
+      return typeof val === 'number' ? val : 0;
+    });
+    const hasTranslateX = keyframes.some(kf => kf.translateX !== undefined);
+    
+    // TranslateY interpolation
+    const translateYValues = keyframes.map(kf => {
+      const val = kf.translateY;
+      if (typeof val === 'string' && val.includes('%')) {
+        return parseFloat(val) * 5; // Approximate with 500px height
+      }
+      return typeof val === 'number' ? val : 0;
+    });
+    const hasTranslateY = keyframes.some(kf => kf.translateY !== undefined);
+    
+    // Rotate interpolation
+    const rotateValues = keyframes.map(kf => kf.rotate ?? 0);
+    const hasRotate = keyframes.some(kf => kf.rotate !== undefined);
+    
+    // Build style object
+    const animStyle: any = {};
+    
+    if (hasOpacity) {
+      animStyle.opacity = animatedValue.interpolate({
+        inputRange: offsets,
+        outputRange: keyframes.map(kf => kf.opacity ?? 1),
+      });
+    }
+    
+    if (hasScale) {
+      transforms.push({
+        scale: animatedValue.interpolate({
+          inputRange: offsets,
+          outputRange: scaleValues,
+        }),
+      });
+    }
+    
+    if (hasTranslateX) {
+      transforms.push({
+        translateX: animatedValue.interpolate({
+          inputRange: offsets,
+          outputRange: translateXValues,
+        }),
+      });
+    }
+    
+    if (hasTranslateY) {
+      transforms.push({
+        translateY: animatedValue.interpolate({
+          inputRange: offsets,
+          outputRange: translateYValues,
+        }),
+      });
+    }
+    
+    if (hasRotate) {
+      transforms.push({
+        rotate: animatedValue.interpolate({
+          inputRange: offsets,
+          outputRange: rotateValues.map(r => `${r}deg`),
+        }),
+      });
+    }
+    
+    if (transforms.length > 0) {
+      animStyle.transform = transforms;
+    }
+    
+    return animStyle;
+  }, [presetConfig, animatedValue]);
+  
+  // If no preset, render children without animation
+  if (!presetConfig) {
+    return <Animated.View style={style}>{children}</Animated.View>;
+  }
+  
+  return (
+    <Animated.View style={[style, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+};
+
+/**
+ * Hook to get animation style without wrapper component
+ */
+export function usePaywallAnimation(
+  preset?: string,
+  customParams?: {
+    duration?: number;
+    delay?: number;
+    easing?: EasingType;
+    iterations?: number;
+  }
+) {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const presetConfig = preset ? ANIMATION_PRESETS[preset] : undefined;
+  
+  const params = useMemo(() => {
+    if (!presetConfig) return null;
+    return {
+      duration: customParams?.duration ?? presetConfig.defaultDuration,
+      delay: customParams?.delay ?? presetConfig.defaultDelay,
+      easing: customParams?.easing ?? presetConfig.defaultEasing,
+      iterations: customParams?.iterations ?? presetConfig.defaultIterations,
+    };
+  }, [presetConfig, customParams]);
+  
+  const start = () => {
+    if (!params) return;
+    
+    animatedValue.setValue(0);
+    const animation = Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: params.duration,
+      delay: params.delay,
+      easing: getEasingFunction(params.easing),
+      useNativeDriver: true,
+    });
+    
+    if (params.iterations === -1) {
+      Animated.loop(animation).start();
+    } else {
+      animation.start();
+    }
+  };
+  
+  const stop = () => {
+    animatedValue.stopAnimation();
+  };
+  
+  const reset = () => {
+    animatedValue.setValue(0);
+  };
+  
+  return { animatedValue, start, stop, reset, presetConfig };
+}
+
+export default AnimatedWrapper;