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 :
• 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

DashedFocusBorder.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

Fin