@umituz/react-native-design-system 2.3.14 → 2.3.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.14",
+  "version": "2.3.16",
   "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",
@@ -53,19 +53,27 @@
     "@gorhom/bottom-sheet": ">=5.0.0",
     "@react-native-async-storage/async-storage": ">=2.0.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
+    "@react-navigation/bottom-tabs": ">=6.0.0",
     "@react-navigation/native": ">=6.0.0",
+    "@react-navigation/stack": ">=6.0.0",
+    "@umituz/react-native-haptics": "latest",
+    "@umituz/react-native-localization": "latest",
     "@umituz/react-native-uuid": "latest",
     "expo-application": ">=5.0.0",
     "expo-calendar": ">=13.0.0",
+    "expo-clipboard": ">=8.0.0",
     "expo-crypto": ">=13.0.0",
     "expo-device": ">=5.0.0",
     "expo-linear-gradient": ">=15.0.0",
+    "expo-sharing": ">=12.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-gesture-handler": ">=2.20.0",
+    "react-native-haptic-feedback": ">=2.0.0",
     "react-native-reanimated": ">=3.16.0",
     "react-native-safe-area-context": ">=5.0.0",
     "react-native-svg": ">=15.0.0",
+    "rn-emoji-keyboard": ">=1.7.0",
     "zustand": ">=5.0.0"
   },
   "peerDependenciesMeta": {
@@ -91,11 +99,15 @@
     "@gorhom/bottom-sheet": "^5.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
+    "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/native": "^6.0.0",
+    "@react-navigation/stack": "^6.4.1",
     "@types/jest": "^30.0.0",
     "@types/react": "~19.1.10",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
+    "@umituz/react-native-haptics": "^1.0.2",
+    "@umituz/react-native-localization": "^3.5.34",
     "@umituz/react-native-uuid": "latest",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
@@ -103,15 +115,20 @@
     "eslint-plugin-react-native": "^5.0.0",
     "expo-application": "~5.9.1",
     "expo-calendar": "~14.0.0",
+    "expo-clipboard": "~8.0.7",
     "expo-crypto": "~14.0.0",
     "expo-device": "~7.0.2",
+    "expo-haptics": "~14.0.0",
     "expo-localization": "~16.0.1",
+    "expo-sharing": "~14.0.8",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.20.0",
+    "react-native-haptic-feedback": "^2.3.3",
     "react-native-reanimated": "^3.16.0",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "15.12.1",
+    "rn-emoji-keyboard": "^1.7.0",
     "typescript": "~5.9.2",
     "zustand": "^5.0.2"
   },
@@ -123,4 +140,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/index.ts

@@ -326,6 +326,105 @@ export {
   type CalendarWeek,
   type ICalendarRepository,
   type CalendarViewMode,
+  // Swipe Actions
+  SwipeActionButton,
+  SwipeActionUtils,
+  ACTION_PRESETS,
+  DEFAULT_SWIPE_CONFIG,
+  type SwipeActionButtonProps,
+  type SwipeActionType,
+  type SwipeActionConfig,
+  type SwipeDirection,
+  type SwipeableConfig,
+  // Navigation
+  TabsNavigator,
+  StackNavigator,
+  createTabNavigator,
+  createStackNavigator,
+  FabButton,
+  NavigationCleanupManager,
+  type TabsNavigatorProps,
+  type StackNavigatorProps,
+  type FabButtonProps,
+  type TabScreen,
+  type TabNavigatorConfig,
+  type StackScreen,
+  type StackNavigatorConfig,
+  type BaseScreen,
+  type BaseNavigatorConfig,
+  type IconRendererProps,
+  type LabelProcessorProps,
+  type FabConfig,
+  type NavigationCleanup,
+  type BottomTabNavigationOptions,
+  type BottomTabScreenProps,
+  type StackNavigationOptions,
+  // 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,
+  MenuActionType,
+  // Emoji
+  EmojiPicker,
+  useEmojiPicker,
+  EmojiCategory,
+  EmojiUtils,
+  type EmojiObject,
+  type EmojiPickerConfig,
+  type EmojiSelectCallback,
+  type EmojiPickerState,
+  type EmojiPickerProps,
+  type UseEmojiPickerOptions,
+  type UseEmojiPickerReturn,
+  // Countdown
+  Countdown,
+  TimeUnit,
+  CountdownHeader,
+  useCountdown,
+  calculateTimeRemaining,
+  padNumber,
+  getNextDayStart,
+  getNextYearStart,
+  type CountdownProps,
+  type TimeUnitProps,
+  type CountdownHeaderProps,
+  type UseCountdownOptions,
+  type UseCountdownReturn,
+  type TimeRemaining,
+  type CountdownTarget,
+  type CountdownFormatOptions,
+  type CountdownDisplayConfig,
+  // Animation
+  Animated,
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withSpring,
+  withSequence,
+  withRepeat,
+  runOnJS,
+  cancelAnimation,
+  Easing,
+  type SharedValue,
+  type WithTimingConfig,
+  type WithSpringConfig,
 } from './molecules';
 
 // =============================================================================
