From 8a95526a3c7354298ead0c9a2c6cef06f4832158 Mon Sep 17 00:00:00 2001 From: Robin Lopez Date: Tue, 25 Aug 2026 08:34:51 +0200 Subject: [PATCH 1/5] docs(storybook): Add folder base --- projects/ui-kit/base/ui-icon/ui-icon.stories.ts | 2 +- projects/ui-kit/base/ui-image/ui-image.stories.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/ui-kit/base/ui-icon/ui-icon.stories.ts b/projects/ui-kit/base/ui-icon/ui-icon.stories.ts index a913fc5f..baf6231b 100644 --- a/projects/ui-kit/base/ui-icon/ui-icon.stories.ts +++ b/projects/ui-kit/base/ui-icon/ui-icon.stories.ts @@ -3,7 +3,7 @@ import { applicationConfig, moduleMetadata } from '@storybook/angular'; import { UiIcon, UiIconFamilyScope, provideUiIconFamilies } from '@4sh/ui-kit/base/ui-icon'; const meta: Meta = { - title: 'Components/ui/ui-icon', + title: 'Components/ui/base/ui-icon', component: UiIcon, decorators: [moduleMetadata({ imports: [UiIcon] })], parameters: { layout: 'centered' }, diff --git a/projects/ui-kit/base/ui-image/ui-image.stories.ts b/projects/ui-kit/base/ui-image/ui-image.stories.ts index 33ba41b8..e3c47bd9 100644 --- a/projects/ui-kit/base/ui-image/ui-image.stories.ts +++ b/projects/ui-kit/base/ui-image/ui-image.stories.ts @@ -90,7 +90,7 @@ class StorybookWrapper { // --- 4. CONFIGURATION --- const meta: Meta = { - title: 'Components/ui/ui-image', + title: 'Components/ui/base/ui-image', component: StorybookWrapper, decorators: [ applicationConfig({ From 89a37f7777143b22f0bde24c02965129a01b9737 Mon Sep 17 00:00:00 2001 From: Robin Lopez Date: Tue, 25 Aug 2026 09:14:06 +0200 Subject: [PATCH 2/5] docs(storybook): Fix align stories ui-datepicker two months --- .../forms/ui-datepicker/ui-datepicker.stories.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/projects/ui-kit/forms/ui-datepicker/ui-datepicker.stories.ts b/projects/ui-kit/forms/ui-datepicker/ui-datepicker.stories.ts index 5889dcc0..efc62c6b 100644 --- a/projects/ui-kit/forms/ui-datepicker/ui-datepicker.stories.ts +++ b/projects/ui-kit/forms/ui-datepicker/ui-datepicker.stories.ts @@ -642,8 +642,17 @@ export const YearPicker: Story = { // Plusieurs mois côte à côte (numberOfMonths). export const TwoMonths: Story = { - render: story(new Date(2026, 6, 8)), - args: { inline: true, numberOfMonths: 2, label: 'Deux mois' }, + render: () => ({ + props: { model: new Date(2026, 6, 8), inline: true, numberOfMonths: 2, label: 'Deux mois', valueType: 'date', dateFormat: demoDateFormat }, + template: ``, + }), + parameters: { layout: 'centered' }, }; // Barre de boutons personnalisée via le template #buttonbar (contexte todayCallback / clearCallback). From d8a127ad99e9ce95669a19f439b6735967372fc8 Mon Sep 17 00:00:00 2001 From: Robin Lopez Date: Tue, 25 Aug 2026 09:19:09 +0200 Subject: [PATCH 3/5] docs(storybook): Fix align stories ui-toast two months --- .../informative/ui-toast/ui-toast.stories.ts | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/projects/ui-kit/informative/ui-toast/ui-toast.stories.ts b/projects/ui-kit/informative/ui-toast/ui-toast.stories.ts index c6ef1fbd..0f9cc4b4 100644 --- a/projects/ui-kit/informative/ui-toast/ui-toast.stories.ts +++ b/projects/ui-kit/informative/ui-toast/ui-toast.stories.ts @@ -363,19 +363,18 @@ export const Default: Story = { render: (args) => ({ props: args, template: ` -
- -
+ `, }), + parameters: { layout: 'centered' }, }; /** Usage nominal : un bouton pousse un toast via le service. */ From 2b5f205c15840882c12a33c8bbc448fd1c0aa8ef Mon Sep 17 00:00:00 2001 From: Robin Lopez Date: Tue, 25 Aug 2026 10:12:29 +0200 Subject: [PATCH 4/5] docs(storybook): FSHSP-164 Add logo for storybook package schematics --- scripts/schematics-assets.build.mjs | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/scripts/schematics-assets.build.mjs b/scripts/schematics-assets.build.mjs index c04ae90c..109b3754 100644 --- a/scripts/schematics-assets.build.mjs +++ b/scripts/schematics-assets.build.mjs @@ -314,6 +314,18 @@ function main() { docFiles++; } + const logoImages = [ + 'storybook-projet-logo.png', + 'storybook-projet-logo-white.png', + ]; + for (const name of logoImages) { + const src = join(ROOT, 'storybook/public', name); + if (!existsSync(src)) continue; + mkdirSync(join(ASSETS, 'storybook/public'), { recursive: true }); + copyFileSync(src, join(ASSETS, 'storybook/public', name)); + docFiles++; + } + // Serveur MCP compagnon (FSHSP-115) : bundlé (esbuild, un seul fichier ESM, // zéro dépendance) puis copié tel quel — c'est CE dossier que `ng-add` // recopiera chez le consommateur (`.ui-kit-mcp/`), jamais publié à part. From 1a9e25646d651b5266324159af5f1bb5a4050290 Mon Sep 17 00:00:00 2001 From: Robin Lopez Date: Tue, 25 Aug 2026 11:04:05 +0200 Subject: [PATCH 5/5] feat(schematics): FSHSP-164 Adjust generate folder assets --- CHANGELOG.md | 12 +- projects/ui-kit-schematics/README.fr.md | 30 ++ projects/ui-kit-schematics/README.md | 24 ++ .../src/ng-add/files/main.scss | 4 + .../src/ng-add/files/variables.scss | 10 +- .../ui-kit-schematics/src/ng-add/index.ts | 272 ++++++++++++++++-- .../src/utils/component-registry.ts | 9 + scripts/schematics-assets.build.mjs | 45 ++- 8 files changed, 372 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9da9db9e..7ae2c4b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,12 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr ### Added +- **`ng add @4sh/ui-kit-schematics` pose l'arborescence d'assets maison** (FSHSP-164). `src/assets/` ne recevait qu'un `assets-map.json` vide, et seulement si `ui-image` faisait partie des composants copiés : le consommateur héritait de composants qui résolvent `assets/img/{marque}/{type}/…` sans un seul dossier pour les accueillir, ni rien qui dise où déposer une police ou un favicon. La fondation pose désormais `fonts/{police,icon}/` et `img/{common,brand1,brand2,brand3}/{jpg,png,svg}/` (les dossiers vides portent un `.gitkeep` — ni git ni un `Tree` de schematic ne livre un dossier sans fichier), un `src/assets/README.md` qui documente la convention et le format de l'`assets-map.json`, et l'`assets-map.json` lui-même quels que soient les composants choisis. Les sous-dossiers `light/`/`dark/` ne sont pas échafaudés : ils sont l'exception, et le README dit où les créer. + - **`src/assets` est enfin déclaré au builder** (`assets` de la cible `build`, et de `test` quand elle est en Karma), en s'AJOUTANT au `public/` d'`ng new` plutôt qu'en le remplaçant. Sans cette entrée, tout ce que le kit résout sous `/assets/` répondait 404 dans l'application — `ui-image` tombant alors sur son placeholder sans rien dire de la cause. Les cibles `storybook`/`build-storybook` reprennent maintenant les assets de `build` au lieu de recoder la leur : la preview était le seul endroit où `/assets/` était servi, et elle y perdait au passage le `public/` du projet. Le `README.md` et les `.gitkeep` sont exclus du build (`ignore`). + - **Deux fichiers sont fournis, le reste est un emplacement vide** : les **drapeaux** SVG (`img/common/svg/flags/`), génériques et codés en dur par la story `ui-input-group` — sans eux, son indicatif téléphonique affichait une image cassée chez le consommateur — et un **favicon** placeholder, sur lequel le `` de l'`index.html` est pointé, uniquement s'il porte encore le `favicon.ico` d'`ng new` (jamais par-dessus un `href` choisi par le projet). L'ancien `public/favicon.ico` est laissé sur le disque, simplement plus référencé. + - **Aucun fichier de police n'est livré**, ni aucune fixture de démo : 2,2 Mo de `.ttf` de marque (dans un format qui n'est même pas celui que notre doc recommande) et 428 Ko de visuels de test arriveraient chez le consommateur comme du bruit à supprimer. À la place, un scaffold `src/styles/vendors/_fonts.scss` — mixin `variable-font`, exemple commenté, déjà `@use` par `main.scss`, et qui n'émet rien tant que rien n'est décommenté — plus la recette complète dans `src/assets/README.md`. + - Corrigé au passage : les chemins d'assets du scaffold `src/styles/variables.scss` pointaient vers `../assets/images/`, un dossier qui n'a jamais existé (l'arborescence dit `img/`), et il manquait `$path-police`. + - **Les champs à boîte acceptent un mode `floatLabel`, avec ses trois variantes** (FSHSP-157). Le libellé n'avait qu'une place possible, au-dessus du champ : un formulaire dense n'avait pas d'autre levier que de le retirer et de rabattre l'information sur le `placeholder`, qui disparaît à la première frappe et n'est pas un libellé pour un lecteur d'écran. `floatLabel` le fait descendre **dans** le champ, où il tient le rôle du placeholder, et remonter au focus, dès qu'une valeur est présente, tant qu'un panneau ouvert retient le champ (un déclencheur comme `ui-datepicker` confie le focus à son calendrier sans cesser d'être actif), ou sur autofill du navigateur (qui ne déclenche aucun évènement de saisie). Trois positions hautes, alignées sur celles de PrimeNG : `over` (au-dessus de la boîte), `in` (bande réservée en haut de la boîte, qui grandit d'autant pour que la rangée du contrôle garde sa hauteur) et `on` (à cheval sur le trait, qu'il entaille). Disponible sur les huit champs bâtis sur le shell `ui-field` : `ui-input`, `ui-textarea`, `ui-select`, `ui-autocomplete`, `ui-input-number`, `ui-input-mask`, `ui-input-tags` et `ui-datepicker` (qui le transmet à son déclencheur). L'input est porté par `BaseFormField`, donc un champ écrit sur cette base l'hérite sans code supplémentaire. Non renseigné, rien ne change : le libellé classique reste le défaut, sur tous les champs. - Le libellé flottant reste un `