@hgdc/ui 0.14.0 → 0.14.1
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/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/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.1",
|
|
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",
|