@mohou/ui 1.0.20

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

@@ -0,0 +1,99 @@
+
+import { format, parseISO } from 'date-fns'
+import { Calendar, Clock, Text, User } from 'lucide-react'
+import { type ReactNode, useState } from 'react'
+
+import { Button } from '@mohou/ui/components/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@mohou/ui/components/dialog'
+import { ScrollArea } from '@mohou/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/src/products/full-calendar/dialogs/events-list-dialog.tsx

@@ -0,0 +1,86 @@
+
+import { format } from 'date-fns'
+import { type ReactNode, useState } from 'react'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@mohou/ui/components/dialog'
+import { cn } from '@mohou/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/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/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/src/products/full-calendar/dnd/resizable-event.tsx

@@ -0,0 +1,178 @@
+
+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 '@mohou/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>
+  )
+}

package/src/products/full-calendar/header/calendar-header.tsx

@@ -0,0 +1,64 @@
+
+import { motion } from '../shims/motion';
+import { Plus } from 'lucide-react';
+
+import { Button } from '@mohou/ui/components/button';
+import { useLabels } from '@mohou/ui/i18n/context';
+import {
+  slideFromLeft,
+  slideFromRight,
+  transition,
+} from '../animations';
+import { useCalendar } from '../contexts/calendar-context';
+import { AddEditEventDialog } from '../dialogs/add-edit-event-dialog';
+import { DateNavigator } from './date-navigator';
+import FilterEvents from './filter';
+import { TodayButton } from './today-button';
+import { UserSelect } from './user-select';
+import { Settings } from '../settings/settings';
+import Views from './view-tabs';
+
+export function CalendarHeader() {
+  const { view, events, users } = useCalendar()
+  const t = useLabels('eventCalendar');
+
+  return (
+    <div className="flex flex-col gap-4 border-b p-4 lg:flex-row lg:items-center lg:justify-between">
+      <motion.div
+        className="flex items-center gap-3"
+        variants={slideFromLeft}
+        initial="initial"
+        animate="animate"
+        transition={transition}
+      >
+        <TodayButton />
+        <DateNavigator view={view} events={events} />
+      </motion.div>
+
+      <motion.div
+        className="flex flex-col gap-4 lg:flex-row lg:items-center lg:gap-1.5"
+        variants={slideFromRight}
+        initial="initial"
+        animate="animate"
+        transition={transition}
+      >
+        <div className="options flex-wrap flex items-center gap-4 md:gap-2">
+          <FilterEvents />
+          <Views />
+        </div>
+
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:gap-1.5">
+          {users.length > 0 ? <UserSelect /> : null}
+
+          <AddEditEventDialog>
+            <Button data-testid="calendar-add-event">
+              <Plus className="h-4 w-4" />
+              {t.addEvent}
+            </Button>
+          </AddEditEventDialog>
+        </div>
+        <Settings />
+      </motion.div>
+    </div>
+  )
+}

package/src/products/full-calendar/header/date-navigator.tsx

@@ -0,0 +1,110 @@
+import { formatDate } from 'date-fns';
+import { AnimatePresence, motion } from '../shims/motion';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useMemo } from 'react';
+import { Badge } from '@mohou/ui/components/badge';
+import { Button } from '@mohou/ui/components/button';
+import { useDateLocale, useLabels } from '@mohou/ui/i18n/context';
+import { buttonHover, transition } from '../animations';
+import { useCalendar } from '../contexts/calendar-context';
+
+import {
+  getEventsCount,
+  navigateDate,
+  rangeText,
+} from '../helpers';
+
+import type { IEvent } from '../interfaces';
+import type { TCalendarView } from '../types';
+
+interface IProps {
+  view: TCalendarView
+  events: IEvent[]
+}
+
+const MotionButton = motion.create(Button)
+const MotionBadge = motion.create(Badge)
+
+export function DateNavigator({ view, events }: IProps) {
+  const { selectedDate, setSelectedDate } = useCalendar()
+  const t = useLabels('eventCalendar');
+  const dateLocale = useDateLocale()
+
+  const month = formatDate(selectedDate, 'MMMM', { locale: dateLocale })
+  const year = selectedDate.getFullYear()
+
+  const eventCount = useMemo(
+    () => getEventsCount(events, selectedDate, view),
+    [events, selectedDate, view],
+  )
+
+  const handlePrevious = () =>
+    setSelectedDate(navigateDate(selectedDate, view, 'previous'))
+  const handleNext = () =>
+    setSelectedDate(navigateDate(selectedDate, view, 'next'))
+
+  return (
+    <div className="space-y-0.5">
+      <div className="flex items-center gap-2">
+        <motion.span
+          className="text-lg font-semibold"
+          initial={{ x: -20, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          transition={transition}
+        >
+          {month} {year}
+        </motion.span>
+        <AnimatePresence mode="wait">
+          <MotionBadge
+            key={eventCount}
+            variant="secondary"
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0 }}
+            transition={transition}
+          >
+            {t.eventsCount(eventCount)}
+          </MotionBadge>
+        </AnimatePresence>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <MotionButton
+          variant="outline"
+          size="icon"
+          className="h-6 w-6"
+          onClick={handlePrevious}
+          variants={buttonHover}
+          whileHover="hover"
+          whileTap="tap"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </MotionButton>
+
+        <motion.p
+          className="text-sm text-muted-foreground"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={transition}
+        >
+          {rangeText(view, selectedDate, {
+            locale: dateLocale,
+            formatError: t.formatError,
+          })}
+        </motion.p>
+
+        <MotionButton
+          variant="outline"
+          size="icon"
+          className="h-6 w-6"
+          onClick={handleNext}
+          variants={buttonHover}
+          whileHover="hover"
+          whileTap="tap"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </MotionButton>
+      </div>
+    </div>
+  )
+}

package/src/products/full-calendar/header/filter.tsx

@@ -0,0 +1,58 @@
+import { CheckIcon, Filter, RefreshCcw } from 'lucide-react'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@mohou/ui/components/dropdown-menu'
+import { Separator } from '@mohou/ui/components/separator'
+import { useLabels } from '@mohou/ui/i18n/context'
+
+import { useCalendar } from '../contexts/calendar-context'
+import type { TEventColor } from '../types'
+
+const COLORS: TEventColor[] = ['blue', 'green', 'red', 'yellow', 'purple', 'orange']
+
+export default function FilterEvents() {
+  const { selectedColors, filterEventsBySelectedColors, clearFilter } = useCalendar()
+  const t = useLabels('eventCalendar')
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="inline-flex size-8 items-center justify-center rounded-lg border border-border bg-background">
+        <Filter className="h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        {COLORS.map(color => (
+          <DropdownMenuItem
+            key={color}
+            className="flex cursor-pointer items-center gap-2"
+            onClick={(e) => {
+              e.preventDefault()
+              filterEventsBySelectedColors(color)
+            }}
+          >
+            <span className="size-3.5 rounded-full" style={{ backgroundColor: color }} />
+            <span className="flex items-center gap-2 capitalize">
+              {color}
+              {selectedColors.includes(color) ? <CheckIcon className="size-4 text-blue-500" /> : null}
+            </span>
+          </DropdownMenuItem>
+        ))}
+        <Separator className="my-2" />
+        <DropdownMenuItem
+          disabled={selectedColors.length === 0}
+          className="flex cursor-pointer gap-2"
+          onClick={(e) => {
+            e.preventDefault()
+            clearFilter()
+          }}
+        >
+          <RefreshCcw className="size-3.5" />
+          {t.clearFilter}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}