@monkey-mini-app/ui 0.1.0 → 0.1.4

package/dist/src/products/file-dropzone.tsx

@@ -6,6 +6,13 @@ import { cn } from "@monkey-mini-app/ui/lib/utils"
 import { useLabels } from "@monkey-mini-app/ui/i18n/context"
 import { Attachment, AttachmentContent, AttachmentTitle } from "@monkey-mini-app/ui/components/attachment"
 
+/**
+ * Drag-drop + click file picker.
+ * @when Getting a local File into the app (then upload via `ctx.http` in the api layer).
+ * @example
+ * <FileDropzone onFiles={(fs) => set(fs)} />
+ * @family Form
+ */
 export function FileDropzone({
   files,
   onFiles,

package/dist/src/products/full-calendar/animations.ts

@@ -0,0 +1,38 @@
+import type { Variants } from "./shims/motion";
+
+export const fadeIn: Variants = {
+	initial: { opacity: 0 },
+	animate: { opacity: 1 },
+	exit: { opacity: 0 },
+};
+
+export const slideFromLeft: Variants = {
+	initial: { x: -20, opacity: 0 },
+	animate: { x: 0, opacity: 1 },
+	exit: { x: 20, opacity: 0 },
+};
+
+export const slideFromRight: Variants = {
+	initial: { x: 20, opacity: 0 },
+	animate: { x: 0, opacity: 1 },
+	exit: { x: -20, opacity: 0 },
+};
+
+export const transition = {
+	type: "spring",
+	stiffness: 200,
+	damping: 20,
+} as const;
+
+export const staggerContainer: Variants = {
+	animate: {
+		transition: {
+			staggerChildren: 0.1,
+		},
+	},
+};
+
+export const buttonHover: Variants = {
+	hover: { scale: 1.05 },
+	tap: { scale: 0.95 },
+};

package/dist/src/products/full-calendar/calendar-body.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { isSameDay, parseISO } from "date-fns";
+import { motion } from "./shims/motion";
+import { fadeIn, transition } from "./animations";
+import { useCalendar } from "./contexts/calendar-context";
+import { AgendaEvents } from "./views/agenda-view/agenda-events";
+import { CalendarMonthView } from "./views/month-view/calendar-month-view";
+import { CalendarDayView } from "./views/week-and-day-view/calendar-day-view";
+import { CalendarWeekView } from "./views/week-and-day-view/calendar-week-view";
+import { CalendarYearView } from "./views/year-view/calendar-year-view";
+
+export function CalendarBody() {
+  const { view, events } = useCalendar();
+
+  const singleDayEvents = events.filter((event) => {
+    const startDate = parseISO(event.startDate);
+    const endDate = parseISO(event.endDate);
+    return isSameDay(startDate, endDate);
+  });
+
+  const multiDayEvents = events.filter((event) => {
+    const startDate = parseISO(event.startDate);
+    const endDate = parseISO(event.endDate);
+    return !isSameDay(startDate, endDate);
+  });
+
+  return (
+    <div className="w-full h-full overflow-scroll relative">
+      <motion.div
+        key={view}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        variants={fadeIn}
+        transition={transition}
+      >
+        {view === "month" && (
+          <CalendarMonthView
+            singleDayEvents={singleDayEvents}
+            multiDayEvents={multiDayEvents}
+          />
+        )}
+        {view === "week" && (
+          <CalendarWeekView
+            singleDayEvents={singleDayEvents}
+            multiDayEvents={multiDayEvents}
+          />
+        )}
+        {view === "day" && (
+          <CalendarDayView
+            singleDayEvents={singleDayEvents}
+            multiDayEvents={multiDayEvents}
+          />
+        )}
+        {view === "year" && (
+          <CalendarYearView
+            singleDayEvents={singleDayEvents}
+            multiDayEvents={multiDayEvents}
+          />
+        )}
+        {view === "agenda" && (
+          <motion.div
+            key="agenda"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={fadeIn}
+            transition={transition}
+          >
+            <AgendaEvents />
+          </motion.div>
+        )}
+      </motion.div>
+    </div>
+  );
+}

package/dist/src/products/full-calendar/constants.ts

@@ -0,0 +1,10 @@
+import type { TEventColor } from "./types";
+
+export const COLORS: TEventColor[] = [
+	"blue",
+	"green",
+	"red",
+	"yellow",
+	"purple",
+	"orange",
+];

package/dist/src/products/full-calendar/contexts/calendar-context.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import type React from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+import { useLocalStorage } from "../hooks";
+import type { IEvent, IUser } from "../interfaces";
+import type { TCalendarView, TEventColor } from "../types";
+
+interface ICalendarContext {
+  selectedDate: Date;
+  view: TCalendarView;
+  setView: (view: TCalendarView) => void;
+  agendaModeGroupBy: "date" | "color";
+  setAgendaModeGroupBy: (groupBy: "date" | "color") => void;
+  use24HourFormat: boolean;
+  toggleTimeFormat: () => void;
+  startOfDayHour: number;
+  setStartOfDayHour: (newVal: number) => void;
+  setSelectedDate: (date: Date | undefined) => void;
+  selectedUserId: IUser["id"] | "all";
+  setSelectedUserId: (userId: IUser["id"] | "all") => void;
+  badgeVariant: "dot" | "colored";
+  setBadgeVariant: (variant: "dot" | "colored") => void;
+  selectedColors: TEventColor[];
+  filterEventsBySelectedColors: (colors: TEventColor) => void;
+  filterEventsBySelectedUser: (userId: IUser["id"] | "all") => void;
+  users: IUser[];
+  events: IEvent[];
+  addEvent: (event: IEvent) => void;
+  updateEvent: (event: IEvent) => void;
+  removeEvent: (eventId: number) => void;
+  clearFilter: () => void;
+}
+
+interface CalendarSettings {
+  badgeVariant: "dot" | "colored";
+  view: TCalendarView;
+  use24HourFormat: boolean;
+  startOfDayHour: number;
+  agendaModeGroupBy: "date" | "color";
+}
+
+export const MIN_SCROLL_HOUR = 0;
+// With a fixed calendar height, having 16h on top
+// of the frame allows to see the rest of the day
+export const MAX_SCROLL_HOUR = 16;
+
+const DEFAULT_SETTINGS: CalendarSettings = {
+  badgeVariant: "colored",
+  view: "day",
+  use24HourFormat: true,
+  startOfDayHour: 8,
+  agendaModeGroupBy: "date",
+};
+
+const CalendarContext = createContext({} as ICalendarContext);
+
+export function CalendarProvider({
+  children,
+  users,
+  events,
+  badge = "colored",
+  view = "day",
+  date,
+  onEventsChange,
+}: {
+  children: React.ReactNode;
+  users: IUser[];
+  events: IEvent[];
+  view?: TCalendarView;
+  badge?: "dot" | "colored";
+  date?: Date;
+  onEventsChange?: (events: IEvent[]) => void;
+}) {
+
+  const [rawSettings, setSettings] = useLocalStorage<Partial<CalendarSettings>>("calendar-settings", {});
+
+  const settings: CalendarSettings = {
+    ...DEFAULT_SETTINGS,
+    badgeVariant: badge,
+    view: view,
+    ...rawSettings,
+  };
+
+  const [badgeVariant, setBadgeVariantState] = useState<"dot" | "colored">(
+    settings.badgeVariant,
+  );
+  const [currentView, setCurrentViewState] = useState<TCalendarView>(
+    settings.view,
+  );
+  const [use24HourFormat, setUse24HourFormatState] = useState<boolean>(
+    settings.use24HourFormat,
+  );
+  const [startOfDayHour, setStartOfDayHourState] = useState<number>(
+    settings.startOfDayHour,
+  );
+  const [agendaModeGroupBy, setAgendaModeGroupByState] = useState<
+    "date" | "color"
+  >(settings.agendaModeGroupBy);
+
+  const [selectedDate, setSelectedDate] = useState(date ?? new Date());
+  const [selectedUserId, setSelectedUserId] = useState<IUser["id"] | "all">(
+    "all",
+  );
+  const [selectedColors, setSelectedColors] = useState<TEventColor[]>([]);
+
+  const [allEvents, setAllEvents] = useState<IEvent[]>(events || []);
+  const [filteredEvents, setFilteredEvents] = useState<IEvent[]>(events || []);
+
+  useEffect(() => {
+    setAllEvents(events || []);
+    setFilteredEvents(events || []);
+  }, [events]);
+
+  const updateSettings = (newPartialSettings: Partial<CalendarSettings>) => {
+    setSettings((prev) => ({
+      ...prev,
+      ...newPartialSettings,
+    }));
+  };
+
+  const setBadgeVariant = (variant: "dot" | "colored") => {
+    setBadgeVariantState(variant);
+    updateSettings({ badgeVariant: variant });
+  };
+
+  const setView = (newView: TCalendarView) => {
+    setCurrentViewState(newView);
+    updateSettings({ view: newView });
+  };
+
+  const toggleTimeFormat = () => {
+    const newValue = !use24HourFormat;
+    setUse24HourFormatState(newValue);
+    updateSettings({ use24HourFormat: newValue });
+  };
+
+  const setStartOfDayHour = (newVal: number) => {
+    if (!isNaN(newVal) && newVal >= MIN_SCROLL_HOUR && newVal <= MAX_SCROLL_HOUR) {
+      setStartOfDayHourState(newVal);
+      updateSettings({ startOfDayHour: newVal });
+    }
+  };
+
+
+  const setAgendaModeGroupBy = (groupBy: "date" | "color") => {
+    setAgendaModeGroupByState(groupBy);
+    updateSettings({ agendaModeGroupBy: groupBy });
+  };
+
+  const filterEventsBySelectedColors = (color: TEventColor) => {
+    const isColorSelected = selectedColors.includes(color);
+    const newColors = isColorSelected
+      ? selectedColors.filter((c) => c !== color)
+      : [...selectedColors, color];
+
+    if (newColors.length > 0) {
+      const filtered = allEvents.filter((event) => {
+        const eventColor = event.color || "blue";
+        return newColors.includes(eventColor);
+      });
+      setFilteredEvents(filtered);
+    } else {
+      setFilteredEvents(allEvents);
+    }
+
+    setSelectedColors(newColors);
+  };
+
+  const filterEventsBySelectedUser = (userId: IUser["id"] | "all") => {
+    setSelectedUserId(userId);
+    if (userId === "all") {
+      setFilteredEvents(allEvents);
+    } else {
+      const filtered = allEvents.filter((event) => event.user.id === userId);
+      setFilteredEvents(filtered);
+    }
+  };
+
+  const handleSelectDate = (date: Date | undefined) => {
+    if (!date) return;
+    setSelectedDate(date);
+  };
+
+  const addEvent = (event: IEvent) => {
+    const next = [...allEvents, event];
+    setAllEvents(next);
+    setFilteredEvents((prev) => [...prev, event]);
+    onEventsChange?.(next);
+  };
+
+  const updateEvent = (event: IEvent) => {
+    const updated = {
+      ...event,
+      startDate: new Date(event.startDate).toISOString(),
+      endDate: new Date(event.endDate).toISOString(),
+    };
+    const next = allEvents.map((e) => (e.id === event.id ? updated : e));
+    setAllEvents(next);
+    setFilteredEvents((prev) => prev.map((e) => (e.id === event.id ? updated : e)));
+    onEventsChange?.(next);
+  };
+
+  const removeEvent = (eventId: number) => {
+    const next = allEvents.filter((e) => e.id !== eventId);
+    setAllEvents(next);
+    setFilteredEvents((prev) => prev.filter((e) => e.id !== eventId));
+    onEventsChange?.(next);
+  };
+
+  const clearFilter = () => {
+    setFilteredEvents(allEvents);
+    setSelectedColors([]);
+    setSelectedUserId("all");
+  };
+
+  const value = {
+    selectedDate,
+    setSelectedDate: handleSelectDate,
+    selectedUserId,
+    setSelectedUserId,
+    badgeVariant,
+    setBadgeVariant,
+    users,
+    selectedColors,
+    filterEventsBySelectedColors,
+    filterEventsBySelectedUser,
+    events: filteredEvents,
+    view: currentView,
+    use24HourFormat,
+    toggleTimeFormat,
+    startOfDayHour,
+    setStartOfDayHour,
+    setView,
+    agendaModeGroupBy,
+    setAgendaModeGroupBy,
+    addEvent,
+    updateEvent,
+    removeEvent,
+    clearFilter,
+  };
+
+  return (
+    <CalendarContext.Provider value={value}>
+      {children}
+    </CalendarContext.Provider>
+  );
+}
+
+export function useCalendar(): ICalendarContext {
+  const context = useContext(CalendarContext);
+  if (!context)
+    throw new Error("useCalendar must be used within a CalendarProvider.");
+  return context;
+}

package/dist/src/products/full-calendar/contexts/dnd-context.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import React, {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+  useMemo,
+} from "react";
+import { toast } from "../shims/sonner";
+import { useCalendar } from "./calendar-context";
+import type { IEvent } from "../interfaces";
+
+interface DragDropContextType {
+  draggedEvent: IEvent | null;
+  isDragging: boolean;
+  startDrag: (event: IEvent) => void;
+  endDrag: () => void;
+  handleEventDrop: (date: Date, hour?: number, minute?: number) => void;
+}
+
+interface DndProviderProps {
+  children: ReactNode;
+}
+
+const DragDropContext = createContext<DragDropContextType | undefined>(
+  undefined,
+);
+
+export function DndProvider({ children }: DndProviderProps) {
+  const { updateEvent } = useCalendar();
+  const [dragState, setDragState] = useState<{
+    draggedEvent: IEvent | null;
+    isDragging: boolean;
+  }>({ draggedEvent: null, isDragging: false });
+
+  const onEventDroppedRef = useRef<
+    ((event: IEvent, newStartDate: Date, newEndDate: Date) => void) | null
+  >(null);
+
+  const startDrag = useCallback((event: IEvent) => {
+    setDragState({ draggedEvent: event, isDragging: true });
+  }, []);
+
+  const endDrag = useCallback(() => {
+    setDragState({ draggedEvent: null, isDragging: false });
+  }, []);
+
+  const calculateNewDates = useCallback(
+    (event: IEvent, targetDate: Date, hour?: number, minute?: number) => {
+      const originalStart = new Date(event.startDate);
+      const originalEnd = new Date(event.endDate);
+      const duration = originalEnd.getTime() - originalStart.getTime();
+
+      const newStart = new Date(targetDate);
+      if (hour !== undefined) {
+        newStart.setHours(hour, minute || 0, 0, 0);
+      } else {
+        newStart.setHours(
+          originalStart.getHours(),
+          originalStart.getMinutes(),
+          0,
+          0,
+        );
+      }
+
+      return {
+        newStart,
+        newEnd: new Date(newStart.getTime() + duration),
+      };
+    },
+    [],
+  );
+
+  const isSamePosition = useCallback((date1: Date, date2: Date) => {
+    return date1.getTime() === date2.getTime();
+  }, []);
+
+  const handleEventDrop = useCallback(
+    (targetDate: Date, hour?: number, minute?: number) => {
+      const { draggedEvent } = dragState;
+      if (!draggedEvent) return;
+
+      const { newStart, newEnd } = calculateNewDates(
+        draggedEvent,
+        targetDate,
+        hour,
+        minute,
+      );
+      const originalStart = new Date(draggedEvent.startDate);
+
+      // Check if dropped in same position
+      if (isSamePosition(originalStart, newStart)) {
+        endDrag();
+        return;
+      }
+
+      // Instantly update event
+      const callback = onEventDroppedRef.current;
+      if (callback) {
+        callback(draggedEvent, newStart, newEnd);
+      }
+      endDrag();
+    },
+    [dragState, calculateNewDates, isSamePosition, endDrag],
+  );
+
+  // Default event update handler
+  const handleEventUpdate = useCallback(
+    (event: IEvent, newStartDate: Date, newEndDate: Date) => {
+      try {
+        const updatedEvent = {
+          ...event,
+          startDate: newStartDate.toISOString(),
+          endDate: newEndDate.toISOString(),
+        };
+        updateEvent(updatedEvent);
+        toast.success("Event updated successfully");
+      } catch {
+        toast.error("Failed to update event");
+      }
+    },
+    [updateEvent],
+  );
+
+  // Set default callback
+  React.useEffect(() => {
+    onEventDroppedRef.current = handleEventUpdate;
+  }, [handleEventUpdate]);
+
+  const contextValue = useMemo(
+    () => ({
+      draggedEvent: dragState.draggedEvent,
+      isDragging: dragState.isDragging,
+      startDrag,
+      endDrag,
+      handleEventDrop,
+    }),
+    [dragState, startDrag, endDrag, handleEventDrop],
+  );
+
+  return (
+    <DragDropContext.Provider value={contextValue}>
+      {children}
+    </DragDropContext.Provider>
+  );
+}
+
+export function useDragDrop() {
+  const context = useContext(DragDropContext);
+  if (!context) {
+    throw new Error("useDragDrop must be used within a DragDropProvider");
+  }
+  return context;
+}