@monkey-mini-app/ui 0.1.0 → 0.1.4

package/dist/src/products/full-calendar/views/week-and-day-view/calendar-week-view.tsx

@@ -0,0 +1,253 @@
+import {addDays, format, isSameDay, parseISO, startOfWeek} from "date-fns";
+import {motion} from "../../shims/motion";
+import {ScrollArea} from "@monkey-mini-app/ui/components/scroll-area";
+import {
+    fadeIn,
+    staggerContainer,
+    transition,
+} from "../../animations";
+import {useCalendar} from "../../contexts/calendar-context";
+import {AddEditEventDialog} from "../../dialogs/add-edit-event-dialog";
+import {DroppableArea} from "../../dnd/droppable-area";
+import {groupEvents, HOUR_HEIGHT_PX} from "../../helpers";
+import {useTimeRangeCreate} from "../../hooks/use-time-range-create";
+import type {IEvent} from "../../interfaces";
+import {CalendarTimeline} from "./calendar-time-line";
+import {RenderGroupedEvents} from "./render-grouped-events";
+import {
+    WeekViewMultiDayEventsRow
+} from "./week-view-multi-day-events-row";
+
+interface IProps {
+    singleDayEvents: IEvent[];
+    multiDayEvents: IEvent[];
+}
+
+export function CalendarWeekView({singleDayEvents, multiDayEvents}: IProps) {
+    const {selectedDate, use24HourFormat} = useCalendar();
+    const {
+        selection,
+        draft,
+        clearDraft,
+        overlayStyle,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+    } = useTimeRangeCreate();
+
+    const weekStart = startOfWeek(selectedDate);
+    const weekDays = Array.from({length: 7}, (_, i) => addDays(weekStart, i));
+    const hours = Array.from({length: 24}, (_, i) => i);
+
+    return (
+        <motion.div
+            data-testid="calendar-week-grid"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={fadeIn}
+            transition={transition}
+        >
+            <motion.div
+                className="flex flex-col items-center justify-center border-b p-4 text-sm sm:hidden"
+                initial={{opacity: 0, y: -20}}
+                animate={{opacity: 1, y: 0}}
+                transition={transition}
+            >
+                <p>Weekly view is not recommended on smaller devices.</p>
+                <p>Please switch to a desktop device or use the daily view instead.</p>
+            </motion.div>
+
+            <motion.div
+                className="flex-col sm:flex"
+                variants={staggerContainer}
+            >
+                <div>
+                    <WeekViewMultiDayEventsRow
+                        selectedDate={selectedDate}
+                        multiDayEvents={multiDayEvents}
+                    />
+
+                    {/* Week header */}
+                    <motion.div
+                        className="relative z-20 flex border-b"
+                        initial={{opacity: 0, y: -20}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={transition}
+                    >
+                        {/* Time column header - responsive width */}
+                        <div className="w-18"></div>
+                        <div className="grid flex-1 grid-cols-7  border-l">
+                            {weekDays.map((day, index) => (
+                                <motion.span
+                                    key={day.toISOString()}
+                                    className="py-1 sm:py-2 text-center text-xs font-medium text-t-quaternary"
+                                    initial={{opacity: 0, y: -10}}
+                                    animate={{opacity: 1, y: 0}}
+                                    transition={{delay: index * 0.05, ...transition}}
+                                >
+                                    {/* Mobile: Show only day abbreviation and number */}
+                                    <span className="block sm:hidden">
+									{format(day, "EEE").charAt(0)}
+                                        <span className="block font-semibold text-t-secondary text-xs">
+										{format(day, "d")}
+									</span>
+								</span>
+                                    {/* Desktop: Show full format */}
+                                    <span className="hidden sm:inline">
+									{format(day, "EE")}{" "}
+                                        <span className="ml-1 font-semibold text-t-secondary">
+										{format(day, "d")}
+									</span>
+								</span>
+                                </motion.span>
+                            ))}
+                        </div>
+                    </motion.div>
+
+                </div>
+
+                <ScrollArea className="h-[736px]">
+                    <div className="flex">
+                        {/* Hours column */}
+                        <motion.div className="relative w-18" variants={staggerContainer}>
+                            {hours.map((hour, index) => (
+                                <motion.div
+                                    key={hour}
+                                    className="relative"
+                                    style={{height: `${HOUR_HEIGHT_PX}px`}}
+                                    initial={{opacity: 0, x: -20}}
+                                    animate={{opacity: 1, x: 0}}
+                                    transition={{delay: index * 0.02, ...transition}}
+                                >
+                                    <div className="absolute -top-3 right-2 flex h-6 items-center">
+                                        {index !== 0 && (
+                                            <span className="text-xs text-t-quaternary">
+												{format(
+                                                    new Date().setHours(hour, 0, 0, 0),
+                                                    use24HourFormat ? "HH:00" : "h a",
+                                                )}
+											</span>
+                                        )}
+                                    </div>
+                                </motion.div>
+                            ))}
+                        </motion.div>
+
+                        {/* Week grid */}
+                        <motion.div
+                            className="relative flex-1 border-l"
+                            variants={staggerContainer}
+                        >
+                            <div className="grid grid-cols-7 divide-x">
+                                {weekDays.map((day, dayIndex) => {
+                                    const dayEvents = singleDayEvents.filter(
+                                        (event) =>
+                                            isSameDay(parseISO(event.startDate), day) ||
+                                            isSameDay(parseISO(event.endDate), day),
+                                    );
+                                    const groupedEvents = groupEvents(dayEvents);
+
+                                    const showOverlay =
+                                        selection != null &&
+                                        isSameDay(selection.day, day) &&
+                                        overlayStyle != null;
+
+                                    return (
+                                        <motion.div
+                                            key={day.toISOString()}
+                                            className="relative touch-none select-none"
+                                            data-testid="calendar-day-column"
+                                            data-day={day.toISOString()}
+                                            initial={{opacity: 0}}
+                                            animate={{opacity: 1}}
+                                            transition={{delay: dayIndex * 0.1, ...transition}}
+                                            onPointerDown={(e) => onPointerDown(e, day, e.currentTarget)}
+                                            onPointerMove={onPointerMove}
+                                            onPointerUp={onPointerUp}
+                                            onPointerCancel={onPointerUp}
+                                        >
+                                            {hours.map((hour, index) => (
+                                                <motion.div
+                                                    key={hour}
+                                                    className="relative"
+                                                    style={{height: `${HOUR_HEIGHT_PX}px`}}
+                                                    initial={{opacity: 0}}
+                                                    animate={{opacity: 1}}
+                                                    transition={{delay: index * 0.01, ...transition}}
+                                                >
+                                                    {index !== 0 && (
+                                                        <div
+                                                            className="pointer-events-none absolute inset-x-0 top-0 border-b"></div>
+                                                    )}
+
+                                                    <DroppableArea
+                                                        date={day}
+                                                        hour={hour}
+                                                        minute={0}
+                                                        className="absolute inset-x-0 top-0 h-[48px]"
+                                                    >
+                                                        <div className="absolute inset-0" />
+                                                    </DroppableArea>
+
+                                                    <div
+                                                        className="pointer-events-none absolute inset-x-0 top-1/2 border-b border-dashed border-b-tertiary"></div>
+
+                                                    <DroppableArea
+                                                        date={day}
+                                                        hour={hour}
+                                                        minute={30}
+                                                        className="absolute inset-x-0 bottom-0 h-[48px]"
+                                                    >
+                                                        <div className="absolute inset-0" />
+                                                    </DroppableArea>
+                                                </motion.div>
+                                            ))}
+
+                                            {showOverlay ? (
+                                                <div
+                                                    className="pointer-events-none absolute inset-x-0.5 z-10 rounded-md border border-primary/40 bg-primary/15"
+                                                    data-testid="calendar-selection-overlay"
+                                                    style={overlayStyle}
+                                                />
+                                            ) : null}
+
+                                            <div className="pointer-events-auto relative z-20">
+                                                <RenderGroupedEvents
+                                                    groupedEvents={groupedEvents}
+                                                    day={day}
+                                                />
+                                            </div>
+                                        </motion.div>
+                                    );
+                                })}
+                            </div>
+
+                            <CalendarTimeline/>
+                        </motion.div>
+
+                        {draft ? (
+                            <AddEditEventDialog
+                                open
+                                onOpenChange={(open) => {
+                                    if (!open) clearDraft();
+                                }}
+                                startDate={draft.start}
+                                startTime={{
+                                    hour: draft.start.getHours(),
+                                    minute: draft.start.getMinutes(),
+                                }}
+                                endTime={{
+                                    hour: draft.end.getHours(),
+                                    minute: draft.end.getMinutes(),
+                                }}
+                            />
+                        ) : null}
+                    </div>
+                </ScrollArea>
+            </motion.div>
+        </motion.div>
+    );
+}
+
+

package/dist/src/products/full-calendar/views/week-and-day-view/day-view-multi-day-events-row.tsx

@@ -0,0 +1,73 @@
+import {
+  differenceInDays,
+  endOfDay,
+  isWithinInterval,
+  parseISO,
+  startOfDay,
+} from "date-fns";
+import type { IEvent } from "../../interfaces";
+import { MonthEventBadge } from "../month-view/month-event-badge";
+
+interface IProps {
+  selectedDate: Date;
+  multiDayEvents: IEvent[];
+}
+
+export function DayViewMultiDayEventsRow({
+  selectedDate,
+  multiDayEvents,
+}: IProps) {
+  const dayStart = startOfDay(selectedDate);
+  const dayEnd = endOfDay(selectedDate);
+
+  const multiDayEventsInDay = multiDayEvents
+    .filter((event) => {
+      const eventStart = parseISO(event.startDate);
+      const eventEnd = parseISO(event.endDate);
+
+      return (
+        isWithinInterval(dayStart, { start: eventStart, end: eventEnd }) ||
+        isWithinInterval(dayEnd, { start: eventStart, end: eventEnd }) ||
+        (eventStart <= dayStart && eventEnd >= dayEnd)
+      );
+    })
+    .sort((a, b) => {
+      const durationA = differenceInDays(
+        parseISO(a.endDate),
+        parseISO(a.startDate),
+      );
+      const durationB = differenceInDays(
+        parseISO(b.endDate),
+        parseISO(b.startDate),
+      );
+      return durationB - durationA;
+    });
+
+  if (multiDayEventsInDay.length === 0) return null;
+
+  return (
+    <div className="flex border-b">
+      <div className="w-18"></div>
+      <div className="flex flex-1 flex-col gap-1 border-l py-1">
+        {multiDayEventsInDay.map((event) => {
+          const eventStart = startOfDay(parseISO(event.startDate));
+          const eventEnd = startOfDay(parseISO(event.endDate));
+          const currentDate = startOfDay(selectedDate);
+
+          const eventTotalDays = differenceInDays(eventEnd, eventStart) + 1;
+          const eventCurrentDay = differenceInDays(currentDate, eventStart) + 1;
+
+          return (
+            <MonthEventBadge
+              key={event.id}
+              event={event}
+              cellDate={selectedDate}
+              eventCurrentDay={eventCurrentDay}
+              eventTotalDays={eventTotalDays}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/dist/src/products/full-calendar/views/week-and-day-view/event-block.tsx

@@ -0,0 +1,114 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { differenceInMinutes, parseISO } from "date-fns";
+import type { HTMLAttributes } from "react";
+import { cn } from "@monkey-mini-app/ui/lib/utils";
+import { useCalendar } from "../../contexts/calendar-context";
+import { EventDetailsDialog } from "../../dialogs/event-details-dialog";
+import { DraggableEvent } from "../../dnd/draggable-event";
+import { ResizableEvent } from "../../dnd/resizable-event";
+import { formatTime } from "../../helpers";
+import type { IEvent } from "../../interfaces";
+
+const calendarWeekEventCardVariants = cva(
+  "flex select-none flex-col gap-0.5 truncate whitespace-nowrap rounded-md border px-2 py-1.5 text-xs focus-visible:outline-offset-2",
+  {
+    variants: {
+      color: {
+        // Colored variants
+        blue: "border-blue-200 bg-blue-100/50 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950/50 dark:text-blue-300 dark:hover:bg-blue-950",
+        green:
+          "border-green-200 bg-green-100/50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950/50 dark:text-green-300 dark:hover:bg-green-950",
+        red: "border-red-200 bg-red-100/50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950/50 dark:text-red-300 dark:hover:bg-red-950",
+        yellow:
+          "border-yellow-200 bg-yellow-100/50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-800 dark:bg-yellow-950/50 dark:text-yellow-300 dark:hover:bg-yellow-950",
+        purple:
+          "border-purple-200 bg-purple-100/50 text-purple-700 hover:bg-purple-100 dark:border-purple-800 dark:bg-purple-950/50 dark:text-purple-300 dark:hover:bg-purple-950",
+        orange:
+          "border-orange-200 bg-orange-100/50 text-orange-700 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-950/50 dark:text-orange-300 dark:hover:bg-orange-950",
+
+        // Dot variants
+        "blue-dot":
+          "border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-blue-600 dark:[&_svg]:fill-blue-500",
+        "green-dot":
+          "border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-green-600 dark:[&_svg]:fill-green-500",
+        "red-dot":
+          "border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-red-600 dark:[&_svg]:fill-red-500",
+        "orange-dot":
+          "border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-orange-600 dark:[&_svg]:fill-orange-500",
+        "purple-dot":
+          "border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-purple-600 dark:[&_svg]:fill-purple-500",
+        "yellow-dot":
+          "border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-yellow-600 dark:[&_svg]:fill-yellow-500",
+      },
+    },
+    defaultVariants: {
+      color: "blue-dot",
+    },
+  },
+);
+
+interface IProps
+  extends
+    HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof calendarWeekEventCardVariants>, "color"> {
+  event: IEvent;
+}
+
+export function EventBlock({ event, className }: IProps) {
+  const { badgeVariant, use24HourFormat } = useCalendar();
+
+  const start = parseISO(event.startDate);
+  const end = parseISO(event.endDate);
+  const durationInMinutes = differenceInMinutes(end, start);
+  const heightInPixels = (durationInMinutes / 60) * 96 - 8;
+
+  const color = (
+    badgeVariant === "dot" ? `${event.color}-dot` : event.color
+  ) as VariantProps<typeof calendarWeekEventCardVariants>["color"];
+
+  const calendarWeekEventCardClasses = cn(
+    calendarWeekEventCardVariants({ color, className }),
+    durationInMinutes < 35 && "py-0 justify-center",
+  );
+
+  return (
+    <ResizableEvent event={event}>
+      <DraggableEvent event={event}>
+        <EventDetailsDialog event={event}>
+          <button
+            type="button"
+            data-calendar-event="1"
+            data-testid={`calendar-event-${event.id}`}
+            className={calendarWeekEventCardClasses}
+            style={{ height: `${heightInPixels}px` }}
+          >
+            <div className="flex items-center gap-1.5 truncate">
+              {badgeVariant === "dot" && (
+                <svg
+                  width="8"
+                  height="8"
+                  viewBox="0 0 8 8"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="shrink-0"
+                  aria-hidden="true"
+                >
+                  <circle cx="4" cy="4" r="4" />
+                </svg>
+              )}
+
+              <p className="truncate font-semibold">{event.title}</p>
+            </div>
+
+            {durationInMinutes > 25 && (
+              <p>
+                {formatTime(start, use24HourFormat)} -{" "}
+                {formatTime(end, use24HourFormat)}
+              </p>
+            )}
+          </button>
+        </EventDetailsDialog>
+      </DraggableEvent>
+    </ResizableEvent>
+  );
+}

package/dist/src/products/full-calendar/views/week-and-day-view/render-grouped-events.tsx

@@ -0,0 +1,49 @@
+import { areIntervalsOverlapping, parseISO } from "date-fns";
+import { getEventBlockStyle } from "../../helpers";
+import type { IEvent } from "../../interfaces";
+import { EventBlock } from "./event-block";
+
+interface RenderGroupedEventsProps {
+  groupedEvents: IEvent[][];
+  day: Date;
+}
+
+export function RenderGroupedEvents({
+  groupedEvents,
+  day,
+}: RenderGroupedEventsProps) {
+  return groupedEvents.map((group, groupIndex) =>
+    group.map((event) => {
+      let style = getEventBlockStyle(
+        event,
+        day,
+        groupIndex,
+        groupedEvents.length,
+      );
+      const hasOverlap = groupedEvents.some(
+        (otherGroup, otherIndex) =>
+          otherIndex !== groupIndex &&
+          otherGroup.some((otherEvent) =>
+            areIntervalsOverlapping(
+              {
+                start: parseISO(event.startDate),
+                end: parseISO(event.endDate),
+              },
+              {
+                start: parseISO(otherEvent.startDate),
+                end: parseISO(otherEvent.endDate),
+              },
+            ),
+          ),
+      );
+
+      if (!hasOverlap) style = { ...style, width: "100%", left: "0%" };
+
+      return (
+        <div key={event.id} className="absolute p-1" style={style}>
+          <EventBlock event={event} />
+        </div>
+      );
+    }),
+  );
+}

package/dist/src/products/full-calendar/views/week-and-day-view/week-view-multi-day-events-row.tsx

@@ -0,0 +1,143 @@
+import {
+	addDays,
+	differenceInDays,
+	endOfWeek,
+	isAfter,
+	isBefore,
+	parseISO,
+	startOfDay,
+	startOfWeek,
+} from "date-fns";
+import { useMemo } from "react";
+import type { IEvent } from "../../interfaces";
+import { MonthEventBadge } from "../month-view/month-event-badge";
+
+interface IProps {
+	selectedDate: Date;
+	multiDayEvents: IEvent[];
+}
+
+export function WeekViewMultiDayEventsRow({
+	selectedDate,
+	multiDayEvents,
+}: IProps) {
+	const weekStart = startOfWeek(selectedDate);
+	const weekEnd = endOfWeek(selectedDate);
+	const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
+
+	const processedEvents = useMemo(() => {
+		return multiDayEvents
+			.map((event) => {
+				const start = parseISO(event.startDate);
+				const end = parseISO(event.endDate);
+				const adjustedStart = isBefore(start, weekStart) ? weekStart : start;
+				const adjustedEnd = isAfter(end, weekEnd) ? weekEnd : end;
+				const startIndex = differenceInDays(adjustedStart, weekStart);
+				const endIndex = differenceInDays(adjustedEnd, weekStart);
+
+				return {
+					...event,
+					adjustedStart,
+					adjustedEnd,
+					startIndex,
+					endIndex,
+				};
+			})
+			.sort((a, b) => {
+				const startDiff = a.adjustedStart.getTime() - b.adjustedStart.getTime();
+				if (startDiff !== 0) return startDiff;
+				return b.endIndex - b.startIndex - (a.endIndex - a.startIndex);
+			});
+	}, [multiDayEvents, weekStart, weekEnd]);
+
+	const eventRows = useMemo(() => {
+		const rows: (typeof processedEvents)[] = [];
+
+		processedEvents.forEach((event) => {
+			let rowIndex = rows.findIndex((row) =>
+				row.every(
+					(e) => e.endIndex < event.startIndex || e.startIndex > event.endIndex,
+				),
+			);
+
+			if (rowIndex === -1) {
+				rowIndex = rows.length;
+				rows.push([]);
+			}
+
+			rows[rowIndex].push(event);
+		});
+
+		return rows;
+	}, [processedEvents]);
+
+	const hasEventsInWeek = useMemo(() => {
+		return multiDayEvents.some((event) => {
+			const start = parseISO(event.startDate);
+			const end = parseISO(event.endDate);
+
+			return (
+				// Event starts within the week
+				(start >= weekStart && start <= weekEnd) ||
+				// Event ends within the week
+				(end >= weekStart && end <= weekEnd) ||
+				// Event spans the entire week
+				(start <= weekStart && end >= weekEnd)
+			);
+		});
+	}, [multiDayEvents, weekStart, weekEnd]);
+
+	if (!hasEventsInWeek) {
+		return null;
+	}
+
+	return (
+		<div className="overflow-hidden flex" data-testid="calendar-all-day">
+			<div className="w-18 border-b"></div>
+			<div className="grid flex-1 grid-cols-7 divide-x border-b border-l">
+				{weekDays.map((day, dayIndex) => (
+					<div
+						key={day.toISOString()}
+						className="flex h-full flex-col gap-1 py-1"
+					>
+						{eventRows.map((row, rowIndex) => {
+							const event = row.find(
+								(e) => e.startIndex <= dayIndex && e.endIndex >= dayIndex,
+							);
+
+							if (!event) {
+								return (
+									<div key={`${rowIndex}-${dayIndex.toString()}`} className="h-6.5" />
+								);
+							}
+
+							let position: "first" | "middle" | "last" | "none" = "none";
+
+							if (
+								dayIndex === event.startIndex &&
+								dayIndex === event.endIndex
+							) {
+								position = "none";
+							} else if (dayIndex === event.startIndex) {
+								position = "first";
+							} else if (dayIndex === event.endIndex) {
+								position = "last";
+							} else {
+								position = "middle";
+							}
+
+							return (
+								<MonthEventBadge
+									key={`${event.id}-${dayIndex}`}
+									event={event}
+									cellDate={startOfDay(day)}
+									position={position}
+								/>
+							);
+						})}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}