@mohou/ui 1.0.20

package/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 '@mohou/ui/components/scroll-area';
+import { useDateLocale, useLabels } from '@mohou/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/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>
+  )
+}

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

@@ -0,0 +1,251 @@
+import { addDays, format, isSameDay, parseISO, startOfWeek } from 'date-fns';
+import { motion } from '../../shims/motion';
+import { ScrollArea } from '@mohou/ui/components/scroll-area';
+import {
+  fadeIn,
+  staggerContainer,
+  transition,
+} from '../../animations';
+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 { RenderGroupedEvents } from './render-grouped-events';
+import {
+  WeekViewMultiDayEventsRow
+} from './week-view-multi-day-events-row';
+
+interface IProps {
+  singleDayEvents: IEvent[]
+  multiDayEvents: IEvent[]
+}
+
+export function CalendarWeekView({ singleDayEvents, multiDayEvents }: IProps) {
+  const { selectedDate, use24HourFormat } = useCalendar()
+    const {
+    selection,
+    draft,
+    clearDraft,
+    overlayStyle,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+  } = useTimeRangeCreate()
+
+    const weekStart = startOfWeek(selectedDate)
+    const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))
+    const hours = Array.from({ length: 24 }, (_, i) => i)
+
+    return (
+    <motion.div
+      data-testid="calendar-week-grid"
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={fadeIn}
+      transition={transition}
+    >
+      <motion.div
+        className="flex flex-col items-center justify-center border-b p-4 text-sm sm:hidden"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={transition}
+      >
+        <p>Weekly view is not recommended on smaller devices.</p>
+        <p>Please switch to a desktop device or use the daily view instead.</p>
+      </motion.div>
+
+      <motion.div
+        className="flex-col sm:flex"
+        variants={staggerContainer}
+      >
+        <div>
+          <WeekViewMultiDayEventsRow
+            selectedDate={selectedDate}
+            multiDayEvents={multiDayEvents}
+          />
+
+          {/* Week header */}
+          <motion.div
+            className="relative z-20 flex border-b"
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={transition}
+          >
+            {/* Time column header - responsive width */}
+            <div className="w-18"></div>
+            <div className="grid flex-1 grid-cols-7  border-l">
+              {weekDays.map((day, index) => (
+                <motion.span
+                  key={day.toISOString()}
+                  className="py-1 sm:py-2 text-center text-xs font-medium text-t-quaternary"
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.05, ...transition }}
+                >
+                  {/* Mobile: Show only day abbreviation and number */}
+                  <span className="block sm:hidden">
+                    {format(day, 'EEE').charAt(0)}
+                    <span className="block font-semibold text-t-secondary text-xs">
+                      {format(day, 'd')}
+                    </span>
+                  </span>
+                  {/* Desktop: Show full format */}
+                  <span className="hidden sm:inline">
+                    {format(day, 'EE')}{' '}
+                    <span className="ml-1 font-semibold text-t-secondary">
+                      {format(day, 'd')}
+                    </span>
+                  </span>
+                </motion.span>
+              ))}
+            </div>
+          </motion.div>
+
+        </div>
+
+        <ScrollArea className="h-[736px]">
+          <div className="flex">
+            {/* Hours column */}
+            <motion.div className="relative w-18" variants={staggerContainer}>
+              {hours.map((hour, index) => (
+                <motion.div
+                  key={hour}
+                  className="relative"
+                  style={{ height: `${HOUR_HEIGHT_PX}px` }}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: index * 0.02, ...transition }}
+                >
+                  <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>
+                </motion.div>
+              ))}
+            </motion.div>
+
+            {/* Week grid */}
+            <motion.div
+              className="relative flex-1 border-l"
+              variants={staggerContainer}
+            >
+              <div className="grid grid-cols-7 divide-x">
+                {weekDays.map((day, dayIndex) => {
+                  const dayEvents = singleDayEvents.filter(
+                    (event) =>
+                      isSameDay(parseISO(event.startDate), day) ||
+                                            isSameDay(parseISO(event.endDate), day),
+                  );
+                  const groupedEvents = groupEvents(dayEvents)
+
+                                    const showOverlay =
+                    selection != null &&
+                                        isSameDay(selection.day, day) &&
+                                        overlayStyle != null
+
+                                    return (
+                    <motion.div
+                      key={day.toISOString()}
+                      className="relative touch-none select-none"
+                      data-testid="calendar-day-column"
+                      data-day={day.toISOString()}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ delay: dayIndex * 0.1, ...transition }}
+                      onPointerDown={e => onPointerDown(e, day, e.currentTarget)}
+                      onPointerMove={onPointerMove}
+                      onPointerUp={onPointerUp}
+                      onPointerCancel={onPointerUp}
+                    >
+                      {hours.map((hour, index) => (
+                        <motion.div
+                          key={hour}
+                          className="relative"
+                          style={{ height: `${HOUR_HEIGHT_PX}px` }}
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1 }}
+                          transition={{ delay: index * 0.01, ...transition }}
+                        >
+                          {index !== 0 && (
+                            <div
+                              className="pointer-events-none absolute inset-x-0 top-0 border-b"></div>
+                          )}
+
+                          <DroppableArea
+                            date={day}
+                            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={day}
+                            hour={hour}
+                            minute={30}
+                            className="absolute inset-x-0 bottom-0 h-[48px]"
+                          >
+                            <div className="absolute inset-0" />
+                          </DroppableArea>
+                        </motion.div>
+                      ))}
+
+                      {showOverlay ? (
+                        <div
+                          className="pointer-events-none absolute inset-x-0.5 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={day}
+                        />
+                      </div>
+                    </motion.div>
+                  );
+                })}
+              </div>
+
+              <CalendarTimeline/>
+            </motion.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>
+      </motion.div>
+    </motion.div>
+  );
+}

