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

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,
-    };
-};

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

@@ -1,120 +0,0 @@
-/**
- * useElementAnimations Hook
- * Single Responsibility: Manage element scale and rotate animations
- * Generic implementation for any UI element (icons, buttons, etc.)
- */
-
-import { useEffect, useMemo } from "react";
-import { useAnimatedStyle, withTiming, withSequence, Easing } from "react-native-reanimated";
-import { useTransformAnimation } from "./useTransformAnimation";
-
-export interface ElementAnimationConfig {
-  scaleMax?: number;
-  scaleBounceMax?: number; // Alias for scaleMax
-  scaleMin?: number;
-  rotateDegrees?: number;
-  delay?: number;
-  scaleDuration?: number;
-  rotateDuration?: number;
-  resetOnHide?: boolean;
-}
-
-const DEFAULT_ELEMENT_ANIMATION_CONFIG: Required<ElementAnimationConfig> = {
-  scaleMax: 1.2,
-  scaleBounceMax: 1.2,
-  scaleMin: 1,
-  rotateDegrees: 360,
-  delay: 200,
-  scaleDuration: 300,
-  rotateDuration: 500,
-  resetOnHide: true,
-} as const;
-
-export interface UseElementAnimationsReturn {
-  elementStyle: ReturnType<typeof useAnimatedStyle>;
-  iconStyle: ReturnType<typeof useAnimatedStyle>; // Alias for elementStyle
-}
-
-/**
- * Hook for managing element animations
- * Generic implementation suitable for icons, buttons, badges, etc.
- */
-export function useElementAnimations(
-  visible: boolean,
-  isReanimatedReady: boolean,
-  config?: ElementAnimationConfig,
-): UseElementAnimationsReturn {
-  const transform = useTransformAnimation();
-
-  const animationConfig = useMemo(
-    () => ({
-      ...DEFAULT_ELEMENT_ANIMATION_CONFIG,
-      ...config,
-      scaleMax: config?.scaleBounceMax ?? config?.scaleMax ?? DEFAULT_ELEMENT_ANIMATION_CONFIG.scaleMax,
-    }),
-    [
-      config?.scaleMax,
-      config?.scaleBounceMax,
-      config?.scaleMin,
-      config?.rotateDegrees,
-      config?.delay,
-      config?.scaleDuration,
-      config?.rotateDuration,
-      config?.resetOnHide,
-    ],
-  );
-
-  useEffect(() => {
-    if (visible && isReanimatedReady) {
-      const timeoutId = setTimeout(() => {
-        transform.scale.value = withSequence(
-          withTiming(animationConfig.scaleMax, {
-            duration: animationConfig.scaleDuration,
-            easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
-          }),
-          withTiming(animationConfig.scaleMin, {
-            duration: animationConfig.scaleDuration,
-            easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
-          }),
-        );
-
-        transform.rotate.value = withSequence(
-          withTiming(animationConfig.rotateDegrees, {
-            duration: animationConfig.rotateDuration,
-            easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
-          }),
-          withTiming(0, { duration: 0 }),
-        );
-      }, animationConfig.delay);
-
-      return () => {
-        clearTimeout(timeoutId);
-      };
-    } else if (!visible && isReanimatedReady && animationConfig.resetOnHide) {
-      transform.scale.value = 1;
-      transform.rotate.value = 0;
-    }
-    return undefined;
-  }, [visible, isReanimatedReady, animationConfig, transform]);
-
-  const elementStyle = useAnimatedStyle(() => ({
-    transform: [
-      { scale: transform.scale.value },
-      { rotate: `${transform.rotate.value}deg` },
-    ] as any,
-  }));
-
-  return {
-    elementStyle,
-    iconStyle: elementStyle, // Alias for backward compatibility
-  };
-}
-
-// Legacy exports for backward compatibility
-export const useIconAnimations = useElementAnimations;
-export type IconAnimationConfig = ElementAnimationConfig;
-export type UseIconAnimationsReturn = UseElementAnimationsReturn & {
-  iconStyle: ReturnType<typeof useAnimatedStyle>;
-};
-
-

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

