@umituz/react-native-design-system 2.6.123 → 2.6.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.123",
+  "version": "2.6.124",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone and offline utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/exports/haptics.ts

@@ -0,0 +1,7 @@
+/**
+ * Haptics Exports
+ *
+ * Haptic feedback utilities for React Native
+ */
+
+export * from '../haptics';

package/src/haptics/domain/entities/Haptic.ts

@@ -0,0 +1,66 @@
+/**
+ * Haptics Domain - Core Entities
+ *
+ * This file defines core types and interfaces for haptic feedback.
+ * Handles vibration patterns and feedback types using expo-haptics.
+ *
+ * @domain haptics
+ * @layer domain/entities
+ */
+
+/**
+ * Impact feedback style (compatible with expo-haptics)
+ */
+export type ImpactStyle = 'Light' | 'Medium' | 'Heavy';
+
+/**
+ * Notification feedback type (compatible with expo-haptics)
+ */
+export type NotificationType = 'Success' | 'Warning' | 'Error';
+
+/**
+ * Haptic patterns for common interactions
+ */
+export type HapticPattern =
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'selection';
+
+/**
+ * Haptic constants
+ */
+export const HAPTIC_CONSTANTS = {
+  DEFAULT_IMPACT: 'Light' as ImpactStyle,
+  BUTTON_IMPACT: 'Light' as ImpactStyle,
+  DELETE_IMPACT: 'Medium' as ImpactStyle,
+  ERROR_IMPACT: 'Heavy' as ImpactStyle,
+} as const;
+
+/**
+ * Type guards for runtime type safety
+ */
+
+/**
+ * Check if value is a valid ImpactStyle
+ */
+export function isImpactStyle(value: unknown): value is ImpactStyle {
+  return typeof value === 'string' &&
+         ['Light', 'Medium', 'Heavy'].includes(value);
+}
+
+/**
+ * Check if value is a valid NotificationType
+ */
+export function isNotificationType(value: unknown): value is NotificationType {
+  return typeof value === 'string' &&
+         ['Success', 'Warning', 'Error'].includes(value);
+}
+
+/**
+ * Check if value is a valid HapticPattern
+ */
+export function isHapticPattern(value: unknown): value is HapticPattern {
+  return typeof value === 'string' &&
+         ['success', 'warning', 'error', 'selection'].includes(value);
+}

package/src/haptics/index.ts

