@lystech/sections 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,108 +1,16 @@
-import { JSX } from 'react';
-import { ReactNode } from 'react';
-
-export declare type BlocDeclare = {
-    blockType: string;
-    label: string;
-    description?: string;
-    fields: ChampDeclare[];
-    pages?: string[] | null;
-    maxPerPage?: number | null;
-};
-
-export declare type ChampDeclare = {
-    key: string;
-    label: string;
-    type: TypeDeChamp;
-    required?: boolean;
-    help?: string;
-    options?: string[];
-    /** Sous-champs d'une `list`. */
-    of?: ChampDeclare[];
-    /**
-     * Champ TRADUIT. La valeur stockée devient { fr: …, en: … } et le paquet
-     * rend celle de la langue courante.
-     *
-     * Le serveur ne connaît pas cette clé — il stocke la déclaration telle
-     * quelle. C'est voulu : ajouter une langue ne doit pas demander une
-     * migration côté plateforme.
-     */
-    localized?: boolean;
-};
-
-declare type Contexte = {
-    /** Sous-domaine de l'organisation dans Lystech. */
-    site: string;
-    /** Langue courante — décide quelle version d'un champ traduit est rendue. */
-    langue: string;
-    sections: SectionPubliee[];
-    etat: Etat;
-    recharger: () => void;
-};
-
-declare type Etat = "chargement" | "pret" | "erreur";
-
-export declare type ResultatSection<T> = {
-    /** Le contenu à afficher : publié si présent, défaut sinon. */
-    contenu: T;
-    /** Vrai quand le contenu vient du serveur, faux quand c'est le défaut. */
-    publie: boolean;
-    /** L'identifiant de la section — nécessaire à l'édition. */
-    UID: string | null;
-    chargement: boolean;
-};
-
-/** Une section telle qu'elle revient du serveur. */
-export declare type SectionPubliee = {
-    UID: string;
-    page: string;
-    blockType: string;
-    position: number;
-    data: Record<string, unknown> | null;
-};
-
-export declare function SectionsProvider({ site, page, langue, apiBaseUrl, children, }: {
-    /** Sous-domaine de l'organisation (ex. « armoise »). */
-    site: string;
-    /** La page dont on veut les sections (ex. « accueil »). */
-    page: string;
-    langue?: string;
-    apiBaseUrl?: string;
-    children: ReactNode;
-}): JSX.Element;
-
-export declare type TypeDeChamp = "text" | "richText" | "image" | "number" | "boolean" | "url" | "date" | "choice" | "list";
-
-/**
- * Le contenu d'un type de bloc sur la page courante.
- *
- * Le cas visé est celui d'un site DÉJÀ DESSINÉ : un bloc par type et par page,
- * dont on veut rendre les mots et les images modifiables — pas un constructeur
- * de pages. Pour des blocs répétables, voir `useSectionList`.
- */
-export declare function useSection<T extends object>(blockType: string, options: {
-    defaut: T;
-}): ResultatSection<T>;
-
-/** Plusieurs blocs du même type, dans l'ordre choisi par le client. */
-export declare function useSectionList<T extends object>(blockType: string, options?: {
-    defaut?: T[];
-}): {
-    items: Array<T & {
-        __uid: string;
-    }>;
-    publie: boolean;
-    chargement: boolean;
-};
-
-/**
- * Le contexte, ou `null` HORS d'un fournisseur.
- *
- * On ne lève pas : un composant branché sur les sections doit rester
- * utilisable dans une page qui n'en a pas (une maquette, un test, une page
- * d'erreur). Il affichera son repli, ce qui est exactement le bon
- * comportement.
- */
-export declare function useSectionsContext(): Contexte | null;
-
-export { }
+/**
+ * @lystech/sections — le contenu d'un site, modifiable par son propriétaire.
+ *
+ * CE QUI EST EXPORTÉ ICI EST CE QU'UN VISITEUR TÉLÉCHARGE : la lecture, et
+ * rien d'autre. L'interface d'édition vivra dans un point d'entrée séparé,
+ * chargé à la demande. Un visiteur ne doit pas payer le poids d'un éditeur
+ * qu'il ne verra jamais.
+ *
+ * Le paquet ne dépend PAS de @lystech/core : une clinique qui veut modifier
+ * trois textes n'a aucune raison de charger un magasin, un panier et PayPal.
+ */
+export { SectionsProvider, useSectionsContext } from './SectionsProvider';
+export { SignatureLystech } from './SignatureLystech';
+export { useSection, useSectionList } from './useSection';
+export type { BlocDeclare, ChampDeclare, SectionPubliee, TypeDeChamp, } from './types';
+export type { AncrageEdition, ResultatSection } from './useSection';

