@mohou/ui 1.0.20

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

@@ -0,0 +1,114 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import { differenceInMinutes, parseISO } from 'date-fns';
+import type { HTMLAttributes } from 'react';
+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 { ResizableEvent } from '../../dnd/resizable-event';
+import { formatTime } from '../../helpers';
+import type { IEvent } from '../../interfaces';
+
+const calendarWeekEventCardVariants = cva(
+  'flex select-none flex-col gap-0.5 truncate whitespace-nowrap rounded-md border px-2 py-1.5 text-xs focus-visible:outline-offset-2',
+  {
+    variants: {
+      color: {
+        // Colored variants
+        blue: 'border-blue-200 bg-blue-100/50 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950/50 dark:text-blue-300 dark:hover:bg-blue-950',
+        green:
+          'border-green-200 bg-green-100/50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950/50 dark:text-green-300 dark:hover:bg-green-950',
+        red: 'border-red-200 bg-red-100/50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950/50 dark:text-red-300 dark:hover:bg-red-950',
+        yellow:
+          'border-yellow-200 bg-yellow-100/50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-800 dark:bg-yellow-950/50 dark:text-yellow-300 dark:hover:bg-yellow-950',
+        purple:
+          'border-purple-200 bg-purple-100/50 text-purple-700 hover:bg-purple-100 dark:border-purple-800 dark:bg-purple-950/50 dark:text-purple-300 dark:hover:bg-purple-950',
+        orange:
+          'border-orange-200 bg-orange-100/50 text-orange-700 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-950/50 dark:text-orange-300 dark:hover:bg-orange-950',
+
+        // Dot variants
+        'blue-dot':
+          'border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-blue-600 dark:[&_svg]:fill-blue-500',
+        'green-dot':
+          'border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-green-600 dark:[&_svg]:fill-green-500',
+        'red-dot':
+          'border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-red-600 dark:[&_svg]:fill-red-500',
+        'orange-dot':
+          'border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-orange-600 dark:[&_svg]:fill-orange-500',
+        'purple-dot':
+          'border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-purple-600 dark:[&_svg]:fill-purple-500',
+        'yellow-dot':
+          'border-border bg-card text-foreground hover:bg-accent [&_svg]:fill-yellow-600 dark:[&_svg]:fill-yellow-500',
+      },
+    },
+    defaultVariants: {
+      color: 'blue-dot',
+    },
+  },
+)
+
+interface IProps
+  extends
+  HTMLAttributes<HTMLDivElement>,
+  Omit<VariantProps<typeof calendarWeekEventCardVariants>, 'color'> {
+  event: IEvent
+}
+
+export function EventBlock({ event, className }: IProps) {
+  const { badgeVariant, use24HourFormat } = useCalendar()
+
+  const start = parseISO(event.startDate)
+  const end = parseISO(event.endDate)
+  const durationInMinutes = differenceInMinutes(end, start)
+  const heightInPixels = (durationInMinutes / 60) * 96 - 8
+
+  const color = (
+    badgeVariant === 'dot' ? `${event.color}-dot` : event.color
+  ) as VariantProps<typeof calendarWeekEventCardVariants>['color'];
+
+  const calendarWeekEventCardClasses = cn(
+    calendarWeekEventCardVariants({ color, className }),
+    durationInMinutes < 35 && 'py-0 justify-center',
+  )
+
+  return (
+    <ResizableEvent event={event}>
+      <DraggableEvent event={event}>
+        <EventDetailsDialog event={event}>
+          <button
+            type="button"
+            data-calendar-event="1"
+            data-testid={`calendar-event-${event.id}`}
+            className={calendarWeekEventCardClasses}
+            style={{ height: `${heightInPixels}px` }}
+          >
+            <div className="flex items-center gap-1.5 truncate">
+              {badgeVariant === 'dot' && (
+                <svg
+                  width="8"
+                  height="8"
+                  viewBox="0 0 8 8"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="shrink-0"
+                  aria-hidden="true"
+                >
+                  <circle cx="4" cy="4" r="4" />
+                </svg>
+              )}
+
+              <p className="truncate font-semibold">{event.title}</p>
+            </div>
+
+            {durationInMinutes > 25 && (
+              <p>
+                {formatTime(start, use24HourFormat)} -{' '}
+                {formatTime(end, use24HourFormat)}
+              </p>
+            )}
+          </button>
+        </EventDetailsDialog>
+      </DraggableEvent>
+    </ResizableEvent>
+  )
+}

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

