@umituz/react-native-design-system 2.3.13 → 2.3.15

package/src/molecules/animation/presentation/hooks/__tests__/useTimingAnimation.test.ts

@@ -0,0 +1,175 @@
+/**
+ * useTimingAnimation Hook Tests
+ *
+ * Unit tests for timing-based animations (fade, slide).
+ */
+
+import { renderHook, act } from '@testing-library/react';
+import { useTimingAnimation } from '../useTimingAnimation';
+import { AnimationPreset, ANIMATION_CONSTANTS } from '../../../domain/entities/Animation';
+
+// Mock react-native-reanimated
+jest.mock('react-native-reanimated', () => ({
+  useSharedValue: jest.fn((initialValue) => ({
+    value: initialValue,
+  })),
+  useAnimatedStyle: jest.fn((styleFactory) => styleFactory()),
+  withTiming: jest.fn((toValue, config) => ({ toValue, config })),
+  Easing: {
+    ease: jest.fn(),
+    out: jest.fn((easing) => easing),
+    bezier: jest.fn(() => jest.fn()),
+  },
+}));
+
+// Mock AnimationConfigService
+jest.mock('../../../infrastructure/services/TimingAnimationConfigService', () => ({
+  TimingAnimationConfigService: {
+    getTimingConfig: jest.fn((preset) => ({
+      duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+    })),
+  },
+}));
+
+describe('useTimingAnimation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should initialize with default values', () => {
+    const { result } = renderHook(() => useTimingAnimation());
+
+    expect(result.current.opacity.value).toBe(1);
+    expect(result.current.translateY.value).toBe(0);
+    expect(result.current.translateX.value).toBe(0);
+  });
+
+  it('should provide animation functions', () => {
+    const { result } = renderHook(() => useTimingAnimation());
+
+    expect(typeof result.current.fadeIn).toBe('function');
+    expect(typeof result.current.fadeOut).toBe('function');
+    expect(typeof result.current.slideInUp).toBe('function');
+    expect(typeof result.current.slideInDown).toBe('function');
+    expect(typeof result.current.slideInLeft).toBe('function');
+    expect(typeof result.current.slideInRight).toBe('function');
+  });
+
+  describe('fadeIn', () => {
+    it('should animate opacity to 1 with default config', () => {
+      const { result } = renderHook(() => useTimingAnimation());
+      const { withTiming } = require('react-native-reanimated');
+
+      act(() => {
+        result.current.fadeIn();
+      });
+
+      expect(withTiming).toHaveBeenCalledWith(1, {
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+        easing: expect.any(Function),
+      });
+    });
+
+    it('should use custom config when provided', () => {
+      const { result } = renderHook(() => useTimingAnimation());
+      const { withTiming } = require('react-native-reanimated');
+      const customConfig = { duration: 500 };
+
+      act(() => {
+        result.current.fadeIn(customConfig);
+      });
+
+      expect(withTiming).toHaveBeenCalledWith(1, customConfig);
+    });
+  });
+
+  describe('fadeOut', () => {
+    it('should animate opacity to 0 with default config', () => {
+      const { result } = renderHook(() => useTimingAnimation());
+      const { withTiming } = require('react-native-reanimated');
+
+      act(() => {
+        result.current.fadeOut();
+      });
+
+      expect(withTiming).toHaveBeenCalledWith(0, {
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+        easing: expect.any(Function),
+      });
+    });
+  });
+
+  describe('slideInUp', () => {
+    it('should slide from bottom to top with default distance', () => {
+      const { result } = renderHook(() => useTimingAnimation());
+      const { withTiming } = require('react-native-reanimated');
+
+      act(() => {
+        result.current.slideInUp();
+      });
+
+      expect(result.current.translateY.value).toBe(0);
+      expect(withTiming).toHaveBeenCalledWith(0, {
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+        easing: expect.any(Function),
+      });
+    });
+
+    it('should use custom distance', () => {
+      const { result } = renderHook(() => useTimingAnimation());
+      const customDistance = 150;
+
+      act(() => {
+        result.current.slideInUp(customDistance);
+      });
+
+      expect(result.current.translateY.value).toBe(0);
+    });
+  });
+
+  describe('slideInDown', () => {
+    it('should slide from top to bottom', () => {
+      const { result } = renderHook(() => useTimingAnimation());
+
+      act(() => {
+        result.current.slideInDown();
+      });
+
+      expect(result.current.translateY.value).toBe(0);
+    });
+  });
+
+  describe('slideInLeft', () => {
+    it('should slide from left to right', () => {
+      const { result } = renderHook(() => useTimingAnimation());
+
+      act(() => {
+        result.current.slideInLeft();
+      });
+
+      expect(result.current.translateX.value).toBe(0);
+    });
+  });
+
+  describe('slideInRight', () => {
+    it('should slide from right to left', () => {
+      const { result } = renderHook(() => useTimingAnimation());
+
+      act(() => {
+        result.current.slideInRight();
+      });
+
+      expect(result.current.translateX.value).toBe(0);
+    });
+  });
+
+  describe('shared values', () => {
+    it('should expose shared values for custom animations', () => {
+      const { result } = renderHook(() => useTimingAnimation());
+
+      expect(result.current.opacity).toBeDefined();
+      expect(result.current.translateY).toBeDefined();
+      expect(result.current.translateX).toBeDefined();
+    });
+  });
+});

