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

package/src/animations/presets.ts

@@ -0,0 +1,421 @@
+/**
+ * Shared Animation Preset Definitions
+ * Platform-agnostic animation configurations that can be executed on any SDK
+ */
+
+export interface AnimationKeyframe {
+  offset: number; // 0 to 1
+  opacity?: number;
+  scale?: number;
+  scaleX?: number;
+  scaleY?: number;
+  translateX?: number | string;
+  translateY?: number | string;
+  rotate?: number; // degrees
+  skewX?: number;
+  skewY?: number;
+}
+
+export interface AnimationPresetConfig {
+  name: string;
+  category: 'enter' | 'exit' | 'loop' | 'attention' | 'interaction';
+  keyframes: AnimationKeyframe[];
+  defaultDuration: number; // milliseconds
+  defaultDelay: number;
+  defaultEasing: EasingType;
+  defaultIterations: number; // -1 for infinite
+  defaultDirection: AnimationDirection;
+  description: string;
+}
+
+export type EasingType = 
+  | 'linear'
+  | 'ease'
+  | 'ease-in'
+  | 'ease-out'
+  | 'ease-in-out'
+  | 'spring';
+
+export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+
+/**
+ * Animation Presets - Shared across all SDKs
+ */
+export const ANIMATION_PRESETS: Record<string, AnimationPresetConfig> = {
+  // ============ ENTER ANIMATIONS ============
+  'fade-in': {
+    name: 'Fade In',
+    category: 'enter',
+    keyframes: [
+      { offset: 0, opacity: 0 },
+      { offset: 1, opacity: 1 }
+    ],
+    defaultDuration: 300,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Fades element in from transparent'
+  },
+  
+  'fade-in-up': {
+    name: 'Fade In Up',
+    category: 'enter',
+    keyframes: [
+      { offset: 0, opacity: 0, translateY: 20 },
+      { offset: 1, opacity: 1, translateY: 0 }
+    ],
+    defaultDuration: 400,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Fades in while sliding up'
+  },
+  
+  'fade-in-down': {
+    name: 'Fade In Down',
+    category: 'enter',
+    keyframes: [
+      { offset: 0, opacity: 0, translateY: -20 },
+      { offset: 1, opacity: 1, translateY: 0 }
+    ],
+    defaultDuration: 400,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Fades in while sliding down'
+  },
+  
+  'slide-in-left': {
+    name: 'Slide In Left',
+    category: 'enter',
+    keyframes: [
+      { offset: 0, translateX: '-100%', opacity: 0 },
+      { offset: 1, translateX: 0, opacity: 1 }
+    ],
+    defaultDuration: 400,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Slides in from the left'
+  },
+  
+  'slide-in-right': {
+    name: 'Slide In Right',
+    category: 'enter',
+    keyframes: [
+      { offset: 0, translateX: '100%', opacity: 0 },
+      { offset: 1, translateX: 0, opacity: 1 }
+    ],
+    defaultDuration: 400,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Slides in from the right'
+  },
+  
+  'slide-in-up': {
+    name: 'Slide In Up',
+    category: 'enter',
+    keyframes: [
+      { offset: 0, translateY: '100%', opacity: 0 },
+      { offset: 1, translateY: 0, opacity: 1 }
+    ],
+    defaultDuration: 400,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Slides in from the bottom'
+  },
+  
+  'slide-in-down': {
+    name: 'Slide In Down',
+    category: 'enter',
+    keyframes: [
+      { offset: 0, translateY: '-100%', opacity: 0 },
+      { offset: 1, translateY: 0, opacity: 1 }
+    ],
+    defaultDuration: 400,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Slides in from the top'
+  },
+  
+  'scale-in': {
+    name: 'Scale In',
+    category: 'enter',
+    keyframes: [
+      { offset: 0, scale: 0.8, opacity: 0 },
+      { offset: 1, scale: 1, opacity: 1 }
+    ],
+    defaultDuration: 300,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Scales up while fading in'
+  },
+  
+  'bounce-in': {
+    name: 'Bounce In',
+    category: 'enter',
+    keyframes: [
+      { offset: 0, scale: 0.3, opacity: 0 },
+      { offset: 0.5, scale: 1.05 },
+      { offset: 0.7, scale: 0.9 },
+      { offset: 1, scale: 1, opacity: 1 }
+    ],
+    defaultDuration: 500,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Bounces in with elastic effect'
+  },
+  
+  // ============ EXIT ANIMATIONS ============
+  'fade-out': {
+    name: 'Fade Out',
+    category: 'exit',
+    keyframes: [
+      { offset: 0, opacity: 1 },
+      { offset: 1, opacity: 0 }
+    ],
+    defaultDuration: 300,
+    defaultDelay: 0,
+    defaultEasing: 'ease-in',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Fades element out to transparent'
+  },
+  
+  'scale-out': {
+    name: 'Scale Out',
+    category: 'exit',
+    keyframes: [
+      { offset: 0, scale: 1, opacity: 1 },
+      { offset: 1, scale: 0.8, opacity: 0 }
+    ],
+    defaultDuration: 300,
+    defaultDelay: 0,
+    defaultEasing: 'ease-in',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Scales down while fading out'
+  },
+  
+  // ============ LOOP ANIMATIONS ============
+  'pulse': {
+    name: 'Pulse',
+    category: 'loop',
+    keyframes: [
+      { offset: 0, scale: 1 },
+      { offset: 0.5, scale: 1.05 },
+      { offset: 1, scale: 1 }
+    ],
+    defaultDuration: 1000,
+    defaultDelay: 0,
+    defaultEasing: 'ease-in-out',
+    defaultIterations: -1, // infinite
+    defaultDirection: 'normal',
+    description: 'Gentle pulsing scale effect'
+  },
+  
+  'breathe': {
+    name: 'Breathe',
+    category: 'loop',
+    keyframes: [
+      { offset: 0, scale: 1, opacity: 1 },
+      { offset: 0.5, scale: 1.03, opacity: 0.9 },
+      { offset: 1, scale: 1, opacity: 1 }
+    ],
+    defaultDuration: 2000,
+    defaultDelay: 0,
+    defaultEasing: 'ease-in-out',
+    defaultIterations: -1,
+    defaultDirection: 'normal',
+    description: 'Subtle breathing effect'
+  },
+  
+  'float': {
+    name: 'Float',
+    category: 'loop',
+    keyframes: [
+      { offset: 0, translateY: 0 },
+      { offset: 0.5, translateY: -10 },
+      { offset: 1, translateY: 0 }
+    ],
+    defaultDuration: 2000,
+    defaultDelay: 0,
+    defaultEasing: 'ease-in-out',
+    defaultIterations: -1,
+    defaultDirection: 'normal',
+    description: 'Floating up and down effect'
+  },
+  
+  'wiggle': {
+    name: 'Wiggle',
+    category: 'loop',
+    keyframes: [
+      { offset: 0, rotate: 0 },
+      { offset: 0.25, rotate: -3 },
+      { offset: 0.5, rotate: 0 },
+      { offset: 0.75, rotate: 3 },
+      { offset: 1, rotate: 0 }
+    ],
+    defaultDuration: 500,
+    defaultDelay: 0,
+    defaultEasing: 'ease-in-out',
+    defaultIterations: -1,
+    defaultDirection: 'normal',
+    description: 'Gentle rotation wiggle'
+  },
+  
+  'spin': {
+    name: 'Spin',
+    category: 'loop',
+    keyframes: [
+      { offset: 0, rotate: 0 },
+      { offset: 1, rotate: 360 }
+    ],
+    defaultDuration: 1000,
+    defaultDelay: 0,
+    defaultEasing: 'linear',
+    defaultIterations: -1,
+    defaultDirection: 'normal',
+    description: 'Continuous rotation'
+  },
+  
+  // ============ ATTENTION ANIMATIONS ============
+  'bounce': {
+    name: 'Bounce',
+    category: 'attention',
+    keyframes: [
+      { offset: 0, translateY: 0 },
+      { offset: 0.2, translateY: 0 },
+      { offset: 0.4, translateY: -15 },
+      { offset: 0.5, translateY: 0 },
+      { offset: 0.6, translateY: -7 },
+      { offset: 0.8, translateY: 0 },
+      { offset: 1, translateY: 0 }
+    ],
+    defaultDuration: 800,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Bouncing attention getter'
+  },
+  
+  'shake': {
+    name: 'Shake',
+    category: 'attention',
+    keyframes: [
+      { offset: 0, translateX: 0 },
+      { offset: 0.1, translateX: -10 },
+      { offset: 0.2, translateX: 10 },
+      { offset: 0.3, translateX: -10 },
+      { offset: 0.4, translateX: 10 },
+      { offset: 0.5, translateX: -5 },
+      { offset: 0.6, translateX: 5 },
+      { offset: 0.7, translateX: -2 },
+      { offset: 0.8, translateX: 2 },
+      { offset: 1, translateX: 0 }
+    ],
+    defaultDuration: 600,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Horizontal shake effect'
+  },
+  
+  'flash': {
+    name: 'Flash',
+    category: 'attention',
+    keyframes: [
+      { offset: 0, opacity: 1 },
+      { offset: 0.25, opacity: 0 },
+      { offset: 0.5, opacity: 1 },
+      { offset: 0.75, opacity: 0 },
+      { offset: 1, opacity: 1 }
+    ],
+    defaultDuration: 800,
+    defaultDelay: 0,
+    defaultEasing: 'ease-in-out',
+    defaultIterations: 1,
+    defaultDirection: 'normal',
+    description: 'Flashing opacity effect'
+  },
+  
+  // ============ INTERACTION ANIMATIONS ============
+  'shrink': {
+    name: 'Shrink',
+    category: 'interaction',
+    keyframes: [
+      { offset: 0, scale: 1 },
+      { offset: 1, scale: 0.95 }
+    ],
+    defaultDuration: 100,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'alternate',
+    description: 'Button press shrink effect'
+  },
+  
+  'grow': {
+    name: 'Grow',
+    category: 'interaction',
+    keyframes: [
+      { offset: 0, scale: 1 },
+      { offset: 1, scale: 1.05 }
+    ],
+    defaultDuration: 200,
+    defaultDelay: 0,
+    defaultEasing: 'ease-out',
+    defaultIterations: 1,
+    defaultDirection: 'alternate',
+    description: 'Hover grow effect'
+  },
+};
+
+/**
+ * Get preset by name
+ */
+export function getAnimationPreset(name: string): AnimationPresetConfig | undefined {
+  return ANIMATION_PRESETS[name];
+}
+
+/**
+ * Get all presets by category
+ */
+export function getPresetsByCategory(category: AnimationPresetConfig['category']): AnimationPresetConfig[] {
+  return Object.values(ANIMATION_PRESETS).filter(preset => preset.category === category);
+}
+
+/**
+ * List all available preset names
+ */
+export function getAvailablePresetNames(): string[] {
+  return Object.keys(ANIMATION_PRESETS);
+}
+
+/**
+ * Easing cubic-bezier mappings for CSS/platform conversion
+ */
+export const EASING_CURVES: Record<EasingType, [number, number, number, number]> = {
+  'linear': [0, 0, 1, 1],
+  'ease': [0.25, 0.1, 0.25, 1],
+  'ease-in': [0.42, 0, 1, 1],
+  'ease-out': [0, 0, 0.58, 1],
+  'ease-in-out': [0.42, 0, 0.58, 1],
+  'spring': [0.175, 0.885, 0.32, 1.275], // Approximation
+};

