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

package/src/molecules/animation/infrastructure/services/TimingAnimationConfigService.ts

@@ -0,0 +1,57 @@
+/**
+ * Timing Animation Config Service
+ *
+ * Infrastructure service for timing animation configurations.
+ * Separates timing configuration logic from domain entities.
+ */
+
+import type { AnimationTimingConfig } from '../../domain/entities/Animation';
+import {
+  AnimationPreset,
+  ANIMATION_CONSTANTS,
+} from '../../domain/entities/Animation';
+
+/**
+ * Service for providing timing animation configurations
+ */
+export class TimingAnimationConfigService {
+  /**
+   * Get preset timing config
+   */
+  static getTimingConfig(preset: AnimationPreset): AnimationTimingConfig {
+    const configs: Record<AnimationPreset, AnimationTimingConfig> = {
+      [AnimationPreset.FADE_IN]: {
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      },
+      [AnimationPreset.FADE_OUT]: {
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      },
+      [AnimationPreset.SLIDE_IN_UP]: {
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      },
+      [AnimationPreset.SLIDE_IN_DOWN]: {
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      },
+      [AnimationPreset.SLIDE_IN_LEFT]: {
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      },
+      [AnimationPreset.SLIDE_IN_RIGHT]: {
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      },
+      [AnimationPreset.SCALE_IN]: {
+        duration: ANIMATION_CONSTANTS.DURATION.FAST,
+      },
+      [AnimationPreset.SCALE_OUT]: {
+        duration: ANIMATION_CONSTANTS.DURATION.FAST,
+      },
+      [AnimationPreset.BOUNCE]: {
+        duration: ANIMATION_CONSTANTS.DURATION.SLOW,
+      },
+      [AnimationPreset.SHAKE]: {
+        duration: ANIMATION_CONSTANTS.DURATION.FAST,
+      },
+    };
+    
+    return configs[preset];
+  }
+}

package/src/molecules/animation/infrastructure/services/__tests__/SpringAnimationConfigService.test.ts

@@ -0,0 +1,114 @@
+/**
+ * SpringAnimationConfigService Tests
+ *
+ * Unit tests for spring animation configuration service.
+ */
+
+import { SpringAnimationConfigService } from '../SpringAnimationConfigService';
+import { AnimationPreset, ANIMATION_CONSTANTS } from '../../../domain/entities/Animation';
+
+describe('SpringAnimationConfigService', () => {
+  describe('getSpringConfig', () => {
+    it('should return config for FADE_IN preset', () => {
+      const config = SpringAnimationConfigService.getSpringConfig(AnimationPreset.FADE_IN);
+
+      expect(config).toEqual({
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      });
+    });
+
+    it('should return config for FADE_OUT preset', () => {
+      const config = SpringAnimationConfigService.getSpringConfig(AnimationPreset.FADE_OUT);
+
+      expect(config).toEqual({
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      });
+    });
+
+    it('should return config for SCALE_IN preset', () => {
+      const config = SpringAnimationConfigService.getSpringConfig(AnimationPreset.SCALE_IN);
+
+      expect(config).toEqual({
+        damping: 15,
+        stiffness: 150,
+      });
+    });
+
+    it('should return config for SCALE_OUT preset', () => {
+      const config = SpringAnimationConfigService.getSpringConfig(AnimationPreset.SCALE_OUT);
+
+      expect(config).toEqual({
+        damping: 15,
+        stiffness: 150,
+      });
+    });
+
+    it('should return config for BOUNCE preset', () => {
+      const config = SpringAnimationConfigService.getSpringConfig(AnimationPreset.BOUNCE);
+
+      expect(config).toEqual({
+        damping: 5,
+        stiffness: 120,
+      });
+    });
+
+    it('should return config for SHAKE preset', () => {
+      const config = SpringAnimationConfigService.getSpringConfig(AnimationPreset.SHAKE);
+
+      expect(config).toEqual({
+        damping: 8,
+        stiffness: 200,
+      });
+    });
+
+    it('should return default spring config for slide presets', () => {
+      const slidePresets = [
+        AnimationPreset.SLIDE_IN_UP,
+        AnimationPreset.SLIDE_IN_DOWN,
+        AnimationPreset.SLIDE_IN_LEFT,
+        AnimationPreset.SLIDE_IN_RIGHT,
+      ];
+
+      slidePresets.forEach(preset => {
+        const config = SpringAnimationConfigService.getSpringConfig(preset);
+        
+        expect(config).toEqual({
+          damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+          stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+        });
+      });
+    });
+
+    it('should handle all animation presets', () => {
+      const presets = Object.values(AnimationPreset);
+
+      presets.forEach(preset => {
+        const config = SpringAnimationConfigService.getSpringConfig(preset);
+        
+        expect(config).toBeDefined();
+        expect(config).toHaveProperty('damping');
+        expect(config).toHaveProperty('stiffness');
+        expect(typeof config.damping).toBe('number');
+        expect(typeof config.stiffness).toBe('number');
+        expect(config.damping).toBeGreaterThan(0);
+        expect(config.stiffness).toBeGreaterThan(0);
+      });
+    });
+
+    it('should have appropriate values for different animation types', () => {
+      const bounceConfig = SpringAnimationConfigService.getSpringConfig(AnimationPreset.BOUNCE);
+      const shakeConfig = SpringAnimationConfigService.getSpringConfig(AnimationPreset.SHAKE);
+      const scaleConfig = SpringAnimationConfigService.getSpringConfig(AnimationPreset.SCALE_IN);
+
+      // Bounce should be more bouncy (lower damping, moderate stiffness)
+      expect(bounceConfig.damping).toBeLessThan(scaleConfig.damping);
+      expect(bounceConfig.stiffness).toBeLessThan(scaleConfig.stiffness);
+
+      // Shake should be quick and responsive (higher damping and stiffness)
+      expect(shakeConfig.damping).toBeGreaterThan(bounceConfig.damping);
+      expect(shakeConfig.stiffness).toBeGreaterThan(scaleConfig.stiffness);
+    });
+  });
+});

