From 787265dd18cf0772f2b0b4a6b46862e4aa1b3406 Mon Sep 17 00:00:00 2001 From: Robin Lopez Date: Wed, 23 Sep 2026 16:41:16 +0200 Subject: [PATCH 1/3] feat: Fix DECISIONS.md packages --- docs/DECISIONS.md | 26 ++++++++++++++++++-------- docs/ROADMAP.md | 15 ++++++++++++--- packages/ui-kit-react-cli/package.json | 5 +---- storybook/docs/GettingStarted.mdx | 3 ++- 4 files changed, 33 insertions(+), 16 deletions(-) diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index e5f1593..9f66b56 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -249,16 +249,26 @@ son propre schéma, en styles en ligne par défaut. Un moteur ne redeviendrait p pour un besoin absent aujourd'hui (tableaux, édition collaborative, mentions), et ce serait alors une décision pour tout le Design System. -## D7, Mode copie : un CLI maison ET un registry compatible shadcn +## D7, Mode copie : un CLI maison, pendant des schematics Angular -**Retenu : les deux.** Un registry statique publié sur Pages à côté du Storybook, plus un -CLI qui apporte ce que le standard ne fait pas. +**Retenu : deux packages, comme le starter Angular.** `@4sh/ui-kit-react`, le package +classique, s'installe en dépendance. `@4sh/ui-kit-react-cli` est le mode copie : il installe +les composants en sources, dans le dépôt du consommateur, libres d'être modifiés. -Le registry rend le kit installable par `npx shadcn add ` sans que nous maintenions un -client. Le CLI apporte l'étape fondation (jetons, styles, Storybook, MCP), le journal de -provenance `ui-kit.json`, et surtout l'`update` qui rejoue un diff fichier par fichier -contre la version installée. Cette dernière logique est la plus mûre du starter Angular, -elle est en Node pur, et elle se réutilise. +Angular copie ses composants par les schematics de `@4sh/ui-kit-schematics`. React n'a pas de +schematics, d'où un CLI Node aux trois mêmes commandes : + +- `init`, le pendant de `ng-add` : dépendances runtime, fondation de styles, chaîne des jetons ; +- `add` : copie un composant et ses dépendances internes (`core/`, autres `ui-*`), imports + réécrits ; +- `update` : rejoue un diff fichier par fichier contre la version installée. Cette logique est + la plus mûre du starter Angular, elle est en Node pur, et elle se réutilise. + +Le journal de provenance `ui-kit.json` garde ce qui a été copié, et depuis quelle version. + +**Écarté le 23 septembre : un registry compatible shadcn.** La première version de D7 +retenait aussi un registry statique publié sur Pages, installable par `npx shadcn add `. +Abandonné, pour s'en tenir au modèle Angular à deux packages. Phase 4. Le paquet est aujourd'hui un squelette marqué `private: true`, pour qu'un `pnpm publish -r` distrait ne publie pas une coquille vide. diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index 0106fb5..0593a31 100644 --- a/docs/ROADMAP.md +++ b/docs/ROADMAP.md @@ -40,7 +40,7 @@ La liste est longue parce que chaque entrée a coûté du temps une fois. | 1 | Le patron, de bout en bout | ✅ terminée (`ui-icon`, puis `ui-button`) | | 2 | Fondation transverse | ✅ terminée (`core/ripple` en dernier) | | 3 | La vague des composants | ✅ 62 sur 62 | -| 4 | Mode copie et registry | ⬜ pas commencée | +| 4 | Mode copie (CLI) | ⬜ pas commencée | | 5 | MCP, doc publique, publication | ⬜ pas commencée | | 6 | Contrôle de parité entre stacks | ⬜ pas commencée | @@ -91,7 +91,7 @@ donc la majorité des écrans d'un projet réel. **Les phases 2 et 3 sont closes le 23 septembre** : les 62 composants sont portés, et `core/ripple`, la dernière brique, a donné la prop `ripple` aux quatorze composants équipés. -La suite du plan est la phase 4, le mode copie et le registry (décision D7) ; sortir un +La suite du plan est la phase 4, le mode copie par CLI (décision D7) ; sortir un `0.1.0` avant, ou non, est une décision à prendre. Restent ouverts, hors du plan : `format:check` absent de la CI (quatre fichiers ont dérivé), @@ -173,7 +173,7 @@ Résumé pour ne pas avoir à ouvrir le fichier. La justification, elle, est dan | D4 | Le sous-chemin public ne porte pas la catégorie : `@4sh/ui-kit-react/ui-button`. | | D5 | SCSS co-localisé, classes publiques stables, CSS porté par le composant. | | D6 | Aucune librairie de composants. Deux dépendances ciblées, un fichier propriétaire chacune. | -| D7 | Mode copie : un CLI maison **et** un registry compatible shadcn. | +| D7 | Mode copie : un CLI maison, pendant des schematics Angular. Registry shadcn écarté. | | D8 | Tests dans un vrai navigateur. Contrôle axe bloquant. | --- @@ -2057,3 +2057,12 @@ React donne la valeur réelle. 32 tests unitaires (15 pour le moteur, 17 pour le contrat des quatorze) et deux stories auditées. **Les phases 2 et 3 sont closes.** La suite du plan est la phase 4, le mode copie. + +### 2026-09-23 : D7 révisée, le registry shadcn écarté + +La première version de D7 prévoyait deux canaux pour le mode copie : un CLI maison, et un +registry statique compatible shadcn (`npx shadcn add `). Le registry est abandonné : le +kit React s'en tient au modèle Angular, un package classique et un package en mode copie, le +CLI jouant le rôle des schematics de `@4sh/ui-kit-schematics` (`init`, `add`, `update`). +`docs/DECISIONS.md`, cette feuille de route, le `package.json` du CLI et la page Getting Started +sont alignés. diff --git a/packages/ui-kit-react-cli/package.json b/packages/ui-kit-react-cli/package.json index 618d8dc..7c7e19a 100644 --- a/packages/ui-kit-react-cli/package.json +++ b/packages/ui-kit-react-cli/package.json @@ -16,9 +16,7 @@ "react", "design-system", "cli", - "ui-kit", - "registry", - "shadcn" + "ui-kit" ], "publishConfig": { "access": "public", @@ -30,7 +28,6 @@ "files": [ "dist", "assets", - "registry", "README.md" ], "scripts": { diff --git a/storybook/docs/GettingStarted.mdx b/storybook/docs/GettingStarted.mdx index 0343f34..b76f41d 100644 --- a/storybook/docs/GettingStarted.mdx +++ b/storybook/docs/GettingStarted.mdx @@ -102,7 +102,8 @@ s'exécute qu'après. ## Mode copie : `@4sh/ui-kit-react-cli` L'installation livre les composants **construits**. Le second mode de consommation les -installe en **sources**, dans votre dépôt, libres d'être modifiées, à la façon de shadcn : +installe en **sources**, dans votre dépôt, libres d'être modifiées, comme les schematics du kit +Angular : poser la fondation, copier les composants choisis, puis proposer leur mise à jour par comparaison après une release du kit. From 05b21ee5ef292db25649242847e6eff4e6f7ec14 Mon Sep 17 00:00:00 2001 From: Robin Lopez Date: Thu, 24 Sep 2026 15:27:27 +0200 Subject: [PATCH 2/3] fix: Fix overlays comportment --- CHANGELOG.md | 30 ++ docs/ROADMAP.md | 60 +++- .../src/core/overlay/overlay.test.tsx | 187 ++++++++++- .../src/core/overlay/use-ui-position.ts | 305 ++++++++++++++---- .../src/forms/ui-label/ui-label.mdx | 5 +- .../src/forms/ui-label/ui-label.stories.tsx | 20 +- .../ui-bottom-sheet/ui-bottom-sheet.tsx | 8 + .../src/layout/ui-drawer/ui-drawer.tsx | 8 + .../src/layout/ui-modal/ui-modal.mdx | 4 + .../src/layout/ui-modal/ui-modal.tsx | 11 + .../src/navigation/ui-menu/ui-menu.tsx | 15 +- storybook/docs/specifications/overlays.mdx | 39 ++- 12 files changed, 604 insertions(+), 88 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c0c0d6..7163273 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -657,6 +657,36 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/), et le p et seul le libellé s'aligne à droite. La SCSS étant reprise du kit Angular à l'octet près, le défaut y est présent à l'identique : voir `docs/DUAL-ENGINE.md`. +- `ui-modal`, `ui-drawer` et `ui-bottom-sheet` : un panneau `contained` ouvert **dès le + montage** volait le focus, et le navigateur faisait défiler la page jusqu'à lui. La page + Overview arrivait ainsi déroulée jusqu'à `ui-modal` (mesuré : 9 397 px). Il fait partie de + la page comme n'importe quelle section : il s'ouvre désormais par l'attribut, qui ne touche + pas au focus, et n'a de toute façon ni calque supérieur, ni arrière-plan, ni piège de focus. + Ouvert plus tard par un déclencheur, il repasse par `show()` et reçoit le focus. +- **Tous les panneaux flottants** (`ui-context-menu`, `ui-popover`, `ui-menu`, `ui-select`, + `ui-tooltip`…) s'ouvraient **décalés vers le haut et la gauche** de la page, puis glissaient + jusqu'à leur place. Mesuré image par image : un menu contextuel 127 px au-dessus du pointeur + en bas de sa page de doc, le popover de l'Overview 331 px au-dessus de son déclencheur. + `useUiPosition` positionnait par `transform: translate()`, et l'échelle d'entrée, une + propriété `scale` individuelle, s'applique par-dessus : elle réduisait les coordonnées + elles-mêmes. La position passe désormais par `top` / `left`, et le panneau **grandit depuis + son ancre** : `transform-origin` vise le pointeur ou le déclencheur, même retourné ou décalé + contre un bord. +- `useUiPosition` : un panneau n'est plus **mesuré avant d'être rendu** dans son calque. En + `display: none`, sa taille est nulle et son parent de positionnement faux ; cette position + était pourtant retenue, et le panneau apparaissait ailleurs avant de sauter à sa place, + selon l'ordre dans lequel les effets React couraient. Fermé, il garde sa dernière position + le temps de sa sortie animée. Les sous-menus en cascade de `ui-menu` attendent aussi leur + position avant d'apparaître, et un point d'ancrage déplacé (menu contextuel pendant un + défilement) ne rebranche plus écouteurs et observateurs à chaque événement. +- `ui-popover`, modal ou non : ouvrir le panneau **ramenait la page tout en haut**. Le focus + se pose avant que la position soit calculée, quand le panneau était encore à l'origine du + document. À sa première ouverture, il attend désormais à l'origine du viewport, en `fixed`. + Corrigé dans `useUiPosition`, donc pour tout panneau flottant focalisé aussi tôt. +- `ui-label` : les stories rendaient un `` natif, sans style, à côté du libellé. Il + est retiré, comme dans le kit Angular : axe ne signale pas un `