@umituz/react-native-design-system 2.6.61 → 2.6.64

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

@@ -0,0 +1,140 @@
+/**
+ * Calendar Event Actions
+ * Event CRUD operations for calendar store
+ */
+
+import { storageRepository, unwrap } from '@umituz/react-native-storage';
+import type { CalendarEvent, CreateCalendarEventRequest, UpdateCalendarEventRequest } from '../../domain/entities/CalendarEvent.entity';
+import { generateId, STORAGE_KEY, hydrateEvents, handleStorageError, handleStorageSuccess } from './CalendarStore.utils';
+import type { CalendarState } from './CalendarStore.types';
+
+/**
+ * Load events from storage
+ */
+export const loadEvents = async (
+  set: (state: Partial<CalendarState>) => void
+): Promise<void> => {
+  set({ isLoading: true, error: null });
+  try {
+    const result = await storageRepository.getItem<CalendarEvent[]>(STORAGE_KEY, []);
+    const events = unwrap(result, []);
+
+    if (events && events.length > 0) {
+      const hydratedEvents = hydrateEvents(events);
+      set({ events: hydratedEvents, isLoading: false });
+    } else {
+      set({ isLoading: false });
+    }
+  } catch {
+    handleStorageError(set, 'Failed to load events');
+  }
+};
+
+/**
+ * Add a new event
+ */
+export const addEvent = async (
+  request: CreateCalendarEventRequest,
+  set: (state: Partial<CalendarState>) => void,
+  get: () => CalendarState
+): Promise<void> => {
+  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);
+    handleStorageSuccess(set, { events });
+  } catch {
+    handleStorageError(set, 'Failed to add event');
+  }
+};
+
+/**
+ * Update an existing event
+ */
+export const updateEvent = async (
+  request: UpdateCalendarEventRequest,
+  set: (state: Partial<CalendarState>) => void,
+  get: () => CalendarState
+): Promise<void> => {
+  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;
+    });
+
+    await storageRepository.setItem(STORAGE_KEY, events);
+    handleStorageSuccess(set, { events });
+  } catch {
+    handleStorageError(set, 'Failed to update event');
+  }
+};
+
+/**
+ * Delete an event
+ */
+export const deleteEvent = async (
+  id: string,
+  set: (state: Partial<CalendarState>) => void,
+  get: () => CalendarState
+): Promise<void> => {
+  set({ isLoading: true, error: null });
+  try {
+    const events = get().events.filter((event) => event.id !== id);
+    await storageRepository.setItem(STORAGE_KEY, events);
+    handleStorageSuccess(set, { events });
+  } catch {
+    handleStorageError(set, 'Failed to delete event');
+  }
+};
+
+/**
+ * Mark event as completed
+ */
+export const completeEvent = async (
+  id: string,
+  get: () => CalendarState,
+  updateEvent: (request: UpdateCalendarEventRequest) => Promise<void>
+): Promise<void> => {
+  await updateEvent({ id, isCompleted: true });
+};
+
+/**
+ * Mark event as incomplete
+ */
+export const uncompleteEvent = async (
+  id: string,
+  get: () => CalendarState,
+  updateEvent: (request: UpdateCalendarEventRequest) => Promise<void>
+): Promise<void> => {
+  await updateEvent({ id, isCompleted: false });
+};
+
+/**
+ * Clear all events (for testing/reset)
+ */
+export const clearAllEvents = async (
+  set: (state: Partial<CalendarState>) => void
+): Promise<void> => {
+  set({ isLoading: true, error: null });
+  try {
+    await storageRepository.removeItem(STORAGE_KEY);
+    handleStorageSuccess(set, { events: [] });
+  } catch {
+    handleStorageError(set, 'Failed to clear events');
+  }
+};

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

