@umituz/react-native-design-system 2.5.11 → 2.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.11",
+  "version": "2.5.13",
   "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/molecules/calendar/infrastructure/storage/CalendarStore.ts

@@ -1,17 +1,19 @@
 /**
- * Calendar Store (Zustand via @umituz/react-native-storage)
+ * Calendar Store (Zustand)
  *
  * Global state management for calendar functionality.
  * Manages calendar view state, selected date, and events.
  *
  * Design Philosophy:
- * - Uses createStore from @umituz/react-native-storage
- * - AsyncStorage persistence built-in
+ * - Zustand for lightweight state
+ * - AsyncStorage for persistence
  * - Generic event handling
  * - Timezone-aware via CalendarService
  */
 
-import { createStore, storageRepository } from '@umituz/react-native-storage';
+import { create } from 'zustand';
+import { persist, createJSONStorage } 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';
 
@@ -88,218 +90,225 @@ const initialState: CalendarState = {
 /**
  * Calendar Store
  */
-export const useCalendarStore = createStore<CalendarState, CalendarActions>({
-  name: 'calendar-storage',
-  initialState,
-  persist: true,
-  partialize: (state) => ({ events: state.events }),
-  actions: (set, get) => ({
-    /**
-     * Load events from storage
-     */
-    loadEvents: async () => {
-      set({ isLoading: true, error: null });
-      try {
-        const stored = await storageRepository.getItem<CalendarEvent[]>(STORAGE_KEY);
-        if (stored) {
-          // Restore Date objects
-          const events = stored.map((event) => ({
-            ...event,
-            createdAt: new Date(event.createdAt),
-            updatedAt: new Date(event.updatedAt),
-          }));
-          set({ events, isLoading: false });
-        } else {
-          set({ isLoading: false });
-        }
-      } catch (error) {
-        set({
-          error: error instanceof Error ? error.message : 'Failed to load events',
-          isLoading: false,
-        });
-      }
-    },
-
-    /**
-     * Add a new event
-     */
-    addEvent: async (request: CreateCalendarEventRequest) => {
-      set({ isLoading: true, error: null });
-      try {
-        const newEvent: CalendarEvent = {
-          id: generateId(),
-          ...request,
-          isCompleted: false,
-          createdAt: new Date(),
-          updatedAt: new Date(),
-        };
-
-        const events = [...get().events, newEvent];
-        await storageRepository.setItem(STORAGE_KEY, events);
-        set({ events, isLoading: false });
-      } catch (error) {
-        set({
-          error: error instanceof Error ? error.message : 'Failed to add event',
-          isLoading: false,
-        });
-      }
-    },
+export const useCalendarStore = create<CalendarState & { actions: CalendarActions }>()(
+  persist(
+    (set, get) => ({
+      ...initialState,
+      actions: {
+        /**
+         * Load events from storage
+         */
+        loadEvents: async () => {
+          set({ isLoading: true, error: null });
+          try {
+            const stored = await AsyncStorage.getItem(STORAGE_KEY);
+            if (stored) {
+              const parsed = JSON.parse(stored) as CalendarEvent[];
+              // Restore Date objects
+              const events = parsed.map((event) => ({
+                ...event,
+                createdAt: new Date(event.createdAt),
+                updatedAt: new Date(event.updatedAt),
+              }));
+              set({ events, isLoading: false });
+            } else {
+              set({ isLoading: false });
+            }
+          } catch {
+            set({
+              error: 'Failed to load events',
+              isLoading: false,
+            });
+          }
+        },
 
-    /**
-     * Update an existing event
-     */
-    updateEvent: async (request: UpdateCalendarEventRequest) => {
-      set({ isLoading: true, error: null });
-      try {
-        const events = get().events.map((event) => {
-          if (event.id === request.id) {
-            return {
-              ...event,
+        /**
+         * Add a new event
+         */
+        addEvent: async (request: CreateCalendarEventRequest) => {
+          set({ isLoading: true, error: null });
+          try {
+            const newEvent: CalendarEvent = {
+              id: generateId(),
               ...request,
+              isCompleted: false,
+              createdAt: new Date(),
               updatedAt: new Date(),
             };
+
+            const events = [...get().events, newEvent];
+            await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(events));
+            set({ events, isLoading: false });
+          } catch {
+            set({
+              error: 'Failed to add event',
+              isLoading: false,
+            });
           }
-          return event;
-        });
+        },
 
-        await storageRepository.setItem(STORAGE_KEY, events);
-        set({ events, isLoading: false });
-      } catch (error) {
-        set({
-          error: error instanceof Error ? error.message : 'Failed to update event',
-          isLoading: false,
-        });
-      }
-    },
+        /**
+         * Update an existing event
+         */
+        updateEvent: async (request: UpdateCalendarEventRequest) => {
+          set({ isLoading: true, error: null });
+          try {
+            const events = get().events.map((event) => {
+              if (event.id === request.id) {
+                return {
+                  ...event,
+                  ...request,
+                  updatedAt: new Date(),
+                };
+              }
+              return event;
+            });
 
-    /**
-     * Delete an event
-     */
-    deleteEvent: async (id: string) => {
-      set({ isLoading: true, error: null });
-      try {
-        const events = get().events.filter((event) => event.id !== id);
-        await storageRepository.setItem(STORAGE_KEY, events);
-        set({ events, isLoading: false });
-      } catch (error) {
-        set({
-          error: error instanceof Error ? error.message : 'Failed to delete event',
-          isLoading: false,
-        });
-      }
-    },
+            await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(events));
+            set({ events, isLoading: false });
+          } catch {
+            set({
+              error: 'Failed to update event',
+              isLoading: false,
+            });
+          }
+        },
+
+        /**
+         * Delete an event
+         */
+        deleteEvent: async (id: string) => {
+          set({ isLoading: true, error: null });
+          try {
+            const events = get().events.filter((event) => event.id !== id);
+            await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(events));
+            set({ events, isLoading: false });
+          } catch {
+            set({
+              error: 'Failed to delete event',
+              isLoading: false,
+            });
+          }
+        },
 
-    /**
-     * Mark event as completed
-     */
-    completeEvent: async (id: string) => {
-      await get().updateEvent({ id, isCompleted: true });
-    },
+        /**
+         * Mark event as completed
+         */
+        completeEvent: async (id: string) => {
+          await get().actions.updateEvent({ id, isCompleted: true });
+        },
 
-    /**
-     * Mark event as incomplete
-     */
-    uncompleteEvent: async (id: string) => {
-      await get().updateEvent({ id, isCompleted: false });
-    },
+        /**
+         * Mark event as incomplete
+         */
+        uncompleteEvent: async (id: string) => {
+          await get().actions.updateEvent({ id, isCompleted: false });
+        },
 
-    /**
-     * Set selected date
-     */
-    setSelectedDate: (date: Date) => {
-      set({ selectedDate: date });
-    },
+        /**
+         * Set selected date
+         */
+        setSelectedDate: (date: Date) => {
+          set({ selectedDate: date });
+        },
 
-    /**
-     * Go to today's date
-     */
-    goToToday: () => {
-      const today = new Date();
-      set({
-        selectedDate: today,
-        currentMonth: today,
-      });
-    },
+        /**
+         * Go to today's date
+         */
+        goToToday: () => {
+          const today = new Date();
+          set({
+            selectedDate: today,
+            currentMonth: today,
+          });
+        },
 
-    /**
-     * Navigate to previous/next month
-     */
-    navigateMonth: (direction: 'prev' | 'next') => {
-      const currentMonth = get().currentMonth;
-      const newMonth =
-        direction === 'prev'
-          ? CalendarService.getPreviousMonth(currentMonth)
-          : CalendarService.getNextMonth(currentMonth);
+        /**
+         * Navigate to previous/next month
+         */
+        navigateMonth: (direction: 'prev' | 'next') => {
+          const currentMonth = get().currentMonth;
+          const newMonth =
+            direction === 'prev'
+              ? CalendarService.getPreviousMonth(currentMonth)
+              : CalendarService.getNextMonth(currentMonth);
 
-      set({ currentMonth: newMonth });
-    },
+          set({ currentMonth: newMonth });
+        },
 
-    /**
-     * Navigate to previous/next week
-     */
-    navigateWeek: (direction: 'prev' | 'next') => {
-      const selectedDate = get().selectedDate;
-      const newDate =
-        direction === 'prev'
-          ? CalendarService.getPreviousWeek(selectedDate)
-          : CalendarService.getNextWeek(selectedDate);
+        /**
+         * Navigate to previous/next week
+         */
+        navigateWeek: (direction: 'prev' | 'next') => {
+          const selectedDate = get().selectedDate;
+          const newDate =
+            direction === 'prev'
+              ? CalendarService.getPreviousWeek(selectedDate)
+              : CalendarService.getNextWeek(selectedDate);
 
-      set({ selectedDate: newDate });
-    },
+          set({ selectedDate: newDate });
+        },
 
-    /**
-     * Set current month directly
-     */
-    setCurrentMonth: (date: Date) => {
-      set({ currentMonth: date });
-    },
+        /**
+         * Set current month directly
+         */
+        setCurrentMonth: (date: Date) => {
+          set({ currentMonth: date });
+        },
 
-    /**
-     * Set view mode
-     */
-    setViewMode: (mode: CalendarViewMode) => {
-      set({ viewMode: mode });
-    },
+        /**
+         * Set view mode
+         */
+        setViewMode: (mode: CalendarViewMode) => {
+          set({ viewMode: mode });
+        },
 
-    /**
-     * Get events for a specific date
-     */
-    getEventsForDate: (date: Date) => {
-      const events = get().events;
-      return CalendarService.getEventsForDate(date, events);
-    },
+        /**
+         * Get events for a specific date
+         */
+        getEventsForDate: (date: Date) => {
+          const events = get().events;
+          return CalendarService.getEventsForDate(date, events);
+        },
 
-    /**
-     * Get events for a specific month
-     */
-    getEventsForMonth: (year: number, month: number) => {
-      const events = get().events;
-      const firstDay = new Date(year, month, 1);
-      const lastDay = new Date(year, month + 1, 0);
-      return CalendarService.getEventsInRange(firstDay, lastDay, events);
-    },
+        /**
+         * Get events for a specific month
+         */
+        getEventsForMonth: (year: number, month: number) => {
+          const events = get().events;
+          const firstDay = new Date(year, month, 1);
+          const lastDay = new Date(year, month + 1, 0);
+          return CalendarService.getEventsInRange(firstDay, lastDay, events);
+        },
 
-    /**
-     * Clear error state
-     */
-    clearError: () => {
-      set({ error: null });
-    },
+        /**
+         * Clear error state
+         */
+        clearError: () => {
+          set({ error: null });
+        },
 
-    /**
-     * Clear all events (for testing/reset)
-     */
-    clearAllEvents: async () => {
-      set({ isLoading: true, error: null });
-      try {
-        await storageRepository.removeItem(STORAGE_KEY);
-        set({ events: [], isLoading: false });
-      } catch (error) {
-        set({
-          error: error instanceof Error ? error.message : 'Failed to clear events',
-          isLoading: false,
-        });
-      }
-    },
-  }),
-});
+        /**
+         * Clear all events (for testing/reset)
+         */
+        clearAllEvents: async () => {
+          set({ isLoading: true, error: null });
+          try {
+            await AsyncStorage.removeItem(STORAGE_KEY);
+            set({ events: [], isLoading: false });
+          } catch {
+            set({
+              error: 'Failed to clear events',
+              isLoading: false,
+            });
+          }
+        },
+      },
+    }),
+    {
+      name: 'calendar-storage',
+      storage: createJSONStorage(() => AsyncStorage),
+      partialize: (state) => ({ events: state.events }),
+    }
+  )
+);

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

