@multiplatform.one/components 6.7.0 → 7.0.0

package/src/views/Gantt.stories.tsx

@@ -14,11 +14,11 @@ const [, blue] = resolveChartPalette({ scheme: "light" }).categorical;
 const day = (offset: number) => addDays(startOfDay(new Date()), offset);
 
 const tasks: GanttTask[] = [
-  { id: "1", title: "Discovery & scoping", start: day(-9), end: day(-5) },
-  { id: "2", title: "Design review", start: day(-4), end: day(-1), intent: "warning" },
-  { id: "3", title: "Implementation", start: day(-2), end: day(6), intent: "accent" },
-  { id: "4", title: "QA pass", start: day(4), end: day(9), color: blue },
-  { id: "5", title: "Docs & handoff", start: day(7), end: day(11), intent: "success" },
+  { id: "1", title: "Discovery & scoping", start: day(-9), end: day(-5), progress: 100 },
+  { id: "2", title: "Design review", start: day(-4), end: day(-1), intent: "warning", progress: 100 },
+  { id: "3", title: "Implementation", start: day(-2), end: day(6), intent: "accent", progress: 55 },
+  { id: "4", title: "QA pass", start: day(4), end: day(9), color: blue, progress: 20 },
+  { id: "5", title: "Docs & handoff", start: day(7), end: day(11), intent: "success", progress: 0 },
   { id: "6", title: "Launch", start: day(12), end: day(12), intent: "error" },
 ];
 
