@umituz/react-native-design-system 2.5.7 → 2.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.7",
+  "version": "2.5.9",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicIcon.tsx

@@ -110,9 +110,10 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
 
   // Calculate size
   const baseSize = customSize ?? size;
-  const sizeInPixels = typeof baseSize === 'number'
+  const iconSizesMap = tokens.iconSizes as Record<string, number>;
+  const sizeInPixels: number = typeof baseSize === 'number'
     ? baseSize * tokens.spacingMultiplier
-    : (tokens.iconSizes as Record<string, number>)[baseSize] || (tokens.iconSizes as Record<string, number>).md;
+    : iconSizesMap[baseSize] ?? iconSizesMap['md'] ?? 24;
 
   // Calculate color
   const iconColor = customColor

package/src/layouts/ScreenHeader/ScreenHeader.tsx

@@ -88,7 +88,7 @@ const ScreenHeaderBackButton: React.FC<{
         hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         testID={`${testID}-back-button`}
       >
-        <AtomicIcon name={backIconName || 'ArrowLeft'} color={backIconColor} />
+        <AtomicIcon name={backIconName || 'arrow-back'} color={backIconColor} />
       </TouchableOpacity>
     </View>
   );
@@ -132,7 +132,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
   hideBackButton = false,
   style,
   testID = 'screen-header',
-  backIconName = 'ArrowLeft',
+  backIconName = 'arrow-back',
   backIconColor = 'primary',
 }) => {
   const tokens = useAppDesignTokens();

package/src/molecules/alerts/AlertStore.ts

@@ -2,7 +2,7 @@
  * Alert Store
  */
 
-import { create, type StoreApi } from 'zustand';
+import { createStore } from '@umituz/react-native-storage';
 import { Alert } from './AlertTypes';
 
 interface AlertState {
@@ -15,14 +15,17 @@ interface AlertActions {
     clearAlerts: () => void;
 }
 
-type AlertStore = AlertState & AlertActions;
-type SetState = StoreApi<AlertStore>['setState'];
-
-export const useAlertStore = create<AlertStore>((set: SetState) => ({
-    alerts: [],
-    addAlert: (alert: Alert) => set((state: AlertStore) => ({ alerts: [...state.alerts, alert] })),
-    dismissAlert: (id: string) => set((state: AlertStore) => ({
-        alerts: state.alerts.filter((a: Alert) => a.id !== id)
-    })),
-    clearAlerts: () => set({ alerts: [] }),
-}));
+export const useAlertStore = createStore<AlertState, AlertActions>({
+    name: 'alert-store',
+    initialState: {
+        alerts: [],
+    },
+    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)
+        }),
+        clearAlerts: () => set({ alerts: [] }),
+    }),
+});

package/src/molecules/animation/presentation/hooks/useFireworks.ts

