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

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/celebration/domain/entities/CelebrationConfig.ts

@@ -0,0 +1,17 @@
+/**
+ * Celebration Config Entity
+ * Single Responsibility: Define celebration configuration types
+ */
+
+export interface CelebrationAction {
+  label: string;
+  onPress: () => void;
+}
+
+export interface CelebrationConfig {
+  title: string;
+  message: string;
+  primaryAction?: CelebrationAction;
+  secondaryAction?: CelebrationAction;
+}
+

package/src/molecules/celebration/domain/entities/FireworksConfig.ts

@@ -0,0 +1,32 @@
+/**
+ * Fireworks Config Entity
+ * Single Responsibility: Define fireworks configuration types and constants
+ */
+
+import type { FireworksConfig as AnimationFireworksConfig } from "../../../animation";
+
+export interface ThemeColors {
+  primary?: string;
+  success?: string;
+  warning?: string;
+}
+
+export interface CelebrationFireworksConfig extends Omit<AnimationFireworksConfig, 'colors'> {
+  colors: string[];
+}
+
+export const DEFAULT_FIREWORKS_COLORS = [
+  "#FF6B6B",
+  "#4ECDC4",
+  "#FFE66D",
+  "#A8E6CF",
+  "#95E1D3",
+  "#F38181",
+  "#AA96DA",
+] as const;
+
+export const DEFAULT_FIREWORKS_CONFIG: Required<Pick<CelebrationFireworksConfig, "particleCount" | "duration">> = {
+  particleCount: 80,
+  duration: 2000,
+} as const;
+

package/src/molecules/celebration/index.ts

@@ -0,0 +1,93 @@
+/**
+ * @umituz/react-native-celebration - Public API
+ *
+ * Celebration animations and effects for React Native applications.
+ * Built on top of ../../../animation for consistent animations.
+ *
+ * Features:
+ * - Celebration modals with fireworks
+ * - Configurable animations
+ * - Theme integration
+ * - State management
+ *
+ * Usage:
+ * ```typescript
+ * import { useCelebrationState, CelebrationModal, Animated } from '@umituz/react-native-celebration';
+ *
+ * const MyCelebration = () => {
+ *   const { visible, show, hide, config } = useCelebrationState();
+ *
+ *   return (
+ *     <CelebrationModal
+ *       visible={visible}
+ *       config={config!}
+ *       onClose={hide}
+ *       themeColors={{ primary: '#007AFF', success: '#34C759' }}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+
+
+
+// =============================================================================
+// DOMAIN LAYER - Entities
+// =============================================================================
+
+export type {
+  CelebrationConfig,
+  CelebrationAction,
+} from "./domain/entities/CelebrationConfig";
+
+export type {
+  ThemeColors,
+  CelebrationFireworksConfig,
+} from "./domain/entities/FireworksConfig";
+
+export {
+  DEFAULT_FIREWORKS_COLORS,
+  DEFAULT_FIREWORKS_CONFIG,
+} from "./domain/entities/FireworksConfig";
+
+// =============================================================================
+// INFRASTRUCTURE LAYER - Services
+// =============================================================================
+
+export { FireworksConfigService } from "./infrastructure/services/FireworksConfigService";
+
+
+
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export { useCelebrationState } from "./presentation/hooks/useCelebrationState";
+export type { UseCelebrationStateReturn } from "./presentation/hooks/useCelebrationState";
+
+export { useCelebrationModalAnimation } from "./presentation/hooks/useCelebrationModalAnimation";
+export type { UseCelebrationModalAnimationReturn } from "./presentation/hooks/useCelebrationModalAnimation";
+
+
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export { CelebrationModal } from "./presentation/components/CelebrationModal";
+export type { CelebrationModalProps } from "./presentation/components/CelebrationModal";
+
+export { CelebrationModalContent } from "./presentation/components/CelebrationModalContent";
+export type { CelebrationModalContentProps } from "./presentation/components/CelebrationModalContent";
+
+export { CelebrationFireworksOverlay } from "./presentation/components/CelebrationFireworksOverlay";
+export type { CelebrationFireworksOverlayProps } from "./presentation/components/CelebrationFireworksOverlay";
+
+// =============================================================================
+// PRESENTATION LAYER - Styles
+// =============================================================================
+
+export { createCelebrationModalStyles } from "./presentation/styles/CelebrationModalStyles";
+
+
+

package/src/molecules/celebration/infrastructure/services/FireworksConfigService.ts

@@ -0,0 +1,49 @@
+/**
+ * Fireworks Config Service
+ * Single Responsibility: Build fireworks configuration from theme colors
+ */
+
+import type {
+  ThemeColors,
+  CelebrationFireworksConfig,
+} from "../../domain/entities/FireworksConfig";
+import {
+  DEFAULT_FIREWORKS_COLORS,
+  DEFAULT_FIREWORKS_CONFIG,
+} from "../../domain/entities/FireworksConfig";
+
+export class FireworksConfigService {
+  /**
+   * Build fireworks configuration with theme colors
+   * Gracefully handles missing theme colors
+   */
+  static build(
+    themeColors?: ThemeColors,
+    customConfig?: Partial<CelebrationFireworksConfig>,
+  ): CelebrationFireworksConfig {
+    const colors: string[] = [];
+
+    // Add theme colors if available
+    if (themeColors?.primary) {
+      colors.push(themeColors.primary);
+    }
+    if (themeColors?.success) {
+      colors.push(themeColors.success);
+    }
+    if (themeColors?.warning) {
+      colors.push(themeColors.warning);
+    }
+
+    // Add default colors
+    colors.push(...DEFAULT_FIREWORKS_COLORS);
+
+    return {
+      particleCount: customConfig?.particleCount ?? DEFAULT_FIREWORKS_CONFIG.particleCount,
+      duration: customConfig?.duration ?? DEFAULT_FIREWORKS_CONFIG.duration,
+      colors: customConfig?.colors ?? colors,
+      particleSize: customConfig?.particleSize,
+      spread: customConfig?.spread,
+    };
+  }
+}
+