@@ -0,0 +1,181 @@
+/**
+ * Haptics Domain - Barrel Export
+ *
+ * Provides haptic feedback (vibration) using expo-haptics.
+ * Universal domain - enabled by default for UX improvement.
+ *
+ * @domain haptics
+ * @enabled true (All apps - UX improvement)
+ *
+ * ARCHITECTURE:
+ * - Domain Layer: Entities (haptic types, patterns, utilities)
+ * - Infrastructure Layer: Services (HapticService)
+ * - Presentation Layer: Hooks (useHaptics)
+ *
+ * DEPENDENCIES:
+ * - expo-haptics (vibration patterns)
+ *
+ * FEATURES:
+ * - Impact feedback (light, medium, heavy)
+ * - Notification feedback (success, warning, error)
+ * - Selection feedback (pickers, sliders)
+ * - Custom haptic patterns
+ * - Convenience methods for common interactions
+ *
+ * USAGE:
+ *
+ * Basic Haptics:
+ * ```typescript
+ * import { useHaptics } from '@umituz/react-native-haptics';
+ *
+ * const haptics = useHaptics();
+ *
+ * // Button press
+ * <TouchableOpacity onPress={() => haptics.buttonPress()}>
+ *   <Text>Click Me</Text>
+ * </TouchableOpacity>
+ *
+ * // Success feedback
+ * const handleSave = async () => {
+ *   await saveData();
+ *   haptics.success();
+ * };
+ *
+ * // Error feedback
+ * haptics.error();
+ * ```
+ *
+ * Selection Change (Sliders, Pickers):
+ * ```typescript
+ * import { useHaptics } from '@umituz/react-native-haptics';
+ *
+ * const haptics = useHaptics();
+ *
+ * <Slider
+ *   value={value}
+ *   onValueChange={(val) => {
+ *     setValue(val);
+ *     haptics.selectionChange();
+ *   }}
+ * />
+ * ```
+ *
+ * Custom Patterns:
+ * ```typescript
+ * import { useHaptics } from '@umituz/react-native-haptics';
+ *
+ * const haptics = useHaptics();
+ *
+ * // Impact with specific style
+ * haptics.impact('heavy');
+ *
+ * // Notification with specific type
+ * haptics.notification('warning');
+ *
+ * // Custom pattern
+ * haptics.pattern('long_press');
+ * ```
+ *
+ * Direct Service Usage (Rare):
+ * ```typescript
+ * import { HapticService } from '@umituz/react-native-haptics';
+ *
+ * // Use when you can't use hooks (outside components)
+ * await HapticService.buttonPress();
+ * await HapticService.success();
+ * ```
+ *
+ * Common Patterns:
+ * ```typescript
+ * import { useHaptics } from '@umituz/react-native-haptics';
+ *
+ * const haptics = useHaptics();
+ *
+ * // Button press (light impact)
+ * haptics.buttonPress();
+ *
+ * // Success (notification feedback)
+ * haptics.success();
+ *
+ * // Error (notification feedback)
+ * haptics.error();
+ *
+ * // Warning (notification feedback)
+ * haptics.warning();
+ *
+ * // Delete (medium impact)
+ * haptics.delete();
+ *
+ * // Refresh (medium impact)
+ * haptics.refresh();
+ *
+ * // Selection change (selection feedback)
+ * haptics.selectionChange();
+ *
+ * // Long press (heavy impact)
+ * haptics.longPress();
+ * ```
+ *
+ * Utilities:
+ * ```typescript
+ * import { HapticUtils } from '@umituz/react-native-haptics';
+ *
+ * // Get impact style for pattern
+ * const style = HapticUtils.getImpactForPattern('button_press'); // 'light'
+ *
+ * // Get notification type for pattern
+ * const type = HapticUtils.getNotificationForPattern('success'); // 'success'
+ *
+ * // Check if pattern should use notification
+ * const shouldUse = HapticUtils.shouldUseNotification('success'); // true
+ * ```
+ *
+ * BENEFITS:
+ * - Improved UX with tactile feedback
+ * - Consistent haptic patterns across app
+ * - Silent failure (no crashes if unsupported)
+ * - Platform-agnostic (iOS + Android)
+ * - Easy integration in any component
+ * - Works across all apps
+ *
+ * USE CASES:
+ * - Button presses
+ * - Success confirmations
+ * - Error alerts
+ * - Selection changes (sliders, pickers)
+ * - Delete actions
+ * - Refresh actions
+ * - Long press gestures
+ * - Form validation feedback
+ *
+ * @see https://docs.expo.dev/versions/latest/sdk/haptics/
+ */
+
+// ============================================================================
+// DOMAIN LAYER - ENTITIES
+// ============================================================================
+
+export type {
+  ImpactStyle,
+  NotificationType,
+  HapticPattern,
+} from './domain/entities/Haptic';
+
+export {
+  HAPTIC_CONSTANTS,
+  isImpactStyle,
+  isNotificationType,
+  isHapticPattern,
+} from './domain/entities/Haptic';
+
+// ============================================================================
+// INFRASTRUCTURE LAYER - SERVICES
+// ============================================================================
+
+export { HapticService } from './infrastructure/services/HapticService';
+
+// ============================================================================
+// PRESENTATION LAYER - HOOKS
+// ============================================================================
+
+export { useHaptics } from './presentation/hooks/useHaptics';

package/src/haptics/infrastructure/services/HapticService.ts