package/src/molecules/animation/presentation/hooks/__tests__/useTransformAnimation.test.ts

@@ -0,0 +1,137 @@
+/**
+ * useTransformAnimation Hook Tests
+ *
+ * Unit tests for transform-based animations (spin, pulse, shake).
+ */
+
+import { renderHook, act } from '@testing-library/react';
+import { useTransformAnimation } from '../useTransformAnimation';
+
+// Mock react-native-reanimated
+jest.mock('react-native-reanimated', () => ({
+  useSharedValue: jest.fn((initialValue) => ({
+    value: initialValue,
+  })),
+  useAnimatedStyle: jest.fn((styleFactory) => styleFactory()),
+  withTiming: jest.fn((toValue, config) => ({ toValue, config })),
+  withSequence: jest.fn((...animations) => animations),
+  withRepeat: jest.fn((animation, count, reverse) => ({ animation, count, reverse })),
+  Easing: {
+    linear: jest.fn(),
+  },
+}));
+
+describe('useTransformAnimation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should initialize with default values', () => {
+    const { result } = renderHook(() => useTransformAnimation());
+
+    expect(result.current.translateX.value).toBe(0);
+    expect(result.current.scale.value).toBe(1);
+    expect(result.current.rotate.value).toBe(0);
+  });
+
+  it('should provide animation functions', () => {
+    const { result } = renderHook(() => useTransformAnimation());
+
+    expect(typeof result.current.shake).toBe('function');
+    expect(typeof result.current.pulse).toBe('function');
+    expect(typeof result.current.spin).toBe('function');
+  });
+
+  describe('shake', () => {
+    it('should create shake animation sequence', () => {
+      const { result } = renderHook(() => useTransformAnimation());
+      const { withTiming, withSequence, withRepeat } = require('react-native-reanimated');
+
+      act(() => {
+        result.current.shake();
+      });
+
+      expect(withSequence).toHaveBeenCalledWith(
+        withTiming(-10, { duration: 50 }),
+        withRepeat(withTiming(10, { duration: 50 }), 4, true),
+        withTiming(0, { duration: 50 })
+      );
+    });
+  });
+
+  describe('pulse', () => {
+    it('should create pulse animation with default repeat count', () => {
+      const { result } = renderHook(() => useTransformAnimation());
+      const { withTiming, withSequence, withRepeat } = require('react-native-reanimated');
+
+      act(() => {
+        result.current.pulse();
+      });
+
+      expect(withRepeat).toHaveBeenCalledWith(
+        withSequence(withTiming(1.1, { duration: 500 }), withTiming(1, { duration: 500 })),
+        -1,
+        false
+      );
+    });
+
+    it('should use custom repeat count', () => {
+      const { result } = renderHook(() => useTransformAnimation());
+      const { withTiming, withSequence, withRepeat } = require('react-native-reanimated');
+      const customRepeatCount = 3;
+
+      act(() => {
+        result.current.pulse(customRepeatCount);
+      });
+
+      expect(withRepeat).toHaveBeenCalledWith(
+        expect.any(Object),
+        customRepeatCount,
+        false
+      );
+    });
+  });
+
+  describe('spin', () => {
+    it('should create spin animation with default repeat count', () => {
+      const { result } = renderHook(() => useTransformAnimation());
+      const { withTiming, withRepeat, Easing } = require('react-native-reanimated');
+
+      act(() => {
+        result.current.spin();
+      });
+
+      expect(withRepeat).toHaveBeenCalledWith(
+        withTiming(360, { duration: 1000, easing: Easing.linear }),
+        -1,
+        false
+      );
+    });
+
+    it('should use custom repeat count', () => {
+      const { result } = renderHook(() => useTransformAnimation());
+      const { withTiming, withRepeat } = require('react-native-reanimated');
+      const customRepeatCount = 2;
+
+      act(() => {
+        result.current.spin(customRepeatCount);
+      });
+
+      expect(withRepeat).toHaveBeenCalledWith(
+        expect.any(Object),
+        customRepeatCount,
+        false
+      );
+    });
+  });
+
+  describe('shared values', () => {
+    it('should expose shared values for custom animations', () => {
+      const { result } = renderHook(() => useTransformAnimation());
+
+      expect(result.current.translateX).toBeDefined();
+      expect(result.current.scale).toBeDefined();
+      expect(result.current.rotate).toBeDefined();
+    });
+  });
+});

