@lystech/sections 0.1.0

package/README.md

@@ -0,0 +1,55 @@
+# @lystech/sections
+
+Le contenu d'un site, modifiable par son propriétaire — sans reconstruction ni
+déploiement.
+
+## Pourquoi un paquet à part de `@lystech/core`
+
+`core` exige React 18 et embarque antd, Mantine et React Query : 2,4 Mo de
+JavaScript et 1,2 Mo de CSS. Une clinique qui veut changer trois textes n'a
+aucune raison de charger un magasin, un panier et PayPal — et beaucoup de sites
+clients sont en React 19.
+
+Ce paquet pèse **2,9 Ko** et ne dépend que de React. `core` le réexporte, pour
+qu'une boutique qui l'a déjà n'ait rien de plus à installer.
+
+## La plateforme fixe l'alphabet, pas les mots
+
+Le serveur ne connaît aucun type de bloc. « plat-du-jour », « praticien »,
+« tarifs » appartiennent au site, qui les déclare. Ce que la plateforme
+connaît, ce sont les types de champs — `text`, `richText`, `image`, `number`,
+`boolean`, `url`, `date`, `choice`, `list` — vrais dans tous les métiers, et
+suffisants pour fabriquer un formulaire pour un bloc jamais vu.
+
+## Usage
+
+```tsx
+import { SectionsProvider, useSection } from "@lystech/sections";
+
+<SectionsProvider site="armoise" page="massage" langue={i18n.language}>
+  <MaPage />
+</SectionsProvider>;
+
+// Dans un composant déjà écrit :
+const { contenu: tarifs } = useSection("tarifs-massotherapie", {
+  defaut: SITE.tarifs.massotherapie, // ce que le site affichait déjà
+});
+```
+
+### Le repli n'est pas une option
+
+`defaut` porte les valeurs actuelles du site. Tant que rien n'est publié — ou
+si l'API ne répond pas — ce sont elles qui s'affichent. Brancher un site
+existant ne peut donc rien casser : au pire il continue d'afficher ce qu'il
+affichait hier.
+
+### Publié ≠ brouillon
+
+Le site public ne lit QUE le contenu publié. Un brouillon enregistré ne change
+rien pour les visiteurs tant que personne n'a cliqué « Publier ».
+
+## Champs traduits
+
+Un champ déclaré `localized: true` stocke `{ fr: …, en: … }` ; le paquet rend
+la langue courante, avec repli sur une autre langue plutôt que sur du vide —
+une version anglaise oubliée vaut mieux affichée en français qu'absente.

package/dist/index.d.ts

@@ -0,0 +1,108 @@
+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 { }

package/dist/index.js

@@ -0,0 +1,107 @@
+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({
+  site: e,
+  page: r,
+  langue: t = "fr",
+  apiBaseUrl: o = _,
+  children: n
+}) {
+  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"));
+    }).catch((s) => {
+      u.signal.aborted || s?.name === "AbortError" || f("erreur");
+    }), () => u.abort();
+  }, [e, r, o, A]);
+  const p = m(
+    () => ({
+      site: e,
+      langue: t,
+      sections: c,
+      etat: d,
+      recharger: () => g((u) => u + 1)
+    }),
+    [e, t, c, d]
+  );
+  return /* @__PURE__ */ j(b.Provider, { value: p, children: n });
+}
+function y() {
+  return E(b);
+}
+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 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) ?? "";
+  }
+  if (e && typeof e == "object") {
+    const t = {};
+    for (const [o, n] of Object.entries(e))
+      t[o] = i(n, r);
+    return t;
+  }
+  return e;
+}
+function U(e, r) {
+  if (!r || typeof r != "object" || Array.isArray(r))
+    return e;
+  const t = { ...e };
+  for (const [o, n] of Object.entries(r))
+    n != null && (t[o] = n);
+  return t;
+}
+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;
+    return {
+      contenu: U(r.defaut, c),
+      publie: !!n,
+      UID: o?.UID ?? null,
+      chargement: t?.etat === "chargement"
+    };
+  }, [t?.sections, t?.langue, t?.etat, e, r.defaut]);
+}
+function P(e, r) {
+  const t = y();
+  return m(() => {
+    const o = (t?.sections ?? []).filter(
+      (n) => n.blockType === e
+    );
+    return o.length === 0 ? {
+      items: (r?.defaut ?? []).map((n, c) => ({
+        ...n,
+        __uid: `defaut-${c}`
+      })),
+      publie: !1,
+      chargement: t?.etat === "chargement"
+    } : {
+      items: o.map((n) => ({
+        ...i(n.data ?? {}, t?.langue ?? "fr"),
+        __uid: n.UID
+      })),
+      publie: !0,
+      chargement: t?.etat === "chargement"
+    };
+  }, [t?.sections, t?.langue, t?.etat, e, r?.defaut]);
+}
+export {
+  D as SectionsProvider,
+  O as useSection,
+  P as useSectionList,
+  y as useSectionsContext
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(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"})}));

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@lystech/sections",
+  "version": "0.1.0",
+  "description": "Contenu de site editable par le client — lecture legere, edition chargee a la demande.",
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "publishConfig": { "access": "public" }
+}