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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.8",
+  "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/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/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);
+    },
+  }),
+});