@@ -1,124 +0,0 @@
-/**
- * useOverlayAnimations Hook
- * Single Responsibility: Manage overlay and content animations
- * Generic implementation for any overlay-based UI component
- */
-
-import { useEffect, useMemo, useRef } from "react";
-import { useAnimatedStyle } from "react-native-reanimated";
-import { useReanimatedReady } from "./useReanimatedReady";
-import { useTimingAnimation } from "./useTimingAnimation";
-import { useSpringAnimation } from "./useSpringAnimation";
-
-export interface OverlayAnimationConfig {
-  overlayFadeDuration?: number;
-  contentScaleDamping?: number;
-  modalScaleDamping?: number; // Alias for contentScaleDamping
-  contentScaleStiffness?: number;
-  contentFadeDuration?: number;
-  initialScale?: number;
-}
-
-const DEFAULT_OVERLAY_ANIMATION_CONFIG: Required<OverlayAnimationConfig> = {
-  overlayFadeDuration: 300,
-  contentScaleDamping: 7,
-  modalScaleDamping: 7,
-  contentScaleStiffness: 50,
-  contentFadeDuration: 300,
-  initialScale: 0,
-} as const;
-
-export interface UseOverlayAnimationsReturn {
-  isReady: boolean;
-  overlayStyle: ReturnType<typeof useAnimatedStyle>;
-  contentStyle: ReturnType<typeof useAnimatedStyle>;
-  modalStyle: ReturnType<typeof useAnimatedStyle>; // Alias for contentStyle
-}
-
-/**
- * Hook for managing overlay and content animations
- * Generic implementation suitable for modals, popups, tooltips, etc.
- */
-export function useOverlayAnimations(
-  visible: boolean,
-  config?: OverlayAnimationConfig,
-): UseOverlayAnimationsReturn {
-  const isReanimatedReady = useReanimatedReady();
-  const overlayTiming = useTimingAnimation();
-  const contentTiming = useTimingAnimation();
-  const spring = useSpringAnimation();
-  const previousVisibleRef = useRef<boolean>(false);
-
-  const animationConfig = useMemo(
-    () => ({
-      ...DEFAULT_OVERLAY_ANIMATION_CONFIG,
-      ...config,
-      contentScaleDamping: config?.modalScaleDamping ?? config?.contentScaleDamping ?? DEFAULT_OVERLAY_ANIMATION_CONFIG.contentScaleDamping,
-    }),
-    [
-      config?.overlayFadeDuration,
-      config?.contentScaleDamping,
-      config?.modalScaleDamping,
-      config?.contentScaleStiffness,
-      config?.contentFadeDuration,
-      config?.initialScale,
-    ],
-  );
-
-  useEffect(() => {
-    if (!isReanimatedReady) {
-      return;
-    }
-
-    if (visible === previousVisibleRef.current) {
-      return;
-    }
-
-    previousVisibleRef.current = visible;
-
-    if (visible) {
-      overlayTiming.opacity.value = 0;
-      contentTiming.opacity.value = 0;
-      spring.scale.value = animationConfig.initialScale;
-
-      overlayTiming.fadeIn({ duration: animationConfig.overlayFadeDuration });
-      contentTiming.fadeIn({ duration: animationConfig.contentFadeDuration });
-      spring.scaleIn({
-        damping: animationConfig.contentScaleDamping,
-        stiffness: animationConfig.contentScaleStiffness,
-      });
-    } else {
-      overlayTiming.fadeOut({ duration: animationConfig.overlayFadeDuration });
-      contentTiming.fadeOut({ duration: animationConfig.contentFadeDuration });
-      spring.scaleOut({
-        damping: animationConfig.contentScaleDamping,
-        stiffness: animationConfig.contentScaleStiffness,
-      });
-    }
-  }, [visible, isReanimatedReady, animationConfig, overlayTiming, contentTiming, spring]);
-
-  const overlayStyle = useAnimatedStyle(() => ({
-    opacity: overlayTiming.opacity.value,
-  }));
-
-  const contentStyle = useAnimatedStyle(() => ({
-    opacity: contentTiming.opacity.value,
-    transform: [{ scale: spring.scale.value }],
-  }));
-
-  return {
-    isReady: isReanimatedReady,
-    overlayStyle,
-    contentStyle,
-    modalStyle: contentStyle, // Alias for backward compatibility
-  };
-}
-
-// Legacy export for backward compatibility
-export const useModalAnimations = useOverlayAnimations;
-export type ModalAnimationConfig = OverlayAnimationConfig;
-export type UseModalAnimationsReturn = UseOverlayAnimationsReturn & {
-  modalStyle: ReturnType<typeof useAnimatedStyle>;
-};
-
-

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

