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

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

@@ -1,153 +1,11 @@
 /**
- * Avatar Domain - Entity Definitions
- *
- * Core types and interfaces for user avatars.
- * Supports images, initials, icons with Turkish character support.
+ * Avatar Utilities
+ * Utility class for avatar operations
+ * Supports images, initials, icons with Turkish character support
  */
 
-/**
- * Avatar size preset
- */
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-
-/**
- * Avatar shape
- */
-export type AvatarShape = 'circle' | 'square' | 'rounded';
-
-/**
- * Avatar type
- */
-export type AvatarType = 'image' | 'initials' | 'icon';
-
-/**
- * Avatar configuration
- */
-export interface AvatarConfig {
-  /** Avatar type */
-  type: AvatarType;
-  /** Size preset */
-  size: AvatarSize;
-  /** Shape */
-  shape: AvatarShape;
-  /** Image URI */
-  uri?: string;
-  /** User name for initials */
-  name?: string;
-  /** Icon name (if type is icon) */
-  icon?: string;
-  /** Custom background color */
-  backgroundColor?: string;
-  /** Show status indicator */
-  showStatus?: boolean;
-  /** Status (online/offline) */
-  status?: 'online' | 'offline' | 'away' | 'busy';
-}
-
-/**
- * Size configuration
- */
-export interface SizeConfig {
-  size: number;
-  fontSize: number;
-  iconSize: number;
-  statusSize: number;
-  borderWidth: number;
-}
-
-/**
- * Avatar group configuration
- */
-export interface AvatarGroupConfig {
-  maxVisible: number;
-  spacing: number;
-  size: AvatarSize;
-  shape: AvatarShape;
-}
-
-/**
- * Size configurations (px)
- */
-export const SIZE_CONFIGS: Record<AvatarSize, SizeConfig> = {
-  xs: {
-    size: 24,
-    fontSize: 10,
-    iconSize: 12,
-    statusSize: 6,
-    borderWidth: 1,
-  },
-  sm: {
-    size: 32,
-    fontSize: 12,
-    iconSize: 16,
-    statusSize: 8,
-    borderWidth: 1.5,
-  },
-  md: {
-    size: 40,
-    fontSize: 14,
-    iconSize: 20,
-    statusSize: 10,
-    borderWidth: 2,
-  },
-  lg: {
-    size: 56,
-    fontSize: 18,
-    iconSize: 28,
-    statusSize: 12,
-    borderWidth: 2,
-  },
-  xl: {
-    size: 80,
-    fontSize: 24,
-    iconSize: 40,
-    statusSize: 16,
-    borderWidth: 2.5,
-  },
-  xxl: {
-    size: 120,
-    fontSize: 36,
-    iconSize: 60,
-    statusSize: 20,
-    borderWidth: 3,
-  },
-};
-
-/**
- * Avatar background colors
- * Vibrant, accessible colors with good contrast
- */
-export const AVATAR_COLORS = [
-  '#EF4444', // Red
-  '#F59E0B', // Orange
-  '#10B981', // Green
-  '#3B82F6', // Blue
-  '#8B5CF6', // Purple
-  '#EC4899', // Pink
-  '#14B8A6', // Teal
-  '#F97316', // Orange-Red
-  '#06B6D4', // Cyan
-  '#84CC16', // Lime
-] as const;
-
-/**
- * Status indicator colors
- */
-export const STATUS_COLORS = {
-  online: '#10B981', // Green
-  offline: '#9CA3AF', // Gray
-  away: '#F59E0B', // Orange
-  busy: '#EF4444', // Red
-} as const;
-
-/**
- * Border radius configurations
- */
-export const SHAPE_CONFIGS = {
-  circle: 9999, // Full circle
-  square: 0, // No radius
-  rounded: 8, // Rounded corners
-} as const;
+import type { AvatarSize, AvatarShape, AvatarConfig, SizeConfig } from './Avatar.types';
+import { AVATAR_COLORS, STATUS_COLORS, SHAPE_CONFIGS, SIZE_CONFIGS } from './Avatar.constants';
 
 /**
  * Avatar utility class
@@ -275,16 +133,6 @@ export class AvatarUtils {
   }
 }
 
-/**
- * Avatar constants
- */
-export const AVATAR_CONSTANTS = {
-  DEFAULT_SIZE: 'md' as AvatarSize,
-  DEFAULT_SHAPE: 'circle' as AvatarShape,
-  DEFAULT_TYPE: 'initials' as AvatarType,
-  DEFAULT_ICON: 'user',
-  MAX_GROUP_VISIBLE: 3,
-  GROUP_SPACING: -8, // Negative for overlap
-  FALLBACK_INITIALS: '?',
-} as const;
-
+// Re-export types and constants for convenience
+export type { AvatarSize, AvatarShape, AvatarType, AvatarConfig, SizeConfig } from './Avatar.types';
+export { AVATAR_COLORS, STATUS_COLORS, SHAPE_CONFIGS, SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';

package/src/molecules/calendar/index.ts

@@ -54,18 +54,13 @@ export { CalendarGeneration } from './infrastructure/services/CalendarGeneration
 export { DateUtilities } from './infrastructure/utils/DateUtilities';
 
 // Infrastructure Storage
-export {
-  useCalendarStore,
-  type CalendarViewMode,
-} from './infrastructure/storage/CalendarStore';
-
-// Presentation Hooks
 export {
   useCalendar,
-  useCalendarNavigation,
   useCalendarEvents,
-  type UseCalendarReturn,
-} from './presentation/hooks/useCalendar';
+  useCalendarNavigation,
+  useCalendarView,
+  type CalendarViewMode,
+} from './infrastructure/storage/CalendarStore';
 
 // Presentation Components
 export {

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

@@ -1,315 +1,116 @@
 /**
- * Calendar Store (Zustand)
- *
- * Global state management for calendar functionality.
- * Manages calendar view state, selected date, and events.
- *
- * Design Philosophy:
- * - Zustand for lightweight state
- * - AsyncStorage for persistence
- * - Generic event handling
- * - Timezone-aware via CalendarService
+ * Calendar Store - Combined Hook
+ * Convenience hook that combines all calendar stores
  */
 
-import { create } from 'zustand';
-import { persist, createJSONStorage } from 'zustand/middleware';
-import { storageRepository, unwrap, storageService } from '@umituz/react-native-storage';
-import type { CalendarEvent, CreateCalendarEventRequest, UpdateCalendarEventRequest } from '../../domain/entities/CalendarEvent.entity';
-import { CalendarService } from '../services/CalendarService';
+import { useMemo } from 'react';
+import { useCalendarEvents } from '../stores/useCalendarEvents';
+import { useCalendarNavigation } from '../stores/useCalendarNavigation';
+import { useCalendarView } from '../stores/useCalendarView';
+import { CalendarService } from '../../../services/CalendarService';
+import type { CalendarDay } from '../../../domain/entities/CalendarDay.entity';
 
-/**
- * Calendar view mode
- */
-export type CalendarViewMode = 'month' | 'week' | 'day' | 'list';
+// Export individual stores
+export { useCalendarEvents } from '../stores/useCalendarEvents';
+export { useCalendarNavigation } from '../stores/useCalendarNavigation';
+export { useCalendarView } from '../stores/useCalendarView';
 
-/**
- * Storage key for calendar events
- */
-const STORAGE_KEY = 'calendar_events';
+// Export types
+export type { CalendarViewMode } from '../stores/useCalendarView';
 
 /**
- * Generate unique ID for events
+ * Combined calendar hook
+ * Use this for convenience, or use individual stores for fine-grained control
  */
-const generateId = (): string => {
-  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+export const useCalendar = () => {
+  const events = useCalendarEvents();
+  const navigation = useCalendarNavigation();
+  const view = useCalendarView();
+
+  // Utility functions for backward compatibility
+  const getEventsForDate = (date: Date) => {
+    return events.events.filter(event => {
+      const eventDate = new Date(event.date);
+      return eventDate.toDateString() === date.toDateString();
+    });
+  };
+
+  const getEventsForMonth = (year: number, month: number) => {
+    return events.events.filter(event => {
+      const eventDate = new Date(event.date);
+      return eventDate.getFullYear() === year && eventDate.getMonth() === month;
+    });
+  };
+
+  return {
+    // Events state and actions
+    events: events.events,
+    isLoading: events.isLoading,
+    error: events.error,
+    loadEvents: events.loadEvents,
+    addEvent: events.addEvent,
+    updateEvent: events.updateEvent,
+    deleteEvent: events.deleteEvent,
+    completeEvent: events.completeEvent,
+    uncompleteEvent: events.uncompleteEvent,
+    clearError: events.clearError,
+    clearAllEvents: events.clearAllEvents,
+
+    // Navigation state and actions
+    selectedDate: navigation.selectedDate,
+    currentMonth: navigation.currentMonth,
+    setSelectedDate: navigation.setSelectedDate,
+    goToToday: navigation.goToToday,
+    navigateMonth: navigation.navigateMonth,
+    setCurrentMonth: navigation.setCurrentMonth,
+
+    // View state and actions
+    viewMode: view.viewMode,
+    setViewMode: view.setViewMode,
+
+    // Utility functions
+    getEventsForDate,
+    getEventsForMonth,
+  };
 };
 
 /**
- * Calendar state (data only)
- */
-interface CalendarState {
-  events: CalendarEvent[];
-  selectedDate: Date;
-  currentMonth: Date;
-  viewMode: CalendarViewMode;
-  isLoading: boolean;
-  error: string | null;
-}
-
-/**
- * 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;
-
-  // View mode
-  setViewMode: (mode: CalendarViewMode) => void;
-
-  // Utilities
-  getEventsForDate: (date: Date) => CalendarEvent[];
-  getEventsForMonth: (year: number, month: number) => CalendarEvent[];
-  clearError: () => void;
-  clearAllEvents: () => Promise<void>;
-}
-
-/**
- * Initial state
+ * Legacy alias for backward compatibility
+ * @deprecated Use useCalendar instead
  */
-const initialState: CalendarState = {
-  events: [],
-  selectedDate: new Date(),
-  currentMonth: new Date(),
-  viewMode: 'month',
-  isLoading: false,
-  error: null,
+export const useCalendarStore = () => {
+  const calendar = useCalendar();
+
+  const days = useMemo(() => {
+    const year = calendar.currentMonth.getFullYear();
+    const month = calendar.currentMonth.getMonth();
+    return CalendarService.getMonthDays(year, month, calendar.events);
+  }, [calendar.currentMonth, calendar.events]);
+
+  return {
+    events: calendar.events,
+    selectedDate: calendar.selectedDate,
+    currentMonth: calendar.currentMonth,
+    viewMode: calendar.viewMode,
+    isLoading: calendar.isLoading,
+    error: calendar.error,
+    actions: {
+      loadEvents: calendar.loadEvents,
+      addEvent: calendar.addEvent,
+      updateEvent: calendar.updateEvent,
+      deleteEvent: calendar.deleteEvent,
+      completeEvent: calendar.completeEvent,
+      uncompleteEvent: calendar.uncompleteEvent,
+      setSelectedDate: calendar.setSelectedDate,
+      goToToday: calendar.goToToday,
+      navigateMonth: calendar.navigateMonth,
+      setCurrentMonth: calendar.setCurrentMonth,
+      setViewMode: calendar.setViewMode,
+      getEventsForDate: calendar.getEventsForDate,
+      getEventsForMonth: calendar.getEventsForMonth,
+      clearError: calendar.clearError,
+      clearAllEvents: calendar.clearAllEvents,
+    },
+    days,
+  };
 };
-
-/**
- * Calendar Store
- */
-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 result = await storageRepository.getItem<CalendarEvent[]>(STORAGE_KEY, []);
-            const events = unwrap(result, []);
-            
-            if (events && events.length > 0) {
-              // Restore Date objects
-              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,
-            });
-          }
-        },
-
-        /**
-         * 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 {
-            set({
-              error: 'Failed to add 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;
-            });
-
-            await storageRepository.setItem(STORAGE_KEY, 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 storageRepository.setItem(STORAGE_KEY, events);
-            set({ events, isLoading: false });
-          } catch {
-            set({
-              error: 'Failed to delete event',
-              isLoading: false,
-            });
-          }
-        },
-
-        /**
-         * 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().actions.updateEvent({ id, isCompleted: false });
-        },
-
-        /**
-         * Set selected date
-         */
-        setSelectedDate: (date: Date) => {
-          set({ selectedDate: date });
-        },
-
-        /**
-         * 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);
-
-          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);
-
-          set({ selectedDate: newDate });
-        },
-
-        /**
-         * Set current month directly
-         */
-        setCurrentMonth: (date: Date) => {
-          set({ currentMonth: date });
-        },
-
-        /**
-         * 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 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 all events (for testing/reset)
-         */
-        clearAllEvents: async () => {
-          set({ isLoading: true, error: null });
-          try {
-            await storageRepository.removeItem(STORAGE_KEY);
-            set({ events: [], isLoading: false });
-          } catch {
-            set({
-              error: 'Failed to clear events',
-              isLoading: false,
-            });
-          }
-        },
-      },
-    }),
-    {
-      name: 'calendar-storage',
-      storage: createJSONStorage(() => storageService),
-      partialize: (state) => ({ events: state.events }),
-    }
-  )
-);