@umituz/react-native-design-system 4.27.0 → 4.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.27.0",
+  "version": "4.27.1",
   "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 - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/device/detection/deviceDetection.ts

@@ -46,7 +46,9 @@ export const isTablet = (): boolean => {
     return Device.deviceType === Device.DeviceType.TABLET;
   }
   // Fallback: Platform.isPad (iOS) or screen width >= 600dp (Android)
-  if (Platform.OS === 'ios' && (Platform as any).isPad) return true;
+  // Platform.isPad is not in React Native types but exists on iOS
+  const platformWithIsPad = Platform as { isPad?: boolean };
+  if (Platform.OS === 'ios' && platformWithIsPad.isPad) return true;
   const { width, height } = getScreenDimensions();
   return Math.min(width, height) >= 600;
 };

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

@@ -46,7 +46,6 @@ export const useAnonymousUser = (
 ): UseAnonymousUserResult => {
   const {
     anonymousDisplayName = 'Anonymous',
-    fallbackUserId = 'anonymous_fallback',
   } = options || {};
 
   const { data: anonymousUser, isLoading, error, execute } = useAsyncOperation<AnonymousUser, string>(
@@ -56,9 +55,14 @@ export const useAnonymousUser = (
         DeviceService.getUserFriendlyId(),
       ]);
 
+      // No fallback - if we can't get ID, let it error
+      if (!userId) {
+        throw new Error('Failed to generate device ID');
+      }
+
       return {
-        userId: userId || fallbackUserId,
-        deviceName: deviceName || 'Unknown Device',
+        userId,
+        deviceName: deviceName ?? 'Device',
         displayName: anonymousDisplayName,
         isAnonymous: true,
       };
@@ -66,16 +70,7 @@ export const useAnonymousUser = (
     {
       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,
-        };
-      },
+      errorHandler: (err) => `Failed to generate device ID: ${err instanceof Error ? err.message : String(err)}`,
     }
   );
 

package/src/molecules/calendar/infrastructure/storage/CalendarStore.ts

