@mohou/ui 1.0.20

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

@@ -0,0 +1,254 @@
+
+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 | undefined
+  badge?: 'dot' | 'colored' | undefined
+  date?: Date | undefined
+  onEventsChange?: ((events: IEvent[]) => void) | undefined
+}) {
+
+  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/src/products/full-calendar/contexts/dnd-context.tsx

@@ -0,0 +1,156 @@
+
+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
+}

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

@@ -0,0 +1,186 @@
+
+import { addMinutes, format, set } from 'date-fns'
+import { type ReactNode, useEffect, useMemo, useState } from 'react'
+
+import { Button } from '@mohou/ui/components/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@mohou/ui/components/dialog'
+import { Input } from '@mohou/ui/components/input'
+import { Label } from '@mohou/ui/components/label'
+import { Textarea } from '@mohou/ui/components/textarea'
+import { DateTimePicker } from '@mohou/ui/composites/date-time-picker'
+import { useLabels } from '@mohou/ui/i18n/context'
+import { cn } from '@mohou/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/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 '@mohou/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>
+  )
+}