package/src/molecules/animation/presentation/hooks/useAnimation.ts

@@ -0,0 +1,77 @@
+/**
+ * useAnimation Hook
+ *
+ * Orchestrator hook that combines all animation types.
+ * Single Responsibility: Compose and expose animation hooks.
+ */
+
+import { useAnimatedStyle } from 'react-native-reanimated';
+import { useTimingAnimation } from './useTimingAnimation';
+import { useSpringAnimation } from './useSpringAnimation';
+import { useTransformAnimation } from './useTransformAnimation';
+
+/**
+ * Hook for declarative animations
+ *
+ * @example
+ * const { fadeIn, fadeOut, animatedStyle } = useAnimation();
+ *
+ * // Trigger animations
+ * fadeIn();
+ * fadeOut();
+ *
+ * // Apply to component
+ * <Animated.View style={animatedStyle}>...</Animated.View>
+ */
+export const useAnimation = () => {
+    const timing = useTimingAnimation();
+    const spring = useSpringAnimation();
+    const transform = useTransformAnimation();
+
+    // Combine all shared values for animated style
+    const animatedStyle = useAnimatedStyle(() => {
+        // Use transform values if they're non-zero, otherwise use timing/spring values
+        const translateXValue = transform.translateX.value !== 0
+            ? transform.translateX.value
+            : timing.translateX.value;
+        const scaleValue = transform.scale.value !== 1
+            ? transform.scale.value
+            : spring.scale.value;
+
+        return {
+            opacity: timing.opacity.value,
+            transform: [
+                { translateY: timing.translateY.value },
+                { translateX: translateXValue },
+                { scale: scaleValue },
+                { rotate: `${transform.rotate.value}deg` },
+            ],
+        };
+    });
+
+    return {
+        // Timing animations
+        fadeIn: timing.fadeIn,
+        fadeOut: timing.fadeOut,
+        slideInUp: timing.slideInUp,
+        slideInDown: timing.slideInDown,
+        slideInLeft: timing.slideInLeft,
+        slideInRight: timing.slideInRight,
+        // Spring animations
+        scaleIn: spring.scaleIn,
+        scaleOut: spring.scaleOut,
+        bounce: spring.bounce,
+        // Transform animations
+        shake: transform.shake,
+        pulse: transform.pulse,
+        spin: transform.spin,
+        // Shared values (for custom animations)
+        opacity: timing.opacity,
+        translateY: timing.translateY,
+        translateX: timing.translateX,
+        scale: spring.scale,
+        rotate: transform.rotate,
+        // Animated style
+        animatedStyle,
+    };
+};

package/src/molecules/animation/presentation/hooks/useFireworks.ts