@@ -0,0 +1,130 @@
+/**
+ * Haptics Domain - Haptic Service
+ *
+ * Service for haptic feedback using expo-haptics.
+ * Provides abstraction layer for vibration and feedback.
+ *
+ * @domain haptics
+ * @layer infrastructure/services
+ */
+
+import * as Haptics from 'expo-haptics';
+import type { ImpactStyle, NotificationType, HapticPattern } from '../../domain/entities/Haptic';
+import { isImpactStyle, isNotificationType, isHapticPattern } from '../../domain/entities/Haptic';
+
+/**
+ * Log error in development mode only
+ */
+function logError(method: string, error: unknown): void {
+  if (process.env.NODE_ENV === 'development') {
+    console.error(`[HapticService.${method}]`, error);
+  }
+}
+
+
+/**
+ * Haptic feedback service
+ */
+export class HapticService {
+  /**
+   * Trigger impact feedback (Light, Medium, Heavy)
+   */
+  static async impact(style: ImpactStyle = 'Light'): Promise<void> {
+    try {
+      await Haptics.impactAsync(
+        style === 'Light' ? Haptics.ImpactFeedbackStyle.Light :
+        style === 'Medium' ? Haptics.ImpactFeedbackStyle.Medium :
+        Haptics.ImpactFeedbackStyle.Heavy
+      );
+    } catch (error) {
+      logError('impact', error);
+    }
+  }
+
+  /**
+   * Trigger notification feedback (Success, Warning, Error)
+   */
+  static async notification(type: NotificationType): Promise<void> {
+    try {
+      await Haptics.notificationAsync(
+        type === 'Success' ? Haptics.NotificationFeedbackType.Success :
+        type === 'Warning' ? Haptics.NotificationFeedbackType.Warning :
+        Haptics.NotificationFeedbackType.Error
+      );
+    } catch (error) {
+      logError('notification', error);
+    }
+  }
+
+  /**
+   * Trigger selection feedback (for pickers, sliders)
+   */
+  static async selection(): Promise<void> {
+    try {
+      await Haptics.selectionAsync();
+    } catch (error) {
+      logError('selection', error);
+    }
+  }
+
+  /**
+   * Trigger haptic pattern
+   */
+  static async pattern(pattern: HapticPattern): Promise<void> {
+    try {
+      switch (pattern) {
+        case 'selection':
+          await HapticService.selection();
+          break;
+        case 'success':
+          await HapticService.notification('Success');
+          break;
+        case 'warning':
+          await HapticService.notification('Warning');
+          break;
+        case 'error':
+          await HapticService.notification('Error');
+          break;
+        default:
+          await HapticService.impact('Light');
+      }
+    } catch (error) {
+      logError('pattern', error);
+    }
+  }
+
+  /**
+   * Common haptic patterns (convenience methods)
+   */
+  static async buttonPress(): Promise<void> {
+    await HapticService.impact('Light');
+  }
+
+  static async success(): Promise<void> {
+    await HapticService.pattern('success');
+  }
+
+  static async error(): Promise<void> {
+    await HapticService.pattern('error');
+  }
+
+  static async warning(): Promise<void> {
+    await HapticService.pattern('warning');
+  }
+
+  static async delete(): Promise<void> {
+    await HapticService.impact('Medium');
+  }
+
+  static async refresh(): Promise<void> {
+    await HapticService.impact('Light');
+  }
+
+  static async selectionChange(): Promise<void> {
+    await HapticService.pattern('selection');
+  }
+
+  static async longPress(): Promise<void> {
+    await HapticService.impact('Medium');
+  }
+}

package/src/haptics/presentation/hooks/useHaptics.ts

@@ -0,0 +1,173 @@
+/**
+ * Haptics Domain - useHaptics Hook
+ *
+ * React hook for haptic feedback.
+ * Provides vibration patterns for common interactions.
+ *
+ * @domain haptics
+ * @layer presentation/hooks
+ */
+
+import { useCallback, useRef, useMemo } from 'react';
+import { HapticService } from '../../infrastructure/services/HapticService';
+import type { ImpactStyle, NotificationType, HapticPattern } from '../../domain/entities/Haptic';
+
+/**
+ * Minimum interval between haptic feedback (ms)
+ * Prevents spam and improves UX
+ */
+const THROTTLE_INTERVAL = 50;
+
+/**
+ * useHaptics hook for haptic feedback
+ *
+ * USAGE:
+ * ```typescript
+ * const haptics = useHaptics();
+ *
+ * // Common patterns (convenience methods)
+ * <TouchableOpacity onPress={() => haptics.buttonPress()}>
+ *   <Text>Click Me</Text>
+ * </TouchableOpacity>
+ *
+ * // Success feedback
+ * const handleSuccess = async () => {
+ *   await saveData();
+ *   haptics.success();
+ * };
+ *
+ * // Error feedback
+ * const handleError = () => {
+ *   haptics.error();
+ * };
+ *
+ * // Selection change (sliders, pickers)
+ * <Slider onValueChange={() => haptics.selectionChange()} />
+ *
+ * // Custom patterns
+ * haptics.pattern('long_press');
+ * haptics.impact('heavy');
+ * haptics.notification('warning');
+ * ```
+ */
+export const useHaptics = () => {
+  const lastExecutionRef = useRef<number>(0);
+
+  /**
+   * Check if enough time has passed since last haptic
+   */
+  const canExecute = useCallback((): boolean => {
+    const now = Date.now();
+    if (now - lastExecutionRef.current < THROTTLE_INTERVAL) {
+      return false;
+    }
+    lastExecutionRef.current = now;
+    return true;
+  }, []);
+
+  /**
+   * Trigger impact feedback (light, medium, heavy)
+   */
+  const impact = useCallback(async (style: ImpactStyle = 'Light') => {
+    if (!canExecute()) return;
+    await HapticService.impact(style);
+  }, [canExecute]);
+
+  /**
+   * Trigger notification feedback (success, warning, error)
+   */
+  const notification = useCallback(async (type: NotificationType) => {
+    if (!canExecute()) return;
+    await HapticService.notification(type);
+  }, [canExecute]);
+
+  /**
+   * Trigger selection feedback (for pickers, sliders)
+   */
+  const selection = useCallback(async () => {
+    if (!canExecute()) return;
+    await HapticService.selection();
+  }, [canExecute]);
+
+  /**
+   * Trigger custom haptic pattern
+   */
+  const pattern = useCallback(async (patternType: HapticPattern) => {
+    if (!canExecute()) return;
+    await HapticService.pattern(patternType);
+  }, [canExecute]);
+
+  /**
+   * Common haptic patterns (convenience methods)
+   */
+  const buttonPress = useCallback(async () => {
+    if (!canExecute()) return;
+    await HapticService.buttonPress();
+  }, [canExecute]);
+
+  const success = useCallback(async () => {
+    if (!canExecute()) return;
+    await HapticService.success();
+  }, [canExecute]);
+
+  const error = useCallback(async () => {
+    if (!canExecute()) return;
+    await HapticService.error();
+  }, [canExecute]);
+
+  const warning = useCallback(async () => {
+    if (!canExecute()) return;
+    await HapticService.warning();
+  }, [canExecute]);
+
+  const deleteItem = useCallback(async () => {
+    if (!canExecute()) return;
+    await HapticService.delete();
+  }, [canExecute]);
+
+  const refresh = useCallback(async () => {
+    if (!canExecute()) return;
+    await HapticService.refresh();
+  }, [canExecute]);
+
+  const selectionChange = useCallback(async () => {
+    if (!canExecute()) return;
+    await HapticService.selectionChange();
+  }, [canExecute]);
+
+  const longPress = useCallback(async () => {
+    if (!canExecute()) return;
+    await HapticService.longPress();
+  }, [canExecute]);
+
+  return useMemo(() => ({
+    // Generic methods
+    impact,
+    notification,
+    selection,
+    pattern,
+
+    // Common patterns (convenience methods)
+    buttonPress,
+    success,
+    error,
+    warning,
+    delete: deleteItem,
+    refresh,
+    selectionChange,
+    longPress,
+  }), [
+    impact,
+    notification,
+    selection,
+    pattern,
+    buttonPress,
+    success,
+    error,
+    warning,
+    deleteItem,
+    refresh,
+    selectionChange,
+    longPress,
+  ]);
+};

package/src/index.ts

@@ -87,6 +87,11 @@ export * from './exports/offline';
 // =============================================================================
 export * from './exports/image';
 
+// =============================================================================
+// HAPTICS EXPORTS
+// =============================================================================
+export * from './exports/haptics';
+
 // =============================================================================
 // VARIANT UTILITIES
 // =============================================================================

package/src/molecules/swipe-actions/presentation/components/SwipeActionButton.tsx

@@ -10,9 +10,9 @@
 
 import React from 'react';
 import { StyleSheet, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
-import * as Haptics from 'expo-haptics';
 import { AtomicText, AtomicIcon } from '../../../../index';
 import { useAppDesignTokens } from '../../../../index';
+import { HapticService } from '../../../../haptics';
 import type { SwipeActionConfig } from '../../domain/entities/SwipeAction';
 import { SwipeActionUtils } from '../../domain/entities/SwipeAction';
 
@@ -71,13 +71,7 @@ export const SwipeActionButton: React.FC<SwipeActionButtonProps> = ({
     // Trigger haptic feedback
     if (enableHaptics) {
       const intensity = SwipeActionUtils.getHapticsIntensity(action);
-      if (intensity === 'Light') {
-        await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-      } else if (intensity === 'Medium') {
-        await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
-      } else {
-        await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
-      }
+      await HapticService.impact(intensity);
     }
 
     // Execute action