Librairie de Composants React × TailwindCSS

Des composants React, stylisés avec TailwindCSS, aux couleurs de Medialex (et de la nouvelle marque).

Installation en tant que Node Module

1. Installation via NPM ???

2. Mise en Place du Plugin TailwindCSS dans le tailwind.config.js

module.exports = {
  content: [
    ...
    "./node_modules/librairie-composant-front/build/**/*.{js,jsx,ts,tsx}"
  ],
  ...
  plugins: [ require('librairie-composant-front/plugin') ],
}

Listes des composants disponibles dans ce Module

• Button
• Input
• InputLabel
• InputIcon
• InputSiret
• Switch
• Textarea
• TextareaLabel
• Toast à utiliser avec ToastProvider
• Table

Installation du Projet

Installation du projet.

  git clone [email protected]:additi/internal/bu-medialex/librairie-composant-front.git
  cd librairie-composant-front/
  npm install

Structure de Projet

Dans ce projet, nous créons des composants React avec TypeScript. Chaque composant est défini dans /src/components/. 1 dossier = 1 ou + components + 1 story + 1 test

/src/stories/ se trouve des Stories, qui peuvent se baser sur plusieurs composants.

/src/utils/, les outils utiles et réutilisables dont les composants peuvent se servir.

/tailwindcss abrite les scripts qui composent par la suite le plugin tailwindCSS : /plugin.js Documentation sur Création d'un plugin TailwindCSS (en)

Build

Le build du projet se fait avec TypeScript (tsc) Il y a 2 phases de Build : l'une pour Builder en format ESmodule, l'autre au format CommonJS.

Pour lancer le build.

  npm run build

Après le build, le dossier /build apparait avec /build/esm et /build/cjs.

Tests

Les tests sont réalisés avec Vitest et @testing-library Documentation Vitest (en) & @Testing-library (en)

Pour lancer les tests avec un Dashboard des tests en cours, passés et failed.

  npm run test

Le rapport se trouve ensuite dans le dossier /coverage à la racine du projet.

Storybook

  npm run storybook

Documentation de Storybook :

• Comment écrire des stories (en)
• Configuration des "ArgTypes Controls" (en)
• Configuration des "Actions" (en)
• Configuration des "Interactions" (en)

Processus de déploiement

• npm run build
• push des modifications
• npm version patch : incrémenter la version de la librairie
• push de la nouvelle version
• npm login (si pas déjà fait précédemment)
• npm publish