@hgdc/ui 0.6.0 → 0.8.0

package/README.md

@@ -39,16 +39,16 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 
 ## Coque des consoles
 
-| Import         | Exemple                                                                                                                                                                |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `app-shell`    | `<AppShell sidebarHeader={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>`                                         |
-|                | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                      |
-| `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                            |
-| `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché               |
-| `command-menu` | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`), `<CommandMenuButton compact="mobile" …/>` |
-| `products`     | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, icône, état), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })`                                               |
-| `kbd`          | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                                     |
-| `page-header`  | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`           |
+| Import         | Exemple                                                                                                                                                                                                       |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `app-shell`    | `<AppShell sidebarHeader={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>`                                                                                |
+|                | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                             |
+| `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                                                                   |
+| `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché                                                      |
+| `command-menu` | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`), `<CommandMenuButton compact="mobile" …/>`                                        |
+| `products`     | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, icône, état, `entryHref`), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })` : chaque produit du menu pointe vers son entrée `/auth/hgdc` (ADR 0010) |
+| `kbd`          | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                                                                            |
+| `page-header`  | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`                                                  |
 
 La barre se réduit en rail (`Ctrl+B`, mémorisé) : poser `sidebarInitScript` dans le `<head>`. Le kit ne connaît ni routeur ni authentification : liens par `render={<Link />}`, actions par callbacks. Rôles d'organisation : `owner`, `admin`, `member` (Propriétaire, Admin, Membre).
 
@@ -99,6 +99,8 @@ Filtres, tri et page vivent dans l'URL du produit : les composants sont contrôl
 | `money-field`       | `<MoneyField value={centimes} onChange={…} />` : CHF en centimes, « 1’250.50 », accepte « 12.– » ; `formatChf`, `parseMoney`                           |
 | `address-fields`    | `<AddressFields value={address} onChange={…} errors={validatePostalAddress(address)} />` : rue, numéro, NPA, localité, pays (facture QR)               |
 
+`access-request` : `<AccessRequest endpoint="https://<deploiement>.convex.site/f/<id>" product="HGDC Mail" signInRender={<Link to="/sign-in" />} />`, la page « Demander un accès » d'un produit (les comptes HGDC s'ouvrent sur invitation). Poste en JSON vers un formulaire HGDC Mail Forms : prénom, nom, entreprise, e-mail professionnel, message facultatif, `produit` caché, piège `_gotcha`. États envoi, réussite, erreur, champ refusé ; `submitAccessRequest` s'appelle seul.
+
 Les champs de date sont ceux du navigateur, sans calendrier maison (ADR 0006). Les fonctions pures (`parseMoney`, `contrastRatio`, `validatePostalAddress`, `formatDateRange`) s'importent seules, côté serveur aussi.
 
 ## Contrôles et surfaces flottantes

package/dist/access-request.d.ts

@@ -0,0 +1,50 @@
+import type { ReactElement, ReactNode } from "react";
+/**
+ * Demander un accès à un produit de la famille, sans compte : les comptes HGDC s'ouvrent sur
+ * invitation. Le formulaire poste en JSON vers un formulaire HGDC Mail Forms (`POST /f/<id>`,
+ * réponse `{ ok }` ou `{ ok: false, error: { code }, errors }`) ; l'équipe reçoit l'avis et
+ * invite depuis HGDC Account. Le texte est au tutoiement, comme les pages publiques de la famille.
+ */
+export type AccessRequestValues = {
+    prenom: string;
+    nom: string;
+    entreprise: string;
+    email: string;
+    message: string;
+};
+export declare const EMPTY_ACCESS_REQUEST: AccessRequestValues;
+/** Ce qu'il faut de `fetch` : une adresse et une requête. */
+export type AccessRequestFetcher = (url: string, init: RequestInit) => Promise<Response>;
+export type AccessRequestResult = {
+    kind: "sent";
+} | {
+    kind: "invalid";
+    errors: Record<string, string>;
+} | {
+    kind: "failed";
+    message: string;
+};
+/**
+ * Envoie la demande et traduit la réponse. Fonction pure à part du composant : un produit peut
+ * l'appeler depuis son propre formulaire. `trap` est le piège à robots (`_gotcha`), vide pour un humain.
+ */
+export declare function submitAccessRequest(endpoint: string, values: AccessRequestValues, product: string, { trap, fetcher }?: {
+    trap?: string;
+    fetcher?: AccessRequestFetcher;
+}): Promise<AccessRequestResult>;
+export declare function AccessRequest({ endpoint, product, title, description, messageLabel, signInHref, signInRender, homeHref, homeRender, fetcher, }: {
+    /** Adresse d'envoi du formulaire Forms : `https://<deploiement>.convex.site/f/<id>`. */
+    endpoint: string;
+    /** Nom affiché et valeur du champ caché `produit` : « HGDC Mail ». */
+    product: string;
+    title?: string;
+    description?: ReactNode;
+    messageLabel?: string;
+    signInHref?: string;
+    /** Lien du routeur du produit vers la connexion : `signInRender={<Link to="/sign-in" />}`. */
+    signInRender?: ReactElement;
+    homeHref?: string;
+    homeRender?: ReactElement;
+    /** Pour les tests. */
+    fetcher?: AccessRequestFetcher;
+}): React.JSX.Element;