@@ -104,7 +104,8 @@ export const useFireworks = (config: FireworksConfig) => {
 
     const newParticles: ParticleConfig[] = [];
     for (let i = 0; i < particleCount; i++) {
-      const color = colors[Math.floor(Math.random() * colors.length)];
+      const colorIndex = Math.floor(Math.random() * colors.length);
+      const color = colors[colorIndex] ?? colors[0] ?? '#FFFFFF';
       newParticles.push(createParticle(centerX, centerY, color));
     }
 

package/src/molecules/avatar/Avatar.utils.ts

@@ -165,9 +165,11 @@ export class AvatarUtils {
 
     if (words.length >= 2) {
       // Full name: First letter of first + first letter of last
-      const first = words[0][0];
-      const last = words[words.length - 1][0];
-      return (first + last).toLocaleUpperCase('tr-TR');
+      const firstWord = words[0] ?? '';
+      const lastWord = words[words.length - 1] ?? '';
+      const first = firstWord[0] ?? '';
+      const last = lastWord[0] ?? '';
+      return (first + last).toLocaleUpperCase('tr-TR') || '?';
     } else {
       // Single word: First 2 letters
       return trimmed.slice(0, 2).toLocaleUpperCase('tr-TR');

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

@@ -11,8 +11,8 @@
  * - Timezone-aware via CalendarService
  */
 
-import { create } from 'zustand';
-import { persist, createJSONStorage } from 'zustand/middleware';
+import { create, type StateCreator } from 'zustand';
+import { persist, createJSONStorage, type PersistOptions } from 'zustand/middleware';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import type { CalendarEvent, CreateCalendarEventRequest, UpdateCalendarEventRequest } from '../../domain/entities/CalendarEvent.entity';
 import { CalendarService } from '../services/CalendarService';

package/src/molecules/calendar/infrastructure/utils/DateUtilities.ts

@@ -14,7 +14,8 @@ export class DateUtilities {
    * Format date to string (YYYY-MM-DD)
    */
   static formatDateToString(date: Date): string {
-    return date.toISOString().split('T')[0];
+    const parts = date.toISOString().split('T');
+    return parts[0] ?? '';
   }
 
   /**
@@ -91,7 +92,10 @@ export class DateUtilities {
    * Parse date from string (YYYY-MM-DD)
    */
   static parseDate(dateString: string): Date {
-    const [year, month, day] = dateString.split('-').map(Number);
+    const parts = dateString.split('-').map(Number);
+    const year = parts[0] ?? 0;
+    const month = parts[1] ?? 1;
+    const day = parts[2] ?? 1;
     return new Date(year, month - 1, day);
   }
 

package/src/molecules/calendar/presentation/hooks/useCalendar.ts

@@ -84,7 +84,7 @@ export const useCalendar = (): UseCalendarReturn => {
     isLoading,
     error,
     actions,
-  } = useCalendarStore((state) => state);
+  } = useCalendarStore((state: ReturnType<typeof useCalendarStore.getState>) => state);
 
   // Load events on mount
   useEffect(() => {
@@ -133,7 +133,7 @@ export const useCalendarNavigation = () => {
     selectedDate,
     currentMonth,
     actions: { setSelectedDate, navigateMonth, goToToday, setCurrentMonth },
-  } = useCalendarStore((state) => state);
+  } = useCalendarStore((state: ReturnType<typeof useCalendarStore.getState>) => state);
 
   return {
     selectedDate,
@@ -163,7 +163,7 @@ export const useCalendarEvents = () => {
       uncompleteEvent,
       clearError,
     },
-  } = useCalendarStore((state) => state);
+  } = useCalendarStore((state: ReturnType<typeof useCalendarStore.getState>) => state);
 
   return {
     events,

package/src/theme/infrastructure/globalThemeStore.ts

@@ -25,20 +25,20 @@
  * ```
  */
 
-import { create } from 'zustand';
+import { createStore } from '@umituz/react-native-storage';
 import type { ThemeMode } from '../core/ColorPalette';
 import type { CustomThemeColors } from '../core/CustomColors';
 
-interface GlobalThemeStore {
+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;
 }
@@ -49,20 +49,26 @@ interface GlobalThemeStore {
  * This is a MINIMAL store - app has the real theme logic.
  * Design system just mirrors the current theme for its components.
  */
-export const useDesignSystemTheme = create<GlobalThemeStore>()((set: any, get: any) => ({
-  themeMode: 'dark',
-  customColors: undefined,
-  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 const useDesignSystemTheme = createStore<GlobalThemeState, GlobalThemeActions>({
+  name: 'design-system-theme',
+  initialState: {
+    themeMode: 'dark',
+    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 });
+    },
+  }),
+});
 
 // Re-export ThemeMode for backward compatibility
 export type { ThemeMode };

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

@@ -10,7 +10,7 @@
  * - Syncs with design system global theme store
  */
 
-import { create } from 'zustand';
+import { createStore } from '@umituz/react-native-storage';
 import { lightTheme, darkTheme, type Theme } from '../../core/themes';
 import { ThemeStorage } from '../storage/ThemeStorage';
 import { useDesignSystemTheme } from '../globalThemeStore';
@@ -21,6 +21,9 @@ interface ThemeState {
   themeMode: ThemeMode;
   isDark: boolean;
   isInitialized: boolean;
+}
+
+interface ThemeActions {
   setThemeMode: (mode: ThemeMode) => Promise<void>;
   toggleTheme: () => Promise<void>;
   initialize: () => Promise<void>;
@@ -39,66 +42,70 @@ interface ThemeState {
  * };
  * ```
  */
-export const useTheme = create<ThemeState>()((set: any, get: any) => ({
-  theme: darkTheme,
-  themeMode: 'dark',
-  isDark: true,
-  isInitialized: false,
-
-  initialize: async () => {
-    try {
-      const savedMode = await ThemeStorage.getThemeMode();
-      if (savedMode) {
-        const theme = savedMode === 'light' ? lightTheme : darkTheme;
-        set({
-          themeMode: savedMode,
-          theme,
-          isDark: savedMode === 'dark',
-          isInitialized: true,
-        });
-
-        // Sync with design system global theme
-        useDesignSystemTheme.getState().setThemeMode(savedMode);
-      } else {
-        // No saved mode - use default 'dark' and sync to design system store
+export const useTheme = createStore<ThemeState, ThemeActions>({
+  name: 'theme-store',
+  initialState: {
+    theme: darkTheme,
+    themeMode: 'dark',
+    isDark: true,
+    isInitialized: false,
+  },
+  persist: false,
+  actions: (set, get) => ({
+    initialize: async () => {
+      try {
+        const savedMode = await ThemeStorage.getThemeMode();
+        if (savedMode) {
+          const theme = savedMode === 'light' ? lightTheme : darkTheme;
+          set({
+            themeMode: savedMode,
+            theme,
+            isDark: savedMode === 'dark',
+            isInitialized: true,
+          });
+
+          // Sync with design system global theme
+          useDesignSystemTheme.getState().setThemeMode(savedMode);
+        } else {
+          // No saved mode - use default 'dark' and sync to design system store
+          set({ isInitialized: true });
+          // Ensure design system store is synced even if no saved mode exists
+          useDesignSystemTheme.getState().setThemeMode('dark');
+        }
+      } catch {
+        // Silent failure - still mark as initialized to prevent blocking
         set({ isInitialized: true });
-        // Ensure design system store is synced even if no saved mode exists
+        // Ensure design system store is synced even on error
         useDesignSystemTheme.getState().setThemeMode('dark');
       }
-    } catch (error) {
-      if (__DEV__) console.error('[ThemeStore] Initialization error:', error);
-      // Silent failure - still mark as initialized to prevent blocking
-      set({ isInitialized: true });
-      // Ensure design system store is synced even on error
-      useDesignSystemTheme.getState().setThemeMode('dark');
-    }
-  },
+    },
 
-  setThemeMode: async (mode: ThemeMode) => {
-    try {
-      const theme = mode === 'light' ? lightTheme : darkTheme;
+    setThemeMode: async (mode: ThemeMode) => {
+      try {
+        const theme = mode === 'light' ? lightTheme : darkTheme;
 
-      set({
-        themeMode: mode,
-        theme,
-        isDark: mode === 'dark',
-      });
-
-      await ThemeStorage.setThemeMode(mode);
+        set({
+          themeMode: mode,
+          theme,
+          isDark: mode === 'dark',
+        });
 
-      // Sync with design system global theme
-      useDesignSystemTheme.getState().setThemeMode(mode);
-    } catch (error) {
-      if (__DEV__) console.error('[ThemeStore] Error setting theme mode:', error);
-    }
-  },
+        await ThemeStorage.setThemeMode(mode);
 
-  toggleTheme: async () => {
-    const { themeMode, setThemeMode } = get();
-    const newMode: ThemeMode = themeMode === 'light' ? 'dark' : 'light';
-    await setThemeMode(newMode);
-  },
-}));
+        // Sync with design system global theme
+        useDesignSystemTheme.getState().setThemeMode(mode);
+      } catch {
+        // Silent failure
+      }
+    },
+
+    toggleTheme: async () => {
+      const { themeMode, setThemeMode } = get();
+      const newMode: ThemeMode = themeMode === 'light' ? 'dark' : 'light';
+      await setThemeMode(newMode);
+    },
+  }),
+});