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

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

@@ -1,127 +0,0 @@
-/**
- * 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';
-
-const AnimatedView = (Animated as any).createAnimatedComponent(View);
-
-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 }),
-  }));
-
-  return <AnimatedView 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

@@ -1,185 +0,0 @@
-/**
- * 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 { useFireworks } from '../../hooks/useFireworks';
-
-// 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();
-      (useFireworks as jest.Mock).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();
-      (useFireworks as jest.Mock).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();
-      (useFireworks as jest.Mock).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 },
-      ];
-      (useFireworks as jest.Mock).mockReturnValue({
-        particles,
-        trigger: jest.fn(),
-        isActive: false,
-      });
-
-      render(<Fireworks colors={['#FF0000']} />);
-
-      // Particle should be rendered with correct properties
-      expect(useFireworks).toHaveBeenCalledWith({
-        colors: ['#FF0000'],
-      });
-    });
-  });
-});

package/src/molecules/animation/presentation/hooks/__tests__/useAnimation.integration.test.ts

@@ -1,210 +0,0 @@
-/**
- * useAnimation Hook Integration Tests
- *
- * Integration tests for combined animation functionality.
- */
-
-import { renderHook, act } from '@testing-library/react';
-import { useAnimation } from '../useAnimation';
-import { useTimingAnimation } from '../useTimingAnimation';
-import { useSpringAnimation } from '../useSpringAnimation';
-import { useTransformAnimation } from '../useTransformAnimation';
-import { useAnimatedStyle } 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 })),
-  withSpring: jest.fn((toValue, config) => ({ toValue, config })),
-  withSequence: jest.fn((...animations) => animations),
-  withRepeat: jest.fn((animation, count, reverse) => ({ animation, count, reverse })),
-  Easing: {
-    ease: jest.fn(),
-    out: jest.fn((easing) => easing),
-    bezier: jest.fn(() => jest.fn()),
-    linear: jest.fn(),
-  },
-}));
-
-// Define singleton mock objects
-const mockTiming = {
-  fadeIn: jest.fn(),
-  fadeOut: jest.fn(),
-  slideInUp: jest.fn(),
-  slideInDown: jest.fn(),
-  slideInLeft: jest.fn(),
-  slideInRight: jest.fn(),
-  opacity: { value: 1 },
-  translateY: { value: 0 },
-  translateX: { value: 0 },
-};
-
-const mockSpring = {
-  scaleIn: jest.fn(),
-  scaleOut: jest.fn(),
-  bounce: jest.fn(),
-  scale: { value: 1 },
-};
-
-const mockTransform = {
-  shake: jest.fn(),
-  pulse: jest.fn(),
-  spin: jest.fn(),
-  translateX: { value: 0 },
-  scale: { value: 1 },
-  rotate: { value: 0 },
-};
-
-// Mock all sub-hooks
-jest.mock('../useTimingAnimation', () => ({
-  useTimingAnimation: jest.fn(() => mockTiming),
-}));
-
-jest.mock('../useSpringAnimation', () => ({
-  useSpringAnimation: jest.fn(() => mockSpring),
-}));
-
-jest.mock('../useTransformAnimation', () => ({
-  useTransformAnimation: jest.fn(() => mockTransform),
-}));
-
-describe('useAnimation Integration', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should integrate all animation hooks', () => {
-    renderHook(() => useAnimation());
-
-    expect(useTimingAnimation).toHaveBeenCalled();
-    expect(useSpringAnimation).toHaveBeenCalled();
-    expect(useTransformAnimation).toHaveBeenCalled();
-  });
-
-  it('should provide all timing animations', () => {
-    const { result } = renderHook(() => useAnimation());
-
-    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');
-  });
-
-  it('should provide all spring animations', () => {
-    const { result } = renderHook(() => useAnimation());
-
-    expect(typeof result.current.scaleIn).toBe('function');
-    expect(typeof result.current.scaleOut).toBe('function');
-    expect(typeof result.current.bounce).toBe('function');
-  });
-
-  it('should provide all transform animations', () => {
-    const { result } = renderHook(() => useAnimation());
-
-    expect(typeof result.current.shake).toBe('function');
-    expect(typeof result.current.pulse).toBe('function');
-    expect(typeof result.current.spin).toBe('function');
-  });
-
-  it('should provide all shared values', () => {
-    const { result } = renderHook(() => useAnimation());
-
-    expect(result.current.opacity).toBeDefined();
-    expect(result.current.translateY).toBeDefined();
-    expect(result.current.translateX).toBeDefined();
-    expect(result.current.scale).toBeDefined();
-    expect(result.current.rotate).toBeDefined();
-  });
-
-  it('should provide animated style', () => {
-    const { result } = renderHook(() => useAnimation());
-
-    expect(typeof result.current.animatedStyle).toBe('function');
-    expect(useAnimatedStyle).toHaveBeenCalled();
-  });
-
-  describe('animation combinations', () => {
-    it('should allow combining fade and scale animations', () => {
-      const { result } = renderHook(() => useAnimation());
-
-      act(() => {
-        result.current.fadeIn();
-        result.current.scaleIn();
-      });
-
-      expect(mockTiming.fadeIn).toHaveBeenCalled();
-      expect(mockSpring.scaleIn).toHaveBeenCalled();
-    });
-
-    it('should allow combining slide and rotate animations', () => {
-      const { result } = renderHook(() => useAnimation());
-
-      act(() => {
-        result.current.slideInUp();
-        result.current.spin();
-      });
-
-      expect(mockTiming.slideInUp).toHaveBeenCalled();
-      expect(mockTransform.spin).toHaveBeenCalled();
-    });
-
-    it('should allow complex animation sequences', () => {
-      const { result } = renderHook(() => useAnimation());
-
-      act(() => {
-        result.current.fadeIn();
-        result.current.slideInUp();
-        result.current.scaleIn();
-        result.current.bounce();
-        result.current.shake();
-        result.current.pulse();
-        result.current.spin();
-      });
-
-      expect(mockTiming.fadeIn).toHaveBeenCalled();
-      expect(mockTiming.slideInUp).toHaveBeenCalled();
-      expect(mockSpring.scaleIn).toHaveBeenCalled();
-      expect(mockSpring.bounce).toHaveBeenCalled();
-      expect(mockTransform.shake).toHaveBeenCalled();
-      expect(mockTransform.pulse).toHaveBeenCalled();
-      expect(mockTransform.spin).toHaveBeenCalled();
-    });
-  });
-
-  describe('animated style composition', () => {
-    it('should compose styles from all animation types', () => {
-      const mockStyle = {
-        opacity: 1,
-        transform: [
-          { translateY: 0 },
-          { translateX: 0 },
-          { scale: 1 },
-          { rotate: '0deg' },
-        ],
-      };
-
-      (useAnimatedStyle as jest.Mock).mockReturnValue(mockStyle);
-
-      const { result } = renderHook(() => useAnimation());
-
-      expect(result.current.animatedStyle).toBe(mockStyle);
-    });
-
-    it('should prioritize transform values over timing/spring values', () => {
-      // Set transform values to non-default
-      mockTransform.translateX.value = 50;
-      mockTransform.scale.value = 1.5;
-
-      renderHook(() => useAnimation());
-
-      expect(useAnimatedStyle).toHaveBeenCalledWith(
-        expect.any(Function)
-      );
-    });
-  });
-});