@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/Calendar/DayCell.tsx

@@ -0,0 +1,50 @@
+import { type CSSProperties, type KeyboardEvent } from 'react';
+import clsx from 'clsx';
+import type { Day } from '../../calendar/types';
+import styles from './DayCell.module.scss';
+
+export interface DayCellProps {
+  /** The calendar day descriptor produced by `useMonth`. */
+  day: Day;
+  /** True when this cell currently has roving-tab-index focus in the grid. */
+  isFocused?: boolean;
+  /** Click on the cell — fires with the day's date. */
+  onDayClick?: (date: Date) => void;
+  /** Roving-tab-index keyboard handler from MonthView. */
+  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>, date: Date) => void;
+  /** Inline grid placement set by MonthView (e.g. `{ gridColumn: 3, gridRow: 1 }`). */
+  style?: CSSProperties;
+}
+
+/**
+ * Internal: the day-number content for one cell in the month grid. Background,
+ * border, and today/weekend tints come from MonthView's per-week `.dayColumn`
+ * background layers; this component only owns the day-number text and the
+ * gridcell ARIA role.
+ *
+ * @remarks
+ * **When NOT to use:** Do not render `DayCell` directly in application code —
+ * it is an internal building block consumed by `MonthView`. Use `Calendar` (or
+ * `MonthView`) from the design system and pass events via the `events` prop.
+ */
+export function DayCell({ day, isFocused = false, onDayClick, onKeyDown, style }: DayCellProps) {
+  const handleClick = () => onDayClick?.(day.date);
+  const handleKey = (e: KeyboardEvent<HTMLDivElement>) => onKeyDown?.(e, day.date);
+
+  return (
+    <div
+      role="gridcell"
+      tabIndex={isFocused ? 0 : -1}
+      aria-selected={false}
+      data-date-key={day.key}
+      className={clsx(styles.cell, !day.isCurrentMonth && styles.otherMonth)}
+      style={style}
+      onClick={handleClick}
+      onKeyDown={handleKey}
+    >
+      <div className={clsx(styles.dayNumber, day.isToday && styles.todayNumber)}>
+        {day.dayOfMonth}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+@use './Calendar.tokens';
+
+.dayView {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width) solid var(--calendar-border-color);
+  border-radius: var(--calendar-radius);
+  overflow: hidden;
+  background: var(--calendar-bg);
+}

package/src/components/Calendar/DayView.tsx

@@ -0,0 +1,163 @@
+import { useMemo } from 'react';
+import { useDay } from '../../calendar/useDay';
+import { useLocale } from '../../i18n/useLocale';
+import { useTranslation } from '../../i18n/useTranslation';
+import { AllDayBand } from './AllDayBand';
+import { HourGrid, HOUR_GUTTER_WIDTH, type HourGridColumn } from './HourGrid';
+import { layoutBackgroundIntervals, layoutEventsForHourGrid, needsUnassignedColumn } from './utils';
+import type {
+  CalendarBackgroundInterval,
+  CalendarDropCandidate,
+  CalendarDropResult,
+  CalendarEvent,
+  CalendarEventMove,
+  CalendarEventResize,
+  CalendarResource,
+  RenderEvent,
+} from './types';
+import styles from './DayView.module.scss';
+
+export interface DayViewProps {
+  /** The date to display. */
+  cursor: Date;
+  /** Events to display for the day. */
+  events: readonly CalendarEvent[];
+  /** Inclusive start, exclusive end of the visible hour range. */
+  hourRange: readonly [number, number];
+  /** Pixel height per hour row. */
+  hourRowHeight: number;
+  /** Override locale. */
+  locale?: string;
+  /**
+   * Bookable subjects to split the day into. One column per entry, sharing
+   * one time axis and one scroll container. Empty / omitted → a single column.
+   */
+  resources?: readonly CalendarResource[];
+  /** Availability underlay bands. */
+  backgroundIntervals?: readonly CalendarBackgroundInterval[];
+  /** Fires when a timed-event block or all-day chip is clicked. */
+  onEventClick?: (event: CalendarEvent) => void;
+  /** Fires when empty hour-grid space is clicked, with the day's date. */
+  onDayClick?: (date: Date) => void;
+  /** Enables drag-to-move. */
+  onEventMove?: (event: CalendarEvent, next: CalendarEventMove) => CalendarDropResult;
+  /** Enables drag-to-resize. */
+  onEventResize?: (event: CalendarEvent, next: CalendarEventResize) => CalendarDropResult;
+  /** Live veto during a drag. */
+  canDropEvent?: (event: CalendarEvent, next: CalendarDropCandidate) => boolean;
+  /** Snap granularity for drags, in minutes. */
+  dragSnapMinutes?: number;
+  /** Optional custom event renderer (see `RenderEvent`). */
+  renderEvent?: RenderEvent;
+}
+
+/**
+ * Internal: single-day hour grid. Shows the day at `cursor` with an
+ * AllDayBand above and an HourGrid below. With `resources`, the day splits
+ * into one column per resource (the "resource day view" every scheduling
+ * product ships) instead of a single column.
+ *
+ * @remarks
+ * **When NOT to use:** Do not render `DayView` directly — use the `Calendar`
+ * shell with `view='day'`.
+ */
+export function DayView({
+  cursor,
+  events,
+  hourRange,
+  hourRowHeight,
+  locale: localeOverride,
+  resources,
+  backgroundIntervals,
+  onEventClick,
+  onDayClick,
+  onEventMove,
+  onEventResize,
+  canDropEvent,
+  dragSnapMinutes,
+  renderEvent,
+}: DayViewProps) {
+  const contextLocale = useLocale();
+  const locale = localeOverride ?? contextLocale;
+  const t = useTranslation();
+  const day = useDay(cursor, { locale });
+  const unassignedLabel = t('calendar.unassigned');
+
+  const { columns, headers } = useMemo(() => {
+    const date = day.day.date;
+    if (!resources || resources.length === 0) {
+      const single: HourGridColumn[] = [{ date, key: day.day.key, isWeekend: day.day.isWeekend }];
+      return { columns: single, headers: [<span key={day.day.key}>{day.dayLabel}</span>] };
+    }
+
+    const cols: HourGridColumn[] = resources.map((r) => ({
+      date,
+      key: `${day.day.key}-${r.id}`,
+      resourceId: r.id,
+      isWeekend: day.day.isWeekend,
+    }));
+    const labels = resources.map((r) => <span key={r.id}>{r.label}</span>);
+
+    // Only rendered when something actually needs it — see
+    // `needsUnassignedColumn`.
+    const ids = new Set(resources.map((r) => r.id));
+    if (needsUnassignedColumn(events, date, ids)) {
+      cols.push({
+        date,
+        key: `${day.day.key}-unassigned`,
+        resourceId: null,
+        isWeekend: day.day.isWeekend,
+      });
+      labels.push(<span key="__unassigned">{unassignedLabel}</span>);
+    }
+    return { columns: cols, headers: labels };
+  }, [
+    day.day.date,
+    day.day.key,
+    day.day.isWeekend,
+    day.dayLabel,
+    events,
+    resources,
+    unassignedLabel,
+  ]);
+
+  const layout = useMemo(
+    () => layoutEventsForHourGrid(events, columns, hourRange),
+    [events, columns, hourRange],
+  );
+
+  const backgroundBlocks = useMemo(
+    () => layoutBackgroundIntervals(backgroundIntervals ?? [], columns, hourRange),
+    [backgroundIntervals, columns, hourRange],
+  );
+
+  return (
+    <div className={styles.dayView}>
+      <AllDayBand
+        bars={layout.allDayBars}
+        columnCount={columns.length}
+        gutterWidth={HOUR_GUTTER_WIDTH}
+        view="day"
+        renderEvent={renderEvent}
+        onEventClick={onEventClick}
+      />
+      <HourGrid
+        columns={columns}
+        columnHeaders={headers}
+        hourRange={hourRange}
+        hourRowHeight={hourRowHeight}
+        timedBlocks={layout.timedBlocks}
+        backgroundBlocks={backgroundBlocks}
+        view="day"
+        renderEvent={renderEvent}
+        onEventClick={onEventClick}
+        onDayClick={onDayClick}
+        onEventMove={onEventMove}
+        onEventResize={onEventResize}
+        canDropEvent={canDropEvent}
+        dragSnapMinutes={dragSnapMinutes}
+        ariaLabel={day.dayLabel}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,171 @@
+@use '../../styles/mixins' as *;
+@use './Calendar.tokens';
+
+.chip {
+  display: flex;
+  align-items: center;
+  gap: var(--calendar-event-chip-gap);
+  width: 100%;
+  padding: 0 var(--calendar-event-chip-padding-x);
+  height: var(--calendar-event-chip-height);
+
+  // Border is set per-tone (see below) so neutral chips stay visible on
+  // tinted backgrounds (today column, weekend columns). Tone chips get a
+  // border matching their accent color for the same reason.
+  border: var(--border-width) solid currentColor;
+  border-radius: var(--calendar-event-chip-radius);
+  font-family: inherit;
+  font-size: var(--calendar-event-chip-font-size);
+  font-weight: var(--calendar-event-chip-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    filter var(--calendar-event-chip-transition-filter),
+    background var(--calendar-event-chip-transition-bg);
+
+  &:hover:not(:disabled) {
+    filter: brightness(0.95);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.continuesLeft {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.continuesRight {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.time {
+  flex-shrink: 0;
+  opacity: var(--calendar-event-chip-time-opacity);
+}
+
+.title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Tooltip content markup — small dim time prefix on its own line above the
+// event name so the two are visually distinct even when the event title is
+// long enough to wrap.
+.tooltipBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-event-tooltip-gap);
+}
+
+// Tooltip background is dark (var(--color-fg)); foreground colors here are
+// the inverse so the time and title are readable.
+.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);
+}
+
+// ── 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.
+  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);
+}
+
+// Tones — non-allDay (tinted background, strong-color foreground)
+.neutral {
+  background: var(--calendar-event-chip-bg-neutral);
+  color: var(--calendar-event-chip-fg-neutral);
+  border-color: var(--calendar-event-chip-border-color-neutral);
+}
+
+.accent {
+  background: var(--calendar-event-chip-bg-accent);
+  color: var(--calendar-event-chip-fg-accent);
+}
+
+.success {
+  background: var(--calendar-event-chip-bg-success);
+  color: var(--calendar-event-chip-fg-success);
+}
+
+.warning {
+  background: var(--calendar-event-chip-bg-warning);
+  color: var(--calendar-event-chip-fg-warning);
+}
+
+.danger {
+  background: var(--calendar-event-chip-bg-danger);
+  color: var(--calendar-event-chip-fg-danger);
+}
+
+// allDay — tone-filled background, contrast foreground
+.allDay.neutral {
+  background: var(--calendar-event-chip-all-day-bg-neutral);
+  color: var(--calendar-event-chip-all-day-fg-neutral);
+}
+
+.allDay.accent {
+  background: var(--calendar-event-chip-all-day-bg-accent);
+  color: var(--calendar-event-chip-all-day-fg-accent);
+}
+
+.allDay.success {
+  background: var(--calendar-event-chip-all-day-bg-success);
+  color: var(--calendar-event-chip-all-day-fg-success);
+}
+
+.allDay.warning {
+  background: var(--calendar-event-chip-all-day-bg-warning);
+  color: var(--calendar-event-chip-all-day-fg-warning);
+}
+
+.allDay.danger {
+  background: var(--calendar-event-chip-all-day-bg-danger);
+  color: var(--calendar-event-chip-all-day-fg-danger);
+}

package/src/components/Calendar/EventChip.tsx

@@ -0,0 +1,115 @@
+import { type MouseEvent } from 'react';
+import clsx from 'clsx';
+import { formatTime } from '../../calendar';
+import { useLocale } from '../../i18n/useLocale';
+import { Tooltip } from '../Tooltip';
+import { resolveEventColor } from './eventColor';
+import { formatEventDuration } from './utils';
+import type { CalendarEvent, CalendarView, RenderEvent } from './types';
+import styles from './EventChip.module.scss';
+
+export interface EventChipProps {
+  /** The calendar event to render. */
+  event: CalendarEvent;
+  /** True when the bar continues from a previous week — left edge is flattened. */
+  continuesLeft?: boolean;
+  /** True when the bar continues into a next week — right edge is flattened. */
+  continuesRight?: boolean;
+  /** Called when the chip is clicked; receives the event and the native mouse event. */
+  onClick?: (event: CalendarEvent, mouseEvent: MouseEvent<HTMLButtonElement>) => void;
+  /** Which view is rendering this chip (passed to `renderEvent` for branching). Defaults to `'month'`. */
+  view?: CalendarView;
+  /** Optional custom inner content. When set, replaces the default time + title spans. */
+  renderEvent?: RenderEvent;
+}
+
+/**
+ * Internal: a single event bar inside a Calendar month grid. Renders as a
+ * tone-styled button wrapped in a Tooltip so the full "time + title" is
+ * always reachable even when the chip text is ellipsis-clipped in narrow
+ * day columns.
+ *
+ * - Non-`allDay` events show a subtle tinted background with a time prefix
+ *   in the chip and "<time> <title>" in the tooltip.
+ * - `allDay` events use a filled tone background, no time prefix, and the
+ *   tooltip shows just the title.
+ * - Tone defaults to `'neutral'` when not set on the event.
+ *
+ * @remarks
+ * **When NOT to use:** Do not render `EventChip` directly in application code —
+ * it is an internal building block consumed by `MonthView`. Use `Calendar` (or
+ * `MonthView`) from the design system and pass events via the `events` prop.
+ */
+export function EventChip({
+  event,
+  continuesLeft = false,
+  continuesRight = false,
+  onClick,
+  view = 'month',
+  renderEvent,
+}: EventChipProps) {
+  const locale = useLocale();
+  // `color` takes the surface and moves `tone` to a leading-edge stripe; with
+  // no `color` this resolves to the tone class alone, exactly as before.
+  const { toneClass, hasStripe, style: colorStyle } = resolveEventColor(event);
+  const isAllDay = event.allDay === true;
+  const time = isAllDay ? '' : formatTime(event.startsAt, locale);
+  const duration = formatEventDuration(event.startsAt, event.endsAt, isAllDay);
+  const tooltipContent = isAllDay ? (
+    <span className={styles.tooltipBody}>
+      <span className={styles.tooltipTime}>{duration}</span>
+      <span className={styles.tooltipTitle}>{event.title}</span>
+    </span>
+  ) : (
+    <span className={styles.tooltipBody}>
+      <span className={styles.tooltipTime}>
+        {time} · {duration}
+      </span>
+      <span className={styles.tooltipTitle}>{event.title}</span>
+    </span>
+  );
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onClick?.(event, e);
+  };
+
+  const customContent = renderEvent
+    ? renderEvent(event, {
+        view,
+        asAllDay: isAllDay,
+        continuesLeft,
+        continuesRight,
+        timeLabel: isAllDay ? undefined : time,
+        duration,
+      })
+    : null;
+
+  return (
+    <Tooltip content={tooltipContent}>
+      <button
+        type="button"
+        className={clsx(
+          styles.chip,
+          toneClass && styles[toneClass],
+          colorStyle && styles.colored,
+          hasStripe && styles.striped,
+          isAllDay && styles.allDay,
+          continuesLeft && styles.continuesLeft,
+          continuesRight && styles.continuesRight,
+        )}
+        style={colorStyle}
+        onClick={handleClick}
+      >
+        {customContent !== null ? (
+          customContent
+        ) : (
+          <>
+            {!isAllDay && <span className={styles.time}>{time}</span>}
+            <span className={styles.title}>{event.title}</span>
+          </>
+        )}
+      </button>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,123 @@
+@use '../../styles/mixins' as *;
+@use './Calendar.tokens';
+
+.scroll {
+  overflow: auto;
+  max-height: 70vh;
+}
+
+// While a drag is in flight, suppress text selection across the whole grid —
+// otherwise dragging upward selects the hour labels behind the block.
+.scrollDragging {
+  user-select: none;
+  touch-action: none;
+}
+
+// Keyboard-drag instructions: referenced by each block's aria-describedby,
+// never shown visually.
+.dragHint {
+  @include visually-hidden;
+}
+
+.grid {
+  display: grid;
+  background: var(--calendar-hour-grid-bg);
+}
+
+// ARIA-row wrapper: `display: contents` keeps the corner cell + column
+// headers as direct grid children of `.grid` while satisfying the
+// WAI-ARIA contract that `columnheader` live inside `row`.
+.headerRow {
+  display: contents;
+}
+
+.cornerCell {
+  border-right: var(--border-width) solid var(--calendar-border-color);
+  border-bottom: var(--border-width) solid var(--calendar-border-color);
+  background: var(--calendar-hour-corner-bg);
+}
+
+.columnHeader {
+  padding: var(--calendar-hour-column-header-padding);
+  background: var(--calendar-hour-column-header-bg);
+  border-right: var(--border-width) solid var(--calendar-border-color);
+  border-bottom: var(--border-width) solid var(--calendar-border-color);
+  font-size: var(--calendar-hour-column-header-font-size);
+  font-weight: var(--calendar-hour-column-header-font-weight);
+  color: var(--calendar-hour-column-header-fg);
+  text-align: center;
+}
+
+.weekendHeader {
+  background: var(--calendar-hour-column-header-bg-weekend);
+}
+
+.todayHeader {
+  background: var(--calendar-hour-column-header-bg-today);
+  color: var(--calendar-hour-column-header-fg-today);
+}
+
+.hourLabel {
+  padding: var(--calendar-hour-label-padding);
+  font-size: var(--calendar-hour-label-font-size);
+  color: var(--calendar-hour-label-fg);
+  text-align: right;
+  border-right: var(--border-width) solid var(--calendar-border-color);
+  border-bottom: var(--border-width) solid var(--calendar-border-color);
+  background: var(--calendar-hour-label-bg);
+}
+
+.dayColumn {
+  position: relative;
+  border-right: var(--border-width) solid var(--calendar-border-color);
+}
+
+.weekendColumn {
+  background: var(--calendar-hour-day-column-bg-weekend);
+}
+
+// Today's column body intentionally has NO tint — only the column header
+// (`.todayHeader`) carries the accent color. A tinted body would make
+// events with the `accent` tone vanish into the background.
+
+// Availability underlay. Painted first in DOM order and pinned to z-index 0
+// so it sits beneath the hour separators, the now-line and every event block
+// (whose z-index starts at lane + 1). `pointer-events: none` keeps the
+// column's own click handler (onDayClick) reachable through the band.
+.backgroundBand {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: var(--calendar-background-band-opacity);
+}
+
+.bandUnavailable {
+  background: var(--calendar-background-band-bg-unavailable);
+}
+
+.bandAvailable {
+  background: var(--calendar-background-band-bg-available);
+}
+
+.hourSeparator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--border-width);
+  background: var(--calendar-hour-separator-bg);
+}
+
+// The now-line sits above lane-stacked event blocks (z-index = lane + 1,
+// max ~10) but below the hover-lifted block (z-index 100), so it stays
+// visible across resting events and yields when a consumer is focused on
+// reading a specific block.
+.nowLine {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--calendar-now-line-height);
+  background: var(--calendar-now-line-bg);
+  z-index: 50;
+}