@hgdc/ui 0.6.0 → 0.7.0

package/README.md

@@ -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/package.json

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