@mostajs/crud-ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog — @mostajs/crud-ui
+
+Format [Keep a Changelog](https://keepachangelog.com/fr/1.0.0/) · [SemVer](https://semver.org/lang/fr/).
+Auteur : Dr Hamid MADANI <drmdh@msn.com>
+
+## [0.1.0] — 2026-06-20
+
+### Added
+- **Panneau CRUD générique** (rendu HTML-string, zéro dépendance) — lot **UI-2** du plan d'extraction. Extrait de `panel()`/`createForm()`/registre `CRUD` de `incubator/app/server.mjs`.
+- `panel({ title, sub, back, note, rows, cols, hidden, routeBase, detail, actions, create, extra, empty })` → corps de panneau, **composant `@mostajs/app-shell-ui`** (table/form/pageTitle/back).
+- Helpers `detailLink`, `actionForm`, `actionsCell` (boutons filtrés par `show(row)`).
+- Conventions de route (surchargeables) : détail `GET routeBase/<id>`, action `POST routeBase/act/<id>`, création `POST routeBase/create`. Lecture seule sans `create`/`actions`.
+- Vue pure/déterministe, échappement délégué au socle. 5 tests `@mostajs/mjs-unit` (§11.1.bis) + exemple `examples/run.mjs`. Proposition `docs/00-PROPOSITION-PLAN-CRUD-UI-20062026.md`.

package/README.md

@@ -0,0 +1,54 @@
+# @mostajs/crud-ui
+
+> Panneau **CRUD générique** (rendu **HTML-string**, zéro dépendance) — spec déclaratif + lignes → formulaire + table + actions.
+
+**Auteur** : Dr Hamid MADANI <drmdh@msn.com> · **Licence** : AGPL-3.0-or-later · Membre de `mosta-ui-html-stack`.
+
+Vue **pure** composant `@mostajs/app-shell-ui` : l'app charge les données et fournit un spec ; `crud-ui` assemble le HTML (formulaire de création + table avec lien détail + boutons d'action POST). Aucun accès données, aucun effet de bord. Extrait du `panel()` de l'app Hadhinat (`incubator/app/server.mjs`).
+
+## Installation
+
+```bash
+npm install @mostajs/crud-ui @mostajs/app-shell-ui
+```
+
+## Usage
+
+```js
+import { page } from '@mostajs/app-shell-ui';
+import { panel } from '@mostajs/crud-ui';
+
+const rows = await app.incubator.companies.list();   // données chargées par l'app
+
+const body = panel({
+  title: 'Entreprises', back: { href: '/', label: '← Architecture' },
+  rows, routeBase: '/m/companies', detail: true,
+  actions: [{ id: 'advance', label: 'Avancer ▸', show: (r) => r._status !== 'graduated' }],
+  create: { fields: [{ name: 'legalName', label: 'Raison sociale', required: 1 }] },
+});
+
+const html = page({ title: 'Entreprises', brand: '🏢 Hadhinat', body });
+```
+
+Génère : formulaire `POST /m/companies/create`, table avec lien détail `GET /m/companies/<id>`, boutons `POST /m/companies/act/<id>` (filtrés par `show(row)`).
+
+## API
+
+| Fonction | Rôle |
+|---|---|
+| `panel({title, sub, back, note, rows, cols, hidden, routeBase, detail, actions, create, extra, empty})` | Corps du panneau (à enrober via `app-shell-ui.page()`) |
+| `detailLink(href, label?)` · `actionForm(routeBase, action, row)` · `actionsCell(routeBase, actions, row)` | Helpers réutilisables |
+
+- `detail` : `true` → lien `routeBase/<id>` ; ou `(row)=>href`. `actions[].show(row)` filtre les boutons. Sans `create`/`actions` → table en lecture seule.
+- `create.fields` au format `app-shell-ui` `form` (l'app résout les options dynamiques en amont).
+
+> **Sécurité** : valeurs/route/labels échappés (via `app-shell-ui`). `note`/`extra`/`create.extra` = HTML brut (responsabilité de l'appelant).
+
+## Tests & exemple
+
+```bash
+npm test         # 5 tests @mostajs/mjs-unit
+npm run example  # panneau complet → examples/out.html
+```
+
+Voir `docs/00-PROPOSITION-PLAN-CRUD-UI-20062026.md` (lot UI-2).

package/llms.txt

@@ -0,0 +1,38 @@
+# @mostajs/crud-ui — llms.txt
+
+RÔLE
+  Panneau CRUD GÉNÉRIQUE (rendu HTML-string, zéro dépendance) : à partir d'un spec déclaratif + de lignes DÉJÀ
+  chargées, produit formulaire de création + table (lien détail + boutons d'action POST). COMPOSE @mostajs/app-shell-ui
+  (table/form/pageTitle/back/esc) — aucune primitive bas-niveau, aucun accès données, aucun effet de bord. Extrait du
+  panel()/createForm()/registre CRUD de incubator/app/server.mjs. Membre de mosta-ui-html-stack (simple répertoire).
+
+PRINCIPE
+  Vue PURE : l'APP charge les données (list/run) et appelle panel(...) ; crud-ui n'ASSEMBLE que le HTML. Conventions de
+  route surchargeables : détail GET routeBase/<id> · action POST routeBase/act/<id> · création POST routeBase/create.
+
+COMPOSE
+  @mostajs/app-shell-ui  OBLIGATOIRE (dep). Fournit table/form/pageTitle/back/esc + thème.
+
+EXPORTS (".", "./html")
+  panel({ title?, sub?, back?={href,label}, note?, rows, cols?, hidden?=['id','_status'], routeBase='',
+          detail?=false|(row)=>href, actions?=[{id,label,show?(row)}], create?={fields,title?,submit?,enctype?,extra?},
+          extra?, empty? }) -> htmlString   // CORPS du panneau (à enrober via app-shell-ui.page())
+  detailLink(href, label?='📋 Fiche') ; actionForm(routeBase, action, row) ; actionsCell(routeBase, actions, row)
+
+DÉTAILS
+  - create.fields = format app-shell-ui `form` ({name,label,type?,value?,required?,options?,list?}) ; l'app résout les
+    options dynamiques en amont. enctype:'multipart/form-data' pour un upload.
+  - detail=true → lien `${routeBase}/${row.id}` (row.id requis) ; detail=(row)=>href pour un href arbitraire.
+  - actions[].show(row) filtre les boutons (gardes de cycle de vie) ; '—' si aucun applicable.
+  - lecture seule = sans create ni actions → simple table (cf. requests/messages).
+
+PIÈGES
+  - panel() retourne le CORPS, pas un document : l'app l'enrobe avec @mostajs/app-shell-ui `page()`.
+  - row.id est requis dès que detail/actions sont utilisés (lien + hidden id).
+  - note/extra/create.extra = HTML BRUT (non échappé) ; routeBase/label/valeurs/id le sont (via app-shell-ui).
+
+EXEMPLE / TEST
+  examples/run.mjs  panneau « entreprises » (create+détail+actions) → page complète → out.html
+  test-scripts/unit/crud-ui.test.mjs  5 tests @mostajs/mjs-unit (helpers, panel complet, lecture seule, detail(fn)/extra/vide, échappement)
+
+LICENCE AGPL-3.0-or-later · Auteur Dr Hamid MADANI <drmdh@msn.com>

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@mostajs/crud-ui",
+  "version": "0.1.0",
+  "description": "Panneau CRUD générique (rendu HTML-string, zéro dépendance) : spec déclaratif + lignes → formulaire de création + table (lien détail + actions POST). Compose @mostajs/app-shell-ui. Membre de mosta-ui-html-stack.",
+  "license": "AGPL-3.0-or-later",
+  "author": "Dr Hamid MADANI <drmdh@msn.com>",
+  "type": "module",
+  "main": "src/html/index.js",
+  "files": [
+    "src",
+    "llms.txt",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": "./src/html/index.js",
+    "./html": "./src/html/index.js"
+  },
+  "keywords": [
+    "mostajs",
+    "ui",
+    "html",
+    "crud",
+    "panel",
+    "ssr",
+    "zero-dependency",
+    "ui-html-stack"
+  ],
+  "dependencies": {
+    "@mostajs/app-shell-ui": "^0.1.0"
+  },
+  "devDependencies": {
+    "@mostajs/mjs-unit": "^0.3.0"
+  },
+  "scripts": {
+    "test": "bash test-scripts/run-tests.sh",
+    "example": "node examples/run.mjs",
+    "clean": "rm -f examples/out.html test-report.html"
+  }
+}

package/src/html/index.js

@@ -0,0 +1,2 @@
+// @mostajs/crud-ui — barrel ./html. Author: Dr Hamid MADANI <drmdh@msn.com>
+export { panel, detailLink, actionForm, actionsCell } from './panel.js';

package/src/html/panel.js

@@ -0,0 +1,43 @@
+// @mostajs/crud-ui — panneau CRUD générique (extrait de panel()/createForm() de server.mjs). Author: Dr Hamid MADANI <drmdh@msn.com>
+// Vue PURE : assemble un panneau (formulaire + table + actions) à partir d'un spec + de lignes DÉJÀ chargées par l'app.
+// COMPOSE @mostajs/app-shell-ui (table/form/pageTitle/back/esc) — aucune primitive bas-niveau ni accès données ici.
+import { esc, table, form, pageTitle, back as backLink } from '@mostajs/app-shell-ui';
+
+/** Lien de détail (cellule de tête de ligne). */
+export function detailLink(href, label = '📋 Fiche') {
+  return `<a href="${esc(href)}" style="color:var(--blue);font-weight:600;text-decoration:none">${esc(label)}</a>`;
+}
+
+/** Mini-formulaire POST pour une action de ligne → `${routeBase}/act/${action.id}`. */
+export function actionForm(routeBase, action, row) {
+  return `<form method="post" action="${esc(routeBase)}/act/${esc(action.id)}"><input type="hidden" name="id" value="${esc(row.id)}"><button class="act">${esc(action.label)}</button></form>`;
+}
+
+/** Cellule d'actions : boutons filtrés par show(row) ; '—' si aucun applicable. */
+export function actionsCell(routeBase, actions, row) {
+  return actions.filter((a) => !a.show || a.show(row)).map((a) => actionForm(routeBase, a, row)).join(' ') || '—';
+}
+
+/**
+ * Panneau CRUD. Retourne le CORPS (à enrober via app-shell-ui.page()).
+ * Voir docs/00-PROPOSITION-PLAN-CRUD-UI-20062026.md pour le spec complet.
+ */
+export function panel({
+  title, sub = '', back, note = '', rows = [], cols, hidden = ['id', '_status'],
+  routeBase = '', detail = false, actions, create, extra = '', empty,
+} = {}) {
+  const parts = [];
+  if (back) parts.push(backLink(back.href, back.label));
+  if (title) parts.push(pageTitle(title, sub));
+  if (note) parts.push(note);
+  if (create) parts.push(form(create.fields, {
+    action: `${routeBase}/create`, method: 'post',
+    title: create.title || '➕ Ajouter', submit: create.submit || 'Créer',
+    enctype: create.enctype, extra: create.extra,
+  }));
+  const lead = detail ? (r) => detailLink(typeof detail === 'function' ? detail(r) : `${routeBase}/${r.id}`) : undefined;
+  const trail = actions ? { header: 'Actions', render: (r) => actionsCell(routeBase, actions, r) } : undefined;
+  parts.push(table(rows, { cols, hidden, lead, trail, empty }));
+  if (extra) parts.push(extra);
+  return parts.join('\n');
+}