@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/base/event-calendar/composables/useKeyboardNavigation.ts

@@ -0,0 +1,95 @@
+import { onKeyStroke } from '@vueuse/core';
+import type { ViewMode } from '../types';
+
+/**
+ * Enhanced keyboard navigation for calendar
+ */
+export function useKeyboardNavigation(currentView: Ref<ViewMode>, currentDate: Ref<Date>, isModalOpen: Ref<boolean>, navigate: (direction: 'prev' | 'next' | 'today') => void, openAddModal: () => void) {
+	const isNavigationEnabled = ref(true);
+
+	// Disable navigation when typing in inputs or when modal is open
+	const shouldSkipNavigation = (e: KeyboardEvent): boolean => {
+		return (
+			!isNavigationEnabled.value ||
+			isModalOpen.value ||
+			e.target instanceof HTMLInputElement ||
+			e.target instanceof HTMLTextAreaElement ||
+			(e.target instanceof HTMLElement && e.target.isContentEditable) ||
+			e.target instanceof HTMLSelectElement ||
+			(e.target as HTMLElement)?.getAttribute('role') === 'combobox'
+		);
+	};
+
+	// View switching shortcuts
+	onKeyStroke(['m', 'M'], (e) => {
+		if (shouldSkipNavigation(e)) return;
+		e.preventDefault();
+		currentView.value = 'month';
+	});
+
+	onKeyStroke(['w', 'W'], (e) => {
+		if (shouldSkipNavigation(e)) return;
+		e.preventDefault();
+		currentView.value = 'week';
+	});
+
+	onKeyStroke(['d', 'D'], (e) => {
+		if (shouldSkipNavigation(e)) return;
+		e.preventDefault();
+		currentView.value = 'day';
+	});
+
+	onKeyStroke(['a', 'A'], (e) => {
+		if (shouldSkipNavigation(e)) return;
+		e.preventDefault();
+		currentView.value = 'agenda';
+	});
+
+	// Navigation shortcuts
+	onKeyStroke(['ArrowLeft'], (e) => {
+		if (shouldSkipNavigation(e)) return;
+		e.preventDefault();
+		navigate('prev');
+	});
+
+	onKeyStroke(['ArrowRight'], (e) => {
+		if (shouldSkipNavigation(e)) return;
+		e.preventDefault();
+		navigate('next');
+	});
+
+	onKeyStroke(['t', 'T'], (e) => {
+		if (shouldSkipNavigation(e)) return;
+		e.preventDefault();
+		navigate('today');
+	});
+
+	// Quick add event
+	onKeyStroke(['n', 'N'], (e) => {
+		if (shouldSkipNavigation(e)) return;
+		e.preventDefault();
+		openAddModal();
+	});
+
+	// Escape to close modals (handled by individual components)
+	onKeyStroke(['Escape'], (e) => {
+		if (isModalOpen.value) {
+			e.preventDefault();
+			// This will be handled by the modal component
+		}
+	});
+
+	const enableNavigation = () => {
+		isNavigationEnabled.value = true;
+	};
+
+	const disableNavigation = () => {
+		isNavigationEnabled.value = false;
+	};
+
+	return {
+		isNavigationEnabled,
+		enableNavigation,
+		disableNavigation,
+	};
+}

package/src/runtime/components/base/event-calendar/composables/useMonitoring.ts

