@umituz/react-native-design-system 4.23.113 → 4.23.115

package/src/filesystem/infrastructure/services/file-writer.service.ts

@@ -6,6 +6,7 @@
 import { File } from "expo-file-system";
 import type { FileEncoding, FileOperationResult } from "../../domain/entities/File";
 import { getEncodingType, type ExpoEncodingType } from "./encoding.service";
+import { ErrorHandler, ErrorCodes } from "../../../utils/errors";
 
 /**
  * Write string to file
@@ -18,15 +19,19 @@ export async function writeFile(
   try {
     const encodingType = getEncodingType(encoding);
     const file = new File(uri);
-    file.write(content, {
+    await file.write(content, {
       encoding: encodingType as ExpoEncodingType,
     });
     return { success: true, uri };
   } catch (error) {
-    const writeError = error as Error;
+    const handled = ErrorHandler.handleAndLog(
+      error,
+      'writeFile',
+      { uri, encoding, contentLength: content.length }
+    );
     return {
       success: false,
-      error: writeError.message || "Unknown error",
+      error: handled.getUserMessage(),
     };
   }
 }

package/src/media/infrastructure/services/MediaPickerService.ts

@@ -22,6 +22,7 @@ import {
 } from "../utils/mediaPickerMappers";
 import { PermissionManager } from "../utils/PermissionManager";
 import { FileValidator } from "../../domain/utils/FileValidator";
+import { ErrorHandler, ErrorCodes } from "../../../utils/errors";
 
 /**
  * Media picker service for selecting images/videos
@@ -33,7 +34,11 @@ export class MediaPickerService {
     try {
       const permission = await PermissionManager.requestCameraPermission();
       if (!PermissionManager.isPermissionGranted(permission)) {
-        return { canceled: true };
+        return {
+          canceled: true,
+          error: MediaValidationError.PERMISSION_DENIED,
+          errorMessage: "Camera permission was denied",
+        };
       }
 
       const result = await ImagePicker.launchCameraAsync({
@@ -45,8 +50,13 @@ export class MediaPickerService {
       });
 
       return mapPickerResult(result);
-    } catch {
-      return { canceled: true };
+    } catch (error) {
+      ErrorHandler.handleAndLog(error, 'launchCamera', { options });
+      return {
+        canceled: true,
+        error: MediaValidationError.PICKER_ERROR,
+        errorMessage: "Failed to launch camera",
+      };
     }
   }
 
@@ -56,7 +66,11 @@ export class MediaPickerService {
     try {
       const permission = await PermissionManager.requestCameraPermission();
       if (!PermissionManager.isPermissionGranted(permission)) {
-        return { canceled: true };
+        return {
+          canceled: true,
+          error: MediaValidationError.PERMISSION_DENIED,
+          errorMessage: "Camera permission was denied",
+        };
       }
 
       const result = await ImagePicker.launchCameraAsync({
@@ -67,8 +81,13 @@ export class MediaPickerService {
       });
 
       return mapPickerResult(result);
-    } catch {
-      return { canceled: true };
+    } catch (error) {
+      ErrorHandler.handleAndLog(error, 'launchCameraForVideo', { options });
+      return {
+        canceled: true,
+        error: MediaValidationError.PICKER_ERROR,
+        errorMessage: "Failed to launch camera for video",
+      };
     }
   }
 
@@ -114,8 +133,13 @@ export class MediaPickerService {
       }
 
       return mappedResult;
-    } catch {
-      return { canceled: true };
+    } catch (error) {
+      ErrorHandler.handleAndLog(error, 'pickImage', { options });
+      return {
+        canceled: true,
+        error: MediaValidationError.PICKER_ERROR,
+        errorMessage: "Failed to pick image from library",
+      };
     }
   }
 

package/src/media/infrastructure/services/MediaSaveService.ts

@@ -5,6 +5,7 @@
 
 import * as FileSystem from "expo-file-system";
 import { MediaLibraryPermission } from "../../domain/entities/Media";
+import { ErrorHandler, ErrorCodes } from "../../../utils/errors";
 
 export interface SaveResult {
   success: boolean;
@@ -87,10 +88,14 @@ export class MediaSaveService {
         path: destination,
       };
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Unknown error";
+      const handled = ErrorHandler.handleAndLog(
+        error,
+        'saveToStorage',
+        { uri, mediaType }
+      );
       return {
         success: false,
-        error: `Failed to save media: ${message}`,
+        error: `Failed to save media: ${handled.getUserMessage()}`,
       };
     }
   }

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

@@ -5,7 +5,7 @@
  * Provides camera, gallery picking functionality.
  */
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { MediaPickerService } from "../../infrastructure/services/MediaPickerService";
 import { PermissionManager } from "../../infrastructure/utils/PermissionManager";
 import type {
@@ -39,24 +39,38 @@ export const useMedia = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Track mounted state to prevent setState on unmounted component
+  const isMountedRef = useRef(true);
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
   const pickImage = useCallback(
     async (options?: MediaPickerOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      if (isMountedRef.current) {
+        setIsLoading(true);
+        setError(null);
+      }
       try {
         const result = await MediaPickerService.pickSingleImage(options);
         // Set error from validation result if present
-        if (result.errorMessage) {
+        if (result.errorMessage && isMountedRef.current) {
           setError(result.errorMessage);
         }
         return result;
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : "Failed to pick image";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []
@@ -64,18 +78,24 @@ export const useMedia = () => {
 
   const pickMultipleImages = useCallback(
     async (options?: MediaPickerOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      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";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []
@@ -83,18 +103,24 @@ export const useMedia = () => {
 
   const pickVideo = useCallback(
     async (options?: MediaPickerOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      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";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []
@@ -102,18 +128,24 @@ export const useMedia = () => {
 
   const launchCamera = useCallback(
     async (options?: CameraOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      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";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []
@@ -121,18 +153,24 @@ export const useMedia = () => {
 
   const launchCameraForVideo = useCallback(
     async (options?: CameraOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      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";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []

package/src/molecules/BaseModal.tsx

@@ -51,6 +51,7 @@ export const BaseModal: React.FC<BaseModalProps> = ({
       onRequestClose={onClose}
       statusBarTranslucent
       testID={testID}
+      accessibilityViewIsModal={true}
     >
       <View style={styles.overlay}>
         <TouchableOpacity

package/src/molecules/ConfirmationModalMain.tsx

@@ -64,6 +64,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
       onRequestClose={onCancel}
       statusBarTranslucent
       testID={testID}
+      accessibilityViewIsModal={true}
     >
       <View style={getModalOverlayStyle()}>
         <ConfirmationModalBackdrop

package/src/molecules/ListItem.tsx

@@ -14,8 +14,22 @@ export const ListItem: React.FC<ListItemProps> = ({
   const listItemStyles = getListItemStyles(tokens);
   const Component = onPress ? TouchableOpacity : View;
 
+  const accessibilityProps = onPress
+    ? {
+        accessibilityRole: 'button' as const,
+        accessibilityLabel: title,
+        accessibilityState: { disabled },
+      }
+    : {};
+
   return (
-    <Component style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+    <Component
+      style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+      {...accessibilityProps}
+    >
       {leftIcon && (
         <AtomicIcon 
           name={leftIcon} 

package/src/molecules/avatar/Avatar.tsx

@@ -5,8 +5,8 @@
  * Handles loading states, fallbacks, and status indicators.
  */
 
-import React from 'react';
-import { View, Image, StyleSheet, type StyleProp, type ViewStyle, type ImageStyle } from 'react-native';
+import React, { useMemo } from 'react';
+import { View, Image, StyleSheet, TouchableOpacity, type StyleProp, type ViewStyle, type ImageStyle } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicText, AtomicIcon } from '../../atoms';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
@@ -62,20 +62,29 @@ export const Avatar: React.FC<AvatarProps> = ({
   onPress,
 }) => {
   const tokens = useAppDesignTokens();
-  const config = SIZE_CONFIGS[size];
+  const config = useMemo(() => SIZE_CONFIGS[size], [size]);
 
   // Determine avatar type and content
   const hasImage = !!uri;
   const hasName = !!name;
-  const initials = hasName ? AvatarUtils.generateInitials(name) : AVATAR_CONSTANTS.FALLBACK_INITIALS;
-  const bgColor = backgroundColor || (hasName ? AvatarUtils.getColorForName(name) : tokens.colors.surfaceSecondary);
-  const borderRadius = AvatarUtils.getBorderRadius(shape, config.size);
+  const initials = useMemo(
+    () => (hasName ? AvatarUtils.generateInitials(name) : AVATAR_CONSTANTS.FALLBACK_INITIALS),
+    [hasName, name]
+  );
+  const bgColor = useMemo(
+    () => backgroundColor || (hasName ? AvatarUtils.getColorForName(name) : tokens.colors.surfaceSecondary),
+    [backgroundColor, hasName, name, tokens.colors.surfaceSecondary]
+  );
+  const borderRadius = useMemo(
+    () => AvatarUtils.getBorderRadius(shape, config.size),
+    [shape, config.size]
+  );
 
   // Status indicator position
-  const statusPosition = {
+  const statusPosition = useMemo(() => ({
     bottom: 0,
     right: 0,
-  };
+  }), []);
 
   const renderContent = () => {
     if (hasImage) {
@@ -122,8 +131,10 @@ export const Avatar: React.FC<AvatarProps> = ({
     );
   };
 
+  const AvatarWrapper = onPress ? TouchableOpacity : View;
+
   return (
-    <View
+    <AvatarWrapper
       style={[
         styles.container,
         {
@@ -134,7 +145,11 @@ export const Avatar: React.FC<AvatarProps> = ({
         },
         style,
       ]}
-      onTouchEnd={onPress}
+      onPress={onPress}
+      disabled={!onPress}
+      accessibilityRole={onPress ? 'button' : 'image'}
+      accessibilityLabel={name || 'User avatar'}
+      accessible={true}
     >
       {renderContent()}
 
@@ -153,9 +168,11 @@ export const Avatar: React.FC<AvatarProps> = ({
               ...statusPosition,
             },
           ]}
+          accessibilityLabel={`Status: ${status}`}
+          accessibilityRole="none"
         />
       )}
-    </View>
+    </AvatarWrapper>
   );
 };
 

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

@@ -99,6 +99,7 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
       animationType="none"
       onRequestClose={dismiss}
       statusBarTranslucent
+      accessibilityViewIsModal={true}
     >
       <Pressable style={styles.overlay} onPress={dismiss}>
         <View style={styles.container}>

package/src/molecules/calendar/presentation/components/AtomicCalendar.tsx

@@ -119,7 +119,7 @@ export const AtomicCalendar: React.FC<AtomicCalendarProps> = ({
 
           return (
             <CalendarDayCell
-              key={index}
+              key={day.date.getTime()}
               day={day}
               index={index}
               isSelected={isSelected}

package/src/responsive/useResponsive.ts

@@ -124,7 +124,7 @@ export const useResponsive = (): UseResponsiveReturn => {
         getGridCols,
       };
     },
-    [width, height, getLogoSize, getInputHeight, getIconSize, getMaxWidth, getFontSize, getGridCols],
+    [width, height, insets, getLogoSize, getInputHeight, getIconSize, getMaxWidth, getFontSize, getGridCols],
   );
 
   return responsiveValues;

package/src/services/api/ApiClient.ts

@@ -20,6 +20,8 @@ import {
   isSuccessfulResponse,
   fetchWithTimeout,
 } from './utils/responseHandler';
+import { retryWithBackoff, isNetworkError, isRetryableHttpStatus } from '../../utils/async';
+import { ErrorHandler } from '../../utils/errors';
 
 /**
  * Applies interceptors to a value
@@ -46,7 +48,7 @@ export class ApiClient {
   }
 
   /**
-   * Makes an HTTP request
+   * Makes an HTTP request with automatic retry for retryable errors
    */
   async request<T>(requestConfig: ApiRequestConfig): Promise<ApiResponse<T>> {
     try {
@@ -61,11 +63,39 @@ export class ApiClient {
         headers: { ...this.config.headers, ...config.headers },
       });
 
-      const response = await fetchWithTimeout(
-        fullURL,
-        fetchOptions,
-        config.timeout || this.config.timeout || 30000
-      );
+      // Retry only for GET requests and retryable errors
+      const shouldRetry = config.method === 'GET';
+      const timeout = config.timeout || this.config.timeout || 30000;
+
+      const response = shouldRetry
+        ? await retryWithBackoff(
+            () => fetchWithTimeout(fullURL, fetchOptions, timeout),
+            {
+              maxRetries: 3,
+              baseDelay: 1000,
+              shouldRetry: (error) => {
+                // Retry on network errors
+                if (isNetworkError(error as Error)) return true;
+
+                // Retry on specific HTTP status codes (5xx, 429, 408)
+                if ('status' in error && typeof error.status === 'number') {
+                  return isRetryableHttpStatus(error.status);
+                }
+
+                return false;
+              },
+              onRetry: (error, attempt, delay) => {
+                if (__DEV__) {
+                  ErrorHandler.log({
+                    name: 'ApiRetry',
+                    message: `Retrying API request (attempt ${attempt}) after ${delay}ms`,
+                    context: { url: fullURL, error: error.message },
+                  });
+                }
+              },
+            }
+          )
+        : await fetchWithTimeout(fullURL, fetchOptions, timeout);
 
       if (!isSuccessfulResponse(response)) {
         const error = await handleHttpError(response);
@@ -78,6 +108,7 @@ export class ApiClient {
       return parsedResponse;
     } catch (error) {
       const apiError = handleNetworkError(error);
+      ErrorHandler.log(apiError);
       throw await applyInterceptors(apiError, this.config.errorInterceptors);
     }
   }

package/src/storage/presentation/hooks/usePersistentCache.ts

@@ -99,16 +99,24 @@ export function usePersistentCache<T>(
   // Track if component is mounted to prevent state updates after unmount
   const isMountedRef = useRef(true);
 
+  // Stabilize actions to prevent circular dependency
+  const stableActionsRef = useRef(actions);
+  useEffect(() => {
+    stableActionsRef.current = actions;
+  });
+
   const loadFromStorage = useCallback(async () => {
+    const currentActions = stableActionsRef.current;
+
     if (!enabled) {
       if (isMountedRef.current) {
-        actions.setLoading(false);
+        currentActions.setLoading(false);
       }
       return;
     }
 
     if (isMountedRef.current) {
-      actions.setLoading(true);
+      currentActions.setLoading(true);
     }
 
     try {
@@ -117,35 +125,35 @@ export function usePersistentCache<T>(
       if (isMountedRef.current) {
         if (cached) {
           const expired = isCacheExpired(cached, version);
-          actions.setData(cached.value);
-          actions.setExpired(expired);
+          currentActions.setData(cached.value);
+          currentActions.setExpired(expired);
         } else {
-          actions.clearData();
+          currentActions.clearData();
         }
       }
     } catch {
       if (isMountedRef.current) {
-        actions.clearData();
+        currentActions.clearData();
       }
     } finally {
       if (isMountedRef.current) {
-        actions.setLoading(false);
+        currentActions.setLoading(false);
       }
     }
-  }, [key, version, enabled, actions, cacheOps]);
+  }, [key, version, enabled, cacheOps]); // Removed actions from dependencies
 
   const setData = useCallback(
     async (value: T) => {
       await cacheOps.saveToStorage(key, value, { ttl, version, enabled });
-      actions.setData(value);
+      stableActionsRef.current.setData(value);
     },
-    [key, ttl, version, enabled, actions, cacheOps],
+    [key, ttl, version, enabled, cacheOps],
   );
 
   const clearData = useCallback(async () => {
     await cacheOps.clearFromStorage(key, enabled);
-    actions.clearData();
-  }, [key, enabled, actions, cacheOps]);
+    stableActionsRef.current.clearData();
+  }, [key, enabled, cacheOps]);
 
   const refresh = useCallback(async () => {
     await loadFromStorage();

package/src/storage/presentation/hooks/useStore.ts

@@ -16,6 +16,7 @@ export function useStore<T extends object>(config: StoreConfig<T>) {
       config.version,
       config.persist,
       config.storage,
+      JSON.stringify(config.initialState), // Track initialState changes
     ]
   );
 

package/src/tanstack/presentation/hooks/usePrefetch.ts

@@ -30,6 +30,13 @@ export function usePrefetchQuery<
   const queryClient = useQueryClient();
   const prefetchingRef = useRef(new Set<TVariables>());
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      prefetchingRef.current.clear();
+    };
+  }, []);
+
   return useCallback(
     async (variables: TVariables) => {
       if (prefetchingRef.current.has(variables)) return;
@@ -62,6 +69,13 @@ export function usePrefetchInfiniteQuery<
   const queryClient = useQueryClient();
   const hasPrefetchedRef = useRef(false);
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      hasPrefetchedRef.current = false;
+    };
+  }, []);
+
   return useCallback(async () => {
     if (hasPrefetchedRef.current) return;