@umituz/react-native-design-system 2.6.48 → 2.6.50

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

@@ -1,172 +0,0 @@
-/**
- * useTimingAnimation Hook Tests
- *
- * Unit tests for timing-based animations (fade, slide).
- */
-
-import { renderHook, act } from '@testing-library/react';
-import { useTimingAnimation } from '../useTimingAnimation';
-import { ANIMATION_CONSTANTS } from '../../../domain/entities/Animation';
-import { withTiming } from 'react-native-reanimated';
-
-// 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(() => ({
-      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());
-
-      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 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());
-
-      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());
-
-      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

@@ -1,133 +0,0 @@
-/**
- * useTransformAnimation Hook Tests
- *
- * Unit tests for transform-based animations (spin, pulse, shake).
- */
-
-import { renderHook, act } from '@testing-library/react';
-import { useTransformAnimation } from '../useTransformAnimation';
-import { withTiming, withSequence, withRepeat, Easing } from 'react-native-reanimated';
-
-// 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());
-
-      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());
-
-      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 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());
-
-      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 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

@@ -1,77 +0,0 @@
-/**
- * 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` },
-            ] as any,
-        };
-    });
-
-    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

@@ -1,144 +0,0 @@
-/**
- * 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) {
-    // Return no-op when colors not provided
-    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 isActiveRef = useRef(false);
-
-  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 && isActiveRef.current) {
-      animationFrameRef.current = requestAnimationFrame(updateParticles);
-    } else {
-      setIsActive(false);
-      isActiveRef.current = false;
-    }
-  }, [setIsActive]); // Removed isActive dependency
-
-  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 colorIndex = Math.floor(Math.random() * colors.length);
-      const color = colors[colorIndex] ?? colors[0] ?? '#FFFFFF';
-      newParticles.push(createParticle(centerX, centerY, color));
-    }
-
-    // Create new array reference to avoid worklet issues
-    const particlesArray = [...newParticles];
-    particlesRef.current = particlesArray;
-    setParticles(particlesArray);
-    setIsActive(true);
-    isActiveRef.current = 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

@@ -1,57 +0,0 @@
-/**
- * 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';
-
-
-/**
- * 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';