@umituz/react-native-design-system 4.28.7 → 4.28.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.28.7",
+  "version": "4.28.9",
   "description": "Universal design system for React Native apps with safe navigation hooks - updated SKILL.md with navigation documentation",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/atoms/GlassView/GlassView.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { StyleSheet, ViewStyle, StyleProp, View } from 'react-native';
-import { useDesignSystemTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { intensityToOpacity } from '../../utils/math';
+import { useMemo } from 'react';
 
 // Define a local type for tint to maintain API compatibility
 export type GlassTint = 'light' | 'dark' | 'default' | 'prominent' | 'regular' | 'extraLight' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterial' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialLight' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark' | 'systemUltraThinMaterialDark';
@@ -26,8 +27,8 @@ export const GlassView: React.FC<GlassViewProps> = ({
   intensity = 50,
   tint,
 }) => {
-  const { themeMode } = useDesignSystemTheme();
-  const isDark = themeMode === 'dark';
+  const themeMode = useTheme((state) => state.themeMode);
+  const isDark = useMemo(() => themeMode === 'dark', [themeMode]);
 
   // Calculate opacity using utility function
   const opacity = intensityToOpacity(intensity);

package/src/atoms/icon/iconStore.ts

@@ -71,7 +71,7 @@ interface IconStore {
   reset: () => void;
 }
 
-export const useIconStore = create<IconStore>((set) => ({
+export const useIconStore = create<IconStore>()((set) => ({
   iconNames: null,
   iconRenderer: null,
   isConfigured: false,

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

@@ -16,6 +16,7 @@ import type {
   ResetPeriod,
 } from '../../domain/entities/DeviceFeatureConfig';
 import { PersistentDeviceIdService } from './PersistentDeviceIdService';
+import { ErrorHandler } from '../../../utils/errors/ErrorHandler';
 
 export class DeviceFeatureService {
   private static config: DeviceFeatureConfig = { features: {} };
@@ -99,7 +100,8 @@ export class DeviceFeatureService {
         defaultUsage
       );
       return unwrap(result, defaultUsage);
-    } catch {
+    } catch (error) {
+      ErrorHandler.log(error);
       return defaultUsage;
     }
   }

package/src/molecules/Divider/index.ts

@@ -4,4 +4,4 @@
 
 export { Divider } from './Divider';
 export type { DividerConfig, DividerOrientation, DividerStyle, DividerSpacing } from './types';
-export { DividerUtils, SPACING_CONFIGS, DIVIDER_CONSTANTS } from './types';
+export { DividerUtils, DIVIDER_CONSTANTS } from './types';

package/src/molecules/Divider/types.ts

@@ -8,6 +8,8 @@
  * @layer domain/entities
  */
 
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+
 /**
  * Divider orientation
  */
@@ -57,17 +59,11 @@ const BASE_SPACING_CONFIGS: Record<DividerSpacing, number> = {
  */
 export const getSpacingConfigs = (spacingMultiplier: number): Record<DividerSpacing, number> => {
     return Object.entries(BASE_SPACING_CONFIGS).reduce((acc, [key, value]) => {
-        acc[key as DividerSpacing] = Math.floor(value * spacingMultiplier);
+        acc[key as DividerSpacing] = calculateResponsiveSize(value, spacingMultiplier);
         return acc;
     }, {} as Record<DividerSpacing, number>);
 };
 
-/**
- * @deprecated Use getSpacingConfigs(spacingMultiplier) instead
- * Kept for backward compatibility
- */
-export const SPACING_CONFIGS = BASE_SPACING_CONFIGS;
-
 /**
  * Divider utility class
  */
@@ -76,7 +72,7 @@ export class DividerUtils {
      * Get spacing value (responsive)
      */
     static getSpacing(spacing: DividerSpacing, spacingMultiplier: number = 1): number {
-        return Math.floor(BASE_SPACING_CONFIGS[spacing] * spacingMultiplier);
+        return calculateResponsiveSize(BASE_SPACING_CONFIGS[spacing], spacingMultiplier);
     }
 
     /**

package/src/molecules/SearchBar/SearchBar.tsx

@@ -9,7 +9,7 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon, useIconName } from '../../atoms';
 import { AtomicSpinner } from '../../atoms/AtomicSpinner';
 import type { SearchBarProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive'
 import { MISC_SIZES } from '../../constants';
 
 export const SearchBar: React.FC<SearchBarProps> = ({

package/src/molecules/StepHeader/StepHeader.tsx

@@ -12,8 +12,9 @@ import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
 import {
   calculateResponsiveSize,
   calculateLineHeight,
-} from "../../utils/responsiveUtils";
+} from '../responsive'
 import { SPACING, STEP_INDICATOR } from "../../constants";
+import { createMappedArray } from "../../utils";
 
 const DEFAULT_CONFIG: StepHeaderConfig = {
   showStepIndicator: false,
@@ -114,7 +115,7 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
         cfg.currentStep !== undefined &&
         cfg.totalSteps !== undefined && (
           <View style={styles.stepIndicator}>
-            {Array.from({ length: cfg.totalSteps }, (_, i) => (
+            {createMappedArray(cfg.totalSteps, (i) => (
               <View
                 key={`step-${i}`}
                 style={[

package/src/molecules/StepProgress/StepProgress.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View, StyleSheet, ViewStyle } from "react-native";
 import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive'
 import { STEP_INDICATOR } from '../../constants';
 import { createMappedArray } from '../../utils/arrayUtils';
 

package/src/molecules/action-footer/ActionFooter.tsx

@@ -5,7 +5,7 @@ import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { ActionFooterProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive'
 import { NAVIGATION } from '../../constants';
 
 const createStyles = (spacingMultiplier: number) => StyleSheet.create({

package/src/molecules/alerts/AlertModal.tsx

@@ -9,7 +9,7 @@ import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType } from './AlertTypes';
 import { getAlertBackgroundColor } from './utils/alertUtils';
 import { useAlertDismissHandler } from './hooks';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive'
 import { MODAL_SIZES, ALERT_MODAL_ICON } from '../../constants';
 
 interface AlertModalProps {

package/src/molecules/avatar/Avatar.tsx

@@ -12,7 +12,7 @@ import { AtomicText, AtomicIcon } from '../../atoms';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
 import type { SizeConfig } from './Avatar.types';
 import { AVATAR_SIZES } from '../../constants';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive'
 import { AvatarUtils } from './Avatar.utils';
 
 export interface AvatarProps {

package/src/molecules/avatar/AvatarGroup.tsx

@@ -12,7 +12,7 @@ import { AtomicText } from '../../atoms';
 import { Avatar } from './Avatar';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
 import { AVATAR_SIZES } from '../../constants';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive'
 import type { SizeConfig } from './Avatar.types';
 
 const AVATAR_CONSTANTS = {

package/src/molecules/calendar/infrastructure/stores/useCalendarEvents.ts

@@ -8,6 +8,7 @@ import { create } from 'zustand';
 import type { CalendarEvent, CreateCalendarEventRequest, UpdateCalendarEventRequest } from '../../domain/entities/CalendarEvent.entity';
 import { zustandStorage } from './storageAdapter';
 import { isValidArray, isValidCalendarEvent } from '../../../../storage/domain/utils/ValidationUtils';
+import { ErrorHandler } from '../../../../utils/errors/ErrorHandler';
 
 const STORAGE_KEY = 'calendar_events';
 
@@ -35,8 +36,9 @@ const generateId = (): string => `${Date.now()}-${Math.random().toString(36).sub
 const persistEvents = async (events: CalendarEvent[]): Promise<void> => {
   try {
     await zustandStorage.setItem(STORAGE_KEY, JSON.stringify(events));
-  } catch {
-    // Silent fail
+  } catch (error) {
+    ErrorHandler.log(error);
+    throw error; // Re-throw to allow caller to handle
   }
 };
 
@@ -59,6 +61,7 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
       // Runtime validation
       if (!isValidArray(parsed)) {
         if (__DEV__) {
+          console.error('[CalendarEvents] Invalid data format: expected array, got', typeof parsed);
         }
         set({ error: 'Invalid data format', isLoading: false });
         return;
@@ -77,7 +80,8 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
       } else {
         set({ isLoading: false });
       }
-    } catch {
+    } catch (error) {
+      ErrorHandler.log(error);
       set({ error: 'Failed to load events', isLoading: false });
     }
   },
@@ -97,7 +101,8 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
 
       await persistEvents(updatedEvents);
       set({ events: updatedEvents, isLoading: false });
-    } catch {
+    } catch (error) {
+      ErrorHandler.log(error);
       set({ error: 'Failed to add event', isLoading: false });
     }
   },
@@ -114,7 +119,8 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
 
       await persistEvents(updatedEvents);
       set({ events: updatedEvents, isLoading: false });
-    } catch {
+    } catch (error) {
+      ErrorHandler.log(error);
       set({ error: 'Failed to update event', isLoading: false });
     }
   },
@@ -127,7 +133,8 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
 
       await persistEvents(updatedEvents);
       set({ events: updatedEvents, isLoading: false });
-    } catch {
+    } catch (error) {
+      ErrorHandler.log(error);
       set({ error: 'Failed to delete event', isLoading: false });
     }
   },
@@ -144,7 +151,8 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
 
       await persistEvents(updatedEvents);
       set({ events: updatedEvents, isLoading: false });
-    } catch {
+    } catch (error) {
+      ErrorHandler.log(error);
       set({ error: 'Failed to complete event', isLoading: false });
     }
   },
@@ -161,7 +169,8 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
 
       await persistEvents(updatedEvents);
       set({ events: updatedEvents, isLoading: false });
-    } catch {
+    } catch (error) {
+      ErrorHandler.log(error);
       set({ error: 'Failed to uncomplete event', isLoading: false });
     }
   },
@@ -173,7 +182,8 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
     try {
       await zustandStorage.removeItem(STORAGE_KEY);
       set({ events: [], isLoading: false });
-    } catch {
+    } catch (error) {
+      ErrorHandler.log(error);
       set({ error: 'Failed to clear events', isLoading: false });
     }
   },

package/src/molecules/circular-menu/CircularMenuItem.tsx

@@ -4,7 +4,7 @@ import { AtomicIcon } from "../../atoms";
 import { AtomicText } from "../../atoms";
 import { useAppDesignTokens } from "../../theme";
 import { LAYOUT } from "./constants";
-import { calculateResponsiveSize } from "../../utils/responsiveUtils";
+import { calculateResponsiveSize } from '../responsive'
 
 export interface CircularMenuItemProps {
   icon: string;

package/src/molecules/hero-section/HeroSection.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import type { HeroSectionProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive'
 import { HERO_ICON } from '../../constants';
 
 export const HeroSection: React.FC<HeroSectionProps> = ({

package/src/molecules/icon-grid/IconGrid.tsx

@@ -21,7 +21,7 @@ import { AtomicIcon } from '../../atoms';
 import { AtomicText } from '../../atoms';
 import type { IconName } from '../../atoms';
 import { calculateGridItemWidth } from '../../utils/math';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive'
 import { ICON_GRID } from '../../constants';
 
 export interface IconGridItem {

package/src/molecules/info-grid/InfoGrid.tsx

@@ -5,7 +5,7 @@ import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { InfoGridProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive'
 import { INFO_GRID_ICONS } from '../../constants';
 
 export const InfoGrid: React.FC<InfoGridProps> = ({

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

@@ -4,6 +4,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AtomicText } from "../../../atoms/AtomicText";
 import { useOnboardingProvider } from "../providers/OnboardingProvider";
 import { calculateStepProgress } from "../../../utils/math";
+import { createMappedArray } from "../../../utils";
 
 export interface OnboardingFooterProps {
   currentIndex: number;
@@ -59,7 +60,7 @@ export const OnboardingFooter = React.memo<OnboardingFooterProps>(({
   );
 
   const dots = useMemo(
-    () => Array.from({ length: totalSlides }, (_, index) => {
+    () => createMappedArray(totalSlides, (index) => {
       const isActive = index === currentIndex;
       return {
         key: index,

package/src/responsive/index.ts

@@ -9,6 +9,15 @@
 export { useResponsive } from './useResponsive';
 export type { UseResponsiveReturn } from './useResponsive';
 
+// Responsive calculation utilities
+export {
+  calculateResponsiveSize,
+  calculateResponsiveSizes,
+  calculateResponsiveSizeSubtle,
+  calculateLineHeight,
+  createResponsiveSizes,
+} from './utils';
+
 // Responsive sizing utilities
 export {
   getResponsiveLogoSize,

package/src/theme/index.ts

@@ -65,7 +65,8 @@ export type {
 // =============================================================================
 
 export { useAppDesignTokens } from './hooks/useAppDesignTokens';
-export { useDesignSystemTheme } from './infrastructure/globalThemeStore';
+// Alias for backward compatibility - useTheme is now the single source of truth
+export { useTheme as useDesignSystemTheme } from './infrastructure/stores/themeStore';
 export { useTheme } from './infrastructure/stores/themeStore';
 export { useThemedStyles, useThemedStyleSheet } from './hooks/useThemedStyles';
 export { useCommonStyles } from './hooks/useCommonStyles';

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

@@ -4,7 +4,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useFonts } from 'expo-font';
 import { SafeAreaProvider, initialWindowMetrics } from '../../../safe-area';
 import { useTheme } from '../stores/themeStore';
-import { useDesignSystemTheme, type ThemeMode } from '../globalThemeStore';
+import type { ThemeMode } from '../../core/ColorPalette';
 import type { CustomThemeColors } from '../../core/CustomColors';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
 import { FIVE_SECONDS_MS } from '../../../utils/constants/TimeConstants';
@@ -46,20 +46,16 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   const setCustomColors = useTheme((state) => state.setCustomColors);
   const setDefaultColors = useTheme((state) => state.setDefaultColors);
   const setDefaultThemeMode = useTheme((state) => state.setDefaultThemeMode);
-  const setGlobalCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
-  const setGlobalThemeMode = useDesignSystemTheme((state) => state.setThemeMode);
 
   useEffect(() => {
     // Register app's default colors for reset feature
     if (customColors) {
       setDefaultColors(customColors);
       setCustomColors(customColors);
-      setGlobalCustomColors(customColors);
     }
 
     // Set default theme mode BEFORE initialize
     setDefaultThemeMode(initialThemeMode);
-    setGlobalThemeMode(initialThemeMode);
 
     // Safety timeout: if initialization takes too long, proceed anyway
     const safetyTimer = setTimeout(() => {
@@ -89,8 +85,6 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     setCustomColors,
     setDefaultColors,
     setDefaultThemeMode,
-    setGlobalCustomColors,
-    setGlobalThemeMode,
   ]);
 
   // Skip font loading gate when no custom fonts are provided

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

@@ -8,7 +8,6 @@
 import { createStore } from '../../../storage';
 import { lightTheme, darkTheme, type Theme } from '../../core/themes';
 import { ThemeStorage } from '../storage/ThemeStorage';
-import { useDesignSystemTheme } from '../globalThemeStore';
 import type { ThemeMode } from '../../core/ColorPalette';
 import type { CustomThemeColors } from '../../core/CustomColors';
 
@@ -95,16 +94,11 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
           isDark: mode === 'dark',
           isInitialized: true,
         });
-
-        const dsTheme = useDesignSystemTheme.getState();
-        dsTheme.setThemeMode(mode);
-        dsTheme.setCustomColors(colors);
       } catch (error) {
         if (__DEV__) {
           console.error('[ThemeStore] Failed to initialize theme:', error);
         }
         set({ isInitialized: true, _initInProgress: false });
-        useDesignSystemTheme.getState().setThemeMode(defaultThemeMode);
       } finally {
         set({ _initInProgress: false });
       }
@@ -121,7 +115,6 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
         const theme = mode === 'light' ? lightTheme : darkTheme;
         set({ themeMode: mode, theme, isDark: mode === 'dark' });
         await ThemeStorage.setThemeMode(mode);
-        useDesignSystemTheme.getState().setThemeMode(mode);
       } catch (error) {
         // Revert state on error
         set({ _lastUpdateId: undefined });
@@ -146,7 +139,6 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
 
       try {
         await ThemeStorage.setCustomColors(colors);
-        useDesignSystemTheme.getState().setCustomColors(colors);
       } catch (error) {
         // Revert to previous colors on error
         set({ customColors: currentColors, _lastUpdateId: undefined });
@@ -173,9 +165,6 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
       set({ themeMode: defaultThemeMode, theme, isDark: defaultThemeMode === 'dark', customColors: defaultColors });
       await ThemeStorage.clearThemeMode();
       await ThemeStorage.clearCustomColors();
-      const dsTheme = useDesignSystemTheme.getState();
-      dsTheme.setThemeMode(defaultThemeMode);
-      dsTheme.setCustomColors(defaultColors);
     },
 
     toggleTheme: async () => {

package/src/utils/index.ts

@@ -4,14 +4,6 @@
  * Centralized utility functions for the design system.
  */
 
-export {
-  calculateResponsiveSize,
-  calculateResponsiveSizes,
-  calculateResponsiveSizeSubtle,
-  calculateLineHeight,
-  createResponsiveSizes,
-} from './responsiveUtils';
-
 export {
   createMappedArray,
   safeSlice,

package/src/theme/infrastructure/globalThemeStore.ts

@@ -1,74 +0,0 @@
-/**
- * Global Theme Store for Design System
- *
- * Minimal Zustand store for theme state management.
- * Apps can sync their theme state with this global store.
- *
- * WHY THIS EXISTS:
- * - ScreenLayout needs to know current theme mode
- * - Without prop drilling or Context API
- * - Single source of truth for design system components
- * - Apps control theme, design system reacts
- *
- * USAGE IN APP:
- * ```typescript
- * import { useDesignSystemTheme } from '@umituz/react-native-design-system-theme';
- * import { useTheme } from '@domains/theme';
- *
- * // Sync app theme with design system
- * const { themeMode } = useTheme();
- * const { setThemeMode } = useDesignSystemTheme();
- *
- * useEffect(() => {
- *   setThemeMode(themeMode);
- * }, [themeMode]);
- * ```
- */
-
-import { createStore } from '../../storage';
-import type { ThemeMode } from '../core/ColorPalette';
-import type { CustomThemeColors } from '../core/CustomColors';
-
-interface GlobalThemeState {
-  /** Current theme mode */
-  themeMode: ThemeMode;
-  /** Custom theme colors override */
-  customColors?: CustomThemeColors;
-}
-
-interface GlobalThemeActions {
-  /** Update theme mode (called by app when theme changes) */
-  setThemeMode: (mode: ThemeMode) => void;
-  /** Set custom theme colors (called by app when custom colors change) */
-  setCustomColors: (colors?: CustomThemeColors) => void;
-}
-
-/**
- * Global theme store for design system components
- *
- * This is a MINIMAL store - app has the real theme logic.
- * Design system just mirrors the current theme for its components.
- */
-export const useDesignSystemTheme = createStore<GlobalThemeState, GlobalThemeActions>({
-  name: 'design-system-theme',
-  initialState: {
-    themeMode: 'light',
-    customColors: undefined,
-  },
-  persist: false,
-  actions: (set, get) => ({
-    setThemeMode: (mode: ThemeMode) => {
-      // Only update if mode actually changed to prevent unnecessary re-renders
-      const currentMode = get().themeMode;
-      if (currentMode !== mode) {
-        set({ themeMode: mode });
-      }
-    },
-    setCustomColors: (colors?: CustomThemeColors) => {
-      set({ customColors: colors });
-    },
-  }),
-});
-
-export type { ThemeMode };
-