@@ -0,0 +1,433 @@
+interface PerformanceMetric {
+	name: string;
+	value: number;
+	timestamp: Date;
+	tags?: Record<string, string>;
+}
+
+interface ErrorMetric {
+	error: string;
+	count: number;
+	lastOccurrence: Date;
+	component?: string;
+	userAgent?: string;
+}
+
+interface MonitoringConfig {
+	enablePerformanceTracking: boolean;
+	enableErrorTracking: boolean;
+	enableUserInteractionTracking: boolean;
+	sampleRate: number;
+	maxMetrics: number;
+	reportingInterval: number;
+}
+
+const defaultMonitoringConfig: MonitoringConfig = {
+	enablePerformanceTracking: true,
+	enableErrorTracking: true,
+	enableUserInteractionTracking: true,
+	sampleRate: 0.1, // 10% sampling
+	maxMetrics: 1000,
+	reportingInterval: 30000, // 30 seconds
+};
+
+/**
+ * Production monitoring and analytics
+ */
+export function useMonitoring(config?: Partial<MonitoringConfig>) {
+	const finalConfig = { ...defaultMonitoringConfig, ...config };
+	const metrics = ref<PerformanceMetric[]>([]);
+	const errors = ref<Map<string, ErrorMetric>>(new Map());
+	const isInitialized = ref(false);
+	const sessionId = ref('');
+
+	let reportingTimer: ReturnType<typeof setInterval> | null = null;
+
+	// Core Web Vitals tracking
+	const trackWebVitals = (): void => {
+		if (!finalConfig.enablePerformanceTracking || globalThis.window === undefined) return;
+
+		// Largest Contentful Paint
+		if ('PerformanceObserver' in globalThis) {
+			try {
+				const observer = new PerformanceObserver((list) => {
+					const entries = list.getEntries();
+					const lastEntry = entries.at(-1);
+
+					if (lastEntry) {
+						recordMetric({
+							name: 'web_vitals_lcp',
+							value: lastEntry.startTime,
+							timestamp: new Date(),
+							tags: { type: 'core_web_vital' },
+						});
+					}
+				});
+				observer.observe({ entryTypes: ['largest-contentful-paint'] });
+			} catch (error) {
+				console.warn('LCP observer not supported:', error);
+			}
+
+			// First Input Delay
+			try {
+				const observer = new PerformanceObserver((list) => {
+					const entries = list.getEntries();
+					entries.forEach((entry: any) => {
+						recordMetric({
+							name: 'web_vitals_fid',
+							value: entry.processingStart - entry.startTime,
+							timestamp: new Date(),
+							tags: { type: 'core_web_vital' },
+						});
+					});
+				});
+				observer.observe({ entryTypes: ['first-input'] });
+			} catch (error) {
+				console.warn('FID observer not supported:', error);
+			}
+
+			// Cumulative Layout Shift
+			try {
+				let clsValue = 0;
+				const observer = new PerformanceObserver((list) => {
+					const entries = list.getEntries();
+					entries.forEach((entry: any) => {
+						if (!entry.hadRecentInput) {
+							clsValue += entry.value;
+						}
+					});
+
+					recordMetric({
+						name: 'web_vitals_cls',
+						value: clsValue,
+						timestamp: new Date(),
+						tags: { type: 'core_web_vital' },
+					});
+				});
+				observer.observe({ entryTypes: ['layout-shift'] });
+			} catch (error) {
+				console.warn('CLS observer not supported:', error);
+			}
+		}
+	};
+
+	// Custom performance tracking
+	const trackPageLoad = (): void => {
+		if (!finalConfig.enablePerformanceTracking || globalThis.window === undefined) return;
+
+		window.addEventListener('load', () => {
+			const navigationTiming = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+
+			if (navigationTiming) {
+				// Page load time
+				recordMetric({
+					name: 'page_load_time',
+					value: navigationTiming.loadEventEnd - navigationTiming.fetchStart,
+					timestamp: new Date(),
+					tags: { type: 'performance' },
+				});
+
+				// DNS lookup time
+				recordMetric({
+					name: 'dns_lookup_time',
+					value: navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart,
+					timestamp: new Date(),
+					tags: { type: 'performance' },
+				});
+
+				// Server response time
+				recordMetric({
+					name: 'server_response_time',
+					value: navigationTiming.responseEnd - navigationTiming.fetchStart,
+					timestamp: new Date(),
+					tags: { type: 'performance' },
+				});
+
+				// DOM processing time
+				recordMetric({
+					name: 'dom_processing_time',
+					value: navigationTiming.domInteractive - navigationTiming.domContentLoadedEventStart,
+					timestamp: new Date(),
+					tags: { type: 'performance' },
+				});
+
+				// Time to Interactive (approximation)
+				recordMetric({
+					name: 'time_to_interactive',
+					value: navigationTiming.loadEventEnd,
+					timestamp: new Date(),
+					tags: { type: 'performance' },
+				});
+			}
+		});
+	};
+
+	// Resource performance tracking
+	const trackResourcePerformance = (): void => {
+		if (!finalConfig.enablePerformanceTracking || globalThis.window === undefined) return;
+
+		if ('PerformanceObserver' in globalThis) {
+			try {
+				const observer = new PerformanceObserver((list) => {
+					const entries = list.getEntries();
+					entries.forEach((entry) => {
+						if (entry.duration > 1000) {
+							// Only track slow resources
+							recordMetric({
+								name: 'slow_resource_load',
+								value: entry.duration,
+								timestamp: new Date(),
+								tags: {
+									type: 'resource_performance',
+									resource: entry.name,
+									resource_type: (entry as any).initiatorType,
+								},
+							});
+						}
+					});
+				});
+				observer.observe({ entryTypes: ['resource'] });
+			} catch (error) {
+				console.warn('Resource observer not supported:', error);
+			}
+		}
+	};
+
+	// User interaction tracking
+	const trackUserInteractions = (): void => {
+		if (!finalConfig.enableUserInteractionTracking || globalThis.window === undefined) return;
+
+		const interactionEvents = ['click', 'scroll', 'keydown'];
+
+		interactionEvents.forEach((eventType) => {
+			document.addEventListener(
+				eventType,
+				() => {
+					if (Math.random() > finalConfig.sampleRate) return; // Sampling
+
+					recordMetric({
+						name: `user_interaction_${eventType}`,
+						value: 1,
+						timestamp: new Date(),
+						tags: { type: 'user_interaction' },
+					});
+				},
+				{ passive: true }
+			);
+		});
+
+		// Track session duration
+		const sessionStart = Date.now();
+		window.addEventListener('beforeunload', () => {
+			recordMetric({
+				name: 'session_duration',
+				value: Date.now() - sessionStart,
+				timestamp: new Date(),
+				tags: { type: 'user_behavior' },
+			});
+		});
+	};
+
+	// Error tracking
+	const trackErrors = (): void => {
+		if (!finalConfig.enableErrorTracking || globalThis.window === undefined) return;
+
+		// JavaScript errors
+		globalThis.addEventListener('error', (event) => {
+			recordError({
+				error: event.error?.message || event.message,
+				component: 'global',
+				userAgent: navigator.userAgent,
+				additional: {
+					filename: event.filename,
+					lineno: event.lineno,
+					colno: event.colno,
+					stack: event.error?.stack,
+				},
+			});
+		});
+
+		// Promise rejections
+		globalThis.addEventListener('unhandledrejection', (event) => {
+			recordError({
+				error: event.reason?.message || 'Unhandled Promise Rejection',
+				component: 'global',
+				userAgent: navigator.userAgent,
+				additional: {
+					reason: event.reason,
+				},
+			});
+		});
+	};
+
+	// Calendar-specific performance tracking
+	const trackCalendarPerformance = (operation: string, duration: number, metadata?: Record<string, any>): void => {
+		recordMetric({
+			name: `calendar_${operation}_duration`,
+			value: duration,
+			timestamp: new Date(),
+			tags: {
+				type: 'calendar_performance',
+				operation,
+				...metadata,
+			},
+		});
+	};
+
+	const recordMetric = (metric: PerformanceMetric): void => {
+		if (metrics.value.length >= finalConfig.maxMetrics) {
+			// Remove oldest metrics
+			metrics.value.splice(0, Math.floor(finalConfig.maxMetrics * 0.1));
+		}
+
+		metrics.value.push(metric);
+	};
+
+	const recordError = (errorData: { error: string; component?: string; userAgent?: string; additional?: any }): void => {
+		const errorKey = `${errorData.error}_${errorData.component}`;
+		const existing = errors.value.get(errorKey);
+
+		if (existing) {
+			existing.count++;
+			existing.lastOccurrence = new Date();
+		} else {
+			errors.value.set(errorKey, {
+				error: errorData.error,
+				count: 1,
+				lastOccurrence: new Date(),
+				component: errorData.component,
+				userAgent: errorData.userAgent,
+			});
+		}
+	};
+
+	// Performance measurement utilities
+	const measureOperation = async <T>(operationName: string, operation: () => Promise<T> | T, metadata?: Record<string, any>): Promise<T> => {
+		const startTime = performance.now();
+
+		try {
+			const result = await operation();
+			const duration = performance.now() - startTime;
+
+			trackCalendarPerformance(operationName, duration, metadata);
+
+			return result;
+		} catch (error) {
+			const duration = performance.now() - startTime;
+
+			trackCalendarPerformance(`${operationName}_error`, duration, metadata);
+			recordError({
+				error: error instanceof Error ? error.message : 'Unknown error',
+				component: operationName,
+			});
+
+			throw error;
+		}
+	};
+
+	// Reporting
+	const generateReport = (): {
+		session: string;
+		timestamp: Date;
+		metrics: PerformanceMetric[];
+		errors: ErrorMetric[];
+		summary: {
+			totalMetrics: number;
+			totalErrors: number;
+			averagePageLoadTime: number;
+			errorRate: number;
+		};
+	} => {
+		const pageLoadMetrics = metrics.value.filter((m) => m.name === 'page_load_time');
+		const averagePageLoadTime = pageLoadMetrics.length > 0 ? pageLoadMetrics.reduce((sum, m) => sum + m.value, 0) / pageLoadMetrics.length : 0;
+
+		const totalErrors = Array.from(errors.value.values()).reduce((sum, e) => sum + e.count, 0);
+		const errorRate = metrics.value.length > 0 ? (totalErrors / metrics.value.length) * 100 : 0;
+
+		return {
+			session: sessionId.value,
+			timestamp: new Date(),
+			metrics: [...metrics.value],
+			errors: Array.from(errors.value.values()),
+			summary: {
+				totalMetrics: metrics.value.length,
+				totalErrors,
+				averagePageLoadTime,
+				errorRate,
+			},
+		};
+	};
+
+	const startReporting = (): void => {
+		if (reportingTimer || globalThis.window === undefined) return;
+
+		reportingTimer = setInterval(async () => {
+			if (metrics.value.length === 0 && errors.value.size === 0) return;
+
+			generateReport();
+
+			// Clear metrics after sending
+			metrics.value = [];
+			errors.value.clear();
+		}, finalConfig.reportingInterval);
+	};
+
+	const stopReporting = (): void => {
+		if (reportingTimer) {
+			clearInterval(reportingTimer);
+			reportingTimer = null;
+		}
+	};
+
+	// Utility functions
+	const generateSessionId = (): string => {
+		return `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+	};
+
+	// Initialize monitoring
+	const initialize = (): void => {
+		if (isInitialized.value || globalThis.window === undefined) return;
+
+		sessionId.value = generateSessionId();
+		trackWebVitals();
+		trackPageLoad();
+		trackResourcePerformance();
+		trackUserInteractions();
+		trackErrors();
+		startReporting();
+
+		isInitialized.value = true;
+	};
+
+	const cleanup = (): void => {
+		stopReporting();
+		isInitialized.value = false;
+	};
+
+	onMounted(() => {
+		// Delay initialization to avoid affecting page load performance
+		setTimeout(initialize, 1000);
+	});
+
+	return {
+		// State
+		metrics: readonly(metrics),
+		errors: readonly(errors),
+		isInitialized: readonly(isInitialized),
+		sessionId: readonly(sessionId),
+
+		// Tracking methods
+		trackCalendarPerformance,
+		measureOperation,
+		recordError,
+
+		// Reporting
+		generateReport,
+
+		// Control
+		initialize,
+		cleanup,
+		startReporting,
+		stopReporting,
+	};
+}

package/src/runtime/components/base/event-calendar/composables/useMultiDayLayout.ts

@@ -0,0 +1,131 @@
+import type { CalendarEvent, MonthViewDay } from '../types';
+
+export interface LayoutEvent extends CalendarEvent {
+	layoutLane: number;
+	layoutStart: string; // YYYY-MM-DD format
+	layoutEnd: string; // YYYY-MM-DD format
+	layoutSpan: number; // Number of days
+}
+
+export function useMultiDayLayout(days: ComputedRef<MonthViewDay[]>) {
+	const processEventsWithLayout = computed(() => {
+		const daysWithLayout = days.value.map((day) => ({ ...day, events: [] as LayoutEvent[] }));
+		const allEvents: CalendarEvent[] = [];
+
+		// Collect all events
+		days.value.forEach((day) => {
+			allEvents.push(...day.events);
+		});
+
+		// Remove duplicates (same event appearing on multiple days)
+		const uniqueEvents = allEvents.filter((event, index, self) => index === self.findIndex((e) => e.id === event.id));
+
+		// Sort events by start date, then by duration (longer events first)
+		const sortedEvents = uniqueEvents.toSorted((a, b) => {
+			const startDiff = new Date(a.startDate).getTime() - new Date(b.startDate).getTime();
+			if (startDiff !== 0) return startDiff;
+
+			const durationA = new Date(a.endDate).getTime() - new Date(a.startDate).getTime();
+			const durationB = new Date(b.endDate).getTime() - new Date(b.startDate).getTime();
+			return durationB - durationA; // Longer events first
+		});
+
+		// Track which lanes are occupied for each day
+		const dayLaneOccupancy: Record<string, Set<number>> = {};
+		days.value.forEach((day) => {
+			dayLaneOccupancy[formatDateTime(day.date, 'yyyy-MM-dd')] = new Set();
+		});
+
+		// Assign lanes to events
+		const layoutEvents: LayoutEvent[] = sortedEvents
+			.map((event) => {
+				const eventStart = startOfDay(new Date(event.startDate));
+				const eventEnd = endOfDay(new Date(event.endDate));
+
+				// Find all days this event spans within the current month view
+				const eventDays = days.value.filter((day) => isWithinInterval(day.date, { start: eventStart, end: eventEnd }));
+
+				if (eventDays.length === 0) return null;
+
+				// Find the lowest available lane across all days this event spans
+				let lane = 0;
+				while (true) {
+					const isLaneAvailable = eventDays.every((day) => {
+						const dayKey = formatDateTime(day.date, 'yyyy-MM-dd');
+						return !(dayLaneOccupancy[dayKey] ?? new Set()).has(lane);
+					});
+
+					if (isLaneAvailable) break;
+					lane++;
+				}
+
+				// Mark this lane as occupied for all days
+				eventDays.forEach((day) => {
+					const dayKey = formatDateTime(day.date, 'yyyy-MM-dd');
+					dayLaneOccupancy[dayKey] ??= new Set();
+					dayLaneOccupancy[dayKey].add(lane);
+				});
+
+				const layoutStart = formatDateTime(eventDays[0]!.date, 'yyyy-MM-dd');
+				const layoutEnd = formatDateTime(eventDays.at(-1)!.date, 'yyyy-MM-dd');
+
+				return {
+					...event,
+					layoutLane: lane,
+					layoutStart,
+					layoutEnd,
+					layoutSpan: eventDays.length,
+				} as LayoutEvent;
+			})
+			.filter(Boolean) as LayoutEvent[];
+
+		// Assign events to their respective days
+		layoutEvents.forEach((event) => {
+			const eventStart = startOfDay(new Date(event.startDate));
+			const eventEnd = endOfDay(new Date(event.endDate));
+
+			daysWithLayout.forEach((day) => {
+				if (isWithinInterval(day.date, { start: eventStart, end: eventEnd })) {
+					day.events.push(event);
+				}
+			});
+		});
+
+		return daysWithLayout;
+	});
+
+	const getEventPosition = (event: LayoutEvent, date: Date) => {
+		const dayKey = formatDateTime(date, 'yyyy-MM-dd');
+		const isStart = dayKey === event.layoutStart;
+		const isEnd = dayKey === event.layoutEnd;
+		const isMiddle = !isStart && !isEnd;
+
+		return {
+			isStart,
+			isEnd,
+			isMiddle,
+			lane: event.layoutLane,
+			span: event.layoutSpan,
+		};
+	};
+
+	const getMaxLanes = computed(() => {
+		let maxLanes = 0;
+		const dayLanes: Record<string, number> = {};
+
+		processEventsWithLayout.value.forEach((day) => {
+			const lanes = new Set();
+			day.events.forEach((event) => lanes.add(event.layoutLane));
+			dayLanes[formatDateTime(day.date, 'yyyy-MM-dd')] = lanes.size;
+			maxLanes = Math.max(maxLanes, lanes.size);
+		});
+
+		return { maxLanes, dayLanes };
+	});
+
+	return {
+		processEventsWithLayout,
+		getEventPosition,
+		getMaxLanes,
+	};
+}