@umituz/react-native-design-system 2.3.13 → 2.3.14

package/src/molecules/calendar/presentation/components/AtomicCalendar.tsx

@@ -0,0 +1,279 @@
+/**
+ * AtomicCalendar Component
+ *
+ * Generic, reusable calendar component with month view.
+ * Works with any type of events (workouts, habits, tasks, etc.)
+ *
+ * Features:
+ * - Monthly grid view (42 days = 6 weeks)
+ * - Timezone-aware via calendar service
+ * - Event indicators (colored dots)
+ * - Customizable styling
+ * - Accessible
+ * - Theme-aware
+ *
+ * Usage:
+ * ```tsx
+ * import { AtomicCalendar, useCalendar } from '@umituz/react-native-calendar';
+ *
+ * const MyScreen = () => {
+ *   const { days, selectedDate, actions } = useCalendar();
+ *
+ *   return (
+ *     <AtomicCalendar
+ *       days={days}
+ *       selectedDate={selectedDate}
+ *       onDateSelect={actions.setSelectedDate}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { useAppDesignTokens, AtomicText } from '../../../../index';
+import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
+import { CalendarService } from '../../infrastructure/services/CalendarService';
+
+/**
+ * AtomicCalendar Props
+ */
+export interface AtomicCalendarProps {
+  /**
+   * Calendar days to display (42 days for 6-week grid)
+   */
+  days: CalendarDay[];
+
+  /**
+   * Currently selected date
+   */
+  selectedDate: Date;
+
+  /**
+   * Callback when a date is selected
+   */
+  onDateSelect: (date: Date) => void;
+
+  /**
+   * Whether to show weekday headers
+   * @default true
+   */
+  showWeekdayHeaders?: boolean;
+
+  /**
+   * Maximum number of event indicators to show per day
+   * @default 3
+   */
+  maxEventIndicators?: number;
+
+  /**
+   * Custom container style
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Custom day cell style
+   */
+  dayStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Whether to show event count when exceeds max indicators
+   * @default true
+   */
+  showEventCount?: boolean;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}
+
+/**
+ * AtomicCalendar Component
+ */
+export const AtomicCalendar: React.FC<AtomicCalendarProps> = ({
+  days,
+  selectedDate,
+  onDateSelect,
+  showWeekdayHeaders = true,
+  maxEventIndicators = 3,
+  style,
+  dayStyle,
+  showEventCount = true,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Get weekday names (localized)
+  const weekdayNames = CalendarService.getWeekdayNames();
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.surface }, style]} testID={testID}>
+      {/* Weekday Headers */}
+      {showWeekdayHeaders && (
+        <View style={styles.weekdayHeader}>
+          {weekdayNames.map((day, index) => (
+            <View key={index} style={styles.weekdayCell}>
+              <AtomicText
+                type="bodySmall"
+                color="secondary"
+                style={styles.weekdayText}
+              >
+                {day}
+              </AtomicText>
+            </View>
+          ))}
+        </View>
+      )}
+
+      {/* Calendar Grid */}
+      <View style={styles.grid}>
+        {days.map((day, index) => {
+          const isSelected = CalendarService.isSameDay(day.date, selectedDate);
+          const eventCount = day.events.length;
+          const visibleEvents = day.events.slice(0, maxEventIndicators);
+          const hiddenEventCount = Math.max(0, eventCount - maxEventIndicators);
+
+          return (
+            <TouchableOpacity
+              key={index}
+              style={[
+                styles.dayCell,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : 'transparent',
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : day.isToday
+                      ? tokens.colors.primary
+                      : tokens.colors.border,
+                  borderWidth: isSelected ? 2 : day.isToday ? 2 : 1,
+                  opacity: day.isDisabled ? 0.4 : 1,
+                },
+                dayStyle,
+              ]}
+              onPress={() => !day.isDisabled && onDateSelect(day.date)}
+              disabled={day.isDisabled}
+              testID={testID ? `${testID}-day-${index}` : undefined}
+              accessibilityLabel={`${day.date.toLocaleDateString()}, ${eventCount} events`}
+              accessibilityRole="button"
+              accessibilityState={{ disabled: day.isDisabled, selected: isSelected }}
+            >
+              {/* Day Number */}
+              <AtomicText
+                type="bodyMedium"
+                color={
+                  isSelected
+                    ? 'inverse'
+                    : day.isCurrentMonth
+                      ? 'primary'
+                      : 'secondary'
+                }
+                style={[
+                  styles.dayText,
+                  day.isToday && !isSelected && { fontWeight: 'bold' },
+                ]}
+              >
+                {day.date.getDate()}
+              </AtomicText>
+
+              {/* Event Indicators */}
+              <View style={styles.eventIndicators}>
+                {/* Today indicator (if today and has no events) */}
+                {day.isToday && eventCount === 0 && (
+                  <View
+                    style={[
+                      styles.eventDot,
+                      { backgroundColor: tokens.colors.success },
+                    ]}
+                  />
+                )}
+
+                {/* Event dots */}
+                {visibleEvents.map((event, eventIndex) => (
+                  <View
+                    key={eventIndex}
+                    style={[
+                      styles.eventDot,
+                      {
+                        backgroundColor: event.color
+                          ? event.color
+                          : event.isCompleted
+                            ? tokens.colors.success
+                            : tokens.colors.primary,
+                      },
+                    ]}
+                  />
+                ))}
+
+                {/* More events count */}
+                {showEventCount && hiddenEventCount > 0 && (
+                  <AtomicText
+                    type="bodySmall"
+                    color="secondary"
+                    style={styles.moreEventsText}
+                  >
+                    +{hiddenEventCount}
+                  </AtomicText>
+                )}
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    padding: 16,
+  },
+  weekdayHeader: {
+    flexDirection: 'row',
+    marginBottom: 12,
+  },
+  weekdayCell: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  weekdayText: {
+    textAlign: 'center',
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  dayCell: {
+    width: `${100 / 7}%`,
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    marginBottom: 4,
+    padding: 4,
+  },
+  dayText: {
+    textAlign: 'center',
+  },
+  eventIndicators: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 4,
+    gap: 2,
+    flexWrap: 'wrap',
+  },
+  eventDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+  },
+  moreEventsText: {
+    fontSize: 8,
+    marginLeft: 2,
+  },
+});

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

