@exxatdesignux/ui 0.2.18 → 0.2.19

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

@@ -0,0 +1,593 @@
+"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>
+  )
+}

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

@@ -0,0 +1,66 @@
+"use client"
+
+/**
+ * Switches list-hub view bodies by `DataListViewRenderKind`.
+ * Hubs pass one renderer per kind they support; missing kinds show a clear empty state
+ * (never silently fall through to dashboard).
+ */
+
+import * as React from "react"
+import type { DataListViewType } from "@/lib/data-list-view"
+import {
+  dataListViewDefinition,
+  dataListViewLabel,
+  getDataListViewRenderKind,
+  type DataListViewRenderKind,
+} from "@/lib/data-list-view-registry"
+
+export type ListPageConnectedViewRenderers = Partial<
+  Record<DataListViewRenderKind, React.ReactNode | (() => React.ReactNode)>
+>
+
+export interface ListPageConnectedViewBodyProps {
+  view: DataListViewType
+  /** Human-readable hub name for the not-configured state. */
+  hubLabel?: string
+  renderers: ListPageConnectedViewRenderers
+}
+
+function resolveRenderer(node: React.ReactNode | (() => React.ReactNode) | undefined) {
+  if (node == null) return null
+  return typeof node === "function" ? node() : node
+}
+
+export function ListPageViewNotConfigured({
+  view,
+  hubLabel = "This hub",
+}: {
+  view: DataListViewType
+  hubLabel?: string
+}) {
+  const label = dataListViewLabel(view)
+  return (
+    <div
+      className="flex flex-1 items-center justify-center px-4 py-12 text-center text-sm text-muted-foreground"
+      role="status"
+    >
+      {hubLabel} does not implement {label}. Add a renderer for{" "}
+      <span className="font-medium text-foreground">{dataListViewDefinition(view).renderKind}</span>{" "}
+      in this hub&apos;s table component, or remove the view from{" "}
+      <code className="rounded bg-muted px-1 py-0.5 text-xs">supportedViewTypes</code>.
+    </div>
+  )
+}
+
+export function ListPageConnectedViewBody({
+  view,
+  hubLabel,
+  renderers,
+}: ListPageConnectedViewBodyProps) {
+  const kind = getDataListViewRenderKind(view)
+  const body = resolveRenderer(renderers[kind])
+  if (body == null) {
+    return <ListPageViewNotConfigured view={view} hubLabel={hubLabel} />
+  }
+  return <>{body}</>
+}