@@ -0,0 +1,118 @@
+/**
+ * Calendar Navigation Actions
+ * Navigation and view mode operations for calendar store
+ */
+
+import { CalendarService } from '../services/CalendarService';
+import type { CalendarState, CalendarViewMode } from './CalendarStore.types';
+
+/**
+ * Set selected date
+ */
+export const setSelectedDate = (
+  date: Date,
+  set: (state: Partial<CalendarState>) => void
+): void => {
+  set({ selectedDate: date });
+};
+
+/**
+ * Go to today's date
+ */
+export const goToToday = (
+  set: (state: Partial<CalendarState>) => void
+): void => {
+  const today = new Date();
+  set({
+    selectedDate: today,
+    currentMonth: today,
+  });
+};
+
+/**
+ * Navigate to previous/next month
+ */
+export const navigateMonth = (
+  direction: 'prev' | 'next',
+  set: (state: Partial<CalendarState>) => void,
+  get: () => CalendarState
+): void => {
+  const currentMonth = get().currentMonth;
+  const newMonth =
+    direction === 'prev'
+      ? CalendarService.getPreviousMonth(currentMonth)
+      : CalendarService.getNextMonth(currentMonth);
+
+  set({ currentMonth: newMonth });
+};
+
+/**
+ * Navigate to previous/next week
+ */
+export const navigateWeek = (
+  direction: 'prev' | 'next',
+  set: (state: Partial<CalendarState>) => void,
+  get: () => CalendarState
+): void => {
+  const selectedDate = get().selectedDate;
+  const newDate =
+    direction === 'prev'
+      ? CalendarService.getPreviousWeek(selectedDate)
+      : CalendarService.getNextWeek(selectedDate);
+
+  set({ selectedDate: newDate });
+};
+
+/**
+ * Set current month directly
+ */
+export const setCurrentMonth = (
+  date: Date,
+  set: (state: Partial<CalendarState>) => void
+): void => {
+  set({ currentMonth: date });
+};
+
+/**
+ * Set view mode
+ */
+export const setViewMode = (
+  mode: CalendarViewMode,
+  set: (state: Partial<CalendarState>) => void
+): void => {
+  set({ viewMode: mode });
+};
+
+/**
+ * Get events for a specific date
+ */
+export const getEventsForDate = (
+  date: Date,
+  get: () => CalendarState
+): ReturnType<typeof CalendarService.getEventsForDate> => {
+  const events = get().events;
+  return CalendarService.getEventsForDate(date, events);
+};
+
+/**
+ * Get events for a specific month
+ */
+export const getEventsForMonth = (
+  year: number,
+  month: number,
+  get: () => CalendarState
+): ReturnType<typeof CalendarService.getEventsInRange> => {
+  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
+ */
+export const clearError = (
+  set: (state: Partial<CalendarState>) => void
+): void => {
+  set({ error: null });
+};

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

@@ -0,0 +1,34 @@
+/**
+ * AsyncStorage Adapter for Zustand Persist
+ * Converts AsyncStorageRepository to Zustand-compatible storage
+ */
+
+import { storageRepository } from '@umituz/react-native-storage';
+
+export const zustandStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    try {
+      const result = await storageRepository.getItem<string>(name);
+      if (result.success && result.data) {
+        return result.data;
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    try {
+      await storageRepository.setItem(name, value);
+    } catch {
+      // Silent fail
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    try {
+      await storageRepository.removeItem(name);
+    } catch {
+      // Silent fail
+    }
+  },
+};

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

@@ -0,0 +1,168 @@
+/**
+ * Calendar Events Store
+ * Manages event CRUD operations only
+ * Uses manual persistence (no zustand persist middleware)
+ */
+
+import { create } from 'zustand';
+import type { CalendarEvent, CreateCalendarEventRequest, UpdateCalendarEventRequest } from '../../domain/entities/CalendarEvent.entity';
+import { zustandStorage } from './storageAdapter';
+
+const STORAGE_KEY = 'calendar_events';
+
+interface CalendarEventsState {
+  readonly events: CalendarEvent[];
+  readonly isLoading: boolean;
+  readonly error: string | null;
+}
+
+interface CalendarEventsActions {
+  readonly loadEvents: () => Promise<void>;
+  readonly addEvent: (request: CreateCalendarEventRequest) => Promise<void>;
+  readonly updateEvent: (request: UpdateCalendarEventRequest) => Promise<void>;
+  readonly deleteEvent: (id: string) => Promise<void>;
+  readonly completeEvent: (id: string) => Promise<void>;
+  readonly uncompleteEvent: (id: string) => Promise<void>;
+  readonly clearError: () => void;
+  readonly clearAllEvents: () => Promise<void>;
+}
+
+type CalendarEventsStore = CalendarEventsState & CalendarEventsActions;
+
+const generateId = (): string => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+const persistEvents = async (events: CalendarEvent[]): Promise<void> => {
+  try {
+    await zustandStorage.setItem(STORAGE_KEY, JSON.stringify(events));
+  } catch {
+    // Silent fail
+  }
+};
+
+export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
+  events: [],
+  isLoading: false,
+  error: null,
+
+  loadEvents: async () => {
+    set({ isLoading: true, error: null });
+    try {
+      const json = await zustandStorage.getItem(STORAGE_KEY);
+      if (!json) {
+        set({ isLoading: false });
+        return;
+      }
+
+      const events = JSON.parse(json) as CalendarEvent[];
+
+      if (events && events.length > 0) {
+        const hydratedEvents = events.map((event) => ({
+          ...event,
+          createdAt: new Date(event.createdAt),
+          updatedAt: new Date(event.updatedAt),
+        }));
+        set({ events: hydratedEvents, isLoading: false });
+      } else {
+        set({ isLoading: false });
+      }
+    } catch {
+      set({ error: 'Failed to load events', isLoading: false });
+    }
+  },
+
+  addEvent: async (request) => {
+    set({ isLoading: true, error: null });
+    try {
+      const newEvent: CalendarEvent = {
+        id: generateId(),
+        ...request,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      };
+
+      const { events } = get();
+      const updatedEvents = [...events, newEvent];
+
+      await persistEvents(updatedEvents);
+      set({ events: updatedEvents, isLoading: false });
+    } catch {
+      set({ error: 'Failed to add event', isLoading: false });
+    }
+  },
+
+  updateEvent: async (request) => {
+    set({ isLoading: true, error: null });
+    try {
+      const { events } = get();
+      const updatedEvents = events.map((event) =>
+        event.id === request.id
+          ? { ...event, ...request, updatedAt: new Date() }
+          : event
+      );
+
+      await persistEvents(updatedEvents);
+      set({ events: updatedEvents, isLoading: false });
+    } catch {
+      set({ error: 'Failed to update event', isLoading: false });
+    }
+  },
+
+  deleteEvent: async (id) => {
+    set({ isLoading: true, error: null });
+    try {
+      const { events } = get();
+      const updatedEvents = events.filter((event) => event.id !== id);
+
+      await persistEvents(updatedEvents);
+      set({ events: updatedEvents, isLoading: false });
+    } catch {
+      set({ error: 'Failed to delete event', isLoading: false });
+    }
+  },
+
+  completeEvent: async (id) => {
+    set({ isLoading: true, error: null });
+    try {
+      const { events } = get();
+      const updatedEvents = events.map((event) =>
+        event.id === id
+          ? { ...event, completed: true, updatedAt: new Date() }
+          : event
+      );
+
+      await persistEvents(updatedEvents);
+      set({ events: updatedEvents, isLoading: false });
+    } catch {
+      set({ error: 'Failed to complete event', isLoading: false });
+    }
+  },
+
+  uncompleteEvent: async (id) => {
+    set({ isLoading: true, error: null });
+    try {
+      const { events } = get();
+      const updatedEvents = events.map((event) =>
+        event.id === id
+          ? { ...event, completed: false, updatedAt: new Date() }
+          : event
+      );
+
+      await persistEvents(updatedEvents);
+      set({ events: updatedEvents, isLoading: false });
+    } catch {
+      set({ error: 'Failed to uncomplete event', isLoading: false });
+    }
+  },
+
+  clearError: () => set({ error: null }),
+
+  clearAllEvents: async () => {
+    set({ isLoading: true, error: null });
+    try {
+      await zustandStorage.removeItem(STORAGE_KEY);
+      set({ events: [], isLoading: false });
+    } catch {
+      set({ error: 'Failed to clear events', isLoading: false });
+    }
+  },
+}));

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

