@monkey-mini-app/ui 0.1.0 → 0.1.4

package/dist/src/products/full-calendar/views/month-view/event-bullet.tsx

@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority";
+import { motion } from "../../shims/motion";
+import { cn } from "@monkey-mini-app/ui/lib/utils";
+import { transition } from "../../animations";
+import type { TEventColor } from "../../types";
+
+const eventBulletVariants = cva("size-2 rounded-full", {
+  variants: {
+    color: {
+      blue: "bg-blue-600 dark:bg-blue-500",
+      green: "bg-green-600 dark:bg-green-500",
+      red: "bg-red-600 dark:bg-red-500",
+      yellow: "bg-yellow-600 dark:bg-yellow-500",
+      purple: "bg-purple-600 dark:bg-purple-500",
+      orange: "bg-orange-600 dark:bg-orange-500",
+      gray: "bg-gray-600 dark:bg-gray-500",
+    },
+  },
+  defaultVariants: {
+    color: "blue",
+  },
+});
+
+export function EventBullet({
+  color,
+  className,
+}: {
+  color: TEventColor;
+  className?: string;
+}) {
+  return (
+    <motion.div
+      className={cn(eventBulletVariants({ color, className }))}
+      initial={{ scale: 0, opacity: 0 }}
+      animate={{ scale: 1, opacity: 1 }}
+      whileHover={{ scale: 1.2 }}
+      transition={transition}
+    />
+  );
+}

package/dist/src/products/full-calendar/views/month-view/month-event-badge.tsx

@@ -0,0 +1,143 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { endOfDay, isSameDay, parseISO, startOfDay } from "date-fns";
+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 { formatTime } from "../../helpers";
+import type { IEvent } from "../../interfaces";
+import { EventBullet } from "./event-bullet";
+
+const eventBadgeVariants = cva(
+  "flex w-full h-6.5 select-none items-center justify-between gap-1.5 truncate whitespace-nowrap rounded-md border px-2 text-xs cursor-grab",
+  {
+    variants: {
+      color: {
+        // Colored variants
+        blue: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300",
+        green:
+          "border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-950 dark:text-green-300",
+        red: "border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300",
+        yellow:
+          "border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300",
+        purple:
+          "border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300",
+        orange:
+          "border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300",
+
+        // Dot variants
+        "blue-dot": "bg-bg-secondary text-t-primary [&_svg]:fill-blue-600",
+        "green-dot": "bg-bg-secondary text-t-primary [&_svg]:fill-green-600",
+        "red-dot": "bg-bg-secondary text-t-primary [&_svg]:fill-red-600",
+        "orange-dot": "bg-bg-secondary text-t-primary [&_svg]:fill-orange-600",
+        "purple-dot": "bg-bg-secondary text-t-primary [&_svg]:fill-purple-600",
+        "yellow-dot": "bg-bg-secondary text-t-primary [&_svg]:fill-yellow-600",
+      },
+      multiDayPosition: {
+        first: "relative z-10 mr-0 rounded-r-none border-r-0 [&>span]:mr-2.5",
+        middle:
+          "relative z-10 mx-0 w-[calc(100%_+_1px)] rounded-none border-x-0",
+        last: "ml-0 rounded-l-none border-l-0",
+        none: "",
+      },
+    },
+    defaultVariants: {
+      color: "blue-dot",
+    },
+  },
+);
+
+interface IProps extends Omit<
+  VariantProps<typeof eventBadgeVariants>,
+  "color" | "multiDayPosition"
+> {
+  event: IEvent;
+  cellDate: Date;
+  eventCurrentDay?: number;
+  eventTotalDays?: number;
+  className?: string;
+  position?: "first" | "middle" | "last" | "none";
+}
+
+export function MonthEventBadge({
+  event,
+  cellDate,
+  eventCurrentDay,
+  eventTotalDays,
+  className,
+  position: propPosition,
+}: IProps) {
+  const { badgeVariant, use24HourFormat } = useCalendar();
+
+  const itemStart = startOfDay(parseISO(event.startDate));
+  const itemEnd = endOfDay(parseISO(event.endDate));
+
+  if (cellDate < itemStart || cellDate > itemEnd) return null;
+
+  let position: "first" | "middle" | "last" | "none" | undefined;
+
+  if (propPosition) {
+    position = propPosition;
+  } else if (eventCurrentDay && eventTotalDays) {
+    position = "none";
+  } else if (isSameDay(itemStart, itemEnd)) {
+    position = "none";
+  } else if (isSameDay(cellDate, itemStart)) {
+    position = "first";
+  } else if (isSameDay(cellDate, itemEnd)) {
+    position = "last";
+  } else {
+    position = "middle";
+  }
+
+  const renderBadgeText = ["first", "none"].includes(position);
+  const renderBadgeTime = ["last", "none"].includes(position);
+
+  const color = (
+    badgeVariant === "dot" ? `${event.color}-dot` : event.color
+  ) as VariantProps<typeof eventBadgeVariants>["color"];
+
+  const eventBadgeClasses = cn(
+    eventBadgeVariants({ color, multiDayPosition: position, className }),
+  );
+
+  const marginClass = {
+    first: "ml-1 mr-0",
+    middle: "mx-0",
+    last: "ml-0 mr-1",
+    none: "mx-1",
+  }[position || "none"];
+
+  return (
+    <DraggableEvent event={event} className={marginClass}>
+      <EventDetailsDialog event={event}>
+        <button type="button" data-testid={`calendar-event-${event.id}`} className={eventBadgeClasses}>
+          <div className="flex items-center gap-1.5 truncate">
+            {!["middle", "last"].includes(position) &&
+              badgeVariant === "dot" && <EventBullet color={event.color} />}
+
+            {renderBadgeText && (
+              <p className="flex-1 truncate font-semibold">
+                {eventCurrentDay && (
+                  <span className="text-xs">
+                    Day {eventCurrentDay} of {eventTotalDays} •{" "}
+                  </span>
+                )}
+                {event.title}
+              </p>
+            )}
+          </div>
+
+          <div className="hidden sm:block">
+            {renderBadgeTime && (
+              <span>
+                {formatTime(new Date(event.startDate), use24HourFormat)}
+              </span>
+            )}
+          </div>
+        </button>
+      </EventDetailsDialog>
+    </DraggableEvent>
+  );
+}

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

