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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.113",
+  "version": "4.23.115",
   "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/atoms/AtomicTouchable.tsx

@@ -16,6 +16,18 @@ export interface AtomicTouchableProps {
   activeOpacity?: number;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  // Accessibility props
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: 'button' | 'link' | 'none' | 'text' | 'search' | 'image' | 'adjustable' | 'imagebutton' | 'header' | 'summary' | 'alert' | 'checkbox' | 'combobox' | 'menu' | 'menubar' | 'menuitem' | 'progressbar' | 'radio' | 'radiogroup' | 'scrollbar' | 'spinbutton' | 'switch' | 'tab' | 'tablist' | 'timer' | 'toolbar';
+  accessibilityState?: {
+    disabled?: boolean;
+    selected?: boolean;
+    checked?: boolean | 'mixed';
+    busy?: boolean;
+    expanded?: boolean;
+  };
+  accessible?: boolean;
 }
 
 export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
@@ -26,6 +38,11 @@ export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
   activeOpacity = 0.7,
   style,
   testID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = 'button',
+  accessibilityState,
+  accessible = true,
 }) => {
   return (
     <TouchableOpacity
@@ -35,6 +52,11 @@ export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
       activeOpacity={activeOpacity}
       style={style}
       testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={{ ...accessibilityState, disabled }}
+      accessible={accessible}
     >
       {children}
     </TouchableOpacity>

package/src/atoms/badge/AtomicBadge.tsx

@@ -3,7 +3,7 @@
  * Reusable badge for labels, status indicators, and tags
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from "react-native";
 import { AtomicText } from "../AtomicText";
 import { AtomicIcon, type IconName } from "../icon";
@@ -43,34 +43,34 @@ export const AtomicBadge: React.FC<AtomicBadgeProps> = React.memo(({
 }) => {
     const tokens = useAppDesignTokens();
 
-    const sizeConfig = {
-        sm: { 
-            paddingH: 6 * tokens.spacingMultiplier, 
-            paddingV: 2 * tokens.spacingMultiplier, 
-            fontSize: 10 * tokens.spacingMultiplier, 
-            iconSize: 10 * tokens.spacingMultiplier, 
-            gap: 3 * tokens.spacingMultiplier, 
-            radius: 4 * tokens.spacingMultiplier 
+    const sizeConfig = useMemo(() => ({
+        sm: {
+            paddingH: 6 * tokens.spacingMultiplier,
+            paddingV: 2 * tokens.spacingMultiplier,
+            fontSize: 10 * tokens.spacingMultiplier,
+            iconSize: 10 * tokens.spacingMultiplier,
+            gap: 3 * tokens.spacingMultiplier,
+            radius: 4 * tokens.spacingMultiplier
         },
-        md: { 
-            paddingH: 8 * tokens.spacingMultiplier, 
-            paddingV: 4 * tokens.spacingMultiplier, 
-            fontSize: 11 * tokens.spacingMultiplier, 
-            iconSize: 12 * tokens.spacingMultiplier, 
-            gap: 4 * tokens.spacingMultiplier, 
-            radius: 6 * tokens.spacingMultiplier 
+        md: {
+            paddingH: 8 * tokens.spacingMultiplier,
+            paddingV: 4 * tokens.spacingMultiplier,
+            fontSize: 11 * tokens.spacingMultiplier,
+            iconSize: 12 * tokens.spacingMultiplier,
+            gap: 4 * tokens.spacingMultiplier,
+            radius: 6 * tokens.spacingMultiplier
         },
-        lg: { 
-            paddingH: 12 * tokens.spacingMultiplier, 
-            paddingV: 6 * tokens.spacingMultiplier, 
-            fontSize: 13 * tokens.spacingMultiplier, 
-            iconSize: 14 * tokens.spacingMultiplier, 
-            gap: 5 * tokens.spacingMultiplier, 
-            radius: 8 * tokens.spacingMultiplier 
+        lg: {
+            paddingH: 12 * tokens.spacingMultiplier,
+            paddingV: 6 * tokens.spacingMultiplier,
+            fontSize: 13 * tokens.spacingMultiplier,
+            iconSize: 14 * tokens.spacingMultiplier,
+            gap: 5 * tokens.spacingMultiplier,
+            radius: 8 * tokens.spacingMultiplier
         },
-    }[size];
+    }[size]), [size, tokens.spacingMultiplier]);
 
-    const getVariantColors = () => {
+    const colors = useMemo(() => {
         switch (variant) {
             case "primary":
                 return { bg: tokens.colors.primaryLight, text: tokens.colors.primary };
@@ -87,9 +87,7 @@ export const AtomicBadge: React.FC<AtomicBadgeProps> = React.memo(({
             default:
                 return { bg: tokens.colors.primaryLight, text: tokens.colors.primary };
         }
-    };
-
-    const colors = getVariantColors();
+    }, [variant, tokens.colors]);
 
     const containerStyle: StyleProp<ViewStyle> = [
         styles.container,

package/src/atoms/chip/AtomicChip.tsx

@@ -3,7 +3,7 @@
  * Refactored: Extracted configs, styles, and types
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, ViewStyle, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../AtomicText';
 import { AtomicIcon } from '../icon';
@@ -33,10 +33,10 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const sizeConfig = getChipSizeConfig(size, tokens);
-  const colorConfig = getChipColorConfig(color, variant, tokens);
-  const borderStyle = getChipBorderStyle(variant, tokens);
-  const selectedStyle = getChipSelectedStyle(selected, tokens);
+  const sizeConfig = useMemo(() => getChipSizeConfig(size, tokens), [size, tokens]);
+  const colorConfig = useMemo(() => getChipColorConfig(color, variant, tokens), [color, variant, tokens]);
+  const borderStyle = useMemo(() => getChipBorderStyle(variant, tokens), [variant, tokens]);
+  const selectedStyle = useMemo(() => getChipSelectedStyle(selected, tokens), [selected, tokens]);
 
   // Apply custom colors if provided
   const finalBackgroundColor = backgroundColor || colorConfig.bg;

package/src/atoms/datepicker/components/DatePickerModal.tsx

@@ -5,7 +5,7 @@
  * Extracted from AtomicDatePicker for better separation of concerns.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   Modal,
@@ -52,7 +52,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  const modalStyles = StyleSheet.create({
+  const modalStyles = useMemo(() => StyleSheet.create({
     overlay: {
       flex: 1,
       backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`,
@@ -89,7 +89,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
       fontWeight: '500',
       color: tokens.colors.onPrimary,
     },
-  });
+  }), [overlayOpacity, tokens, insets.bottom]);
 
   if (Platform.OS !== 'ios') {
     return null;
@@ -102,6 +102,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
       animationType="none"
       onRequestClose={onClose}
       testID={`${testID}-modal`}
+      accessibilityViewIsModal={true}
     >
       <View style={modalStyles.overlay}>
         <View style={modalStyles.container}>

package/src/atoms/input/hooks/useInputState.ts

@@ -54,5 +54,5 @@ export const useInputState = ({
     setIsFocused,
     handleTextChange,
     togglePasswordVisibility,
-  }), [localValue, isFocused, isPasswordVisible, characterCount, isAtMaxLength, handleTextChange, togglePasswordVisibility]);
+  }), [localValue, isFocused, isPasswordVisible, characterCount, isAtMaxLength, setIsFocused, handleTextChange, togglePasswordVisibility]);
 };

package/src/atoms/picker/components/PickerModal.tsx

@@ -95,7 +95,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   };
 
   return (
-    <Modal visible={visible} animationType="none" transparent onRequestClose={onClose} testID={`${testID}-modal`}>
+    <Modal visible={visible} animationType="none" transparent onRequestClose={onClose} testID={`${testID}-modal`} accessibilityViewIsModal={true}>
       <View style={styles.overlay}>
         <View style={[styles.container, { paddingBottom: insets.bottom + tokens.spacing.md }]}>
           <View style={styles.header}>

package/src/atoms/picker/hooks/usePickerState.ts

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import type { PickerOption } from '../../picker/types';
 
 interface UsePickerStateProps {
@@ -71,23 +71,23 @@ export const usePickerState = ({
   /**
    * Handle modal open
    */
-  const openModal = () => {
+  const openModal = useCallback(() => {
     setModalVisible(true);
     setSearchQuery('');
-  };
+  }, []);
 
   /**
    * Handle modal close
    */
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     setModalVisible(false);
     setSearchQuery('');
-  };
+  }, []);
 
   /**
    * Handle option selection
    */
-  const handleSelect = (optionValue: string) => {
+  const handleSelect = useCallback((optionValue: string) => {
     if (multiple) {
       const newValues = selectedValues.includes(optionValue)
         ? selectedValues.filter((v) => v !== optionValue)
@@ -99,30 +99,30 @@ export const usePickerState = ({
         closeModal();
       }
     }
-  };
+  }, [multiple, selectedValues, onChange, autoClose, closeModal]);
 
   /**
    * Handle clear selection
    */
-  const handleClear = () => {
+  const handleClear = useCallback(() => {
     onChange(multiple ? [] : '');
-  };
+  }, [onChange, multiple]);
 
   /**
    * Handle search query change
    */
-  const handleSearch = (query: string) => {
+  const handleSearch = useCallback((query: string) => {
     setSearchQuery(query);
-  };
+  }, []);
 
   /**
    * Handle chip removal
    */
-  const handleChipRemove = (value: string) => {
+  const handleChipRemove = useCallback((value: string) => {
     handleSelect(value);
-  };
+  }, [handleSelect]);
 
-  return {
+  return useMemo(() => ({
     modalVisible,
     searchQuery,
     selectedValues,
@@ -135,5 +135,18 @@ export const usePickerState = ({
     handleClear,
     handleSearch,
     handleChipRemove,
-  };
+  }), [
+    modalVisible,
+    searchQuery,
+    selectedValues,
+    selectedOptions,
+    filteredOptions,
+    displayText,
+    openModal,
+    closeModal,
+    handleSelect,
+    handleClear,
+    handleSearch,
+    handleChipRemove,
+  ]);
 };

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -22,7 +22,7 @@
  * ```
  */
 
-import React from 'react';
+import React, { useMemo } 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';
@@ -50,8 +50,8 @@ const SkeletonItem: React.FC<{
   config: SkeletonConfig;
   baseColor: string;
   multiplier: number;
-}> = ({ config, baseColor, multiplier }) => {
-  const itemStyles = StyleSheet.create({
+}> = React.memo(({ config, baseColor, multiplier }) => {
+  const itemStyles = useMemo(() => StyleSheet.create({
     item: {
       ...styles.skeleton,
       width: (typeof config.width === 'number' ? config.width * multiplier : config.width) as DimensionValue,
@@ -60,10 +60,10 @@ const SkeletonItem: React.FC<{
       marginBottom: config.marginBottom ? config.marginBottom * multiplier : undefined,
       backgroundColor: baseColor,
     },
-  });
+  }), [config, baseColor, multiplier]);
 
   return <View style={itemStyles.item} />;
-};
+});
 
 export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
   pattern = 'list',

package/src/device/infrastructure/services/DeviceCapabilityService.ts

@@ -54,19 +54,8 @@ export class DeviceCapabilityService {
    */
   static async hasNotch(): Promise<boolean> {
     try {
-      if (Platform.OS !== 'ios') {
-        return false;
-      }
-
       const info = await DeviceInfoService.getDeviceInfo();
-      const modelName = info.modelName?.toLowerCase() ?? '';
-
-      // iPhone X and newer (with notch or dynamic island)
-      return (
-        modelName.includes('iphone x') ||
-        modelName.includes('iphone 1') || // 11, 12, 13, 14, 15
-        modelName.includes('pro')
-      );
+      return this.hasNotchFromInfo(info);
     } catch {
       return false;
     }

package/src/filesystem/infrastructure/services/directory.service.ts

@@ -5,6 +5,7 @@
 
 import { Directory, Paths } from "expo-file-system";
 import type { DirectoryType } from "../../domain/entities/File";
+import { ErrorHandler, ErrorCodes } from "../../../utils/errors";
 
 /**
  * Create directory
@@ -12,10 +13,19 @@ import type { DirectoryType } from "../../domain/entities/File";
 export async function createDirectory(uri: string): Promise<boolean> {
   try {
     const dir = new Directory(uri);
-    dir.create({ intermediates: true, idempotent: true });
+    await dir.create({ intermediates: true, idempotent: true });
     return true;
-  } catch {
-    return false;
+  } catch (error) {
+    const handled = ErrorHandler.handleAndLog(
+      error,
+      'createDirectory',
+      { uri }
+    );
+    throw ErrorHandler.create(
+      `Failed to create directory: ${handled.message}`,
+      ErrorCodes.DIRECTORY_CREATE_ERROR,
+      { uri, originalError: handled }
+    );
   }
 }
 
@@ -25,10 +35,19 @@ export async function createDirectory(uri: string): Promise<boolean> {
 export async function listDirectory(uri: string): Promise<string[]> {
   try {
     const dir = new Directory(uri);
-    const items = dir.list();
+    const items = await dir.list();
     return items.map((item) => item.uri);
-  } catch {
-    return [];
+  } catch (error) {
+    const handled = ErrorHandler.handleAndLog(
+      error,
+      'listDirectory',
+      { uri }
+    );
+    throw ErrorHandler.create(
+      `Failed to list directory contents: ${handled.message}`,
+      ErrorCodes.FILE_READ_ERROR,
+      { uri, originalError: handled }
+    );
   }
 }
 
@@ -43,10 +62,19 @@ export function getDirectoryPath(type: DirectoryType): string {
       case "cacheDirectory":
         return Paths.cache.uri;
       default:
-        return "";
+        throw ErrorHandler.create(
+          `Unknown directory type: ${type}`,
+          ErrorCodes.INVALID_INPUT,
+          { type }
+        );
     }
-  } catch {
-    return "";
+  } catch (error) {
+    const handled = ErrorHandler.handleAndLog(
+      error,
+      'getDirectoryPath',
+      { type }
+    );
+    throw handled;
   }
 }
 

package/src/filesystem/infrastructure/services/download.service.ts

@@ -7,6 +7,8 @@ import type { FileOperationResult } from "../../domain/entities/File";
 import { FileUtils } from "../../domain/entities/File";
 import { SUPPORTED_DOWNLOAD_EXTENSIONS, DEFAULT_DOWNLOAD_EXTENSION } from "./download.constants";
 import type { DownloadProgressCallback, DownloadWithProgressResult } from "./download.types";
+import { ErrorHandler, ErrorCodes } from "../../../utils/errors";
+import { retryWithBackoff, isNetworkError } from "../../../utils/async";
 
 const hashUrl = (url: string) => {
   let hash = 0;
@@ -25,9 +27,29 @@ const getCacheUri = (url: string, dir: string) => FileUtils.joinPaths(dir, `cach
 export async function downloadFile(url: string, dest?: string): Promise<FileOperationResult> {
   try {
     const destination = dest ? new File(dest) : new File(Paths.document, FileUtils.generateUniqueFilename("download"));
-    const res = await File.downloadFileAsync(url, destination, { idempotent: true });
+
+    // Retry download with exponential backoff
+    const res = await retryWithBackoff(
+      () => File.downloadFileAsync(url, destination, { idempotent: true }),
+      {
+        maxRetries: 3,
+        baseDelay: 1000,
+        shouldRetry: (error) => isNetworkError(error as Error),
+      }
+    );
+
     return { success: true, uri: res.uri };
-  } catch (e: unknown) { return { success: false, error: e instanceof Error ? e.message : String(e) }; }
+  } catch (error) {
+    const handled = ErrorHandler.handleAndLog(
+      error,
+      'downloadFile',
+      { url, dest }
+    );
+    return {
+      success: false,
+      error: handled.getUserMessage(),
+    };
+  }
 }
 
 export async function downloadFileWithProgress(
@@ -38,13 +60,19 @@ export async function downloadFileWithProgress(
 ): Promise<DownloadWithProgressResult> {
   try {
     const dir = new Directory(cacheDir);
-    if (!dir.exists) dir.create({ intermediates: true, idempotent: true });
+    if (!dir.exists) await dir.create({ intermediates: true, idempotent: true });
 
     const destUri = getCacheUri(url, cacheDir);
     if (new File(destUri).exists) return { success: true, uri: destUri, fromCache: true };
 
     const response = await fetch(url, { signal });
-    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    if (!response.ok) {
+      throw ErrorHandler.create(
+        `HTTP ${response.status}: ${response.statusText}`,
+        ErrorCodes.NETWORK_ERROR,
+        { url, status: response.status }
+      );
+    }
 
     const totalBytes = parseInt(response.headers.get("content-length") || "0", 10);
     if (!response.body) return { ...(await downloadFile(url, destUri)), fromCache: false };
@@ -57,7 +85,11 @@ export async function downloadFileWithProgress(
       while (true) {
         if (signal?.aborted) {
           await reader.cancel();
-          throw new Error("Download aborted");
+          throw ErrorHandler.create(
+            'Download aborted by user',
+            ErrorCodes.NETWORK_ERROR,
+            { url }
+          );
         }
 
         const { done, value } = await reader.read();
@@ -70,19 +102,38 @@ export async function downloadFileWithProgress(
       const all = new Uint8Array(received);
       let pos = 0;
       for (const c of chunks) { all.set(c, pos); pos += c.length; }
-      new File(destUri).write(all);
+      await new File(destUri).write(all);
 
       return { success: true, uri: destUri, fromCache: false };
     } finally {
       reader.releaseLock();
     }
-  } catch (e: unknown) { return { success: false, error: e instanceof Error ? e.message : String(e) }; }
+  } catch (error) {
+    const handled = ErrorHandler.handleAndLog(
+      error,
+      'downloadFileWithProgress',
+      { url, cacheDir }
+    );
+    return {
+      success: false,
+      error: handled.getUserMessage(),
+    };
+  }
 }
 
 export const isUrlCached = (url: string, dir: string) => new File(getCacheUri(url, dir)).exists;
 export const getCachedFileUri = (url: string, dir: string) => isUrlCached(url, dir) ? getCacheUri(url, dir) : null;
-export const deleteCachedFile = (url: string, dir: string) => {
-  const f = new File(getCacheUri(url, dir));
-  if (f.exists) f.delete();
-  return true;
+export const deleteCachedFile = async (url: string, dir: string): Promise<boolean> => {
+  try {
+    const f = new File(getCacheUri(url, dir));
+    if (f.exists) await f.delete();
+    return true;
+  } catch (error) {
+    ErrorHandler.handleAndLog(
+      error,
+      'deleteCachedFile',
+      { url, dir }
+    );
+    return false;
+  }
 };

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

@@ -5,6 +5,7 @@
 
 import { File, Directory } from "expo-file-system";
 import type { FileOperationResult } from "../../domain/entities/File";
+import { ErrorHandler, ErrorCodes } from "../../../utils/errors";
 
 /**
  * Delete file or directory
@@ -15,27 +16,47 @@ export async function deleteFile(uri: string): Promise<boolean> {
     try {
       const file = new File(uri);
       if (file.exists) {
-        file.delete();
+        await file.delete();
         return true;
       }
-    } catch {
+    } catch (fileError) {
       // Not a file, try as directory
+      if (__DEV__) {
+        console.log('[deleteFile] Not a file, trying as directory:', uri);
+      }
     }
 
     // Try as directory
     try {
       const dir = new Directory(uri);
       if (dir.exists) {
-        dir.delete();
+        await dir.delete();
         return true;
       }
-    } catch {
+    } catch (dirError) {
       // Not a directory either
+      if (__DEV__) {
+        console.log('[deleteFile] Not a directory:', uri);
+      }
     }
 
-    return false;
-  } catch {
-    return false;
+    // File/directory doesn't exist
+    throw ErrorHandler.create(
+      `File or directory not found: ${uri}`,
+      ErrorCodes.FILE_NOT_FOUND,
+      { uri }
+    );
+  } catch (error) {
+    const handled = ErrorHandler.handleAndLog(
+      error,
+      'deleteFile',
+      { uri }
+    );
+    throw ErrorHandler.create(
+      `Failed to delete file: ${handled.message}`,
+      ErrorCodes.FILE_DELETE_ERROR,
+      { uri, originalError: handled }
+    );
   }
 }
 
@@ -49,12 +70,17 @@ export async function copyFile(
   try {
     const sourceFile = new File(sourceUri);
     const destination = new File(destinationUri);
-    sourceFile.copy(destination);
+    await sourceFile.copy(destination);
     return { success: true, uri: destinationUri };
   } catch (error) {
+    const handled = ErrorHandler.handleAndLog(
+      error,
+      'copyFile',
+      { sourceUri, destinationUri }
+    );
     return {
       success: false,
-      error: error instanceof Error ? error.message : "Unknown error",
+      error: handled.getUserMessage(),
     };
   }
 }
@@ -69,12 +95,17 @@ export async function moveFile(
   try {
     const sourceFile = new File(sourceUri);
     const destination = new File(destinationUri);
-    sourceFile.move(destination);
+    await sourceFile.move(destination);
     return { success: true, uri: destinationUri };
   } catch (error) {
+    const handled = ErrorHandler.handleAndLog(
+      error,
+      'moveFile',
+      { sourceUri, destinationUri }
+    );
     return {
       success: false,
-      error: error instanceof Error ? error.message : "Unknown error",
+      error: handled.getUserMessage(),
     };
   }
 }