From e16644b144b138c83bcdca4d6da24332f5902b71 Mon Sep 17 00:00:00 2001 From: Robin Lopez Date: Wed, 23 Sep 2026 16:20:29 +0200 Subject: [PATCH] feat: add components ui-toggle-block ui-sidebar-menu ui-editor ui-file-upload ui-file-upload-list ui-image ui-sidebar + effect ripple --- CHANGELOG.md | 63 + docs/DECISIONS.md | 15 + docs/DUAL-ENGINE.md | 163 +- docs/ROADMAP.md | 298 +- docs/SECURITY-PRACTICES.md | 55 +- docs/components-index.md | 19 +- eslint.config.mjs | 13 + figma/README.md | 4 +- figma/component-vars.json | 17248 ++++++++++------ packages/ui-kit-react/README.fr.md | 22 +- packages/ui-kit-react/README.md | 22 +- packages/ui-kit-react/package.json | 20 + .../src/actions/ui-button/ui-button.tsx | 11 + .../ui-kit-react/src/base/ui-image/index.ts | 10 + .../src/base/ui-image/ui-image-preview.tsx | 369 + .../src/base/ui-image/ui-image-svg.test.tsx | 120 + .../src/base/ui-image/ui-image-svg.tsx | 129 + .../src/base/ui-image/ui-image.mdx | 202 + .../src/base/ui-image/ui-image.scss | 277 + .../src/base/ui-image/ui-image.stories.tsx | 186 + .../src/base/ui-image/ui-image.test.tsx | 414 + .../src/base/ui-image/ui-image.tsx | 481 + .../ui-kit-react/src/core/ripple/index.ts | 23 + .../core/ripple/ripple-components.test.tsx | 238 + .../src/core/ripple/ripple-engine.ts | 170 + .../ui-kit-react/src/core/ripple/ripple.mdx | 377 + .../src/core/ripple/ripple.stories.tsx | 108 + .../src/core/ripple/ripple.test.tsx | 304 + .../ui-kit-react/src/core/ripple/ripple.tsx | 140 + .../forms/ui-autocomplete/ui-autocomplete.tsx | 8 + .../src/forms/ui-datepicker/ui-datepicker.tsx | 11 + .../ui-kit-react/src/forms/ui-editor/index.ts | 20 + .../src/forms/ui-editor/ui-editor-commands.ts | 707 + .../ui-editor/ui-editor-sanitize.test.ts | 116 + .../src/forms/ui-editor/ui-editor-sanitize.ts | 260 + .../src/forms/ui-editor/ui-editor.mdx | 212 + .../src/forms/ui-editor/ui-editor.scss | 327 + .../src/forms/ui-editor/ui-editor.stories.tsx | 274 + .../src/forms/ui-editor/ui-editor.test.tsx | 399 + .../src/forms/ui-editor/ui-editor.tsx | 690 + .../src/forms/ui-file-upload/index.ts | 30 + .../ui-file-upload/ui-file-upload-list.mdx | 74 + .../ui-file-upload/ui-file-upload-list.scss | 178 + .../ui-file-upload-list.stories.tsx | 77 + .../ui-file-upload-list.test.tsx | 110 + .../ui-file-upload/ui-file-upload-list.tsx | 131 + .../forms/ui-file-upload/ui-file-upload.mdx | 252 + .../ui-file-upload.model.test.ts | 37 + .../ui-file-upload/ui-file-upload.model.ts | 93 + .../forms/ui-file-upload/ui-file-upload.scss | 263 + .../ui-file-upload/ui-file-upload.stories.tsx | 267 + .../ui-file-upload/ui-file-upload.test.tsx | 644 + .../forms/ui-file-upload/ui-file-upload.tsx | 689 + .../ui-segment-control/ui-segment-control.tsx | 7 + .../src/forms/ui-select/ui-select.test.tsx | 10 + .../src/forms/ui-select/ui-select.tsx | 11 + .../forms/ui-toggle-block/ui-toggle-block.tsx | 7 + .../ui-toggle-button/ui-toggle-button.tsx | 8 + .../ui-bottom-tab-bar/ui-bottom-tab-bar.tsx | 23 +- .../ui-context-menu/ui-context-menu.tsx | 4 + .../src/navigation/ui-menu/ui-menu.tsx | 13 +- .../src/navigation/ui-sidebar/index.ts | 26 + .../ui-sidebar/ui-sidebar-menu.scss | 288 + .../ui-sidebar/ui-sidebar-menu.test.tsx | 274 + .../navigation/ui-sidebar/ui-sidebar-menu.tsx | 434 + .../src/navigation/ui-sidebar/ui-sidebar.mdx | 363 + .../src/navigation/ui-sidebar/ui-sidebar.scss | 243 + .../ui-sidebar/ui-sidebar.stories.tsx | 464 + .../navigation/ui-sidebar/ui-sidebar.test.tsx | 411 + .../src/navigation/ui-sidebar/ui-sidebar.tsx | 564 + .../src/navigation/ui-tabs/ui-tabs.tsx | 10 + .../src/styles/component-vars.scss | 254 +- .../src/table/ui-paginator/ui-paginator.tsx | 8 + scripts/components.check.mjs | 3 +- storybook/docs/Overview.mdx | 8 + .../public/assets/img/common/logo/logo.svg | 4 + storybook/ripple-toolbar.ts | 24 +- 77 files changed, 24492 insertions(+), 6339 deletions(-) create mode 100644 packages/ui-kit-react/src/base/ui-image/index.ts create mode 100644 packages/ui-kit-react/src/base/ui-image/ui-image-preview.tsx create mode 100644 packages/ui-kit-react/src/base/ui-image/ui-image-svg.test.tsx create mode 100644 packages/ui-kit-react/src/base/ui-image/ui-image-svg.tsx create mode 100644 packages/ui-kit-react/src/base/ui-image/ui-image.mdx create mode 100644 packages/ui-kit-react/src/base/ui-image/ui-image.scss create mode 100644 packages/ui-kit-react/src/base/ui-image/ui-image.stories.tsx create mode 100644 packages/ui-kit-react/src/base/ui-image/ui-image.test.tsx create mode 100644 packages/ui-kit-react/src/base/ui-image/ui-image.tsx create mode 100644 packages/ui-kit-react/src/core/ripple/index.ts create mode 100644 packages/ui-kit-react/src/core/ripple/ripple-components.test.tsx create mode 100644 packages/ui-kit-react/src/core/ripple/ripple-engine.ts create mode 100644 packages/ui-kit-react/src/core/ripple/ripple.mdx create mode 100644 packages/ui-kit-react/src/core/ripple/ripple.stories.tsx create mode 100644 packages/ui-kit-react/src/core/ripple/ripple.test.tsx create mode 100644 packages/ui-kit-react/src/core/ripple/ripple.tsx create mode 100644 packages/ui-kit-react/src/forms/ui-editor/index.ts create mode 100644 packages/ui-kit-react/src/forms/ui-editor/ui-editor-commands.ts create mode 100644 packages/ui-kit-react/src/forms/ui-editor/ui-editor-sanitize.test.ts create mode 100644 packages/ui-kit-react/src/forms/ui-editor/ui-editor-sanitize.ts create mode 100644 packages/ui-kit-react/src/forms/ui-editor/ui-editor.mdx create mode 100644 packages/ui-kit-react/src/forms/ui-editor/ui-editor.scss create mode 100644 packages/ui-kit-react/src/forms/ui-editor/ui-editor.stories.tsx create mode 100644 packages/ui-kit-react/src/forms/ui-editor/ui-editor.test.tsx create mode 100644 packages/ui-kit-react/src/forms/ui-editor/ui-editor.tsx create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/index.ts create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.mdx create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.scss create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.stories.tsx create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.test.tsx create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.tsx create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.mdx create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.model.test.ts create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.model.ts create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.scss create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.stories.tsx create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.test.tsx create mode 100644 packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.tsx create mode 100644 packages/ui-kit-react/src/navigation/ui-sidebar/index.ts create mode 100644 packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.scss create mode 100644 packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.test.tsx create mode 100644 packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.tsx create mode 100644 packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.mdx create mode 100644 packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.scss create mode 100644 packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.stories.tsx create mode 100644 packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.test.tsx create mode 100644 packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.tsx create mode 100644 storybook/public/assets/img/common/logo/logo.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e6319c..0c0c0d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,69 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/), et le p `utils.overlay-motion` s'il vit dans le calque supérieur, `useUiMotion` s'il quitte le DOM. C'est la question qu'on se pose en vrai, et elle n'était écrite nulle part. +- `core/ripple` (`@4sh/ui-kit-react/ripple`) : l'onde de pression. `UiRippleProvider` l'active + pour toute l'application, `useUiRippleScope()` pour un sous-arbre, `useUiRipple()` pour un + élément, et `launchRipple()` la lance sans pression. Elle se règle par les seules propriétés + `--ui-ripple-*`, et respecte le mouvement réduit comme `data-motion="off"`. Les quatorze + composants équipés, `ui-button`, `ui-menu`, `ui-context-menu`, `ui-sidebar-menu`, `ui-tabs`, + `ui-bottom-tab-bar`, `ui-paginator`, `ui-select`, `ui-autocomplete`, `ui-datepicker`, + `ui-toggle-button`, `ui-segment-control`, `ui-toggle-block` et `ui-file-upload`, reçoivent + une prop `ripple`, vraie par défaut : sans activation, elle ne produit rien. + +- `ui-editor` : champ de texte riche, sur un `contenteditable` et les commandes d'édition + natives du navigateur, **sans moteur tiers** : le kit reste à ses deux dépendances. Police, + taille, couleurs et surlignage s'écrivent en classes adossées aux jetons, alignement, + listes, retrait, lien et bloc de code en balisage. La valeur est du HTML, nettoyé par + `sanitizeHtml`, le portage du `DomSanitizer` d'Angular, exporté pour l'afficher ailleurs. + + Trois écarts avec le kit Angular, déclarés à corriger de son côté : il perd l'alignement et + le retrait quand une valeur enregistrée lui revient ; recolorer un passage qui contient un + mot déjà coloré laissait ce mot inchangé ; et appliquer une police, une taille ou une + couleur désélectionnait le texte. Au passage, `ui-select` transmet `tabIndex` à son + déclencheur. + +- `ui-sidebar` : barre latérale applicative. Statique, elle pousse le contenu et se replie en + rail d'icônes, qui peut flotter ouvert au survol et au focus ; superposée, c'est un + `` natif, avec son voile, son piège de focus et `Échap`. Elle passe de l'une à + l'autre sous un point de rupture (`responsive`). En-tête et pied reçoivent l'état de la + barre. Livre `ui-sidebar-menu`, menu déclaratif à sections, groupes repliables et entrée + courante, et `useUiSidebarTrigger()` pour un déclencheur placé hors de la barre, sous + `UiSidebarProvider`. + + Deux écarts avec le kit Angular, déclarés à corriger de son côté : il pose `aria-modal` + sur un `