@hgdc/ui 0.4.0 → 0.5.1

package/dist/status.d.ts

@@ -1,22 +1,45 @@
 /** Disponibilité d'un service, vocabulaire fermé de la famille (Status, Host, Mail). */
 export type ServiceStatus = "operational" | "degraded" | "outage" | "maintenance" | "unknown";
 export declare const SERVICE_STATUS_LABEL: Record<ServiceStatus, string>;
+/**
+ * Ton d'un statut quelconque (déploiement, e-mail, domaine), quand le vocabulaire des services ne
+ * convient pas : `pending` pour ce qui attend ou tourne encore (« En file », « Vérification »).
+ */
+export type StatusTone = "neutral" | "success" | "warning" | "danger" | "info" | "pending";
+/** Couleur de chaque ton, prise dans les jetons de statut : mêmes teintes que les services. */
+export declare const STATUS_TONE_COLOR: Readonly<Record<StatusTone, ServiceStatus>>;
 /**
  * Le point d'un statut, décoratif (`aria-hidden`) : il accompagne toujours un libellé.
  * `live` ajoute l'anneau qui s'élargit, pour ce qui est en cours (incident, vérification DNS).
  */
-export declare function StatusDot({ status, live, className, }: {
-    status: ServiceStatus;
+export declare function StatusDot({ status: statusProp, tone, live, className, }: {
+    /** Statut de service ; sinon `tone`. */
+    status?: ServiceStatus;
+    tone?: StatusTone;
     live?: boolean;
     className?: string;
 }): React.JSX.Element;
-/**
- * Un statut : point et libellé, jamais la couleur seule. Le libellé par défaut est celui de la
- * famille ; un produit peut le préciser (« Panne partielle ») sans changer de couleur.
- */
-export declare function StatusBadge({ status, label, live, className, }: {
+export type StatusBadgeProps = {
+    /** Disponibilité d'un service : le libellé de la famille par défaut. */
     status: ServiceStatus;
+    tone?: never;
     label?: string;
     live?: boolean;
     className?: string;
-}): React.JSX.Element;
+} | {
+    status?: never;
+    /** Statut d'autre chose (déploiement, e-mail, domaine) : le libellé est alors obligatoire. */
+    tone: StatusTone;
+    label: string;
+    /** Par défaut vrai pour `pending` : l'anneau dit que ça tourne encore. */
+    live?: boolean;
+    className?: string;
+};
+/**
+ * Un statut : point et libellé, jamais la couleur seule. Le libellé par défaut est celui de la
+ * famille ; un produit peut le préciser (« Panne partielle ») sans changer de couleur.
+ *
+ * Hors des services, `tone` et `label` : `<StatusBadge tone="success" label="Remis" />`,
+ * `<StatusBadge tone="pending" label="En construction" />`.
+ */
+export declare function StatusBadge(props: StatusBadgeProps): React.JSX.Element;

package/dist/status.js

@@ -21,17 +21,33 @@ const BADGE = {
     maintenance: "bg-status-maintenance/12 text-status-maintenance-ink",
     unknown: "bg-foreground/[0.06] text-status-unknown-ink",
 };
+/** Couleur de chaque ton, prise dans les jetons de statut : mêmes teintes que les services. */
+export const STATUS_TONE_COLOR = {
+    neutral: "unknown",
+    success: "operational",
+    warning: "degraded",
+    danger: "outage",
+    info: "maintenance",
+    pending: "degraded",
+};
 /**
  * Le point d'un statut, décoratif (`aria-hidden`) : il accompagne toujours un libellé.
  * `live` ajoute l'anneau qui s'élargit, pour ce qui est en cours (incident, vérification DNS).
  */
-export function StatusDot({ status, live = false, className, }) {
+export function StatusDot({ status: statusProp, tone, live = false, className, }) {
+    const status = statusProp ?? STATUS_TONE_COLOR[tone ?? "neutral"];
     return (_jsxs("span", { "aria-hidden": true, "data-slot": "status-dot", className: cn("relative inline-flex size-2 shrink-0", className), children: [live ? _jsx("span", { className: cn("absolute inset-0 live-ping rounded-full", DOT[status]) }) : null, _jsx("span", { className: cn("relative inline-flex size-full rounded-full", DOT[status]) })] }));
 }
 /**
  * Un statut : point et libellé, jamais la couleur seule. Le libellé par défaut est celui de la
  * famille ; un produit peut le préciser (« Panne partielle ») sans changer de couleur.
+ *
+ * Hors des services, `tone` et `label` : `<StatusBadge tone="success" label="Remis" />`,
+ * `<StatusBadge tone="pending" label="En construction" />`.
  */
-export function StatusBadge({ status, label, live = false, className, }) {
-    return (_jsxs("span", { "data-slot": "status-badge", "data-status": status, className: cn("inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", BADGE[status], className), children: [_jsx(StatusDot, { status: status, live: live, className: "size-1.5" }), label ?? SERVICE_STATUS_LABEL[status]] }));
+export function StatusBadge(props) {
+    const { label, className } = props;
+    const status = props.status !== undefined ? props.status : STATUS_TONE_COLOR[props.tone];
+    const live = props.live ?? props.tone === "pending";
+    return (_jsxs("span", { "data-slot": "status-badge", "data-status": status, ...(props.tone ? { "data-tone": props.tone } : {}), className: cn("inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", BADGE[status], className), children: [_jsx(StatusDot, { status: status, live: live, className: "size-1.5" }), label ?? SERVICE_STATUS_LABEL[status]] }));
 }

package/dist/time-chart.d.ts

@@ -23,7 +23,7 @@ export declare function niceScale(max: number, ticks?: number): {
  * Survol ou flèches du clavier : un repère vertical et une infobulle avec chaque valeur. Les
  * lecteurs d'écran ont un tableau des données. Légende dès deux séries.
  */
-export declare function TimeChart({ timestamps, series, kind, height, compact, label, formatValue, formatTime, emptyLabel, className, }: {
+export declare function TimeChart({ timestamps, series, kind, height, compact, label, formatValue, formatTime, emptyLabel, lastIncomplete, className, }: {
     timestamps: Array<number>;
     series: Array<TimeSeries>;
     kind?: "line" | "bar";
@@ -36,5 +36,11 @@ export declare function TimeChart({ timestamps, series, kind, height, compact, l
     formatValue?: (value: number) => string;
     formatTime?: (time: number) => string;
     emptyLabel?: string;
+    /**
+     * Le dernier point couvre une période pas encore finie (aujourd'hui, ce mois-ci) : sa ligne est
+     * en pointillés, sa barre pâlie, et l'infobulle le dit. Sans cela, une chute du dernier jour
+     * se lit comme une baisse alors que la journée n'est pas terminée.
+     */
+    lastIncomplete?: boolean;
     className?: string;
 }): React.JSX.Element;

package/dist/time-chart.js

@@ -35,7 +35,7 @@ export function niceScale(max, ticks = 4) {
  * Survol ou flèches du clavier : un repère vertical et une infobulle avec chaque valeur. Les
  * lecteurs d'écran ont un tableau des données. Légende dès deux séries.
  */
-export function TimeChart({ timestamps, series, kind = "line", height = 200, compact = false, label, formatValue = (v) => number.format(v), formatTime = (t) => dayMonth.format(t), emptyLabel = "Aucune donnée sur cette période.", className, }) {
+export function TimeChart({ timestamps, series, kind = "line", height = 200, compact = false, label, formatValue = (v) => number.format(v), formatTime = (t) => dayMonth.format(t), emptyLabel = "Aucune donnée sur cette période.", lastIncomplete = false, className, }) {
     const [active, setActive] = useState(null);
     const n = timestamps.length;
     const hasData = n > 0 && series.some((s) => s.values.some((v) => v !== null));
@@ -62,13 +62,15 @@ export function TimeChart({ timestamps, series, kind = "line", height = 200, com
         event.preventDefault();
         setActive((current) => Math.min(n - 1, Math.max(0, (current ?? (move > 0 ? -1 : n)) + move)));
     };
+    const incompleteIndex = lastIncomplete && n > 1 ? n - 1 : -1;
     const activeTime = active !== null ? timestamps[active] : undefined;
     const describe = (i) => {
         const t = timestamps[i];
         const values = series
             .map((s) => `${s.label} ${s.values[i] == null ? "pas de mesure" : formatValue(s.values[i] ?? 0)}`)
             .join(", ");
-        return t === undefined ? values : `${formatTime(t)} : ${values}`;
+        const time = t === undefined ? "" : `${formatTime(t)}${i === incompleteIndex ? " (en cours)" : ""} : `;
+        return `${time}${values}`;
     };
     const xLabels = compact ? [] : [0, Math.floor((n - 1) / 2), n - 1].filter((v, i, a) => a.indexOf(v) === i);
     return (_jsxs("figure", { "data-slot": "time-chart", className: cn("grid gap-3", className), children: [!compact && series.length > 1 ? (_jsx("figcaption", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground", children: series.map((s, i) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 rounded-[3px]", style: { background: color(i) } }), s.label] }, s.key))) })) : null, _jsxs("div", { className: cn("grid", !compact && "grid-cols-[auto_minmax(0,1fr)] gap-x-2"), children: [!compact ? (_jsx("div", { "aria-hidden": true, className: "relative w-10 text-right text-[11px] text-muted-foreground tabular-nums", style: { height }, children: ticks.map((t) => (_jsx("span", { className: "absolute right-0 -translate-y-1/2", style: { top: `${100 - (t / scale.max) * 100}%` }, children: formatValue(t) }, t))) })) : null, _jsxs("div", { className: "grid gap-1.5", children: [_jsxs("div", { 
@@ -83,8 +85,8 @@ export function TimeChart({ timestamps, series, kind = "line", height = 200, com
                                                         const v = s.values[i] ?? 0;
                                                         const h = (v / scale.max) * 100;
                                                         base -= h;
-                                                        return v > 0 ? (_jsx("rect", { x: i + 0.15, y: base, width: 0.7, height: h, fill: color(si), opacity: active === null || active === i ? 1 : 0.55 }, `${s.key}-${i}`)) : null;
+                                                        return v > 0 ? (_jsx("rect", { x: i + 0.15, y: base, width: 0.7, height: h, fill: color(si), opacity: (active === null || active === i ? 1 : 0.55) * (i === incompleteIndex ? 0.5 : 1) }, `${s.key}-${i}`)) : null;
                                                     });
                                                 })
-                                                : series.map((s, si) => (_jsxs("g", { children: [series.length === 1 ? (_jsx("path", { d: areaPath(s.values, scale.max), fill: color(si), opacity: 0.1 })) : null, _jsx("path", { d: linePath(s.values, scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })] }, s.key))), active !== null ? (_jsx("line", { x1: active + 0.5, x2: active + 0.5, y1: 0, y2: 100, vectorEffect: "non-scaling-stroke", className: "stroke-foreground/25", strokeWidth: 1 })) : null] }), active !== null && activeTime !== undefined ? (_jsxs("div", { "data-slot": "time-chart-tooltip", className: cn("pointer-events-none absolute top-0 z-10 grid min-w-36 gap-1 rounded-xl bg-popover px-3 py-2 text-xs shadow-lg shadow-black/10 [--popover:var(--floating)]", (active + 0.5) / n > 0.6 ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), style: { left: `${((active + 0.5) / n) * 100}%` }, children: [_jsx("p", { className: "font-medium", children: formatTime(activeTime) }), series.map((s, si) => (_jsxs("p", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { background: color(si) } }), _jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }), _jsx("span", { className: "font-medium tabular-nums", children: s.values[active] === null ? "-" : formatValue(s.values[active] ?? 0) })] }, s.key)))] })) : null] }), xLabels.length > 0 ? (_jsx("div", { "aria-hidden": true, className: "relative h-4 text-[11px] text-muted-foreground tabular-nums", children: xLabels.map((i, k) => (_jsx("span", { className: cn("absolute", k === 0 ? "left-0" : k === xLabels.length - 1 ? "right-0" : "-translate-x-1/2"), style: k === 0 || k === xLabels.length - 1 ? undefined : { left: `${((i + 0.5) / n) * 100}%` }, children: timestamps[i] !== undefined ? formatTime(timestamps[i]) : null }, i))) })) : null] })] }), _jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Date" }), series.map((s) => (_jsx("th", { scope: "col", children: s.label }, s.key)))] }) }), _jsx("tbody", { children: timestamps.map((t, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: formatTime(t) }), series.map((s) => (_jsx("td", { children: s.values[i] === null ? "-" : formatValue(s.values[i] ?? 0) }, s.key)))] }, t))) })] })] }));
+                                                : series.map((s, si) => (_jsxs("g", { children: [series.length === 1 ? (_jsx("path", { d: areaPath(s.values, scale.max), fill: color(si), opacity: 0.1 })) : null, _jsx("path", { d: linePath(incompleteIndex < 0 ? s.values : s.values.map((v, i) => (i === incompleteIndex ? null : v)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }), incompleteIndex >= 0 ? (_jsx("path", { "data-slot": "time-chart-incomplete", d: linePath(s.values.map((v, i) => (i >= incompleteIndex - 1 ? v : null)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeDasharray: "3 4", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })) : null] }, s.key))), active !== null ? (_jsx("line", { x1: active + 0.5, x2: active + 0.5, y1: 0, y2: 100, vectorEffect: "non-scaling-stroke", className: "stroke-foreground/25", strokeWidth: 1 })) : null] }), active !== null && activeTime !== undefined ? (_jsxs("div", { "data-slot": "time-chart-tooltip", className: cn("pointer-events-none absolute top-0 z-10 grid min-w-36 gap-1 rounded-xl bg-popover px-3 py-2 text-xs shadow-lg shadow-black/10 [--popover:var(--floating)]", (active + 0.5) / n > 0.6 ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), style: { left: `${((active + 0.5) / n) * 100}%` }, children: [_jsxs("p", { className: "font-medium", children: [formatTime(activeTime), active === incompleteIndex ? (_jsx("span", { className: "ml-1.5 font-normal text-muted-foreground", children: "En cours" })) : null] }), series.map((s, si) => (_jsxs("p", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { background: color(si) } }), _jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }), _jsx("span", { className: "font-medium tabular-nums", children: s.values[active] === null ? "-" : formatValue(s.values[active] ?? 0) })] }, s.key)))] })) : null] }), xLabels.length > 0 ? (_jsx("div", { "aria-hidden": true, className: "relative h-4 text-[11px] text-muted-foreground tabular-nums", children: xLabels.map((i, k) => (_jsx("span", { className: cn("absolute", k === 0 ? "left-0" : k === xLabels.length - 1 ? "right-0" : "-translate-x-1/2"), style: k === 0 || k === xLabels.length - 1 ? undefined : { left: `${((i + 0.5) / n) * 100}%` }, children: timestamps[i] !== undefined ? formatTime(timestamps[i]) : null }, i))) })) : null] })] }), _jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Date" }), series.map((s) => (_jsx("th", { scope: "col", children: s.label }, s.key)))] }) }), _jsx("tbody", { children: timestamps.map((t, i) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", children: [formatTime(t), i === incompleteIndex ? " (en cours)" : ""] }), series.map((s) => (_jsx("td", { children: s.values[i] === null ? "-" : formatValue(s.values[i] ?? 0) }, s.key)))] }, t))) })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Interface de la H family : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",

package/styles.css

@@ -394,6 +394,19 @@
   animation: live-ping 1.6s var(--ease-out) infinite;
 }
 
+/* Barre d'avancement de durée inconnue : un tiers de piste qui glisse, à vitesse constante. */
+@keyframes progress-slide {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 300% 0;
+  }
+}
+@utility progress-slide {
+  animation: progress-slide 1.4s linear infinite;
+}
+
 /* Des étapes qui montent l'une après l'autre au premier affichage. */
 @keyframes rise {
   from {
@@ -420,4 +433,10 @@
   .card-in {
     transition: none;
   }
+  /* Sans mouvement, la durée inconnue se lit sur une piste pleine et pâle. */
+  .progress-slide {
+    animation: none;
+    width: 100%;
+    opacity: 0.35;
+  }
 }