Comme au semestre précédent, vous allez initialiser votre projet à l'aide de l'outil vite.

Vous créerez un projet React nommé r505-jwt-react, utilisant TypeScript ainsi que le compilateur React. Vous configurerez également ESLint comme outil d'analyse statique (« linter ») du projet.

Vous pourrez ensuite effectuer un nettoyage du projet afin de ne conserver que les éléments indispensables :

• Le CSS sera placé dans un répertoire situé à la racine du projet et sera chargé directement par le document HTML.
• L'application ne contiendra, dans un premier temps, qu'un en-tête, une section principale et un pied de page. Le pied de page devra rester en bas de la fenêtre, quelle que soit la hauteur du contenu affiché.

Vous finaliserez ensuite la mise en place du projet en créant un dépôt Git local dans le répertoire r505-jwt-react. Vous créerez un dépôt distant associé, portant le même nom, puis réaliserez votre premier commit.

Enfin, vous ajouterez votre intervenant de TP comme membre du dépôt distant avec, au minimum, le rôle de Reporter.

Vous vous assurerez d'avoir correctement installé et configuré les outils de qualité de code eslint et Prettier afin d'améliorer la qualité du code de votre projet.

Vous ajouterez le greffon eslint-plugin-sort afin de favoriser l'homogénéité de votre code.

Comme base de configuration pour ESLint, vous utiliserez le fichier « eslint.config.js » (télécharger) . Si la limite de 80 caractères par ligne vous semble trop restrictive, vous pourrez ajouter le fichier de configuration« .prettierrc.json » (télécharger).

Enfin, vous activerez le mode strict dans les deux configurations TypeScript afin de bénéficier d'un contrôle plus rigoureux du typage.

Vous ajouterez ensuite un script npm permettant de vérifier la qualité du code.

Vous veillerez également à intégrer ces outils dans votre IDE afin d'améliorer votre confort de développement.

Pour la suite des TP de ce module, vous vous assurerez que chacun de vos commits respecte les règles définies par ces outils de qualité de code.

Si vous le souhaitez, vous pourrez utiliser husky, un outil comparable à GrumPHP pour l'écosystème JavaScript, afin d'exécuter automatiquement un script npm avant chaque commit. Toutefois, une configuration correcte de votre IDE devrait être suffisante.

Avant de commencer à écrire du CSS, il peut être utile d'installer un « linter » de styles. Au-delà de la détection d'erreurs, cet outil permet notamment d'harmoniser l'organisation des propriétés CSS et de faciliter le suivi de l'évolution de la base de code.

Vous ajouterez donc, comme dépendances de développement, les modules stylelint et stylelint-config-clean-order. Vous utiliserez le fichier de configuration« stylelint.config.mjs » (télécharger).

Vous effectuerez ensuite les ajustements nécessaires dans vos scripts npm afin de permettre la vérification et la correction automatique du code CSS.

Vous commencerez par structurer votre application en la découpant en trois composants :

• l'en-tête de l'application, qui recevra le titre de l'application sous forme d'enfants' ;
• la section principale de l'application ;
• le pied de page de l'application, qui devra toujours être placé en bas de la fenêtre ;

Vous ajouterez ensuite un peu de CSS afin de mettre en couleur l'en-tête et le pied de page de l'application. En vous basant sur la feuille de style CSS fournie par Vite, vous pourrez utiliser les variables CSS.

Pour faire un rapide rappel sur les contextes, vous allez mettre en place un contexte permettant de gérer le thème de l'application (clair/sombre).

Dans cette optique, vous créerez deux scripts :

• « context/ThemeProvider.tsx », qui produira le composant fournissant le contexte du thème à tous ses enfants ;
• « context/useThemeContext.ts », qui exportera le contexte du thème (de manière nommé) ainsi que le hook useThemeContext (par défaut), permettant d'accéder au contexte depuis un composant enfant de ThemeProvider.

Le contexte du thème sera initialisé à null.

Le hook useThemeContext récupérera le contexte du thème, vérifiera qu'il n'est pas null, puis le retournera. Si le contexte est null, une erreur indiquant que le contexte doit être fourni sera levée.

Afin de simplifier le cycle de vie du composant ThemeProvider, vous récupérerez le thème préféré de l'utilisateur en dehors du composant, à l'aide de la fonction matchMedia et de la media query prefers-color-scheme.

Dans le composant, vous stockerez cette valeur dans une variable d'état, que vous fournirez sous la forme d'une propriété de l'objet représentant le contexte du thème. Cet objet sera ensuite fourni comme valeur du contexte par le composant ThemeProvider.

Votre éditeur devrait maintenant vous demander de typer votre code. Pour les types plus complexes, comme celui du contexte du thème, vous devrez définir des types dédiés. En plus de renforcer la robustesse du code, cela améliorera également l'auto-complétion.

Vous ajouterez un nouveau répertoire « types » à votre projet et y créerez les deux fichiers suivants :

• « types/theme.d.ts » (télécharger) , contenant les types utilisés par le contexte du thème ;
• « types/types.d.ts » (télécharger), qui centralisera les différents types et facilitera les imports.

Pour terminer, configurez TypeScript afin qu'il trouve et utilise ces types en modifiant les deux fichiers de configuration suivants :

• « tsconfig.app.json » (télécharger) ;
• « tsconfig.node.json » (télécharger).

Vous pouvez maintenant utiliser le contexte du thème pour afficher le thème préféré de l'utilisateur dans le pied de page de l'application.

Pour l'import de ThemeProvider et de useThemeContext, vous aurez sans doute remarqué l'ajout, dans les configurations TypeScript, du chemin « !context », permettant d'accéder directement au répertoire « context » depuis n'importe quel emplacement du projet. Cependant, pour que vite utilise également ces chemins lors de la compilation de l'application, vous devrez le configurer en conséquence en modifiant le fichier« vite.config.ts » (télécharger).

Votre projet devrait maintenant être fonctionnel et afficher le thème préféré de l'utilisateur dans le pied de page de l'application. Vous pourrez tester son bon fonctionnement à l'aide des outils de développement de votre navigateur, qui permettent de modifier le thème préféré du système.

Vous allez maintenant ajouter, dans le pied de page de l'application, un bouton permettant de changer le thème de l'application.

Le changement de thème sera appliqué en modifiant la classe CSS de l'élément body de la page, qui prendra la valeur « dark » ou « light ».

Vous commencerez par initialiser cette classe avec le thème préféré de l'utilisateur. Vous ajouterez ensuite une fonction au contexte permettant de permuter la valeur de la variable d'état tout en mettant à jour la classe CSS correspondante.

Vous développerez ensuite un composant affichant un bouton permettant de changer le thème du contexte. Ce composant sera intégré au pied de page de l'application.

Vous modifierez également votre CSS afin d'adapter l'apparence de l'application selon le thème sélectionné. Si vous utilisez des variables CSS, il vous suffira généralement d'en redéfinir les valeurs pour chaque thème.

Enfin, vous constaterez que les changements de thème ne sont pas persistants, ce qui nuit à l'expérience utilisateur. Vous mettrez donc en place une persistance du choix de l'utilisateur à l'aide du localStorage, et chargerez en priorité cette valeur si elle existe.