rift-ds 1.0.0

package/components/GanttChart/GanttChart.css

@@ -0,0 +1,326 @@
+/* ============================================
+   GANTT CHART COMPONENT
+   Phases and tasks as bars on a shared
+   timeline, with milestones and a today rule
+   ============================================ */
+
+/* Card chrome, header, and padding come from the shared chart styles
+   (Chart.css); this file owns the axis, rows, bars, and markers. */
+
+.ds-gantt {
+  /* Structural sizes, component-scoped: the sticky label rail, the smallest
+     timeline worth drawing before the scroll takes over, and the row rhythm. */
+  --ds-gantt-label-width: 172px;
+  --ds-gantt-track-min: 480px;
+  --ds-gantt-row-height: 36px;
+  --ds-gantt-bar-height: 20px;
+
+  min-width: 0;
+}
+
+.ds-gantt__body {
+  min-width: 0;
+}
+
+/* The whole drawing scrolls sideways in its own container on narrow
+   screens; the label column stays pinned inside it. */
+.ds-gantt__scroll {
+  overflow-x: auto;
+  padding-bottom: var(--padding-050);
+}
+
+.ds-gantt__canvas {
+  min-width: calc(var(--ds-gantt-label-width) + var(--ds-gantt-track-min));
+}
+
+/* ============================================
+   AXIS — month labels
+   ============================================ */
+
+.ds-gantt__axis {
+  display: flex;
+  align-items: flex-end;
+  height: var(--ds-gantt-row-height);
+}
+
+.ds-gantt__corner {
+  flex: 0 0 var(--ds-gantt-label-width);
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  height: 100%;
+  background-color: var(--color-bg-container-primary);
+}
+
+.ds-gantt__months {
+  flex: 1 0 var(--ds-gantt-track-min);
+  position: relative;
+  min-width: 0;
+  height: 100%;
+}
+
+.ds-gantt__month-label {
+  position: absolute;
+  bottom: var(--padding-100);
+  padding-left: var(--padding-100);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+/* ============================================
+   ROWS
+   ============================================ */
+
+.ds-gantt__rows {
+  position: relative;
+}
+
+.ds-gantt__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-gantt__row,
+.ds-gantt__group-row {
+  display: flex;
+  align-items: center;
+  height: var(--ds-gantt-row-height);
+  border-top: var(--border-025) solid var(--color-divider);
+}
+
+.ds-gantt__label,
+.ds-gantt__group-label {
+  flex: 0 0 var(--ds-gantt-label-width);
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding-right: var(--padding-200);
+  background-color: var(--color-bg-container-primary);
+  border-right: var(--border-025) solid var(--color-divider);
+  min-width: 0;
+}
+
+.ds-gantt__label {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  align-content: center;
+}
+
+.ds-gantt__group-label {
+  font-family: var(--font-overline-family);
+  font-size: var(--font-overline-size);
+  font-weight: var(--font-overline-weight);
+  line-height: var(--font-overline-line-height);
+  letter-spacing: var(--font-overline-letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  align-content: center;
+}
+
+.ds-gantt__track {
+  flex: 1 0 var(--ds-gantt-track-min);
+  position: relative;
+  min-width: 0;
+  height: 100%;
+}
+
+/* ============================================
+   OVERLAY — gridlines + today rule
+   Drawn once behind every row, offset past the
+   label rail so its percentages match the bars
+   ============================================ */
+
+.ds-gantt__overlay {
+  position: absolute;
+  inset: 0 0 0 var(--ds-gantt-label-width);
+  pointer-events: none;
+}
+
+.ds-gantt__gridline {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--border-025);
+  background-color: var(--color-divider);
+}
+
+/* Today is current, not selected: the inverse role, like EventCalendar's
+   today chip. Teal stays reserved for the selected bar. */
+.ds-gantt__today {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--color-bg-page-inverse);
+  z-index: 1;
+}
+
+/* The rule's flag: an inverse chip, like EventCalendar's today chip. It
+   sits in the axis row and covers whatever month label falls behind it. */
+.ds-gantt__today-label {
+  position: absolute;
+  bottom: calc(100% + var(--padding-050));
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0 var(--padding-150);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-page-inverse);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  color: var(--color-text-on-inverse);
+  white-space: nowrap;
+}
+
+/* ============================================
+   BARS
+   ============================================ */
+
+.ds-gantt__bar {
+  --ds-gantt-accent: var(--color-status-neutral-border);
+
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: var(--ds-gantt-bar-height);
+  border: none;
+  border-radius: var(--radius-pill);
+  background-color: var(--ds-gantt-accent);
+  padding: 0;
+  overflow: hidden;
+  z-index: 1;
+}
+
+/* With a progress reading, the bar becomes a quiet track and the accent
+   fills the completed share — the ProgressBar recipe on a timeline. */
+.ds-gantt__bar--tracked {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+.ds-gantt__bar-fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: var(--radius-pill);
+  background-color: var(--ds-gantt-accent);
+  transition: width var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+/* Projected work is a target, not a commitment: outline only. */
+.ds-gantt__bar--projected {
+  background-color: transparent;
+  border: var(--border-025) dashed var(--ds-gantt-accent);
+}
+
+button.ds-gantt__bar {
+  cursor: pointer;
+}
+
+button.ds-gantt__bar:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-gantt__bar--selected {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   ACCENTS
+   ============================================ */
+
+.ds-gantt__bar--coral,
+.ds-gantt__milestone--coral {
+  --ds-gantt-accent: var(--color-core-accent-coral);
+}
+
+.ds-gantt__bar--violet,
+.ds-gantt__milestone--violet {
+  --ds-gantt-accent: var(--color-core-accent-violet);
+}
+
+.ds-gantt__bar--cobalt,
+.ds-gantt__milestone--cobalt {
+  --ds-gantt-accent: var(--color-core-accent-cobalt);
+}
+
+.ds-gantt__bar--amber,
+.ds-gantt__milestone--amber {
+  --ds-gantt-accent: var(--color-core-accent-amber);
+}
+
+.ds-gantt__bar--gold,
+.ds-gantt__milestone--gold {
+  --ds-gantt-accent: var(--color-core-accent-gold);
+}
+
+.ds-gantt__bar--mint,
+.ds-gantt__milestone--mint {
+  --ds-gantt-accent: var(--color-core-accent-mint);
+}
+
+/* ============================================
+   MILESTONES
+   ============================================ */
+
+/* The accent modifiers above set --ds-gantt-accent; the fallback keeps an
+   unaccented diamond on the neutral role without out-ranking them. */
+.ds-gantt__milestone {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  transform: translate(-50%, -50%) rotate(45deg);
+  border-radius: var(--radius-050);
+  background-color: var(--ds-gantt-accent, var(--color-status-neutral-border));
+  z-index: 1;
+}
+
+/* ============================================
+   ACCESSIBILITY
+   ============================================ */
+
+/* Visually hidden text carrying each row's full reading for screen readers. */
+.ds-gantt__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+
+@media (max-width: 768px) {
+  .ds-gantt {
+    --ds-gantt-label-width: 120px;
+  }
+}

package/components/GanttChart/GanttChart.d.ts

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+/** Accent roles a Gantt bar or milestone can take — the core accent vocabulary shared with EventCalendar. */
+export type GanttChartColor = 'neutral' | 'coral' | 'violet' | 'cobalt' | 'amber' | 'gold' | 'mint';
+/** One task bar on the timeline. */
+export interface GanttChartItem {
+    /** Unique item identifier. Selection and the click callback key on it. */
+    id: string;
+    /** Task name, shown in the sticky label column. */
+    label: string;
+    /** First day of the bar (YYYY-MM-DD). */
+    start: string;
+    /** Last day of the bar, inclusive (YYYY-MM-DD). */
+    end: string;
+    /** Accent for the bar, from the core accent roles. Defaults to `neutral`. */
+    color?: GanttChartColor;
+    /** Completion from 0 to 100. When set, the bar shows a quiet track with the accent filling this share; without it the whole bar takes the accent. */
+    progress?: number;
+    /** Draws the bar as a dashed outline, for planned or tentative work whose dates are targets rather than commitments. */
+    projected?: boolean;
+    /** Group heading this item sits under. Items sharing a group render under one heading row; omit for a flat chart. */
+    group?: string;
+    /** Extra line appended to the bar's tooltip and accessible text, e.g. "Target: Q4 2026". */
+    detail?: string;
+}
+/** A point-in-time marker on the timeline, drawn as a diamond on its own row. */
+export interface GanttChartMilestone {
+    /** Unique milestone identifier. */
+    id: string;
+    /** Milestone name, shown in the sticky label column. */
+    label: string;
+    /** The day the diamond sits on (YYYY-MM-DD). */
+    date: string;
+    /** Accent for the diamond, from the core accent roles. Defaults to `neutral`. */
+    color?: GanttChartColor;
+    /** Group heading this milestone sits under, matching the items' group labels. */
+    group?: string;
+}
+/** Props owned by GanttChart itself — everything else falls through to the root div. */
+type GanttChartOwnProps = {
+    /** Task bars, in display order. */
+    items: GanttChartItem[];
+    /** Point-in-time markers, each rendered as its own diamond row at the end of its group. */
+    milestones?: GanttChartMilestone[];
+    /** Explicit timeline window (YYYY-MM-DD both ends). Without it the range fits the data, snapped outward to whole months. */
+    range?: {
+        start: string;
+        end: string;
+    };
+    /** Draws the vertical today rule when today falls inside the range. */
+    showToday?: boolean;
+    /** Pins the today rule to a given day (YYYY-MM-DD) instead of the render-time clock, so a statically built page and its hydrating client can never disagree about where the rule sits. */
+    today?: string;
+    /** Draws the faint vertical gridline at each month boundary behind the bars. */
+    showGrid?: boolean;
+    /** Id of the highlighted item. Selection is controlled; pair it with `onItemClick`. */
+    selectedId?: string;
+    /** Called with the item when a bar is clicked. Bars render as buttons only when this is set; without it the chart is inert and renders from a Server Component. */
+    onItemClick?: (item: GanttChartItem) => void;
+    /** Chart title, in the shared chart header. */
+    title?: string;
+    /** Description text below the title. */
+    subtitle?: string;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface GanttChartProps extends GanttChartOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof GanttChartOwnProps | 'children'> {
+}
+/**
+ * GanttChart — phases and tasks as bars on a shared timeline, with milestone
+ * diamonds, optional per-bar progress, month gridlines, and a today rule.
+ * Read-only by design: it draws a schedule, it does not edit one. Pure
+ * computed markup with no charting library and no hooks, so it renders from
+ * a Server Component; pass `onItemClick` (from a client boundary) and the
+ * bars become buttons with `selectedId` as the controlled highlight. It wears
+ * the chart family's card chrome (title, subtitle, padding) and takes `bare`
+ * to drop it inside a panel that supplies the surface. The label column stays
+ * sticky while the timeline scrolls horizontally on narrow screens.
+ */
+export declare const GanttChart: React.ForwardRefExoticComponent<GanttChartProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/GanttChart/GanttChart.js

@@ -0,0 +1,202 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "../Chart/Chart.css";
+import "./GanttChart.css";
+const MS_PER_DAY = 24 * 60 * 60 * 1e3;
+const parseDay = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00`);
+const isValidDay = (date) => !Number.isNaN(date.getTime());
+const daysBetween = (from, to) => Math.round((to.getTime() - from.getTime()) / MS_PER_DAY);
+const formatDay = (date) => date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+const buildBlocks = (items, milestones) => {
+  const blocks = [];
+  const byGroup = /* @__PURE__ */ new Map();
+  const blockFor = (group) => {
+    let block = byGroup.get(group);
+    if (!block) {
+      block = { group, items: [], milestones: [] };
+      byGroup.set(group, block);
+      blocks.push(block);
+    }
+    return block;
+  };
+  items.forEach((item) => blockFor(item.group).items.push(item));
+  milestones.forEach((milestone) => blockFor(milestone.group).milestones.push(milestone));
+  return blocks;
+};
+const GanttChart = React.forwardRef(
+  ({
+    items,
+    milestones = [],
+    range,
+    showToday = true,
+    today,
+    showGrid = true,
+    selectedId,
+    onItemClick,
+    title,
+    subtitle,
+    bare = false,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-gantt";
+    const chartClass = "ds-chart";
+    const classes = [chartClass, bare && `${chartClass}--bare`, baseClass, className].filter(Boolean).join(" ");
+    const dates = range ? [parseDay(range.start), parseDay(range.end)] : [
+      ...items.flatMap((item) => [parseDay(item.start), parseDay(item.end)]),
+      ...milestones.map((milestone) => parseDay(milestone.date))
+    ];
+    const validDates = dates.filter(isValidDay);
+    let rangeStart = null;
+    let totalDays = 0;
+    if (validDates.length > 0) {
+      const min = new Date(Math.min(...validDates.map((d) => d.getTime())));
+      const max = new Date(Math.max(...validDates.map((d) => d.getTime())));
+      if (max.getTime() >= min.getTime()) {
+        rangeStart = new Date(min.getFullYear(), min.getMonth(), 1);
+        const rangeEnd = new Date(max.getFullYear(), max.getMonth() + 1, 1);
+        totalDays = daysBetween(rangeStart, rangeEnd);
+      }
+    }
+    const drawable = rangeStart !== null && totalDays > 0;
+    const percentOf = (date) => rangeStart ? daysBetween(rangeStart, date) / totalDays * 100 : 0;
+    const clampPercent = (value) => Math.min(Math.max(value, 0), 100);
+    const months = [];
+    if (drawable && rangeStart) {
+      const cursor = new Date(rangeStart.getTime());
+      const end = new Date(rangeStart.getTime());
+      end.setDate(end.getDate() + totalDays);
+      while (cursor.getTime() < end.getTime()) {
+        const monthName = cursor.toLocaleDateString("en-US", { month: "short" });
+        const label = cursor.getMonth() === 0 || months.length === 0 ? `${monthName} ${cursor.getFullYear()}` : monthName;
+        months.push({ label, left: percentOf(cursor) });
+        cursor.setMonth(cursor.getMonth() + 1);
+      }
+    }
+    const now = today ? parseDay(today) : /* @__PURE__ */ new Date();
+    const todayStart = isValidDay(now) ? new Date(now.getFullYear(), now.getMonth(), now.getDate()) : null;
+    const todayPercent = drawable && todayStart ? percentOf(todayStart) : -1;
+    const todayVisible = showToday && drawable && todayPercent >= 0 && todayPercent <= 100;
+    const blocks = buildBlocks(items, milestones);
+    const itemText = (item) => {
+      const startDate = parseDay(item.start);
+      const endDate = parseDay(item.end);
+      const span = isValidDay(startDate) && isValidDay(endDate) ? `${formatDay(startDate)} to ${formatDay(endDate)}` : "";
+      const parts = [item.label, span];
+      if (typeof item.progress === "number") parts.push(`${Math.round(item.progress)}% complete`);
+      if (item.projected) parts.push("projected");
+      if (item.detail) parts.push(item.detail);
+      return parts.filter(Boolean).join(", ");
+    };
+    const milestoneText = (milestone) => {
+      const date = parseDay(milestone.date);
+      return isValidDay(date) ? `${milestone.label}, ${formatDay(date)}` : milestone.label;
+    };
+    const renderBar = (item) => {
+      const startDate = parseDay(item.start);
+      const endDate = parseDay(item.end);
+      if (!isValidDay(startDate) || !isValidDay(endDate) || endDate.getTime() < startDate.getTime()) {
+        return null;
+      }
+      const left = clampPercent(percentOf(startDate));
+      const right = clampPercent(
+        (daysBetween(rangeStart, endDate) + 1) / totalDays * 100
+      );
+      const width = Math.max(right - left, 0);
+      if (width === 0) return null;
+      const progress = typeof item.progress === "number" ? Math.min(Math.max(item.progress, 0), 100) : void 0;
+      const barClasses = [
+        `${baseClass}__bar`,
+        `${baseClass}__bar--${item.color ?? "neutral"}`,
+        progress !== void 0 && `${baseClass}__bar--tracked`,
+        item.projected && `${baseClass}__bar--projected`,
+        selectedId === item.id && `${baseClass}__bar--selected`
+      ].filter(Boolean).join(" ");
+      const barStyle = { left: `${left}%`, width: `${width}%` };
+      const text = itemText(item);
+      const fill = progress !== void 0 ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__bar-fill`, style: { width: `${progress}%` } }) : null;
+      if (onItemClick) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: barClasses,
+            style: barStyle,
+            title: text,
+            "aria-label": text,
+            "aria-pressed": selectedId === item.id,
+            onClick: () => onItemClick(item),
+            children: fill
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxs("div", { className: barClasses, style: barStyle, title: text, children: [
+        fill,
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: text })
+      ] });
+    };
+    const renderMilestone = (milestone) => {
+      const date = parseDay(milestone.date);
+      if (!isValidDay(date)) return null;
+      const left = percentOf(date) + 100 / totalDays / 2;
+      if (left < 0 || left > 100) return null;
+      const text = milestoneText(milestone);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__milestone ${baseClass}__milestone--${milestone.color ?? "neutral"}`,
+          style: { left: `${left}%` },
+          title: text,
+          children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: text })
+        }
+      );
+    };
+    const overlay = /* @__PURE__ */ jsxs("div", { className: `${baseClass}__overlay`, "aria-hidden": "true", children: [
+      showGrid && months.slice(1).map((month) => /* @__PURE__ */ jsx("span", { className: `${baseClass}__gridline`, style: { left: `${month.left}%` } }, month.label + month.left)),
+      todayVisible && /* @__PURE__ */ jsx("span", { className: `${baseClass}__today`, style: { left: `${todayPercent}%` }, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__today-label`, children: "Today" }) })
+    ] });
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      (title || subtitle) && /* @__PURE__ */ jsx("div", { className: `${chartClass}__header`, children: /* @__PURE__ */ jsxs("div", { className: `${chartClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${chartClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${chartClass}__subtitle`, children: subtitle })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: `${chartClass}__body ${baseClass}__body`, children: drawable && /* @__PURE__ */ jsx("div", { className: `${baseClass}__scroll`, children: /* @__PURE__ */ jsxs("div", { className: `${baseClass}__canvas`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__axis`, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__corner` }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__months`, children: months.map((month) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__month-label`,
+              style: { left: `${month.left}%` },
+              children: month.label
+            },
+            month.label + month.left
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__rows`, children: [
+          overlay,
+          blocks.map((block, blockIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            block.group && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__group-row`, children: [
+              /* @__PURE__ */ jsx("div", { className: `${baseClass}__group-label`, children: block.group }),
+              /* @__PURE__ */ jsx("div", { className: `${baseClass}__track` })
+            ] }),
+            /* @__PURE__ */ jsxs("ul", { className: `${baseClass}__list`, "aria-label": block.group, children: [
+              block.items.map((item) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__row`, children: [
+                /* @__PURE__ */ jsx("div", { className: `${baseClass}__label`, children: item.label }),
+                /* @__PURE__ */ jsx("div", { className: `${baseClass}__track`, children: renderBar(item) })
+              ] }, item.id)),
+              block.milestones.map((milestone) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__row`, children: [
+                /* @__PURE__ */ jsx("div", { className: `${baseClass}__label ${baseClass}__label--milestone`, children: milestone.label }),
+                /* @__PURE__ */ jsx("div", { className: `${baseClass}__track`, children: renderMilestone(milestone) })
+              ] }, milestone.id))
+            ] })
+          ] }, block.group ?? `block-${blockIndex}`))
+        ] })
+      ] }) }) })
+    ] });
+  }
+);
+GanttChart.displayName = "GanttChart";
+export {
+  GanttChart
+};