@umituz/react-native-design-system 2.6.47 → 2.6.49

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';

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

@@ -1,163 +0,0 @@
-/**
- * useGestureCreators Hook
- *
- * Hook for creating gesture handlers.
- * Single Responsibility: Create gesture handlers only.
- */
-
-import { useCallback } from 'react';
-import {
-    runOnJS,
-} from 'react-native-reanimated';
-import {
-    Gesture,
-} from 'react-native-gesture-handler';
-import type {
-    SharedValue,
-} from 'react-native-reanimated';
-
-/**
- * Tap gesture options
- */
-export interface TapGestureOptions {
-    numberOfTaps?: number;
-    maxDuration?: number;
-    onTap?: () => void;
-}
-
-/**
- * Pan gesture options
- */
-export interface PanGestureOptions {
-    onStart?: () => void;
-    onUpdate?: (x: number, y: number) => void;
-    onEnd?: (x: number, y: number) => void;
-}
-
-/**
- * Pinch gesture options
- */
-export interface PinchGestureOptions {
-    onStart?: () => void;
-    onUpdate?: (scale: number) => void;
-    onEnd?: (scale: number) => void;
-}
-
-/**
- * Long press gesture options
- */
-export interface LongPressGestureOptions {
-    minDuration?: number;
-    onLongPress?: () => void;
-}
-
-/**
- * Gesture state interface
- */
-export interface GestureState {
-    translateX: SharedValue<number>;
-    translateY: SharedValue<number>;
-    scale: SharedValue<number>;
-    savedTranslateX: SharedValue<number>;
-    savedTranslateY: SharedValue<number>;
-    savedScale: SharedValue<number>;
-}
-
-/**
- * Hook for creating gesture handlers
- */
-export const useGestureCreators = (state: GestureState) => {
-    const { translateX, translateY, scale, savedTranslateX, savedTranslateY, savedScale } = state;
-
-    const createTapGesture = useCallback(
-        (options: TapGestureOptions = {}) => {
-            const { numberOfTaps = 1, maxDuration = 500, onTap } = options;
-
-            return Gesture.Tap()
-                .numberOfTaps(numberOfTaps)
-                .maxDuration(maxDuration)
-                .onStart(() => {
-                    if (onTap) {
-                        runOnJS(onTap)();
-                    }
-                });
-        },
-        []
-    );
-
-    const createPanGesture = useCallback(
-        (options: PanGestureOptions = {}) => {
-            const { onStart, onUpdate, onEnd } = options;
-
-            return Gesture.Pan()
-                .onStart(() => {
-                    savedTranslateX.value = translateX.value;
-                    savedTranslateY.value = translateY.value;
-                    if (onStart) {
-                        runOnJS(onStart)();
-                    }
-                })
-                .onUpdate((event: any) => {
-                    translateX.value = savedTranslateX.value + event.translationX;
-                    translateY.value = savedTranslateY.value + event.translationY;
-                    if (onUpdate) {
-                        runOnJS(onUpdate)(translateX.value, translateY.value);
-                    }
-                })
-                .onEnd(() => {
-                    if (onEnd) {
-                        runOnJS(onEnd)(translateX.value, translateY.value);
-                    }
-                });
-        },
-        [translateX, translateY, savedTranslateX, savedTranslateY]
-    );
-
-    const createPinchGesture = useCallback(
-        (options: PinchGestureOptions = {}) => {
-            const { onStart, onUpdate, onEnd } = options;
-
-            return Gesture.Pinch()
-                .onStart(() => {
-                    savedScale.value = scale.value;
-                    if (onStart) {
-                        runOnJS(onStart)();
-                    }
-                })
-                .onUpdate((event: any) => {
-                    scale.value = savedScale.value * event.scale;
-                    if (onUpdate) {
-                        runOnJS(onUpdate)(scale.value);
-                    }
-                })
-                .onEnd(() => {
-                    if (onEnd) {
-                        runOnJS(onEnd)(scale.value);
-                    }
-                });
-        },
-        [scale, savedScale]
-    );
-
-    const createLongPressGesture = useCallback(
-        (options: LongPressGestureOptions = {}) => {
-            const { minDuration = 500, onLongPress } = options;
-
-            return Gesture.LongPress()
-                .minDuration(minDuration)
-                .onStart(() => {
-                    if (onLongPress) {
-                        runOnJS(onLongPress)();
-                    }
-                });
-        },
-        []
-    );
-
-    return {
-        createTapGesture,
-        createPanGesture,
-        createPinchGesture,
-        createLongPressGesture,
-    };
-};

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

@@ -1,53 +0,0 @@
-/**
- * useGestureState Hook
- *
- * Hook for managing gesture state (shared values, reset).
- * Single Responsibility: Manage gesture state only.
- */
-
-import { useCallback } from 'react';
-import {
-    useSharedValue,
-    useAnimatedStyle,
-    withSpring,
-} from 'react-native-reanimated';
-
-/**
- * Hook for managing gesture state
- */
-export const useGestureState = () => {
-    const translateX = useSharedValue(0);
-    const translateY = useSharedValue(0);
-    const scale = useSharedValue(1);
-    const savedTranslateX = useSharedValue(0);
-    const savedTranslateY = useSharedValue(0);
-    const savedScale = useSharedValue(1);
-
-    const reset = useCallback(() => {
-        translateX.value = withSpring(0);
-        translateY.value = withSpring(0);
-        scale.value = withSpring(1);
-        savedTranslateX.value = 0;
-        savedTranslateY.value = 0;
-        savedScale.value = 1;
-    }, [translateX, translateY, scale, savedTranslateX, savedTranslateY, savedScale]);
-
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [
-            { translateX: translateX.value },
-            { translateY: translateY.value },
-            { scale: scale.value },
-        ] as any,
-    }));
-
-    return {
-        translateX,
-        translateY,
-        scale,
-        savedTranslateX,
-        savedTranslateY,
-        savedScale,
-        reset,
-        animatedStyle,
-    };
-};