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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.48",
+  "version": "2.6.50",
   "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",

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -1,7 +1,7 @@
 /**
  * AtomicSkeleton - Skeleton Loader Component
  *
- * Skeleton placeholder loader with shimmer animation for loading states.
+ * Skeleton placeholder loader for loading states.
  * 
  * @example
  * ```tsx
@@ -22,24 +22,12 @@
  * ```
  */
 
-import React, { useEffect } from 'react';
-import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withSequence,
-  withTiming,
-  Easing,
-} from 'react-native-reanimated';
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle, type DimensionValue } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
 import { SKELETON_PATTERNS } from './AtomicSkeleton.types';
 
-const AnimatedView = (Animated as any).createAnimatedComponent(View);
-
-const SHIMMER_DURATION = 1200;
-
 export interface AtomicSkeletonProps {
   /** Skeleton pattern preset */
   pattern?: SkeletonPattern;
@@ -49,63 +37,32 @@ export interface AtomicSkeletonProps {
   count?: number;
   /** Custom container style */
   style?: StyleProp<ViewStyle>;
-  /** Disable shimmer animation */
-  disableAnimation?: boolean;
   /** Test ID for testing */
   testID?: string;
 }
 
 /**
- * Skeleton loader component with shimmer animation
+ * Skeleton loader component
  * 
  * Provides visual feedback during content loading with customizable patterns
  */
 const SkeletonItem: React.FC<{
   config: SkeletonConfig;
   baseColor: string;
-  highlightColor: string;
-  disableAnimation: boolean;
   multiplier: number;
-}> = ({ config, baseColor, highlightColor, disableAnimation, multiplier }) => {
-  const opacity = useSharedValue(0);
-
-  useEffect(() => {
-    if (disableAnimation) return;
-
-    opacity.value = withRepeat(
-      withSequence(
-        withTiming(1, { duration: SHIMMER_DURATION / 2, easing: Easing.ease }),
-        withTiming(0, { duration: SHIMMER_DURATION / 2, easing: Easing.ease })
-      ),
-      -1,
-      false
-    );
-  }, [opacity, disableAnimation]);
+}> = ({ config, baseColor, multiplier }) => {
+  const itemStyles = StyleSheet.create({
+    item: {
+      ...styles.skeleton,
+      width: (typeof config.width === 'number' ? config.width * multiplier : config.width) as DimensionValue,
+      height: config.height ? config.height * multiplier : undefined,
+      borderRadius: config.borderRadius ? config.borderRadius * multiplier : undefined,
+      marginBottom: config.marginBottom ? config.marginBottom * multiplier : undefined,
+      backgroundColor: baseColor,
+    },
+  });
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: disableAnimation
-      ? baseColor
-      : opacity.value === 0
-        ? baseColor
-        : highlightColor,
-    opacity: disableAnimation ? 1 : 0.5 + opacity.value * 0.5,
-  }));
-
-  return (
-    <AnimatedView
-      style={[
-        styles.skeleton,
-        {
-          width: typeof config.width === 'number' ? config.width * multiplier : config.width,
-          height: config.height ? config.height * multiplier : undefined,
-          borderRadius: config.borderRadius ? config.borderRadius * multiplier : undefined,
-          marginBottom: config.marginBottom ? config.marginBottom * multiplier : undefined,
-          backgroundColor: baseColor,
-        },
-        animatedStyle,
-      ]}
-    />
-  );
+  return <View style={itemStyles.item} />;
 };
 
 export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
@@ -113,7 +70,6 @@ export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
   custom,
   count = 1,
   style,
-  disableAnimation = false,
   testID,
 }) => {
   const tokens = useAppDesignTokens();
@@ -128,8 +84,6 @@ export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
           key={`skeleton-${index}-${configIndex}`}
           config={config}
           baseColor={tokens.colors.surfaceSecondary}
-          highlightColor={tokens.colors.border}
-          disableAnimation={disableAnimation}
           multiplier={tokens.spacingMultiplier}
         />
       ))}

package/src/index.ts

