@umituz/react-native-design-system 4.25.96 → 4.25.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.96",
+  "version": "4.25.98",
   "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": "./dist/index.d.ts",

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

@@ -95,7 +95,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
         {selected && <AtomicIcon name={icons.checkCircle} size="md" color="primary" />}
       </TouchableOpacity>
     );
-  }, [isSelected, onSelect, tokens, testID]);
+  }, [icons.checkCircle, isSelected, onSelect, tokens, testID]);
 
   return (
     <Modal visible={visible} animationType="none" transparent onRequestClose={onClose} testID={`${testID}-modal`} accessibilityViewIsModal={true}>

package/src/infinite-scroll/presentation/hooks/useInfiniteScroll.ts

@@ -47,6 +47,12 @@ export function useInfiniteScroll<T>(
   const isLoadingRef = useRef(false);
   const isMountedRef = useRef(true);
   const abortControllerRef = useRef<AbortController | null>(null);
+  const stateRef = useRef(state);
+
+  // Keep stateRef in sync with state
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
 
   useEffect(() => {
     isMountedRef.current = true;
@@ -89,22 +95,25 @@ export function useInfiniteScroll<T>(
   }, [config, initialPage, pageSize, totalItems, maxRetries, retryDelay, cancelPendingRequests]);
 
   const loadMore = useCallback(async () => {
+    // Get fresh state from ref to avoid stale closure
+    const currentState = stateRef.current;
+
     if (
       isLoadingRef.current ||
-      !state.hasMore ||
-      state.isLoadingMore ||
-      state.isLoading
+      !currentState.hasMore ||
+      currentState.isLoadingMore ||
+      currentState.isLoading
     )
       return;
 
-    if (isCursorMode(config) && !state.cursor) return;
+    if (isCursorMode(config) && !currentState.cursor) return;
 
     isLoadingRef.current = true;
     if (isMountedRef.current) setState((prev) => ({ ...prev, isLoadingMore: true, error: null }));
 
     try {
       const updates = await retryWithBackoff(
-        () => loadMoreData(config, state, pageSize),
+        () => loadMoreData(config, currentState, pageSize),
         maxRetries,
         retryDelay,
       );
@@ -120,7 +129,7 @@ export function useInfiniteScroll<T>(
     } finally {
       isLoadingRef.current = false;
     }
-  }, [config, state, pageSize, maxRetries, retryDelay]);
+  }, [config, pageSize, maxRetries, retryDelay]);
 
   const refresh = useCallback(async () => {
     if (isLoadingRef.current) return;

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -15,6 +15,7 @@ import type { ScreenLayoutProps } from './types';
 let KCKeyboardAvoidingView: React.ComponentType<any> | null = null;
 let KCKeyboardAwareScrollView: React.ComponentType<any> | null = null;
 try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const kc = require('react-native-keyboard-controller');
   KCKeyboardAvoidingView = kc.KeyboardAvoidingView ?? null;
   KCKeyboardAwareScrollView = kc.KeyboardAwareScrollView ?? null;

package/src/layouts/index.ts

@@ -1,6 +1,4 @@
-export * from './AppHeader';
 export * from './Container';
 export * from './FormLayout';
 export * from './Grid';
-export * from './ScreenHeader';
 export * from './ScreenLayout';

package/src/molecules/ConfirmationModalContent.tsx

@@ -7,7 +7,7 @@
 import React, { useMemo } from 'react';
 import { View, ViewStyle, StyleProp } from 'react-native';
 import { useAppDesignTokens } from '../theme';
-import { ConfirmationModalVariant } from './confirmation-modal/types/';
+import { ConfirmationModalVariant } from './confirmation-modal/types';
 import {
   getVariantConfig,
   getModalContainerStyle,

package/src/molecules/ConfirmationModalMain.tsx

@@ -7,7 +7,7 @@
 import React, { useCallback } from 'react';
 import { View, Modal, TouchableOpacity } from 'react-native';
 import { useAppDesignTokens } from '../theme';
-import { ConfirmationModalProps } from './confirmation-modal/types/';
+import { ConfirmationModalProps } from './confirmation-modal/types';
 import {
   getModalOverlayStyle,
   getBackdropStyle,

package/src/molecules/alerts/AlertStore.ts

@@ -7,6 +7,7 @@ import { Alert } from './AlertTypes';
 
 interface AlertState {
     alerts: Alert[];
+    _updateInProgress: boolean;
 }
 
 interface AlertActions {
@@ -19,13 +20,37 @@ export const useAlertStore = createStore<AlertState, AlertActions>({
     name: 'alert-store',
     initialState: {
         alerts: [],
+        _updateInProgress: false,
     },
     persist: false,
     actions: (set, get) => ({
-        addAlert: (alert: Alert) => set({ alerts: [...get().alerts, alert] }),
-        dismissAlert: (id: string) => set({
-            alerts: get().alerts.filter((a: Alert) => a.id !== id)
-        }),
+        addAlert: (alert: Alert) => {
+            const { _updateInProgress, alerts } = get();
+            if (_updateInProgress) return;
+
+            const existingIndex = alerts.findIndex((a: Alert) => a.id === alert.id);
+
+            if (existingIndex >= 0) {
+                // Replace existing alert
+                const updatedAlerts = [...alerts];
+                updatedAlerts[existingIndex] = alert;
+                set({ alerts: updatedAlerts });
+            } else {
+                // Add new alert
+                set({ alerts: [...alerts, alert] });
+            }
+        },
+        dismissAlert: (id: string) => {
+            const { _updateInProgress, alerts } = get();
+            if (_updateInProgress) return;
+
+            const updatedAlerts = alerts.filter((a: Alert) => a.id !== id);
+
+            // Only update if something actually changed
+            if (updatedAlerts.length !== alerts.length) {
+                set({ alerts: updatedAlerts });
+            }
+        },
         clearAlerts: () => set({ alerts: [] }),
     }),
 });

package/src/molecules/alerts/hooks/useAlertDismissHandler.ts

@@ -15,7 +15,7 @@ export function useAlertDismissHandler(alert: Alert) {
   const handleDismiss = useCallback(() => {
     dismissAlert(alert.id);
     alert.onDismiss?.();
-  }, [alert.id, alert.onDismiss, dismissAlert]);
+  }, [alert, dismissAlert]);
 
   return handleDismiss;
 }

package/src/molecules/circular-menu/index.ts

@@ -1,4 +1,3 @@
 export * from "./CircularMenu";
-export * from "./CircularMenuItem";
 export * from "./CircularMenuBackground";
 export * from "./CircularMenuCloseButton";

package/src/molecules/confirmation-modal/styles/confirmationModalStyles.ts

@@ -5,7 +5,7 @@
  */
 
 import { ViewStyle } from 'react-native';
-import { ConfirmationModalVariant, ConfirmationModalVariantConfig } from '../types/';
+import { ConfirmationModalVariant, ConfirmationModalVariantConfig } from '../types';
 import type { DesignTokens } from '../../../theme';
 
 /**

package/src/molecules/index.ts

@@ -8,62 +8,31 @@ export * from './avatar';
 export * from './bottom-sheet';
 export { FormField, type FormFieldProps } from './FormField';
 export { ListItem, type ListItemProps } from './ListItem';
-
-
 export { SearchBar, type SearchBarProps } from './SearchBar';
 export { IconContainer } from './IconContainer';
 export { BaseModal, type BaseModalProps } from './BaseModal';
 export { ConfirmationModal } from './ConfirmationModalMain';
 export { useConfirmationModal } from './confirmation-modal/useConfirmationModal';
 
-// Type exports
-export type {
-  ConfirmationModalProps,
-  ConfirmationModalVariant,
-} from './confirmation-modal/types/';
-
-// Divider
-export * from './Divider';
-export * from "./StepProgress";
-
-// Responsive Components
-export { List, type ListProps } from './List';
-
-// Alerts
+// Other components
+export * from './Divider/Divider';
+export * from './Divider/types';
+export * from './StepProgress';
+export * from './List';
 export * from './alerts';
-
-// Calendar
 export * from './calendar';
-
-// Swipe Actions
 export * from './swipe-actions';
-
-// Navigation
 export * from './navigation';
-
-// Long Press Menu
 export * from './long-press-menu';
-
-// Step Header
 export * from './StepHeader';
-
-// Emoji
 export * from './emoji';
-
-// Countdown
 export * from './countdown';
-
-// Splash
 export * from './splash';
-
-
 export * from './filter-group';
-export * from './action-footer';
-
-export * from './hero-section';
+export * from './action-footer/ActionFooter';
+export * from './action-footer/types';
+export * from './hero-section/HeroSection';
+export * from './hero-section/types';
 export * from './info-grid';
-
-
 export * from './circular-menu';
-
 export * from './icon-grid';

package/src/molecules/navigation/hooks/useAppNavigation.ts

@@ -31,6 +31,7 @@ export function useAppNavigation(): AppNavigationResult {
 
   const navigate = useCallback(
     (screen: string, params?: Record<string, unknown>) => {
+      // Dynamic navigation: bypass ParamListBase constraint to allow arbitrary screen names
       (navigation as any).navigate(screen, params);
     },
     [navigation]

package/src/offline/infrastructure/utils/healthCheck.ts

@@ -11,6 +11,7 @@ const DEFAULT_TIMEOUT = 5000;
 export class HealthCheck {
   private intervalId: ReturnType<typeof setInterval> | null = null;
   private isChecking = false;
+  private pendingCheck: Promise<boolean> | null = null;
   private config: Required<OfflineConfig>;
 
   constructor(config: OfflineConfig = {}) {
@@ -27,37 +28,47 @@ export class HealthCheck {
    * Perform a single health check
    */
   async check(): Promise<boolean> {
-    if (this.isChecking) {
-      return false;
+    // Return existing promise if check is in progress
+    if (this.pendingCheck) {
+      return this.pendingCheck;
     }
 
-    this.isChecking = true;
+    this.pendingCheck = (async () => {
+      if (this.isChecking) {
+        return false;
+      }
 
-    try {
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), this.config.healthCheckTimeout);
+      this.isChecking = true;
 
-      const response = await fetch(this.config.healthCheckUrl, {
-        method: 'HEAD',
-        signal: controller.signal,
-      });
+      try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), this.config.healthCheckTimeout);
 
-      clearTimeout(timeoutId);
+        const response = await fetch(this.config.healthCheckUrl, {
+          method: 'HEAD',
+          signal: controller.signal,
+        });
 
-      const isHealthy = response.ok;
+        clearTimeout(timeoutId);
 
-      if (this.config.debug) {
-      }
+        const isHealthy = response.ok;
 
-      return isHealthy;
-    } catch (_error) {
-      if (this.config.debug) {
+        if (this.config.debug) {
+        }
+
+        return isHealthy;
+      } catch (_error) {
+        if (this.config.debug) {
+        }
+
+        return false;
+      } finally {
+        this.isChecking = false;
+        this.pendingCheck = null;
       }
+    })();
 
-      return false;
-    } finally {
-      this.isChecking = false;
-    }
+    return this.pendingCheck;
   }
 
   /**
@@ -101,5 +112,6 @@ export class HealthCheck {
    */
   destroy(): void {
     this.stop();
+    this.pendingCheck = null;
   }
 }

package/src/offline/presentation/hooks/useOffline.ts

@@ -76,7 +76,7 @@ export const useOffline = (config?: OfflineConfig) => {
 
     networkEvents.emit('change', networkState);
     previousStateRef.current = networkState;
-  }, [store, previousStateRef]);
+  }, [store]);
 
   useEffect(() => {
     if (isInitialized.current) return;

package/src/storage/presentation/hooks/__tests__/useStorageState.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * useStorageState Hook Tests
  *
@@ -107,7 +106,7 @@ describe('useStorageState Hook', () => {
       const newValue = 'new-value';
 
       // Mock slow storage
-      let resolveStorage: (value: string) => void;
+      let _resolveStorage: (value: string) => void;
       (AsyncStorage.getItem as jest.Mock).mockImplementation(() => 
         new Promise(resolve => {
           resolveStorage = resolve;
@@ -133,7 +132,7 @@ describe('useStorageState Hook', () => {
       const defaultValue = 'default';
 
       // Mock slow storage
-      let resolveStorage: (value: string) => void;
+      let _resolveStorage: (value: string) => void;
       (AsyncStorage.getItem as jest.Mock).mockImplementation(() => 
         new Promise(resolve => {
           resolveStorage = resolve;
@@ -198,7 +197,7 @@ describe('useStorageState Hook', () => {
 
       await AsyncStorage.setItem(key, JSON.stringify('stored-value'));
 
-      const { result, rerender, waitForNextUpdate } = renderHook(
+      const { result: _result, rerender, waitForNextUpdate } = renderHook(
         ({ defaultValue }) => useStorageState(key, defaultValue),
         { initialProps: { defaultValue: defaultValue1 } }
       );

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

@@ -52,7 +52,7 @@ export const useStorageState = <T>(
     return () => {
       isMountedRef.current = false;
     };
-  }, [keyString]);
+  }, [keyString, defaultValue]);
 
   // Update state and persist to storage
   const updateState = useCallback(

package/src/theme/infrastructure/stores/themeStore.ts

@@ -22,6 +22,7 @@ interface ThemeState {
   isInitialized: boolean;
   _updateInProgress: boolean;
   _initInProgress: boolean;
+  _lastUpdateId?: number;
 }
 
 interface ThemeActions {
@@ -46,6 +47,7 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
     isInitialized: false,
     _updateInProgress: false,
     _initInProgress: false,
+    _lastUpdateId: undefined,
   },
   persist: false,
   actions: (set, get) => ({
@@ -88,30 +90,44 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
     setThemeMode: async (mode: ThemeMode) => {
       const { _updateInProgress } = get();
       if (_updateInProgress) return;
-      set({ _updateInProgress: true });
+
+      const updateId = Date.now();
+      set({ _updateInProgress: true, _lastUpdateId: updateId });
 
       try {
         const theme = mode === 'light' ? lightTheme : darkTheme;
         set({ themeMode: mode, theme, isDark: mode === 'dark' });
         await ThemeStorage.setThemeMode(mode);
         useDesignSystemTheme.getState().setThemeMode(mode);
-      } catch {
-        // Silent failure
+      } catch (error) {
+        // Revert state on error
+        set({ _lastUpdateId: undefined });
+        if (__DEV__) {
+          console.error('[ThemeStore] Failed to set theme mode:', error);
+        }
+        throw error;
       } finally {
         set({ _updateInProgress: false });
       }
     },
 
     setCustomColors: async (colors?: CustomThemeColors) => {
-      const { _updateInProgress } = get();
+      const { _updateInProgress, customColors: currentColors } = get();
       if (_updateInProgress) return;
-      set({ _updateInProgress: true, customColors: colors });
+
+      const updateId = Date.now();
+      set({ _updateInProgress: true, _lastUpdateId: updateId, customColors: colors });
 
       try {
         await ThemeStorage.setCustomColors(colors);
         useDesignSystemTheme.getState().setCustomColors(colors);
-      } catch {
-        // Silent failure
+      } catch (error) {
+        // Revert to previous colors on error
+        set({ customColors: currentColors, _lastUpdateId: undefined });
+        if (__DEV__) {
+          console.error('[ThemeStore] Failed to set custom colors:', error);
+        }
+        throw error;
       } finally {
         set({ _updateInProgress: false });
       }

package/src/timezone/infrastructure/utils/SimpleCache.ts

@@ -15,6 +15,7 @@ export class SimpleCache<T> {
   private defaultTTL: number;
   private cleanupTimeout: ReturnType<typeof setTimeout> | null = null;
   private destroyed = false;
+  private cleanupScheduleLock = false;
 
   constructor(defaultTTL: number = 60000) {
     this.defaultTTL = defaultTTL;
@@ -26,6 +27,7 @@ export class SimpleCache<T> {
    */
   destroy(): void {
     this.destroyed = true;
+    this.cleanupScheduleLock = false;
     if (this.cleanupTimeout) {
       clearTimeout(this.cleanupTimeout);
       this.cleanupTimeout = null;
@@ -76,16 +78,26 @@ export class SimpleCache<T> {
   }
 
   private scheduleCleanup(): void {
-    if (this.destroyed) return;
+    if (this.destroyed || this.cleanupScheduleLock) return;
 
-    if (this.cleanupTimeout) {
-      clearTimeout(this.cleanupTimeout);
-    }
+    this.cleanupScheduleLock = true;
 
-    this.cleanup();
+    try {
+      if (this.cleanupTimeout) {
+        clearTimeout(this.cleanupTimeout);
+      }
+
+      this.cleanup();
 
-    this.cleanupTimeout = setTimeout(() => {
-      this.scheduleCleanup();
-    }, 60000);
+      if (!this.destroyed) {
+        this.cleanupTimeout = setTimeout(() => {
+          this.cleanupScheduleLock = false;
+          this.scheduleCleanup();
+        }, 60000);
+      }
+    } catch (error) {
+      this.cleanupScheduleLock = false;
+      throw error;
+    }
   }
 }

package/src/layouts/AppHeader/index.ts

@@ -1 +0,0 @@
-export * from './AppHeader';

package/src/layouts/ScreenHeader/index.ts

@@ -1 +0,0 @@
-export * from './ScreenHeader';

package/src/molecules/Divider/index.ts

@@ -1,2 +0,0 @@
-export * from './Divider';
-export * from './types';

package/src/molecules/action-footer/index.ts

@@ -1,3 +0,0 @@
-
-export * from './ActionFooter';
-export * from './types';

package/src/molecules/hero-section/index.ts

@@ -1,3 +0,0 @@
-
-export * from './HeroSection';
-export * from './types';