@mostajs/app-shell-ui

Socle UI framework-agnostique (rendu HTML-string, zéro dépendance) — le « design system HTML » pour serveurs node:http.

Auteur : Dr Hamid MADANI [email protected] · Licence : AGPL-3.0-or-later · Membre de mosta-ui-html-stack.

Pendant zéro-dépendance de @mostajs/ui (React) : produit des fragments HTML sûrs (échappés) à partir de view-models. Aucune logique métier, aucun accès données, aucun routage supposé — la vue est pure et déterministe (testable par snapshot, sans navigateur). Extrait de l'app Hadhinat (incubator/app/server.mjs).

Installation

npm install @mostajs/app-shell-ui

Usage

import { page, pageTitle, cards, kpiCard, table, form, money } from '@mostajs/app-shell-ui';

const body = [
  pageTitle('StartupDZ SARL', 'بطاقة المؤسسة'),
  cards([ kpiCard('Facturation', { Loyer: 12000, Total: 21000 }, { fmt: { Loyer: money, Total: money } }) ]),
  table(rows, { trail: { header: 'Action', render: (r) => `<button class="act">${r.act}</button>` } }),
  form([{ name: 'qty', label: 'Quantité', type: 'number', value: 1 }], { action: '/subscribe', title: 'Souscrire' }),
].join('');

const html = page({ title: 'StartupDZ', brand: '🏢 Hadhinat', nav: [{ href: '/', label: 'Architecture' }], body });
// → document HTML complet, prêt à servir via node:http

API

| Groupe | Fonctions | |---|---| | Coquille | page({title, body, brand, nav, footer, suffix, head, theme}) · header · footer · pageTitle(h, sub?) · back(href, label?) · empty(text?) | | Contenu | table(rows, {cols, hidden, cell, lead, trail, empty}) · kpiCard(title, metrics, {fmt}) · card(title, html) · cards([...]) · form(fields, {action, method, title, submit, enctype, extra}) | | Utilitaires | esc(s) · money(n, {currency, locale}) · TOKENS · THEME_CSS |

Sécurité : les valeurs sont échappées par défaut (esc). Les rendus bruts (body, lead, trail, extra, footer) sont sous la responsabilité de l'appelant. Le thème ne porte pas les styles image-map (→ @mostajs/imagemap-ui).

Tests & exemple

npm test         # 7 tests (snapshot/structure)
npm run example  # rend une page complète → examples/out.html

Voir docs/00-PROPOSITION-PLAN-APP-SHELL-UI-20062026.md (lot UI-1) et mostajs/PLAN-EXTRACTION-UI-MODULES-20062026.md.