@@ -0,0 +1,49 @@
+import { areIntervalsOverlapping, parseISO } from 'date-fns';
+import { getEventBlockStyle } from '../../helpers';
+import type { IEvent } from '../../interfaces';
+import { EventBlock } from './event-block';
+
+interface RenderGroupedEventsProps {
+  groupedEvents: IEvent[][]
+  day: Date
+}
+
+export function RenderGroupedEvents({
+  groupedEvents,
+  day,
+}: RenderGroupedEventsProps) {
+  return groupedEvents.map((group, groupIndex) =>
+    group.map((event) => {
+      let style = getEventBlockStyle(
+        event,
+        day,
+        groupIndex,
+        groupedEvents.length,
+      )
+      const hasOverlap = groupedEvents.some(
+        (otherGroup, otherIndex) =>
+          otherIndex !== groupIndex &&
+          otherGroup.some(otherEvent =>
+            areIntervalsOverlapping(
+              {
+                start: parseISO(event.startDate),
+                end: parseISO(event.endDate),
+              },
+              {
+                start: parseISO(otherEvent.startDate),
+                end: parseISO(otherEvent.endDate),
+              },
+            ),
+          ),
+      )
+
+      if (!hasOverlap) style = { ...style, width: '100%', left: '0%' }
+
+      return (
+        <div key={event.id} className="absolute p-1" style={style}>
+          <EventBlock event={event} />
+        </div>
+      )
+    }),
+  )
+}

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