@@ -1,60 +0,0 @@
-/**
- * useReanimatedReady Hook
- *
- * React hook to check if react-native-reanimated is fully initialized and ready.
- * This prevents errors when Reanimated's internal state (like layoutState) is accessed
- * before it's fully ready.
- *
- * Usage:
- * ```tsx
- * const { isReady } = useReanimatedReady();
- *
- * if (!isReady) {
- *   return null; // Don't render Reanimated components until ready
- * }
- *
- * return <Animated.View>...</Animated.View>;
- * ```
- */
-
-import { useState, useEffect } from 'react';
-
-/**
- * Hook to check if Reanimated is ready
- *
- * Returns a boolean indicating if Reanimated is fully initialized.
- * Uses a delay + multiple animation frames to ensure Reanimated worklets are ready.
- *
- * @returns {boolean} True if Reanimated is ready, false otherwise
- */
-export const useReanimatedReady = (): boolean => {
-    const [isReady, setIsReady] = useState(false);
-
-    useEffect(() => {
-        // CRITICAL: Wait for Reanimated to be fully initialized
-        // Reanimated's internal hooks (useAnimatedLayout, useAnimatedDetents, etc.)
-        // access containerLayoutState.get during initialization
-        // If we don't wait, we get "containerLayoutState.get is not a function" errors
-        // 
-        // Strategy:
-        // 1. Wait 500ms for Reanimated to initialize (minimal delay)
-        // 2. Use 3 requestAnimationFrame calls to ensure worklets are ready
-        // 3. This ensures @gorhom/bottom-sheet's internal hooks can safely access Reanimated state
-        const timer = setTimeout(() => {
-            // Use multiple animation frames to ensure Reanimated worklets are ready
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
-                        setIsReady(true);
-                    });
-                });
-            });
-        }, 500); // Minimal delay to ensure Reanimated is initialized
-
-        return () => {
-            clearTimeout(timer);
-        };
-    }, []);
-
-    return isReady;
-};

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

@@ -1,69 +0,0 @@
-/**
- * useSpringAnimation Hook
- *
- * Hook for spring-based animations (scale, bounce).
- * Single Responsibility: Handle spring animations only.
- */
-
-import { useCallback } from 'react';
-import {
-  useSharedValue,
-  withSpring,
-  withSequence,
-} from 'react-native-reanimated';
-import type { AnimationSpringConfig } from '../../domain/entities/Animation';
-import {
-  AnimationPreset,
-  ANIMATION_CONSTANTS,
-} from '../../domain/entities/Animation';
-import { SpringAnimationConfigService } from '../../infrastructure/services/SpringAnimationConfigService';
-
-/**
- * Hook for spring-based animations
- */
-export const useSpringAnimation = () => {
-  const scale = useSharedValue(1);
-
-  const scaleIn = useCallback(
-    (config?: AnimationSpringConfig) => {
-      const spring = config || SpringAnimationConfigService.getSpringConfig(AnimationPreset.SCALE_IN);
-      scale.value = 0;
-      scale.value = withSpring(1, {
-        damping: spring.damping || ANIMATION_CONSTANTS.SPRING.DAMPING,
-        stiffness: spring.stiffness || ANIMATION_CONSTANTS.SPRING.STIFFNESS,
-      });
-    },
-    [scale]
-  );
-
-  const scaleOut = useCallback(
-    (config?: AnimationSpringConfig) => {
-      const spring = config || SpringAnimationConfigService.getSpringConfig(AnimationPreset.SCALE_OUT);
-      scale.value = withSpring(0, {
-        damping: spring.damping || ANIMATION_CONSTANTS.SPRING.DAMPING,
-        stiffness: spring.stiffness || ANIMATION_CONSTANTS.SPRING.STIFFNESS,
-      });
-    },
-    [scale]
-  );
-
-  const bounce = useCallback(
-    (config?: AnimationSpringConfig) => {
-      const spring = config || SpringAnimationConfigService.getSpringConfig(AnimationPreset.BOUNCE);
-      scale.value = withSequence(
-        withSpring(0.8, spring),
-        withSpring(1.2, spring),
-        withSpring(1, spring)
-      );
-    },
-    [scale]
-  );
-
-  return {
-    scaleIn,
-    scaleOut,
-    bounce,
-    scale,
-  };
-};
-

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

