Skip to content

Latest commit

 

History

History
96 lines (60 loc) · 3.78 KB

README.md

File metadata and controls

96 lines (60 loc) · 3.78 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

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