package/dist/access-request.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useState } from "react";
+import { Alert } from "./alert.js";
+import { Button, buttonVariants } from "./button.js";
+import { Field, FieldError, FieldLabel } from "./field.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+export const EMPTY_ACCESS_REQUEST = { prenom: "", nom: "", entreprise: "", email: "", message: "" };
+/** Les refus de l'endpoint, dits au tutoiement. */
+const FAILURES = {
+    rate_limited: "Trop d'envois en peu de temps. Réessaie dans une minute.",
+    origin_not_allowed: "Ce formulaire ne s'envoie que depuis le site de HGDC.",
+    form_closed: "Les demandes d'accès sont fermées pour le moment. Réessaie plus tard.",
+};
+/**
+ * Envoie la demande et traduit la réponse. Fonction pure à part du composant : un produit peut
+ * l'appeler depuis son propre formulaire. `trap` est le piège à robots (`_gotcha`), vide pour un humain.
+ */
+export async function submitAccessRequest(endpoint, values, product, { trap = "", fetcher = (url, init) => fetch(url, init) } = {}) {
+    let result;
+    try {
+        const response = await fetcher(endpoint, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", Accept: "application/json" },
+            body: JSON.stringify({ ...values, produit: product, _gotcha: trap }),
+        });
+        result = (await response.json());
+    }
+    catch {
+        return { kind: "failed", message: "Impossible d'envoyer la demande. Vérifie ta connexion et réessaie." };
+    }
+    if (result.ok)
+        return { kind: "sent" };
+    if (result.errors && Object.keys(result.errors).length)
+        return { kind: "invalid", errors: result.errors };
+    return {
+        kind: "failed",
+        message: FAILURES[result.error?.code ?? ""] ?? "La demande n'est pas partie. Réessaie dans un instant.",
+    };
+}
+function LinkSlot({ href, render, className, children, }) {
+    return useRender({
+        defaultTagName: "a",
+        render,
+        props: mergeProps({ className, children }, render ? {} : { href }),
+    });
+}
+export function AccessRequest({ endpoint, product, title = `Demander un accès à ${product}`, description = "Les comptes HGDC s'ouvrent sur invitation. Dis-nous qui tu es : on te répond rapidement et, si c'est bon, tu reçois une invitation par e-mail.", messageLabel = "Ton projet, en quelques mots (facultatif)", signInHref = "/sign-in", signInRender, homeHref = "/", homeRender, fetcher, }) {
+    const [values, setValues] = useState(EMPTY_ACCESS_REQUEST);
+    const [trap, setTrap] = useState("");
+    const [pending, setPending] = useState(false);
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [failure, setFailure] = useState(null);
+    const [sentTo, setSentTo] = useState(null);
+    const set = (key) => (event) => {
+        setValues((current) => ({ ...current, [key]: event.target.value }));
+        setFieldErrors(({ [key]: _gone, ...rest }) => rest);
+    };
+    async function submit(event) {
+        event.preventDefault();
+        setPending(true);
+        setFailure(null);
+        setFieldErrors({});
+        const result = await submitAccessRequest(endpoint, values, product, { trap, ...(fetcher ? { fetcher } : {}) });
+        if (result.kind === "sent")
+            setSentTo(values.email.trim());
+        else if (result.kind === "invalid")
+            setFieldErrors(result.errors);
+        else
+            setFailure(result.message);
+        setPending(false);
+    }
+    if (sentTo) {
+        return (_jsxs("div", { "data-slot": "access-request", className: "grid rise gap-6", children: [_jsx(HugeiconsIcon, { icon: CheckmarkCircle02Icon, className: "size-10 pop-in text-status-active" }), _jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-semibold text-balance", children: "Demande envoy\u00E9e" }), _jsxs("p", { className: "mt-2 text-muted-foreground", children: ["Merci. Un accus\u00E9 de r\u00E9ception part vers ", sentTo, ". Si ta demande est accept\u00E9e, tu re\u00E7ois une invitation de HGDC Account pour cr\u00E9er ton compte."] })] }), _jsx(LinkSlot, { href: homeHref, render: homeRender, className: buttonVariants({ variant: "outline", size: "lg" }), children: "Retour \u00E0 l'accueil" })] }, "access-done"));
+    }
+    const invalid = (key) => (fieldErrors[key] ? true : undefined);
+    const field = (key, label, input) => (_jsxs(Field, { "data-invalid": invalid(key), children: [_jsx(FieldLabel, { htmlFor: `acces-${key}`, children: label }), input, fieldErrors[key] ? _jsx(FieldError, { children: fieldErrors[key] }) : null] }));
+    const text = (key, autoComplete, max, type = "text") => (_jsx(Input, { id: `acces-${key}`, type: type, autoComplete: autoComplete, required: true, maxLength: max, value: values[key], onChange: set(key), "aria-invalid": invalid(key) }));
+    return (_jsxs("form", { "data-slot": "access-request", onSubmit: submit, className: "grid rise gap-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-semibold text-balance", children: title }), description ? _jsx("p", { className: "mt-2 text-muted-foreground", children: description }) : null] }), failure ? (_jsx(Alert, { tone: "destructive", role: "alert", children: failure })) : null, _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [field("prenom", "Prénom", text("prenom", "given-name", 100)), field("nom", "Nom", text("nom", "family-name", 100))] }), field("entreprise", "Entreprise", text("entreprise", "organization", 120)), field("email", "E-mail professionnel", text("email", "email", 320, "email")), field("message", messageLabel, _jsx(Textarea, { id: "acces-message", rows: 3, maxLength: 2000, value: values.message, onChange: set("message"), "aria-invalid": invalid("message") })), _jsx("input", { type: "text", name: "_gotcha", tabIndex: -1, autoComplete: "off", "aria-hidden": "true", value: trap, onChange: (e) => setTrap(e.target.value), className: "absolute -left-[9999px] size-px opacity-0" })] }), _jsx(Button, { type: "submit", size: "lg", isLoading: pending, children: "Envoyer la demande" }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["D\u00E9j\u00E0 un compte HGDC ?", " ", _jsx(LinkSlot, { href: signInHref, render: signInRender, className: "font-medium text-foreground underline-offset-4 hover:underline", children: "Se connecter" })] })] }, "access"));
+}