@@ -378,24 +378,6 @@ export {
   type StackNavigationOptions,
   type TabLabelProps,
   type TabBarConfig,
-  // Celebration
-  CelebrationModal,
-  CelebrationModalContent,
-  CelebrationFireworksOverlay,
-  useCelebrationState,
-  useCelebrationModalAnimation,
-  FireworksConfigService,
-  DEFAULT_FIREWORKS_COLORS,
-  DEFAULT_FIREWORKS_CONFIG,
-  type CelebrationConfig,
-  type CelebrationAction,
-  type ThemeColors,
-  type CelebrationFireworksConfig,
-  type UseCelebrationStateReturn,
-  type UseCelebrationModalAnimationReturn,
-  type CelebrationModalProps,
-  type CelebrationModalContentProps,
-  type CelebrationFireworksOverlayProps,
   // Long Press Menu
   type MenuAction,
   type MenuActionTypeValue,
@@ -441,20 +423,6 @@ export {
   type SplashColors,
   type UseSplashFlowOptions,
   type UseSplashFlowResult,
-  // Animation
-  Animated,
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  withSpring,
-  withSequence,
-  withRepeat,
-  runOnJS,
-  cancelAnimation,
-  Easing,
-  type SharedValue,
-  type WithTimingConfig,
-  type WithSpringConfig,
 } from './molecules';
 
 // =============================================================================

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useImperativeHandle, useState, useCallback } from 'react';
-import { Modal, View, StyleSheet, Pressable, Platform } from 'react-native';
+import { Modal, View, StyleSheet, Pressable } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { getResponsiveBottomSheetLayout } from '../../../responsive';
@@ -66,17 +66,6 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
         borderTopLeftRadius: borderRadius,
         borderTopRightRadius: borderRadius,
         paddingBottom: Math.max(insets.bottom, 8),
