[Analyse/POC] migration DSFR

[m-maillot]

Définir ce qui est possible de faire techniquement :

1) est-il possible de migrer seulement certains composants de la page (par exemple le header, ou juste les tooltips, ...)

• OUI/NON
• => solutions techniques
• note : @m-maillot avait déjà avec react-dsfr et ça marchait pas, à tester avec seulement dsfr (css)

2) est-il possible de migrer seulement certaines pages du site ?

• OUI/NON
• => solutions techniques
• pistes : via l'ingress avec 2 sites déployés, via next avec 2 layout différents
• bien tester la navigation entre les pages

3) est-ce qu'avec le site actuel on peut changer le css pour ressembler plus au DSFR :

• même header que le DSFR
• changer juste la police Mariane

4) DSFR css vs react DSFR => pro & con

[Viczei]

Les pros et les cons:	React Dsfr	Css Dsfr
Plus haut niveau	Plus bas niveau
Composants	Html très long
Responsive	Pas de burger menu
Moins de possibilités de customization	Plus de possibilités

Les erreurs à corriger restantes:

• [ ] Header trop petit
• [ ] Il faut parfois double clicker pour accéder à un lien
• [ ] Radio bouton border toujours orange
• [ ] Bouton hover qui est de couleur blanche

Reste à tester: mettre le footer dsfr et faire une page entière avec composant plus complexe en dsfr

[carolineBda]

• comment choisir entre React DSFR et pure CSS
• pourquoi le header ne marche pas ?

[maxgfr]

1. est-il possible de migrer seulement certains composants de la page ?

Possible, mais très énergivore, car le CSS qu'on a en local clash avec celui du DSFR

2. est-il possible de migrer seulement certaines pages du site ?

Totalement, deux pocs ont été fait :

• https://github.com/SocialGouv/code-du-travail-numerique/pull/6007
• https://github.com/SocialGouv/code-du-travail-numerique/pull/6013

On arrive via ces deux pocs faire du dsfr avec notre theme. Chaque pages sont indépendantes

3. est-ce qu'avec le site actuel on peut changer le css pour ressembler plus au DSFR ?

Pour moi, oui, on pourrait uniformiser un header commun sans forcément utiliser nos composants et le DSFR pour harmoniser

4. DSFR css vs react DSFR ?

Les difficultés rencontrées :

-> Pour le @gouvfr , j'ai des soucis de build au niveau de la prod que j'ai pas résolu, sinon en local c'est niquel -> Pour le react-dsfr, j'ai des soucis au niveau du wrapper qui fait que lorsqu'on navigue en utilisant le router next, ça garde l'ancien theme à cause du withDsfr

Pour corriger le react-dsfr, je force le reload lorsqu'on passe d'une page en dsfr à une page en non dsfr afin d'éviter de faire trop de reload inutile. Ci-dessous le code :

 useEffect(() => {
    const handleRouteChange = (url) => {
      const currentPath = router.pathname;
      const newAndCurrentPathAreDsfr =
        DSFR_READY_PATHS.includes(url) &&
        DSFR_READY_PATHS.includes(currentPath);
      const newAndCurrentPathAreNotDsfr =
        !DSFR_READY_PATHS.includes(url) &&
        !DSFR_READY_PATHS.includes(currentPath);
      const needToReload =
        newAndCurrentPathAreDsfr || !newAndCurrentPathAreNotDsfr;
      if (needToReload) {
        window.location.reload();
      }
    };

    router.events.on("routeChangeComplete", handleRouteChange);

    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events, router.pathname]);

Du coup, c'est pas super optimal, j'essaye de voir si on peut le faire plus finement mais j'en ai pas l'impression

[maxgfr]

A priori, le bug ne se produit pas en production, quand on retire le fix avec l'auto reload :

• https://github.com/SocialGouv/code-du-travail-numerique/pull/6014