cleanhaus-calendar 1.0.1 → 1.0.2

package/README.md

@@ -212,7 +212,7 @@ function transformApiEvents(apiData: ApiEvent[]): CalendarEvent[] {
 - **Type-based Rendering**: Different styles for different event types
 - **Theme Customization**: Customizable colors and styles
 - **Cross-platform**: Works on React Native (iOS/Android) and Web (Next.js)
-- **SSR-safe**: Server-side rendering compatible
+- **SSR-safe**: Prevents hydration errors automatically
 
 ## Troubleshooting
 
@@ -225,6 +225,7 @@ function transformApiEvents(apiData: ApiEvent[]): CalendarEvent[] {
 - Use `--webpack` flag for development: `npm run dev -- --webpack`
 - Clear Next.js cache: `rm -rf .next`
 - Ensure `react-native-web` is installed
+
 - Verify the plugin is correctly applied in `next.config.ts`
 
 **Module not found errors:**

package/dist/index.d.mts

@@ -0,0 +1,547 @@
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as react_native from 'react-native';
+import { ViewStyle, PanResponderInstance } from 'react-native';
+
+/**
+ * Calendar Theme Interface
+ * Scalable theme system for calendar component
+ */
+interface CalendarTheme {
+    primary: string;
+    secondary: string;
+    service: string;
+    alert: string;
+    today: string;
+    text: string;
+    textSecondary: string;
+    background: string;
+    border: string;
+    borderLight: string;
+    statusComplete: string;
+    statusInProgress: string;
+    statusScheduled: string;
+    statusIssue: string;
+    alertError: string;
+    alertWarning: string;
+    eventBookingBg: string;
+    eventServiceBg: string;
+    eventDefaultBg: string;
+    eventBorder: string;
+    errorBoundaryBg: string;
+    errorBoundaryText: string;
+    errorBoundaryError: string;
+    errorBoundaryButtonBg: string;
+    errorBoundaryButtonText: string;
+    [key: string]: string;
+}
+/**
+ * Default Calendar Theme
+ * Internal default theme that works out of the box
+ * Uses exact color codes from CleanHaus design system
+ */
+declare const DEFAULT_THEME: CalendarTheme;
+/**
+ * Merge user theme with default theme
+ * @param userTheme - Partial theme override from props
+ * @returns Complete theme object
+ */
+declare function mergeTheme(userTheme?: Partial<CalendarTheme>): CalendarTheme;
+/**
+ * Event Rendering Configuration
+ * Defines how different event types should be rendered in the calendar
+ * Based on event TYPE, not duration
+ */
+interface EventRenderConfig {
+    opacity: number;
+    showTitle: boolean;
+    showArrow: boolean;
+    showIcon: boolean;
+    showBorder: boolean;
+    titleOnFirstWeekOnly: boolean;
+}
+/**
+ * Get rendering configuration for event based on its TYPE
+ * This determines opacity, title visibility, arrows, etc.
+ * @param event - The calendar event
+ * @returns EventRenderConfig object with rendering rules
+ */
+declare function getEventRenderingConfig(event: CalendarEvent): EventRenderConfig;
+/**
+ * Get color for calendar event based on theme and event type
+ * @param event - The calendar event
+ * @param theme - The current theme
+ * @param availableProperties - Optional array of properties for consistent coloring
+ * @param propertyColors - Optional array of property colors to cycle through
+ * @returns Color string for the event
+ */
+declare function getCalendarEventColor(event: CalendarEvent, theme: CalendarTheme, availableProperties?: Array<{
+    id: number;
+}>, propertyColors?: string[], propertyColorsDark?: string[]): string;
+/**
+ * Check if event spans multiple days (date boundaries)
+ * NOTE: This is kept for backward compatibility but rendering logic
+ * now uses TYPE-based approach via getEventRenderingConfig()
+ */
+declare function isMultiDayEvent(event: CalendarEvent): boolean;
+/**
+ * Convert hex color to rgba with opacity
+ * @param hexColor - Hex color string (e.g., "#00BCD4")
+ * @param opacity - Opacity value (0-1)
+ */
+declare function hexToRgba(hexColor: string, opacity: number): string;
+/**
+ * Get event background color with appropriate opacity
+ * @param event - The calendar event
+ * @param theme - The current theme
+ * @param availableProperties - Optional array of properties for consistent coloring
+ * @param propertyColors - Optional array of property colors to cycle through
+ * @returns Background color with opacity
+ */
+declare function getEventBackgroundColor(event: CalendarEvent, theme: CalendarTheme, availableProperties?: Array<{
+    id: number;
+}>, propertyColors?: string[], propertyColorsDark?: string[]): string;
+
+type ViewMode = "day" | "week" | "month";
+interface CalendarEvent {
+    id: string;
+    eventId: string;
+    title: string;
+    start: Date;
+    end: Date;
+    meta?: {
+        type?: "property" | "cleaning" | "service" | "otherService" | "unassigned";
+        source?: string;
+        status?: string;
+        color?: string;
+        [key: string]: any;
+    };
+}
+interface CalendarProps {
+    events: CalendarEvent[];
+    view?: ViewMode;
+    date: Date;
+    onDateChange: (date: Date) => void;
+    onEventPress: (event: CalendarEvent) => void;
+    onViewChange?: (view: ViewMode) => void;
+    onDateTimeChange?: (dateTime: Date) => void;
+    isLoading?: boolean;
+    availableProperties?: Array<{
+        id: number;
+    }>;
+    propertiesToShow?: Array<{
+        id: number;
+        name?: string;
+    }>;
+    theme?: Partial<CalendarTheme>;
+    autoScrollToNow?: boolean;
+    propertyColors?: string[];
+    propertyColorsDark?: string[];
+    showFAB?: boolean;
+    onFABPress?: () => void;
+    fabStyle?: react_native.ViewStyle;
+    renderFAB?: () => React.ReactElement | null;
+    cleaningIcon?: any;
+}
+
+declare const CustomCalendar: React__default.FC<CalendarProps>;
+
+/**
+ * MonthView-specific types
+ */
+interface MonthViewProps {
+    events: CalendarEvent[];
+    targetDate: Date;
+    containerHeight: number;
+    onPressEvent?: (event: CalendarEvent) => void;
+    onPressCell?: (date: Date) => void;
+    onShowMore?: (date: Date) => void;
+    onMonthChange?: (date: Date) => void;
+    maxVisibleRows?: number;
+    swipeEnabled?: boolean;
+    theme: CalendarTheme;
+    availableProperties?: Array<{
+        id: number;
+    }>;
+    propertyColors?: string[];
+    propertyColorsDark?: string[];
+    cleaningIcon?: any;
+}
+
+/**
+ * MonthView Component
+ *
+ * A custom month calendar view with horizontal time-positioned events.
+ * Events are positioned based on their exact start/end times within each day cell.
+ * Events with the same eventId appear in the same row across all weeks.
+ *
+ * Features:
+ * - Horizontal time positioning (exact hour/minute)
+ * - Multi-day event spanning with fractional times
+ * - Global row assignment by eventId
+ * - Configurable max visible rows
+ * - Touch handlers for events and date cells
+ * - Swipe gestures for month navigation (left = next, right = previous)
+ *
+ * @example
+ * ```tsx
+ * const [currentDate, setCurrentDate] = useState(new Date());
+ *
+ * <MonthView
+ *   events={events}
+ *   targetDate={currentDate}
+ *   containerHeight={600}
+ *   onPressEvent={(event) => console.log(event)}
+ *   onPressCell={(date) => console.log(date)}
+ *   onMonthChange={(newDate) => setCurrentDate(newDate)}
+ *   maxVisibleRows={3}
+ *   swipeEnabled={true}
+ * />
+ * ```
+ */
+declare const MonthView: React$1.FC<MonthViewProps>;
+
+interface DayViewProps {
+    events: CalendarEvent[];
+    targetDate: Date;
+    onEventPress: (event: CalendarEvent) => void;
+    theme: CalendarTheme;
+    availableProperties?: Array<{
+        id: number;
+        name?: string;
+    }>;
+    propertiesToShow?: Array<{
+        id: number;
+        name?: string;
+    }>;
+    autoScrollToNow?: boolean;
+    propertyColors?: string[];
+    propertyColorsDark?: string[];
+}
+/**
+ * DayView Component
+ *
+ * A vertical time-based calendar view with:
+ * - Always-visible 24-hour timeline on the left
+ * - Data-dependent property swim lanes with horizontal scrolling
+ * - Synchronized header and content scrolling
+ * - Protected by error boundary for robust error handling
+ */
+declare const DayView: React__default.FC<DayViewProps>;
+
+/**
+ * WeekView-specific types
+ */
+interface WeekViewProps {
+    events: CalendarEvent[];
+    targetDate: Date;
+    onEventPress: (event: CalendarEvent) => void;
+    onShowMore?: (date: Date) => void;
+    onPressCell?: (date: Date, time: Date) => void;
+    theme: CalendarTheme;
+    availableProperties?: Array<{
+        id: number;
+        name?: string;
+    }>;
+    propertyColors?: string[];
+    propertyColorsDark?: string[];
+}
+
+/**
+ * WeekView Component
+ *
+ * A compact 7-day week view with:
+ * - Time column on the left (reused from DayView)
+ * - 7 day columns with time-based event positioning
+ * - Property indicator bars at the top
+ * - Max 2 events per time slot, with "+X more" overflow
+ * - Clicking "+X more" switches to day view
+ */
+declare const WeekView: React__default.FC<WeekViewProps>;
+
+interface CalendarFABProps {
+    /**
+     * Whether the FAB should be visible
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Callback when FAB is pressed
+     */
+    onPress: () => void;
+    /**
+     * Custom icon component (optional)
+     * @default Plus icon (+)
+     */
+    icon?: React__default.ReactNode;
+    /**
+     * Theme object for colors (optional)
+     * Passed from Calendar component
+     */
+    theme?: CalendarTheme;
+    /**
+     * Additional styles for the FAB container
+     * Use this to override size, colors, position, etc.
+     */
+    style?: ViewStyle;
+    /**
+     * Test ID for testing purposes
+     */
+    testID?: string;
+}
+/**
+ * Straightforward Floating Action Button for Calendar views
+ *
+ * Works out of the box with sensible defaults.
+ * Uses theme colors when available, falls back to defaults.
+ * Use the style prop to customize size, colors, position, etc.
+ *
+ * Features:
+ * - Fully independent (uses only React Native core)
+ * - Theme-aware (uses calendar theme colors when available)
+ * - Sensible defaults (works without any props except onPress)
+ * - Single style prop for all customization
+ * - Cross-platform shadow support (iOS & Android)
+ * - Follows React Native best practices
+ */
+declare const CalendarFAB: React__default.FC<CalendarFABProps>;
+
+/**
+ * Shared date utilities for calendar components
+ * Uses dayjs for consistent, reliable date operations across all views
+ */
+declare const MINUTES_IN_DAY = 1440;
+declare const HOURS_IN_DAY = 24;
+/**
+ * Format a date to a readable string
+ * @param date - The date to format
+ * @param options - Intl.DateTimeFormatOptions
+ * @returns Formatted date string
+ */
+declare function formatDate(date: Date, options?: Intl.DateTimeFormatOptions): string;
+/**
+ * Navigate to previous/next period based on view mode
+ * Uses dayjs to avoid mutating the input date
+ * @param currentDate - Current date
+ * @param direction - Direction to navigate
+ * @param viewMode - Calendar view mode
+ * @returns New date (immutable)
+ */
+declare function navigateDate(currentDate: Date, direction: "prev" | "next", viewMode: "day" | "week" | "month"): Date;
+/**
+ * Get date label for display based on view mode
+ * @param date - The date
+ * @param viewMode - Calendar view mode
+ * @returns Formatted label string
+ */
+declare function getDateLabel(date: Date, viewMode: "day" | "week" | "month"): string;
+/**
+ * Get start of day (00:00:00.000) using dayjs
+ * @param date - The date
+ * @returns Date object at start of day
+ */
+declare function getDayStart(date: Date): Date;
+/**
+ * Get end of day (23:59:59.999) using dayjs
+ * @param date - The date
+ * @returns Date object at end of day
+ */
+declare function getDayEnd(date: Date): Date;
+/**
+ * Check if two dates are the same day
+ * @param date1 - First date
+ * @param date2 - Second date
+ * @returns True if same day
+ */
+declare function isSameDay(date1: Date, date2: Date): boolean;
+/**
+ * Check if date is today
+ * @param date - The date to check
+ * @returns True if date is today
+ */
+declare function isToday(date: Date): boolean;
+/**
+ * Format time in AM/PM or 24-hour format
+ * @param date - The date to format
+ * @param use24Hour - Use 24-hour format (default: false)
+ * @returns Formatted time string
+ */
+declare function formatTime(date: Date, use24Hour?: boolean): string;
+/**
+ * Format an hour label without minutes, matching calendar rail (e.g., 12AM, 1PM)
+ * @param hour - 0..23
+ * @param use24Hour - Use 24-hour format (default: false)
+ */
+declare function formatHourLabel(hour: number, use24Hour?: boolean): string;
+/**
+ * Format time range
+ * @param start - Start date
+ * @param end - End date
+ * @param use24Hour - Use 24-hour format (default: false)
+ * @returns Formatted time range string
+ */
+declare function formatTimeRange(start: Date, end: Date, use24Hour?: boolean): string;
+/**
+ * Get duration in minutes between two dates
+ * @param start - Start date
+ * @param end - End date
+ * @returns Duration in minutes
+ */
+declare function getDurationMinutes(start: Date, end: Date): number;
+/**
+ * Get duration in hours between two dates
+ * @param start - Start date
+ * @param end - End date
+ * @returns Duration in hours (decimal)
+ */
+declare function getDurationHours(start: Date, end: Date): number;
+/**
+ * Clamp a date to be within day boundaries
+ * Returns new date if clamping occurred, original if within bounds
+ * @param date - Date to clamp
+ * @param dayStart - Start of day boundary
+ * @param dayEnd - End of day boundary
+ * @returns Clamped date
+ */
+declare function clampToDay(date: Date, dayStart: Date, dayEnd: Date): Date;
+/**
+ * Check if an event overlaps with a specific day
+ * @param eventStart - Event start date
+ * @param eventEnd - Event end date
+ * @param targetDate - Target day to check
+ * @returns True if event overlaps with the day
+ */
+declare function eventOverlapsDay(eventStart: Date, eventEnd: Date, targetDate: Date): boolean;
+/**
+ * Set time on a date without mutating the original
+ * @param date - Base date
+ * @param hours - Hours (0-23)
+ * @param minutes - Minutes (0-59), default: 0
+ * @param seconds - Seconds (0-59), default: 0
+ * @returns New Date with specified time
+ */
+declare function setTimeOnDate(date: Date, hours: number, minutes?: number, seconds?: number): Date;
+/**
+ * Get date with time from click position in week view
+ * @param date - Base date
+ * @param yPosition - Y coordinate from touch event
+ * @returns Date with calculated time
+ */
+declare function getTimeFromPosition(date: Date, yPosition: number): Date;
+/**
+ * Get date for cell press - current time if today, start of day otherwise
+ * @param pressedDate - The date that was pressed
+ * @returns Date with appropriate time
+ */
+declare function getCellPressDateTime(pressedDate: Date): Date;
+
+/**
+ * Week and Day View utilities
+ * These functions are used for customizing react-native-big-calendar Week/Day views
+ */
+/**
+ * Get color for event based on its type
+ * Used for Week/Day view event styling
+ */
+declare function getEventColor(event: CalendarEvent, propertyColors: string[], eventTypeColors: Record<string, string>, availableProperties?: Array<{
+    id: number;
+}>): string;
+/**
+ * Calculate time-based horizontal position for events in Week/Day views
+ * Returns position as percentage of day (0-100%)
+ */
+declare function getTimeBasedPosition(startTime: Date, endTime: Date): {
+    left: number;
+    width: number;
+};
+/**
+ * Normalize event data to CalendarEvent format
+ * Handles various input formats from react-native-big-calendar
+ */
+declare function normalizeCalendarEvent(event: any): CalendarEvent;
+
+/**
+ * Property color palette - extracted for standalone package
+ * These colors cycle through properties for consistent coloring
+ * Property colors can be customized via Calendar props
+ */
+/**
+ * Default property color palette using all 7 secondary colors
+ * These colors cycle through properties: property 0 gets color 0, property 7 gets color 0 again
+ * Used consistently across calendar, filters, and headers
+ */
+declare const DEFAULT_PROPERTY_COLORS: string[];
+/**
+ * Default darker property colors for other services (Landscaper, Pool/Spa Tech, Contractors)
+ * Uses 700 shade from each color palette for darker appearance
+ * These colors correspond to DEFAULT_PROPERTY_COLORS by index
+ */
+declare const DEFAULT_PROPERTY_COLORS_DARK: string[];
+/**
+ * Legacy exports for backward compatibility
+ * @deprecated Use DEFAULT_PROPERTY_COLORS instead
+ */
+declare const PROPERTY_COLORS: string[];
+declare const PROPERTY_COLORS_DARK: string[];
+/**
+ * Get property color by index with fallback
+ * @param index - The index of the property
+ * @param colors - Optional custom color array, defaults to DEFAULT_PROPERTY_COLORS
+ * @returns The color for the property
+ */
+declare function getPropertyColor(index: number, colors?: string[]): string;
+/**
+ * Get property color by property ID from available properties list
+ * @param propertyId - The ID of the property
+ * @param availableProperties - Array of available properties
+ * @param colors - Optional custom color array, defaults to DEFAULT_PROPERTY_COLORS
+ * @returns The color for the property
+ */
+declare function getPropertyColorById(propertyId: number, availableProperties: Array<{
+    id?: number;
+    entityId?: number;
+}>, colors?: string[]): string;
+
+/**
+ * Configuration options for swipe gesture detection
+ */
+interface SwipeGestureConfig {
+    /** Minimum horizontal distance (in pixels) to trigger a swipe. Default: 50 */
+    threshold?: number;
+    /** Callback triggered when user swipes left (dx < -threshold) */
+    onSwipeLeft?: () => void;
+    /** Callback triggered when user swipes right (dx > threshold) */
+    onSwipeRight?: () => void;
+    /** Enable/disable swipe gesture detection. Default: true */
+    enabled?: boolean;
+}
+/**
+ * Custom hook for detecting horizontal swipe gestures using React Native's PanResponder.
+ *
+ * Based on react-native-big-calendar's implementation, this hook provides
+ * a simple way to add swipe-to-navigate functionality to calendar views.
+ *
+ * **Web Compatibility**: Swipe gestures are automatically disabled on web platform.
+ * Use navigation buttons or other UI controls for web users.
+ *
+ * @param config - Configuration object with swipe callbacks and options
+ * @returns PanResponderInstance to be spread onto a View component
+ *
+ * @example
+ * ```tsx
+ * const panResponder = useSwipeGesture({
+ *   onSwipeLeft: () => goToNextMonth(),
+ *   onSwipeRight: () => goToPrevMonth(),
+ *   threshold: 50,
+ * });
+ *
+ * return (
+ *   <View {...panResponder.panHandlers}>
+ *     {/* Calendar content *\/}
+ *   </View>
+ * );
+ * ```
+ */
+declare function useSwipeGesture(config: SwipeGestureConfig): PanResponderInstance;
+
+export { CustomCalendar as Calendar, type CalendarEvent, CalendarFAB, type CalendarFABProps, type CalendarProps, type CalendarTheme, DEFAULT_PROPERTY_COLORS, DEFAULT_PROPERTY_COLORS_DARK, DEFAULT_THEME, DayView, type DayViewProps, type EventRenderConfig, HOURS_IN_DAY, MINUTES_IN_DAY, MonthView, type MonthViewProps, PROPERTY_COLORS, PROPERTY_COLORS_DARK, type SwipeGestureConfig, type ViewMode, WeekView, type WeekViewProps, clampToDay, eventOverlapsDay, formatDate, formatHourLabel, formatTime, formatTimeRange, getCalendarEventColor, getCellPressDateTime, getDateLabel, getDayEnd, getDayStart, getDurationHours, getDurationMinutes, getEventBackgroundColor, getEventColor, getEventRenderingConfig, getPropertyColor, getPropertyColorById, getTimeBasedPosition, getTimeFromPosition, hexToRgba, isMultiDayEvent, isSameDay, isToday, mergeTheme, navigateDate, normalizeCalendarEvent, setTimeOnDate, useSwipeGesture };