@starterlib/ui 0.3.0 → 0.5.0

package/README.md

@@ -14,22 +14,24 @@ des dependances de pair : c'est l'application qui les installe, et elles doivent
 etre **identiques dans l'hote et dans chaque remote**. Deux versions du socle
 dans le meme navigateur, ce sont deux jeux de jetons d'injection.
 
-## Trois points d'entree
+## Quatre points d'entree
 
 Un composant sort du tronc quand il traine un pair lourd, et seulement alors ;
 le point d'entree secondaire ou il va se choisit ensuite par ce qu'il EST pour
 qui l'emploie.
 
-| Point d'entree                | Contenu                                                                                    | Ce qu'il traine                                    | Gzippe  |
-| ----------------------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------- | ------- |
-| `@starterlib/ui`              | le tronc : etats, texte, actions, structure, transverses                                   | `@angular/router`, deja exige par `core`           | 22,4 Ko |
-| `@starterlib/ui/surfaces`     | ce qui se pose AU-DESSUS de la page : menu, dialogues, tiroirs, messages ephemeres         | `@angular/cdk`, `@angular/aria/menu`               | 7,1 Ko  |
-| `@starterlib/ui/interactions` | ce qui fait PARTIE de la page et traine Aria ou une surface : onglets, navigation laterale | `@angular/aria`, qui exige lui-meme `@angular/cdk` | 2,0 Ko  |
+| Point d'entree                | Contenu                                                                                                     | Ce qu'il traine a l'execution                      | Gzippe  |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------- |
+| `@starterlib/ui`              | le tronc : etats, texte, actions, structure, transverses, saisie native, calendrier, listes et tableaux     | `@angular/router`, deja exige par `core`           | 48,8 Ko |
+| `@starterlib/ui/surfaces`     | ce qui se pose AU-DESSUS de la page : menu, dialogues, tiroirs, messages ephemeres                          | `@angular/cdk`, `@angular/aria/menu`               | 9,7 Ko  |
+| `@starterlib/ui/interactions` | ce qui fait PARTIE de la page et traine Aria ou une surface : onglets, navigation laterale, combobox, arbre | `@angular/aria`, qui exige lui-meme `@angular/cdk` | 8,1 Ko  |
+| `@starterlib/ui/formulaires`  | les champs qui LISENT leur saisie : montant, date, plage de dates                                           | le code d'`@angular/forms` (`transformedValue`)    | 4,5 Ko  |
 
 ```ts
-import { StButton, StAppShell } from '@starterlib/ui';
+import { StButton, StInput, StSelect } from '@starterlib/ui';
 import { StDialog, StToast } from '@starterlib/ui/surfaces';
-import { StTabs, StTabPanel, StTabContent } from '@starterlib/ui/interactions';
+import { StTabs, StCombobox, StMultiselect } from '@starterlib/ui/interactions';
+import { StAmountField, StDateField } from '@starterlib/ui/formulaires';
 ```
 
 ⚠️ Un paquet partage en federation **ne s'elague pas** : declare singleton, il
@@ -38,17 +40,21 @@ pour but le poids, mais le **train de singletons** : une application qui
 n'affiche ni menu, ni dialogue, ni onglets ne charge ni le CDK ni Aria, et n'a
 pas a se redeployer quand ils montent de version.
 
-`@angular/cdk` et `@angular/aria` sont des pairs **optionnels** : le tronc ne les
-importe pas. Ils deviennent obligatoires des le premier import d'un point
-d'entree secondaire, et leur absence se voit alors a la resolution, pas a
-l'execution. ⚠️ `@angular/aria` exige `@angular/cdk` a la version EXACTE : les
-deux montent ensemble.
+`@angular/cdk`, `@angular/aria` et `@angular/forms` sont des pairs
+**optionnels** : le tronc n'en importe que des TYPES. Ils deviennent obligatoires
+des le premier import d'un point d'entree secondaire qui les emploie, et leur
+absence se voit alors a la resolution, pas a l'execution. ⚠️ `@angular/aria`
+exige `@angular/cdk` a la version EXACTE : les deux montent ensemble.
 
-⚠️ **En federation, chaque point d'entree se partage SEPAREMENT.** Ce sont trois
-specificateurs de module distincts : partager `@starterlib/ui` ne couvre ni
-`surfaces` ni `interactions`. Omis de la configuration, chaque remote en embarque
-sa propre copie — et la regle `singleton: true, strictVersion: true` qui protege
-le tronc ne protege plus rien au-dessus.
+Ce que chaque point d'entree importe a l'execution est verifie sur le paquet
+construit (`pnpm paquets:check`) : un import de trop dans le tronc echoue avant
+la publication.
+
+⚠️ **En federation, chaque point d'entree se partage SEPAREMENT.** Ce sont quatre
+specificateurs de module distincts : partager `@starterlib/ui` ne couvre aucun
+des trois autres. Omis de la configuration, chaque remote en embarque sa propre
+copie — et la regle `singleton: true, strictVersion: true` qui protege le tronc
+ne protege plus rien au-dessus.
 
 ```js
 // federation.config.mjs de l'hote ET de chaque remote
@@ -56,6 +62,7 @@ shared: {
   '@starterlib/ui': { singleton: true, strictVersion: true },
   '@starterlib/ui/surfaces': { singleton: true, strictVersion: true },
   '@starterlib/ui/interactions': { singleton: true, strictVersion: true },
+  '@starterlib/ui/formulaires': { singleton: true, strictVersion: true },
   // ...
 }
 ```