package/dist/products.d.ts

@@ -11,7 +11,13 @@ export type HgdcCatalogProduct = {
     name: string;
     /** « host.hgdc.ch ». */
     subdomain: string;
+    /** Page d'accueil publique : `https://host.hgdc.ch`. */
     href: string;
+    /**
+     * Entrée dans l'app avec la session HGDC Account (`PRODUCT_ENTRY_PATH`), sans page d'accueil
+     * ni bouton de connexion. Pour Account, sa racine.
+     */
+    entryHref: string;
     /** Une phrase, au tutoiement. */
     pitch: string;
     icon: IconSvgElement;
@@ -22,7 +28,12 @@ export type HgdcCatalogProduct = {
      */
     accent?: EmailAccent | undefined;
 };
-/** HGDC Account : le compte commun (profil, sécurité, organisations), hors du catalogue des produits. */
+/**
+ * Chemin de l'entrée commune des produits, le `HGDC_ENTRY_PATH` de `@hgdc/auth` : chaque produit
+ * le monte (`createHgdcEntry`). Il ouvre l'app avec la session HGDC Account, sans formulaire
+ * quand cette session existe.
+ */
+export declare const PRODUCT_ENTRY_PATH = "/auth/hgdc";
 export declare const HGDC_ACCOUNT: HgdcCatalogProduct;
 /** Les produits de la famille, dans leur ordre d'affichage. Account n'en fait pas partie (`HGDC_ACCOUNT`). */
 export declare const HGDC_PRODUCTS: ReadonlyArray<HgdcCatalogProduct>;
@@ -41,7 +52,8 @@ export type ProductMenuEntry = {
 /**
  * Les entrées du menu du compte : Account d'abord, puis les produits ouverts. `current` est le
  * mot du produit affiché (« Mail ») : il est coché. `accountHref` remplace l'adresse d'Account
- * (un Account local en développement).
+ * (un Account local en développement). Chaque produit pointe vers son entrée (`entryHref`) :
+ * un clic ouvre l'app avec la session HGDC, pas la page d'accueil publique.
  */
 export declare function productMenuEntries(options?: {
     current?: string | undefined;

package/dist/products.js

@@ -11,13 +11,21 @@ export const PRODUCT_STAGE_LABEL = {
     preview: "Préversion",
     soon: "Bientôt",
 };
+/**
+ * Chemin de l'entrée commune des produits, le `HGDC_ENTRY_PATH` de `@hgdc/auth` : chaque produit
+ * le monte (`createHgdcEntry`). Il ouvre l'app avec la session HGDC Account, sans formulaire
+ * quand cette session existe.
+ */
+export const PRODUCT_ENTRY_PATH = "/auth/hgdc";
 function product(word, pitch, icon, stage) {
     const subdomain = `${word.toLowerCase()}.hgdc.ch`;
+    const href = `https://${subdomain}`;
     return {
         word,
         name: `HGDC ${word}`,
         subdomain,
-        href: `https://${subdomain}`,
+        href,
+        entryHref: `${href}${PRODUCT_ENTRY_PATH}`,
         pitch,
         icon,
         stage,
@@ -25,7 +33,8 @@ function product(word, pitch, icon, stage) {
     };
 }
 /** HGDC Account : le compte commun (profil, sécurité, organisations), hors du catalogue des produits. */
-export const HGDC_ACCOUNT = product("Account", "Ton compte HGDC : profil, sécurité et organisations, pour tous les produits.", UserCircleIcon, "live");
+const account = product("Account", "Ton compte HGDC : profil, sécurité et organisations, pour tous les produits.", UserCircleIcon, "live");
+export const HGDC_ACCOUNT = { ...account, entryHref: account.href };
 /** Les produits de la famille, dans leur ordre d'affichage. Account n'en fait pas partie (`HGDC_ACCOUNT`). */
 export const HGDC_PRODUCTS = [
     product("Host", "Ton site en ligne, déployé à chaque modification.", Rocket01Icon, "preview"),
@@ -42,14 +51,16 @@ export function isProductOpen(item) {
 /**
  * Les entrées du menu du compte : Account d'abord, puis les produits ouverts. `current` est le
  * mot du produit affiché (« Mail ») : il est coché. `accountHref` remplace l'adresse d'Account
- * (un Account local en développement).
+ * (un Account local en développement). Chaque produit pointe vers son entrée (`entryHref`) :
+ * un clic ouvre l'app avec la session HGDC, pas la page d'accueil publique.
  */
 export function productMenuEntries(options = {}) {
     const current = options.current?.toLowerCase();
-    const account = { ...HGDC_ACCOUNT, href: options.accountHref ?? HGDC_ACCOUNT.href };
+    const accountHref = options.accountHref ?? HGDC_ACCOUNT.entryHref;
+    const account = { ...HGDC_ACCOUNT, href: accountHref, entryHref: accountHref };
     return [account, ...(options.catalog ?? HGDC_PRODUCTS).filter(isProductOpen)].map((item) => ({
         name: item.name,
-        href: item.href,
+        href: item.entryHref,
         icon: item.icon,
         ...(item.word.toLowerCase() === current ? { current: true } : {}),
         ...(item.stage === "preview" ? { hint: PRODUCT_STAGE_LABEL.preview } : {}),

package/package.json

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