package/src/molecules/animation/infrastructure/services/__tests__/TimingAnimationConfigService.test.ts

@@ -0,0 +1,105 @@
+/**
+ * TimingAnimationConfigService Tests
+ *
+ * Unit tests for timing animation configuration service.
+ */
+
+import { TimingAnimationConfigService } from '../TimingAnimationConfigService';
+import { AnimationPreset, ANIMATION_CONSTANTS } from '../../../domain/entities/Animation';
+
+describe('TimingAnimationConfigService', () => {
+  describe('getTimingConfig', () => {
+    it('should return config for FADE_IN preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.FADE_IN);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      });
+    });
+
+    it('should return config for FADE_OUT preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.FADE_OUT);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      });
+    });
+
+    it('should return config for SLIDE_IN_UP preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.SLIDE_IN_UP);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      });
+    });
+
+    it('should return config for SLIDE_IN_DOWN preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.SLIDE_IN_DOWN);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      });
+    });
+
+    it('should return config for SLIDE_IN_LEFT preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.SLIDE_IN_LEFT);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      });
+    });
+
+    it('should return config for SLIDE_IN_RIGHT preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.SLIDE_IN_RIGHT);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
+      });
+    });
+
+    it('should return config for SCALE_IN preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.SCALE_IN);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.FAST,
+      });
+    });
+
+    it('should return config for SCALE_OUT preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.SCALE_OUT);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.FAST,
+      });
+    });
+
+    it('should return config for BOUNCE preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.BOUNCE);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.SLOW,
+      });
+    });
+
+    it('should return config for SHAKE preset', () => {
+      const config = TimingAnimationConfigService.getTimingConfig(AnimationPreset.SHAKE);
+
+      expect(config).toEqual({
+        duration: ANIMATION_CONSTANTS.DURATION.FAST,
+      });
+    });
+
+    it('should handle all animation presets', () => {
+      const presets = Object.values(AnimationPreset);
+
+      presets.forEach(preset => {
+        const config = TimingAnimationConfigService.getTimingConfig(preset);
+        
+        expect(config).toBeDefined();
+        expect(config).toHaveProperty('duration');
+        expect(typeof config.duration).toBe('number');
+        expect(config.duration).toBeGreaterThan(0);
+      });
+    });
+  });
+});

package/src/molecules/animation/presentation/components/Fireworks.tsx

