@hgdc/ui 0.2.1 → 0.3.0

package/dist/uptime-bar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SERVICE_STATUS_LABEL } from "./status.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { cn } from "./cn.js";
+const BAR = {
+    operational: "bg-status-operational",
+    degraded: "bg-status-degraded",
+    outage: "bg-status-outage",
+    maintenance: "bg-status-maintenance",
+    unknown: "bg-foreground/10",
+};
+const day = new Intl.DateTimeFormat("fr-CH", { weekday: "short", day: "numeric", month: "short" });
+function describe(entry) {
+    return [day.format(entry.date), SERVICE_STATUS_LABEL[entry.status], entry.uptime, entry.note]
+        .filter(Boolean)
+        .join(" · ");
+}
+/**
+ * Une barre par jour, du plus ancien au plus récent, comme les pages de statut de référence.
+ * Chaque barre a sa couleur et, au survol, une infobulle en texte (jour, statut, disponibilité,
+ * note). Les lecteurs d'écran lisent la liste des jours, dont chacun dit son statut en mots.
+ */
+export function UptimeBar({ days, label = "Disponibilité", summary, className, }) {
+    return (_jsxs("div", { "data-slot": "uptime-bar", className: cn("grid gap-2", className), children: [_jsx("ol", { "aria-label": label, className: "flex h-8 items-stretch gap-[2px]", children: days.map((entry) => (_jsx("li", { className: "flex min-w-0 flex-1", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", {}), className: cn("block w-full rounded-[3px] transition-opacity duration-(--duration-fast) ease-out hover:opacity-70 data-popup-open:opacity-70", BAR[entry.status]), children: _jsx("span", { className: "sr-only", children: describe(entry) }) }), _jsx(TooltipContent, { children: describe(entry) })] }) }, new Date(entry.date).toISOString()))) }), _jsxs("div", { "aria-hidden": true, className: "flex items-center justify-between gap-2 text-xs text-muted-foreground tabular-nums", children: [_jsx("span", { children: days.length > 0 ? `il y a ${days.length} jours` : null }), summary ? _jsx("span", { className: "text-foreground", children: summary }) : null, _jsx("span", { children: "Aujourd'hui" })] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "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

@@ -18,6 +18,9 @@
 @source "./dist";
 
 @custom-variant dark (&:is(.dark *));
+/* Barre latérale réduite en rail : `data-sidebar="rail"` sur <html>, posé avant la première
+   peinture par `sidebarInitScript` (`@hgdc/ui/app-shell`). */
+@custom-variant rail (&:where([data-sidebar="rail"] *));
 
 /* Courbes et durées. Pas d'ease-in : il démarre lentement à l'instant où l'œil regarde. */
 @theme {
@@ -70,6 +73,21 @@
   --color-info: var(--info);
   --color-info-ink: var(--info-ink);
   --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-status-operational: var(--status-operational);
+  --color-status-operational-ink: var(--status-operational-ink);
+  --color-status-degraded: var(--status-degraded);
+  --color-status-degraded-ink: var(--status-degraded-ink);
+  --color-status-outage: var(--status-outage);
+  --color-status-outage-ink: var(--status-outage-ink);
+  --color-status-maintenance: var(--status-maintenance);
+  --color-status-maintenance-ink: var(--status-maintenance-ink);
+  --color-status-unknown: var(--status-unknown);
+  --color-status-unknown-ink: var(--status-unknown-ink);
   --color-inverse: var(--inverse);
   --color-inverse-foreground: var(--inverse-foreground);
   --color-inverse-muted: var(--inverse-muted);
@@ -117,7 +135,27 @@
   --shell-muted-foreground: oklch(0.45 0 0);
   --shell-hover: oklch(0 0 0 / 5%);
   --shell-active: oklch(0 0 0 / 8%);
-  --chart-1: oklch(0.62 0.19 256);
+  /* Séries de graphique, dans cet ordre, jamais recyclées : une 7e série se replie en « Autres ».
+     Validées (daltonisme, écart entre voisines) sur `surface` en clair et sur `card` en sombre.
+     En clair, 2 à 5 passent sous 3:1 : un graphique les accompagne d'une légende et de libellés. */
+  --chart-1: oklch(0.575 0.163 255.5);
+  --chart-2: oklch(0.671 0.175 40.6);
+  --chart-3: oklch(0.669 0.141 162.1);
+  --chart-4: oklch(0.764 0.161 75.1);
+  --chart-5: oklch(0.716 0.141 357.4);
+  --chart-6: oklch(0.527 0.197 283.4);
+  /* Disponibilité d'un service : toujours avec un libellé (`StatusBadge`), jamais la couleur seule.
+     Chaque jeton suit une couleur de la DA, donc les deux thèmes. */
+  --status-operational: var(--status-active);
+  --status-operational-ink: var(--status-active-ink);
+  --status-degraded: var(--status-paused);
+  --status-degraded-ink: var(--status-paused-ink);
+  --status-outage: var(--destructive);
+  --status-outage-ink: var(--destructive);
+  --status-maintenance: var(--info);
+  --status-maintenance-ink: var(--info-ink);
+  --status-unknown: var(--muted-foreground);
+  --status-unknown-ink: var(--muted-foreground);
   --status-active: oklch(0.55 0.15 156);
   --status-paused: oklch(0.62 0.14 75);
   --status-done: oklch(0.52 0.2 293);
@@ -160,7 +198,12 @@
   --shell-muted-foreground: oklch(0.708 0 0);
   --shell-hover: oklch(1 0 0 / 6%);
   --shell-active: oklch(1 0 0 / 12%);
-  --chart-1: oklch(0.68 0.16 256);
+  --chart-1: oklch(0.622 0.161 255.1);
+  --chart-2: oklch(0.622 0.173 40.1);
+  --chart-3: oklch(0.621 0.128 163.1);
+  --chart-4: oklch(0.67 0.143 73.2);
+  --chart-5: oklch(0.622 0.171 0.8);
+  --chart-6: oklch(0.67 0.145 286.8);
   --status-active: oklch(0.74 0.14 156);
   --status-paused: oklch(0.82 0.15 86);
   --status-done: oklch(0.68 0.17 293);