package/src/components/AccoladeCpsComponent.tsx

@@ -0,0 +1,259 @@
+/**
+ * AccoladeCpsComponent - Native React Native implementation
+ * Award badge with 6 variants: medal, trophy, ribbon, star, badge, certificate
+ */
+
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  Easing,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface AccoladeCpsComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+type AccoladeVariant = 'medal' | 'trophy' | 'ribbon' | 'star' | 'badge' | 'certificate';
+
+// Icon mapping for variants
+const VARIANT_ICONS: Record<AccoladeVariant, string> = {
+  medal: '🏅',
+  trophy: '🏆',
+  ribbon: '🎀',
+  star: '⭐',
+  badge: '🏷️',
+  certificate: '📜',
+};
+
+// Icon mapping for custom icon names
+const ICON_MAP: Record<string, string> = {
+  star: '⭐',
+  trophy: '🏆',
+  medal: '🏅',
+  crown: '👑',
+  diamond: '💎',
+  heart: '❤️',
+  check: '✅',
+};
+
+const getColorFromValue = (value: any, fallback: string): string => {
+  if (!value) return fallback;
+  if (typeof value === 'string') return value;
+  if (typeof value === 'object' && value.color) return value.color;
+  return fallback;
+};
+
+export const AccoladeCpsComponent: React.FC<AccoladeCpsComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  
+  // Properties
+  const variant = (props.variant as AccoladeVariant) || 'medal';
+  const title = (props.title as string) || 'Award';
+  const subtitle = props.subtitle as string | undefined;
+  const iconName = props.iconName as string | undefined;
+  const primaryColor = getColorFromValue(props.primaryColor, '#FFD700');
+  const secondaryColor = getColorFromValue(props.secondaryColor, '#FFA500');
+  const textColor = getColorFromValue(props.textColor, '#1F2937');
+  const animated = props.animated !== false;
+  const size = (props.size as number) ?? 80;
+  const showGlow = props.showGlow !== false;
+  const glowColor = props.glowColor ? getColorFromValue(props.glowColor, primaryColor) : primaryColor;
+  
+  // Animation values
+  const scaleAnim = useRef(new Animated.Value(0)).current;
+  const rotateAnim = useRef(new Animated.Value(-0.1)).current;
+  
+  useEffect(() => {
+    if (animated) {
+      Animated.parallel([
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          friction: 4,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+        Animated.timing(rotateAnim, {
+          toValue: 0,
+          duration: 500,
+          easing: Easing.out(Easing.quad),
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      scaleAnim.setValue(1);
+      rotateAnim.setValue(0);
+    }
+  }, [animated, scaleAnim, rotateAnim]);
+  
+  // Get icon
+  const icon = iconName 
+    ? (ICON_MAP[iconName.toLowerCase()] || VARIANT_ICONS[variant])
+    : VARIANT_ICONS[variant];
+  
+  const isRibbon = variant === 'ribbon';
+  
+  const rotate = rotateAnim.interpolate({
+    inputRange: [-0.1, 0],
+    outputRange: ['-10deg', '0deg'],
+  });
+  
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          transform: [
+            { scale: scaleAnim },
+            { rotate },
+          ],
+        },
+      ]}
+    >
+      {/* Icon container */}
+      <View style={styles.iconContainer}>
+        {/* Glow effect */}
+        {showGlow && (
+          <View
+            style={[
+              styles.glow,
+              {
+                width: size + 20,
+                height: size + 20,
+                backgroundColor: glowColor,
+                borderRadius: isRibbon ? 8 : (size + 20) / 2,
+              },
+            ]}
+          />
+        )}
+        
+        {/* Main badge */}
+        <View
+          style={[
+            styles.badge,
+            {
+              width: size,
+              height: size,
+              borderRadius: isRibbon ? 8 : size / 2,
+              backgroundColor: primaryColor,
+            },
+          ]}
+        >
+          {/* Gradient overlay simulation */}
+          <View
+            style={[
+              styles.gradientOverlay,
+              {
+                borderRadius: isRibbon ? 8 : size / 2,
+              },
+            ]}
+          />
+          
+          {/* Icon */}
+          <Text style={[styles.icon, { fontSize: size * 0.45 }]}>
+            {icon}
+          </Text>
+        </View>
+        
+        {/* Ribbon decoration for medal variant */}
+        {variant === 'medal' && (
+          <View style={[styles.ribbonContainer, { top: size * 0.7 }]}>
+            <View
+              style={[
+                styles.ribbonStrip,
+                styles.ribbonLeft,
+                { backgroundColor: secondaryColor },
+              ]}
+            />
+            <View style={{ width: size * 0.4 }} />
+            <View
+              style={[
+                styles.ribbonStrip,
+                styles.ribbonRight,
+                { backgroundColor: secondaryColor },
+              ]}
+            />
+          </View>
+        )}
+      </View>
+      
+      {/* Title */}
+      <Text style={[styles.title, { color: textColor }]}>
+        {title}
+      </Text>
+      
+      {/* Subtitle */}
+      {subtitle && (
+        <Text style={[styles.subtitle, { color: textColor }]}>
+          {subtitle}
+        </Text>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  iconContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 12,
+  },
+  glow: {
+    position: 'absolute',
+    opacity: 0.4,
+  },
+  badge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  gradientOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+  },
+  icon: {
+    textAlign: 'center',
+  },
+  ribbonContainer: {
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  ribbonStrip: {
+    width: 12,
+    height: 24,
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4,
+  },
+  ribbonLeft: {
+    transform: [{ rotate: '15deg' }],
+  },
+  ribbonRight: {
+    transform: [{ rotate: '-15deg' }],
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 12,
+    opacity: 0.7,
+    textAlign: 'center',
+    marginTop: 4,
+  },
+});
+
+export default AccoladeCpsComponent;