@@ -0,0 +1,47 @@
+/**
+ * Calendar Navigation Store
+ * Manages date navigation state (no persistence needed)
+ */
+
+import { create } from 'zustand';
+
+interface CalendarNavigationState {
+  readonly selectedDate: Date;
+  readonly currentMonth: Date;
+}
+
+interface CalendarNavigationActions {
+  readonly setSelectedDate: (date: Date) => void;
+  readonly goToToday: () => void;
+  readonly navigateMonth: (direction: 'prev' | 'next') => void;
+  readonly setCurrentMonth: (date: Date) => void;
+}
+
+type CalendarNavigationStore = CalendarNavigationState & CalendarNavigationActions;
+
+export const useCalendarNavigation = create<CalendarNavigationStore>()((set) => ({
+  selectedDate: new Date(),
+  currentMonth: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+
+  setSelectedDate: (date) => set({ selectedDate: date }),
+
+  goToToday: () => {
+    const today = new Date();
+    set({
+      selectedDate: today,
+      currentMonth: new Date(today.getFullYear(), today.getMonth(), 1),
+    });
+  },
+
+  navigateMonth: (direction) => {
+    set((state) => {
+      const { currentMonth } = state;
+      const newMonth = direction === 'next' ? currentMonth.getMonth() + 1 : currentMonth.getMonth() - 1;
+      return {
+        currentMonth: new Date(currentMonth.getFullYear(), newMonth, 1),
+      };
+    });
+  },
+
+  setCurrentMonth: (date) => set({ currentMonth: new Date(date.getFullYear(), date.getMonth(), 1) }),
+}));

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

