@exxatdesignux/ui 0.2.19 → 0.4.0

package/template/components/data-views/list-page-calendar-view.tsx

@@ -1,593 +0,0 @@
-"use client"
-
-/**
- * ListPageCalendarView — reusable calendar for list hubs.
- * Right panel: sticky toolbar (Month/Week, Today, prev/next) + month title + weekday header,
- * then one continuous vertically scrollable week strip (Sun–Sat columns), not stacked month cards.
- */
-
-import * as React from "react"
-import { Calendar } from "@/components/ui/calendar"
-import { Button } from "@/components/ui/button"
-import { ButtonGroup } from "@/components/ui/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { cn } from "@/lib/utils"
-import { formatDateUS, ymdToLocalDate, localDateToYmd } from "@/lib/date-filter"
-import {
-  CALENDAR_MAIN_VIEW_TILES,
-  type CalendarMainView,
-} from "@/lib/data-list-display-options"
-import {
-  LIST_PAGE_CALENDAR_HEIGHT_STYLE,
-} from "@/components/data-views/list-page-split-hub-chrome"
-import { ListPageViewFrame, LIST_PAGE_VIEW_FRAME_MAX_WIDE } from "@/components/data-views/list-page-view-frame"
-
-const WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as const
-const MONTHS_SCROLL_PAST = 2
-const MONTHS_SCROLL_FUTURE = 14
-const WEEK_ROW_HEIGHT_PX = 92
-const MAX_CHIPS_PER_DAY = 2
-
-/** Seven-day week grid — `bg-dt-header-bg` on head row; HC via `data-slot`. */
-const CALENDAR_GRID_CLASS = "grid grid-cols-7"
-
-const calendarHeadCellClass =
-  "flex items-center justify-center border-r border-border bg-dt-header-bg py-2 text-xs font-medium text-muted-foreground last:border-r-0"
-
-const calendarDayCellClass =
-  "relative flex min-w-0 flex-col border-r border-border bg-card last:border-r-0"
-
-function eventYmd(rowDate: Date | string): string | null {
-  if (rowDate instanceof Date) {
-    if (Number.isNaN(rowDate.getTime())) return null
-    return localDateToYmd(rowDate)
-  }
-  const s = String(rowDate).trim()
-  if (!s) return null
-  const iso = s.slice(0, 10)
-  return /^\d{4}-\d{2}-\d{2}$/.test(iso) ? iso : null
-}
-
-function startOfMonth(d: Date) {
-  return new Date(d.getFullYear(), d.getMonth(), 1)
-}
-
-function addMonths(d: Date, n: number) {
-  return new Date(d.getFullYear(), d.getMonth() + n, 1)
-}
-
-function startOfWeekSunday(d: Date) {
-  const x = new Date(d.getFullYear(), d.getMonth(), d.getDate())
-  x.setDate(x.getDate() - x.getDay())
-  return x
-}
-
-function addDays(d: Date, n: number) {
-  const x = new Date(d.getFullYear(), d.getMonth(), d.getDate())
-  x.setDate(x.getDate() + n)
-  return x
-}
-
-function buildScrollWeeks(anchor: Date) {
-  const rangeStart = addMonths(startOfMonth(anchor), -MONTHS_SCROLL_PAST)
-  const rangeEnd = addMonths(startOfMonth(anchor), MONTHS_SCROLL_FUTURE + 1)
-  rangeEnd.setDate(0)
-
-  let cursor = startOfWeekSunday(rangeStart)
-  const end = startOfWeekSunday(addDays(rangeEnd, 6))
-  const weeks: Date[][] = []
-
-  while (cursor <= end) {
-    const week: Date[] = []
-    for (let i = 0; i < 7; i++) {
-      week.push(addDays(cursor, i))
-    }
-    weeks.push(week)
-    cursor = addDays(cursor, 7)
-  }
-
-  return weeks
-}
-
-function monthLabelParts(d: Date) {
-  return {
-    month: d.toLocaleString("default", { month: "long" }),
-    year: d.getFullYear(),
-  }
-}
-
-function isFirstDayOfMonth(day: Date) {
-  return day.getDate() === 1
-}
-
-export type ListPageCalendarViewProps<T> = {
-  rows: T[]
-  getRowId: (row: T) => string | number
-  getEventDate: (row: T) => Date | string | null | undefined
-  getEventLabel: (row: T) => string
-  getEventMeta?: (row: T) => string | undefined
-  onEventActivate?: (row: T) => void
-  emptyMonthLabel?: string
-  ariaLabel?: string
-  showSummaryPanel: boolean
-  calendarMainView: CalendarMainView
-  onCalendarMainViewChange?: (view: CalendarMainView) => void
-}
-
-export function ListPageCalendarView<T>({
-  rows,
-  getRowId,
-  getEventDate,
-  getEventLabel,
-  getEventMeta,
-  onEventActivate,
-  emptyMonthLabel = "No events on this day",
-  ariaLabel = "Schedule calendar",
-  showSummaryPanel,
-  calendarMainView,
-  onCalendarMainViewChange,
-}: ListPageCalendarViewProps<T>) {
-  const scrollWeeks = React.useMemo(() => buildScrollWeeks(new Date()), [])
-  const [visibleMonth, setVisibleMonth] = React.useState(() => startOfMonth(new Date()))
-  const [selectedYmd, setSelectedYmd] = React.useState<string | null>(() =>
-    localDateToYmd(new Date()),
-  )
-  const scrollRef = React.useRef<HTMLDivElement>(null)
-  const weekRowRefs = React.useRef<Map<string, HTMLElement>>(new Map())
-  const scrollRafRef = React.useRef<number | null>(null)
-
-  const eventsByYmd = React.useMemo(() => {
-    const map = new Map<string, T[]>()
-    for (const row of rows) {
-      const raw = getEventDate(row)
-      if (raw == null) continue
-      const ymd = eventYmd(raw)
-      if (!ymd) continue
-      const list = map.get(ymd) ?? []
-      list.push(row)
-      map.set(ymd, list)
-    }
-    return map
-  }, [rows, getEventDate])
-
-  const visibleMonthEvents = React.useMemo(() => {
-    const y = visibleMonth.getFullYear()
-    const m = visibleMonth.getMonth()
-    const items: { ymd: string; row: T }[] = []
-    for (const row of rows) {
-      const raw = getEventDate(row)
-      if (raw == null) continue
-      const ymd = eventYmd(raw)
-      if (!ymd) continue
-      const d = ymdToLocalDate(ymd)
-      if (!d) continue
-      if (d.getFullYear() === y && d.getMonth() === m) {
-        items.push({ ymd, row })
-      }
-    }
-    items.sort((a, b) => a.ymd.localeCompare(b.ymd))
-    return items
-  }, [rows, visibleMonth, getEventDate])
-
-  const { month: visibleMonthName, year: visibleYear } = monthLabelParts(visibleMonth)
-
-  const mainViewLabel =
-    CALENDAR_MAIN_VIEW_TILES.find(t => t.value === calendarMainView)?.label ?? "Month"
-
-  const weekRowKey = (weekStart: Date) => localDateToYmd(weekStart)
-
-  const scrollToWeekStart = React.useCallback(
-    (weekStart: Date, behavior: ScrollBehavior = "smooth") => {
-      const key = weekRowKey(weekStart)
-      const el = weekRowRefs.current.get(key)
-      const root = scrollRef.current
-      if (el && root) {
-        root.scrollTo({ top: el.offsetTop, behavior })
-      }
-    },
-    [],
-  )
-
-  const scrollToMonth = React.useCallback(
-    (month: Date, behavior: ScrollBehavior = "smooth") => {
-      const target = startOfMonth(month)
-      setVisibleMonth(target)
-      scrollToWeekStart(startOfWeekSunday(target), behavior)
-    },
-    [scrollToWeekStart],
-  )
-
-  const goPrevMonth = React.useCallback(() => {
-    scrollToMonth(addMonths(visibleMonth, -1))
-  }, [scrollToMonth, visibleMonth])
-
-  const goNextMonth = React.useCallback(() => {
-    scrollToMonth(addMonths(visibleMonth, 1))
-  }, [scrollToMonth, visibleMonth])
-
-  const goToday = React.useCallback(() => {
-    const today = new Date()
-    setSelectedYmd(localDateToYmd(today))
-    scrollToMonth(today)
-  }, [scrollToMonth])
-
-  React.useEffect(() => {
-    const root = scrollRef.current
-    if (!root) return
-
-    const syncVisibleMonthFromScroll = () => {
-      const rootTop = root.scrollTop
-      const anchorY = rootTop + 48
-
-      let bestKey: string | null = null
-      let bestDistance = Number.POSITIVE_INFINITY
-
-      for (const [key, el] of weekRowRefs.current.entries()) {
-        const distance = Math.abs(el.offsetTop - anchorY)
-        if (distance < bestDistance) {
-          bestDistance = distance
-          bestKey = key
-        }
-      }
-
-      if (!bestKey) return
-      const d = ymdToLocalDate(bestKey)
-      if (!d) return
-      const next = startOfMonth(d)
-      setVisibleMonth(prev =>
-        prev.getFullYear() === next.getFullYear() && prev.getMonth() === next.getMonth()
-          ? prev
-          : next,
-      )
-    }
-
-    const onScroll = () => {
-      if (scrollRafRef.current != null) cancelAnimationFrame(scrollRafRef.current)
-      scrollRafRef.current = requestAnimationFrame(() => {
-        scrollRafRef.current = null
-        syncVisibleMonthFromScroll()
-      })
-    }
-
-    root.addEventListener("scroll", onScroll, { passive: true })
-    return () => {
-      root.removeEventListener("scroll", onScroll)
-      if (scrollRafRef.current != null) cancelAnimationFrame(scrollRafRef.current)
-    }
-  }, [scrollWeeks, calendarMainView, showSummaryPanel])
-
-  const didInitialScrollRef = React.useRef(false)
-  React.useEffect(() => {
-    if (didInitialScrollRef.current) return
-    const key = weekRowKey(startOfWeekSunday(new Date()))
-    if (!weekRowRefs.current.has(key)) return
-    didInitialScrollRef.current = true
-    const t = window.setTimeout(() => scrollToMonth(new Date(), "auto"), 0)
-    return () => window.clearTimeout(t)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scrollWeeks.length, showSummaryPanel])
-
-  const weeksToRender = React.useMemo(() => {
-    if (calendarMainView === "month") return scrollWeeks
-    const anchor = selectedYmd ? ymdToLocalDate(selectedYmd) : new Date()
-    const day = anchor ?? new Date()
-    return [scrollWeeks.find(w => w.some(d => localDateToYmd(d) === localDateToYmd(day))) ?? scrollWeeks[0]]
-  }, [calendarMainView, scrollWeeks, selectedYmd])
-
-  const monthLabelFull = `${visibleMonthName} ${visibleYear}`
-
-  return (
-    <ListPageViewFrame
-      maxWidthClassName={LIST_PAGE_VIEW_FRAME_MAX_WIDE}
-      gutterClassName="mx-4 mb-4 flex min-h-0 flex-1 flex-col lg:mx-6"
-      className="min-h-0"
-      aria-label={ariaLabel}
-    >
-      <div
-        data-slot="list-page-calendar"
-        className="flex min-h-0 flex-1 overflow-hidden rounded-xl border border-border bg-card shadow-xs"
-        style={LIST_PAGE_CALENDAR_HEIGHT_STYLE}
-      >
-        {showSummaryPanel ? (
-          <aside
-            className="flex w-72 shrink-0 flex-col border-r border-border bg-muted/20"
-            aria-label="Calendar summary"
-          >
-            <div className="border-b border-border p-3">
-              <Calendar
-                mode="single"
-                month={visibleMonth}
-                onMonthChange={m => scrollToMonth(m)}
-                selected={selectedYmd ? ymdToLocalDate(selectedYmd) : undefined}
-                onSelect={d => {
-                  const ymd = d ? localDateToYmd(d) : null
-                  setSelectedYmd(ymd)
-                  if (d) scrollToMonth(d)
-                }}
-                className="mx-auto bg-transparent p-0"
-              />
-            </div>
-
-            <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden p-3">
-              <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                Events · {monthLabelFull}
-              </h3>
-
-              <ul className="min-h-0 flex-1 space-y-1 overflow-y-auto" aria-label="Events this month">
-                {visibleMonthEvents.length === 0 ? (
-                  <li className="text-xs text-muted-foreground">{emptyMonthLabel}</li>
-                ) : (
-                  visibleMonthEvents.map(({ ymd, row }) => {
-                    const id = getRowId(row)
-                    const label = getEventLabel(row)
-                    const meta = getEventMeta?.(row)
-                    const isSelected = selectedYmd === ymd
-                    return (
-                      <li key={`${String(id)}-${ymd}`}>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setSelectedYmd(ymd)
-                            onEventActivate?.(row)
-                          }}
-                          className={cn(
-                            "flex w-full flex-col gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm transition-colors",
-                            isSelected
-                              ? "border-brand/40 bg-brand/5"
-                              : "border-transparent hover:bg-muted/60",
-                          )}
-                        >
-                          <span className="font-medium text-foreground">{label}</span>
-                          <span className="text-xs text-muted-foreground tabular-nums">
-                            {formatDateUS(ymd)}
-                            {meta ? ` · ${meta}` : ""}
-                          </span>
-                        </button>
-                      </li>
-                    )
-                  })
-                )}
-              </ul>
-            </div>
-          </aside>
-        ) : null}
-
-        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-          <div
-            data-slot="list-page-calendar-chrome"
-            className="sticky top-0 z-20 shrink-0 border-b border-border bg-card"
-          >
-            <div
-              data-slot="list-page-calendar-toolbar"
-              className="relative px-4 pb-2 pt-4 lg:px-6 lg:pb-2.5 lg:pt-6"
-            >
-              <p className="min-w-0 pe-[min(100%,14rem)] text-lg text-foreground sm:pe-72">
-                <strong className="font-semibold">{visibleMonthName}</strong>
-                <span className="font-normal text-muted-foreground"> {visibleYear}</span>
-              </p>
-
-              <div className="absolute end-4 top-4 flex flex-wrap items-center justify-end gap-2 lg:end-6 lg:top-6">
-                {onCalendarMainViewChange ? (
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button type="button" variant="outline" size="sm" className="gap-1.5">
-                        <span>{mainViewLabel}</span>
-                        <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      {CALENDAR_MAIN_VIEW_TILES.map(tile => (
-                        <DropdownMenuItem
-                          key={tile.value}
-                          onSelect={() => onCalendarMainViewChange(tile.value)}
-                        >
-                          <i className={cn("fa-light", tile.icon, "mr-2 w-4")} aria-hidden="true" />
-                          {tile.label}
-                        </DropdownMenuItem>
-                      ))}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                ) : (
-                  <span className="text-sm font-medium text-muted-foreground">{mainViewLabel}</span>
-                )}
-
-                <ButtonGroup aria-label="Calendar navigation">
-                  <Button type="button" variant="outline" size="sm" onClick={goToday}>
-                    Today
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon-sm"
-                    aria-label="Previous month"
-                    onClick={goPrevMonth}
-                  >
-                    <i className="fa-light fa-chevron-left text-sm" aria-hidden="true" />
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon-sm"
-                    aria-label="Next month"
-                    onClick={goNextMonth}
-                  >
-                    <i className="fa-light fa-chevron-right text-sm" aria-hidden="true" />
-                  </Button>
-                </ButtonGroup>
-              </div>
-            </div>
-
-            <div
-              data-slot="list-page-calendar-head"
-              className={cn(CALENDAR_GRID_CLASS, "border border-border border-t-0")}
-              role="row"
-            >
-              {WEEKDAY_LABELS.map(label => (
-                <div
-                  key={label}
-                  data-slot="list-page-calendar-head-cell"
-                  role="columnheader"
-                  className={calendarHeadCellClass}
-                >
-                  {label}
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div
-            ref={scrollRef}
-            data-slot="list-page-calendar-body"
-            className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain"
-            aria-label="Calendar — scroll vertically to move between weeks"
-          >
-            <div
-              className="relative"
-              style={{
-                minHeight:
-                  calendarMainView === "month"
-                    ? scrollWeeks.length * WEEK_ROW_HEIGHT_PX
-                    : WEEK_ROW_HEIGHT_PX,
-              }}
-            >
-              {weeksToRender.map(week => {
-                const weekStart = week[0]
-                const key = weekRowKey(weekStart)
-                return (
-                  <div
-                    key={key}
-                    ref={el => {
-                      if (el) weekRowRefs.current.set(key, el)
-                      else weekRowRefs.current.delete(key)
-                    }}
-                    data-week-start={key}
-                    data-slot="list-page-calendar-week-row"
-                    className="absolute left-0 right-0 border-b border-border"
-                    style={{
-                      top:
-                        calendarMainView === "month"
-                          ? scrollWeeks.findIndex(w => weekRowKey(w[0]) === key) *
-                            WEEK_ROW_HEIGHT_PX
-                          : 0,
-                      height: WEEK_ROW_HEIGHT_PX,
-                    }}
-                  >
-                    <WeekStripRow
-                      week={week}
-                      eventsByYmd={eventsByYmd}
-                      selectedYmd={selectedYmd}
-                      getRowId={getRowId}
-                      getEventLabel={getEventLabel}
-                      onSelectDay={ymd => setSelectedYmd(ymd)}
-                      onEventActivate={onEventActivate}
-                      expanded={calendarMainView === "week"}
-                    />
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-      </div>
-    </ListPageViewFrame>
-  )
-}
-
-function WeekStripRow<T>({
-  week,
-  eventsByYmd,
-  selectedYmd,
-  getRowId,
-  getEventLabel,
-  onSelectDay,
-  onEventActivate,
-  expanded = false,
-}: {
-  week: Date[]
-  eventsByYmd: Map<string, T[]>
-  selectedYmd: string | null
-  getRowId: (row: T) => string | number
-  getEventLabel: (row: T) => string
-  onSelectDay: (ymd: string) => void
-  onEventActivate?: (row: T) => void
-  expanded?: boolean
-}) {
-  const todayYmd = localDateToYmd(new Date())
-
-  return (
-    <div
-      className={cn(CALENDAR_GRID_CLASS, "h-full bg-card", expanded && "min-h-[12rem]")}
-      role="row"
-    >
-      {week.map(day => {
-        const ymd = localDateToYmd(day)
-        const dayEvents = eventsByYmd.get(ymd) ?? []
-        const isSelected = selectedYmd === ymd
-        const isToday = ymd === todayYmd
-        const showMonthName = isFirstDayOfMonth(day)
-        const monthName = day.toLocaleString("default", { month: "long" })
-
-        return (
-          <div
-            key={ymd}
-            data-slot="list-page-calendar-day"
-            data-today={isToday ? "true" : undefined}
-            data-selected={isSelected ? "true" : undefined}
-            className={cn(
-              calendarDayCellClass,
-              isToday && "bg-brand/5",
-              isSelected && "z-[1] ring-2 ring-inset ring-brand",
-            )}
-          >
-            <button
-              type="button"
-              role="gridcell"
-              aria-label={`${formatDateUS(ymd)}${dayEvents.length ? `, ${dayEvents.length} events` : ""}`}
-              aria-selected={isSelected}
-              onClick={() => onSelectDay(ymd)}
-              className="flex w-full items-baseline gap-1 px-1.5 pt-2 text-left text-xs tabular-nums hover:bg-muted/30"
-            >
-              {showMonthName ? (
-                <>
-                  <strong className="font-semibold text-foreground">{monthName}</strong>
-                  <span className="text-muted-foreground">{day.getDate()}</span>
-                </>
-              ) : (
-                <span className={cn("text-muted-foreground", isToday && "font-semibold text-brand")}>
-                  {day.getDate()}
-                </span>
-              )}
-            </button>
-
-            <div className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-hidden px-1 pb-1.5">
-              {dayEvents.slice(0, expanded ? 6 : MAX_CHIPS_PER_DAY).map(row => (
-                <button
-                  key={String(getRowId(row))}
-                  type="button"
-                  className="w-full truncate rounded-sm bg-brand/10 px-1 py-0.5 text-left text-[11px] font-medium text-foreground hover:bg-brand/15"
-                  onClick={e => {
-                    e.stopPropagation()
-                    onSelectDay(ymd)
-                    onEventActivate?.(row)
-                  }}
-                >
-                  {getEventLabel(row)}
-                </button>
-              ))}
-              {!expanded && dayEvents.length > MAX_CHIPS_PER_DAY ? (
-                <span className="px-1 text-[11px] text-muted-foreground">
-                  {dayEvents.length - MAX_CHIPS_PER_DAY} more
-                </span>
-              ) : null}
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}