@hgdc/ui 0.14.0 → 0.14.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -19
- package/dist/app-shell.js +5 -2
- package/dist/page-pending.d.ts +27 -0
- package/dist/page-pending.js +19 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -80,25 +80,25 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
|
|
|
80
80
|
|
|
81
81
|
## Contenu et données
|
|
82
82
|
|
|
83
|
-
| Import | Exemple
|
|
84
|
-
| --------------- |
|
|
85
|
-
| `card` | `<Card><CardHeader><CardTitle>Domaines</CardTitle><CardAction>…</CardAction></CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>`
|
|
86
|
-
| `alert` | `<Alert tone="warning" title="Quota presque atteint" action={<Button size="sm">Voir</Button>}>90 % utilisés.</Alert>`
|
|
87
|
-
| `table` | `<TableHead sort="descending" onSort={…}>Date</TableHead>`, `<TableRowLink render={<Link … />}>Production</TableRowLink>`, `<TableEmpty colSpan={4}>…</TableEmpty>`, `<TableSkeleton columns={4} />`
|
|
88
|
-
| `resource-list` | `<ResourceList><ResourceItem icon={…} title="Site vitrine" meta="acme.ch" badge={…} actions={…} href="/p/site" /></ResourceList>`
|
|
89
|
-
| `stat` | `<StatGrid><StatTile label="Erreurs" value="12" delta={{ value: "8 %", direction: "up", good: "down" }} /></StatGrid>`
|
|
90
|
-
| `time-chart` | `<TimeChart label="Envois par jour" timestamps={days} series={[{ key: "sent", label: "Envoyés", values }]} kind="bar" lastIncomplete />` (dernier point en pointillés : la journée n'est pas finie)
|
|
91
|
-
| `status` | `<StatusBadge status="degraded" />` (Opérationnel, Dégradé, Panne, Maintenance, Inconnu) ; hors services, `<StatusBadge tone="success" label="Remis" />` (`neutral`, `success`, `warning`, `danger`, `info`, `pending`)
|
|
92
|
-
| `uptime-bar` | `<UptimeBar days={[{ date, status: "operational", uptime: "100 %" }]} summary="99,95 % sur 90 jours" />`
|
|
93
|
-
| `timeline` | `<Timeline entries={[{ id, title: "Résolu", time, status: "operational" }]} />`
|
|
94
|
-
| `relative-time` | `<RelativeTime date={deployment._creationTime} />` (« il y a 3 min », date exacte au survol)
|
|
95
|
-
| `copy-button` | `<Snippet value="bun add @hgdc/ui" prompt />`, `<CopyButton value={url} />`, `<CopyButton value={all} label="Tout copier" showLabel />`
|
|
96
|
-
| `progress` | `<Progress label="Envoi de la campagne" value={120} max={400} />` (`value={null}` : durée inconnue), `<Meter label="E-mails ce mois" value={8600} max={10000} />` (orange puis rouge près de la limite)
|
|
97
|
-
| `rank-bar` | `<RankBar label="Pages les plus vues" items={[{ key, label: "/tarifs", value: 640, render: <Link … /> }]} limit={5} />`
|
|
98
|
-
| `secret-reveal` | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page
|
|
99
|
-
| `family-loader` | `<FamilyLoader size="lg" label="Ouverture du projet…" />` : la silhouette grise du H, dont les pièces se remplissent de leurs dégradés en boucle (1,6 s, `transform` seul, fluide pendant un chargement). `page` le centre dans l'écran. Dans un bouton : `Spinner`
|
|
100
|
-
| `page-pending` | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, chargement après 50 ms, au moins 300 ms) ; `AppShell
|
|
101
|
-
| `skeleton` | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins
|
|
83
|
+
| Import | Exemple |
|
|
84
|
+
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
85
|
+
| `card` | `<Card><CardHeader><CardTitle>Domaines</CardTitle><CardAction>…</CardAction></CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>` |
|
|
86
|
+
| `alert` | `<Alert tone="warning" title="Quota presque atteint" action={<Button size="sm">Voir</Button>}>90 % utilisés.</Alert>` |
|
|
87
|
+
| `table` | `<TableHead sort="descending" onSort={…}>Date</TableHead>`, `<TableRowLink render={<Link … />}>Production</TableRowLink>`, `<TableEmpty colSpan={4}>…</TableEmpty>`, `<TableSkeleton columns={4} />` |
|
|
88
|
+
| `resource-list` | `<ResourceList><ResourceItem icon={…} title="Site vitrine" meta="acme.ch" badge={…} actions={…} href="/p/site" /></ResourceList>` |
|
|
89
|
+
| `stat` | `<StatGrid><StatTile label="Erreurs" value="12" delta={{ value: "8 %", direction: "up", good: "down" }} /></StatGrid>` |
|
|
90
|
+
| `time-chart` | `<TimeChart label="Envois par jour" timestamps={days} series={[{ key: "sent", label: "Envoyés", values }]} kind="bar" lastIncomplete />` (dernier point en pointillés : la journée n'est pas finie) |
|
|
91
|
+
| `status` | `<StatusBadge status="degraded" />` (Opérationnel, Dégradé, Panne, Maintenance, Inconnu) ; hors services, `<StatusBadge tone="success" label="Remis" />` (`neutral`, `success`, `warning`, `danger`, `info`, `pending`) |
|
|
92
|
+
| `uptime-bar` | `<UptimeBar days={[{ date, status: "operational", uptime: "100 %" }]} summary="99,95 % sur 90 jours" />` |
|
|
93
|
+
| `timeline` | `<Timeline entries={[{ id, title: "Résolu", time, status: "operational" }]} />` |
|
|
94
|
+
| `relative-time` | `<RelativeTime date={deployment._creationTime} />` (« il y a 3 min », date exacte au survol) |
|
|
95
|
+
| `copy-button` | `<Snippet value="bun add @hgdc/ui" prompt />`, `<CopyButton value={url} />`, `<CopyButton value={all} label="Tout copier" showLabel />` |
|
|
96
|
+
| `progress` | `<Progress label="Envoi de la campagne" value={120} max={400} />` (`value={null}` : durée inconnue), `<Meter label="E-mails ce mois" value={8600} max={10000} />` (orange puis rouge près de la limite) |
|
|
97
|
+
| `rank-bar` | `<RankBar label="Pages les plus vues" items={[{ key, label: "/tarifs", value: 640, render: <Link … /> }]} limit={5} />` |
|
|
98
|
+
| `secret-reveal` | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page |
|
|
99
|
+
| `family-loader` | `<FamilyLoader size="lg" label="Ouverture du projet…" />` : la silhouette grise du H, dont les pièces se remplissent de leurs dégradés en boucle (1,6 s, `transform` seul, fluide pendant un chargement). `page` le centre dans l'écran. Dans un bouton : `Spinner` |
|
|
100
|
+
| `page-pending` | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, chargement après 50 ms, au moins 300 ms) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : le H couvre la zone de contenu dès qu'une navigation attend, la coque reste ; `PagePending` : même H, même place, pour une page qui lit ses données |
|
|
101
|
+
| `skeleton` | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins |
|
|
102
102
|
|
|
103
103
|
## Listes, journaux et retours
|
|
104
104
|
|
package/dist/app-shell.js
CHANGED
|
@@ -139,7 +139,6 @@ export function AppShell({ product, organization, productRail = true, accountHre
|
|
|
139
139
|
// Chargement de la zone de contenu : navigation en cours (après 50 ms, au moins 300 ms), ou départ
|
|
140
140
|
// vers un autre produit (aussitôt). Une page qui affiche déjà `PagePending` montre le même H au
|
|
141
141
|
// même endroit : le calque de la coque s'efface alors derrière lui.
|
|
142
|
-
const navigatingShown = useDelayedFlag(navigating, PAGE_PENDING_MS, PAGE_PENDING_MIN_MS);
|
|
143
142
|
const [leaving, setLeaving] = useState(false);
|
|
144
143
|
const [pagePending, setPagePending] = useState(0);
|
|
145
144
|
const registerPagePending = useCallback(() => {
|
|
@@ -156,7 +155,11 @@ export function AppShell({ product, organization, productRail = true, accountHre
|
|
|
156
155
|
window.addEventListener("pageshow", onPageShow);
|
|
157
156
|
return () => window.removeEventListener("pageshow", onPageShow);
|
|
158
157
|
}, []);
|
|
159
|
-
|
|
158
|
+
// Le calque attend 50 ms et reste au moins 300 ms ; quand la page prend le relais avec
|
|
159
|
+
// `PagePending` (même H, même place, même phase), il s'efface derrière elle sans que rien ne bouge,
|
|
160
|
+
// et ne revient pas quand la page arrive.
|
|
161
|
+
const navigatingShown = useDelayedFlag(navigating && pagePending === 0, PAGE_PENDING_MS, PAGE_PENDING_MIN_MS);
|
|
162
|
+
const loading = navigatingShown || leaving;
|
|
160
163
|
const contentRef = useRef(null);
|
|
161
164
|
useEffect(() => {
|
|
162
165
|
// Sur ordinateur, la zone de contenu défile seule : le calque couvre sa partie visible, en haut.
|
package/dist/page-pending.d.ts
CHANGED
|
@@ -54,3 +54,30 @@ export declare const routerPendingDefaults: {
|
|
|
54
54
|
defaultPreload: "intent";
|
|
55
55
|
defaultPreloadStaleTime: number;
|
|
56
56
|
};
|
|
57
|
+
/** Ce que `shellNavigation` lit dans l'état de TanStack Router (`useRouterState`). */
|
|
58
|
+
export type RouterNavigationState = {
|
|
59
|
+
status: string;
|
|
60
|
+
isLoading: boolean;
|
|
61
|
+
location: {
|
|
62
|
+
pathname: string;
|
|
63
|
+
};
|
|
64
|
+
resolvedLocation?: {
|
|
65
|
+
pathname: string;
|
|
66
|
+
} | undefined;
|
|
67
|
+
};
|
|
68
|
+
/**
|
|
69
|
+
* Props de chargement d'`AppShell` tirées de l'état du routeur :
|
|
70
|
+
*
|
|
71
|
+
* ```tsx
|
|
72
|
+
* const navigation = useRouterState({ select: shellNavigation, structuralSharing: true })
|
|
73
|
+
* <AppShell {...navigation} … />
|
|
74
|
+
* ```
|
|
75
|
+
*
|
|
76
|
+
* `navigating` : une autre page est demandée et pas encore affichée (pas une simple mise à jour
|
|
77
|
+
* des paramètres de la page ouverte). `contentKey` : la page affichée, pas celle qui charge, pour
|
|
78
|
+
* que l'ancienne page ne se remonte pas avant d'être remplacée.
|
|
79
|
+
*/
|
|
80
|
+
export declare function shellNavigation(state: RouterNavigationState): {
|
|
81
|
+
navigating: boolean;
|
|
82
|
+
contentKey: string;
|
|
83
|
+
};
|
package/dist/page-pending.js
CHANGED
|
@@ -81,3 +81,22 @@ export const routerPendingDefaults = {
|
|
|
81
81
|
defaultPreload: "intent",
|
|
82
82
|
defaultPreloadStaleTime: 0,
|
|
83
83
|
};
|
|
84
|
+
/**
|
|
85
|
+
* Props de chargement d'`AppShell` tirées de l'état du routeur :
|
|
86
|
+
*
|
|
87
|
+
* ```tsx
|
|
88
|
+
* const navigation = useRouterState({ select: shellNavigation, structuralSharing: true })
|
|
89
|
+
* <AppShell {...navigation} … />
|
|
90
|
+
* ```
|
|
91
|
+
*
|
|
92
|
+
* `navigating` : une autre page est demandée et pas encore affichée (pas une simple mise à jour
|
|
93
|
+
* des paramètres de la page ouverte). `contentKey` : la page affichée, pas celle qui charge, pour
|
|
94
|
+
* que l'ancienne page ne se remonte pas avant d'être remplacée.
|
|
95
|
+
*/
|
|
96
|
+
export function shellNavigation(state) {
|
|
97
|
+
const shown = state.resolvedLocation?.pathname ?? state.location.pathname;
|
|
98
|
+
return {
|
|
99
|
+
navigating: (state.isLoading || state.status === "pending") && state.location.pathname !== shown,
|
|
100
|
+
contentKey: shown,
|
|
101
|
+
};
|
|
102
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hgdc/ui",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.2",
|
|
4
4
|
"description": "Interface de la H family : jetons de la DA, thèmes, polices et composants.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",
|