package/dist/index.js

@@ -1,107 +1,262 @@
-import { jsx as j } from "react/jsx-runtime";
-import { createContext as x, useState as l, useRef as C, useEffect as S, useMemo as m, useContext as E } from "react";
-const b = x(null), _ = "https://api.lystech.ca/api";
-function D({
+import { jsx as h, jsxs as j, Fragment as F } from "react/jsx-runtime";
+import { useState as m, useRef as _, useEffect as A, useCallback as I, useMemo as C, useContext as M, createContext as T } from "react";
+const d = "lystech-edit", U = T(null), $ = "https://api.lystech.ca/api";
+function J() {
+  if (typeof window > "u") return null;
+  const e = (t) => {
+    try {
+      window.sessionStorage.setItem(d, t);
+    } catch {
+    }
+    return t;
+  };
+  try {
+    const t = window.location.hash.replace(/^#/, "");
+    if (t.includes(d + "=")) {
+      const o = new URLSearchParams(t), c = o.get(d);
+      if (c) {
+        o.delete(d);
+        const a = o.toString();
+        return window.history.replaceState(
+          {},
+          "",
+          window.location.pathname + window.location.search + (a ? "#" + a : "")
+        ), e(c);
+      }
+    }
+    const n = new URL(window.location.href), r = n.searchParams.get(d);
+    return r ? (n.searchParams.delete(d), window.history.replaceState({}, "", n.toString()), e(r)) : window.sessionStorage.getItem(d);
+  } catch {
+    return null;
+  }
+}
+function q({
   site: e,
-  page: r,
-  langue: t = "fr",
-  apiBaseUrl: o = _,
-  children: n
+  page: t,
+  langue: n = "fr",
+  apiBaseUrl: r = $,
+  sectionsInitiales: o,
+  children: c
 }) {
-  const [c, a] = l([]), [d, f] = l("chargement"), [A, g] = l(0), h = C(null);
-  S(() => {
-    if (!e || !r) return;
-    h.current?.abort();
-    const u = new AbortController();
-    return h.current = u, f("chargement"), fetch(
-      `${o}/site-sections/public/${encodeURIComponent(e)}/${encodeURIComponent(r)}`,
-      { signal: u.signal }
-    ).then((s) => s.ok ? s.json() : Promise.reject(new Error(String(s.status)))).then((s) => {
-      u.signal.aborted || (a(Array.isArray(s) ? s : []), f("pret"));
+  const [a, p] = m(
+    o ?? []
+  ), [u, y] = m(
+    o?.length ? "pret" : "chargement"
+  ), [g, b] = m(0), [P, z] = m({}), [v, O] = m(!1), D = _(null);
+  A(() => {
+    if (!e || !t) return;
+    D.current?.abort();
+    const i = new AbortController();
+    D.current = i, y("chargement");
+    const f = r + "/site-sections/public/" + encodeURIComponent(e) + "/" + encodeURIComponent(t);
+    return fetch(f, { signal: i.signal }).then(
+      (s) => s.ok ? s.json() : Promise.reject(new Error(String(s.status)))
+    ).then((s) => {
+      i.signal.aborted || (p(Array.isArray(s) ? s : []), y("pret"));
     }).catch((s) => {
-      u.signal.aborted || s?.name === "AbortError" || f("erreur");
-    }), () => u.abort();
-  }, [e, r, o, A]);
-  const p = m(
+      i.signal.aborted || s?.name === "AbortError" || y("erreur");
+    }), () => i.abort();
+  }, [e, t, r, g]);
+  const E = I(() => b((i) => i + 1), []), x = I(
+    (i, f) => z((s) => ({ ...s, [i]: f })),
+    []
+  ), l = _({
+    site: e,
+    page: t,
+    langue: n,
+    poserApercu: () => {
+    },
+    recharger: () => {
+    }
+  });
+  l.current.site = e, l.current.page = t, l.current.langue = n, l.current.poserApercu = x, l.current.recharger = E, A(() => {
+    l.current.surChangementDePage?.(t);
+  }, [t]), A(() => {
+    const i = J();
+    if (!i) return;
+    let f = !0, s;
+    return import("@lystech/sections/editeur").then((w) => {
+      f && (O(!0), s = w.monterEditeur({
+        jeton: i,
+        site: e,
+        apiBaseUrl: r,
+        pont: l.current
+      }));
+    }).catch((w) => {
+      console.error("[lystech] éditeur indisponible:", w?.message ?? w);
+    }), () => {
+      f = !1, s?.();
+    };
+  }, [e, r]);
+  const k = C(
     () => ({
       site: e,
-      langue: t,
-      sections: c,
-      etat: d,
-      recharger: () => g((u) => u + 1)
+      page: t,
+      langue: n,
+      apiBaseUrl: r,
+      sections: a,
+      etat: u,
+      recharger: E,
+      apercu: P,
+      poserApercu: x,
+      modeEdition: v
     }),
-    [e, t, c, d]
+    [
+      e,
+      t,
+      n,
+      r,
+      a,
+      u,
+      E,
+      P,
+      x,
+      v
+    ]
   );
-  return /* @__PURE__ */ j(b.Provider, { value: p, children: n });
+  return /* @__PURE__ */ h(U.Provider, { value: k, children: c });
+}
+function R() {
+  return M(U);
+}
+const W = "https://api.lystech.ca/api";
+function G() {
+  if (typeof window > "u") return null;
+  try {
+    const e = new URL(window.location.href), t = e.searchParams.get("lystech-acces");
+    return t ? (e.searchParams.delete("lystech-acces"), window.history.replaceState({}, "", e.toString()), t) : null;
+  } catch {
+    return null;
+  }
 }
-function y() {
-  return E(b);
+const L = {
+  "sans-acces": "Vous n'avez pas encore accès à la modification de ce site.",
+  "demande-envoyee": "Demande envoyée. La personne responsable du site vous répondra.",
+  "trop-de-demandes": "Trop de demandes aujourd'hui. Réessayez demain."
+};
+function K({
+  site: e,
+  apiBaseUrl: t,
+  className: n,
+  mention: r = "Réalisé avec Lystech",
+  connexion: o = "Connexion"
+}) {
+  const c = R(), a = e ?? c?.site ?? "", p = t ?? c?.apiBaseUrl ?? W, [u, y] = m(null);
+  if (A(() => y(G()), []), !a) return null;
+  const g = (b) => p + "/site-sections/edit-entry?site=" + encodeURIComponent(a) + (b ? "&demander=1" : "");
+  return /* @__PURE__ */ j(
+    "div",
+    {
+      className: n,
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: "0.5em",
+        fontSize: "0.85em",
+        opacity: 0.7,
+        lineHeight: 1.5
+      },
+      children: [
+        /* @__PURE__ */ h(
+          "a",
+          {
+            href: "https://lystech.ca",
+            target: "_blank",
+            rel: "noreferrer",
+            style: { color: "inherit" },
+            children: r
+          }
+        ),
+        !c?.modeEdition && !u && /* @__PURE__ */ j(F, { children: [
+          /* @__PURE__ */ h("span", { "aria-hidden": "true", children: "·" }),
+          /* @__PURE__ */ h("a", { href: g(!1), style: { color: "inherit" }, children: o })
+        ] }),
+        u && /* @__PURE__ */ j("span", { style: { display: "inline-flex", gap: "0.5em", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ h("span", { "aria-hidden": "true", children: "·" }),
+          /* @__PURE__ */ h("span", { children: L[u] ?? L["sans-acces"] }),
+          u === "sans-acces" && /* @__PURE__ */ h("a", { href: g(!0), style: { color: "inherit" }, children: "Demander l'accès" })
+        ] })
+      ]
+    }
+  );
 }
-function I(e) {
-  return !!e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).every((r) => /^[a-z]{2}(-[A-Za-z]{2})?$/.test(r));
+function H(e) {
+  return !!e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).every((t) => /^[a-z]{2}(-[A-Za-z]{2})?$/.test(t));
 }
-function i(e, r) {
-  if (Array.isArray(e)) return e.map((t) => i(t, r));
-  if (I(e)) {
-    const t = e, o = r.slice(0, 2);
-    return t[r] ?? t[o] ?? Object.values(t).find((c) => c != null) ?? "";
+function S(e, t) {
+  if (Array.isArray(e)) return e.map((n) => S(n, t));
+  if (H(e)) {
+    const n = e, r = t.slice(0, 2);
+    return n[t] ?? n[r] ?? Object.values(n).find((c) => c != null) ?? "";
   }
   if (e && typeof e == "object") {
-    const t = {};
-    for (const [o, n] of Object.entries(e))
-      t[o] = i(n, r);
-    return t;
+    const n = {};
+    for (const [r, o] of Object.entries(e))
+      n[r] = S(o, t);
+    return n;
   }
   return e;
 }
-function U(e, r) {
-  if (!r || typeof r != "object" || Array.isArray(r))
+function N(e, t) {
+  if (!t || typeof t != "object" || Array.isArray(t))
     return e;
-  const t = { ...e };
-  for (const [o, n] of Object.entries(r))
-    n != null && (t[o] = n);
-  return t;
+  const n = { ...e };
+  for (const [r, o] of Object.entries(t))
+    o != null && (n[r] = o);
+  return n;
 }
-function O(e, r) {
-  const t = y();
-  return m(() => {
-    const o = t?.sections.find(
-      (a) => a.blockType === e
-    ), n = o?.data ?? null, c = n ? i(n, t?.langue ?? "fr") : null;
+function Q(e, t) {
+  const n = R(), r = n?.apercu?.[e];
+  return C(() => {
+    const o = n?.sections.find(
+      (p) => p.blockType === e
+    ), c = r ?? o?.data ?? null, a = c ? S(c, n?.langue ?? "fr") : null;
     return {
-      contenu: U(r.defaut, c),
-      publie: !!n,
+      contenu: N(t.defaut, a),
+      publie: !!o?.data,
       UID: o?.UID ?? null,
-      chargement: t?.etat === "chargement"
+      chargement: n?.etat === "chargement",
+      ancrage: { "data-lystech-section": e }
     };
-  }, [t?.sections, t?.langue, t?.etat, e, r.defaut]);
+  }, [
+    n?.sections,
+    n?.langue,
+    n?.etat,
+    r,
+    e,
+    t.defaut
+  ]);
 }
-function P(e, r) {
-  const t = y();
-  return m(() => {
-    const o = (t?.sections ?? []).filter(
-      (n) => n.blockType === e
+function X(e, t) {
+  const n = R();
+  return C(() => {
+    const r = { "data-lystech-section": e }, o = (n?.sections ?? []).filter(
+      (c) => c.blockType === e
     );
     return o.length === 0 ? {
-      items: (r?.defaut ?? []).map((n, c) => ({
-        ...n,
-        __uid: `defaut-${c}`
+      items: (t?.defaut ?? []).map((c, a) => ({
+        ...c,
+        __uid: `defaut-${a}`
       })),
       publie: !1,
-      chargement: t?.etat === "chargement"
+      chargement: n?.etat === "chargement",
+      ancrage: r
     } : {
-      items: o.map((n) => ({
-        ...i(n.data ?? {}, t?.langue ?? "fr"),
-        __uid: n.UID
+      items: o.map((c) => ({
+        ...S(c.data ?? {}, n?.langue ?? "fr"),
+        __uid: c.UID
       })),
       publie: !0,
-      chargement: t?.etat === "chargement"
+      chargement: n?.etat === "chargement",
+      ancrage: r
     };
-  }, [t?.sections, t?.langue, t?.etat, e, r?.defaut]);
+  }, [n?.sections, n?.langue, n?.etat, e, t?.defaut]);
 }
 export {
-  D as SectionsProvider,
-  O as useSection,
-  P as useSectionList,
-  y as useSectionsContext
+  q as SectionsProvider,
+  K as SignatureLystech,
+  Q as useSection,
+  X as useSectionList,
+  R as useSectionsContext
 };

package/dist/types.d.ts

@@ -0,0 +1,41 @@
+export type TypeDeChamp = "text" | "richText" | "image" | "number" | "boolean" | "url" | "date" | "choice" | "list";
+export type ChampDeclare = {
+    key: string;
+    label: string;
+    type: TypeDeChamp;
+    required?: boolean;
+    help?: string;
+    options?: string[];
+    /** Sous-champs d'une `list`. */
+    of?: ChampDeclare[];
+    /**
+     * Champ TRADUIT. La valeur stockée devient { fr: …, en: … } et le paquet
+     * rend celle de la langue courante.
+     *
+     * Le serveur ne connaît pas cette clé — il stocke la déclaration telle
+     * quelle. C'est voulu : ajouter une langue ne doit pas demander une
+     * migration côté plateforme.
+     */
+    localized?: boolean;
+};
+export type BlocDeclare = {
+    blockType: string;
+    label: string;
+    description?: string;
+    fields: ChampDeclare[];
+    pages?: string[] | null;
+    maxPerPage?: number | null;
+};
+/** Une section telle qu'elle revient du serveur. */
+export type SectionPubliee = {
+    UID: string;
+    page: string;
+    blockType: string;
+    position: number;
+    data: Record<string, unknown> | null;
+};
+export type ValeurTraduite = {
+    [langue: string]: unknown;
+};
+/** Un champ traduit est un objet de langues ; on le reconnaît sans schéma. */
+export declare function estTraduite(v: unknown): v is ValeurTraduite;

package/dist/useSection.d.ts

@@ -0,0 +1,50 @@
+/**
+ * LES ATTRIBUTS À POSER SUR LE CONTENEUR DE LA SECTION.
+ *
+ * L'éditeur doit pouvoir retrouver, DANS LA PAGE, le rectangle qui correspond
+ * à un bloc — pour l'encadrer et y poser un bouton. Il n'existe aucun moyen
+ * fiable de le deviner : deux sections peuvent afficher les mêmes mots, et un
+ * site est libre de sa structure. Le site le dit donc explicitement, en
+ * étalant ces attributs sur son élément :
+ *
+ *     const { contenu, ancrage } = useSection("tarifs", { defaut });
+ *     return <section {...ancrage}>…</section>;
+ *
+ * Hors mode édition, c'est un attribut `data-` inerte : aucun poids, aucun
+ * effet, aucun style.
+ */
+export type AncrageEdition = {
+    "data-lystech-section": string;
+};
+export type ResultatSection<T> = {
+    /** Le contenu à afficher : aperçu, sinon publié, sinon défaut. */
+    contenu: T;
+    /** Vrai quand le contenu vient du serveur, faux quand c'est le défaut. */
+    publie: boolean;
+    /** L'identifiant de la section — nécessaire à l'édition. */
+    UID: string | null;
+    chargement: boolean;
+    /** À étaler sur le conteneur pour que l'éditeur puisse le situer. */
+    ancrage: AncrageEdition;
+};
+/**
+ * Le contenu d'un type de bloc sur la page courante.
+ *
+ * Le cas visé est celui d'un site DÉJÀ DESSINÉ : un bloc par type et par page,
+ * dont on veut rendre les mots et les images modifiables — pas un constructeur
+ * de pages. Pour des blocs répétables, voir `useSectionList`.
+ */
+export declare function useSection<T extends object>(blockType: string, options: {
+    defaut: T;
+}): ResultatSection<T>;
+/** Plusieurs blocs du même type, dans l'ordre choisi par le client. */
+export declare function useSectionList<T extends object>(blockType: string, options?: {
+    defaut?: T[];
+}): {
+    items: Array<T & {
+        __uid: string;
+    }>;
+    publie: boolean;
+    chargement: boolean;
+    ancrage: AncrageEdition;
+};

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "@lystech/sections",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Contenu de site editable par le client — lecture legere, edition chargee a la demande.",
   "type": "module",
-  "main": "./dist/index.umd.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
+      "import": "./dist/index.js"
+    },
+    "./editeur": {
+      "types": "./dist/editeur/index.d.ts",
+      "import": "./dist/editeur.js"
     }
   },
+  "sideEffects": false,
   "files": ["dist"],
   "scripts": {
     "build": "tsc -b && vite build",

package/dist/index.umd.cjs

@@ -1 +0,0 @@
-(function(s,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],a):(s=typeof globalThis<"u"?globalThis:s||self,a(s.LystechSections={},s.jsxRuntime,s.React))})(this,(function(s,a,c){"use strict";const y=c.createContext(null),j="https://api.lystech.ca/api";function A({site:t,page:n,langue:e="fr",apiBaseUrl:o=j,children:r}){const[i,l]=c.useState([]),[S,h]=c.useState("chargement"),[E,P]=c.useState(0),b=c.useRef(null);c.useEffect(()=>{if(!t||!n)return;b.current?.abort();const f=new AbortController;return b.current=f,h("chargement"),fetch(`${o}/site-sections/public/${encodeURIComponent(t)}/${encodeURIComponent(n)}`,{signal:f.signal}).then(u=>u.ok?u.json():Promise.reject(new Error(String(u.status)))).then(u=>{f.signal.aborted||(l(Array.isArray(u)?u:[]),h("pret"))}).catch(u=>{f.signal.aborted||u?.name==="AbortError"||h("erreur")}),()=>f.abort()},[t,n,o,E]);const R=c.useMemo(()=>({site:t,langue:e,sections:i,etat:S,recharger:()=>P(f=>f+1)}),[t,e,i,S]);return a.jsx(y.Provider,{value:R,children:r})}function m(){return c.useContext(y)}function g(t){return!!t&&typeof t=="object"&&!Array.isArray(t)&&Object.keys(t).every(n=>/^[a-z]{2}(-[A-Za-z]{2})?$/.test(n))}function d(t,n){if(Array.isArray(t))return t.map(e=>d(e,n));if(g(t)){const e=t,o=n.slice(0,2);return e[n]??e[o]??Object.values(e).find(i=>i!=null)??""}if(t&&typeof t=="object"){const e={};for(const[o,r]of Object.entries(t))e[o]=d(r,n);return e}return t}function p(t,n){if(!n||typeof n!="object"||Array.isArray(n))return t;const e={...t};for(const[o,r]of Object.entries(n))r!=null&&(e[o]=r);return e}function x(t,n){const e=m();return c.useMemo(()=>{const o=e?.sections.find(l=>l.blockType===t),r=o?.data??null,i=r?d(r,e?.langue??"fr"):null;return{contenu:p(n.defaut,i),publie:!!r,UID:o?.UID??null,chargement:e?.etat==="chargement"}},[e?.sections,e?.langue,e?.etat,t,n.defaut])}function C(t,n){const e=m();return c.useMemo(()=>{const o=(e?.sections??[]).filter(r=>r.blockType===t);return o.length===0?{items:(n?.defaut??[]).map((r,i)=>({...r,__uid:`defaut-${i}`})),publie:!1,chargement:e?.etat==="chargement"}:{items:o.map(r=>({...d(r.data??{},e?.langue??"fr"),__uid:r.UID})),publie:!0,chargement:e?.etat==="chargement"}},[e?.sections,e?.langue,e?.etat,t,n?.defaut])}s.SectionsProvider=A,s.useSection=x,s.useSectionList=C,s.useSectionsContext=m,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));