@umituz/react-native-design-system 4.27.15 → 4.27.17

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

@@ -4,7 +4,7 @@
  * Uses expo-image when available, falls back to React Native Image.
  */
 
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View, Image as RNImage, StyleSheet, type ImageURISource, type ImageStyle } from "react-native";
 import { useSafeAreaInsets } from "../../../safe-area/hooks/useSafeAreaInsets";
 import {
@@ -59,7 +59,7 @@ const LAYOUT_GENERATORS: Record<CollageLayout, LayoutGenerator> = {
   honeycomb: generateHoneycombLayout,
 };
 
-export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
+export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = React.memo(({
   images,
   layout = "grid",
   columns,
@@ -75,30 +75,39 @@ export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
     return generator(images, { columns, gap, borderRadius, safeAreaInsets: insets });
   }, [images, layout, columns, gap, borderRadius, insets]);
 
+  // Stable key extractor - must be before early return
+  const keyExtractor = useCallback((item: ImageLayoutItem) => {
+    return typeof item.source === 'string' ? item.source : String(item.source);
+  }, []);
+
   if (imageLayouts.length === 0) return null;
 
+  // Memoized image component to prevent unnecessary re-renders
+  const CollageImage = React.memo<{ item: ImageLayoutItem }>(({ item }) => {
+    if (ExpoImage) {
+      return (
+        <ExpoImage
+          source={item.source}
+          style={item.style}
+          contentFit="cover"
+        />
+      );
+    }
+    return (
+      <RNImage
+        source={item.source as ImageURISource | number}
+        style={item.style as ImageStyle}
+        resizeMode="cover"
+      />
+    );
+  });
+  CollageImage.displayName = 'CollageImage';
+
   return (
     <View style={[StyleSheet.absoluteFill, { opacity }]} pointerEvents="none">
-      {imageLayouts.map((item) => {
-        if (ExpoImage) {
-          return (
-            <ExpoImage
-              key={String(item.source)}
-              source={item.source}
-              style={item.style}
-              contentFit="cover"
-            />
-          );
-        }
-        return (
-          <RNImage
-            key={String(item.source)}
-            source={item.source as ImageURISource | number}
-            style={item.style as ImageStyle}
-            resizeMode="cover"
-          />
-        );
-      })}
+      {imageLayouts.map((item) => (
+        <CollageImage key={keyExtractor(item)} item={item} />
+      ))}
     </View>
   );
-};
+});

package/src/storage/README.md

@@ -118,7 +118,6 @@ Clean Architecture with DDD principles:
 - MUST export from index.ts at root level
 - MUST organize exports by module
 - MUST provide TypeScript types
-- MUST maintain backward compatibility
 - MUST not export internal utilities
 
 ### File Organization

package/src/storage/cache/domain/types/README.md

@@ -103,5 +103,4 @@ TypeScript type definitions for cache entries, configuration, statistics, and ev
 ### Export Rules
 - MUST export all public types
 - MUST use `type` keyword for type-only exports
-- MUST maintain backward compatibility
 - MUST document type changes

package/src/storage/cache/presentation/README.md

@@ -120,4 +120,3 @@ Presentation layer provides React hooks and components for integrating cache fun
 - MUST export hooks from index file
 - MUST provide consistent naming
 - MUST document hook contracts
-- MUST maintain backward compatibility

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

@@ -2,7 +2,7 @@
  * useCachedValue Hook
  */
 