@@ -0,0 +1,295 @@
+import { format, isWithinInterval, parseISO } from "date-fns";
+import { Calendar, Clock, User } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { DayPicker } from "../../shims/day-picker";
+import { ScrollArea } from "@monkey-mini-app/ui/components/scroll-area";
+import { useDateLocale, useLabels } from "@monkey-mini-app/ui/i18n/context";
+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 { DayViewMultiDayEventsRow } from "./day-view-multi-day-events-row";
+import { RenderGroupedEvents } from "./render-grouped-events";
+
+interface IProps {
+  singleDayEvents: IEvent[];
+  multiDayEvents: IEvent[];
+}
+
+export function CalendarDayView({ singleDayEvents, multiDayEvents }: IProps) {
+  const { selectedDate, setSelectedDate, users, use24HourFormat } =
+    useCalendar();
+  const t = useLabels("eventCalendar");
+  const dateLocale = useDateLocale();
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const {
+    draft,
+    clearDraft,
+    overlayStyle,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+  } = useTimeRangeCreate();
+
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+
+  useEffect(() => {
+    const handleDragOver = (e: DragEvent) => {
+      if (!scrollAreaRef.current) return;
+
+      const scrollArea = scrollAreaRef.current;
+      const rect = scrollArea.getBoundingClientRect();
+      const scrollSpeed = 15;
+
+      const scrollContainer =
+        scrollArea.querySelector("[data-radix-scroll-area-viewport]") ||
+        scrollArea;
+
+      if (e.clientY < rect.top + 60) {
+        scrollContainer.scrollTop -= scrollSpeed;
+      }
+
+      if (e.clientY > rect.bottom - 60) {
+        scrollContainer.scrollTop += scrollSpeed;
+      }
+    };
+
+    document.addEventListener("dragover", handleDragOver);
+    return () => {
+      document.removeEventListener("dragover", handleDragOver);
+    };
+  }, []);
+
+  const getCurrentEvents = (events: IEvent[]) => {
+    const now = new Date();
+
+    return (
+      events.filter((event) =>
+        isWithinInterval(now, {
+          start: parseISO(event.startDate),
+          end: parseISO(event.endDate),
+        }),
+      ) || []
+    );
+  };
+
+  const currentEvents = getCurrentEvents(singleDayEvents);
+
+  const dayEvents = singleDayEvents.filter((event) => {
+    const eventDate = parseISO(event.startDate);
+    return (
+      eventDate.getDate() === selectedDate.getDate() &&
+      eventDate.getMonth() === selectedDate.getMonth() &&
+      eventDate.getFullYear() === selectedDate.getFullYear()
+    );
+  });
+
+  const groupedEvents = groupEvents(dayEvents);
+
+  return (
+    <div className="flex">
+      <div className="flex flex-1 flex-col">
+        <div>
+          <DayViewMultiDayEventsRow
+            selectedDate={selectedDate}
+            multiDayEvents={multiDayEvents}
+          />
+
+          {/* Day header */}
+          <div className="relative z-20 flex border-b">
+            <div className="w-18"></div>
+            <span className="flex-1 border-l py-2 text-center text-xs font-medium text-t-quaternary">
+              {format(selectedDate, "EE")}{" "}
+              <span className="font-semibold text-t-secondary">
+                {format(selectedDate, "d")}
+              </span>
+            </span>
+          </div>
+        </div>
+        <ScrollArea className="h-[800px]" ref={scrollAreaRef}>
+          <div className="flex">
+            {/* Hours column */}
+            <div className="relative w-18">
+              {hours.map((hour, index) => (
+                <div key={hour} className="relative" style={{ height: `${HOUR_HEIGHT_PX}px` }}>
+                  <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>
+                </div>
+              ))}
+            </div>
+
+            {/* Day grid — drag vertically to select a create range */}
+            <div className="relative flex-1 border-l">
+              <div
+                className="relative touch-none select-none"
+                data-testid="calendar-day-column"
+                onPointerDown={(e) => onPointerDown(e, selectedDate, e.currentTarget)}
+                onPointerMove={onPointerMove}
+                onPointerUp={onPointerUp}
+                onPointerCancel={onPointerUp}
+              >
+                {hours.map((hour, index) => (
+                  <div
+                    key={hour}
+                    className="relative"
+                    style={{ height: `${HOUR_HEIGHT_PX}px` }}
+                  >
+                    {index !== 0 && (
+                      <div className="pointer-events-none absolute inset-x-0 top-0 border-b"></div>
+                    )}
+
+                    <DroppableArea
+                      date={selectedDate}
+                      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={selectedDate}
+                      hour={hour}
+                      minute={30}
+                      className="absolute inset-x-0 bottom-0 h-[48px]"
+                    >
+                      <div className="absolute inset-0" />
+                    </DroppableArea>
+                  </div>
+                ))}
+
+                {overlayStyle ? (
+                  <div
+                    className="pointer-events-none absolute inset-x-1 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={selectedDate}
+                  />
+                </div>
+              </div>
+
+              <CalendarTimeline />
+            </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>
+      </div>
+
+      <div className="hidden w-72 divide-y border-l md:block">
+        <DayPicker
+          className="mx-auto w-fit"
+          mode="single"
+          selected={selectedDate}
+          onSelect={(date) => date && setSelectedDate(date)}
+        />
+
+        <div className="flex-1 space-y-3">
+          {currentEvents.length > 0 ? (
+            <div className="flex items-start gap-2 px-4 pt-4">
+              <span className="relative mt-[5px] flex size-2.5">
+                <span className="absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+                <span className="relative inline-flex size-2.5 rounded-full bg-green-600"></span>
+              </span>
+
+              <p className="text-sm font-semibold text-t-secondary">
+                {t.happeningNow}
+              </p>
+            </div>
+          ) : (
+            <p className="p-4 text-center text-sm italic text-t-tertiary">
+              {t.noAppointments}
+            </p>
+          )}
+
+          {currentEvents.length > 0 && (
+            <ScrollArea className="h-[422px] px-4">
+              <div className="space-y-6 pb-4">
+                {currentEvents.map((event) => {
+                  const user = users.find((user) => user.id === event.user.id);
+
+                  return (
+                    <div key={event.id} className="space-y-1.5">
+                      <p className="line-clamp-2 text-sm font-semibold">
+                        {event.title}
+                      </p>
+
+                      {user && (
+                        <div className="flex items-center gap-1.5">
+                          <User className="size-4 text-t-quinary" />
+                          <span className="text-sm text-t-tertiary">
+                            {user.name}
+                          </span>
+                        </div>
+                      )}
+
+                      <div className="flex items-center gap-1.5">
+                        <Calendar className="size-4 text-t-quinary" />
+                        <span className="text-sm text-t-tertiary">
+                          {format(new Date(event.startDate), "MMM d, yyyy", {
+                            locale: dateLocale,
+                          })}
+                        </span>
+                      </div>
+
+                      <div className="flex items-center gap-1.5">
+                        <Clock className="size-4 text-t-quinary" />
+                        <span className="text-sm text-t-tertiary">
+                          {format(
+                            parseISO(event.startDate),
+                            use24HourFormat ? "HH:mm" : "hh:mm a",
+                          )}{" "}
+                          -
+                          {format(
+                            parseISO(event.endDate),
+                            use24HourFormat ? "HH:mm" : "hh:mm a",
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </ScrollArea>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { useCalendar } from "../../contexts/calendar-context";
+import { formatTime } from "../../helpers";
+
+export function CalendarTimeline() {
+  const { use24HourFormat } = useCalendar();
+  const [currentTime, setCurrentTime] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 60 * 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const getCurrentTimePosition = () => {
+    const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
+    return (minutes / 1440) * 100;
+  };
+
+  const formatCurrentTime = () => {
+    return formatTime(currentTime, use24HourFormat);
+  };
+
+  return (
+    <div
+      className="pointer-events-none absolute inset-x-0 z-50 border-t border-primary"
+      style={{ top: `${getCurrentTimePosition()}%` }}
+    >
+      <div className="absolute -left-1.5 -top-1.5 size-3 rounded-full bg-primary"></div>
+
+      <div className="absolute -left-18 flex w-16 -translate-y-1/2 justify-end bg-background pr-1 text-xs font-medium text-primary">
+        {formatCurrentTime()}
+      </div>
+    </div>
+  );
+}