@@ -27,7 +27,13 @@ export const useCalendar = () => {
   const view = useCalendarView();
 
   // Utility functions - memoized to prevent recreating on every render
-  const getEventsForDate = useCallback((date: Date) => {
+  const getEventsForDate = useCallback((date: Date | null | undefined) => {
+    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+      if (__DEV__) {
+        console.warn('[CalendarStore] getEventsForDate called with invalid date:', date);
+      }
+      return [];
+    }
     return events.events.filter(event => {
       const eventDate = new Date(event.date);
       return eventDate.toDateString() === date.toDateString();
@@ -35,6 +41,13 @@ export const useCalendar = () => {
   }, [events.events]);
 
   const getEventsForMonth = useCallback((year: number, month: number) => {
+    if (typeof year !== 'number' || typeof month !== 'number' ||
+        isNaN(year) || isNaN(month) || month < 0 || month > 11) {
+      if (__DEV__) {
+        console.warn('[CalendarStore] getEventsForMonth called with invalid year/month:', { year, month });
+      }
+      return [];
+    }
     return events.events.filter(event => {
       const eventDate = new Date(event.date);
       return eventDate.getFullYear() === year && eventDate.getMonth() === month;

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

@@ -1,4 +1,4 @@
-import { useNavigation, StackActions } from "@react-navigation/native";
+import { useNavigation, StackActions, CommonActions } from "@react-navigation/native";
 import type { NavigationProp, ParamListBase } from "@react-navigation/native";
 import { useCallback, useMemo } from "react";
 
@@ -31,8 +31,13 @@ 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);
+      // Dynamic navigation: use CommonActions for type-safe arbitrary screen navigation
+      navigation.dispatch(
+        CommonActions.navigate({
+          name: screen,
+          params,
+        })
+      );
     },
     [navigation]
   );

package/src/molecules/navigation/index.ts

@@ -46,7 +46,7 @@ export type { NavigationCleanup } from "./utils/NavigationCleanup";
 export { AppNavigation } from "./utils/AppNavigation";
 
 export { TabLabel, type TabLabelProps } from "./components/TabLabel";
-export * from "./components/NavigationHeader";
+export { NavigationHeader, type NavigationHeaderProps } from "./components/NavigationHeader";
 export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
 export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
 

package/src/onboarding/presentation/components/BackgroundImageCollage.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useMemo } from "react";
-import { View, Image as RNImage, StyleSheet } from "react-native";
+import { View, Image as RNImage, StyleSheet, type ImageURISource, type ImageStyle } from "react-native";
 import { useSafeAreaInsets } from "../../../safe-area/hooks/useSafeAreaInsets";
 import {
   generateGridLayout,
@@ -93,8 +93,8 @@ export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
         return (
           <RNImage
             key={String(item.source)}
-            source={item.source as any}
-            style={item.style as any}
+            source={item.source as ImageURISource | number}
+            style={item.style as ImageStyle}
             resizeMode="cover"
           />
         );

package/src/onboarding/presentation/components/OnboardingFooter.tsx

@@ -52,7 +52,7 @@ export const OnboardingFooter = React.memo<OnboardingFooterProps>(({
   const progressFillStyle = useMemo(
     () => ({
       ...styles.progressFill,
-      width: `${progressPercent}%` as any,
+      width: `${progressPercent}%` as `${number}%`,
       backgroundColor: colors.progressFillColor,
     }),
     [progressPercent, colors.progressFillColor]

package/src/storage/cache/domain/CacheManager.ts

@@ -20,10 +20,12 @@ export class CacheManager {
   }
 
   getCache<T>(name: string, config?: CacheConfig): Cache<T> {
-    if (!this.caches.has(name)) {
-      this.caches.set(name, new Cache<T>(config));
+    let cache = this.caches.get(name);
+    if (!cache) {
+      cache = new Cache<T>(config);
+      this.caches.set(name, cache);
     }
-    return this.caches.get(name)!;
+    return cache;
   }
 
   deleteCache(name: string): boolean {

package/src/storage/cache/presentation/useCachedValue.ts

@@ -25,7 +25,12 @@ export function useCachedValue<T>(
         return cached;
       }
 
-      const data = await fetcherRef.current!();
+      const fetcherFn = fetcherRef.current;
+      if (!fetcherFn) {
+        throw new Error('Fetcher function is not defined');
+      }
+
+      const data = await fetcherFn();
       cache.set(key, data, configRef.current?.ttl);
       return data;
     },

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

@@ -142,10 +142,25 @@ export function usePersistentCache<T>(
 
   const setData = useCallback(
     async (value: T) => {
-      await cacheOps.saveToStorage(key, value, { ttl, version, enabled });
+      // Optimistic update
+      const previousData = state.data;
       stableActionsRef.current.setData(value);
+
+      try {
+        await cacheOps.saveToStorage(key, value, { ttl, version, enabled });
+      } catch (error) {
+        // Rollback on error
+        if (previousData !== null) {
+          stableActionsRef.current.setData(previousData);
+        } else {
+          stableActionsRef.current.clearData();
+        }
+        if (__DEV__) {
+          console.warn('[usePersistentCache] Failed to save to storage, rolling back:', error);
+        }
+      }
     },
-    [key, ttl, version, enabled, cacheOps],
+    [key, ttl, version, enabled, cacheOps, state.data],
   );
 
   const clearData = useCallback(async () => {

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

@@ -57,10 +57,21 @@ export const useStorageState = <T>(
   // Update state and persist to storage
   const updateState = useCallback(
     async (value: T) => {
+      // Optimistic update
+      const previousValue = state;
       setState(value);
-      await storageRepository.setItem(keyString, value);
+
+      try {
+        await storageRepository.setItem(keyString, value);
+      } catch (error) {
+        // Rollback on error
+        setState(previousValue);
+        if (__DEV__) {
+          console.warn('[useStorageState] Failed to persist state, rolling back:', error);
+        }
+      }
     },
-    [keyString]
+    [keyString, state]
   );
 
   return [state, updateState, isLoading];

package/src/tanstack/infrastructure/monitoring/DevMonitor.ts

@@ -188,8 +188,6 @@ class DevMonitorClass {
   reset(): void {
     if (!this.isEnabled) return;
     this.detach();
-    this.stopStatsLogging();
-    this.clear();
     if (this.options.enableLogging) {
       DevMonitorLogger.logReset();
     }

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -9,6 +9,7 @@ import type { CustomThemeColors } from '../../core/CustomColors';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
 import { useIconStore } from '../../../atoms/icon/iconStore';
 import type { IconRenderer, IconNames } from '../../../atoms/icon/iconStore';
+import { FIVE_SECONDS_MS } from '../../../utils/constants/TimeConstants';
 
 // Lazy load SplashScreen to avoid circular dependency
 const SplashScreen = lazy(() => import('../../../molecules/splash').then(m => ({ default: m.SplashScreen })));
@@ -82,7 +83,7 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
         if (!prev) onError?.(new Error('DesignSystemProvider initialization timed out'));
         return true;
       });
-    }, 5000);
+    }, FIVE_SECONDS_MS);
 
     initialize()
       .then(() => {

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

@@ -12,6 +12,26 @@ import { useDesignSystemTheme } from '../globalThemeStore';
 import type { ThemeMode } from '../../core/ColorPalette';
 import type { CustomThemeColors } from '../../core/CustomColors';
 
+/**
+ * Shallow equality check for CustomThemeColors
+ * Compares all defined properties without deep object traversal
+ */
+function areCustomColorsEqual(a?: CustomThemeColors, b?: CustomThemeColors): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+
+  const keysA = Object.keys(a) as (keyof CustomThemeColors)[];
+  const keysB = Object.keys(b) as (keyof CustomThemeColors)[];
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false;
+  }
+
+  return true;
+}
+
 interface ThemeState {
   theme: Theme;
   themeMode: ThemeMode;
@@ -118,8 +138,8 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
       const { _updateInProgress, customColors: currentColors } = get();
       if (_updateInProgress) return;
 
-      // Deep comparison to avoid redundant updates from new object references
-      if (JSON.stringify(colors) === JSON.stringify(currentColors)) return;
+      // Shallow comparison to avoid redundant updates from new object references
+      if (areCustomColorsEqual(colors, currentColors)) return;
 
       const updateId = Date.now();
       set({ _updateInProgress: true, _lastUpdateId: updateId, customColors: colors });

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

@@ -5,6 +5,8 @@
  * No external dependencies - pure TypeScript implementation
  */
 
+import { ONE_MINUTE_MS } from '../../../utils/constants/TimeConstants';
+
 interface CacheEntry<T> {
   value: T;
   expires: number;
@@ -17,7 +19,7 @@ export class SimpleCache<T> {
   private destroyed = false;
   private cleanupScheduleLock = false;
 
-  constructor(defaultTTL: number = 60000) {
+  constructor(defaultTTL: number = ONE_MINUTE_MS) {
     this.defaultTTL = defaultTTL;
     this.scheduleCleanup();
   }
@@ -91,9 +93,13 @@ export class SimpleCache<T> {
 
       if (!this.destroyed) {
         this.cleanupTimeout = setTimeout(() => {
-          this.cleanupScheduleLock = false;
-          this.scheduleCleanup();
-        }, 60000);
+          if (!this.destroyed) {
+            this.cleanupScheduleLock = false;
+            this.scheduleCleanup();
+          }
+        }, ONE_MINUTE_MS);
+      } else {
+        this.cleanupScheduleLock = false;
       }
     } catch (error) {
       this.cleanupScheduleLock = false;

package/src/typography/presentation/utils/textColorUtils.ts

@@ -53,7 +53,10 @@ export function getTextColor(
 
   const cacheKey = `${color}_${Object.keys(tokens.colors).length}_${tokens.colors.textPrimary}`;
 
-  if (colorCache.has(cacheKey)) return colorCache.get(cacheKey)!;
+  if (colorCache.has(cacheKey)) {
+    const cached = colorCache.get(cacheKey);
+    if (cached) return cached;
+  }
 
   const colorKey = COLOR_MAP[color as ColorVariant] ?? 'textPrimary';
   const resolvedColor = tokens.colors[colorKey];

package/src/typography/presentation/utils/textStyleUtils.ts

@@ -112,7 +112,8 @@ export function getTextStyle(
 
   // Check cache first
   if (typographyCache.has(cacheKey)) {
-    return typographyCache.get(cacheKey)!;
+    const cached = typographyCache.get(cacheKey);
+    if (cached) return cached;
   }
 
   // Resolve style and cache it

package/src/utils/async/retryWithBackoff.ts

@@ -5,6 +5,8 @@
  * Useful for network requests, file operations, etc.
  */
 
+import { DEFAULT_LONG_TIMEOUT_MS, DEFAULT_TIMEOUT_MS, ONE_MINUTE_MS, ONE_SECOND_MS, TEN_SECONDS_MS } from '../constants/TimeConstants';
+
 export interface RetryOptions {
   /**
    * Maximum number of retry attempts
@@ -59,14 +61,14 @@ export async function retryWithBackoff<T>(
 ): Promise<T> {
   const {
     maxRetries = 3,
-    baseDelay = 1000,
-    maxDelay = 10000,
+    baseDelay = ONE_SECOND_MS,
+    maxDelay = TEN_SECONDS_MS,
     backoffMultiplier = 2,
     shouldRetry = () => true,
     onRetry,
   } = options;
 
-  let lastError: Error;
+  let lastError: Error | undefined;
 
   for (let attempt = 0; attempt <= maxRetries; attempt++) {
     try {
@@ -106,7 +108,7 @@ export async function retryWithBackoff<T>(
   }
 
   // This should never be reached, but TypeScript needs it
-  throw lastError!;
+  throw lastError ?? new Error('Retry operation failed with unknown error');
 }
 
 /**
@@ -125,7 +127,7 @@ export async function retryWithTimeout<T>(
   fn: () => Promise<T>,
   options: RetryOptions & { timeout?: number } = {}
 ): Promise<T> {
-  const { timeout = 30000, ...retryOptions } = options;
+  const { timeout = DEFAULT_LONG_TIMEOUT_MS, ...retryOptions } = options;
 
   return retryWithBackoff(
     () => withTimeout(fn(), timeout),

package/src/utils/constants/TimeConstants.ts

@@ -0,0 +1,34 @@
+/**
+ * Time Constants
+ *
+ * Centralized time-related constants to replace magic numbers
+ */
+
+export const MILLISECONDS_PER_SECOND = 1000;
+export const MILLISECONDS_PER_MINUTE = 60 * 1000; // 60000
+export const MILLISECONDS_PER_HOUR = 60 * 60 * 1000; // 3600000
+export const MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000; // 86400000
+
+export const SECONDS_PER_MINUTE = 60;
+export const SECONDS_PER_HOUR = 60 * 60;
+export const SECONDS_PER_DAY = 24 * 60 * 60;
+
+export const MINUTES_PER_HOUR = 60;
+export const MINUTES_PER_DAY = 24 * 60;
+
+// Common time intervals
+export const ONE_SECOND_MS = MILLISECONDS_PER_SECOND;
+export const FIVE_SECONDS_MS = 5 * MILLISECONDS_PER_SECOND;
+export const TEN_SECONDS_MS = 10 * MILLISECONDS_PER_SECOND;
+export const THIRTY_SECONDS_MS = 30 * MILLISECONDS_PER_SECOND;
+export const ONE_MINUTE_MS = MILLISECONDS_PER_MINUTE;
+export const FIVE_MINUTES_MS = 5 * MILLISECONDS_PER_MINUTE;
+export const TEN_MINUTES_MS = 10 * MILLISECONDS_PER_MINUTE;
+export const THIRTY_MINUTES_MS = 30 * MILLISECONDS_PER_MINUTE;
+export const ONE_HOUR_MS = MILLISECONDS_PER_HOUR;
+export const ONE_DAY_MS = MILLISECONDS_PER_DAY;
+
+// Default timeouts
+export const DEFAULT_TIMEOUT_MS = FIVE_SECONDS_MS;
+export const DEFAULT_LONG_TIMEOUT_MS = THIRTY_SECONDS_MS;
+export const DEFAULT_CACHE_TTL_MS = ONE_MINUTE_MS;

package/src/utils/errors/DesignSystemError.ts

@@ -60,8 +60,9 @@ export class DesignSystemError extends Error {
     this.retryable = metadata?.retryable ?? false;
 
     // Maintains proper stack trace for where our error was thrown (only available on V8)
-    if (typeof (Error as any).captureStackTrace === 'function') {
-      (Error as any).captureStackTrace(this, DesignSystemError);
+    const ErrorConstructor = Error as { captureStackTrace?: (error: Error, constructor: typeof DesignSystemError) => void };
+    if (typeof ErrorConstructor.captureStackTrace === 'function') {
+      ErrorConstructor.captureStackTrace(this, DesignSystemError);
     }
   }
 

package/src/utils/logger.ts

@@ -100,8 +100,11 @@ class Logger {
    * Use for performance measurements
    */
   time(label: string): void {
-    if (this.isDev && (console as any).time) {
-      (console as any).time(label);
+    if (this.isDev) {
+      const consoleWithTime = console as { time?: (label: string) => void };
+      if (typeof consoleWithTime.time === 'function') {
+        consoleWithTime.time(label);
+      }
     }
   }
 
@@ -109,8 +112,11 @@ class Logger {
    * End time measurement - only in development
    */
   timeEnd(label: string): void {
-    if (this.isDev && (console as any).timeEnd) {
-      (console as any).timeEnd(label);
+    if (this.isDev) {
+      const consoleWithTimeEnd = console as { timeEnd?: (label: string) => void };
+      if (typeof consoleWithTimeEnd.timeEnd === 'function') {
+        consoleWithTimeEnd.timeEnd(label);
+      }
     }
   }