HRNet Components Library

Cette librairie regroupe trois composants principaux, accessibles sur npm sous forme de package :

1. DatePicker
   Permet de saisir une date, d’ouvrir un calendrier interactif et de transmettre la valeur sélectionnée via un champ caché.

   • Propriétés :
     • name?: string
     • value?: string (valeur initiale, format "JJ/MM/AAAA")
     • placeholder?: string
     • onChange?: (value: string) => void
   • Affiche un champ texte, un bouton pour ouvrir le calendrier, et insère automatiquement un champ <input type="hidden"> pour la soumission en formulaire.

2. CustomSelect
   Un sélecteur personnalisable permettant de choisir une option et de la transmettre via un champ caché.

   • Propriétés :
     • options: T[]
     • defaultValue?: T
     • placeholder?: string
     • name?: string
     • onOptionChange?: (value: T) => void
   • Permet de sélectionner une valeur parmi des options et met à jour un champ <input type="hidden">.

3. Modal
   Affiche une fenêtre modale avec un titre, un message et un bouton de fermeture.

   • Propriétés :
     • title: string
     • message: string
     • setIsOpenModal: React.Dispatch<React.SetStateAction<boolean>>

Prérequis

• Node.js (version 18 ou supérieure)
• npm (version 9 ou supérieure)
• React (version 18 ou supérieure)
• ReactDOM (version 18 ou supérieure)

Gestion du projet global

Cette section explique comment ajouter un composant, compiler la CSS, construire la librairie et la publier sur npm.

1. Ajouter un composant

• Créer un fichier sous src/lib pour votre nouveau composant.
• L’exporter dans src/lib/index.tsx pour l’inclure dans la librairie.

2. Compiler la CSS

• La compilation Tailwind génère components.css.
• Pour régénérer ce fichier, exécutez :

  npm run build-css

  (Voir package.json pour la définition du script.)

3. Construire la librairie

• Pour construire la librairie, exécutez :

  npm run build

  Cela compile votre code TypeScript et copie les fichiers nécessaires dans le dossier dist.

4. Publier sur npm

• Ajuster le numéro de version dans package.json.
• Pour publier sur npm, authentifiez-vous puis exécutez :

  npm publish

  Vous pouvez ainsi distribuer vos composants sous forme de package npm, prêt à être utilisé dans d’autres projets.