@monkey-mini-app/ui 0.1.0 → 0.1.4

package/dist/src/products/full-calendar/dialogs/add-edit-event-dialog.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import { addMinutes, format, set } from "date-fns"
+import { type ReactNode, useEffect, useMemo, useState } from "react"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@monkey-mini-app/ui/components/dialog"
+import { Input } from "@monkey-mini-app/ui/components/input"
+import { Label } from "@monkey-mini-app/ui/components/label"
+import { Textarea } from "@monkey-mini-app/ui/components/textarea"
+import { DateTimePicker } from "@monkey-mini-app/ui/composites/date-time-picker"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+import { COLORS } from "../constants"
+import { useCalendar } from "../contexts/calendar-context"
+import { useDisclosure } from "../hooks"
+import type { IEvent } from "../interfaces"
+import type { TEventColor } from "../types"
+
+interface IProps {
+  children?: ReactNode
+  startDate?: Date
+  startTime?: { hour: number; minute: number }
+  endTime?: { hour: number; minute: number }
+  event?: IEvent
+  /** Controlled open (e.g. after drag-select). */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function AddEditEventDialog({
+  children,
+  startDate,
+  startTime,
+  endTime,
+  event,
+  open: openProp,
+  onOpenChange,
+}: IProps) {
+  const disclosure = useDisclosure()
+  const isControlled = openProp !== undefined
+  const isOpen = isControlled ? Boolean(openProp) : disclosure.isOpen
+  const onClose = () => {
+    if (isControlled) onOpenChange?.(false)
+    else disclosure.onClose()
+  }
+  const onToggle = () => {
+    if (isControlled) onOpenChange?.(!openProp)
+    else disclosure.onToggle()
+  }
+  const { addEvent, updateEvent, users } = useCalendar()
+  const t = useLabels("eventCalendar")
+  const isEditing = Boolean(event)
+
+  const initial = useMemo(() => {
+    if (event) {
+      return {
+        title: event.title,
+        description: event.description,
+        start: new Date(event.startDate),
+        end: new Date(event.endDate),
+        color: event.color,
+      }
+    }
+    const base = startDate ? new Date(startDate) : new Date()
+    const start = startTime
+      ? set(base, { hours: startTime.hour, minutes: startTime.minute, seconds: 0, milliseconds: 0 })
+      : base
+    const end = endTime
+      ? set(base, { hours: endTime.hour, minutes: endTime.minute, seconds: 0, milliseconds: 0 })
+      : addMinutes(start, 30)
+    return {
+      title: "",
+      description: "",
+      start,
+      end: end > start ? end : addMinutes(start, 30),
+      color: "blue" as TEventColor,
+    }
+  }, [event, startDate, startTime, endTime])
+
+  const [title, setTitle] = useState(initial.title)
+  const [description, setDescription] = useState(initial.description)
+  const [start, setStart] = useState(initial.start)
+  const [end, setEnd] = useState(initial.end)
+  const [color, setColor] = useState<TEventColor>(initial.color)
+
+  useEffect(() => {
+    setTitle(initial.title)
+    setDescription(initial.description)
+    setStart(initial.start)
+    setEnd(initial.end)
+    setColor(initial.color)
+  }, [initial])
+
+  const save = () => {
+    if (!title.trim() || !start || !end) return
+    const payload: IEvent = {
+      id: isEditing && event ? event.id : Date.now(),
+      title: title.trim(),
+      description: description.trim(),
+      startDate: format(start, "yyyy-MM-dd'T'HH:mm:ss"),
+      endDate: format(end, "yyyy-MM-dd'T'HH:mm:ss"),
+      color,
+      user: event?.user ?? users[0] ?? { id: "local", name: "Me", picturePath: null },
+    }
+    if (isEditing) updateEvent(payload)
+    else addEvent(payload)
+    onClose()
+  }
+
+  return (
+    <>
+      {children ? (
+        <span
+          onClick={(e) => {
+            e.stopPropagation()
+            onToggle()
+          }}
+        >
+          {children}
+        </span>
+      ) : null}
+      <Dialog
+        open={isOpen}
+        onOpenChange={(next) => {
+          if (!next) onClose()
+          else if (isControlled) onOpenChange?.(true)
+          else disclosure.onOpen()
+        }}
+      >
+        <DialogContent className="sm:max-w-lg" data-testid="event-dialog">
+          <DialogHeader>
+            <DialogTitle>{isEditing ? t.editEvent : t.newEvent}</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-3">
+            <Input
+              data-testid="event-title-input"
+              placeholder={t.titlePlaceholder}
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") save()
+              }}
+            />
+            <div className="grid gap-1">
+              <Label>{t.start}</Label>
+              <DateTimePicker value={start} onChange={(d) => d && setStart(d)} />
+            </div>
+            <div className="grid gap-1">
+              <Label>{t.end}</Label>
+              <DateTimePicker value={end} onChange={(d) => d && setEnd(d)} />
+            </div>
+            <div className="flex flex-wrap gap-1">
+              {COLORS.map((item) => (
+                <button
+                  key={item}
+                  type="button"
+                  className={cn(
+                    "size-6 rounded-full border",
+                    color === item ? "ring-2 ring-ring" : "opacity-70",
+                    `bg-${item}-600`,
+                  )}
+                  style={{ backgroundColor: item }}
+                  onClick={() => setColor(item)}
+                  aria-label={item}
+                />
+              ))}
+            </div>
+            <Textarea placeholder={t.descriptionPlaceholder} value={description} onChange={(e) => setDescription(e.target.value)} />
+          </div>
+          <DialogFooter>
+            <Button data-testid="event-save" onClick={save}>
+              {isEditing ? t.saveChanges : t.createEvent}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/dist/src/products/full-calendar/dialogs/delete-event-dialog.tsx

@@ -0,0 +1,39 @@
+import { TrashIcon } from "lucide-react"
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@monkey-mini-app/ui/components/alert-dialog"
+import { useCalendar } from "../contexts/calendar-context"
+
+export default function DeleteEventDialog({ eventId }: { eventId: number }) {
+  const { removeEvent } = useCalendar()
+  if (!eventId) return null
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger className="inline-flex h-8 items-center gap-1.5 rounded-lg bg-destructive/10 px-2.5 text-sm text-destructive">
+        <TrashIcon className="size-4" />
+        Delete
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your event.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={() => removeEvent(eventId)}>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/dist/src/products/full-calendar/dialogs/event-details-dialog.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { format, parseISO } from "date-fns"
+import { Calendar, Clock, Text, User } from "lucide-react"
+import { type ReactNode, useState } from "react"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@monkey-mini-app/ui/components/dialog"
+import { ScrollArea } from "@monkey-mini-app/ui/components/scroll-area"
+
+import { useCalendar } from "../contexts/calendar-context"
+import { formatTime } from "../helpers"
+import type { IEvent } from "../interfaces"
+import { AddEditEventDialog } from "./add-edit-event-dialog"
+
+export function EventDetailsDialog({ event, children }: { event: IEvent; children: ReactNode }) {
+  const [open, setOpen] = useState(false)
+  const startDate = parseISO(event.startDate)
+  const endDate = parseISO(event.endDate)
+  const { use24HourFormat, removeEvent } = useCalendar()
+
+  return (
+    <>
+      <span
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen(true)
+        }}
+      >
+        {children}
+      </span>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{event.title}</DialogTitle>
+          </DialogHeader>
+          <ScrollArea className="max-h-[80vh]">
+            <div className="space-y-4 p-4">
+              <div className="flex items-start gap-2">
+                <User className="mt-1 size-4 shrink-0 text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium">Responsible</p>
+                  <p className="text-sm text-muted-foreground">{event.user.name}</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <Calendar className="mt-1 size-4 shrink-0 text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium">Start Date</p>
+                  <p className="text-sm text-muted-foreground">
+                    {format(startDate, "EEEE dd MMMM")}
+                    <span className="mx-1">at</span>
+                    {formatTime(parseISO(event.startDate), use24HourFormat)}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <Clock className="mt-1 size-4 shrink-0 text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium">End Date</p>
+                  <p className="text-sm text-muted-foreground">
+                    {format(endDate, "EEEE dd MMMM")}
+                    <span className="mx-1">at</span>
+                    {formatTime(parseISO(event.endDate), use24HourFormat)}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <Text className="mt-1 size-4 shrink-0 text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium">Description</p>
+                  <p className="text-sm text-muted-foreground">{event.description}</p>
+                </div>
+              </div>
+            </div>
+          </ScrollArea>
+          <div className="flex justify-end gap-2">
+            <AddEditEventDialog event={event}>
+              <Button variant="outline">Edit</Button>
+            </AddEditEventDialog>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                removeEvent(event.id)
+                setOpen(false)
+              }}
+            >
+              Delete
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/dist/src/products/full-calendar/dialogs/events-list-dialog.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { format } from "date-fns"
+import { type ReactNode, useState } from "react"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@monkey-mini-app/ui/components/dialog"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+import { useCalendar } from "../contexts/calendar-context"
+import { formatTime } from "../helpers"
+import type { IEvent } from "../interfaces"
+import { dayCellVariants } from "../views/month-view/day-cell"
+import { EventBullet } from "../views/month-view/event-bullet"
+import { EventDetailsDialog } from "./event-details-dialog"
+
+export function EventListDialog({
+  date,
+  events,
+  maxVisibleEvents = 3,
+  children,
+}: {
+  date: Date
+  events: IEvent[]
+  maxVisibleEvents?: number
+  children?: ReactNode
+}) {
+  const [open, setOpen] = useState(false)
+  const hiddenEventsCount = Math.max(events.length - maxVisibleEvents, 0)
+  const { badgeVariant, use24HourFormat } = useCalendar()
+  const defaultTrigger = (
+    <span className="cursor-pointer" data-testid="calendar-more">
+      <span className="sm:hidden">+{hiddenEventsCount}</span>
+      <span className="hidden rounded-xl border px-2 py-0.5 sm:inline">+{hiddenEventsCount} more</span>
+    </span>
+  )
+
+  return (
+    <>
+      <span
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen(true)
+        }}
+      >
+        {children || defaultTrigger}
+      </span>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>
+              <div className="flex items-center gap-2">
+                {events[0] ? <EventBullet color={events[0].color} /> : null}
+                <p className="text-sm font-medium">Events on {format(date, "EEEE, MMMM d, yyyy")}</p>
+              </div>
+            </DialogTitle>
+          </DialogHeader>
+          <div className="max-h-[60vh] space-y-2 overflow-y-auto">
+            {events.length > 0 ? (
+              events.map((event) => (
+                <EventDetailsDialog event={event} key={event.id}>
+                  <div
+                    className={cn("flex cursor-pointer items-center gap-2 rounded-md border p-2 hover:bg-muted", {
+                      [dayCellVariants({ color: event.color })]: badgeVariant === "colored",
+                    })}
+                  >
+                    <EventBullet color={event.color} />
+                    <div className="flex w-full items-center justify-between">
+                      <p className="text-sm font-medium">{event.title}</p>
+                      <p className="text-xs">{formatTime(event.startDate, use24HourFormat)}</p>
+                    </div>
+                  </div>
+                </EventDetailsDialog>
+              ))
+            ) : (
+              <p className="text-sm text-muted-foreground">No events for this date.</p>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/dist/src/products/full-calendar/dnd/draggable-event.tsx

@@ -0,0 +1,45 @@
+import { motion } from "../shims/motion";
+import type React from "react";
+import type { ReactNode } from "react";
+import { useDragDrop } from "../contexts/dnd-context";
+import type { IEvent } from "../interfaces";
+
+interface DraggableEventProps {
+  event: IEvent;
+  children: ReactNode;
+  className?: string;
+}
+
+export function DraggableEvent({
+  event,
+  children,
+  className,
+}: DraggableEventProps) {
+  const { startDrag, endDrag, isDragging, draggedEvent } = useDragDrop();
+
+  const isCurrentlyDragged = isDragging && draggedEvent?.id === event.id;
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <motion.div
+      className={`${className || ""} ${isCurrentlyDragged ? "opacity-50 cursor-grabbing" : "cursor-grab"}`}
+      draggable
+      onClick={(e: React.MouseEvent<HTMLDivElement>) => handleClick(e)}
+      onDragStart={(e: React.DragEvent<HTMLDivElement>) => {
+        e.dataTransfer.setData(
+          "text/plain",
+          event.id.toString(),
+        );
+        startDrag(event);
+      }}
+      onDragEnd={() => {
+        endDrag();
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+}

package/dist/src/products/full-calendar/dnd/droppable-area.tsx

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+import { useDragDrop } from "../contexts/dnd-context";
+
+interface DroppableAreaProps {
+  date: Date;
+  hour?: number;
+  minute?: number;
+  children: ReactNode;
+  className?: string;
+}
+
+export function DroppableArea({
+  date,
+  hour,
+  minute,
+  children,
+  className,
+}: DroppableAreaProps) {
+  const { handleEventDrop, isDragging } = useDragDrop();
+
+  return (
+    <div
+      // biome-ignore lint/a11y/useSemanticElements: Using gridcell role for CSS grid layout where td is not applicable
+      role="gridcell"
+      aria-label="Droppable area"
+      tabIndex={-1}
+      className={`${className || ""} ${isDragging ? "drop-target" : ""}`}
+      onDragOver={(e) => {
+        // Prevent default to allow drop
+        e.preventDefault();
+        e.currentTarget.classList.add("bg-primary/10");
+      }}
+      onDragLeave={(e) => {
+        e.currentTarget.classList.remove("bg-primary/10");
+      }}
+      onDrop={(e) => {
+        e.preventDefault();
+        e.currentTarget.classList.remove("bg-primary/10");
+        handleEventDrop(date, hour, minute);
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/dist/src/products/full-calendar/dnd/resizable-event.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import {
+  addMinutes,
+  differenceInMinutes,
+  format,
+  isAfter,
+  isBefore,
+  parseISO,
+} from "date-fns";
+import { motion } from "../shims/motion";
+import { Resizable, type ResizeCallback } from "../shims/re-resizable";
+import type React from "react";
+import { useCallback, useMemo, useState } from "react";
+import { cn } from "@monkey-mini-app/ui/lib/utils";
+import { useCalendar } from "../contexts/calendar-context";
+
+import type { IEvent } from "../interfaces";
+
+interface ResizableEventBlockProps {
+  event: IEvent;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const PIXELS_PER_HOUR = 96;
+const MINUTES_PER_PIXEL = 60 / PIXELS_PER_HOUR;
+const MIN_DURATION = 15; // in minutes
+
+export function ResizableEvent({
+  event,
+  children,
+  className,
+}: ResizableEventBlockProps) {
+  const { updateEvent, use24HourFormat } = useCalendar();
+
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizePreview, setResizePreview] = useState<{
+    start: string;
+    end: string;
+  } | null>(null);
+
+  const start = useMemo(() => parseISO(event.startDate), [event.startDate]);
+  const end = useMemo(() => parseISO(event.endDate), [event.endDate]);
+  const durationInMinutes = useMemo(
+    () => differenceInMinutes(end, start),
+    [start, end],
+  );
+
+  const resizeBoundaries = useMemo(() => {
+    const dayStart = new Date(start);
+    dayStart.setHours(0, 0, 0, 0);
+
+    const dayEnd = new Date(start);
+    dayEnd.setHours(23, 59, 59, 999);
+
+    return { dayStart, dayEnd };
+  }, [start]);
+
+  const handleResizeStart = useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  const handleResize: ResizeCallback = useCallback(
+    (_, direction, ref) => {
+      const newHeight = parseInt(ref.style.height, 10);
+      const newDuration = Math.max(
+        MIN_DURATION,
+        Math.round((newHeight + 8) * MINUTES_PER_PIXEL),
+      );
+      const delta = newDuration - durationInMinutes;
+
+      let newStart = start;
+      let newEnd = end;
+
+      if (direction.includes("top")) {
+        newStart = addMinutes(start, -delta);
+      } else if (direction.includes("bottom")) {
+        newEnd = addMinutes(end, delta);
+      }
+
+      if (isBefore(newStart, resizeBoundaries.dayStart)) {
+        newStart = resizeBoundaries.dayStart;
+      }
+      if (isAfter(newEnd, resizeBoundaries.dayEnd)) {
+        newEnd = resizeBoundaries.dayEnd;
+      }
+
+      setResizePreview({
+        start: format(newStart, use24HourFormat ? "HH:mm" : "h:mm a"),
+        end: format(newEnd, use24HourFormat ? "HH:mm" : "h:mm a"),
+      });
+
+      updateEvent({
+        ...event,
+        startDate: newStart.toISOString(),
+        endDate: newEnd.toISOString(),
+      });
+    },
+    [
+      start,
+      end,
+      durationInMinutes,
+      resizeBoundaries,
+      use24HourFormat,
+      updateEvent,
+      event,
+    ],
+  );
+
+  const handleResizeStop = useCallback(() => {
+    setIsResizing(false);
+    setResizePreview(null);
+  }, []);
+
+  const resizeConfig = useMemo(
+    () => ({
+      minHeight: 15,
+      maxHeight: 1440,
+      enable: {
+        top: true,
+        bottom: true,
+        topRight: false,
+        bottomRight: false,
+        bottomLeft: false,
+        topLeft: false,
+      },
+      handleStyles: {
+        top: {
+          cursor: "ns-resize",
+          height: "8px",
+          top: "-4px",
+          backgroundColor: "transparent",
+        },
+        bottom: {
+          cursor: "ns-resize",
+          height: "8px",
+          bottom: "-4px",
+          backgroundColor: "transparent",
+        },
+      },
+      handleClasses: {
+        top: "transition-colors rounded-sm",
+        bottom: "transition-colors rounded-sm",
+      },
+      onResizeStart: handleResizeStart,
+      onResize: handleResize,
+      onResizeStop: handleResizeStop,
+      className: cn(
+        "transition-all duration-200",
+        isResizing && "z-50 shadow-lg",
+      ),
+    }),
+    [handleResizeStart, handleResize, handleResizeStop, isResizing],
+  );
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      transition={{ duration: 0.2 }}
+      className={cn("relative group", className)}
+    >
+      <Resizable {...resizeConfig}>{children}</Resizable>
+
+      {isResizing && resizePreview && (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-lg z-50 whitespace-nowrap"
+        >
+          {resizePreview.start} - {resizePreview.end}
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}