@@ -148,8 +155,74 @@ Vague 2 :
 - **`ui/interactions`** — `st-tabs`, `st-tab-panel`, `stTabContent`, `st-sidenav`,
   `stSidenavToggle`.
 
-Inventaire et regles de la suite : `docs/plan-librairie.md` et
-`docs/audit-vague-2-2026-09-17.md` du depot.
+Vague 3 — la saisie, sur Signal Forms :
+
+- **Tronc** — `st-form-field`, `st-input`, `st-textarea`, `st-fieldset`,
+  `st-checkbox`, `st-radio-group`, `st-switch`, `st-error-summary`,
+  `st-password-field`, `st-otp-field`, `st-search-field`, `st-iban-field`,
+  `st-phone-field`, `st-select` (natif), `st-file-upload`, `st-calendar` ;
+  messages d'erreur traduits et fonctions de schema (`erreurIban`,
+  `erreurTelephone`, `erreurDate`, `erreurPlageDeDates`, `erreursDeFichiers`).
+- **`ui/interactions`** — `st-combobox`, `st-multiselect`.
+- **`ui/formulaires`** — `st-amount-field`, `st-date-field`, `st-date-range`.
+
+Un champ s'emploie avec un formulaire, par `[formField]`, ou seul, par
+`[(value)]`. Les regles d'un schema sont des fonctions PURES du socle, a brancher
+par `validate` : les fournir toutes faites importerait `@angular/forms` a
+l'execution dans le tronc.
+
+```ts
+readonly virement = form(this.modele, (chemin) => {
+  required(chemin.beneficiaire);
+  validate(chemin.iban, ({ value }) => erreurIban(value()));
+  validate(chemin.execution, ({ value }) => erreurDate(value(), { min: aujourdHui }));
+});
+```
+
+Vague 4 — listes et tableaux, au contrat du backend (curseur vers l'avant, sans
+total ni tri serveur) :
+
+- **Tronc** — `st-data-table` (`stCellule`, `stTableauVide`, `stActionsDeTableau`),
+  `st-sort-header`, `st-pagination`, `st-list` (`stElementDeListe`),
+  `st-description-list` (`stDescription`), `st-filter-bar`, `st-filter-chip`.
+- **`ui/interactions`** — `st-tree`.
+- **`@starterlib/core`** — `NavigationParCurseur` ; **`@starterlib/util`** —
+  `PageParCurseur<T>`.
+
+```ts
+readonly navigation = new NavigationParCurseur();
+readonly page = httpResource<PageParCurseur<Expedition>>(() => ({
+  url: '/api/v1/expeditions',
+  params: this.navigation.parametres(),
+}));
+```
+
+```html
+<st-data-table
+  #tableau
+  legende="Expeditions"
+  cle="id"
+  [colonnes]="colonnes"
+  [lignes]="page.value()?.content ?? []"
+  [chargement]="page.isLoading()"
+>
+  <ng-template stCellule="reference" [stCelluleDe]="page.value()?.content" let-ligne>
+    <a [routerLink]="['/expeditions', ligne.id]">{{ ligne.reference }}</a>
+  </ng-template>
+</st-data-table>
+<st-pagination
+  [cible]="tableau"
+  [numero]="navigation.numeroDePage()"
+  [precedenteDisponible]="navigation.precedenteDisponible()"
+  [suivanteDisponible]="page.value()?.hasMore ?? false"
+  [chargement]="page.isLoading()"
+  (precedente)="navigation.precedente()"
+  (suivante)="navigation.suivante(page.value())"
+/>
+```
+
+Inventaire et regles de la suite : `docs/plan-librairie.md` et les audits de
+vague (`docs/audit-vague-2-…`, `-3-…`, `-4-2026-09-17.md`) du depot.
 
 ## Regles tenues par les composants
 

package/assets/icones/sprite.svg

@@ -6,6 +6,7 @@
      color, jamais par un attribut de gabarit. -->
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
   <symbol id="boite-vide" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></symbol>
+  <symbol id="calendrier" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></symbol>
   <symbol id="cercle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></symbol>
   <symbol id="cercle-coche" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></symbol>
   <symbol id="cercle-croix" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></symbol>
@@ -18,6 +19,7 @@
   <symbol id="copie" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></symbol>
   <symbol id="corbeille" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></symbol>
   <symbol id="croix" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></symbol>
+  <symbol id="fichier" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></symbol>
   <symbol id="hors-ligne" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.58 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></symbol>
   <symbol id="lien-externe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></symbol>
   <symbol id="menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></symbol>
@@ -27,6 +29,8 @@
   <symbol id="rafraichir" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></symbol>
   <symbol id="recherche" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></symbol>
   <symbol id="serveur" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></symbol>
+  <symbol id="televerser" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></symbol>
+  <symbol id="tri" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 9 12 4 17 9"/><polyline points="7 15 12 20 17 15"/></symbol>
   <symbol id="triangle-alerte" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></symbol>
   <symbol id="utilisateur" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
 </svg>