@@ -0,0 +1,145 @@
+import {
+  addDays,
+  differenceInDays,
+  endOfWeek,
+  isAfter,
+  isBefore,
+  parseISO,
+  startOfDay,
+  startOfWeek,
+} from 'date-fns';
+import { useMemo } from 'react';
+import type { IEvent } from '../../interfaces';
+import { MonthEventBadge } from '../month-view/month-event-badge';
+
+interface IProps {
+  selectedDate: Date
+  multiDayEvents: IEvent[]
+}
+
+export function WeekViewMultiDayEventsRow({
+  selectedDate,
+  multiDayEvents,
+}: IProps) {
+  const weekStart = startOfWeek(selectedDate)
+	const weekEnd = endOfWeek(selectedDate)
+	const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))
+
+	const processedEvents = useMemo(() => {
+    return multiDayEvents
+      .map((event) => {
+        const start = parseISO(event.startDate)
+				const end = parseISO(event.endDate)
+				const adjustedStart = isBefore(start, weekStart) ? weekStart : start
+				const adjustedEnd = isAfter(end, weekEnd) ? weekEnd : end
+				const startIndex = differenceInDays(adjustedStart, weekStart)
+				const endIndex = differenceInDays(adjustedEnd, weekStart)
+
+				return {
+          ...event,
+          adjustedStart,
+          adjustedEnd,
+          startIndex,
+          endIndex,
+        };
+      })
+      .sort((a, b) => {
+        const startDiff = a.adjustedStart.getTime() - b.adjustedStart.getTime()
+				if (startDiff !== 0) return startDiff
+				return b.endIndex - b.startIndex - (a.endIndex - a.startIndex)
+			});
+  }, [multiDayEvents, weekStart, weekEnd])
+
+	const eventRows = useMemo(() => {
+    const rows: (typeof processedEvents)[] = []
+
+		for (const event of processedEvents) {
+      let rowIndex = rows.findIndex(row =>
+        row.every(
+          (e) => e.endIndex < event.startIndex || e.startIndex > event.endIndex,
+        ),
+      );
+
+      if (rowIndex === -1) {
+        rowIndex = rows.length
+				rows.push([])
+			}
+
+      const row = rows[rowIndex]
+			if (row === undefined) continue
+			row.push(event)
+		}
+
+    return rows
+	}, [processedEvents])
+
+	const hasEventsInWeek = useMemo(() => {
+    return multiDayEvents.some((event) => {
+      const start = parseISO(event.startDate)
+			const end = parseISO(event.endDate)
+
+			return (
+      // Event starts within the week
+        (start >= weekStart && start <= weekEnd) ||
+				// Event ends within the week
+				(end >= weekStart && end <= weekEnd) ||
+				// Event spans the entire week
+				(start <= weekStart && end >= weekEnd)
+      );
+    })
+	}, [multiDayEvents, weekStart, weekEnd])
+
+	if (!hasEventsInWeek) {
+    return null
+	}
+
+  return (
+    <div className="overflow-hidden flex" data-testid="calendar-all-day">
+      <div className="w-18 border-b"></div>
+      <div className="grid flex-1 grid-cols-7 divide-x border-b border-l">
+        {weekDays.map((day, dayIndex) => (
+          <div
+            key={day.toISOString()}
+            className="flex h-full flex-col gap-1 py-1"
+          >
+            {eventRows.map((row, rowIndex) => {
+              const event = row.find(
+                (e) => e.startIndex <= dayIndex && e.endIndex >= dayIndex,
+              );
+
+              if (!event) {
+                return (
+                  <div key={`${rowIndex}-${dayIndex.toString()}`} className="h-6.5" />
+                );
+              }
+
+              let position: 'first' | 'middle' | 'last' | 'none' = 'none';
+
+              if (
+                dayIndex === event.startIndex &&
+								dayIndex === event.endIndex
+              ) {
+                position = 'none';
+              } else if (dayIndex === event.startIndex) {
+                position = 'first';
+              } else if (dayIndex === event.endIndex) {
+                position = 'last';
+              } else {
+                position = 'middle';
+              }
+
+              return (
+                <MonthEventBadge
+                  key={`${event.id}-${dayIndex}`}
+                  event={event}
+                  cellDate={startOfDay(day)}
+                  position={position}
+                />
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,161 @@
+import { format, getYear, isSameDay, isSameMonth } from 'date-fns';
+import { useMemo } from 'react';
+import { motion } from '../../shims/motion';
+import { cn } from '@mohou/ui/lib/utils';
+import { useDateLocale } from '@mohou/ui/i18n/context';
+import { staggerContainer, transition } from '../../animations';
+import { useCalendar } from '../../contexts/calendar-context';
+import { EventListDialog } from '../../dialogs/events-list-dialog';
+import { getCalendarCells } from '../../helpers';
+import type { IEvent } from '../../interfaces';
+import { EventBullet } from '../month-view/event-bullet';
+
+interface IProps {
+  singleDayEvents: IEvent[]
+  multiDayEvents: IEvent[]
+}
+
+export function CalendarYearView({ singleDayEvents, multiDayEvents }: IProps) {
+  const { selectedDate, setSelectedDate } = useCalendar()
+  const dateLocale = useDateLocale()
+  const currentYear = getYear(selectedDate)
+  const allEvents = [...multiDayEvents, ...singleDayEvents]
+
+  const months = useMemo(
+    () =>
+      Array.from({ length: 12 }, (_, i) =>
+        format(new Date(2000, i, 1), 'MMMM', { locale: dateLocale }),
+      ),
+    [dateLocale],
+  )
+
+  // Jan 2, 2000 was a Sunday — generate Sun..Sat short weekday labels.
+  const weekdays = useMemo(
+    () =>
+      Array.from({ length: 7 }, (_, i) =>
+        format(new Date(2000, 0, 2 + i), 'EE', { locale: dateLocale }),
+      ),
+    [dateLocale],
+  )
+
+  return (
+    <div className="flex flex-col h-full  overflow-y-auto p-4  sm:p-6">
+      {/* Year grid */}
+      <motion.div
+        initial="initial"
+        animate="animate"
+        variants={staggerContainer}
+        className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 auto-rows-fr"
+      >
+        {months.map((month, monthIndex) => {
+          const monthDate = new Date(currentYear, monthIndex, 1)
+          const cells = getCalendarCells(monthDate)
+
+          return (
+            <motion.div
+              key={month}
+              className="flex flex-col border border-border rounded-lg shadow-sm overflow-hidden"
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: monthIndex * 0.05, ...transition }}
+              aria-label={`${month} ${currentYear} calendar`}
+            >
+              {/* Month header */}
+              <button
+                type="button"
+                className="w-full px-3 py-2 text-center font-semibold text-sm sm:text-base cursor-pointer hover:bg-primary/20 transition-colors bg-transparent border-none appearance-none"
+                onClick={() =>
+                  setSelectedDate(new Date(currentYear, monthIndex, 1))
+                }
+                aria-label={`Select ${month}`}
+              >
+                {month}
+              </button>
+
+              <div className="grid grid-cols-7 text-center text-xs font-medium text-muted-foreground py-2">
+                {weekdays.map(day => (
+                  <div key={day} className="p-1">
+                    {day}
+                  </div>
+                ))}
+              </div>
+
+              <div className="grid grid-cols-7 gap-0.5 p-1.5 flex-grow text-xs">
+                {cells.map((cell) => {
+                  const isCurrentMonth = isSameMonth(cell.date, monthDate)
+                  const isToday = isSameDay(cell.date, new Date())
+                  const dayEvents = allEvents.filter(event =>
+                    isSameDay(new Date(event.startDate), cell.date),
+                  )
+                  const hasEvents = dayEvents.length > 0
+
+                  return (
+                    <div
+                      key={cell.date.toISOString()}
+                      className={cn(
+                        'flex flex-col items-center justify-start p-1 min-h-[2rem] relative',
+                        !isCurrentMonth && 'text-muted-foreground/40',
+                        hasEvents && isCurrentMonth
+                          ? 'cursor-pointer hover:bg-accent/20 hover:rounded-md'
+                          : 'cursor-default',
+                      )}
+                    >
+                      {isCurrentMonth && hasEvents ? (
+                        <EventListDialog date={cell.date} events={dayEvents}>
+                          <div className="w-full h-full flex flex-col items-center justify-start gap-0.5">
+                            <span
+                              className={cn(
+                                'size-5 flex items-center justify-center font-medium',
+                                isToday &&
+                                  'rounded-full bg-primary text-primary-foreground',
+                              )}
+                            >
+                              {cell.day}
+                            </span>
+                            <div className="flex justify-center items-center gap-0.5">
+                              {dayEvents.length <= 2 ? (
+                                dayEvents
+                                  .slice(0, 2)
+                                  .map(event => (
+                                    <EventBullet
+                                      key={event.id}
+                                      color={event.color}
+                                      className="size-1.5"
+                                    />
+                                  ))
+                              ) : (
+                                <div className="flex flex-col justify-center items-center">
+                                  <EventBullet
+                                    color={dayEvents[0]?.color ?? 'blue'}
+                                    className="size-1.5"
+                                  />
+                                  <span className="text-[0.6rem]">
+                                    +{dayEvents.length - 1}
+                                  </span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </EventListDialog>
+                      ) : (
+                        <div className="w-full h-full flex flex-col items-center justify-start">
+                          <span
+                            className={cn(
+                              'size-5 flex items-center justify-center font-medium',
+                            )}
+                          >
+                            {cell.day}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </motion.div>
+          )
+        })}
+      </motion.div>
+    </div>
+  )
+}

package/src/products/gantt.tsx

@@ -0,0 +1,47 @@
+
+import { differenceInCalendarDays, min, max } from 'date-fns'
+
+export type GanttTask = {
+  id: string
+  title: string
+  start: Date
+  end: Date
+}
+
+/**
+ * Task bars on a date axis.
+ * @when Plans/schedules with start+end per row. Ordered events → `Timeline`.
+ * @example
+ * <Gantt tasks={[{ id: "t1", name: "联调", start: "2026-09-01", end: "2026-09-05" }]} />
+ * @family Calendar & date
+ */
+export function Gantt({ tasks }: { tasks: GanttTask[] }) {
+  if (tasks.length === 0) {
+    return <div data-testid="gantt" className="text-muted-foreground text-sm">No tasks</div>
+  }
+  const start = min(tasks.map(task => task.start))
+  const end = max(tasks.map(task => task.end))
+  const span = Math.max(differenceInCalendarDays(end, start), 1)
+  return (
+    <div className="flex flex-col gap-2" data-testid="gantt">
+      {tasks.map((task) => {
+        const offset = differenceInCalendarDays(task.start, start)
+        const width = Math.max(differenceInCalendarDays(task.end, task.start), 1)
+        return (
+          <div key={task.id} className="grid grid-cols-[8rem_1fr] items-center gap-3">
+            <div className="truncate text-sm">{task.title}</div>
+            <div className="relative h-7 rounded-md bg-muted">
+              <div
+                className="absolute top-1 bottom-1 rounded-sm bg-primary/70"
+                style={{
+                  left: `${(offset / span) * 100}%`,
+                  width: `${(width / span) * 100}%`,
+                }}
+              />
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}