@mohou/ui 1.0.20

package/src/products/full-calendar/views/month-view/calendar-month-view.tsx

@@ -0,0 +1,69 @@
+import { motion } from '../../shims/motion';
+import { useMemo } from 'react';
+import {
+  staggerContainer,
+  transition,
+} from '../../animations';
+import { useLabels } from '@mohou/ui/i18n/context';
+import { useCalendar } from '../../contexts/calendar-context';
+
+import {
+  calculateMonthEventPositions,
+  getCalendarCells,
+} from '../../helpers';
+
+import type { IEvent } from '../../interfaces';
+import { DayCell } from './day-cell';
+
+interface IProps {
+  singleDayEvents: IEvent[]
+  multiDayEvents: IEvent[]
+}
+
+export function CalendarMonthView({ singleDayEvents, multiDayEvents }: IProps) {
+  const { selectedDate } = useCalendar()
+	const t = useLabels('eventCalendar');
+
+  const allEvents = [...multiDayEvents, ...singleDayEvents]
+
+	const cells = useMemo(() => getCalendarCells(selectedDate), [selectedDate])
+
+	const eventPositions = useMemo(
+    () =>
+      calculateMonthEventPositions(
+        multiDayEvents,
+        singleDayEvents,
+        selectedDate,
+      ),
+    [multiDayEvents, singleDayEvents, selectedDate],
+  );
+
+  return (
+    <motion.div initial="initial" animate="animate" variants={staggerContainer}>
+      <div className="grid grid-cols-7">
+        {t.weekdaysSun.map((day, index) => (
+          <motion.div
+            key={day}
+            className="flex items-center justify-center py-2"
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.05, ...transition }}
+          >
+            <span className="text-xs font-medium text-t-quaternary">{day}</span>
+          </motion.div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-7 overflow-hidden">
+        {cells.map(cell => (
+          <DayCell
+            key={cell.date.toISOString()}
+            cell={cell}
+            events={allEvents}
+            eventPositions={eventPositions}
+          />
+        ))}
+      </div>
+    </motion.div>
+  );
+}

package/src/products/full-calendar/views/month-view/day-cell.tsx

@@ -0,0 +1,200 @@
+
+import { cva } from 'class-variance-authority';
+import { isToday, startOfDay, isSunday, isSameMonth } from 'date-fns';
+import { motion } from '../../shims/motion';
+import { useMemo, useCallback } from 'react';
+
+import { cn } from '@mohou/ui/lib/utils';
+import { transition } from '../../animations';
+import { EventListDialog } from '../../dialogs/events-list-dialog';
+import { DroppableArea } from '../../dnd/droppable-area';
+import { getMonthCellEvents } from '../../helpers';
+import { useMediaQuery } from '../../hooks';
+import type { ICalendarCell, IEvent } from '../../interfaces';
+import { EventBullet } from './event-bullet';
+import { MonthEventBadge } from './month-event-badge';
+import { Button } from '@mohou/ui/components/button';
+import { Plus } from 'lucide-react';
+import { AddEditEventDialog } from '../../dialogs/add-edit-event-dialog';
+
+interface IProps {
+  cell: ICalendarCell
+  events: IEvent[]
+  eventPositions: Record<string, number>
+}
+
+export const dayCellVariants = cva('text-white', {
+  variants: {
+    color: {
+      blue: 'bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 ',
+      green:
+        'bg-green-600 dark:bg-green-500 hover:bg-green-700 dark:hover:bg-green-400',
+      red: 'bg-red-600 dark:bg-red-500 hover:bg-red-700 dark:hover:bg-red-400',
+      yellow:
+        'bg-yellow-600 dark:bg-yellow-500 hover:bg-yellow-700 dark:hover:bg-yellow-400',
+      purple:
+        'bg-purple-600 dark:bg-purple-500 hover:bg-purple-700 dark:hover:bg-purple-400',
+      orange:
+        'bg-orange-600 dark:bg-orange-500 hover:bg-orange-700 dark:hover:bg-orange-400',
+      gray: 'bg-gray-600 dark:bg-gray-500 hover:bg-gray-700 dark:hover:bg-gray-400',
+    },
+  },
+  defaultVariants: {
+    color: 'blue',
+  },
+})
+
+const MAX_VISIBLE_EVENTS = 3
+
+export function DayCell({ cell, events, eventPositions }: IProps) {
+  const { day, currentMonth, date } = cell
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  // Memoize cellEvents and currentCellMonth for performance
+  const { cellEvents, currentCellMonth } = useMemo(() => {
+    const cellEvents = getMonthCellEvents(date, events, eventPositions)
+    const currentCellMonth = startOfDay(
+      new Date(date.getFullYear(), date.getMonth(), 1),
+    )
+    return { cellEvents, currentCellMonth }
+  }, [date, events, eventPositions])
+
+  // Memoize event rendering for each position with animation
+  const renderEventAtPosition = useCallback(
+    (position: number) => {
+      const event = cellEvents.find(e => e.position === position)
+      if (!event) {
+        return (
+          <motion.div
+            key={`empty-${position}`}
+            className="lg:flex-1"
+            initial={false}
+            animate={false}
+          />
+        )
+      }
+      const showBullet = isSameMonth(
+        new Date(event.startDate),
+        currentCellMonth,
+      )
+
+      return (
+        <motion.div
+          key={`event-${event.id}-${position}`}
+          className="lg:flex-1"
+          initial={{ opacity: 0, x: -10 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: position * 0.1, ...transition }}
+        >
+          {showBullet && (
+            <EventBullet className="lg:hidden" color={event.color} />
+          )}
+          <MonthEventBadge
+            className="hidden lg:flex"
+            event={event}
+            cellDate={startOfDay(date)}
+          />
+        </motion.div>
+      )
+    },
+    [cellEvents, currentCellMonth, date],
+  )
+
+  const showMoreCount = cellEvents.length - MAX_VISIBLE_EVENTS
+
+  const showMobileMore = isMobile && currentMonth && showMoreCount > 0
+  const showDesktopMore = !isMobile && currentMonth && showMoreCount > 0
+
+  const cellContent = useMemo(
+    () => (
+      <motion.div
+        className={cn(
+          'flex h-full lg:min-h-40 flex-col gap-1 border-l border-t',
+          isSunday(date) && 'border-l-0',
+        )}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={transition}
+      >
+        <DroppableArea date={date} className="w-full h-full py-2">
+          <motion.span
+            className={cn(
+              'h-6 px-1 text-xs font-semibold lg:px-2',
+              !currentMonth && 'opacity-20',
+              isToday(date) &&
+                'flex w-6 translate-x-1 items-center justify-center rounded-full bg-primary px-0 font-bold text-primary-foreground',
+            )}
+          >
+            {day}
+          </motion.span>
+
+          <motion.div
+            className={cn(
+              'flex h-fit gap-1 px-2 mt-1 lg:h-[94px] lg:flex-col lg:gap-2 lg:px-0',
+              !currentMonth && 'opacity-50',
+            )}
+          >
+            {cellEvents.length === 0 && !isMobile ? (
+              <div className="w-full h-full flex justify-center items-center group">
+                <AddEditEventDialog startDate={date}>
+                  <Button
+                    variant="ghost"
+                    className="border opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                  >
+                    <Plus className="h-4 w-4" />
+                    <span className="max-sm:hidden">Add Event</span>
+                  </Button>
+                </AddEditEventDialog>
+              </div>
+            ) : (
+              [0, 1, 2].map(renderEventAtPosition)
+            )}
+          </motion.div>
+
+          {showMobileMore && (
+            <div className="flex justify-end items-end mx-2">
+              <span className="text-[0.6rem] font-semibold text-accent-foreground">
+                +{showMoreCount}
+              </span>
+            </div>
+          )}
+
+          {showDesktopMore && (
+            <motion.div
+              className={cn(
+                'h-4.5 px-1.5 my-2 text-end text-xs font-semibold text-muted-foreground',
+                !currentMonth && 'opacity-50',
+              )}
+              initial={{ opacity: 0, y: 5 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3, ...transition }}
+            >
+              <EventListDialog date={date} events={cellEvents} />
+            </motion.div>
+          )}
+        </DroppableArea>
+      </motion.div>
+    ),
+    [
+      date,
+      day,
+      currentMonth,
+      cellEvents,
+      showMobileMore,
+      showDesktopMore,
+      showMoreCount,
+      renderEventAtPosition,
+      isMobile,
+    ],
+  )
+
+  if (isMobile && currentMonth) {
+    return (
+      <EventListDialog date={date} events={cellEvents}>
+        {cellContent}
+      </EventListDialog>
+    )
+  }
+
+  return cellContent
+}

package/src/products/full-calendar/views/month-view/event-bullet.tsx

@@ -0,0 +1,40 @@
+import { cva } from 'class-variance-authority';
+import { motion } from '../../shims/motion';
+import { cn } from '@mohou/ui/lib/utils';
+import { transition } from '../../animations';
+import type { TEventColor } from '../../types';
+
+const eventBulletVariants = cva('size-2 rounded-full', {
+  variants: {
+    color: {
+      blue: 'bg-blue-600 dark:bg-blue-500',
+      green: 'bg-green-600 dark:bg-green-500',
+      red: 'bg-red-600 dark:bg-red-500',
+      yellow: 'bg-yellow-600 dark:bg-yellow-500',
+      purple: 'bg-purple-600 dark:bg-purple-500',
+      orange: 'bg-orange-600 dark:bg-orange-500',
+      gray: 'bg-gray-600 dark:bg-gray-500',
+    },
+  },
+  defaultVariants: {
+    color: 'blue',
+  },
+})
+
+export function EventBullet({
+  color,
+  className,
+}: {
+  color: TEventColor
+  className?: string
+}) {
+  return (
+    <motion.div
+      className={cn(eventBulletVariants({ color, className }))}
+      initial={{ scale: 0, opacity: 0 }}
+      animate={{ scale: 1, opacity: 1 }}
+      whileHover={{ scale: 1.2 }}
+      transition={transition}
+    />
+  )
+}

package/src/products/full-calendar/views/month-view/month-event-badge.tsx

@@ -0,0 +1,143 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import { endOfDay, isSameDay, parseISO, startOfDay } from 'date-fns';
+import { cn } from '@mohou/ui/lib/utils';
+import { useCalendar } from '../../contexts/calendar-context';
+import { EventDetailsDialog } from '../../dialogs/event-details-dialog';
+import { DraggableEvent } from '../../dnd/draggable-event';
+import { formatTime } from '../../helpers';
+import type { IEvent } from '../../interfaces';
+import { EventBullet } from './event-bullet';
+
+const eventBadgeVariants = cva(
+  'flex w-full h-6.5 select-none items-center justify-between gap-1.5 truncate whitespace-nowrap rounded-md border px-2 text-xs cursor-grab',
+  {
+    variants: {
+      color: {
+        // Colored variants
+        blue: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300',
+        green:
+          'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-950 dark:text-green-300',
+        red: 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300',
+        yellow:
+          'border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300',
+        purple:
+          'border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300',
+        orange:
+          'border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300',
+
+        // Dot variants
+        'blue-dot': 'bg-bg-secondary text-t-primary [&_svg]:fill-blue-600',
+        'green-dot': 'bg-bg-secondary text-t-primary [&_svg]:fill-green-600',
+        'red-dot': 'bg-bg-secondary text-t-primary [&_svg]:fill-red-600',
+        'orange-dot': 'bg-bg-secondary text-t-primary [&_svg]:fill-orange-600',
+        'purple-dot': 'bg-bg-secondary text-t-primary [&_svg]:fill-purple-600',
+        'yellow-dot': 'bg-bg-secondary text-t-primary [&_svg]:fill-yellow-600',
+      },
+      multiDayPosition: {
+        first: 'relative z-10 mr-0 rounded-r-none border-r-0 [&>span]:mr-2.5',
+        middle:
+          'relative z-10 mx-0 w-[calc(100%_+_1px)] rounded-none border-x-0',
+        last: 'ml-0 rounded-l-none border-l-0',
+        none: '',
+      },
+    },
+    defaultVariants: {
+      color: 'blue-dot',
+    },
+  },
+)
+
+interface IProps extends Omit<
+  VariantProps<typeof eventBadgeVariants>,
+  'color' | 'multiDayPosition'
+> {
+  event: IEvent
+  cellDate: Date
+  eventCurrentDay?: number
+  eventTotalDays?: number
+  className?: string
+  position?: 'first' | 'middle' | 'last' | 'none';
+}
+
+export function MonthEventBadge({
+  event,
+  cellDate,
+  eventCurrentDay,
+  eventTotalDays,
+  className,
+  position: propPosition,
+}: IProps) {
+  const { badgeVariant, use24HourFormat } = useCalendar()
+
+  const itemStart = startOfDay(parseISO(event.startDate))
+  const itemEnd = endOfDay(parseISO(event.endDate))
+
+  if (cellDate < itemStart || cellDate > itemEnd) return null
+
+  let position: 'first' | 'middle' | 'last' | 'none' | undefined
+
+  if (propPosition) {
+    position = propPosition
+  } else if (eventCurrentDay && eventTotalDays) {
+    position = 'none';
+  } else if (isSameDay(itemStart, itemEnd)) {
+    position = 'none';
+  } else if (isSameDay(cellDate, itemStart)) {
+    position = 'first';
+  } else if (isSameDay(cellDate, itemEnd)) {
+    position = 'last';
+  } else {
+    position = 'middle';
+  }
+
+  const renderBadgeText = ['first', 'none'].includes(position)
+  const renderBadgeTime = ['last', 'none'].includes(position)
+
+  const color = (
+    badgeVariant === 'dot' ? `${event.color}-dot` : event.color
+  ) as VariantProps<typeof eventBadgeVariants>['color'];
+
+  const eventBadgeClasses = cn(
+    eventBadgeVariants({ color, multiDayPosition: position, className }),
+  )
+
+  const marginClass = {
+    first: 'ml-1 mr-0',
+    middle: 'mx-0',
+    last: 'ml-0 mr-1',
+    none: 'mx-1',
+  }[position || 'none'];
+
+  return (
+    <DraggableEvent event={event} className={marginClass}>
+      <EventDetailsDialog event={event}>
+        <button type="button" data-testid={`calendar-event-${event.id}`} className={eventBadgeClasses}>
+          <div className="flex items-center gap-1.5 truncate">
+            {!['middle', 'last'].includes(position) &&
+              badgeVariant === 'dot' && <EventBullet color={event.color} />}
+
+            {renderBadgeText && (
+              <p className="flex-1 truncate font-semibold">
+                {eventCurrentDay && (
+                  <span className="text-xs">
+                    Day {eventCurrentDay} of {eventTotalDays} •{' '}
+                  </span>
+                )}
+                {event.title}
+              </p>
+            )}
+          </div>
+
+          <div className="hidden sm:block">
+            {renderBadgeTime && (
+              <span>
+                {formatTime(new Date(event.startDate), use24HourFormat)}
+              </span>
+            )}
+          </div>
+        </button>
+      </EventDetailsDialog>
+    </DraggableEvent>
+  )
+}