@umituz/react-native-design-system 2.5.10 → 2.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.10",
+  "version": "2.5.12",
   "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",
@@ -59,6 +59,7 @@
     "@umituz/react-native-filesystem": "*",
     "@umituz/react-native-haptics": "*",
     "@umituz/react-native-localization": "*",
+    "@umituz/react-native-storage": "*",
     "@umituz/react-native-uuid": "*",
     "expo-application": ">=5.0.0",
     "expo-clipboard": ">=8.0.0",
@@ -112,6 +113,7 @@
     "@umituz/react-native-filesystem": "^2.1.7",
     "@umituz/react-native-haptics": "^1.0.2",
     "@umituz/react-native-localization": "^3.5.34",
+    "@umituz/react-native-storage": "latest",
     "@umituz/react-native-uuid": "*",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",

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

@@ -23,72 +23,77 @@ import { CalendarService } from '../services/CalendarService';
 export type CalendarViewMode = 'month' | 'week' | 'day' | 'list';
 
 /**
- * Calendar state interface
+ * Storage key for calendar events
+ */
+const STORAGE_KEY = 'calendar_events';
+
+/**
+ * Generate unique ID for events
+ */
+const generateId = (): string => {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+};
+
+/**
+ * Calendar state (data only)
  */
 interface CalendarState {
-  // State
   events: CalendarEvent[];
   selectedDate: Date;
   currentMonth: Date;
   viewMode: CalendarViewMode;
   isLoading: boolean;
   error: string | null;
+}
 
-  // Actions
-  actions: {
-    // Event CRUD
-    loadEvents: () => Promise<void>;
-    addEvent: (request: CreateCalendarEventRequest) => Promise<void>;
-    updateEvent: (request: UpdateCalendarEventRequest) => Promise<void>;
-    deleteEvent: (id: string) => Promise<void>;
-    completeEvent: (id: string) => Promise<void>;
-    uncompleteEvent: (id: string) => Promise<void>;
+/**
+ * Calendar actions
+ */
+interface CalendarActions {
+  // Event CRUD
+  loadEvents: () => Promise<void>;
+  addEvent: (request: CreateCalendarEventRequest) => Promise<void>;
+  updateEvent: (request: UpdateCalendarEventRequest) => Promise<void>;
+  deleteEvent: (id: string) => Promise<void>;
+  completeEvent: (id: string) => Promise<void>;
+  uncompleteEvent: (id: string) => Promise<void>;
 
-    // Navigation
-    setSelectedDate: (date: Date) => void;
-    goToToday: () => void;
-    navigateMonth: (direction: 'prev' | 'next') => void;
-    navigateWeek: (direction: 'prev' | 'next') => void;
-    setCurrentMonth: (date: Date) => void;
+  // Navigation
+  setSelectedDate: (date: Date) => void;
+  goToToday: () => void;
+  navigateMonth: (direction: 'prev' | 'next') => void;
+  navigateWeek: (direction: 'prev' | 'next') => void;
+  setCurrentMonth: (date: Date) => void;
 
-    // View mode
-    setViewMode: (mode: CalendarViewMode) => void;
+  // View mode
+  setViewMode: (mode: CalendarViewMode) => void;
 
-    // Utilities
-    getEventsForDate: (date: Date) => CalendarEvent[];
-    getEventsForMonth: (year: number, month: number) => CalendarEvent[];
-    clearError: () => void;
-    clearAllEvents: () => Promise<void>;
-  };
+  // Utilities
+  getEventsForDate: (date: Date) => CalendarEvent[];
+  getEventsForMonth: (year: number, month: number) => CalendarEvent[];
+  clearError: () => void;
+  clearAllEvents: () => Promise<void>;
 }
 
 /**
- * Storage key for calendar events
- */
-const STORAGE_KEY = 'calendar_events';
-
-/**
- * Generate unique ID for events
+ * Initial state
  */
