@classytic/fluid 0.2.1 → 0.3.2

package/dist/client/calendar.mjs

@@ -0,0 +1,202 @@
+"use client";
+
+import { t as cn } from "../utils-DQ5SCVoW.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { addMonths, eachDayOfInterval, endOfMonth, format, getDay, isSameDay, isSameMonth, startOfMonth, subMonths } from "date-fns";
+
+//#region src/components/event-calendar.tsx
+const WEEKDAYS = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+/**
+* EventCalendar - A reusable calendar component for displaying events
+*
+* Can be used for attendance tracking, scheduling, etc.
+*/
+function EventCalendar({ events = [], selectedDate: controlledSelectedDate, onDateSelect, onMonthChange, initialMonth = /* @__PURE__ */ new Date(), renderDayContent, renderEventIndicators, getEventsForDate, className, headerLeft, headerRight, minCellHeight = "5rem", showWeekNumbers = false, isLoading = false }) {
+	const [currentMonth, setCurrentMonth] = useState(initialMonth);
+	const [internalSelectedDate, setInternalSelectedDate] = useState(null);
+	const selectedDate = controlledSelectedDate ?? internalSelectedDate;
+	const { days, paddingDaysBefore, paddingDaysAfter } = useMemo(() => {
+		const monthStart = startOfMonth(currentMonth);
+		const daysInMonth = eachDayOfInterval({
+			start: monthStart,
+			end: endOfMonth(currentMonth)
+		});
+		const startDayOfWeek = getDay(monthStart);
+		return {
+			days: daysInMonth,
+			paddingDaysBefore: startDayOfWeek,
+			paddingDaysAfter: 42 - (startDayOfWeek + daysInMonth.length)
+		};
+	}, [currentMonth]);
+	const defaultGetEventsForDate = useCallback((date, allEvents) => {
+		return allEvents.filter((event) => {
+			return isSameDay(typeof event.date === "string" ? new Date(event.date) : event.date, date);
+		});
+	}, []);
+	const getEvents = getEventsForDate || defaultGetEventsForDate;
+	const handlePrevMonth = useCallback(() => {
+		const newMonth = subMonths(currentMonth, 1);
+		setCurrentMonth(newMonth);
+		onMonthChange?.(newMonth);
+	}, [currentMonth, onMonthChange]);
+	const handleNextMonth = useCallback(() => {
+		const newMonth = addMonths(currentMonth, 1);
+		setCurrentMonth(newMonth);
+		onMonthChange?.(newMonth);
+	}, [currentMonth, onMonthChange]);
+	const handleDateClick = useCallback((date) => {
+		const dayEvents = getEvents(date, events);
+		setInternalSelectedDate(date);
+		onDateSelect?.(date, dayEvents);
+	}, [
+		events,
+		getEvents,
+		onDateSelect
+	]);
+	const defaultRenderEventIndicators = useCallback((dayEvents) => {
+		if (dayEvents.length === 0) return null;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-0.5 mt-1",
+			children: [dayEvents.slice(0, 3).map((_, idx) => /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-primary" }, idx)), dayEvents.length > 3 && /* @__PURE__ */ jsxs("span", {
+				className: "text-[10px] text-muted-foreground ml-0.5",
+				children: ["+", dayEvents.length - 3]
+			})]
+		});
+	}, []);
+	const renderIndicators = renderEventIndicators || defaultRenderEventIndicators;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-4",
+				children: [headerLeft, /* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold",
+					children: format(currentMonth, "MMMM yyyy")
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [headerRight, /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-1",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "icon",
+						onClick: handlePrevMonth,
+						disabled: isLoading,
+						children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "icon",
+						onClick: handleNextMonth,
+						disabled: isLoading,
+						children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+					})]
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "rounded-lg border overflow-hidden",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("grid bg-muted/50", showWeekNumbers ? "grid-cols-8" : "grid-cols-7"),
+				children: [showWeekNumbers && /* @__PURE__ */ jsx("div", {
+					className: "px-2 py-3 text-center text-xs font-medium text-muted-foreground border-r",
+					children: "Wk"
+				}), WEEKDAYS.map((day) => /* @__PURE__ */ jsx("div", {
+					className: "px-2 py-3 text-center text-xs font-medium text-muted-foreground",
+					children: day
+				}, day))]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cn("grid gap-px bg-border", showWeekNumbers ? "grid-cols-8" : "grid-cols-7"),
+				children: [
+					Array.from({ length: paddingDaysBefore }).map((_, index) => /* @__PURE__ */ jsx("div", {
+						className: "bg-card",
+						style: { minHeight: minCellHeight }
+					}, `padding-start-${index}`)),
+					days.map((day) => {
+						const dayEvents = getEvents(day, events);
+						const isToday = isSameDay(day, /* @__PURE__ */ new Date());
+						const isSelected = selectedDate ? isSameDay(day, selectedDate) : false;
+						const isCurrentMonth = isSameMonth(day, currentMonth);
+						return /* @__PURE__ */ jsx("div", {
+							className: cn("bg-card p-2 cursor-pointer transition-colors hover:bg-muted/50", isSelected && "ring-2 ring-primary ring-inset bg-primary/5", !isCurrentMonth && "opacity-50", isLoading && "pointer-events-none opacity-50"),
+							style: { minHeight: minCellHeight },
+							onClick: () => handleDateClick(day),
+							children: renderDayContent ? renderDayContent(day, dayEvents, isSelected) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+								className: cn("flex h-7 w-7 items-center justify-center rounded-full text-sm", isToday && "bg-primary text-primary-foreground font-semibold"),
+								children: format(day, "d")
+							}), renderIndicators(dayEvents)] })
+						}, day.toISOString());
+					}),
+					Array.from({ length: paddingDaysAfter }).map((_, index) => /* @__PURE__ */ jsx("div", {
+						className: "bg-card",
+						style: { minHeight: minCellHeight }
+					}, `padding-end-${index}`))
+				]
+			})]
+		})]
+	});
+}
+function CalendarDayDetail({ date, title, emptyMessage = "Click on a day to see details", children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-lg border bg-card", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "p-4 border-b",
+			children: /* @__PURE__ */ jsx("h3", {
+				className: "font-semibold",
+				children: date ? format(date, "EEEE, MMMM d") : title || "Select a day"
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "p-4",
+			children: !date ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: emptyMessage
+			}) : children
+		})]
+	});
+}
+function CalendarWithDetail({ renderDetail, detailTitle, detailEmptyMessage, layout = "horizontal", detailPosition = "right", onDateSelect, ...calendarProps }) {
+	const [selectedDate, setSelectedDate] = useState(null);
+	const [selectedEvents, setSelectedEvents] = useState([]);
+	const handleDateSelect = useCallback((date, events) => {
+		setSelectedDate(date);
+		setSelectedEvents(events);
+		onDateSelect?.(date, events);
+	}, [onDateSelect]);
+	const isHorizontal = layout === "horizontal";
+	const detailFirst = detailPosition === "left" || detailPosition === "top";
+	const calendarElement = /* @__PURE__ */ jsx(EventCalendar, {
+		...calendarProps,
+		selectedDate,
+		onDateSelect: handleDateSelect
+	});
+	const detailElement = /* @__PURE__ */ jsx(CalendarDayDetail, {
+		date: selectedDate,
+		title: detailTitle,
+		emptyMessage: detailEmptyMessage,
+		className: isHorizontal ? "min-w-[300px]" : "",
+		children: selectedDate && renderDetail?.(selectedDate, selectedEvents)
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("gap-4", isHorizontal ? "flex" : "flex flex-col", isHorizontal && "items-start"),
+		children: detailFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [detailElement, /* @__PURE__ */ jsx("div", {
+			className: "flex-1",
+			children: calendarElement
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: isHorizontal ? "flex-1" : "",
+			children: calendarElement
+		}), detailElement] })
+	});
+}
+
+//#endregion
+export { CalendarDayDetail, CalendarWithDetail, EventCalendar };