package/src/products/full-calendar/views/week-and-day-view/day-view-multi-day-events-row.tsx

@@ -0,0 +1,73 @@
+import {
+  differenceInDays,
+  endOfDay,
+  isWithinInterval,
+  parseISO,
+  startOfDay,
+} from 'date-fns';
+import type { IEvent } from '../../interfaces';
+import { MonthEventBadge } from '../month-view/month-event-badge';
+
+interface IProps {
+  selectedDate: Date
+  multiDayEvents: IEvent[]
+}
+
+export function DayViewMultiDayEventsRow({
+  selectedDate,
+  multiDayEvents,
+}: IProps) {
+  const dayStart = startOfDay(selectedDate)
+  const dayEnd = endOfDay(selectedDate)
+
+  const multiDayEventsInDay = multiDayEvents
+    .filter((event) => {
+      const eventStart = parseISO(event.startDate)
+      const eventEnd = parseISO(event.endDate)
+
+      return (
+        isWithinInterval(dayStart, { start: eventStart, end: eventEnd }) ||
+        isWithinInterval(dayEnd, { start: eventStart, end: eventEnd }) ||
+        (eventStart <= dayStart && eventEnd >= dayEnd)
+      )
+    })
+    .sort((a, b) => {
+      const durationA = differenceInDays(
+        parseISO(a.endDate),
+        parseISO(a.startDate),
+      )
+      const durationB = differenceInDays(
+        parseISO(b.endDate),
+        parseISO(b.startDate),
+      )
+      return durationB - durationA
+    });
+
+  if (multiDayEventsInDay.length === 0) return null
+
+  return (
+    <div className="flex border-b">
+      <div className="w-18"></div>
+      <div className="flex flex-1 flex-col gap-1 border-l py-1">
+        {multiDayEventsInDay.map((event) => {
+          const eventStart = startOfDay(parseISO(event.startDate))
+          const eventEnd = startOfDay(parseISO(event.endDate))
+          const currentDate = startOfDay(selectedDate)
+
+          const eventTotalDays = differenceInDays(eventEnd, eventStart) + 1
+          const eventCurrentDay = differenceInDays(currentDate, eventStart) + 1
+
+          return (
+            <MonthEventBadge
+              key={event.id}
+              event={event}
+              cellDate={selectedDate}
+              eventCurrentDay={eventCurrentDay}
+              eventTotalDays={eventTotalDays}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}