jamespot-react-components 1.3.83 → 1.3.85

package/CLAUDE.md

@@ -0,0 +1,62 @@
+# CLAUDE.md — jamespot-react-components
+
+Design system : composants UI réutilisables, Storybook, conformité RGAA. Consommé via le registre par core et extensions.
+
+## Structure
+
+```
+src/
+├── components/
+│   └── JRC{Name}/
+│       ├── JRC{Name}.tsx         # Composant (préfixe JRC)
+│       ├── JRC{Name}.stories.tsx # Story Storybook
+│       ├── JRC{Name}.styles.tsx  # Optionnel : styled-components séparés
+│       └── JRC{Name}.test.tsx    # Optionnel : test Jest unitaire
+├── hooks/                        # useDebounce, useThemeContext, …
+├── styles/
+│   ├── theme.tsx                 # ThemeType + initTheme()
+│   └── styled-components.d.ts    # Augmentation DefaultTheme
+├── translation/
+│   └── lang.json
+└── types.ts                      # Re-exports des props
+```
+
+## Spécificités
+
+- TS flags : `noImplicitOverride`, `noUnusedLocals`, `noUnusedParameters` (TODO : `exactOptionalPropertyTypes`)
+- Couverture : 100% statements + functions (exclus : `Deprecated/`, `utils/utils.misc.ts`)
+- Build : Vite library (ESM + CJS) avec `vite-plugin-css-injected-by-js` — CSS injecté dans le JS, pas de fichier séparé
+
+### Cycle de vie des composants
+
+| Préfixe / dossier | Statut | Obligation tests |
+|-------------------|--------|------------------|
+| `0-RGAA/Category/` | conforme | tests d'interaction + 100% statement |
+| `untested/` | en cours | doit viser conformité |
+| `BETA_` (dans `Beta/`) | expérimental | aucune |
+| `Deprecated_` (dans `Deprecated/`) | à supprimer | aucune |
+
+### Conventions Storybook spécifiques
+
+- **Stories `0-RGAA/`** : `tags: ['testing']` (filtre du test runner) + `parameters: { mode: 'test' }` obligatoires
+- Spy : `fn()` de `storybook/test`, **jamais** `jest.fn()`
+- Setup : `IntlProvider` (locale: 'en') + `JRCThemeProvider`, portail `<div id="react-modal" />` pour modals, `@storybook/addon-a11y`
+
+### Tokens du thème exposés
+
+`ThemeType` est exporté pour augmentation `DefaultTheme` côté apps. La liste exhaustive des tokens (color/space/size/font/zIndex) est dans `ui/styled-components.md`.
+
+### Scripts spécifiques
+
+- `pnpm storybook` — dev port 6006
+- `pnpm test:jest` — Jest unitaires uniquement (`--runInBand`)
+- `pnpm test:storybook` — interaction tests (lance Storybook automatiquement)
+- `pnpm test` — tout (jest + storybook)
+
+## Voir aussi
+
+- `.claude/rules/frontend/_shared/` — règles universelles
+- `.claude/rules/frontend/ui/` — composants, styled-components, accessibilité, navigation, displayer
+- `.claude/rules/frontend/ui/components.md` — réutilisation, registre, composition Raw/Wrapper
+- `.claude/rules/frontend/ui/styled-components.md` — props transientes, theme, tokens
+- `.claude/rules/frontend/ui/accessibility.md` — RGAA, tests Storybook, helpers (SROnly, SkipToContent)

package/README.md

@@ -1,119 +1,5 @@
-# jamespot-react-components
+# JAMESPOT REACT COMPONENTS
 
-## Install
-
-```
-npm ci
-```
-
-## Usage
-
-```
-// build the bundle
-npm run build
-npm run build-theme
-npm run build-dev-vm
-
-// build the storybook
-npm run build-storybook
-
-// serve the bundle
-npm run local
-```
-
-## Tests et storybook
-
-Le storybook peut-être lancé avec la commande
-
-```
-pnpm storybook
-
-```
-
-Les composants sont répartis en deux grandes catégories dans le storybook:
-
-1. untested/:
-   Tous les composants dans untested/ sont exclus des tests storybook et doivent progressivement être migré vers RGAA et testé.
-
-2. 0-RGAA/:
-   Les composants dans RGAA doivent aussi avoir le tag 'testing' dans leur story et doivent être testé.
-   Toute story ayant le tag 'rgaa' sera exécuté comme test pendant les tests storybook,
-   le coverage sera calculé et devra atteindre 100% pour les statements.
-   Il est aussi attendu de ces composants qu'ils respectent au maximum les règles du RGAA pour l'accessibilité.
-
-Toute story avec le tag 'testing' sera exécutée pendant les tests, et le coverage de ce qu'elle utilise sera calculé.
-
-JRCPublishButton est le premier composant écrit et testé directement avec la nouvelle version de storybook.
-N'hésitez pas à vous en inspirer pour le nouveaux composant aujourd'hui (Mai 2025).
-
-Une fois le storybook lancé, les tests storybook peuvent être lancé avec la commande
-
-```
-pnpm test:storybook
-```
-
-/!\ LE STORYBOOK DOIT ETRE EN COURS D'EXECUTION /!\
-
-Si vous devez développer des utilitaires qui ne sont pas des composants react, ceux-ci doivent se trouver dans un dossier utils
-et faire l'objet de tests jest. Le coverage devra là aussi atteindre 100% pour les statements
-Les tests jest peuvent être exécutés avec la commande:
-
-```
-pnpm test:jest
-```
-
-Vous pouvez lancé l'ensemble des tests et voir le coverage total si le storybook est en cours d'exécution avec
-
-```
-pnpm test:all
-```
-
-Lors d'une merge request, le test-all sera exécuté, un coverage de 100% sera attendu avec tous les tests au vert.
-La même chose sera attendu lors de l'exécution de la pipeline pour une MEP.
-
-La ci utilisera la commande
-
-```
-pnpm test
-```
-
-qui s'occupe de lancer le storybook puis de faire un test:all.
-Cette commande n'est pas adapté au développement local car elle arrête le storybook immédiatement après avoir
-terminé les tests. Mais elle peut être utile pour lancer les tests 1 fois, avant une release par exemple.
-
-## Contributing (Requires updating)
-
-- Les développements sont suivis sur le board [react-components](https://ecosysteme.jamespot.pro/ng/app/boardcard/167684) :
-- La branche develop est protégé
-- Une github action permet de vérifier le build et les tests de chaque branche
-- Les PR ont un template
-
-## Commons
-
-### Component
-
-`Outline.tsx`
-
-The component is intended to be a focus-style wrapper
-
-### Beta Component
-
-Si vous avez besoin de développer un composant qui n'existe pas encore et que vous avez besoin d'en avoir une version minimale, il est primoridal de l'ajouter au dossier "Beta" et de bien préfixer votre composant de BETA_MyComponent
-
-Il est aussi important d'ajouter ce préfix dans la registry de jamespot-react-core !
-
-Il est aussi conseillé d'ajouter un petit texte explicatif //TODO dans le code de votre composant pour informer les autres sur ce qu'il reste à faire.
-
-### Utils for URL
-
-`url.util.ts`
-
-### Utils for colors
-
-`styles/utils.tsx`
-
-### Story for the color theme
-
-`Theme.stories.tsx`
+Ce projet expose les composants UI de jamespot
 
 # Fin