@hgdc/ui 0.56.0 → 0.58.0

package/README.md

@@ -120,6 +120,7 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
 | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `card`           | `<Card><CardHeader><CardTitle>Domaines</CardTitle><CardAction>…</CardAction></CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>`                                                                                                                                                                                                                                                                                                 |
 | `alert`          | `<Alert tone="warning" title="Quota presque atteint" action={<Button size="sm">Voir</Button>}>90 % utilisés.</Alert>`                                                                                                                                                                                                                                                                                                                                   |
+| `demo-notice`    | `<DemoNotice signIn={<Button size="sm" variant="outline" render={<Link to="/connexion" reloadDocument />}>Se connecter</Button>} />` : bandeau de la démo d'une console.                                                                                                                                                                                                                                                                                |
 | `table`          | `<TableHead sort="descending" onSort={…}>Date</TableHead>`, `<TableRowLink render={<Link … />}>Production</TableRowLink>`, `<TableEmpty colSpan={4}>…</TableEmpty>`, `<TableSkeleton columns={4} />`                                                                                                                                                                                                                                                    |
 | `resource-list`  | `<ResourceList><ResourceItem icon={…} title="Site vitrine" meta="acme.ch" badge={…} actions={…} href="/p/site" /></ResourceList>`                                                                                                                                                                                                                                                                                                                       |
 | `stat`           | `<StatGrid><StatTile label="Erreurs" value="12" delta={{ value: "8 %", direction: "up", good: "down" }} /></StatGrid>`                                                                                                                                                                                                                                                                                                                                  |

package/dist/demo-notice.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+/**
+ * Bandeau permanent de la démo d'une console (organisation `~demo`, lue sans compte) : ce que le
+ * visiteur regarde, et comment essayer pour de vrai. Posé en tête du contenu de la console, au-dessus
+ * de chaque page. `signIn` : le bouton « Se connecter » du produit (un lien de son routeur, qui
+ * repart par une page neuve pour ouvrir une vraie session).
+ */
+export declare function DemoNotice({ signIn, children, className, }: {
+    signIn: ReactNode;
+    /** Ce que montre la démo, en une phrase. */
+    children?: ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/demo-notice.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from "./alert.js";
+import { cn } from "./cn.js";
+/**
+ * Bandeau permanent de la démo d'une console (organisation `~demo`, lue sans compte) : ce que le
+ * visiteur regarde, et comment essayer pour de vrai. Posé en tête du contenu de la console, au-dessus
+ * de chaque page. `signIn` : le bouton « Se connecter » du produit (un lien de son routeur, qui
+ * repart par une page neuve pour ouvrir une vraie session).
+ */
+export function DemoNotice({ signIn, children = "Une entreprise inventée, avec des données fictives. Tu peux tout regarder, rien n'est enregistré.", className, }) {
+    return (_jsx(Alert, { "data-demo-notice": "", className: cn("mb-6", className), title: "D\u00E9mo", action: signIn, children: children }));
+}

package/dist/demo-read-only.d.ts

@@ -0,0 +1,28 @@
+import { type ReactElement, type ReactNode } from "react";
+/** Texte de l'infobulle d'un bouton d'écriture dans la démo. */
+export declare const DEMO_READ_ONLY_HINT = "Lecture seule dans la d\u00E9mo";
+/**
+ * Posé une fois autour de la console, `value` vrai sur la démo (organisation `~demo`) : chaque
+ * `DemoReadOnly` en dessous désactive son bouton. Le serveur refuse de toute façon (`refuseDemo`) ;
+ * ceci évite au visiteur un clic qui échoue.
+ */
+export declare function DemoReadOnlyProvider({ value, children }: {
+    value: boolean;
+    children: ReactNode;
+}): React.JSX.Element;
+/** Vrai dans la démo : pour masquer ce qui n'a pas de sens en lecture seule (formulaire, zone de dépôt). */
+export declare function useDemoReadOnly(): boolean;
+type Disableable = {
+    disabled?: boolean;
+    "aria-disabled"?: boolean | "true" | "false";
+};
+/**
+ * Autour d'un bouton d'écriture (créer, envoyer, supprimer…). Hors de la démo : le bouton tel quel.
+ * Dans la démo : le bouton désactivé, et l'infobulle « Lecture seule dans la démo » sur une enveloppe
+ * focalisable, puisqu'un bouton désactivé ne reçoit ni survol ni focus.
+ */
+export declare function DemoReadOnly({ children, hint, }: {
+    children: ReactElement<Disableable>;
+    hint?: string;
+}): React.JSX.Element;
+export {};

package/dist/demo-read-only.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, isValidElement, useContext } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+/** Texte de l'infobulle d'un bouton d'écriture dans la démo. */
+export const DEMO_READ_ONLY_HINT = "Lecture seule dans la démo";
+const DemoReadOnlyContext = createContext(false);
+/**
+ * Posé une fois autour de la console, `value` vrai sur la démo (organisation `~demo`) : chaque
+ * `DemoReadOnly` en dessous désactive son bouton. Le serveur refuse de toute façon (`refuseDemo`) ;
+ * ceci évite au visiteur un clic qui échoue.
+ */
+export function DemoReadOnlyProvider({ value, children }) {
+    return _jsx(DemoReadOnlyContext.Provider, { value: value, children: children });
+}
+/** Vrai dans la démo : pour masquer ce qui n'a pas de sens en lecture seule (formulaire, zone de dépôt). */
+export function useDemoReadOnly() {
+    return useContext(DemoReadOnlyContext);
+}
+/**
+ * Autour d'un bouton d'écriture (créer, envoyer, supprimer…). Hors de la démo : le bouton tel quel.
+ * Dans la démo : le bouton désactivé, et l'infobulle « Lecture seule dans la démo » sur une enveloppe
+ * focalisable, puisqu'un bouton désactivé ne reçoit ni survol ni focus.
+ */
+export function DemoReadOnly({ children, hint = DEMO_READ_ONLY_HINT, }) {
+    const demo = useDemoReadOnly();
+    if (!demo || !isValidElement(children))
+        return children;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger
+            // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- un bouton désactivé ne prend pas le focus : l'enveloppe le prend pour que le clavier lise la raison.
+            , { 
+                // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- un bouton désactivé ne prend pas le focus : l'enveloppe le prend pour que le clavier lise la raison.
+                render: _jsx("span", { tabIndex: 0, "aria-label": hint, "data-demo-read-only": "", className: "inline-flex w-fit" }), children: cloneElement(children, { disabled: true, "aria-disabled": true }) }), _jsx(TooltipContent, { children: hint })] }));
+}

package/package.json

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