@multiplatform.one/components 6.6.0 → 7.0.0

package/src/views/Calendar.tsx

@@ -18,19 +18,26 @@ import {
   type CalendarRange,
 } from "./calendarMath";
 import {
+  formatCalendarDate,
   formatDayLong,
   formatTimeOfDay,
   getMonthNames,
   getWeekdayNames,
   hairline,
   hairlineWidth,
+  keyboardFocusRingProps,
+  type KnobProps,
+  MIN_PRESS_TARGET,
   pressTargetHitSlop,
   radiusClassProps,
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
   useReadableTextOn,
   useResolvedKnobs,
+  wasKeyboardFocus,
 } from "@multiplatform.one/theme";
 import React, { useState, useMemo, useCallback, useEffect, useId, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { Button, FloatingPanel, Input, zIndex } from "@multiplatform.one/forms";
 import {
   AnimatePresence,
@@ -236,11 +243,9 @@ function getWeekDays(date: Date, firstDayOfWeek: 0 | 1): Date[] {
   return days;
 }
 
+/** Day-grid key ("2026-03-10") — the local calendar day, never a UTC one. */
 function formatDateKey(date: Date): string {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
+  return formatCalendarDate(date);
 }
 
 function addMonths(date: Date, delta: number): Date {
@@ -388,12 +393,78 @@ const LIFT_SHADOW = "0px 8px 28px rgba(0,0,0,0.18), 0px 2px 6px rgba(0,0,0,0.08)
 /** Minimum rendered height for a timed block (short events stay visible). */
 const MIN_BLOCK_PX = 18;
 /** Resize handle hit zone (Axiom 12 touch-target floor). */
-const RESIZE_ZONE_PX = 44;
-/** Month-view day-number disc diameter (pill-by-anatomy, like Badge). */
-const DAY_DISC_PX = 22;
+const RESIZE_ZONE_PX = MIN_PRESS_TARGET;
 /** Month-view chip visual floor (hit slop fills the 44px target, DG-LAY-04). */
 const MONTH_CHIP_MIN_PX = 24;
 
+type NestedControlBox = {
+  width: number;
+  height: number;
+  minWidth: number;
+  maxWidth: number;
+  minHeight: number;
+  maxHeight: number;
+};
+
+type NestedLabel = KnobProps["label"];
+
+/**
+ * Compact day-number disc (Apple / Polaris / FullCalendar): nestedControl
+ * box below the 44px floor, label type (never sizeToken-as-font), today =
+ * fill, keyboard focus = LC-71 ring on this disc only.
+ */
+function DayNumberDisc({
+  date,
+  today,
+  inMonth,
+  focused,
+  onAccent,
+  nestedPx,
+  nestedHitSlop,
+  nestedBox,
+  label,
+}: {
+  date: Date;
+  today: boolean;
+  inMonth: boolean;
+  focused: boolean;
+  onAccent?: string;
+  nestedPx: number;
+  nestedHitSlop: { top: number; bottom: number; left: number; right: number };
+  nestedBox: NestedControlBox;
+  label: NestedLabel;
+}) {
+  return (
+    <YStack
+      {...nestedBox}
+      flexShrink={0}
+      borderRadius={nestedPx / 2}
+      {...radiusClassProps("R-PILL", "Calendar today marker")}
+      alignItems="center"
+      justifyContent="center"
+      backgroundColor={today ? "$accentBackground" : "transparent"}
+      hitSlop={nestedHitSlop}
+      {...(focused && wasKeyboardFocus() ? keyboardFocusRingProps : { outlineWidth: 0 })}
+      {...(today && { "data-calendar-today": "true" })}
+      {...({
+        "data-nested-px": nestedPx,
+        "data-calendar-day-disc": "true",
+      } as any)}
+    >
+      <Text
+        {...label}
+        fontWeight={today ? "700" : label.fontWeight}
+        color={
+          today ? (onAccent ?? "$accentColor") : inMonth ? "$color" : componentColors.text.muted
+        }
+        textAlign="center"
+      >
+        {date.getDate()}
+      </Text>
+    </YStack>
+  );
+}
+
 function getHours(): number[] {
   return Array.from({ length: 24 }, (_, i) => i);
 }
@@ -693,6 +764,10 @@ export function Calendar({
 }: CalendarProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
+  // LC-73: day cells sit on a denser surface — compact nestedControl + label,
+  // never the page control height as a disc or as fontSize.
+  const { knobProps: nestedKnobs } = useResolvedKnobs({ compact: true });
+  const { px: nestedPx, hitSlop: nestedHitSlop, ...nestedBox } = nestedKnobs.nestedControl;
   // UX-P03 / Axiom 15: the today/selected disc paints `$accentBackground`, so
   // its date glyph needs a luminance-computed foreground — `$accentColor` (the
   // deep on-page accent) measured 1.76:1 on the accent fill.
@@ -718,7 +793,7 @@ export function Calendar({
   const chipGap = space === "small" ? 2 : space === "large" ? 5 : 3;
   // Hard per-row floor: a day cell must fit its day disc plus one event chip
   // (content-derived, not a raw px dial — LC-28).
-  const monthRowHardFloor = cellPad * 2 + DAY_DISC_PX + chipGap + MONTH_CHIP_MIN_PX;
+  const monthRowHardFloor = cellPad * 2 + nestedPx + chipGap + MONTH_CHIP_MIN_PX;
   // Measured month-grid viewport (ScrollView onLayout) drives the fit logic.
   const [monthBodyHeight, setMonthBodyHeight] = useState(0);
   // Positioned time-grid overlays (blocks, handles, sketches, cursor) keep a
@@ -1398,6 +1473,11 @@ export function Calendar({
   const [focusedDate, setFocusedDate] = useState<Date | null>(null);
   const [focusedSlotMin, setFocusedSlotMin] = useState(9 * 60);
   const [announcement, setAnnouncement] = useState("");
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+  const handleBodyFocus = useCallback(() => {
+    if (!wasKeyboardFocus()) return;
+    setFocusedDate((prev) => prev ?? currentDate);
+  }, [currentDate]);
 
   useEffect(() => {
     // aria-live: announce period/view changes only after user navigation.
@@ -1512,6 +1592,9 @@ export function Calendar({
         role: "button",
         tabIndex: 0,
         "aria-label": eventAccessibleLabel(event),
+        outlineWidth: 0,
+        focusStyle: { outlineWidth: 0 },
+        focusVisibleStyle: ensureFocusVisibleRing({ outlineOffset: -2 }),
         onKeyDown: (ke: any) => {
           if (ke.key === "Enter" || ke.key === " ") {
             ke.preventDefault?.();
@@ -1633,13 +1716,9 @@ export function Calendar({
         aria-label={t("Calendar")}
         tabIndex={0}
         aria-activedescendant={focusCellId}
+        onFocus={handleBodyFocus}
         onKeyDown={handleBodyKeyDown as any}
         outlineWidth={0}
-        focusVisibleStyle={{
-          outlineWidth: 2,
-          outlineColor: "$accentBackground",
-          outlineStyle: "solid",
-        }}
         {...{ "data-calendar-body": view }}
       >
         <XStack {...hairline.bottom} borderColor="$borderColor" role="row">
@@ -1652,12 +1731,7 @@ export function Calendar({
               role="columnheader"
               {...{ backgroundColor: componentColors.surface.background }}
             >
-              <Text
-                {...knobProps.body}
-                fontWeight="500"
-                fontSize="$2"
-                color={componentColors.text.muted}
-              >
+              <Text {...nestedKnobs.label} fontWeight="500" color={componentColors.text.muted}>
                 {day}
               </Text>
             </YStack>
@@ -1730,12 +1804,7 @@ export function Calendar({
                             : componentColors.surface.background
                       }
                       padding={cellPad}
-                      {...(isFocused && {
-                        outlineWidth: 2,
-                        outlineColor: "$accentBackground",
-                        outlineStyle: "solid",
-                        outlineOffset: -2,
-                      })}
+                      outlineWidth={0}
                       {...{ "data-calendar-day": dayKey }}
                       onPress={() => {
                         if (suppressClickRef.current) return;
@@ -1745,37 +1814,17 @@ export function Calendar({
                       hoverStyle={{ backgroundColor: componentColors.surface.background }}
                     >
                       <XStack justifyContent="flex-end" paddingInlineEnd="$1">
-                        {/* Today marker: accent disc (pill-by-anatomy, like Badge) —
-                            declared R-PILL so the `radius:none` sweep licenses the
-                            disc instead of inferring it from geometry (D-09 / LC-60). */}
-                        <YStack
-                          width={DAY_DISC_PX}
-                          height={DAY_DISC_PX}
-                          borderRadius={DAY_DISC_PX / 2}
-                          {...radiusClassProps("R-PILL", "Calendar today marker")}
-                          alignItems="center"
-                          justifyContent="center"
-                          backgroundColor={today ? "$accentBackground" : "transparent"}
-                          {...(today && { "data-calendar-today": "true" })}
-                        >
-                          <Text
-                            {...knobProps.body}
-                            fontSize="$2"
-                            fontWeight={today ? "700" : "400"}
-                            color={
-                              today
-                                ? (onAccent ?? "$accentColor")
-                                : isCurrentMonth
-                                  ? "$color"
-                                  : // muted, not subtle: adjacent-month days are
-                                    // clickable text — $color8 measured 1.79:1
-                                    componentColors.text.muted
-                            }
-                            textAlign="center"
-                          >
-                            {day.getDate()}
-                          </Text>
-                        </YStack>
+                        <DayNumberDisc
+                          date={day}
+                          today={today}
+                          inMonth={isCurrentMonth}
+                          focused={isFocused}
+                          onAccent={onAccent}
+                          nestedPx={nestedPx}
+                          nestedHitSlop={nestedHitSlop}
+                          nestedBox={nestedBox}
+                          label={nestedKnobs.label}
+                        />
                       </XStack>
                       <YStack gap={chipGap} marginTop={chipGap}>
                         {dayEvents
@@ -1794,6 +1843,7 @@ export function Calendar({
                                 })}
                                 cursor="pointer"
                                 paddingInlineStart="$1"
+                                hitSlop={nestedHitSlop}
                                 // Web: keep the "+N more" press from also selecting
                                 // the day cell. Native must not stop propagation —
                                 // the sheet trigger's own press lives on a parent.
@@ -2001,13 +2051,9 @@ export function Calendar({
         aria-label={t("Calendar")}
         tabIndex={0}
         aria-activedescendant={focusCellId}
+        onFocus={handleBodyFocus}
         onKeyDown={handleBodyKeyDown as any}
         outlineWidth={0}
-        focusVisibleStyle={{
-          outlineWidth: 2,
-          outlineColor: "$accentBackground",
-          outlineStyle: "solid",
-        }}
         {...{ "data-calendar-body": view }}
       >
         {/* Day headers */}
@@ -2019,31 +2065,34 @@ export function Calendar({
               flex={1}
               padding="$2"
               alignItems="center"
+              minHeight={MIN_PRESS_TARGET}
+              cursor="pointer"
               {...{ backgroundColor: componentColors.surface.background }}
-              {...(isToday(day) && { backgroundColor: componentColors.interactive.background })}
+              onPress={() => {
+                if (suppressClickRef.current) return;
+                onDateSelect?.(day);
+              }}
             >
-              <Text
-                {...knobProps.body}
-                fontWeight="500"
-                fontSize="$2"
-                color={componentColors.text.muted}
-              >
+              <Text {...nestedKnobs.label} fontWeight="500" color={componentColors.text.muted}>
                 {weekdayNames[day.getDay()]}
               </Text>
-              <Text
-                {...knobProps.body}
-                fontWeight={isToday(day) ? "700" : "400"}
-                fontSize={knobProps.sizeToken}
-                color={isToday(day) ? "$accentColor" : "$color"}
-              >
-                {day.getDate()}
-              </Text>
+              <DayNumberDisc
+                date={day}
+                today={isToday(day)}
+                inMonth
+                focused={false}
+                onAccent={onAccent}
+                nestedPx={nestedPx}
+                nestedHitSlop={nestedHitSlop}
+                nestedBox={nestedBox}
+                label={nestedKnobs.label}
+              />
             </YStack>
           ))}
         </XStack>
 
         {/* All-day / untimed strip (also the day-granularity drop row) */}
-        <XStack {...hairline.bottom} borderColor="$borderColor" minHeight={30}>
+        <XStack {...hairline.bottom} borderColor="$borderColor" minHeight={MIN_PRESS_TARGET}>
           <YStack width={56} justifyContent="center" alignItems="flex-end" paddingInlineEnd="$2">
             <Text fontSize="$1" color={componentColors.text.muted}>
               {t("All day")}
@@ -2271,7 +2320,7 @@ export function Calendar({
                   )}
 
                   {/* Keyboard slot cursor (discrete moves tween — Axiom 4) */}
-                  {focusHere && (
+                  {focusHere && wasKeyboardFocus() && (
                     <YStack
                       id={`${calendarId}-slot-cursor`}
                       {...({ role: "gridcell" } as any)}
@@ -2284,8 +2333,7 @@ export function Calendar({
                       top={minutesToY(focusedSlotMin, hourHeight)}
                       height={minutesToY(slotMinutes, hourHeight)}
                       {...knobProps.borderRadius}
-                      borderWidth={2}
-                      borderColor="$accentBackground"
+                      {...keyboardFocusRingProps}
                       pointerEvents="none"
                       zIndex={3}
                       transition={webLayoutTransition as any}

package/src/views/Dashboard.stories.tsx

@@ -1,7 +1,17 @@
 import { action } from "@multiplatform.one/storybook";
+import {
+  ChartLineUpIcon,
+  CurrencyDollarIcon,
+  FileTextIcon,
+  PercentIcon,
+  ShoppingCartIcon,
+  UsersIcon,
+} from "@phosphor-icons/react";
 import type { Meta } from "@storybook/react-native-web-vite";
 import { Dashboard, type DashboardWidget } from "./Dashboard";
 
+const iconSize = 16;
+
 // LC-36 TREND-SENTIMENT: trend color derives from trend × goodDirection —
 // each demo metric declares its polarity (undeclared would render neutral).
 const widgets: DashboardWidget[] = [
@@ -12,9 +22,13 @@ const widgets: DashboardWidget[] = [
       id: "kpi-1",
       title: "Total Revenue",
       value: "$12,450",
+      previousValue: 11116,
+      format: "currency",
       trend: "up",
       trendValue: "+12%",
       goodDirection: "up",
+      icon: <CurrencyDollarIcon size={iconSize} />,
+      sparkline: [8200, 9100, 8800, 10200, 11100, 12450],
     },
   },
   {
@@ -27,6 +41,8 @@ const widgets: DashboardWidget[] = [
       trend: "up",
       trendValue: "+5%",
       goodDirection: "up",
+      icon: <UsersIcon size={iconSize} />,
+      sparkline: [980, 1040, 1090, 1120, 1180, 1234],
     },
   },
   {
@@ -39,6 +55,41 @@ const widgets: DashboardWidget[] = [
       trend: "down",
       trendValue: "-0.5%",
       goodDirection: "up",
+      icon: <PercentIcon size={iconSize} />,
+      sparkline: [3.8, 3.6, 3.7, 3.5, 3.4, 3.2],
+    },
+  },
+  {
+    id: "kpi-4",
+    type: "progress",
+    progressConfig: {
+      id: "kpi-4",
+      title: "Quota filled",
+      value: 72,
+      max: 100,
+      format: "percent",
+    },
+  },
+  {
+    id: "shortcut-orders",
+    type: "shortcut",
+    shortcutConfig: {
+      id: "shortcut-orders",
+      title: "Sales Orders",
+      count: 18,
+      icon: <ShoppingCartIcon size={iconSize} />,
+      onClick: action("shortcut:orders"),
+    },
+  },
+  {
+    id: "shortcut-invoices",
+    type: "shortcut",
+    shortcutConfig: {
+      id: "shortcut-invoices",
+      title: "Invoices",
+      count: 7,
+      icon: <FileTextIcon size={iconSize} />,
+      onClick: action("shortcut:invoices"),
     },
   },
   {
@@ -57,6 +108,52 @@ const widgets: DashboardWidget[] = [
       ],
     },
   },
+  {
+    id: "chart-2",
+    type: "chart",
+    colSpan: 2,
+    chartConfig: {
+      id: "chart-2",
+      title: "Orders over time",
+      type: "line",
+      data: [
+        { label: "Jan", value: 42 },
+        { label: "Feb", value: 38 },
+        { label: "Mar", value: 55 },
+        { label: "Apr", value: 49 },
+      ],
+    },
+  },
+  {
+    id: "links",
+    type: "list",
+    colSpan: 2,
+    listConfig: {
+      id: "links",
+      title: "Shortcuts",
+      items: [
+        { id: "open", label: "Open quotations", meta: "12", onClick: action("list:open") },
+        { id: "overdue", label: "Overdue invoices", meta: "4", onClick: action("list:overdue") },
+        { id: "draft", label: "Draft orders", meta: "9", onClick: action("list:draft") },
+      ],
+    },
+  },
+  {
+    id: "mix",
+    type: "chart",
+    colSpan: 2,
+    chartConfig: {
+      id: "mix",
+      title: "Revenue mix",
+      type: "pie",
+      showLegend: true,
+      data: [
+        { label: "Direct", value: 5400 },
+        { label: "Partner", value: 4100 },
+        { label: "Online", value: 2950 },
+      ],
+    },
+  },
 ];
 
 const meta: Meta = {
@@ -70,7 +167,13 @@ export default meta;
 
 export const Default = {
   name: "Main",
-  render: () => <Dashboard widgets={widgets} title="Sales Dashboard" />,
+  render: () => (
+    <Dashboard
+      widgets={widgets}
+      title="Sales Dashboard"
+      description="Number cards, sparklines, gauges, and shortcuts."
+    />
+  ),
 };
 
 /** Initial load with no widgets renders the dashboard skeleton (W9 / DG-ST-02, LC-20). */
@@ -96,3 +199,31 @@ export const Error = {
     />
   ),
 };
+
+/** Isolated Grafana-stat KPI with nested-scale trend pill and sparkline. */
+export const Stat = {
+  render: () => (
+    <Dashboard
+      columns={2}
+      title="Stat"
+      widgets={[
+        {
+          id: "stat",
+          type: "kpi",
+          kpiConfig: {
+            id: "stat",
+            title: "Monthly recurring",
+            value: 84200,
+            format: "currency",
+            previousValue: 79100,
+            trend: "up",
+            trendValue: "+6.4%",
+            goodDirection: "up",
+            icon: <ChartLineUpIcon size={iconSize} />,
+            sparkline: [62, 64, 63, 70, 74, 79, 84],
+          },
+        },
+      ]}
+    />
+  ),
+};