@@ -364,3 +463,9 @@ export {
   responsiveStyle,
   combineStyles,
 } from './presentation/utils/variants/helpers';
+
+// =============================================================================
+// UTILITIES
+// =============================================================================
+
+export * from './utilities';

package/src/layouts/ScreenLayout/ScreenLayout.example.tsx

@@ -12,7 +12,7 @@ import {
     ScreenHeader,
     AtomicButton,
     AtomicText
-} from '@umituz/react-native-design-system';
+} from '../../index';
 
 // 1. Wrap your app root with SafeAreaProvider
 export function App() {
@@ -78,7 +78,7 @@ export function CustomScrollScreen() {
 }
 
 // 5. Using safe area hooks directly
-import { useContentSafeAreaPadding, useSafeAreaInsets } from '@umituz/react-native-design-system';
+import { useContentSafeAreaPadding, useSafeAreaInsets } from '../../index';
 
 export function CustomComponent() {
     const insets = useSafeAreaInsets();

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -35,7 +35,7 @@ import { getResponsiveHorizontalPadding } from '../../responsive/responsiveLayou
  * NOTE: This component now works in conjunction with the SafeAreaProvider
  * from our safe-area module. The SafeAreaProvider should wrap your app root:
  * 
- * import { SafeAreaProvider } from '@umituz/react-native-design-system';
+ * import { SafeAreaProvider } from '../../index';
  * 
  * function App() {
  *   return (

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

@@ -0,0 +1,29 @@
+/**
+ * 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

@@ -0,0 +1,81 @@
+/**
+ * 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

@@ -0,0 +1,44 @@
+/**
+ * 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

@@ -0,0 +1,76 @@
+/**
+ * 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

@@ -0,0 +1,146 @@
+/**
+ * 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

@@ -0,0 +1,35 @@
+/**
+ * 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);
+  }
+}
+

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

@@ -0,0 +1,67 @@
+/**
+ * Spring Animation Config Service
+ *
+ * Infrastructure service for spring animation configurations.
+ * Separates spring configuration logic from domain entities.
+ */
+
+import type { AnimationSpringConfig } from '../../domain/entities/Animation';
+import {
+  AnimationPreset,
+  ANIMATION_CONSTANTS,
+} from '../../domain/entities/Animation';
+
+/**
+ * Service for providing spring animation configurations
+ */
+export class SpringAnimationConfigService {
+  /**
+   * Get preset spring config
+   */
+  static getSpringConfig(preset: AnimationPreset): AnimationSpringConfig {
+    const configs: Record<AnimationPreset, AnimationSpringConfig> = {
+      [AnimationPreset.FADE_IN]: {
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      },
+      [AnimationPreset.FADE_OUT]: {
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      },
+      [AnimationPreset.SLIDE_IN_UP]: {
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      },
+      [AnimationPreset.SLIDE_IN_DOWN]: {
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      },
+      [AnimationPreset.SLIDE_IN_LEFT]: {
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      },
+      [AnimationPreset.SLIDE_IN_RIGHT]: {
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      },
+      [AnimationPreset.SCALE_IN]: {
+        damping: 15,
+        stiffness: 150,
+      },
+      [AnimationPreset.SCALE_OUT]: {
+        damping: 15,
+        stiffness: 150,
+      },
+      [AnimationPreset.BOUNCE]: {
+        damping: 5,
+        stiffness: 120,
+      },
+      [AnimationPreset.SHAKE]: {
+        damping: 8,
+        stiffness: 200,
+      },
+    };
+    
+    return configs[preset];
+  }
+}