@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/Calendar/MonthView.tsx

@@ -0,0 +1,296 @@
+import { useCallback, useEffect, useMemo, useState, type KeyboardEvent } from 'react';
+import clsx from 'clsx';
+import type { MonthGrid } from '../../calendar/types';
+import { addDays, addMonths, isSameDay, startOfWeek } from '../../calendar/dateMath';
+import { useTranslation } from '../../i18n/useTranslation';
+import type { CalendarEvent, EventBar, RenderEvent } from './types';
+import { layoutEventsForMonth } from './utils';
+import { DayCell } from './DayCell';
+import { EventChip } from './EventChip';
+import styles from './MonthView.module.scss';
+
+/** Picks the initial (or re-derived) focused cell key for a given grid + cursor. */
+function pickInitialFocusKey(grid: MonthGrid, cursor: Date): string {
+  const allDays = grid.weeks.flat();
+  // Prefer the cursor's own day if it's in the grid and in the current month.
+  const cursorDay = allDays.find(
+    (d) =>
+      d.date.getFullYear() === cursor.getFullYear() &&
+      d.date.getMonth() === cursor.getMonth() &&
+      d.date.getDate() === cursor.getDate(),
+  );
+  if (cursorDay) return cursorDay.key;
+  const today = allDays.find((d) => d.isToday && d.isCurrentMonth);
+  const first = allDays.find((d) => d.isCurrentMonth);
+  return (today ?? first ?? allDays[0]).key;
+}
+
+export interface MonthViewProps {
+  /** The month grid produced by `useMonth`. */
+  grid: MonthGrid;
+  /** Events to lay out across the grid. */
+  events: readonly CalendarEvent[];
+  /** Maximum number of lane rows shown per week before "+N more" overflow. */
+  maxLanesPerWeek: number;
+  /** Currently navigated cursor — used to find the initial focused cell. */
+  cursor: Date;
+  /** Fires when the user navigates to a different month (via PageUp/PageDown). */
+  onChange?: (date: Date) => void;
+  /** Fires when a day cell (or its "+N more" chip) is clicked, or Enter/Space is pressed on it. */
+  onDayClick?: (date: Date) => void;
+  /** Fires when an event chip is clicked. */
+  onEventClick?: (event: CalendarEvent) => void;
+  /** Optional custom event renderer. See `RenderEvent` in `types.ts`. */
+  renderEvent?: RenderEvent;
+}
+
+/**
+ * Internal: the month grid renderer. Consumes a `MonthGrid` from `useMonth`,
+ * computes event bar placement via `layoutEventsForMonth`, and renders the
+ * weekday header + week rows. Implements WAI-ARIA grid keyboard navigation
+ * (arrow keys, Home/End, PageUp/PageDown, Enter/Space).
+ *
+ * @remarks
+ * **When NOT to use:** Do not render `MonthView` directly in application code —
+ * use the `Calendar` shell component which owns the `useMonth` state and the
+ * month navigation header. `MonthView` is a pure renderer with no month
+ * navigation state of its own.
+ *
+ * @example
+ * ```tsx
+ * // Inside a parent that owns the anchor date:
+ * const grid = useMonth(anchor);
+ * <MonthView
+ *   grid={grid}
+ *   events={events}
+ *   maxLanesPerWeek={3}
+ *   cursor={anchor}
+ *   onChange={setAnchor}
+ *   onDayClick={handleDayClick}
+ *   onEventClick={handleEventClick}
+ * />
+ * ```
+ */
+export function MonthView({
+  grid,
+  events,
+  maxLanesPerWeek,
+  cursor,
+  onChange,
+  onDayClick,
+  onEventClick,
+  renderEvent,
+}: MonthViewProps) {
+  const t = useTranslation();
+  const moreEventsLabel = (count: number) => t('calendar.moreEvents', { count });
+  const layout = useMemo(
+    () => layoutEventsForMonth(events, grid.weeks, maxLanesPerWeek),
+    [events, grid.weeks, maxLanesPerWeek],
+  );
+
+  const [focusedKey, setFocusedKey] = useState<string>(() => pickInitialFocusKey(grid, cursor));
+
+  // Re-sync focusedKey when the grid changes (e.g. after Prev/Next/Today nav).
+  // Preserve the existing key if it still exists in the new grid; re-derive only
+  // when the old key is no longer present (month changed).
+  useEffect(() => {
+    setFocusedKey((prev) => {
+      const allKeys = new Set(grid.weeks.flat().map((d) => d.key));
+      if (allKeys.has(prev)) return prev;
+      return pickInitialFocusKey(grid, cursor);
+    });
+  }, [grid, cursor]);
+
+  const barsByWeekLane = useMemo(() => {
+    const map = new Map<number, Map<number, EventBar[]>>();
+    for (const bar of layout.bars) {
+      let weekMap = map.get(bar.weekIndex);
+      if (!weekMap) {
+        weekMap = new Map();
+        map.set(bar.weekIndex, weekMap);
+      }
+      let laneArr = weekMap.get(bar.lane);
+      if (!laneArr) {
+        laneArr = [];
+        weekMap.set(bar.lane, laneArr);
+      }
+      laneArr.push(bar);
+    }
+    return map;
+  }, [layout.bars]);
+
+  const weekStartsOn = grid.weeks[0][0].date.getDay() as 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>, date: Date) => {
+      let nextDate: Date | null = null;
+      let monthChange = false;
+
+      switch (e.key) {
+        case 'ArrowLeft':
+          nextDate = addDays(date, -1);
+          break;
+        case 'ArrowRight':
+          nextDate = addDays(date, 1);
+          break;
+        case 'ArrowUp':
+          nextDate = addDays(date, -7);
+          break;
+        case 'ArrowDown':
+          nextDate = addDays(date, 7);
+          break;
+        case 'Home':
+          nextDate = startOfWeek(date, weekStartsOn);
+          break;
+        case 'End': {
+          const ws = startOfWeek(date, weekStartsOn);
+          nextDate = addDays(ws, 6);
+          break;
+        }
+        case 'PageUp':
+          nextDate = addMonths(date, -1);
+          monthChange = true;
+          break;
+        case 'PageDown':
+          nextDate = addMonths(date, 1);
+          monthChange = true;
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          onDayClick?.(date);
+          return;
+        default:
+          return;
+      }
+
+      if (nextDate) {
+        e.preventDefault();
+        if (monthChange) {
+          onChange?.(nextDate);
+          // Don't try to focus a cell — the cursor will change and the grid will re-render.
+          return;
+        }
+        const allDays = grid.weeks.flat();
+        const exactMatch = allDays.find((d) => isSameDay(d.date, nextDate!));
+        if (exactMatch) {
+          setFocusedKey(exactMatch.key);
+          requestAnimationFrame(() => {
+            const el = document.querySelector(`[data-date-key="${exactMatch.key}"]`);
+            if (el instanceof HTMLElement) el.focus();
+          });
+        } else {
+          // Arrow nav went off the visible grid — ask the consumer to scroll the cursor.
+          onChange?.(nextDate);
+        }
+      }
+    },
+    [grid.weeks, onChange, onDayClick, weekStartsOn],
+  );
+
+  return (
+    <div role="grid" aria-label={grid.monthLabel} aria-readonly="true" className={styles.grid}>
+      <div role="row" className={styles.weekdayHeader}>
+        {grid.weekdayLabels.map((label, i) => (
+          <div key={i} role="columnheader" className={styles.weekdayLabel}>
+            {label}
+          </div>
+        ))}
+      </div>
+
+      {grid.weeks.map((week, weekIndex) => {
+        const weekBars = barsByWeekLane.get(weekIndex);
+        const laneCount = weekBars
+          ? Math.min(maxLanesPerWeek, Math.max(...weekBars.keys()) + 1)
+          : 0;
+        const hasHidden = week.some((d) => (layout.hiddenCounts.get(d.key) ?? 0) > 0);
+        return (
+          <div key={weekIndex} className={styles.week}>
+            {/* Background day-column layers — span all rows in the week's grid.
+                `span 99` covers implicit lane rows; `-1` would only reach the
+                end of the explicit grid (row 1), leaving events visually outside
+                the column. */}
+            {week.map((day, i) => (
+              <div
+                key={`bg-${day.key}`}
+                aria-hidden="true"
+                className={clsx(
+                  styles.dayColumn,
+                  day.isToday && styles.dayColumnToday,
+                  day.isWeekend && styles.dayColumnWeekend,
+                )}
+                style={{ gridColumn: i + 1, gridRow: '1 / span 99' }}
+              />
+            ))}
+            {/* ARIA row of day cells — `display: contents` flattens this wrapper
+                so each DayCell becomes a direct grid item of `.week`. */}
+            <div role="row" className={styles.dayRow}>
+              {week.map((day, i) => (
+                <DayCell
+                  key={day.key}
+                  day={day}
+                  isFocused={day.key === focusedKey}
+                  onDayClick={onDayClick}
+                  onKeyDown={handleKeyDown}
+                  style={{ gridColumn: i + 1, gridRow: 1 }}
+                />
+              ))}
+            </div>
+            {/* Event bars in lane rows (rows 2..laneCount+1) */}
+            {Array.from({ length: laneCount }).flatMap((_, lane) => {
+              const laneBars = weekBars?.get(lane) ?? [];
+              return laneBars.map((bar) => (
+                <div
+                  key={bar.event.id}
+                  role="presentation"
+                  className={styles.barSlot}
+                  style={{
+                    gridRow: lane + 2,
+                    gridColumn: `${bar.startCol} / ${bar.endCol + 1}`,
+                  }}
+                >
+                  <EventChip
+                    event={bar.event}
+                    continuesLeft={bar.continuesLeft}
+                    continuesRight={bar.continuesRight}
+                    view="month"
+                    renderEvent={renderEvent}
+                    onClick={(ev) => onEventClick?.(ev)}
+                  />
+                </div>
+              ));
+            })}
+            {/* "+N more" overflow chips — placed at the row right after the
+                last visible lane, in each affected day's column. Click fires
+                `onDayClick(date)` so the consumer can open their own detail
+                UI (popover, modal, drawer) — Calendar stays read-only. */}
+            {hasHidden &&
+              week.map((day, i) => {
+                const hiddenCount = layout.hiddenCounts.get(day.key) ?? 0;
+                if (hiddenCount === 0) return null;
+                return (
+                  <div
+                    key={`more-${day.key}`}
+                    className={styles.moreChipWrapper}
+                    style={{ gridColumn: i + 1, gridRow: laneCount + 2 }}
+                  >
+                    <button
+                      type="button"
+                      className={styles.moreChip}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDayClick?.(day.date);
+                      }}
+                      aria-label={moreEventsLabel(hiddenCount)}
+                    >
+                      {t('calendar.moreEventsShort', { count: hiddenCount })}
+                    </button>
+                  </div>
+                );
+              })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/Calendar/TimedEvent.module.scss

@@ -0,0 +1,205 @@
+@use '../../styles/mixins' as *;
+@use './Calendar.tokens';
+
+.block {
+  // Per-block cascade geometry is passed as CSS custom properties from
+  // TimedEvent.tsx so that :hover / :focus-visible can override left, width,
+  // and z-index without specificity fights with inline style.
+  position: absolute;
+  left: var(--cal-block-left, 0);
+  width: var(--cal-block-width, auto);
+  z-index: var(--cal-block-z, auto);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--calendar-timed-event-gap);
+  padding: var(--calendar-timed-event-padding);
+
+  // Border is set per-tone (see rules below) so neutral blocks stay visible
+  // on the tinted today / weekend column backgrounds. Tone blocks get a
+  // border matching their accent color for the same reason.
+  border: var(--border-width) solid currentColor;
+  border-radius: var(--calendar-timed-event-radius);
+  font-family: inherit;
+  font-size: var(--calendar-timed-event-font-size);
+  font-weight: var(--calendar-timed-event-font-weight);
+  line-height: 1.2;
+  text-align: left;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    left var(--calendar-timed-event-transition-position),
+    width var(--calendar-timed-event-transition-position),
+    filter var(--calendar-timed-event-transition-filter),
+    background var(--calendar-timed-event-transition-bg);
+
+  // Hover (and keyboard-focus) lifts the block to full column width and on
+  // top of any cascade neighbours. Animated via the transition above.
+  &:hover:not(:disabled),
+  &:focus-visible {
+    left: 0;
+    width: 100%;
+    z-index: var(--cal-block-z-hover, auto);
+    filter: brightness(0.95);
+  }
+
+  // INSET: HourGrid scrolls, and a timed event sits flush against its bottom edge, so
+  // an outset ring loses that band entirely (#505).
+  &:focus-visible {
+    @include focus-ring($offset: calc(-1 * var(--ring-offset)));
+  }
+}
+
+// Movable blocks advertise the gesture on the pointer. `touch-action: none`
+// lets a touch drag reschedule instead of scrolling the grid.
+.movable {
+  cursor: grab;
+  touch-action: none;
+}
+
+// The block currently being dragged: lifted off the grid, semi-transparent
+// so the slot it will land on stays readable underneath.
+.dragging {
+  cursor: grabbing;
+  opacity: var(--calendar-drag-block-opacity);
+  box-shadow: var(--calendar-drag-block-shadow);
+
+  // The lift is instant — animating position would lag the pointer.
+  transition: none;
+}
+
+// `canDropEvent` refused this placement. Outlined rather than recolored so
+// the event's own tone stays legible while the user hunts for a valid slot.
+.invalidDrop {
+  outline: var(--calendar-drag-invalid-outline-width) solid var(--calendar-drag-invalid-outline);
+  outline-offset: 0;
+}
+
+// Bottom-edge resize affordance. Pointer-only: keyboard users resize with
+// Alt+Shift+Arrow on the block itself, so this carries no focus behaviour.
+.resizeHandle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--calendar-resize-handle-height);
+  cursor: ns-resize;
+  touch-action: none;
+}
+
+.resizeHandle:hover {
+  background: var(--calendar-resize-handle-bg-hover);
+}
+
+// ── Per-event palette color (CalendarEvent.color) ──────────────────────────
+// `color` paints the surface, so the two colour axes never fight over the same
+// pixels: a non-neutral `tone` moves to a band on the left edge instead of
+// being overridden. Both custom properties are injected inline by
+// resolveEventColor(). The band is physically left — the library has no RTL
+// support anywhere, and the two existing stripe implementations (Card, Badge)
+// are physical too.
+.colored {
+  // background-COLOR, not the shorthand: `.striped` paints its band as a
+  // background-image, and the shorthand would reset it depending on source
+  // order. Longhands compose regardless of order.
+  background-color: var(--calendar-event-color-bg, transparent);
+  color: var(--calendar-event-color-fg, currentColor);
+}
+
+.striped {
+  // A background-image gradient rather than an inset box-shadow. box-shadow is
+  // NOT additive — the winning declaration replaces the whole list — and three
+  // rules on these elements already own it: `:focus-visible` (the focus ring),
+  // `.dragging` (the lift shadow), and this. Using it here made the focus ring
+  // erase the stripe and the stripe erase the drag shadow. A gradient composes
+  // with all of them, survives the hover `filter: brightness()`, and costs no
+  // geometry.
+  // HALF TRUE SINCE #505. The focus ring is an outline now, and an outline
+  // paints OVER the background — so it no longer competes with this for the
+  // box-shadow slot, but while focused it covers the outer 2px of the 4px tone
+  // band — the 1px `currentColor` border plus 1px of the 3px gradient. Two pixels of
+  // stripe still read, and the alternative is worse: this block sits flush
+  // against HourGrid's scroller, so an outset ring loses its bottom band
+  // entirely. Accepted deliberately rather than discovered — the trade is a
+  // transient partial occlusion against a permanently missing indicator.
+  background-image: linear-gradient(
+    to right,
+    var(--calendar-event-stripe-color, currentColor) 0,
+    var(--calendar-event-stripe-color, currentColor) var(--calendar-event-color-stripe-width),
+    transparent var(--calendar-event-color-stripe-width)
+  );
+
+  // background-origin defaults to padding-box, so the gradient covers 1–4px of
+  // the border box while the 1px border sits at 0–1px. Painting the border the
+  // same colour makes the leading edge read as ONE solid 4px band instead of a
+  // sliver of tone beside the palette border. Measured — without it the band is
+  // legible but competes.
+  border-left-color: var(--calendar-event-stripe-color, currentColor);
+}
+
+// Short blocks (at min-height) use a single-line row layout so the start
+// time stays visible alongside the title in the limited vertical space.
+.short {
+  flex-direction: row;
+  align-items: center;
+}
+
+.time {
+  font-size: var(--calendar-timed-event-time-font-size);
+  font-weight: var(--calendar-timed-event-time-font-weight);
+  opacity: var(--calendar-timed-event-time-opacity);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tooltipBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-event-tooltip-gap);
+}
+
+.tooltipTime {
+  font-size: var(--calendar-event-tooltip-time-font-size);
+  font-weight: var(--calendar-event-tooltip-time-font-weight);
+  color: var(--calendar-event-tooltip-time-fg);
+}
+
+.tooltipTitle {
+  font-size: var(--calendar-event-tooltip-title-font-size);
+  font-weight: var(--calendar-event-tooltip-title-font-weight);
+  color: var(--calendar-event-tooltip-title-fg);
+}
+
+.neutral {
+  background: var(--calendar-timed-event-bg-neutral);
+  color: var(--calendar-timed-event-fg-neutral);
+  border-color: var(--calendar-timed-event-border-color-neutral);
+}
+
+.accent {
+  background: var(--calendar-timed-event-bg-accent);
+  color: var(--calendar-timed-event-fg-accent);
+}
+
+.success {
+  background: var(--calendar-timed-event-bg-success);
+  color: var(--calendar-timed-event-fg-success);
+}
+
+.warning {
+  background: var(--calendar-timed-event-bg-warning);
+  color: var(--calendar-timed-event-fg-warning);
+}
+
+.danger {
+  background: var(--calendar-timed-event-bg-danger);
+  color: var(--calendar-timed-event-fg-danger);
+}