@@ -1,111 +0,0 @@
-/**
- * useTimingAnimation Hook
- *
- * Hook for timing-based animations (fade, slide).
- * Single Responsibility: Handle timing animations only.
- */
-
-import { useCallback } from 'react';
-import {
-  useSharedValue,
-  withTiming,
-  Easing,
-} from 'react-native-reanimated';
-import type { AnimationTimingConfig } from '../../domain/entities/Animation';
-import {
-  AnimationPreset,
-  ANIMATION_CONSTANTS,
-} from '../../domain/entities/Animation';
-import { TimingAnimationConfigService } from '../../infrastructure/services/TimingAnimationConfigService';
-
-/**
- * Hook for timing-based animations
- */
-export const useTimingAnimation = () => {
-  const opacity = useSharedValue(1);
-  const translateY = useSharedValue(0);
-  const translateX = useSharedValue(0);
-
-  const fadeIn = useCallback(
-    (config?: AnimationTimingConfig) => {
-      const timing = config || TimingAnimationConfigService.getTimingConfig(AnimationPreset.FADE_IN);
-      opacity.value = withTiming(1, {
-        duration: timing.duration || ANIMATION_CONSTANTS.DURATION.NORMAL,
-        easing: Easing.ease,
-      });
-    },
-    [opacity]
-  );
-
-  const fadeOut = useCallback(
-    (config?: AnimationTimingConfig) => {
-      const timing = config || TimingAnimationConfigService.getTimingConfig(AnimationPreset.FADE_OUT);
-      opacity.value = withTiming(0, {
-        duration: timing.duration || ANIMATION_CONSTANTS.DURATION.NORMAL,
-        easing: Easing.ease,
-      });
-    },
-    [opacity]
-  );
-
-  const slideInUp = useCallback(
-    (distance = 100, config?: AnimationTimingConfig) => {
-      const timing = config || TimingAnimationConfigService.getTimingConfig(AnimationPreset.SLIDE_IN_UP);
-      translateY.value = distance;
-      translateY.value = withTiming(0, {
-        duration: timing.duration || ANIMATION_CONSTANTS.DURATION.NORMAL,
-        easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
-      });
-    },
-    [translateY]
-  );
-
-  const slideInDown = useCallback(
-    (distance = 100, config?: AnimationTimingConfig) => {
-      const timing = config || TimingAnimationConfigService.getTimingConfig(AnimationPreset.SLIDE_IN_DOWN);
-      translateY.value = -distance;
-      translateY.value = withTiming(0, {
-        duration: timing.duration || ANIMATION_CONSTANTS.DURATION.NORMAL,
-        easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
-      });
-    },
-    [translateY]
-  );
-
-  const slideInLeft = useCallback(
-    (distance = 100, config?: AnimationTimingConfig) => {
-      const timing = config || TimingAnimationConfigService.getTimingConfig(AnimationPreset.SLIDE_IN_LEFT);
-      translateX.value = -distance;
-      translateX.value = withTiming(0, {
-        duration: timing.duration || ANIMATION_CONSTANTS.DURATION.NORMAL,
-        easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
-      });
-    },
-    [translateX]
-  );
-
-  const slideInRight = useCallback(
-    (distance = 100, config?: AnimationTimingConfig) => {
-      const timing = config || TimingAnimationConfigService.getTimingConfig(AnimationPreset.SLIDE_IN_RIGHT);
-      translateX.value = distance;
-      translateX.value = withTiming(0, {
-        duration: timing.duration || ANIMATION_CONSTANTS.DURATION.NORMAL,
-        easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
-      });
-    },
-    [translateX]
-  );
-
-  return {
-    fadeIn,
-    fadeOut,
-    slideInUp,
-    slideInDown,
-    slideInLeft,
-    slideInRight,
-    opacity,
-    translateY,
-    translateX,
-  };
-};
-