@@ -0,0 +1,141 @@
+/**
+ * useFireworks Hook
+ *
+ * Hook for managing fireworks particle system.
+ * Single Responsibility: Manage fireworks state and lifecycle.
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { ParticleConfig, FireworksConfig } from '../../domain/entities/Fireworks';
+import { FIREWORKS_CONSTANTS } from '../../domain/entities/Fireworks';
+
+/**
+ * Hook for fireworks animation
+ *
+ * @example
+ * const { particles, trigger, isActive } = useFireworks();
+ *
+ * // Trigger fireworks
+ * trigger();
+ *
+ * // Render particles
+ * {particles.map((particle, index) => (
+ *   <Particle key={index} {...particle} />
+ * ))}
+ */
+export const useFireworks = (config: FireworksConfig) => {
+  const [particles, setParticles] = useState<ParticleConfig[]>([]);
+  const [isActive, setIsActive] = useState(false);
+  const animationFrameRef = useRef<number | null>(null);
+  const particlesRef = useRef<ParticleConfig[]>([]);
+
+  const {
+    particleCount = FIREWORKS_CONSTANTS.DEFAULT_PARTICLE_COUNT,
+    colors,
+    duration = FIREWORKS_CONSTANTS.DEFAULT_DURATION,
+    particleSize = FIREWORKS_CONSTANTS.DEFAULT_PARTICLE_SIZE,
+    spread = FIREWORKS_CONSTANTS.DEFAULT_SPREAD,
+  } = config;
+
+  if (!colors || colors.length === 0) {
+    if (__DEV__) {
+      console.warn('useFireworks: colors array is required and cannot be empty');
+    }
+    return { particles: [], trigger: () => {}, isActive: false };
+  }
+
+  const createParticle = useCallback((
+    x: number,
+    y: number,
+    color: string
+  ): ParticleConfig => {
+    const angle = Math.random() * Math.PI * 2;
+    const velocity = Math.random() * spread + 50;
+    
+    return {
+      x,
+      y,
+      color,
+      size: particleSize + Math.random() * 2,
+      velocityX: Math.cos(angle) * velocity,
+      velocityY: Math.sin(angle) * velocity,
+      life: 1.0,
+      decay: FIREWORKS_CONSTANTS.DECAY_RATE + Math.random() * 0.01,
+    };
+  }, [particleSize, spread]);
+
+  const updateParticles = useCallback(() => {
+    const currentParticles = [...particlesRef.current];
+    const updated: ParticleConfig[] = [];
+
+    for (const particle of currentParticles) {
+      const newX = particle.x + particle.velocityX * 0.1;
+      const newY = particle.y + particle.velocityY * 0.1 + FIREWORKS_CONSTANTS.GRAVITY;
+      const newVelocityY = particle.velocityY + FIREWORKS_CONSTANTS.GRAVITY;
+      const newLife = particle.life - particle.decay;
+
+      if (newLife > 0) {
+        updated.push({
+          ...particle,
+          x: newX,
+          y: newY,
+          velocityY: newVelocityY,
+          life: newLife,
+        });
+      }
+    }
+
+    particlesRef.current = updated;
+    setParticles(updated);
+
+    if (updated.length > 0 && isActive) {
+      animationFrameRef.current = requestAnimationFrame(updateParticles);
+    } else {
+      setIsActive(false);
+    }
+  }, [isActive]);
+
+  const trigger = useCallback((x?: number, y?: number) => {
+    const centerX = x ?? 0;
+    const centerY = y ?? 0;
+
+    const newParticles: ParticleConfig[] = [];
+    for (let i = 0; i < particleCount; i++) {
+      const color = colors[Math.floor(Math.random() * colors.length)];
+      newParticles.push(createParticle(centerX, centerY, color));
+    }
+
+    // Create new array reference to avoid worklet issues
+    const particlesArray = [...newParticles];
+    particlesRef.current = particlesArray;
+    setParticles(particlesArray);
+    setIsActive(true);
+
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
+    animationFrameRef.current = requestAnimationFrame(updateParticles);
+
+    // Auto-stop after duration
+    setTimeout(() => {
+      setIsActive(false);
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    }, duration);
+  }, [particleCount, colors, duration, createParticle, updateParticles]);
+
+  useEffect(() => {
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    particles,
+    trigger,
+    isActive,
+  };
+};

package/src/molecules/animation/presentation/hooks/useGesture.ts

@@ -0,0 +1,61 @@
+/**
+ * useGesture Hook
+ *
+ * Orchestrator hook that combines gesture creators and state.
+ * Single Responsibility: Compose and expose gesture functionality.
+ */
+
+import { GestureDetector } from 'react-native-gesture-handler';
+import { useGestureState } from './useGestureState';
+import { useGestureCreators } from './useGestureCreators';
+import type {
+    TapGestureOptions,
+    PanGestureOptions,
+    PinchGestureOptions,
+} from './useGestureCreators';
+
+/**
+ * Hook for gesture handling
+ *
+ * @example
+ * const { createPanGesture, animatedStyle, GestureDetector } = useGesture();
+ *
+ * const panGesture = createPanGesture({
+ *   onEnd: (x, y) => console.log('Dragged to:', x, y),
+ * });
+ *
+ * return (
+ *   <GestureDetector gesture={panGesture}>
+ *     <Animated.View style={animatedStyle}>...</Animated.View>
+ *   </GestureDetector>
+ * );
+ */
+export const useGesture = () => {
+    const state = useGestureState();
+    const creators = useGestureCreators(state);
+
+    return {
+        // Gesture creators
+        createTapGesture: creators.createTapGesture,
+        createPanGesture: creators.createPanGesture,
+        createPinchGesture: creators.createPinchGesture,
+        createLongPressGesture: creators.createLongPressGesture,
+        // Shared values (for custom gestures)
+        translateX: state.translateX,
+        translateY: state.translateY,
+        scale: state.scale,
+        // Utilities
+        reset: state.reset,
+        // Animated style
+        animatedStyle: state.animatedStyle,
+        // Re-export GestureDetector for convenience
+        GestureDetector: GestureDetector as typeof GestureDetector,
+    };
+};
+
+// Re-export types for convenience
+export type {
+    TapGestureOptions,
+    PanGestureOptions,
+    PinchGestureOptions,
+} from './useGestureCreators';