@@ -0,0 +1,356 @@
+/**
+ * useCalendar Hook
+ *
+ * Main hook for calendar functionality.
+ * Provides calendar state, events, and actions.
+ *
+ * Usage:
+ * ```tsx
+ * const {
+ *   days,
+ *   events,
+ *   selectedDate,
+ *   viewMode,
+ *   actions
+ * } = useCalendar();
+ *
+ * // Navigate calendar
+ * actions.navigateMonth('next');
+ *
+ * // Add event
+ * actions.addEvent({
+ *   title: 'Team Meeting',
+ *   date: '2024-10-30',
+ *   time: '14:00',
+ * });
+ * ```
+ */
+
+import { useMemo, useEffect, useState, useCallback } 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,
+  SystemCalendar,
+  CalendarPermissionResult,
+} from '../../domain/entities/CalendarEvent.entity';
+
+/**
+ * Calendar hook return type
+ */
+export interface UseCalendarReturn {
+  // Calendar data
+  days: CalendarDay[];
+  events: CalendarEvent[];
+  selectedDate: Date;
+  currentMonth: Date;
+  viewMode: CalendarViewMode;
+
+  // Computed data
+  selectedDateEvents: CalendarEvent[];
+  currentMonthEvents: CalendarEvent[];
+
+  // State
+  isLoading: boolean;
+  error: string | null;
+
+  // Actions
+  actions: {
+    loadEvents: () => Promise<void>;
+    addEvent: (request: any) => Promise<void>;
+    updateEvent: (request: any) => Promise<void>;
+    deleteEvent: (id: string) => Promise<void>;
+    completeEvent: (id: string) => Promise<void>;
+    uncompleteEvent: (id: string) => Promise<void>;
+    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[];
+    getEventsForMonth: (year: number, month: number) => CalendarEvent[];
+    clearError: () => void;
+    clearAllEvents: () => Promise<void>;
+  };
+}
+
+/**
+ * Main calendar hook
+ */
+export const useCalendar = (): UseCalendarReturn => {
+  const {
+    events,
+    selectedDate,
+    currentMonth,
+    viewMode,
+    isLoading,
+    error,
+    actions,
+  } = useCalendarStore((state) => state);
+
+  // Load events on mount
+  useEffect(() => {
+    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);
+  }, [selectedDate, events]);
+
+  // Get events for current month
+  const currentMonthEvents = useMemo(() => {
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    return actions.getEventsForMonth(year, month);
+  }, [currentMonth, events]);
+
+  return {
+    days,
+    events,
+    selectedDate,
+    currentMonth,
+    viewMode,
+    selectedDateEvents,
+    currentMonthEvents,
+    isLoading,
+    error,
+    actions,
+  };
+};
+
+/**
+ * Hook for calendar navigation
+ * Lightweight hook for just navigation actions
+ */
+export const useCalendarNavigation = () => {
+  const {
+    selectedDate,
+    currentMonth,
+    actions: { setSelectedDate, navigateMonth, goToToday, setCurrentMonth },
+  } = useCalendarStore((state) => state);
+
+  return {
+    selectedDate,
+    currentMonth,
+    setSelectedDate,
+    navigateMonth,
+    goToToday,
+    setCurrentMonth,
+  };
+};
+
+/**
+ * Hook for calendar events only
+ * Lightweight hook for just event operations
+ */
+export const useCalendarEvents = () => {
+  const {
+    events,
+    isLoading,
+    error,
+    actions: {
+      loadEvents,
+      addEvent,
+      updateEvent,
+      deleteEvent,
+      completeEvent,
+      uncompleteEvent,
+      clearError,
+    },
+  } = useCalendarStore((state) => state);
+
+  return {
+    events,
+    isLoading,
+    error,
+    loadEvents,
+    addEvent,
+    updateEvent,
+    deleteEvent,
+    completeEvent,
+    uncompleteEvent,
+    clearError,
+  };
+};
+
+/**
+ * Hook for system calendar integration (expo-calendar)
+ *
+ * USAGE:
+ * ```tsx
+ * const {
+ *   systemCalendars,
+ *   permission,
+ *   requestPermission,
+ *   syncEventToCalendar,
+ *   updateSyncedEvent,
+ *   deleteSyncedEvent,
+ * } = useSystemCalendar();
+ *
+ * // Request permission
+ * const granted = await requestPermission();
+ *
+ * // Sync event to device calendar
+ * await syncEventToCalendar(event);
+ * ```
+ */
+export const useSystemCalendar = () => {
+  const [systemCalendars, setSystemCalendars] = useState<SystemCalendar[]>([]);
+  const [permission, setPermission] = useState<CalendarPermissionResult | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { actions } = useCalendarStore((state) => state);
+
+  /**
+   * Request calendar permissions
+   */
+  const requestPermission = useCallback(async (): Promise<boolean> => {
+    setIsLoading(true);
+    try {
+      const result = await CalendarService.requestPermissions();
+      setPermission(result);
+      return result.granted;
+    } catch {
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Load system calendars
+   */
+  const loadSystemCalendars = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const calendars = await CalendarService.getSystemCalendars();
+      setSystemCalendars(calendars);
+    } catch {
+      setSystemCalendars([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Sync event to system calendar
+   */
+  const syncEventToCalendar = useCallback(
+    async (event: CalendarEvent): Promise<boolean> => {
+      setIsLoading(true);
+      try {
+        const result = await CalendarService.syncToSystemCalendar(event);
+
+        if (result.success && result.eventId && result.calendarId) {
+          // Update event with system calendar info
+          await actions.updateEvent({
+            id: event.id,
+            systemCalendar: {
+              eventId: result.eventId,
+              calendarId: result.calendarId,
+              lastSyncedAt: new Date(),
+            },
+          });
+          return true;
+        }
+
+        return false;
+      } catch {
+        return false;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [actions]
+  );
+
+  /**
+   * Update synced event in system calendar
+   */
+  const updateSyncedEvent = useCallback(async (event: CalendarEvent): Promise<boolean> => {
+    if (!event.systemCalendar) return false;
+
+    setIsLoading(true);
+    try {
+      const result = await CalendarService.updateSystemCalendarEvent(event);
+
+      if (result.success) {
+        // Update last synced timestamp
+        await actions.updateEvent({
+          id: event.id,
+          systemCalendar: {
+            ...event.systemCalendar,
+            lastSyncedAt: new Date(),
+          },
+        });
+        return true;
+      }
+
+      return false;
+    } catch {
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [actions]);
+
+  /**
+   * Delete synced event from system calendar
+   */
+  const deleteSyncedEvent = useCallback(
+    async (event: CalendarEvent): Promise<boolean> => {
+      if (!event.systemCalendar) return false;
+
+      setIsLoading(true);
+      try {
+        const result = await CalendarService.removeFromSystemCalendar(
+          event.systemCalendar.eventId
+        );
+
+        if (result.success) {
+          // Remove system calendar info from event
+          await actions.updateEvent({
+            id: event.id,
+            systemCalendar: undefined,
+          });
+          return true;
+        }
+
+        return false;
+      } catch {
+        return false;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [actions]
+  );
+
+  // Load calendars when permission is granted
+  useEffect(() => {
+    if (permission?.granted) {
+      loadSystemCalendars();
+    }
+  }, [permission, loadSystemCalendars]);
+
+  return {
+    systemCalendars,
+    permission,
+    isLoading,
+    requestPermission,
+    loadSystemCalendars,
+    syncEventToCalendar,
+    updateSyncedEvent,
+    deleteSyncedEvent,
+  };
+};

package/src/molecules/index.ts

@@ -29,3 +29,6 @@ export { List, type ListProps } from './List';
 
 // Alerts
 export * from './alerts';
+
+// Calendar
+export * from './calendar';