@super-calendar/dom 2.0.0

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@super-calendar/dom",
+  "version": "2.0.0",
+  "description": "Virtualized month / week / day calendar and date picker for react-dom. No React Native, no react-native-web.",
+  "keywords": [
+    "calendar",
+    "date-picker",
+    "month-view",
+    "react",
+    "react-dom",
+    "web",
+    "week-view"
+  ],
+  "homepage": "https://github.com/afonsojramos/react-native-super-calendar#readme",
+  "bugs": {
+    "url": "https://github.com/afonsojramos/react-native-super-calendar/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/afonsojramos/react-native-super-calendar.git",
+    "directory": "packages/dom"
+  },
+  "source": "./src/index.ts",
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@super-calendar/core": "2.0.0"
+  },
+  "peerDependencies": {
+    "@legendapp/list": ">=3",
+    "date-fns": ">=3",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
+}

package/src/Agenda.tsx

@@ -0,0 +1,188 @@
+import { LegendList } from "@legendapp/list/react";
+import { format, isSameDay, type Locale, startOfDay } from "date-fns";
+import { type ComponentType, type CSSProperties, useMemo } from "react";
+import type { CalendarEvent } from "@super-calendar/core";
+import { eventTimeLabel, getIsToday, isAllDayEvent } from "@super-calendar/core";
+import { type DomCalendarTheme, mergeDomTheme } from "./theme";
+
+/** Props passed to a custom agenda (schedule) event renderer. */
+export interface DomAgendaEventArgs<T = unknown> {
+  event: CalendarEvent<T>;
+  /** Always "schedule"; lets a renderer shared with other views branch on it. */
+  mode: "schedule";
+  isAllDay: boolean;
+  /** Render the time range in 12-hour AM/PM. */
+  ampm?: boolean;
+  onPress: () => void;
+}
+
+export type DomAgendaEvent<T = unknown> = ComponentType<DomAgendaEventArgs<T>>;
+
+export interface AgendaProps<T = unknown> {
+  /** Events to list. The consumer controls which (and therefore the date range). */
+  events: CalendarEvent<T>[];
+  locale?: Locale;
+  /** Render times in 12-hour AM/PM (default false, 24h). */
+  ampm?: boolean;
+  /** Highlight this date's header instead of the real "today". */
+  activeDate?: Date;
+  theme?: Partial<DomCalendarTheme>;
+  /** Height of the scroll viewport, in px (default 480). */
+  height?: number | string;
+  /** Replace the built-in event row. */
+  renderEvent?: DomAgendaEvent<T>;
+  onPressEvent?: (event: CalendarEvent<T>) => void;
+  /** Tap a day's header. */
+  onPressDay?: (date: Date) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+type Row<T> =
+  | { kind: "header"; date: Date; key: string }
+  | { kind: "event"; event: CalendarEvent<T>; key: string };
+
+function DefaultAgendaRow<T>({
+  event,
+  isAllDay,
+  ampm = false,
+  theme,
+}: DomAgendaEventArgs<T> & { theme: DomCalendarTheme }) {
+  const time =
+    eventTimeLabel({
+      mode: "schedule",
+      isAllDay,
+      start: event.start,
+      end: event.end,
+      ampm,
+      showTime: true,
+    }) ?? "";
+  // A filled card with the title on top and the time below, matching the native
+  // schedule row.
+  return (
+    <div
+      style={{
+        padding: "6px 10px",
+        borderRadius: 8,
+        background: theme.eventBackground,
+        color: theme.eventText,
+      }}
+    >
+      <div style={{ fontWeight: 600, fontSize: 14 }}>{event.title}</div>
+      {time ? <div style={{ fontSize: 13, opacity: 0.75 }}>{time}</div> : null}
+    </div>
+  );
+}
+
+/**
+ * A vertical, day-grouped list of events: the schedule view, with plain DOM
+ * elements. Events are sorted by start and grouped under a date header per day;
+ * the consumer controls which events (and therefore which dates) are shown. The
+ * react-dom counterpart of the React Native `Agenda`.
+ */
+export function Agenda<T = unknown>({
+  events,
+  locale,
+  ampm = false,
+  activeDate,
+  theme: themeOverrides,
+  height = 480,
+  renderEvent,
+  onPressEvent,
+  onPressDay,
+  className,
+  style,
+}: AgendaProps<T>) {
+  const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+  const Renderer = renderEvent;
+
+  const rows = useMemo<Row<T>[]>(() => {
+    const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
+    const out: Row<T>[] = [];
+    let currentDay: Date | null = null;
+    sorted.forEach((event, index) => {
+      if (!currentDay || !isSameDay(event.start, currentDay)) {
+        currentDay = startOfDay(event.start);
+        out.push({ kind: "header", date: currentDay, key: `h-${currentDay.toISOString()}` });
+      }
+      out.push({ kind: "event", event, key: `e-${event.start.toISOString()}-${index}` });
+    });
+    return out;
+  }, [events]);
+
+  return (
+    <div
+      className={className}
+      style={{ fontFamily: theme.fontFamily, color: theme.text, ...style }}
+    >
+      <LegendList
+        data={rows}
+        keyExtractor={(row: Row<T>) => row.key}
+        recycleItems={false}
+        estimatedItemSize={44}
+        style={{ height, overflowY: "auto" }}
+        renderItem={({ item }: { item: Row<T> }) => {
+          if (item.kind === "header") {
+            const highlighted = activeDate
+              ? isSameDay(item.date, activeDate)
+              : getIsToday(item.date);
+            const label = format(item.date, "EEEE, d LLLL", locale ? { locale } : undefined);
+            const color = highlighted ? theme.todayBackground : theme.textMuted;
+            return onPressDay ? (
+              <button
+                type="button"
+                onClick={() => onPressDay(item.date)}
+                style={{
+                  ...headerStyle,
+                  color,
+                  border: "none",
+                  background: "transparent",
+                  cursor: "pointer",
+                  font: "inherit",
+                  textAlign: "left",
+                }}
+              >
+                {label}
+              </button>
+            ) : (
+              <div style={{ ...headerStyle, color }}>{label}</div>
+            );
+          }
+          const event = item.event;
+          const isAllDay = isAllDayEvent(event);
+          const onPress = () => onPressEvent?.(event);
+          const args: DomAgendaEventArgs<T> = { event, mode: "schedule", isAllDay, ampm, onPress };
+          return (
+            <button
+              type="button"
+              onClick={onPress}
+              style={{
+                display: "block",
+                width: "100%",
+                textAlign: "left",
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
+                font: "inherit",
+                padding: "2px 12px",
+              }}
+            >
+              {Renderer ? <Renderer {...args} /> : <DefaultAgendaRow {...args} theme={theme} />}
+            </button>
+          );
+        }}
+      />
+      {rows.length === 0 ? (
+        <div style={{ padding: "16px 12px", color: theme.textMuted, fontSize: 14 }}>No events</div>
+      ) : null}
+    </div>
+  );
+}
+
+const headerStyle: CSSProperties = {
+  display: "block",
+  width: "100%",
+  padding: "12px 12px 4px",
+  fontSize: 13,
+  fontWeight: 600,
+};

package/src/Calendar.tsx

@@ -0,0 +1,230 @@
+import type { Locale } from "date-fns";
+import type { CSSProperties, ReactNode } from "react";
+import type {
+  BusinessHours,
+  CalendarEvent,
+  DateRange,
+  DateSelectionConstraints,
+  TimeGridMode,
+  WeekStartsOn,
+} from "@super-calendar/core";
+import { Agenda, type DomAgendaEvent } from "./Agenda";
+import { type DomMonthEvent, MonthView } from "./MonthView";
+import { type DomRenderEvent, TimeGrid } from "./TimeGrid";
+import type { DomCalendarTheme } from "./theme";
+
+export interface CalendarProps<T = unknown> extends DateSelectionConstraints {
+  /**
+   * The view to render (default "week"). `month` renders a month grid, `schedule`
+   * a day-grouped agenda list, and the others a time grid.
+   */
+  mode?: "month" | "schedule" | TimeGridMode;
+  /** Controlled anchor date. Change it (e.g. from your own header) to navigate. */
+  date: Date;
+  /** Your events. */
+  events?: CalendarEvent<T>[];
+  /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
+  weekStartsOn?: WeekStartsOn;
+  /** Column count for `mode="custom"`. */
+  numberOfDays?: number;
+  locale?: Locale;
+  theme?: Partial<DomCalendarTheme>;
+  /** Height of the scroll viewport, in px. */
+  height?: number | string;
+  className?: string;
+  style?: CSSProperties;
+
+  /** Tap an event (both layouts). */
+  onPressEvent?: (event: CalendarEvent<T>) => void;
+
+  // --- Time-grid modes (week / day / 3days / custom) ---
+  /** 12-hour AM/PM time labels (default false). */
+  ampm?: boolean;
+  /** Initial pixels per hour. */
+  hourHeight?: number;
+  /** Initial scroll position, in minutes from midnight. */
+  scrollOffsetMinutes?: number;
+  /** Sub-divisions per hour for the grid lines. */
+  timeslots?: number;
+  /** Shade the hours outside business hours. */
+  businessHours?: BusinessHours;
+  /** Show the current-time indicator (default true). */
+  showNowIndicator?: boolean;
+  /** Show the all-day lane (default true). */
+  showAllDayEventCell?: boolean;
+  /** Snap dragged/created events to this many minutes. */
+  dragStepMinutes?: number;
+  /** Tap empty grid space. */
+  onPressCell?: (date: Date) => void;
+  /** Drag empty grid space to create. */
+  onCreateEvent?: (start: Date, end: Date) => void;
+  /** Fires when an event drag begins. */
+  onDragStart?: (event: CalendarEvent<T>) => void;
+  /** Enables drag-to-move/resize; return `false` to reject the drop. */
+  onDragEvent?: (event: CalendarEvent<T>, start: Date, end: Date) => void | boolean;
+  /** Tap a day's column header. */
+  onPressDateHeader?: (day: Date) => void;
+  /** Custom time-grid event renderer. */
+  renderTimeEvent?: DomRenderEvent<T>;
+  /** Replace the hour-axis label. Receives the hour (0–23) and the `ampm` flag. */
+  hourComponent?: (hour: number, ampm: boolean) => ReactNode;
+
+  // --- Month mode ---
+  /** Max chips per day before a "+N more" row. */
+  maxVisibleEventCount?: number;
+  /** Overflow row template; `{moreCount}` is replaced. */
+  moreLabel?: string;
+  /** Render neighbouring months' days in the leading/trailing cells (default true). */
+  showAdjacentMonths?: boolean;
+  /** Fill the cell with the range background instead of the pill band. */
+  fillCellOnSelection?: boolean;
+  /** Selected span. */
+  selectedRange?: DateRange;
+  /** Discrete selected days. */
+  selectedDates?: Date[];
+  /**
+   * In month mode, make day cells keyboard-navigable (one roving tab stop, arrow
+   * keys, Enter to open the day). Default false: keyboard focus moves through
+   * events only. Has no effect on the time-grid modes.
+   */
+  keyboardDayNavigation?: boolean;
+  /** Tap a day cell. */
+  onPressDay?: (date: Date) => void;
+  /** Tap the "+N more" overflow row. */
+  onPressMore?: (events: CalendarEvent<T>[], date: Date) => void;
+  /** Custom month chip renderer. */
+  renderMonthEvent?: DomMonthEvent<T>;
+
+  // --- Schedule mode ---
+  /** Custom agenda row renderer (`mode="schedule"`). */
+  renderScheduleEvent?: DomAgendaEvent<T>;
+}
+
+/**
+ * Batteries-included entry point for the react-dom renderer: it picks the right
+ * view for `mode`. `month` renders a single {@link MonthView}; `schedule` renders
+ * an {@link Agenda}; the time-grid modes render a {@link TimeGrid}. For a
+ * scrolling month picker, use {@link MonthList} directly.
+ */
+export function Calendar<T = unknown>({
+  mode = "week",
+  date,
+  events,
+  weekStartsOn = 0,
+  numberOfDays,
+  locale,
+  theme,
+  height,
+  className,
+  style,
+  onPressEvent,
+  // time grid
+  ampm,
+  hourHeight,
+  scrollOffsetMinutes,
+  timeslots,
+  businessHours,
+  showNowIndicator,
+  showAllDayEventCell,
+  dragStepMinutes,
+  onPressCell,
+  onCreateEvent,
+  onDragStart,
+  onDragEvent,
+  onPressDateHeader,
+  renderTimeEvent,
+  hourComponent,
+  // month
+  maxVisibleEventCount,
+  moreLabel,
+  showAdjacentMonths,
+  fillCellOnSelection,
+  selectedRange,
+  selectedDates,
+  minDate,
+  maxDate,
+  isDateDisabled,
+  keyboardDayNavigation,
+  onPressDay,
+  onPressMore,
+  renderMonthEvent,
+  // schedule
+  renderScheduleEvent,
+}: CalendarProps<T>) {
+  if (mode === "schedule") {
+    return (
+      <Agenda<T>
+        events={events ?? []}
+        locale={locale}
+        ampm={ampm}
+        theme={theme}
+        height={height}
+        activeDate={date}
+        className={className}
+        style={style}
+        renderEvent={renderScheduleEvent}
+        onPressEvent={onPressEvent}
+        onPressDay={onPressDay}
+      />
+    );
+  }
+
+  if (mode === "month") {
+    return (
+      <MonthView<T>
+        date={date}
+        events={events ?? []}
+        weekStartsOn={weekStartsOn}
+        locale={locale}
+        theme={theme}
+        className={className}
+        style={style}
+        maxVisibleEventCount={maxVisibleEventCount}
+        moreLabel={moreLabel}
+        showAdjacentMonths={showAdjacentMonths}
+        fillCellOnSelection={fillCellOnSelection}
+        selectedRange={selectedRange}
+        selectedDates={selectedDates}
+        minDate={minDate}
+        maxDate={maxDate}
+        isDateDisabled={isDateDisabled}
+        keyboardDayNavigation={keyboardDayNavigation}
+        onPressDay={onPressDay}
+        onPressEvent={onPressEvent}
+        onPressMore={onPressMore}
+        renderEvent={renderMonthEvent}
+      />
+    );
+  }
+
+  return (
+    <TimeGrid<T>
+      date={date}
+      mode={mode}
+      events={events}
+      weekStartsOn={weekStartsOn}
+      numberOfDays={numberOfDays}
+      locale={locale}
+      theme={theme}
+      height={height}
+      className={className}
+      style={style}
+      ampm={ampm}
+      hourHeight={hourHeight}
+      scrollOffsetMinutes={scrollOffsetMinutes}
+      timeslots={timeslots}
+      businessHours={businessHours}
+      showNowIndicator={showNowIndicator}
+      showAllDayEventCell={showAllDayEventCell}
+      dragStepMinutes={dragStepMinutes}
+      onPressEvent={onPressEvent}
+      onPressCell={onPressCell}
+      onCreateEvent={onCreateEvent}
+      onDragStart={onDragStart}
+      onDragEvent={onDragEvent}
+      onPressDateHeader={onPressDateHeader}
+      renderEvent={renderTimeEvent}
+      hourComponent={hourComponent}
+    />
+  );
+}

package/src/MonthList.tsx

@@ -0,0 +1,176 @@
+import { LegendList } from "@legendapp/list/react";
+import { addMonths, type Locale, startOfMonth } from "date-fns";
+import { type CSSProperties, useMemo } from "react";
+import {
+  buildMonthGrid,
+  type CalendarEvent,
+  compareDayEvents,
+  type DateRange,
+  type DateSelectionConstraints,
+  groupEventsByDay,
+  type WeekStartsOn,
+} from "@super-calendar/core";
+import { type DomMonthEvent, MonthView } from "./MonthView";
+import { type DomCalendarTheme, mergeDomTheme } from "./theme";
+
+export interface MonthListProps<T = unknown> extends DateSelectionConstraints {
+  /** Anchor month; the list spans `pastMonths` before to `futureMonths` after. */
+  date: Date;
+  /** Months to render before the anchor (default 1). */
+  pastMonths?: number;
+  /** Months to render after the anchor (default 12). */
+  futureMonths?: number;
+  weekStartsOn?: WeekStartsOn;
+  /** Events to render as chips in each day cell (calendar layout when provided). */
+  events?: CalendarEvent<T>[];
+  /** Custom chip renderer; falls back to the built-in titled chip. */
+  renderEvent?: DomMonthEvent<T>;
+  /** Max chips shown per day before a "+N more" row (default 3). */
+  maxVisibleEventCount?: number;
+  /** Template for the overflow row; `{moreCount}` is replaced. */
+  moreLabel?: string;
+  /** Tap an event chip. */
+  onPressEvent?: (event: CalendarEvent<T>) => void;
+  /** Tap the "+N more" overflow row. */
+  onPressMore?: (events: CalendarEvent<T>[], date: Date) => void;
+  selectedRange?: DateRange;
+  selectedDates?: Date[];
+  /** Fill the whole cell on selection instead of the default rounded pill band. */
+  fillCellOnSelection?: boolean;
+  locale?: Locale;
+  theme?: Partial<DomCalendarTheme>;
+  /** Height of the scroll viewport, in px (default 480). */
+  height?: number | string;
+  /**
+   * When events are shown, make each month's day cells keyboard-navigable (roving
+   * tab stop, arrow keys, Enter to open the day). Default false. The picker
+   * layout (no `events`) is always navigable regardless.
+   */
+  keyboardDayNavigation?: boolean;
+  onPressDay?: (date: Date) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A vertically scrolling, virtualized list of months: the date picker. Built on
+ * Legend List's DOM renderer and the library's headless grid logic. Selection is
+ * controlled, pass `selectedRange` (or `selectedDates`) and handle `onPressDay`.
+ */
+export function MonthList<T = unknown>({
+  date,
+  pastMonths = 1,
+  futureMonths = 12,
+  weekStartsOn = 0,
+  events,
+  renderEvent,
+  maxVisibleEventCount,
+  moreLabel,
+  onPressEvent,
+  onPressMore,
+  selectedRange,
+  selectedDates,
+  fillCellOnSelection = false,
+  locale,
+  theme: themeOverrides,
+  height = 480,
+  minDate,
+  maxDate,
+  isDateDisabled,
+  keyboardDayNavigation,
+  onPressDay,
+  className,
+  style,
+}: MonthListProps<T>) {
+  const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+
+  const months = useMemo(() => {
+    const first = startOfMonth(addMonths(date, -pastMonths));
+    const count = pastMonths + futureMonths + 1;
+    return Array.from({ length: count }, (_, i) => addMonths(first, i));
+  }, [date, pastMonths, futureMonths]);
+
+  // The weekday header only depends on the week start and locale, not the
+  // rendered month window.
+  const weekdays = useMemo(
+    () => buildMonthGrid(date, { weekStartsOn, locale }).weekdays,
+    [date, weekStartsOn, locale],
+  );
+
+  // Build the day→events index once for the whole list rather than per month.
+  const eventsByDay = useMemo(() => {
+    if (!events) return undefined;
+    const map = groupEventsByDay(events);
+    // Each day reads all-day events first, then timed events by start.
+    for (const list of map.values()) list.sort(compareDayEvents);
+    return map;
+  }, [events]);
+
+  // Stable reference so LegendList only re-renders rows when selection or events
+  // actually change, not on every parent render.
+  const extraData = useMemo(
+    () => [selectedRange, selectedDates, events] as const,
+    [selectedRange, selectedDates, events],
+  );
+
+  return (
+    <div
+      className={className}
+      style={{ fontFamily: theme.fontFamily, color: theme.text, ...style }}
+    >
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+          borderBottom: `1px solid ${theme.gridLine}`,
+          padding: "8px 0",
+        }}
+      >
+        {weekdays.map((wd) => (
+          <span
+            key={wd.label}
+            style={{ textAlign: "center", fontSize: 12, fontWeight: 600, color: theme.textMuted }}
+          >
+            {wd.label}
+          </span>
+        ))}
+      </div>
+      <LegendList
+        data={months}
+        extraData={extraData}
+        keyExtractor={(m: Date) => m.toISOString()}
+        recycleItems={false}
+        estimatedItemSize={theme.cellHeight * 7 + 40}
+        // Open on the anchor month (today by default), not the first past month.
+        // `months` starts `pastMonths` before the anchor, so it sits at that index.
+        initialScrollIndex={pastMonths}
+        style={{ height, overflowY: "auto" }}
+        renderItem={({ item }: { item: Date }) => (
+          <MonthView<T>
+            date={item}
+            weekStartsOn={weekStartsOn}
+            events={events}
+            eventsByDay={eventsByDay}
+            renderEvent={renderEvent}
+            maxVisibleEventCount={maxVisibleEventCount}
+            moreLabel={moreLabel}
+            onPressEvent={onPressEvent}
+            onPressMore={onPressMore}
+            selectedRange={selectedRange}
+            selectedDates={selectedDates}
+            fillCellOnSelection={fillCellOnSelection}
+            showAdjacentMonths={false}
+            showWeekdays={false}
+            locale={locale}
+            theme={themeOverrides}
+            minDate={minDate}
+            maxDate={maxDate}
+            isDateDisabled={isDateDisabled}
+            keyboardDayNavigation={keyboardDayNavigation}
+            onPressDay={onPressDay}
+          />
+        )}
+      />
+    </div>
+  );
+}