@@ -162,6 +162,7 @@ const manyTasks: GanttTask[] = Array.from({ length: 16 }, (_, i) => ({
   start: day(i - 8),
   end: day(i - 8 + 2 + (i % 4)),
   intent: (["accent", "success", "warning", "error"] as const)[i % 4],
+  progress: (i * 17) % 100,
 }));
 
 export const StickyHeader = {

package/src/views/Gantt.tsx

@@ -4,17 +4,31 @@ import { Skeleton } from "../Skeleton";
 import { ViewSwitcher } from "../layouts/ViewSwitcher";
 import { useDirection } from "../hooks/useDirection";
 import { withInterp } from "../shared/t";
-import { Intent, hairline, hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  Intent,
+  MIN_PRESS_TARGET,
+  ensureKeyboardModalityTracking,
+  formatDayOfMonth,
+  formatMonthYear,
+  hairline,
+  hairlineWidth,
+  keyboardFocusRingProps,
+  useReadableTextOn,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import { Button } from "@multiplatform.one/forms";
 import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { ScrollView as RNScrollView } from "react-native";
 import { ScrollView, Text, XStack, YStack, isWeb, type YStackProps } from "tamagui";
 import {
+  addDays,
   barGeometry,
   clampResizeDayDelta,
   computeGanttRange,
   dateToX,
+  dayDiff,
   dxToDayDelta,
   formatRangeLabel,
   formatSpanLabel,
@@ -24,7 +38,9 @@ import {
   resizeSpanByDays,
   shiftSpanByDays,
   spanInclusiveDays,
+  startOfDay,
   todayLineX,
+  type GanttRange,
   type GanttResizeEdge,
   type GanttSpan,
   type GanttZoom,
@@ -54,6 +70,11 @@ export interface GanttTask {
   color?: string;
   /** Semantic bar intent rendered via the theme ramps (LC-05 / LC-27). */
   intent?: "accent" | "error" | "warning" | "success";
+  /**
+   * Optional completion 0–100. Paints a darker overlay on the bar (Frappe
+   * Gantt / MS Project progress). Omitted or 0 shows an empty bar.
+   */
+  progress?: number;
   /** Any additional data */
   [key: string]: unknown;
 }
@@ -143,6 +164,57 @@ const hairlineEnd = isWeb
     }
   : { borderEndWidth: hairlineWidth };
 
+function isWeekend(date: Date): boolean {
+  const day = date.getDay();
+  return day === 0 || day === 6;
+}
+
+function clampProgress(value: unknown): number | null {
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  return Math.min(100, Math.max(0, value));
+}
+
+/** Month bands for the dual-level axis (Frappe Gantt upper header). */
+function monthBands(
+  range: GanttRange,
+  pxPerDay: number,
+): { x: number; width: number; label: string; key: string }[] {
+  const total = rangeDays(range);
+  const bands: { x: number; width: number; label: string; key: string }[] = [];
+  let i = 0;
+  while (i < total) {
+    const date = addDays(startOfDay(range.start), i);
+    const nextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+    const endIdx = Math.min(total, Math.max(i + 1, dayDiff(range.start, nextMonth)));
+    bands.push({
+      x: i * pxPerDay,
+      width: (endIdx - i) * pxPerDay,
+      label: formatMonthYear(date),
+      key: `${date.getFullYear()}-${date.getMonth()}`,
+    });
+    i = endIdx;
+  }
+  return bands;
+}
+
+function weekendColumns(
+  range: GanttRange,
+  pxPerDay: number,
+): { x: number; width: number; key: string }[] {
+  const total = rangeDays(range);
+  const cols: { x: number; width: number; key: string }[] = [];
+  for (let i = 0; i < total; i++) {
+    const date = addDays(startOfDay(range.start), i);
+    if (!isWeekend(date)) continue;
+    cols.push({
+      x: i * pxPerDay,
+      width: pxPerDay,
+      key: date.toISOString(),
+    });
+  }
+  return cols;
+}
+
 // ── Loading skeleton (LC-20: mirrors the real anatomy) ────────
 
 /** Deterministic per-index bar offsets/widths (LC-20: never Math.random). */
@@ -174,7 +246,7 @@ function GanttSkeleton({ labelWidth, rowHeight }: { labelWidth: number; rowHeigh
           key={i}
           height={rowHeight}
           alignItems="center"
-          {...hairline.bottom}
+          {...(i < SKELETON_BARS.length - 1 ? hairline.bottom : null)}
           borderColor={componentColors.divider}
         >
           <XStack width={labelWidth} paddingHorizontal="$3">
@@ -208,6 +280,43 @@ function BarIntentWrap({
   return <Intent name={intent}>{children}</Intent>;
 }
 
+/** Title ink on a filled bar — paper or ink, whichever clears AA on the fill. */
+function GanttBarLabel({ title, fill }: { title: string; fill: string }) {
+  const ink = useReadableTextOn(fill);
+  return (
+    <Text
+      color={ink ?? "$color1"}
+      fontSize="$1"
+      fontWeight="600"
+      numberOfLines={1}
+      paddingHorizontal="$2"
+      pointerEvents="none"
+      zIndex={1}
+      aria-hidden
+    >
+      {`${title}\u200b`}
+    </Text>
+  );
+}
+
+/** Row-identity label: selected fill gets readable on-accent ink (LC-71). */
+function GanttTaskName({
+  title,
+  selected,
+  body,
+}: {
+  title: string;
+  selected: boolean;
+  body: object;
+}) {
+  const ink = useReadableTextOn(selected ? "$accentBackground" : undefined);
+  return (
+    <Text {...body} fontSize="$2" numberOfLines={1} color={selected && ink ? ink : "$color"}>
+      {title}
+    </Text>
+  );
+}
+
 // ── GanttView ─────────────────────────────────────────────────
 
 /**
@@ -268,6 +377,7 @@ export function GanttView({
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const [zoom, setZoom] = useState<GanttZoom>(initialZoom);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
 
   // ── Direction (RTL mirrors the canvas; deltas invert) ────────────────────
   const rtl = useDirection() === "rtl";
@@ -280,12 +390,17 @@ export function GanttView({
 
   // Keyboard-reschedule announcements (Kanban/TreeView announcer pattern).
   const [announcement, setAnnouncement] = useState("");
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const [focusedBarId, setFocusedBarId] = useState<string | null>(null);
+  const [barKeyboardRing, setBarKeyboardRing] = useState(false);
 
   // ── Knob-derived geometry (LC-18: size/space step the density) ──────────
   const sz = knobProps.sizeToken as string;
   const height = heightProp ?? (sz === "$3" ? 400 : sz === "$5" ? 560 : 480);
-  const rowHeight = sz === "$3" ? 32 : sz === "$5" ? 48 : 40;
-  const axisHeight = sz === "$3" ? 28 : sz === "$5" ? 36 : 32;
+  // Row paint is the press target (LC-54): never below 44px, even at compact.
+  const rowHeight = Math.max(MIN_PRESS_TARGET, sz === "$3" ? 44 : sz === "$5" ? 56 : 48);
+  // Dual-level axis (month band + day numbers) — Frappe Gantt upper/lower header.
+  const axisHeight = sz === "$3" ? 40 : sz === "$5" ? 52 : 46;
   const pxPerDay =
     zoom === "day"
       ? sz === "$3"
@@ -328,6 +443,11 @@ export function GanttView({
   );
   const todayX = showToday ? todayLineX(range, pxPerDay) : null;
   const rangeLabel = useMemo(() => formatRangeLabel(range), [range]);
+  const months = useMemo(() => monthBands(range, pxPerDay), [range, pxPerDay]);
+  const weekends = useMemo(() => weekendColumns(range, pxPerDay), [range, pxPerDay]);
+  const todayColX = showToday
+    ? dateToX(startOfDay(new Date()), range.start, pxPerDay)
+    : null;
 
   const changeZoom = useCallback(
     (next: GanttZoom) => {
@@ -792,6 +912,10 @@ export function GanttView({
         : 0;
     const fill =
       task.color ?? (task.intent && task.intent !== "accent" ? "$color9" : "$accentBackground");
+    const progress = clampProgress(task.progress);
+    const showLabel = liveWidth >= 44;
+    const isBarFocused = focusedBarId === task.id;
+    const showHandles = hoveredId === task.id || sessionLive;
     // Edge handles map physical sides to logical edges (mirrored under RTL).
     const handleWidth = geom.width >= 24 ? 8 : geom.width >= 12 ? 4 : 0;
     const physicalLeftEdge: GanttResizeEdge = rtl ? "end" : "start";
@@ -830,6 +954,7 @@ export function GanttView({
           hoverStyle={{ opacity: sessionLive ? 0.85 : 0.9 }}
           pressStyle={{ opacity: 0.8 }}
           cursor={webDragEnabled ? "grab" : onItemPress ? "pointer" : undefined}
+          justifyContent="center"
           // LC-25: committed/reverted geometry jumps tween on web; the live
           // drag/resize tracking stays 1:1 (no transition while the session
           // is live).
@@ -837,13 +962,24 @@ export function GanttView({
           role="button"
           tabIndex={0}
           aria-label={ganttTaskAccessibleLabel(task)}
-          outlineWidth={0}
-          focusVisibleStyle={{
-            outlineWidth: 2,
-            outlineColor: "$accentColor",
-            outlineStyle: "solid",
-            outlineOffset: 1,
+          // LC-71: one ring on the bar (the perceived control), keyboard-only.
+          {...(isBarFocused && barKeyboardRing
+            ? keyboardFocusRingProps
+            : { outlineWidth: 0 })}
+          onFocus={() => {
+            setFocusedBarId(task.id);
+            setBarKeyboardRing(wasKeyboardFocus());
+          }}
+          onBlur={() => {
+            setFocusedBarId((id) => (id === task.id ? null : id));
+            setBarKeyboardRing(false);
           }}
+          // Tamagui forwards onHoverIn/onHoverOut at runtime; the RN-flavored
+          // View prop type omits them (house Record cast).
+          {...({
+            onHoverIn: () => setHoveredId(task.id),
+            onHoverOut: () => setHoveredId((id) => (id === task.id ? null : id)),
+          } as Record<string, unknown>)}
           onKeyDown={
             ((ke: any) => {
               if (ke.key === "Enter" || ke.key === " ") {
@@ -872,6 +1008,21 @@ export function GanttView({
                 }
           }
         >
+          {progress != null && progress > 0 && (
+            <YStack
+              position="absolute"
+              top={0}
+              bottom={0}
+              {...(rtl ? { right: 0 } : { left: 0 })}
+              width={`${progress}%`}
+              backgroundColor="$color12"
+              opacity={0.22}
+              pointerEvents="none"
+              {...{ "data-gantt-progress": String(progress) }}
+            />
+          )}
+          {showLabel && <GanttBarLabel title={task.title} fill={fill} />}
+
           {/* Live date label while dragging (honest preview of the commit). */}
           {previewSpan && (
             <XStack
@@ -903,6 +1054,8 @@ export function GanttView({
                 bottom={0}
                 width={handleWidth}
                 cursor="ew-resize"
+                backgroundColor={showHandles ? "$color12" : "transparent"}
+                opacity={showHandles ? 0.28 : 0}
                 onPointerDown={(e: any) => handleResizePointerDown(task, physicalLeftEdge, e)}
                 {...{ "data-gantt-resize-handle": physicalLeftEdge }}
               />
@@ -913,6 +1066,8 @@ export function GanttView({
                 bottom={0}
                 width={handleWidth}
                 cursor="ew-resize"
+                backgroundColor={showHandles ? "$color12" : "transparent"}
+                opacity={showHandles ? 0.28 : 0}
                 onPointerDown={(e: any) => handleResizePointerDown(task, physicalRightEdge, e)}
                 {...{ "data-gantt-resize-handle": physicalRightEdge }}
               />
@@ -967,6 +1122,8 @@ export function GanttView({
         // Panel-tier lift follows the elevation knob (LC-18: the gantt frame
         // is a themed surface, same as Calendar / Kanban columns).
         elevation={knobProps.elevation}
+        // LC-72 CONTAINER-CLIP: the frame rounds and clips; rows stay square.
+        {...knobProps.containerRadius}
         {...{ "data-gantt-view": zoom }}
       >
         {/* Header */}
@@ -1025,9 +1182,7 @@ export function GanttView({
             {...{ backgroundColor: componentColors.surface.background }}
           >
             <Text
-              {...knobProps.body}
-              fontSize="$2"
-              fontWeight="500"
+              {...knobProps.label}
               color={componentColors.text.muted}
               numberOfLines={1}
             >
@@ -1051,21 +1206,72 @@ export function GanttView({
                 "data-gantt-axis": zoom,
               }}
             >
-              {ticks
-                .filter((tick) => tick.label)
-                .map((tick) => (
+              {weekends.map((col) => (
+                <YStack
+                  key={`axis-we-${col.key}`}
+                  position="absolute"
+                  {...canvasPos(col.x)}
+                  top={0}
+                  bottom={0}
+                  width={col.width}
+                  backgroundColor={componentColors.interactive.background}
+                  opacity={0.7}
+                  pointerEvents="none"
+                />
+              ))}
+              {todayColX !== null && (
+                <YStack
+                  position="absolute"
+                  {...canvasPos(todayColX)}
+                  top={0}
+                  bottom={0}
+                  width={pxPerDay}
+                  backgroundColor="$accentBackground"
+                  opacity={0.16}
+                  pointerEvents="none"
+                />
+              )}
+              {months.map((band) =>
+                band.width < 36 ? null : (
                   <Text
-                    key={tick.date.toISOString()}
+                    key={band.key}
                     position="absolute"
-                    {...(rtl ? { right: tick.x + 4 } : { left: tick.x + 4 })}
-                    top={axisHeight / 2 - 8}
-                    fontSize="$1"
-                    color={componentColors.text.muted}
+                    {...(rtl ? { right: band.x + 4 } : { left: band.x + 4 })}
+                    top={2}
+                    width={Math.max(0, band.width - 8)}
+                    {...knobProps.label}
+                    fontWeight="600"
+                    color={componentColors.text.secondary}
                     numberOfLines={1}
                   >
-                    {tick.label}
+                    {band.label}
                   </Text>
-                ))}
+                ),
+              )}
+              {ticks.map((tick) => (
+                <Text
+                  key={tick.date.toISOString()}
+                  position="absolute"
+                  {...(rtl ? { right: tick.x + 4 } : { left: tick.x + 4 })}
+                  top={axisHeight / 2}
+                  {...knobProps.label}
+                  color={
+                    tick.major ? componentColors.text.secondary : componentColors.text.muted
+                  }
+                  numberOfLines={1}
+                >
+                  {formatDayOfMonth(tick.date)}
+                </Text>
+              ))}
+              <YStack
+                position="absolute"
+                left={0}
+                right={0}
+                top={axisHeight / 2}
+                height={hairlineWidth}
+                backgroundColor={componentColors.divider}
+                pointerEvents="none"
+              />
             </XStack>
           </ScrollView>
         </XStack>
@@ -1077,31 +1283,51 @@ export function GanttView({
           <XStack {...{ "data-gantt-scroll-body": "true" }}>
             {/* Task label column */}
             <YStack width={labelWidth} flexShrink={0} {...hairlineEnd} borderColor="$borderColor">
-              {tasks.map((task) => (
-                <XStack
-                  key={task.id}
-                  height={rowHeight}
-                  alignItems="center"
-                  paddingHorizontal="$3"
-                  {...hairline.bottom}
-                  borderColor={minorGridColor}
-                  cursor={onItemPress ? "pointer" : undefined}
-                  hoverStyle={{ backgroundColor: componentColors.surface.background }}
-                  onPress={
-                    onItemPress
-                      ? () => {
-                          if (suppressClickRef.current) return;
-                          onItemPress(task);
-                        }
-                      : undefined
-                  }
-                  {...{ "data-gantt-row-label": task.id }}
-                >
-                  <Text {...knobProps.body} fontSize="$2" numberOfLines={1} color="$color">
-                    {task.title}
-                  </Text>
-                </XStack>
-              ))}
+              {tasks.map((task, index) => {
+                const selected = focusedBarId === task.id;
+                const hovered = hoveredId === task.id;
+                const last = index === tasks.length - 1;
+                return (
+                  <XStack
+                    key={task.id}
+                    height={rowHeight}
+                    alignItems="center"
+                    paddingHorizontal="$3"
+                    {...(last ? null : hairline.bottom)}
+                    borderColor={minorGridColor}
+                    backgroundColor={
+                      selected
+                        ? "$accentBackground"
+                        : hovered
+                          ? componentColors.interactive.background
+                          : "transparent"
+                    }
+                    cursor={onItemPress ? "pointer" : undefined}
+                    // Tamagui forwards onHoverIn/onHoverOut at runtime; the
+                    // RN-flavored View prop type omits them (house Record cast).
+                    {...({
+                      onHoverIn: () => setHoveredId(task.id),
+                      onHoverOut: () => setHoveredId((id) => (id === task.id ? null : id)),
+                    } as Record<string, unknown>)}
+                    onPress={
+                      onItemPress
+                        ? () => {
+                            if (suppressClickRef.current) return;
+                            setFocusedBarId(task.id);
+                            setBarKeyboardRing(false);
+                            onItemPress(task);
+                          }
+                        : () => {
+                            setFocusedBarId(task.id);
+                            setBarKeyboardRing(false);
+                          }
+                    }
+                    {...{ "data-gantt-row-label": task.id }}
+                  >
+                    <GanttTaskName title={task.title} selected={selected} body={knobProps.body} />
+                  </XStack>
+                );
+              })}
             </YStack>
 
             {/* Timeline chart. On native the scroller is the raw RN ScrollView:
@@ -1121,6 +1347,33 @@ export function GanttView({
               <YStack width={chartWidth} position="relative" {...{ "data-gantt-chart": "true" }}>
                 {/* Rows + grid + today line */}
                 <YStack position="relative" {...{ "data-gantt-body": "true" }}>
+                  {weekends.map((col) => (
+                    <YStack
+                      key={`body-we-${col.key}`}
+                      position="absolute"
+                      {...canvasPos(col.x)}
+                      top={0}
+                      bottom={0}
+                      width={col.width}
+                      backgroundColor={componentColors.interactive.background}
+                      opacity={0.55}
+                      pointerEvents="none"
+                      {...{ "data-gantt-weekend": col.key }}
+                    />
+                  ))}
+                  {todayColX !== null && (
+                    <YStack
+                      position="absolute"
+                      {...canvasPos(todayColX)}
+                      top={0}
+                      bottom={0}
+                      width={pxPerDay}
+                      backgroundColor="$accentBackground"
+                      opacity={0.12}
+                      pointerEvents="none"
+                      {...{ "data-gantt-today-col": "true" }}
+                    />
+                  )}
                   {/* Vertical grid lines (under the rows) */}
                   {ticks.map((tick) => (
                     <YStack
@@ -1136,18 +1389,34 @@ export function GanttView({
                   ))}
 
                   {/* Task rows */}
-                  {tasks.map((task) => (
-                    <XStack
-                      key={task.id}
-                      height={rowHeight}
-                      position="relative"
-                      {...hairline.bottom}
-                      borderColor={minorGridColor}
-                      {...{ "data-gantt-row": task.id }}
-                    >
-                      {renderBar(task)}
-                    </XStack>
-                  ))}
+                  {tasks.map((task, index) => {
+                    const selected = focusedBarId === task.id;
+                    const hovered = hoveredId === task.id;
+                    const last = index === tasks.length - 1;
+                    return (
+                      <XStack
+                        key={task.id}
+                        height={rowHeight}
+                        position="relative"
+                        {...(last ? null : hairline.bottom)}
+                        borderColor={minorGridColor}
+                        backgroundColor={
+                          selected || hovered
+                            ? componentColors.interactive.background
+                            : "transparent"
+                        }
+                        // Tamagui forwards onHoverIn/onHoverOut at runtime; the
+                        // RN-flavored View prop type omits them (house Record cast).
+                        {...({
+                          onHoverIn: () => setHoveredId(task.id),
+                          onHoverOut: () => setHoveredId((id) => (id === task.id ? null : id)),
+                        } as Record<string, unknown>)}
+                        {...{ "data-gantt-row": task.id }}
+                      >
+                        {renderBar(task)}
+                      </XStack>
+                    );
+                  })}
 
                   {/* Today line (above bars, non-interactive) */}
                   {todayX !== null && (