@@ -0,0 +1,126 @@
+/**
+ * Fireworks Component
+ *
+ * Particle-based fireworks animation component.
+ * Single Responsibility: Render fireworks particles.
+ */
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import { useFireworks } from '../hooks/useFireworks';
+import type { FireworksConfig } from '../../domain/entities/Fireworks';
+
+export interface FireworksProps extends FireworksConfig {
+  /**
+   * X position to trigger fireworks (0-1, relative to container width)
+   */
+  triggerX?: number;
+  /**
+   * Y position to trigger fireworks (0-1, relative to container height)
+   */
+  triggerY?: number;
+  /**
+   * Auto-trigger on mount
+   */
+  autoTrigger?: boolean;
+  /**
+   * Container style
+   */
+  style?: any;
+  /**
+   * Test ID
+   */
+  testID?: string;
+}
+
+/**
+ * Particle Component
+ */
+const Particle: React.FC<{
+  x: number;
+  y: number;
+  color: string;
+  size: number;
+  opacity: number;
+}> = ({ x, y, color, size, opacity }) => {
+  const animatedStyle = useAnimatedStyle(() => ({
+    position: 'absolute',
+    left: x,
+    top: y,
+    width: size,
+    height: size,
+    backgroundColor: color,
+    borderRadius: size / 2,
+    opacity: withTiming(opacity, { duration: 100 }),
+  }));
+
+  // @ts-ignore - Animated.View exists at runtime
+  return <Animated.View style={animatedStyle} />;
+};
+
+/**
+ * Fireworks Component
+ *
+ * @example
+ * <Fireworks
+ *   autoTrigger
+ *   particleCount={100}
+ *   colors={['#FF6B6B', '#4ECDC4']}
+ * />
+ */
+export const Fireworks: React.FC<FireworksProps> = ({
+  triggerX = 0.5,
+  triggerY = 0.5,
+  autoTrigger = false,
+  style,
+  testID = 'fireworks',
+  ...config
+}) => {
+  const { particles, trigger } = useFireworks(config);
+  const [containerSize, setContainerSize] = React.useState({ width: 0, height: 0 });
+
+  React.useEffect(() => {
+    if (autoTrigger && containerSize.width > 0 && containerSize.height > 0) {
+      const x = containerSize.width * triggerX;
+      const y = containerSize.height * triggerY;
+      trigger(x, y);
+    }
+  }, [autoTrigger, containerSize, triggerX, triggerY, trigger]);
+
+  const handleLayout = (event: any) => {
+    const { width, height } = event.nativeEvent.layout;
+    setContainerSize({ width, height });
+  };
+
+  return (
+    <View
+      style={[styles.container, style]}
+      onLayout={handleLayout}
+      testID={testID}
+      pointerEvents="none"
+    >
+      {particles.map((particle, index) => (
+        <Particle
+          key={`particle-${index}`}
+          x={particle.x}
+          y={particle.y}
+          color={particle.color}
+          size={particle.size}
+          opacity={particle.life}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden',
+  },
+});

package/src/molecules/animation/presentation/components/__tests__/Fireworks.test.tsx

@@ -0,0 +1,189 @@
+/**
+ * Fireworks Component Tests
+ *
+ * Unit tests for fireworks particle system.
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Fireworks } from '../Fireworks';
+import { FIREWORKS_CONSTANTS } from '../../../domain/entities/Fireworks';
+
+// Mock react-native-reanimated
+jest.mock('react-native-reanimated', () => ({
+  useAnimatedStyle: jest.fn((styleFactory) => styleFactory()),
+  withTiming: jest.fn((toValue, config) => ({ toValue, config })),
+}));
+
+// Mock useFireworks hook
+jest.mock('../../hooks/useFireworks', () => ({
+  useFireworks: jest.fn(() => ({
+    particles: [
+      { x: 100, y: 100, color: '#FF0000', size: 4, life: 1 },
+      { x: 150, y: 150, color: '#00FF00', size: 6, life: 0.5 },
+    ],
+    trigger: jest.fn(),
+    isActive: true,
+  })),
+}));
+
+describe('Fireworks Component', () => {
+  const defaultProps = {
+    colors: ['#FF0000', '#00FF00', '#0000FF'],
+    testID: 'test-fireworks',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly', () => {
+    const { getByTestId } = render(<Fireworks {...defaultProps} />);
+
+    expect(getByTestId('test-fireworks')).toBeTruthy();
+  });
+
+  it('should render particles', () => {
+    const { getAllByTestId } = render(<Fireworks {...defaultProps} />);
+
+    const particles = getAllByTestId(/particle-/);
+    expect(particles).toHaveLength(2);
+  });
+
+  it('should use default props when not provided', () => {
+    const { getByTestId } = render(
+      <Fireworks colors={['#FF0000']} />
+    );
+
+    expect(getByTestId('fireworks')).toBeTruthy();
+  });
+
+  it('should apply custom styles', () => {
+    const customStyle = { backgroundColor: 'blue' };
+    const { getByTestId } = render(
+      <Fireworks 
+        colors={['#FF0000']} 
+        style={customStyle}
+      />
+    );
+
+    const container = getByTestId('fireworks');
+    expect(container.props.style).toEqual(
+      expect.arrayContaining([customStyle])
+    );
+  });
+
+  it('should handle layout changes', () => {
+    const { getByTestId } = render(<Fireworks {...defaultProps} />);
+    const container = getByTestId('test-fireworks');
+
+    fireEvent(container, 'layout', {
+      nativeEvent: {
+        layout: { width: 300, height: 400 }
+      }
+    });
+  });
+
+  it('should have pointerEvents disabled', () => {
+    const { getByTestId } = render(<Fireworks {...defaultProps} />);
+    const container = getByTestId('test-fireworks');
+
+    expect(container.props.pointerEvents).toBe('none');
+  });
+
+  describe('autoTrigger', () => {
+    it('should trigger fireworks when autoTrigger is true and container has size', () => {
+      const mockTrigger = jest.fn();
+      const { useFireworks } = require('../../hooks/useFireworks');
+      useFireworks.mockReturnValue({
+        particles: [],
+        trigger: mockTrigger,
+        isActive: false,
+      });
+
+      const { getByTestId } = render(
+        <Fireworks 
+          colors={['#FF0000']} 
+          autoTrigger={true}
+        />
+      );
+
+      const container = getByTestId('fireworks');
+      fireEvent(container, 'layout', {
+        nativeEvent: {
+          layout: { width: 300, height: 400 }
+        }
+      });
+
+      expect(mockTrigger).toHaveBeenCalledWith(150, 200); // center of container
+    });
+
+    it('should not trigger when autoTrigger is false', () => {
+      const mockTrigger = jest.fn();
+      const { useFireworks } = require('../../hooks/useFireworks');
+      useFireworks.mockReturnValue({
+        particles: [],
+        trigger: mockTrigger,
+        isActive: false,
+      });
+
+      render(
+        <Fireworks 
+          colors={['#FF0000']} 
+          autoTrigger={false}
+        />
+      );
+
+      expect(mockTrigger).not.toHaveBeenCalled();
+    });
+
+    it('should use custom trigger position', () => {
+      const mockTrigger = jest.fn();
+      const { useFireworks } = require('../../hooks/useFireworks');
+      useFireworks.mockReturnValue({
+        particles: [],
+        trigger: mockTrigger,
+        isActive: false,
+      });
+
+      const { getByTestId } = render(
+        <Fireworks 
+          colors={['#FF0000']} 
+          autoTrigger={true}
+          triggerX={0.25}
+          triggerY={0.75}
+        />
+      );
+
+      const container = getByTestId('fireworks');
+      fireEvent(container, 'layout', {
+        nativeEvent: {
+          layout: { width: 400, height: 200 }
+        }
+      });
+
+      expect(mockTrigger).toHaveBeenCalledWith(100, 150); // 25% of width, 75% of height
+    });
+  });
+
+  describe('Particle rendering', () => {
+    it('should render particle with correct properties', () => {
+      const particles = [
+        { x: 100, y: 100, color: '#FF0000', size: 4, life: 1 },
+      ];
+      const { useFireworks } = require('../../hooks/useFireworks');
+      useFireworks.mockReturnValue({
+        particles,
+        trigger: jest.fn(),
+        isActive: false,
+      });
+
+      render(<Fireworks colors={['#FF0000']} />);
+
+      // Particle should be rendered with correct properties
+      expect(useFireworks).toHaveBeenCalledWith({
+        colors: ['#FF0000'],
+      });
+    });
+  });
+});