kali-front-end v1.2.5

KALI FRONTEND

Stack FrontEnd du projet KALI.

ENVIRONNEMENT

Installer:

• NODE: 20.17.0
  • https://nodejs.org/en
• YARN: 1.22.22
  • Pour installer: npm i -g yarn@1.22.22

INSTALLER ET RUN LE PROJET

⚠️ Le projet ayant été créé avec yarn, il doit être continué avec yarn ⚠️

Pour installer:

yarn

Pour run:

yarn dev

AJOUT DE DEPENDANCES

⚠️ Si besoin d'ajouter une dépendance, demander à un responsable de développement pour s'assurer la compatibilité ou s'il n'y a pas une meilleure dépendance ⚠️

Si besoin de rajouter une nouvelle dépendance :

yarn add NOM_DE_LA_DEPENDANCE

Si besoin de rajouter une nouvelle dépendance DEV:

yarn add -D NOM_DE_LA_DEPENDANCE

PLUGINS IDE

Plusieurs plugins peuvent être utilisé pour le projet, voici ceux à installer:

(les liens sont ceux pour VS CODE, mais les plugins existent aussi pour d'autres IDE, comme webstorm)

eslint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Permettant de mettre en valeur les erreurs et warning de TypeScript directement dans le code. Permettant de les corriger plus facilement.

Bien l'activer dans les settings en vérifiant que Eslint > Format: Enable est bien coché.

prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Permettant de formater le code de la même manière pour tout le monde.

Bien l'activer dans les settings en vérifiant que:

• Editor: Default Formatter est bien mis sur Prettier - Code formatter
• Editor: Format On Save est bien coché

tailwind intellisens

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

https://tailwindcss.com/docs/editor-setup

Permettant d'avoir l'autocomplétion des classes de tailwinds directement dans VS CODE.

tailwind docs

https://marketplace.visualstudio.com/items?itemName=austenc.tailwind-docs

Une autre extension tailwind, pour en avoir la doc en survolant les classes.

ARCHITECTURE DU PROJET

• Fichier à la racine:
  • tailwind.config.js : permet de modifier ou rajouter des variables dans tailwinds. Notamment des couleurs. Exemple: ajouter la variable de couleur primary, et pouvoir faire du text-primary ou bg-primary
  • .env: 2 fichiers environnementales permettant de définir des variables d'environnement selon la PROD ou la DEV

• src

  • assets: Dossier permettant de regrouper les assets, dont notamment les images ou icone. Ainsi que de rajouter du CSS de tailwind si besoin.
  • components: les composants métiers de l'application. Séparer dans des sous dossiers selon le type de fonctionnalité (account, session, candidat, etc...). Tout ces composants seront après utilisé dans les pages de l'application.
  • routing: Système de routing de l'application. Permettant de définir quel composant View est relié à quel URL. Permettra également de gérer les routes privés selon l'authentification ou le role.
  • services: Permet de regrouper les appels backend dans des fichiers de services. Utilisez bien des interfaces dans le sous package interfaces pour type ce que vous envoyez au back ou récupérer du back.
  • shared: Dossier pour regrouper des fichiers utilisés partout dans l'application.
    • components: Permet de créer des composants générique dans l'application, utilisable partout. Exemple: Button, InputText, Table, Modal, etc... ⚠️ ATTENTION ! Ces composants n'ont pas de connotation métier de l'application, simplement utilitaire. Ils n'ont pas de rapport direct avec l'application (ric, session, user, formation, etc...) mais sont des composants génériques que l'on pourra réutiliser dans d'autre application si besoin.
    • constants: Permet de regrouper les constants de l'application pour éviter les erreurs. Notamment pour les URLs.
  • store
  • views : Contient les composants React qui sont dans le routing, c'est à dire qui sont accessible via des urls sur le navigateur. Cela est fait pour faire la composition de la page. Mais les fonctionnalités de la page devront être créer dans des composants dans le package component. ⚠️ Il est IMPORTANT de bien découper vos fonctionnalités. Si votre page contient 3 fonctionnalités il vous faudra 4 composants:
    • La Page (dont le nom finit par View):
      • Composant fonctionnalité 1
      • Composant fonctionnalité 2
      • Composant fonctionnalité 3