package/src/molecules/celebration/presentation/components/CelebrationFireworksOverlay.tsx

@@ -0,0 +1,33 @@
+/**
+ * Celebration Fireworks Overlay
+ * Renders fireworks effect as an overlay
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { Fireworks } from "../../../animation";
+import type { FireworksConfig } from "../../../animation";
+
+export interface CelebrationFireworksOverlayProps {
+    visible: boolean;
+    config: FireworksConfig;
+}
+
+export const CelebrationFireworksOverlay: React.FC<CelebrationFireworksOverlayProps> = ({
+    visible,
+    config,
+}) => {
+    if (!visible) return null;
+
+    return (
+        <View style={StyleSheet.absoluteFill} pointerEvents="none">
+            <Fireworks
+                autoTrigger
+                triggerX={0.5}
+                triggerY={0.5}
+                {...config}
+                style={StyleSheet.absoluteFill}
+            />
+        </View>
+    );
+};

package/src/molecules/celebration/presentation/components/CelebrationModal.tsx

@@ -0,0 +1,78 @@
+/**
+ * Celebration Modal Component
+ * Displays celebration modal with animations using BaseModal
+ */
+
+import React from "react";
+import { Animated } from "../../../animation";
+import { BaseModal } from "../../../BaseModal";
+import { useCelebrationModalAnimation } from "../hooks/useCelebrationModalAnimation";
+import { FireworksConfigService } from "../../infrastructure/services/FireworksConfigService";
+import { CelebrationModalContent } from "./CelebrationModalContent";
+import { CelebrationFireworksOverlay } from "./CelebrationFireworksOverlay";
+import type { CelebrationConfig } from "../../domain/entities/CelebrationConfig";
+import type { ThemeColors } from "../../domain/entities/FireworksConfig";
+import type {
+  ModalAnimationConfig,
+  IconAnimationConfig,
+} from "../../../animation";
+
+export interface CelebrationModalProps {
+  visible: boolean;
+  config: CelebrationConfig;
+  onClose: () => void;
+  themeColors?: ThemeColors;
+  fireworksConfig?: Partial<import("../../../animation").FireworksConfig>;
+  animationConfig?: {
+    modal?: ModalAnimationConfig;
+    icon?: IconAnimationConfig;
+  };
+  renderContent?: (props: {
+    config: CelebrationConfig;
+    onClose: () => void;
+    iconStyle: ReturnType<typeof useCelebrationModalAnimation>["iconStyle"];
+    modalStyle: ReturnType<typeof useCelebrationModalAnimation>["modalStyle"];
+  }) => React.ReactNode;
+}
+
+export const CelebrationModal: React.FC<CelebrationModalProps> = ({
+  visible,
+  config,
+  onClose,
+  themeColors,
+  fireworksConfig,
+  animationConfig,
+  renderContent,
+}) => {
+  const { isReady, iconStyle, modalStyle } =
+    useCelebrationModalAnimation(visible, animationConfig);
+
+  const fireworks = FireworksConfigService.build(themeColors, fireworksConfig);
+
+  return (
+    <>
+      <CelebrationFireworksOverlay visible={visible} config={fireworks} />
+
+      <BaseModal
+        visible={visible && isReady}
+        onClose={onClose}
+        dismissOnBackdrop={true}
+        testID="celebration-modal"
+      >
+        <Animated.View style={modalStyle}>
+          {renderContent ? (
+            renderContent({ config, onClose, iconStyle, modalStyle })
+          ) : themeColors ? (
+            <CelebrationModalContent
+              config={config}
+              onClose={onClose}
+              themeColors={themeColors}
+              iconStyle={iconStyle}
+              modalStyle={modalStyle}
+            />
+          ) : null}
+        </Animated.View>
+      </BaseModal>
+    </>
+  );
+};