-import { useCallback, useRef, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { cacheManager } from '../domain/CacheManager';
 import type { CacheConfig } from '../domain/types/Cache';
 import { useAsyncOperation } from '../../../utils/hooks';
@@ -16,6 +16,15 @@ export function useCachedValue<T>(
   const fetcherRef = useRef(fetcher);
   const configRef = useRef(config);
 
+  // Update refs when props change
+  useEffect(() => {
+    fetcherRef.current = fetcher;
+  }, [fetcher]);
+
+  useEffect(() => {
+    configRef.current = config;
+  }, [config]);
+
   const { data: value, isLoading, error, execute, setData } = useAsyncOperation<T | undefined, Error>(
     async () => {
       const cache = cacheManager.getCache<T>(cacheName, configRef.current);
@@ -55,8 +64,9 @@ export function useCachedValue<T>(
   }, [cacheName, setData]);
 
   const refetch = useCallback(() => {
+    // Clear data first, then execute on next tick
     setData(undefined);
-    execute();
+    Promise.resolve().then(() => execute());
   }, [execute, setData]);
 
   return useMemo(() => ({

package/src/storage/domain/constants/README.md

@@ -84,7 +84,6 @@ Constant values for time-based calculations and default configuration. Located a
 - MUST increment CACHE_VERSION on schema changes
 - MUST implement migration for old versions
 - MUST document breaking changes
-- MUST support backward compatibility where possible
 
 ### Export Rules
 - MUST export all constants

package/src/storage/infrastructure/adapters/README.md

@@ -137,7 +137,6 @@ Storage adapter implementations for Zustand persist middleware. Located at `src/
 - MUST migrate data on read
 - MUST clean up old data after migration
 - MUST handle migration failures
-- MUST be backward compatible
 
 ### Error Handling
 - MUST catch all exceptions in adapter methods

package/src/storage/presentation/hooks/README.md

@@ -120,9 +120,3 @@ This directory contains React hooks that integrate storage and cache functionali
 - MUST use `useMemo` for computed values
 - MUST implement proper dependency arrays
 - MUST avoid unnecessary re-renders
-
-### Deprecation
-- MUST document deprecated hooks
-- MUST provide migration path for deprecated hooks
-- MUST maintain backward compatibility when possible
-- MUST remove deprecated hooks after major version bump

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

@@ -28,20 +28,29 @@ export const useStorageState = <T>(
   const [state, setState] = useState<T>(defaultValue);
   const [isLoading, setIsLoading] = useState(true);
   const isMountedRef = useRef(true);
+  const defaultValueRef = useRef(defaultValue);
+
+  // Update ref when defaultValue changes
+  useEffect(() => {
+    defaultValueRef.current = defaultValue;
+  }, [defaultValue]);
 
   useEffect(() => {
     isMountedRef.current = true;
     setIsLoading(true);
 
     storageRepository
-      .getItem<T>(keyString, defaultValue)
+      .getItem<T>(keyString, defaultValueRef.current)
       .then((result) => {
         if (isMountedRef.current) {
-          setState(unwrap(result, defaultValue));
+          setState(unwrap(result, defaultValueRef.current));
         }
       })
-      .catch(() => {
+      .catch((error) => {
         // Keep defaultValue on error
+        if (__DEV__) {
+          console.warn('[useStorageState] Failed to load from storage:', error);
+        }
       })
       .finally(() => {
         if (isMountedRef.current) {
@@ -52,7 +61,7 @@ export const useStorageState = <T>(
     return () => {
       isMountedRef.current = false;
     };
-  }, [keyString, defaultValue]);
+  }, [keyString]);
 
   // Update state and persist to storage
   const updateState = useCallback(

package/src/tanstack/domain/repositories/BaseRepository.ts

@@ -79,7 +79,7 @@ export abstract class BaseRepository<
     this.resource = resource;
     this.options = mergeRepositoryOptions(options);
     this.keys = createQueryKeyFactory(this.resource);
-    this.log = createRepositoryLogger(resource, this.options.debug ?? __DEV__);
+    this.log = createRepositoryLogger(resource, __DEV__);
   }
 
   /**

package/src/theme/hooks/useAppDesignTokens.ts

@@ -1,8 +1,28 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { useTheme } from '../infrastructure/stores/themeStore';
 import { createDesignTokens } from '../core/TokenFactory';
 import { useResponsive } from '../../responsive/useResponsive';
 import { type DesignTokens } from '../types/ThemeTypes';
+import type { CustomThemeColors } from '../core/CustomColors';
+
+/**
+ * Shallow equality check for CustomThemeColors
+ */
+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;
+}
 
 /**
  * Hook to access current design tokens (colors, spacing, typography, etc.)
@@ -13,8 +33,14 @@ export const useAppDesignTokens = (): DesignTokens => {
     const { themeMode, customColors } = useTheme();
     const { spacingMultiplier, getFontSize } = useResponsive();
 
+    // Stabilize customColors reference to prevent unnecessary re-computation
+    const customColorsRef = useRef(customColors);
+    if (!areCustomColorsEqual(customColorsRef.current, customColors)) {
+        customColorsRef.current = customColors;
+    }
+
     return useMemo(
-        () => createDesignTokens(themeMode, customColors, spacingMultiplier, getFontSize),
-        [themeMode, customColors, spacingMultiplier, getFontSize]
+        () => createDesignTokens(themeMode, customColorsRef.current, spacingMultiplier, getFontSize),
+        [themeMode, spacingMultiplier, getFontSize]
     );
 };

package/src/timezone/infrastructure/services/TimezoneProvider.ts

@@ -1,12 +1,12 @@
 import { TimezoneInfo } from '../../domain/entities/Timezone';
-import { SimpleCache } from '../utils/SimpleCache';
+import { UnifiedCache } from '../../../core/cache/domain/UnifiedCache';
 
 /**
  * TimezoneProvider
  * Responsible for discovering device timezone and providing available timezones
  */
 export class TimezoneProvider {
-    private cache = new SimpleCache<TimezoneInfo[]>(300000); // 5 min cache
+    private cache = new UnifiedCache<TimezoneInfo[]>({ defaultTTL: 300000 }); // 5 min cache
     /**
      * Get current device timezone using Intl API
      */

package/src/init/index.ts

@@ -1,29 +0,0 @@
-/**
- * App Initialization Module
- *
- * Provides utilities for app initialization:
- * - createAppInitializer: Factory for creating app initializers
- * - useAppInitialization: Hook for managing initialization state
- * - createEnvConfig: Environment configuration factory
- */
-
-// App Initializer
-export {
-  createAppInitializer,
-  createInitModule,
-} from "./createAppInitializer";
-
-// Initialization Hook
-export { useAppInitialization } from "./useAppInitialization";
-
-// Environment Configuration
-export * from "./env";
-
-// Types
-export type {
-  InitModule,
-  AppInitializerConfig,
-  AppInitializerResult,
-  UseAppInitializationOptions,
-  UseAppInitializationReturn,
-} from "./types";

package/src/layouts/ScreenLayout/index.ts

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

package/src/layouts/index.ts

@@ -1,5 +0,0 @@
-export * from './Container';
-export * from './FormLayout';
-export * from './Grid';
-export * from './ScreenLayout';
-export * from './ScreenHeader/ScreenHeader';

package/src/molecules/SearchBar/index.ts

@@ -1,4 +0,0 @@
-export * from './SearchBar';
-export * from './SearchHistory';
-export * from './SearchSuggestions';
-export * from './types';

package/src/molecules/StepProgress/index.ts

@@ -1 +0,0 @@
-export * from "./StepProgress";

package/src/molecules/alerts/index.ts

@@ -1,47 +0,0 @@
-/**
- * Alerts Molecule - Public API
- */
-
-export * from './AlertTypes';
-export { useAlertStore } from './AlertStore';
-export { AlertService } from './AlertService';
-export { AlertBanner } from './AlertBanner';
-export { AlertToast } from './AlertToast';
-export { AlertInline } from './AlertInline';
-export { AlertModal } from './AlertModal';
-export { AlertContainer } from './AlertContainer';
-export { AlertProvider } from './AlertProvider';
-export { useAlert } from './useAlert';
-
-import { AlertService } from './AlertService';
-import { useAlertStore } from './AlertStore';
-import { AlertOptions } from './AlertTypes';
-
-/**
- * Convenience alert service for use outside of components
- */
-export const alertService = {
-    error: (title: string, message?: string, options?: AlertOptions) => {
-        const alert = AlertService.createErrorAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
-    },
-    success: (title: string, message?: string, options?: AlertOptions) => {
-        const alert = AlertService.createSuccessAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
-    },
-    warning: (title: string, message?: string, options?: AlertOptions) => {
-        const alert = AlertService.createWarningAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
-    },
-    info: (title: string, message?: string, options?: AlertOptions) => {
-        const alert = AlertService.createInfoAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
-    },
-    dismiss: (id: string) => {
-        useAlertStore.getState().dismissAlert(id);
-    },
-};

package/src/molecules/bottom-sheet/index.ts

@@ -1,10 +0,0 @@
-export * from './components/BottomSheet';
-export * from './components/BottomSheetModal';
-
-export * from './components/filter/FilterBottomSheet';
-export * from './components/filter/FilterSheet';
-export * from './hooks/useBottomSheet';
-export * from './hooks/useBottomSheetModal';
-export * from './hooks/useListFilters';
-export * from './types/BottomSheet';
-export * from './types/Filter';

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

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

package/src/molecules/filter-group/index.ts

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

package/src/molecules/index.ts

@@ -1,38 +0,0 @@
-/**
- * Molecules - Composite UI components
- * Built from atoms following atomic design principles
- */
-
-// Component exports
-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';
-
-// Other components
-export * from './Divider/Divider';
-export * from './Divider/types';
-export * from './StepProgress';
-export * from './List';
-export * from './alerts';
-export * from './calendar';
-export * from './swipe-actions';
-export * from './navigation';
-export * from './long-press-menu';
-export * from './StepHeader';
-export * from './emoji';
-export * from './countdown';
-export * from './splash';
-export * from './filter-group';
-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/info-grid/index.ts

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

package/src/molecules/swipe-actions/index.ts

@@ -1,6 +0,0 @@
-/**
- * Swipe Actions Domain - Barrel Export
- */
-
-export * from './domain/entities/SwipeAction';
-export * from './presentation/components/SwipeActionButton';

package/src/presentation/utils/variants/index.ts

@@ -1,6 +0,0 @@
-/**
- * Variant utilities for style management
- */
-
-export * from './core';
-export * from './helpers';

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

@@ -1,64 +0,0 @@
-/**
- * SimpleCache (Backward Compatibility Wrapper)
- *
- * @deprecated Use UnifiedCache from core/cache instead.
- * This wrapper maintains backward compatibility while migrating to UnifiedCache.
- *
- * Lightweight in-memory cache for performance optimization.
- * Now implemented using UnifiedCache with timeout-based cleanup strategy.
- */
-
-import { UnifiedCache } from '../../../core/cache/domain/UnifiedCache';
-import { TimeoutCleanupStrategy } from '../../../core/cache/domain/CleanupStrategy';
-import { ONE_MINUTE_MS } from '../../../utils/constants/TimeConstants';
-
-/**
- * SimpleCache - Wrapper around UnifiedCache for backward compatibility
- *
- * @example
- * ```ts
- * // Old usage (still works):
- * const cache = new SimpleCache<string>(60000);
- *
- * // New usage (recommended):
- * import { CacheFactory } from '../../../core/cache';
- * const cache = CacheFactory.createTimeoutCache(60000);
- * ```
- */
-export class SimpleCache<T> {
-  private cache: UnifiedCache<T>;
-
-  constructor(defaultTTL: number = ONE_MINUTE_MS) {
-    this.cache = new UnifiedCache<T>({
-      defaultTTL,
-      cleanupStrategy: new TimeoutCleanupStrategy(ONE_MINUTE_MS),
-    });
-  }
-
-  /**
-   * Destroy the cache and stop cleanup timer
-   */
-  destroy(): void {
-    this.cache.destroy();
-  }
-
-  set(key: string, value: T, ttl?: number): void {
-    this.cache.set(key, value, ttl);
-  }
-
-  get(key: string): T | undefined {
-    return this.cache.get(key);
-  }
-
-  has(key: string): boolean {
-    return this.cache.has(key);
-  }
-
-  clear(): void {
-    this.cache.clear();
-  }
-
-  delete(key: string): void {
-    this.cache.delete(key);
-  }
-}

package/src/utilities/index.ts

@@ -1,6 +0,0 @@
-/**
- * Utilities - Public API
- */
-
-export * from './clipboard';
-export * from './sharing';