Skip to content

Latest commit

 

History

History
106 lines (68 loc) · 4.8 KB

README.md

File metadata and controls

106 lines (68 loc) · 4.8 KB
Raw

Frontend documentation

Install

In root folder, install all dependencies (also installs the backend dependencies):

pnpm install

Run local dev, with faked backend

pnpm dev-in-memory

Run local dev, calling backend

pnpm dev

You can typecheck the project with :

pnpm typecheck

If you want to make sure everything is fine before pushing for exemple, you can run :

pnpm fullcheck

The frontend and the backend have some shared code which is located in the shared folder. It is a workspace, used in front and in back

Créer de nouveaux composants front

Le projet Immersion Facilitée se base sur le Système de Design de l'État- DSFR via @codegouvfr/react-dsfr.

DSFR ou composant maison ?

  1. dans la très grosse majorité des cas, si le besoin est suffisamment proche de ce qui est fourni, on voudra implémenter des composants existants via react-dsfr.

  2. dans des cas plus rare de besoin spécifique au projet, on se permettra de créer un composant dans notre lib react-design-system/immersionFacile Ces composants ne sont que des composants de présentation (pas de logique liée à l'app - Redux, appels externes, etc) mais peuvent charger du CSS / Sass custom (via Sass to TS)

Nommage de classes CSS

Le projet utilise la méthodo BEM pour nommage ses blocks custom, préfixés par im + le nom du composant React, le tout en kebab case. Ex : pour le composant HeroHeader, le résultat attendu est .im-hero-header

Pour les éléments et modifiers, nous utiliserons la syntaxe : .my-block__element--modifier, sans profondeur additionnelle, chaque partie étant en kebab case.

Que faire avec le DSFR et comment ? que faire en CSS custom ?

  • le DSFR propose un lot de classes utilitaires qu'il faut utiliser en priorité. Ex : .fr-mt-4w plutôt que margin-top: 3rem.
  • on utilise toujours les classes du DSFR et les classes custom enrobés via les utilitaires de react-dsfr et tss-react fr.cx() et (éventuellement) cx(). Ex: cx(fr.cx("fr-mt-4w"), Styles.imageWrapper)
  • si une règle CSS ne trouve pas d'équivalent dans le DSFR, on peut se permettre de la déclarer en CSS ou Sass custom.

E2E Tests with Playwright

Run locally

  • à la racine du projet
  • pnpm run dev : pour lancer le projet
  • pnpm playwright test:local pour lancer les tests
Linux prerequisites
sudo apt-get update && sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
Report / Trace viewer

Playwright est lancé en CI pour valider nos parcours principaux. En cas de souci, si les tests ne passent pas, il est possible d'accéder au trace viewer de la PR concernée. Par exemple, sur cette PR, le job Playwright tests n'est pas passé. On a un peu de détail dans les annotations faites directement sous le workflow, et en scrollant en bas de page, on a accès au report, à télécharger (zip). Une fois téléchargé :

  • dezipper l'archive (ça doit produire un dossier playwright-report)
  • se placer avec un terminal dans le dossier contenant le dossier playwright-report
  • lancer npx playwright show-report (par défaut, il va aller chercher le dossier playwright-report), mais sinon il est possible de lancer npx playwright show-report my-other-dir
  • le navigateur va s'ouvrir et afficher le report
  • en cliquant sur un test qui a echoué, la trace sera dispo en cliquant sur la miniature en bas de page

Sass to TS

Sass to TS permet de générer des fichiers TS à partir de fichier Sass. C'est un moyen simple et pratique pour s'assurer que les classes que l'on utilise sont toujours employées et prévenir le dev en cas de faute de frappe, autocomplétion ou changement de naming.

Il s'emploie de la façon suivante : pnpm make-styles im-search-page src/app/pages/search/

Dans cet exemple

  • im-search-page est le nom du composant (block) que l'on va utiliser (BEM)
  • src/app/pages/search/ est le path contenant(s) le fichier(s) à convertir en TS

Résultat attendu :

Management de l'état de l'application avec Redux

Documentation