librairie-composant-front v0.0.48
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
Installation via NPM ???
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 avecToastProvider
Table
Installation du Projet
Installation du projet.
git clone git@gitlab.com: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
2 months ago
2 months ago
2 months ago
4 months ago
9 months ago
8 months ago
8 months ago
10 months ago
10 months ago
12 months ago
12 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago