@umituz/react-native-design-system 4.23.116 → 4.23.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.116",
+  "version": "4.23.118",
   "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, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/device/presentation/hooks/useAnonymousUser.ts

@@ -11,7 +11,7 @@
  * @layer presentation/hooks
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { PersistentDeviceIdService } from '../../infrastructure/services/PersistentDeviceIdService';
 import { DeviceService } from '../../infrastructure/services/DeviceService';
 import type {
@@ -19,6 +19,7 @@ import type {
   UseAnonymousUserOptions,
   UseAnonymousUserResult,
 } from '../../domain/types/AnonymousUserTypes';
+import { useAsyncOperation } from '../../../utils/hooks';
 
 /**
  * useAnonymousUser hook for persistent device-based user identification
@@ -43,56 +44,49 @@ import type {
 export const useAnonymousUser = (
   options?: UseAnonymousUserOptions
 ): UseAnonymousUserResult => {
-  const [anonymousUser, setAnonymousUser] = useState<AnonymousUser | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
   const {
     anonymousDisplayName = 'Anonymous',
     fallbackUserId = 'anonymous_fallback',
   } = options || {};
 
-  const loadAnonymousUser = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
+  const { data: anonymousUser, isLoading, error, execute } = useAsyncOperation<AnonymousUser, string>(
+    async () => {
       const [userId, deviceName] = await Promise.all([
         PersistentDeviceIdService.getDeviceId(),
         DeviceService.getUserFriendlyId(),
       ]);
 
-      setAnonymousUser({
+      return {
         userId: userId || fallbackUserId,
         deviceName: deviceName || 'Unknown Device',
         displayName: anonymousDisplayName,
         isAnonymous: true,
-      });
-    } catch {
-      setAnonymousUser({
-        userId: fallbackUserId,
-        deviceName: 'Unknown Device',
-        displayName: anonymousDisplayName,
-        isAnonymous: true,
-      });
-      setError('Failed to generate device ID');
-    } finally {
-      setIsLoading(false);
+      };
+    },
+    {
+      immediate: true,
+      initialData: null,
+      errorHandler: () => 'Failed to generate device ID',
+      onError: () => {
+        // Fallback on error - set default anonymous user
+        return {
+          userId: fallbackUserId,
+          deviceName: 'Unknown Device',
+          displayName: anonymousDisplayName,
+          isAnonymous: true,
+        };
+      },
     }
-  }, [anonymousDisplayName, fallbackUserId]);
+  );
 
   const refresh = useCallback(async () => {
-    await loadAnonymousUser();
-  }, [loadAnonymousUser]);
-
-  useEffect(() => {
-    loadAnonymousUser();
-  }, [loadAnonymousUser]);
+    await execute();
+  }, [execute]);
 
-  return {
+  return useMemo(() => ({
     anonymousUser,
     isLoading,
     error,
     refresh,
-  };
+  }), [anonymousUser, isLoading, error, refresh]);
 };

package/src/device/presentation/hooks/useDeviceInfo.ts

@@ -8,108 +8,57 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { DeviceService } from '../../infrastructure/services/DeviceService';
 import { PersistentDeviceIdService } from '../../infrastructure/services/PersistentDeviceIdService';
 import type { DeviceInfo, ApplicationInfo, SystemInfo } from '../../domain/entities/Device';
-
-function useAsyncData<T, E = string>(
-  fetchFn: () => Promise<T>,
-  initialData: T | null = null
-) {
-  const [data, setData] = useState<T | null>(initialData);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<E | null>(null);
-  const isMountedRef = useRef(true);
-
-  const execute = useCallback(async () => {
-    if (!isMountedRef.current) return;
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const result = await fetchFn();
-      if (isMountedRef.current) setData(result);
-    } catch (err) {
-      if (isMountedRef.current) {
-        setError(err instanceof Error ? (err.message as E) : ('Failed to load data' as E));
-      }
-    } finally {
-      if (isMountedRef.current) setIsLoading(false);
-    }
-  }, [fetchFn]);
-
-  useEffect(() => {
-    isMountedRef.current = true;
-    execute();
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, [execute]);
-
-  return { data, isLoading, error, execute };
-}
+import { useAsyncOperation } from '../../../utils/hooks';
 
 export const useDeviceInfo = () => {
-  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo | null>(null);
-  const [appInfo, setAppInfo] = useState<ApplicationInfo | null>(null);
-  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
-  const isMountedRef = useRef(true);
-
-  const loadInfo = useCallback(async () => {
-    if (!isMountedRef.current) return;
-
-    try {
-      const system = await DeviceService.getSystemInfo();
-      if (isMountedRef.current) {
-        setSystemInfo(system);
-        setDeviceInfo(system.device);
-        setAppInfo(system.application);
-      }
-    } catch {
-      // Silent error handling
+  const systemOp = useAsyncOperation(
+    () => DeviceService.getSystemInfo(),
+    {
+      immediate: true,
+      initialData: null,
+      errorHandler: () => null, // Silent error handling
     }
-  }, []);
-
-  const loadDeviceInfo = useCallback(async () => {
-    if (!isMountedRef.current) return;
-    try {
-      const info = await DeviceService.getDeviceInfo();
-      if (isMountedRef.current) setDeviceInfo(info);
-    } catch {
-      // Silent error handling
+  );
+
+  const deviceOp = useAsyncOperation(
+    () => DeviceService.getDeviceInfo(),
+    {
+      immediate: false,
+      initialData: null,
+      errorHandler: () => null,
     }
-  }, []);
-
-  const loadAppInfo = useCallback(async () => {
-    if (!isMountedRef.current) return;
-    try {
-      const info = await DeviceService.getApplicationInfo();
-      if (isMountedRef.current) setAppInfo(info);
-    } catch {
-      // Silent error handling
+  );
+
+  const appOp = useAsyncOperation(
+    () => DeviceService.getApplicationInfo(),
+    {
+      immediate: false,
+      initialData: null,
+      errorHandler: () => null,
     }
-  }, []);
-
-  useEffect(() => {
-    isMountedRef.current = true;
-    loadInfo();
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, [loadInfo]);
+  );
 
   return {
-    deviceInfo,
-    appInfo,
-    systemInfo,
-    isLoading: !deviceInfo && !appInfo && !systemInfo,
+    deviceInfo: systemOp.data?.device ?? deviceOp.data,
+    appInfo: systemOp.data?.application ?? appOp.data,
+    systemInfo: systemOp.data,
+    isLoading: systemOp.isLoading || deviceOp.isLoading || appOp.isLoading,
     error: null,
-    refresh: loadInfo,
-    loadDeviceInfo,
-    loadAppInfo,
+    refresh: systemOp.execute,
+    loadDeviceInfo: deviceOp.execute,
+    loadAppInfo: appOp.execute,
   };
 };
 
 export const useDeviceCapabilities = () => {
-  const { data: capabilities, isLoading } = useAsyncData(DeviceService.getDeviceCapabilities, null);
+  const { data: capabilities, isLoading } = useAsyncOperation(
+    () => DeviceService.getDeviceCapabilities(),
+    {
+      immediate: true,
+      initialData: null,
+      errorHandler: (err) => err instanceof Error ? err.message : 'Failed to load device capabilities',
+    }
+  );
 
   return {
     isDevice: capabilities?.isDevice ?? false,
@@ -121,7 +70,14 @@ export const useDeviceCapabilities = () => {
 };
 
 export const useDeviceId = () => {
-  const { data: deviceId, isLoading } = useAsyncData(PersistentDeviceIdService.getDeviceId, null);
+  const { data: deviceId, isLoading } = useAsyncOperation(
+    () => PersistentDeviceIdService.getDeviceId(),
+    {
+      immediate: true,
+      initialData: null,
+      errorHandler: (err) => err instanceof Error ? err.message : 'Failed to load device ID',
+    }
+  );
 
   return { deviceId, isLoading };
 };

package/src/init/useAppInitialization.ts

@@ -3,12 +3,13 @@
  * Manages app initialization state in React components
  */
 
-import { useState, useEffect, useRef } from "react";
+import { useMemo } from "react";
 import type {
   UseAppInitializationOptions,
   UseAppInitializationReturn,
   AppInitializerResult,
 } from "./types";
+import { useAsyncOperation } from "../utils/hooks";
 
 /**
  * Hook to manage app initialization
@@ -29,64 +30,30 @@ export function useAppInitialization(
 ): UseAppInitializationReturn {
   const { skip = false, onReady, onError } = options;
 
-  const [isReady, setIsReady] = useState(false);
-  const [isLoading, setIsLoading] = useState(!skip);
-  const [error, setError] = useState<Error | null>(null);
+  const { data, isLoading, error } = useAsyncOperation<AppInitializerResult, Error>(
+    async () => {
+      const result = await initializer();
 
-  // Store callbacks in refs to avoid re-running effect
-  const onReadyRef = useRef(onReady);
-  const onErrorRef = useRef(onError);
-
-  useEffect(() => {
-    onReadyRef.current = onReady;
-    onErrorRef.current = onError;
-  }, [onReady, onError]);
-
-  useEffect(() => {
-    if (skip) {
-      setIsReady(true);
-      setIsLoading(false);
-      return;
-    }
-
-    let cancelled = false;
-
-    const initialize = async () => {
-      try {
-        setIsLoading(true);
-        setError(null);
-
-        const result = await initializer();
-
-        if (cancelled) return;
-
-        if (!result.success && result.failedModules.length > 0) {
-          throw new Error(
-            `Initialization failed: ${result.failedModules.join(", ")}`
-          );
-        }
-
-        setIsReady(true);
-        onReadyRef.current?.();
-      } catch (err) {
-        if (cancelled) return;
-
-        const error = err instanceof Error ? err : new Error(String(err));
-        setError(error);
-        onErrorRef.current?.(error);
-      } finally {
-        if (!cancelled) {
-          setIsLoading(false);
-        }
+      if (!result.success && result.failedModules.length > 0) {
+        throw new Error(
+          `Initialization failed: ${result.failedModules.join(", ")}`
+        );
       }
-    };
-
-    initialize();
 
-    return () => {
-      cancelled = true;
-    };
-  }, [initializer, skip]);
+      return result;
+    },
+    {
+      immediate: !skip,
+      skip,
+      errorHandler: (err) => err instanceof Error ? err : new Error(String(err)),
+      onSuccess: () => onReady?.(),
+      onError: (err) => onError?.(err),
+    }
+  );
 
-  return { isReady, isLoading, error };
+  return useMemo(() => ({
+    isReady: data?.success ?? false,
+    isLoading,
+    error,
+  }), [data, isLoading, error]);
 }

package/src/media/domain/entities/Media.ts

@@ -98,6 +98,7 @@ export enum MediaValidationError {
   FILE_TOO_LARGE = "FILE_TOO_LARGE",
   INVALID_FORMAT = "INVALID_FORMAT",
   PERMISSION_DENIED = "PERMISSION_DENIED",
+  PICKER_ERROR = "PICKER_ERROR",
 }
 
 /**

package/src/media/infrastructure/utils/media-collection-utils.ts

@@ -3,9 +3,9 @@
  * Generic utilities for working with media collections
  */
 
-type MediaType = "image" | "audio" | "video";
+import { formatFileSize as formatFileSizeUtil } from "../../../utils/formatters/stringFormatter";
 
-const FILE_SIZE_UNITS = ["Bytes", "KB", "MB", "GB"] as const;
+type MediaType = "image" | "audio" | "video";
 
 /**
  * Interface for media items with type property
@@ -35,9 +35,12 @@ export function calculateTotalSize(
   return media.reduce((total, m) => total + m.fileSize, 0);
 }
 
+/**
+ * Format file size in bytes to human-readable format
+ *
+ * @param bytes - File size in bytes
+ * @returns Formatted file size string (e.g., "1.5 MB")
+ */
 export function formatFileSize(bytes: number): string {
-  if (bytes === 0) return "0 Bytes";
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  const size = Math.round((bytes / Math.pow(1024, i)) * 100) / 100;
-  return `${size} ${FILE_SIZE_UNITS[i]}`;
+  return formatFileSizeUtil(bytes, { decimals: 2 });
 }

package/src/media/presentation/hooks/useMedia.ts

@@ -5,7 +5,7 @@
  * Provides camera, gallery picking functionality.
  */
 
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { MediaPickerService } from "../../infrastructure/services/MediaPickerService";
 import { PermissionManager } from "../../infrastructure/utils/PermissionManager";
 import type {
@@ -14,166 +14,107 @@ import type {
   CameraOptions,
 } from "../../domain/entities/Media";
 import { MediaLibraryPermission } from "../../domain/entities/Media";
+import { useAsyncOperation } from "../../../utils/hooks";
 
 /**
  * useMedia hook for complete media workflow
- *
- * USAGE:
- * ```typescript
- * const {
- *   pickImage,
- *   pickMultipleImages,
- *   launchCamera,
- *   isLoading,
- *   error,
- * } = useMedia();
- *
- * const handlePickImage = async () => {
- *   const result = await pickImage({ allowsEditing: true });
- *   if (!result.canceled && result.assets) {
- *   }
- * };
- * ```
  */
 export const useMedia = () => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  // Create async operations for each media picker function
+  const pickImageOp = useAsyncOperation<MediaPickerResult, string>(
+    (options?: MediaPickerOptions) => MediaPickerService.pickSingleImage(options),
+    {
+      immediate: false,
+      errorHandler: (err) => err instanceof Error ? err.message : 'Failed to pick image',
+    }
+  );
+
+  const pickMultipleImagesOp = useAsyncOperation<MediaPickerResult, string>(
+    (options?: MediaPickerOptions) => MediaPickerService.pickMultipleImages(options),
+    {
+      immediate: false,
+      errorHandler: (err) => err instanceof Error ? err.message : 'Failed to pick images',
+    }
+  );
 
-  // Track mounted state to prevent setState on unmounted component
-  const isMountedRef = useRef(true);
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
+  const pickVideoOp = useAsyncOperation<MediaPickerResult, string>(
+    (options?: MediaPickerOptions) => MediaPickerService.pickVideo(options),
+    {
+      immediate: false,
+      errorHandler: (err) => err instanceof Error ? err.message : 'Failed to pick video',
+    }
+  );
+
+  const launchCameraOp = useAsyncOperation<MediaPickerResult, string>(
+    (options?: CameraOptions) => MediaPickerService.launchCamera(options),
+    {
+      immediate: false,
+      errorHandler: (err) => err instanceof Error ? err.message : 'Failed to launch camera',
+    }
+  );
+
+  const launchCameraVideoOp = useAsyncOperation<MediaPickerResult, string>(
+    (options?: CameraOptions) => MediaPickerService.launchCameraForVideo(options),
+    {
+      immediate: false,
+      errorHandler: (err) => err instanceof Error ? err.message : 'Failed to record video',
+    }
+  );
 
+  // Wrap execute calls to handle MediaPickerResult validation
   const pickImage = useCallback(
     async (options?: MediaPickerOptions): Promise<MediaPickerResult> => {
-      if (isMountedRef.current) {
-        setIsLoading(true);
-        setError(null);
-      }
-      try {
-        const result = await MediaPickerService.pickSingleImage(options);
-        // Set error from validation result if present
-        if (result.errorMessage && isMountedRef.current) {
-          setError(result.errorMessage);
-        }
-        return result;
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : "Failed to pick image";
-        if (isMountedRef.current) {
-          setError(errorMessage);
-        }
-        return { canceled: true };
-      } finally {
-        if (isMountedRef.current) {
-          setIsLoading(false);
-        }
+      const result = await pickImageOp.execute(options);
+      if (result?.errorMessage) {
+        pickImageOp.setError(result.errorMessage);
       }
+      return result ?? { canceled: true };
     },
-    []
+    [pickImageOp]
   );
 
   const pickMultipleImages = useCallback(
     async (options?: MediaPickerOptions): Promise<MediaPickerResult> => {
-      if (isMountedRef.current) {
-        setIsLoading(true);
-        setError(null);
-      }
-      try {
-        const result = await MediaPickerService.pickMultipleImages(options);
-        return result;
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : "Failed to pick images";
-        if (isMountedRef.current) {
-          setError(errorMessage);
-        }
-        return { canceled: true };
-      } finally {
-        if (isMountedRef.current) {
-          setIsLoading(false);
-        }
+      const result = await pickMultipleImagesOp.execute(options);
+      if (result?.errorMessage) {
+        pickMultipleImagesOp.setError(result.errorMessage);
       }
+      return result ?? { canceled: true };
     },
-    []
+    [pickMultipleImagesOp]
   );
 
   const pickVideo = useCallback(
     async (options?: MediaPickerOptions): Promise<MediaPickerResult> => {
-      if (isMountedRef.current) {
-        setIsLoading(true);
-        setError(null);
-      }
-      try {
-        const result = await MediaPickerService.pickVideo(options);
-        return result;
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : "Failed to pick video";
-        if (isMountedRef.current) {
-          setError(errorMessage);
-        }
-        return { canceled: true };
-      } finally {
-        if (isMountedRef.current) {
-          setIsLoading(false);
-        }
+      const result = await pickVideoOp.execute(options);
+      if (result?.errorMessage) {
+        pickVideoOp.setError(result.errorMessage);
       }
+      return result ?? { canceled: true };
     },
-    []
+    [pickVideoOp]
   );
 
   const launchCamera = useCallback(
     async (options?: CameraOptions): Promise<MediaPickerResult> => {
-      if (isMountedRef.current) {
-        setIsLoading(true);
-        setError(null);
-      }
-      try {
-        const result = await MediaPickerService.launchCamera(options);
-        return result;
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : "Failed to launch camera";
-        if (isMountedRef.current) {
-          setError(errorMessage);
-        }
-        return { canceled: true };
-      } finally {
-        if (isMountedRef.current) {
-          setIsLoading(false);
-        }
+      const result = await launchCameraOp.execute(options);
+      if (result?.errorMessage) {
+        launchCameraOp.setError(result.errorMessage);
       }
+      return result ?? { canceled: true };
     },
-    []
+    [launchCameraOp]
   );
 
   const launchCameraForVideo = useCallback(
     async (options?: CameraOptions): Promise<MediaPickerResult> => {
-      if (isMountedRef.current) {
-        setIsLoading(true);
-        setError(null);
-      }
-      try {
-        const result = await MediaPickerService.launchCameraForVideo(options);
-        return result;
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : "Failed to record video";
-        if (isMountedRef.current) {
-          setError(errorMessage);
-        }
-        return { canceled: true };
-      } finally {
-        if (isMountedRef.current) {
-          setIsLoading(false);
-        }
+      const result = await launchCameraVideoOp.execute(options);
+      if (result?.errorMessage) {
+        launchCameraVideoOp.setError(result.errorMessage);
       }
+      return result ?? { canceled: true };
     },
-    []
+    [launchCameraVideoOp]
   );
 
   const requestCameraPermission =
@@ -222,7 +163,11 @@ export const useMedia = () => {
     requestMediaLibraryPermission,
     getCameraPermissionStatus,
     getMediaLibraryPermissionStatus,
-    isLoading,
-    error,
+    isLoading: pickImageOp.isLoading || pickMultipleImagesOp.isLoading ||
+               pickVideoOp.isLoading || launchCameraOp.isLoading ||
+               launchCameraVideoOp.isLoading,
+    error: pickImageOp.error || pickMultipleImagesOp.error ||
+           pickVideoOp.error || launchCameraOp.error ||
+           launchCameraVideoOp.error,
   };
 };