@umituz/react-native-design-system 2.3.31 → 2.3.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.31",
+  "version": "2.3.33",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -101,8 +101,11 @@
     "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/native": "^6.0.0",
     "@react-navigation/stack": "^6.4.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
     "@types/react": "~19.1.10",
+    "@types/react-native": "^0.72.8",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
     "@umituz/react-native-haptics": "^1.0.2",

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

@@ -55,7 +55,6 @@ const Particle: React.FC<{
     opacity: withTiming(opacity, { duration: 100 }),
   }));
 
-  // @ts-ignore - Animated.View exists at runtime
   return <Animated.View style={animatedStyle} />;
 };
 

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

@@ -7,7 +7,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
 import { Fireworks } from '../Fireworks';
-import { FIREWORKS_CONSTANTS } from '../../../domain/entities/Fireworks';
+import { useFireworks } from '../../hooks/useFireworks';
 
 // Mock react-native-reanimated
 jest.mock('react-native-reanimated', () => ({
@@ -61,8 +61,8 @@ describe('Fireworks Component', () => {
   it('should apply custom styles', () => {
     const customStyle = { backgroundColor: 'blue' };
     const { getByTestId } = render(
-      <Fireworks 
-        colors={['#FF0000']} 
+      <Fireworks
+        colors={['#FF0000']}
         style={customStyle}
       />
     );
@@ -94,16 +94,15 @@ describe('Fireworks Component', () => {
   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({
+      (useFireworks as jest.Mock).mockReturnValue({
         particles: [],
         trigger: mockTrigger,
         isActive: false,
       });
 
       const { getByTestId } = render(
-        <Fireworks 
-          colors={['#FF0000']} 
+        <Fireworks
+          colors={['#FF0000']}
           autoTrigger={true}
         />
       );
@@ -120,16 +119,15 @@ describe('Fireworks Component', () => {
 
     it('should not trigger when autoTrigger is false', () => {
       const mockTrigger = jest.fn();
-      const { useFireworks } = require('../../hooks/useFireworks');
-      useFireworks.mockReturnValue({
+      (useFireworks as jest.Mock).mockReturnValue({
         particles: [],
         trigger: mockTrigger,
         isActive: false,
       });
 
       render(
-        <Fireworks 
-          colors={['#FF0000']} 
+        <Fireworks
+          colors={['#FF0000']}
           autoTrigger={false}
         />
       );
@@ -139,16 +137,15 @@ describe('Fireworks Component', () => {
 
     it('should use custom trigger position', () => {
       const mockTrigger = jest.fn();
-      const { useFireworks } = require('../../hooks/useFireworks');
-      useFireworks.mockReturnValue({
+      (useFireworks as jest.Mock).mockReturnValue({
         particles: [],
         trigger: mockTrigger,
         isActive: false,
       });
 
       const { getByTestId } = render(
-        <Fireworks 
-          colors={['#FF0000']} 
+        <Fireworks
+          colors={['#FF0000']}
           autoTrigger={true}
           triggerX={0.25}
           triggerY={0.75}
@@ -171,8 +168,7 @@ describe('Fireworks Component', () => {
       const particles = [
         { x: 100, y: 100, color: '#FF0000', size: 4, life: 1 },
       ];
-      const { useFireworks } = require('../../hooks/useFireworks');
-      useFireworks.mockReturnValue({
+      (useFireworks as jest.Mock).mockReturnValue({
         particles,
         trigger: jest.fn(),
         isActive: false,

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

@@ -6,6 +6,10 @@
 
 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', () => ({
@@ -25,39 +29,46 @@ jest.mock('react-native-reanimated', () => ({
   },
 }));
 
+// 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(() => ({
-    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 },
-  })),
+  useTimingAnimation: jest.fn(() => mockTiming),
 }));
 
 jest.mock('../useSpringAnimation', () => ({
-  useSpringAnimation: jest.fn(() => ({
-    scaleIn: jest.fn(),
-    scaleOut: jest.fn(),
-    bounce: jest.fn(),
-    scale: { value: 1 },
-  })),
+  useSpringAnimation: jest.fn(() => mockSpring),
 }));
 
 jest.mock('../useTransformAnimation', () => ({
-  useTransformAnimation: jest.fn(() => ({
-    shake: jest.fn(),
-    pulse: jest.fn(),
-    spin: jest.fn(),
-    translateX: { value: 0 },
-    scale: { value: 1 },
-    rotate: { value: 0 },
-  })),
+  useTransformAnimation: jest.fn(() => mockTransform),
 }));
 
 describe('useAnimation Integration', () => {
@@ -66,10 +77,6 @@ describe('useAnimation Integration', () => {
   });
 
   it('should integrate all animation hooks', () => {
-    const { useTimingAnimation } = require('../useTimingAnimation');
-    const { useSpringAnimation } = require('../useSpringAnimation');
-    const { useTransformAnimation } = require('../useTransformAnimation');
-
     renderHook(() => useAnimation());
 
     expect(useTimingAnimation).toHaveBeenCalled();
@@ -116,7 +123,6 @@ describe('useAnimation Integration', () => {
 
   it('should provide animated style', () => {
     const { result } = renderHook(() => useAnimation());
-    const { useAnimatedStyle } = require('react-native-reanimated');
 
     expect(typeof result.current.animatedStyle).toBe('function');
     expect(useAnimatedStyle).toHaveBeenCalled();
@@ -125,8 +131,6 @@ describe('useAnimation Integration', () => {
   describe('animation combinations', () => {
     it('should allow combining fade and scale animations', () => {
       const { result } = renderHook(() => useAnimation());
-      const mockTiming = require('../useTimingAnimation').useTimingAnimation();
-      const mockSpring = require('../useSpringAnimation').useSpringAnimation();
 
       act(() => {
         result.current.fadeIn();
@@ -139,8 +143,6 @@ describe('useAnimation Integration', () => {
 
     it('should allow combining slide and rotate animations', () => {
       const { result } = renderHook(() => useAnimation());
-      const mockTiming = require('../useTimingAnimation').useTimingAnimation();
-      const mockTransform = require('../useTransformAnimation').useTransformAnimation();
 
       act(() => {
         result.current.slideInUp();
@@ -153,9 +155,6 @@ describe('useAnimation Integration', () => {
 
     it('should allow complex animation sequences', () => {
       const { result } = renderHook(() => useAnimation());
-      const mockTiming = require('../useTimingAnimation').useTimingAnimation();
-      const mockSpring = require('../useSpringAnimation').useSpringAnimation();
-      const mockTransform = require('../useTransformAnimation').useTransformAnimation();
 
       act(() => {
         result.current.fadeIn();
@@ -179,7 +178,6 @@ describe('useAnimation Integration', () => {
 
   describe('animated style composition', () => {
     it('should compose styles from all animation types', () => {
-      const { useAnimatedStyle } = require('react-native-reanimated');
       const mockStyle = {
         opacity: 1,
         transform: [
@@ -190,7 +188,7 @@ describe('useAnimation Integration', () => {
         ],
       };
 
-      useAnimatedStyle.mockReturnValue(mockStyle);
+      (useAnimatedStyle as jest.Mock).mockReturnValue(mockStyle);
 
       const { result } = renderHook(() => useAnimation());
 
@@ -198,10 +196,6 @@ describe('useAnimation Integration', () => {
     });
 
     it('should prioritize transform values over timing/spring values', () => {
-      const { useAnimatedStyle } = require('react-native-reanimated');
-      const mockTiming = require('../useTimingAnimation').useTimingAnimation();
-      const mockTransform = require('../useTransformAnimation').useTransformAnimation();
-
       // Set transform values to non-default
       mockTransform.translateX.value = 50;
       mockTransform.scale.value = 1.5;

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

@@ -5,7 +5,10 @@
  */
 
 import { renderHook } from '@testing-library/react';
+import { GestureDetector } from 'react-native-gesture-handler';
 import { useGesture } from '../useGesture';
+import { useGestureCreators } from '../useGestureCreators';
+import { useGestureState } from '../useGestureState';
 
 // Mock react-native-gesture-handler
 jest.mock('react-native-gesture-handler', () => ({
@@ -39,9 +42,6 @@ jest.mock('../useGestureState', () => ({
     translateX: { value: 0 },
     translateY: { value: 0 },
     scale: { value: 1 },
-    savedTranslateX: { value: 0 },
-    savedTranslateY: { value: 0 },
-    savedScale: { value: 1 },
     reset: jest.fn(),
     animatedStyle: {},
   })),
@@ -88,21 +88,18 @@ describe('useGesture', () => {
 
   it('should export GestureDetector', () => {
     const { result } = renderHook(() => useGesture());
-    const { GestureDetector } = require('react-native-gesture-handler');
 
     expect(result.current.GestureDetector).toBe(GestureDetector);
   });
 
   describe('gesture creators integration', () => {
     it('should integrate with useGestureCreators', () => {
-      const { useGestureCreators } = require('../useGestureCreators');
       renderHook(() => useGesture());
 
       expect(useGestureCreators).toHaveBeenCalled();
     });
 
     it('should integrate with useGestureState', () => {
-      const { useGestureState } = require('../useGestureState');
       renderHook(() => useGesture());
 
       expect(useGestureState).toHaveBeenCalled();

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

@@ -6,7 +6,8 @@
 
 import { renderHook, act } from '@testing-library/react';
 import { useSpringAnimation } from '../useSpringAnimation';
-import { AnimationPreset, ANIMATION_CONSTANTS } from '../../../domain/entities/Animation';
+import { ANIMATION_CONSTANTS } from '../../../domain/entities/Animation';
+import { withSpring, withSequence } from 'react-native-reanimated';
 
 // Mock react-native-reanimated
 jest.mock('react-native-reanimated', () => ({
@@ -21,7 +22,7 @@ jest.mock('react-native-reanimated', () => ({
 // Mock SpringAnimationConfigService
 jest.mock('../../../infrastructure/services/SpringAnimationConfigService', () => ({
   SpringAnimationConfigService: {
-    getSpringConfig: jest.fn((preset) => ({
+    getSpringConfig: jest.fn(() => ({
       damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
       stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
     })),
@@ -50,7 +51,6 @@ describe('useSpringAnimation', () => {
   describe('scaleIn', () => {
     it('should animate scale from 0 to 1 with default config', () => {
       const { result } = renderHook(() => useSpringAnimation());
-      const { withSpring } = require('react-native-reanimated');
 
       act(() => {
         result.current.scaleIn();
@@ -64,7 +64,6 @@ describe('useSpringAnimation', () => {
 
     it('should use custom config when provided', () => {
       const { result } = renderHook(() => useSpringAnimation());
-      const { withSpring } = require('react-native-reanimated');
       const customConfig = { damping: 20, stiffness: 200 };
 
       act(() => {
@@ -78,7 +77,6 @@ describe('useSpringAnimation', () => {
   describe('scaleOut', () => {
     it('should animate scale to 0 with default config', () => {
       const { result } = renderHook(() => useSpringAnimation());
-      const { withSpring } = require('react-native-reanimated');
 
       act(() => {
         result.current.scaleOut();
@@ -94,7 +92,6 @@ describe('useSpringAnimation', () => {
   describe('bounce', () => {
     it('should create bounce animation sequence', () => {
       const { result } = renderHook(() => useSpringAnimation());
-      const { withSpring, withSequence } = require('react-native-reanimated');
       const mockConfig = { damping: 5, stiffness: 120 };
 
       act(() => {
@@ -110,7 +107,6 @@ describe('useSpringAnimation', () => {
 
     it('should use default config when none provided', () => {
       const { result } = renderHook(() => useSpringAnimation());
-      const { withSpring, withSequence } = require('react-native-reanimated');
 
       act(() => {
         result.current.bounce();

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

@@ -6,7 +6,8 @@
 
 import { renderHook, act } from '@testing-library/react';
 import { useTimingAnimation } from '../useTimingAnimation';
-import { AnimationPreset, ANIMATION_CONSTANTS } from '../../../domain/entities/Animation';
+import { ANIMATION_CONSTANTS } from '../../../domain/entities/Animation';
+import { withTiming } from 'react-native-reanimated';
 
 // Mock react-native-reanimated
 jest.mock('react-native-reanimated', () => ({
@@ -25,7 +26,7 @@ jest.mock('react-native-reanimated', () => ({
 // Mock AnimationConfigService
 jest.mock('../../../infrastructure/services/TimingAnimationConfigService', () => ({
   TimingAnimationConfigService: {
-    getTimingConfig: jest.fn((preset) => ({
+    getTimingConfig: jest.fn(() => ({
       duration: ANIMATION_CONSTANTS.DURATION.NORMAL,
     })),
   },
@@ -58,7 +59,6 @@ describe('useTimingAnimation', () => {
   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();
@@ -72,7 +72,6 @@ describe('useTimingAnimation', () => {
 
     it('should use custom config when provided', () => {
       const { result } = renderHook(() => useTimingAnimation());
-      const { withTiming } = require('react-native-reanimated');
       const customConfig = { duration: 500 };
 
       act(() => {
@@ -86,7 +85,6 @@ describe('useTimingAnimation', () => {
   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();
@@ -102,7 +100,6 @@ describe('useTimingAnimation', () => {
   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();

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

@@ -6,6 +6,7 @@
 
 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', () => ({
@@ -45,7 +46,6 @@ describe('useTransformAnimation', () => {
   describe('shake', () => {
     it('should create shake animation sequence', () => {
       const { result } = renderHook(() => useTransformAnimation());
-      const { withTiming, withSequence, withRepeat } = require('react-native-reanimated');
 
       act(() => {
         result.current.shake();
@@ -62,7 +62,6 @@ describe('useTransformAnimation', () => {
   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();
@@ -77,7 +76,6 @@ describe('useTransformAnimation', () => {
 
     it('should use custom repeat count', () => {
       const { result } = renderHook(() => useTransformAnimation());
-      const { withTiming, withSequence, withRepeat } = require('react-native-reanimated');
       const customRepeatCount = 3;
 
       act(() => {
@@ -95,7 +93,6 @@ describe('useTransformAnimation', () => {
   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();
@@ -110,7 +107,6 @@ describe('useTransformAnimation', () => {
 
     it('should use custom repeat count', () => {
       const { result } = renderHook(() => useTransformAnimation());
-      const { withTiming, withRepeat } = require('react-native-reanimated');
       const customRepeatCount = 2;
 
       act(() => {

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

@@ -8,11 +8,7 @@
 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

package/src/molecules/animation/types/global.d.ts

@@ -1,9 +1,5 @@
-/// <reference types="react" />
-/// <reference types="react-native" />
-
 declare module 'react-native-reanimated' {
   import React from 'react';
-  import { ViewProps, ViewStyle } from 'react-native';
 
   export interface WithTimingConfig {
     duration?: number;
@@ -39,7 +35,7 @@ declare module 'react-native-reanimated' {
   export function runOnUI<T>(fn: () => T): () => T;
   export function runOnJS<T extends (...args: any[]) => any>(fn: T): T;
   export function cancelAnimation(sharedValue: SharedValue<any>): void;
-  
+
   export const Easing: {
     linear: (t: number) => number;
     ease: (t: number) => number;
@@ -58,7 +54,6 @@ declare module 'react-native-reanimated' {
 
 declare module 'react-native-gesture-handler' {
   import React from 'react';
-  import { ViewStyle } from 'react-native';
 
   export interface PanGestureHandlerProps {
     onGestureEvent?: (event: any) => void;

package/src/molecules/countdown/components/Countdown.tsx

@@ -28,10 +28,8 @@ export const Countdown: React.FC<CountdownProps> = ({
 }) => {
     const tokens = useAppDesignTokens();
     const {
-        showIcon = true,
         showLabel = true,
         showToggle = alternateTargets.length > 0,
-        layout = 'grid',
         size = 'medium',
         showDays,
         showHours = true,
@@ -63,7 +61,7 @@ export const Countdown: React.FC<CountdownProps> = ({
         }
     };
 
-    const defaultFormatLabel = (unit: 'days' | 'hours' | 'minutes' | 'seconds', value: number) => {
+    const defaultFormatLabel = (unit: 'days' | 'hours' | 'minutes' | 'seconds') => {
         const labels = {
             days: 'DAYS',
             hours: 'HOURS',

package/src/molecules/navigation/utils/AppNavigation.ts

@@ -81,10 +81,9 @@ export class AppNavigation {
     * Navigate to a screen in a nested navigator (e.g. Tab > Stack > Screen)
     */
     static navigateToNested(parentParams: { screen: string; params?: any }): void {
-        // This is a simplified wrapper for navigating to nested stacks which usually looks like:
-        // navigate('ParentStack', { screen: 'ChildScreen', params: { ... } })
-        // But React Navigation handle this quite well with basic .navigate too if hierarchy is clear.
-        // Kept simple for now.
+        if (this.navigationRef?.isReady()) {
+            this.navigationRef.navigate(parentParams.screen, parentParams.params);
+        }
     }
 
     /**

package/src/molecules/navigation/utils/__tests__/NavigationValidator.test.ts

@@ -196,7 +196,7 @@ describe('NavigationValidator', () => {
 
       try {
         NavigationValidator.validateInitialRoute('NonExistent', mockTabScreens);
-      } catch (_error) {
+      } catch {
         // Expected to throw
       }
 

package/src/utilities/sharing/infrastructure/services/SharingService.ts

@@ -23,7 +23,7 @@ export class SharingService {
   static async isAvailable(): Promise<boolean> {
     try {
       return await Sharing.isAvailableAsync();
-    } catch (error) {
+    } catch {
       return false;
     }
   }