@@ -0,0 +1,24 @@
+/**
+ * Calendar View Store
+ * Manages calendar view mode (no persistence needed)
+ */
+
+import { create } from 'zustand';
+
+export type CalendarViewMode = 'month' | 'week' | 'day' | 'list';
+
+interface CalendarViewState {
+  readonly viewMode: CalendarViewMode;
+}
+
+interface CalendarViewActions {
+  readonly setViewMode: (mode: CalendarViewMode) => void;
+}
+
+type CalendarViewStore = CalendarViewState & CalendarViewActions;
+
+export const useCalendarView = create<CalendarViewStore>()((set) => ({
+  viewMode: 'month',
+
+  setViewMode: (mode) => set({ viewMode: mode }),
+}));

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

@@ -28,7 +28,6 @@
 
 import { useMemo, useEffect } from 'react';
 import { useCalendarStore, type CalendarViewMode } from '../../infrastructure/storage/CalendarStore';
-import { CalendarService } from '../../infrastructure/services/CalendarService';
 import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
 import type { CalendarEvent } from '../../domain/entities/CalendarEvent.entity';
 
@@ -62,7 +61,6 @@ export interface UseCalendarReturn {
     setSelectedDate: (date: Date) => void;
     goToToday: () => void;
     navigateMonth: (direction: 'prev' | 'next') => void;
-    navigateWeek: (direction: 'prev' | 'next') => void;
     setCurrentMonth: (date: Date) => void;
     setViewMode: (mode: CalendarViewMode) => void;
     getEventsForDate: (date: Date) => CalendarEvent[];
@@ -75,7 +73,7 @@ export interface UseCalendarReturn {
 /**
  * Main calendar hook
  */
-export const useCalendar = (): UseCalendarReturn => {
+export const useCalendarPresentation = (): UseCalendarReturn => {
   const store = useCalendarStore();
   const {
     events,
@@ -92,13 +90,6 @@ export const useCalendar = (): UseCalendarReturn => {
     actions.loadEvents();
   }, []);
 
-  // Generate calendar days for current month
-  const days = useMemo(() => {
-    const year = currentMonth.getFullYear();
-    const month = currentMonth.getMonth();
-    return CalendarService.getMonthDays(year, month, events);
-  }, [currentMonth, events]);
-
   // Get events for selected date
   const selectedDateEvents = useMemo(() => {
     return actions.getEventsForDate(selectedDate);
@@ -112,7 +103,7 @@ export const useCalendar = (): UseCalendarReturn => {
   }, [currentMonth, events]);
 
   return {
-    days,
+    days: store.days,
     events,
     selectedDate,
     currentMonth,
@@ -181,3 +172,8 @@ export const useCalendarEvents = () => {
     clearError,
   };
 };
+
+// Re-export for convenience
+export { useCalendar, useCalendarStore } from '../../infrastructure/storage/CalendarStore';
+export type { CalendarViewMode } from '../../infrastructure/storage/CalendarStore';
+

package/src/responsive/compute/computeDeviceInfo.ts

@@ -0,0 +1,22 @@
+/**
+ * Device Info Computation
+ */
+
+import { isSmallPhone, isTablet, isLandscape, getDeviceType, getSpacingMultiplier } from '../../device/detection';
+import type { DeviceType } from '../../device/detection';
+
+export interface ComputedDeviceInfo {
+  readonly isSmallDevice: boolean;
+  readonly isTabletDevice: boolean;
+  readonly isLandscapeDevice: boolean;
+  readonly deviceType: DeviceType;
+  readonly spacingMultiplier: number;
+}
+
+export const computeDeviceInfo = (): ComputedDeviceInfo => ({
+  isSmallDevice: isSmallPhone(),
+  isTabletDevice: isTablet(),
+  isLandscapeDevice: isLandscape(),
+  deviceType: getDeviceType(),
+  spacingMultiplier: getSpacingMultiplier(),
+});

package/src/responsive/compute/computeResponsivePositioning.ts

@@ -0,0 +1,42 @@
+/**
+ * Responsive Positioning Computation
+ */
+
+import {
+  getResponsiveHorizontalPadding,
+  getResponsiveVerticalPadding,
+  getResponsiveBottomPosition,
+  getResponsiveFABPosition,
+  getScreenLayoutConfig,
+  getResponsiveTabBarConfig,
+  getResponsiveModalLayout,
+  getResponsiveBottomSheetLayout,
+  getResponsiveDialogLayout,
+} from '../responsive';
+import type { ResponsiveModalLayout, ResponsiveBottomSheetLayout, ResponsiveDialogLayout, ResponsiveTabBarConfig, ScreenLayoutConfig } from '../responsive';
+
+export interface ComputedResponsivePositioning {
+  readonly horizontalPadding: number;
+  readonly verticalPadding: number;
+  readonly bottomPosition: number;
+  readonly fabPosition: { readonly bottom: number; readonly right: number };
+  readonly screenLayoutConfig: ScreenLayoutConfig;
+  readonly tabBarConfig: ResponsiveTabBarConfig;
+  readonly modalLayout: ResponsiveModalLayout;
+  readonly bottomSheetLayout: ResponsiveBottomSheetLayout;
+  readonly dialogLayout: ResponsiveDialogLayout;
+}
+
+export const computeResponsivePositioning = (
+  insets: { top: number; bottom: number; left: number; right: number }
+): ComputedResponsivePositioning => ({
+  horizontalPadding: getResponsiveHorizontalPadding(undefined, insets),
+  verticalPadding: getResponsiveVerticalPadding(insets),
+  bottomPosition: getResponsiveBottomPosition(undefined, insets),
+  fabPosition: getResponsiveFABPosition(insets),
+  screenLayoutConfig: getScreenLayoutConfig(insets),
+  tabBarConfig: getResponsiveTabBarConfig(insets),
+  modalLayout: getResponsiveModalLayout(),
+  bottomSheetLayout: getResponsiveBottomSheetLayout(),
+  dialogLayout: getResponsiveDialogLayout(),
+});

package/src/responsive/compute/computeResponsiveSizes.ts

@@ -0,0 +1,48 @@
+/**
+ * Responsive Sizes Computation
+ */
+
+import {
+  getResponsiveLogoSize,
+  getResponsiveInputHeight,
+  getResponsiveIconContainerSize,
+  getResponsiveMaxWidth,
+  getResponsiveModalMaxHeight,
+  getResponsiveMinModalHeight,
+  getResponsiveGridColumns,
+} from '../responsive';
+import { getMinTouchTarget } from '../platformConstants';
+import type { ComputedDeviceInfo } from './computeDeviceInfo';
+
+export interface ComputedResponsiveSizes {
+  readonly logoSize: number;
+  readonly inputHeight: number;
+  readonly iconContainerSize: number;
+  readonly maxContentWidth: number;
+  readonly minTouchTarget: number;
+  readonly modalMaxHeight: string;
+  readonly modalMinHeight: number;
+  readonly gridColumns: number;
+}
+
+export const computeResponsiveSizes = (): ComputedResponsiveSizes => ({
+  logoSize: getResponsiveLogoSize(),
+  inputHeight: getResponsiveInputHeight(),
+  iconContainerSize: getResponsiveIconContainerSize(),
+  maxContentWidth: getResponsiveMaxWidth(),
+  minTouchTarget: getMinTouchTarget(),
+  modalMaxHeight: getResponsiveModalMaxHeight(),
+  modalMinHeight: getResponsiveMinModalHeight(),
+  gridColumns: getResponsiveGridColumns(),
+});
+
+export const computeOnboardingSizes = (
+  deviceInfo: ComputedDeviceInfo
+) => ({
+  onboardingIconSize: getResponsiveIconContainerSize(64),
+  onboardingIconMarginTop: deviceInfo.spacingMultiplier * 24,
+  onboardingIconMarginBottom: deviceInfo.spacingMultiplier * 16,
+  onboardingTitleMarginBottom: deviceInfo.spacingMultiplier * 16,
+  onboardingDescriptionMarginTop: deviceInfo.spacingMultiplier * 12,
+  onboardingTextPadding: deviceInfo.spacingMultiplier * 20,
+});