-        ...Platform.select({
-          ios: {
-            shadowColor: tokens.colors.black,
-            shadowOffset: { width: 0, height: -4 },
-            shadowOpacity: 0.15,
-            shadowRadius: 12,
-          },
-          android: {
-            elevation: 8,
-          },
-        }),
       },
       handle: {
         width: 40,

package/src/molecules/index.ts

@@ -39,12 +39,6 @@ export * from './swipe-actions';
 // Navigation
 export * from './navigation';
 
-// Celebration
-export * from './celebration';
-
-// Animation
-export * from './animation';
-
 // Long Press Menu
 export * from './long-press-menu';
 

package/src/molecules/animation/core/AnimationCore.ts

@@ -1,29 +0,0 @@
-/**
- * Animation Core Exports
- * 
- * Re-exports react-native-reanimated for centralized usage.
- * All packages should use this instead of importing directly.
- */
-
-export {
-    useSharedValue,
-    useAnimatedStyle,
-    withTiming,
-    withSpring,
-    withSequence,
-    withRepeat,
-    runOnJS,
-    cancelAnimation,
-    Easing,
-} from 'react-native-reanimated';
-
-// Re-export Animated namespace
-import Animated from 'react-native-reanimated';
-export { Animated };
-
-// Re-export types
-export type {
-    SharedValue,
-    WithTimingConfig,
-    WithSpringConfig,
-} from 'react-native-reanimated';

package/src/molecules/animation/domain/entities/Animation.ts

@@ -1,81 +0,0 @@
-/**
- * Animation Domain Entity
- *
- * Core animation types and configurations for React Native.
- * Wraps react-native-reanimated and react-native-gesture-handler.
- */
-
-import type { WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
-
-/**
- * Animation timing configuration
- */
-export type AnimationTimingConfig = WithTimingConfig & {
-    duration?: number;
-};
-
-/**
- * Animation spring configuration
- */
-export type AnimationSpringConfig = WithSpringConfig & {
-    damping?: number;
-    stiffness?: number;
-    mass?: number;
-};
-
-/**
- * Animation preset types
- */
-export enum AnimationPreset {
-    FADE_IN = 'fadeIn',
-    FADE_OUT = 'fadeOut',
-    SLIDE_IN_UP = 'slideInUp',
-    SLIDE_IN_DOWN = 'slideInDown',
-    SLIDE_IN_LEFT = 'slideInLeft',
-    SLIDE_IN_RIGHT = 'slideInRight',
-    SCALE_IN = 'scaleIn',
-    SCALE_OUT = 'scaleOut',
-    BOUNCE = 'bounce',
-    SHAKE = 'shake',
-}
-
-/**
- * Gesture type
- */
-export enum GestureType {
-    TAP = 'tap',
-    PAN = 'pan',
-    PINCH = 'pinch',
-    ROTATION = 'rotation',
-    LONG_PRESS = 'longPress',
-}
-
-/**
- * Animation easing functions
- */
-export enum AnimationEasing {
-    LINEAR = 'linear',
-    EASE_IN = 'easeIn',
-    EASE_OUT = 'easeOut',
-    EASE_IN_OUT = 'easeInOut',
-    BOUNCE = 'bounce',
-    ELASTIC = 'elastic',
-}
-
-/**
- * Animation constants
- */
-export const ANIMATION_CONSTANTS = {
-    DURATION: {
-        INSTANT: 0,
-        FAST: 200,
-        NORMAL: 300,
-        SLOW: 500,
-        VERY_SLOW: 1000,
-    },
-    SPRING: {
-        DAMPING: 10,
-        STIFFNESS: 100,
-        MASS: 1,
-    },
-} as const;

package/src/molecules/animation/domain/entities/Fireworks.ts

@@ -1,44 +0,0 @@
-/**
- * Fireworks Domain Entity
- *
- * Types and constants for fireworks particle system
- */
-
-/**
- * Particle configuration
- */
-export interface ParticleConfig {
-  x: number;
-  y: number;
-  color: string;
-  size: number;
-  velocityX: number;
-  velocityY: number;
-  life: number;
-  decay: number;
-}
-
-/**
- * Fireworks configuration
- */
-export interface FireworksConfig {
-  particleCount?: number;
-  colors: string[]; // Required - colors must be provided by consumer
-  duration?: number;
-  particleSize?: number;
-  spread?: number;
-}
-
-/**
- * Fireworks constants
- */
-export const FIREWORKS_CONSTANTS = {
-  DEFAULT_PARTICLE_COUNT: 50,
-  DEFAULT_DURATION: 2000,
-  DEFAULT_PARTICLE_SIZE: 4,
-  DEFAULT_SPREAD: 100,
-  DEFAULT_COLORS: [] as string[], // Colors should be provided by consumer
-  GRAVITY: 0.3,
-  DECAY_RATE: 0.02,
-} as const;
-

package/src/molecules/animation/domain/entities/Theme.ts

@@ -1,76 +0,0 @@
-/**
- * Theme System for Animation Package
- *
- * Provides theme-aware animation configurations.
- * Consumers can provide their own theme or use defaults.
- */
-
-export interface AnimationTheme {
-  colors: {
-    primary: string;
-    secondary: string;
-    success: string;
-    warning: string;
-    error: string;
-    info: string;
-  };
-  spacing: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-  };
-  borderRadius: {
-    sm: number;
-    md: number;
-    lg: number;
-    full: number;
-  };
-  opacity: {
-    transparent: number;
-    light: number;
-    medium: number;
-    heavy: number;
-    opaque: number;
-  };
-}
-
-export const DEFAULT_ANIMATION_THEME: AnimationTheme = {
-  colors: {
-    primary: '#007AFF',
-    secondary: '#5856D6',
-    success: '#34C759',
-    warning: '#FF9500',
-    error: '#FF3B30',
-    info: '#5AC8FA',
-  },
-  spacing: {
-    xs: 4,
-    sm: 8,
-    md: 16,
-    lg: 24,
-    xl: 32,
-  },
-  borderRadius: {
-    sm: 4,
-    md: 8,
-    lg: 12,
-    full: 9999,
-  },
-  opacity: {
-    transparent: 0,
-    light: 0.25,
-    medium: 0.5,
-    heavy: 0.75,
-    opaque: 1,
-  },
-} as const;
-
-/**
- * Theme context for React components
- */
-export interface ThemeContext {
-  theme: AnimationTheme;
-  setTheme: (theme: Partial<AnimationTheme>) => void;
-}

package/src/molecules/animation/index.ts

@@ -1,146 +0,0 @@
-/**
- * React Native Animation - Barrel Export
- *
- * Universal animation system for React Native with react-native-reanimated.
- * Provides declarative animations, gesture handling, and preset configurations.
- *
- * Features:
- * - Declarative animations (fade, slide, scale, bounce, shake)
- * - Spring physics animations
- * - Gesture handling (tap, pan, pinch, long press)
- * - Preset animation configs
- * - TypeScript type safety
- *
- * Usage:
- *
- * Animation Example:
- * ```typescript
- * import { useAnimation, Animated } from '@umituz/react-native-animation';
- *
- * const MyComponent = () => {
- *   const { fadeIn, animatedStyle } = useAnimation();
- *
- *   useEffect(() => {
- *     fadeIn();
- *   }, []);
- *
- *   return <Animated.View style={animatedStyle}>...</Animated.View>;
- * };
- * ```
- *
- * Gesture Example:
- * ```typescript
- * import { useGesture, Animated } from '@umituz/react-native-animation';
- *
- * const MyComponent = () => {
- *   const { createPanGesture, animatedStyle, GestureDetector } = useGesture();
- *
- *   const panGesture = createPanGesture({
- *     onEnd: (x, y) => console.log('Dragged to:', x, y),
- *   });
- *
- *   return (
- *     <GestureDetector gesture={panGesture}>
- *       <Animated.View style={animatedStyle}>...</Animated.View>
- *     </GestureDetector>
- *   );
- * };
- * ```
- *
- * Technical:
- * - Uses react-native-reanimated v3 for animations
- * - Uses react-native-gesture-handler for gestures
- * - Zero backend dependencies
- */
-
-// =============================================================================
-// CORE LAYER - Animation Primitives
-// =============================================================================
-
-export {
-  Animated,
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  withSpring,
-  withSequence,
-  withRepeat,
-  runOnJS,
-  cancelAnimation,
-  Easing,
-} from './core/AnimationCore';
-
-export type {
-  SharedValue,
-  WithTimingConfig,
-  WithSpringConfig,
-} from './core/AnimationCore';
-
-// =============================================================================
-// DOMAIN LAYER - Entities
-// =============================================================================
-
-export {
-  AnimationPreset,
-  GestureType,
-  AnimationEasing,
-  ANIMATION_CONSTANTS,
-} from './domain/entities/Animation';
-export type {
-  AnimationTimingConfig,
-  AnimationSpringConfig,
-} from './domain/entities/Animation';
-
-// Infrastructure Layer - Services
-export { AnimationConfigService } from './infrastructure/services/AnimationConfigService';
-export { TimingAnimationConfigService } from './infrastructure/services/TimingAnimationConfigService';
-export { SpringAnimationConfigService } from './infrastructure/services/SpringAnimationConfigService';
-
-// Presentation Layer - Hooks
-export { useAnimation } from './presentation/hooks/useAnimation';
-export {
-  useGesture,
-  type TapGestureOptions,
-  type PanGestureOptions,
-  type PinchGestureOptions,
-} from './presentation/hooks/useGesture';
-export { useReanimatedReady } from './presentation/hooks/useReanimatedReady';
-export { useFireworks } from './presentation/hooks/useFireworks';
-export {
-  useOverlayAnimations,
-  useModalAnimations, // Legacy
-  type OverlayAnimationConfig,
-  type UseOverlayAnimationsReturn,
-  type ModalAnimationConfig, // Legacy
-  type UseModalAnimationsReturn, // Legacy
-} from './presentation/hooks/useModalAnimations';
-export {
-  useElementAnimations,
-  useIconAnimations, // Legacy
-  type ElementAnimationConfig,
-  type UseElementAnimationsReturn,
-  type IconAnimationConfig, // Legacy
-  type UseIconAnimationsReturn, // Legacy
-} from './presentation/hooks/useIconAnimations';
-
-// Presentation Layer - Components
-export { Fireworks } from './presentation/components/Fireworks';
-export type { FireworksProps } from './presentation/components/Fireworks';
-
-// Domain Layer - Fireworks
-export type {
-  ParticleConfig,
-  FireworksConfig,
-} from './domain/entities/Fireworks';
-export { FIREWORKS_CONSTANTS } from './domain/entities/Fireworks';
-
-// Domain Layer - Theme
-export type {
-  AnimationTheme,
-  ThemeContext,
-} from './domain/entities/Theme';
-export { DEFAULT_ANIMATION_THEME } from './domain/entities/Theme';
-
-// Presentation Layer - Providers
-export { AnimationThemeProvider, useAnimationTheme } from './presentation/providers/AnimationThemeProvider';
-

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

@@ -1,35 +0,0 @@
-/**
- * Animation Config Service (Legacy)
- *
- * Legacy service for backward compatibility.
- * New implementations should use TimingAnimationConfigService and SpringAnimationConfigService.
- * @deprecated Use TimingAnimationConfigService and SpringAnimationConfigService instead
- */
-
-import type {
-  AnimationTimingConfig,
-  AnimationSpringConfig,
-} from '../../domain/entities/Animation';
-import { AnimationPreset } from '../../domain/entities/Animation';
-import { TimingAnimationConfigService } from './TimingAnimationConfigService';
-import { SpringAnimationConfigService } from './SpringAnimationConfigService';
-
-/**
- * @deprecated Use TimingAnimationConfigService and SpringAnimationConfigService instead
- */
-export class AnimationConfigService {
-  /**
-   * @deprecated Use TimingAnimationConfigService.getTimingConfig instead
-   */
-  static getTimingConfig(preset: AnimationPreset): AnimationTimingConfig {
-    return TimingAnimationConfigService.getTimingConfig(preset);
-  }
-
-  /**
-   * @deprecated Use SpringAnimationConfigService.getSpringConfig instead
-   */
-  static getSpringConfig(preset: AnimationPreset): AnimationSpringConfig {
-    return SpringAnimationConfigService.getSpringConfig(preset);
-  }
-}
-