@@ -76,6 +76,7 @@ export interface UseCalendarReturn {
  * Main calendar hook
  */
 export const useCalendar = (): UseCalendarReturn => {
+  const store = useCalendarStore();
   const {
     events,
     selectedDate,
@@ -84,7 +85,7 @@ export const useCalendar = (): UseCalendarReturn => {
     isLoading,
     error,
     actions,
-  } = useCalendarStore((state: ReturnType<typeof useCalendarStore.getState>) => state);
+  } = store;
 
   // Load events on mount
   useEffect(() => {
@@ -129,11 +130,12 @@ export const useCalendar = (): UseCalendarReturn => {
  * Lightweight hook for just navigation actions
  */
 export const useCalendarNavigation = () => {
+  const store = useCalendarStore();
   const {
     selectedDate,
     currentMonth,
     actions: { setSelectedDate, navigateMonth, goToToday, setCurrentMonth },
-  } = useCalendarStore((state: ReturnType<typeof useCalendarStore.getState>) => state);
+  } = store;
 
   return {
     selectedDate,
@@ -150,6 +152,7 @@ export const useCalendarNavigation = () => {
  * Lightweight hook for just event operations
  */
 export const useCalendarEvents = () => {
+  const store = useCalendarStore();
   const {
     events,
     isLoading,
@@ -163,7 +166,7 @@ export const useCalendarEvents = () => {
       uncompleteEvent,
       clearError,
     },
-  } = useCalendarStore((state: ReturnType<typeof useCalendarStore.getState>) => state);
+  } = store;
 
   return {
     events,