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

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

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

@@ -1,57 +0,0 @@
-/**
- * useTransformAnimation Hook
- *
- * Hook for transform-based animations (spin, pulse, shake).
- * Single Responsibility: Handle transform animations only.
- */
-
-import { useCallback } from 'react';
-import {
-    useSharedValue,
-    withTiming,
-    withSequence,
-    withRepeat,
-    Easing,
-} from 'react-native-reanimated';
-
-/**
- * Hook for transform-based animations
- */
-export const useTransformAnimation = () => {
-    const translateX = useSharedValue(0);
-    const scale = useSharedValue(1);
-    const rotate = useSharedValue(0);
-
-    const shake = useCallback(() => {
-        translateX.value = withSequence(
-            withTiming(-10, { duration: 50 }),
-            withRepeat(withTiming(10, { duration: 50 }), 4, true),
-            withTiming(0, { duration: 50 })
-        );
-    }, [translateX]);
-
-    const pulse = useCallback((repeatCount = -1) => {
-        scale.value = withRepeat(
-            withSequence(withTiming(1.1, { duration: 500 }), withTiming(1, { duration: 500 })),
-            repeatCount,
-            false
-        );
-    }, [scale]);
-
-    const spin = useCallback((repeatCount = -1) => {
-        rotate.value = withRepeat(
-            withTiming(360, { duration: 1000, easing: Easing.linear }),
-            repeatCount,
-            false
-        );
-    }, [rotate]);
-
-    return {
-        shake,
-        pulse,
-        spin,
-        translateX,
-        scale,
-        rotate,
-    };
-};

package/src/molecules/animation/presentation/providers/AnimationThemeProvider.tsx

@@ -1,60 +0,0 @@
-/**
- * Theme Provider for Animation Package
- *
- * React context provider for theme management.
- * Allows consumers to customize animation appearance.
- */
-
-import React, { createContext, useContext, useState, ReactNode } from 'react';
-import type { AnimationTheme, ThemeContext } from '../../domain/entities/Theme';
-import { DEFAULT_ANIMATION_THEME } from '../../domain/entities/Theme';
-
-const ThemeContext = createContext<ThemeContext | undefined>(undefined);
-
-export interface AnimationThemeProviderProps {
-  children: ReactNode;
-  theme?: Partial<AnimationTheme>;
-}
-
-/**
- * Theme provider component
- */
-export const AnimationThemeProvider: React.FC<AnimationThemeProviderProps> = ({
-  children,
-  theme: initialTheme,
-}) => {
-  const [theme, setTheme] = useState<AnimationTheme>(() => ({
-    ...DEFAULT_ANIMATION_THEME,
-    ...initialTheme,
-  }));
-
-  const updateTheme = (newTheme: Partial<AnimationTheme>) => {
-    setTheme(prev => ({ ...prev, ...newTheme }));
-  };
-
-  const contextValue: ThemeContext = {
-    theme,
-    setTheme: updateTheme,
-  };
-
-  return (
-    <ThemeContext.Provider value={contextValue}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-/**
- * Hook to use theme
- */
-export const useAnimationTheme = (): ThemeContext => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    // Return default theme if used outside provider
-    return {
-      theme: DEFAULT_ANIMATION_THEME,
-      setTheme: () => {},
-    };
-  }
-  return context;
-};