-const generateId = (): string => {
-  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+const initialState: CalendarState = {
+  events: [],
+  selectedDate: new Date(),
+  currentMonth: new Date(),
+  viewMode: 'month',
+  isLoading: false,
+  error: null,
 };
 
 /**
  * Calendar Store
  */
-export const useCalendarStore = create<CalendarState>()(
+export const useCalendarStore = create<CalendarState & { actions: CalendarActions }>()(
   persist(
     (set, get) => ({
-      // Initial State
-      events: [],
-      selectedDate: new Date(),
-      currentMonth: new Date(),
-      viewMode: 'month',
-      isLoading: false,
-      error: null,
-
-      // Actions
+      ...initialState,
       actions: {
         /**
          * Load events from storage
@@ -98,20 +103,21 @@ export const useCalendarStore = create<CalendarState>()(
           try {
             const stored = await AsyncStorage.getItem(STORAGE_KEY);
             if (stored) {
-              const events = JSON.parse(stored);
+              const parsed = JSON.parse(stored) as CalendarEvent[];
               // Restore Date objects
-              events.forEach((event: CalendarEvent) => {
-                event.createdAt = new Date(event.createdAt);
-                event.updatedAt = new Date(event.updatedAt);
-              });
+              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 (error) {
+          } catch {
             set({
-              error: error instanceof Error ? error.message : 'Failed to load events',
-              isLoading: false
+              error: 'Failed to load events',
+              isLoading: false,
             });
           }
         },
@@ -133,10 +139,10 @@ export const useCalendarStore = create<CalendarState>()(
             const events = [...get().events, newEvent];
             await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(events));
             set({ events, isLoading: false });
-          } catch (error) {
+          } catch {
             set({
-              error: error instanceof Error ? error.message : 'Failed to add event',
-              isLoading: false
+              error: 'Failed to add event',
+              isLoading: false,
             });
           }
         },
@@ -147,7 +153,7 @@ export const useCalendarStore = create<CalendarState>()(
         updateEvent: async (request: UpdateCalendarEventRequest) => {
           set({ isLoading: true, error: null });
           try {
-            const events = get().events.map(event => {
+            const events = get().events.map((event) => {
               if (event.id === request.id) {
                 return {
                   ...event,
@@ -160,10 +166,10 @@ export const useCalendarStore = create<CalendarState>()(
 
             await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(events));
             set({ events, isLoading: false });
-          } catch (error) {
+          } catch {
             set({
-              error: error instanceof Error ? error.message : 'Failed to update event',
-              isLoading: false
+              error: 'Failed to update event',
+              isLoading: false,
             });
           }
         },
@@ -174,13 +180,13 @@ export const useCalendarStore = create<CalendarState>()(
         deleteEvent: async (id: string) => {
           set({ isLoading: true, error: null });
           try {
-            const events = get().events.filter(event => event.id !== id);
+            const events = get().events.filter((event) => event.id !== id);
             await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(events));
             set({ events, isLoading: false });
-          } catch (error) {
+          } catch {
             set({
-              error: error instanceof Error ? error.message : 'Failed to delete event',
-              isLoading: false
+              error: 'Failed to delete event',
+              isLoading: false,
             });
           }
         },
@@ -222,9 +228,10 @@ export const useCalendarStore = create<CalendarState>()(
          */
         navigateMonth: (direction: 'prev' | 'next') => {
           const currentMonth = get().currentMonth;
-          const newMonth = direction === 'prev'
-            ? CalendarService.getPreviousMonth(currentMonth)
-            : CalendarService.getNextMonth(currentMonth);
+          const newMonth =
+            direction === 'prev'
+              ? CalendarService.getPreviousMonth(currentMonth)
+              : CalendarService.getNextMonth(currentMonth);
 
           set({ currentMonth: newMonth });
         },
@@ -234,9 +241,10 @@ export const useCalendarStore = create<CalendarState>()(
          */
         navigateWeek: (direction: 'prev' | 'next') => {
           const selectedDate = get().selectedDate;
-          const newDate = direction === 'prev'
-            ? CalendarService.getPreviousWeek(selectedDate)
-            : CalendarService.getNextWeek(selectedDate);
+          const newDate =
+            direction === 'prev'
+              ? CalendarService.getPreviousWeek(selectedDate)
+              : CalendarService.getNextWeek(selectedDate);
 
           set({ selectedDate: newDate });
         },
@@ -288,10 +296,10 @@ export const useCalendarStore = create<CalendarState>()(
           try {
             await AsyncStorage.removeItem(STORAGE_KEY);
             set({ events: [], isLoading: false });
-          } catch (error) {
+          } catch {
             set({
-              error: error instanceof Error ? error.message : 'Failed to clear events',
-              isLoading: false
+              error: 'Failed to clear events',
+              isLoading: false,
             });
           }
         },
@@ -300,7 +308,6 @@ export const useCalendarStore = create<CalendarState>()(
     {
       name: 'calendar-storage',
       storage: createJSONStorage(() => AsyncStorage),
-      // Only persist events, not UI state
       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,