Projet 2 - Lyon CDA 0224
===

### Consignes :
Votre bibliothèque doit être conçue selon les normes professionnelles et être réutilisable dans n'importe quelle application **ReactJS**.
Vous ne devez utiliser que les fonctionnalités de base de ReactJS, **sans aucun framework** ou **bibliothèque supplémentaire**.

## Projets :+1:

### Bibliothèque de calendrier

**Sujet :** Créez une bibliothèque de calendrier pour React qui permettra aux utilisateurs de sélectionner des dates et des plages de dates dans une interface utilisateur conviviale.
La bibliothèque doit proposer un design par défaut avec un système de thèmes pré-définis et personnalisable. Elle doit également inclure une documentation détaillée avec un site d'exemple ainsi qu'un StoryBook.

**Description :** Dans ce projet, vous allez créer une bibliothèque de calendrier pour React qui fournira une interface utilisateur pour sélectionner des dates et des plages de dates.

**Votre bibliothèque de calendrier devra prendre en charge les fonctionnalités suivantes :**

- Afficher un calendrier mensuel avec des dates sélectionnables.
- Permettre aux utilisateurs de sélectionner une seule date ou une plage de dates.
- Afficher la date ou la plage de dates sélectionnée dans une interface utilisateur conviviale.
- Prendre en charge la navigation entre les mois et les années.
- Fournir une API simple pour récupérer les dates sélectionnées.
- Fournir un design par défaut avec un système de thèmes pré-définis et personnalisable.
- Fournir une documentation claire et des exemples de code pour faciliter l'utilisation de votre bibliothèque.
- Fournir un site d'exemple et un StoryBook pour présenter les fonctionnalités de la bibliothèque.
- Être facilement installable avec `npm install <package>`.

#### Spécifications de l'API (suggestion) :

**La bibliothèque doit fournir un composant Calendar qui prend les props suivantes :**
- date : la date sélectionnée actuellement (par défaut, la date courante). La date doit être passée sous forme d'objet JavaScript Date.
- minDate : la date minimale sélectionnable (facultatif). La date doit être passée sous forme d'objet JavaScript Date.
- maxDate : la date maximale sélectionnable (facultatif). La date doit être passée sous forme d'objet JavaScript Date.
- onSelect : une fonction de rappel qui prend une date en paramètre et qui est appelée lorsqu'une date est sélectionnée. La date doit être passée sous forme d'objet JavaScript Date.
- theme : le thème à utiliser pour le calendrier (facultatif, par défaut le thème par défaut). Le thème doit être passé sous forme d'objet JavaScript avec les propriétés suivantes :
- backgroundColor : la couleur d'arrière-plan du calendrier (facultatif, par défaut blanc).
- headerColor : la couleur d'arrière-plan de l'en-tête du calendrier (facultatif, par défaut gris clair).
- textColor : la couleur du texte du calendrier (facultatif, par défaut noir).
- selectedColor : la couleur d'arrière-plan de la date sélectionnée (facultatif, par défaut bleu).
- selectedTextColor : la couleur du texte de la date sélectionnée (facultatif, par défaut blanc).
- Le composant Calendar doit afficher un calendrier mensuel avec des dates sélectionnables.
- Le composant Calendar doit prendre en charge la navigation entre les mois et les années en utilisant des boutons de navigation.
- Le composant Calendar doit afficher la date ou la plage de dates sélectionnée dans une interface utilisateur conviviale.
- Le composant Calendar doit prendre en charge la sélection d'une plage de dates en cliquant sur une première date puis en maintenant le bouton de la souris enfoncé et en déplaçant le curseur vers une deuxième date.

---
### Bibliothèque React Markdown

**Sujet :** Créez une bibliothèque React Markdown qui permettra aux utilisateurs de convertir du texte Markdown en HTML dans une interface utilisateur React.
La bibliothèque doit proposer un design par défaut avec un système de thèmes pré-définis et personnalisable. Elle doit également inclure une documentation détaillée avec un site d'exemple ainsi qu'un StoryBook.

**Description :** Dans ce projet, vous allez créer une bibliothèque React Markdown qui fournira une interface utilisateur pour afficher du texte Markdown sous forme de HTML.

**Votre bibliothèque Markdown devra prendre en charge les fonctionnalités suivantes :**

- Convertir du texte Markdown en HTML.
- Prendre en charge les éléments Markdown standard tels que les titres, les listes, les liens, les images, etc.
- Mettre en relation un composant **Input** et **Output**
- Fournir une API simple pour récupérer le HTML généré à partir du texte Markdown.
- Fournir un design par défaut avec un système de thèmes pré-définis et personnalisable.
- Fournir une documentation claire et des exemples de code pour faciliter l'utilisation de votre - bibliothèque.
- Fournir un site d'exemple et un StoryBook pour présenter les fonctionnalités de la bibliothèque.
- Être facilement installable avec `npm install <package>`.

#### Spécifications de l'API (suggestion):

**La bibliothèque doit fournir un composant Markdown qui prend les props suivantes :**

- children : le texte Markdown à convertir en HTML. Le texte doit être passé sous forme de chaîne de caractères.
- theme : le thème à utiliser pour le Markdown (facultatif, par défaut le thème par défaut). Le thème doit être passé sous forme d'objet JavaScript avec les propriétés suivantes :
- backgroundColor : la couleur d'arrière-plan du Markdown (facultatif, par défaut blanc).
- textColor : la couleur du texte du Markdown (facultatif, par défaut noir).
- linkColor : la couleur des liens dans le Markdown (facultatif, par défaut bleu).
- codeBackgroundColor : la couleur d'arrière-plan du code dans le Markdown (facultatif, par défaut gris clair).
- codeTextColor : la couleur du texte du code dans le Markdown (facultatif, par défaut noir).
- Le composant Markdown doit convertir le texte Markdown en HTML.
- Le composant Markdown doit prendre en charge les éléments Markdown standard tels que les titres, les listes, les liens, les images, etc.
- Le composant Markdown doit fournir une API simple pour récupérer le HTML généré à partir du texte Markdown.
- Le composant Markdown doit prendre en charge la syntaxe GitHub Flavored Markdown (GFM).

---
### Bibliothèque React Chart

**Sujet :** Créez une bibliothèque React de graphiques qui permettra aux utilisateurs de créer des graphiques interactifs dans une interface utilisateur React.
La bibliothèque doit proposer un design par défaut avec un système de thèmes pré-définis et personnalisable. Elle doit également inclure une documentation détaillée avec un site d'exemple ainsi qu'un StoryBook.

**Description :** Dans ce projet, vous allez créer une bibliothèque React de graphiques qui fournira une interface utilisateur pour créer des graphiques interactifs.

**Votre bibliothèque de graphiques devra prendre en charge les fonctionnalités suivantes :**

- Créer des graphiques linéaires, à barres, à secteurs, etc.
- Permettre aux utilisateurs de personnaliser les graphiques avec des options telles que les couleurs, les étiquettes, etc.
- Fournir une API simple pour récupérer les données du graphique.
- Fournir un design par défaut avec un système de thèmes pré-définis et personnalisable.
- Fournir une documentation claire et des exemples de code pour faciliter l'utilisation de votre bibliothèque.
- Fournir un site d'exemple et un StoryBook pour présenter les fonctionnalités de la bibliothèque.
- Être facilement installable avec `npm install <package>`.

#### Spécifications de l'API :

**La bibliothèque doit fournir un composant Chart qui prend les props suivantes :**
- type : le type de graphique à afficher (linéaire, à barres, à secteurs, etc.). Le type doit être passé sous forme de chaîne de caractères.
- data : les données à afficher dans le graphique. Les données doivent être passées sous forme d'objet JavaScript avec les propriétés suivantes :
- labels : les étiquettes des données (facultatif). Les étiquettes doivent être passées sous forme de tableau de chaînes de caractères.
- datasets : les ensembles de données à afficher dans le graphique. Les ensembles de données doivent être passés sous forme de tableau d'objets JavaScript avec les propriétés suivantes :
- label : le libellé de l'ensemble de données (facultatif).
- data : les données de l'ensemble de données. Les données doivent être passées sous forme de tableau de nombres.
- backgroundColor : la couleur d'arrière-plan de l'ensemble de données (facultatif).
- borderColor : la couleur de bordure de l'ensemble de données (facultatif).
- borderWidth : la largeur de bordure de l'ensemble de données (facultatif).
- options : les options de personnalisation du graphique (facultatif). Les options doivent être passées sous forme d'objet JavaScript avec les propriétés suivantes :
- responsive : indique si le graphique doit être réactif (facultatif, par défaut true).
- maintainAspectRatio : indique si le rapport hauteur/largeur doit être maintenu (facultatif, par défaut true).
- scales : les options d'échelle du graphique (facultatif). Les options d'échelle doivent être passées sous forme d'objet JavaScript avec les propriétés suivantes :
- x : les options d'échelle pour l'axe des x (facultatif).
- y : les options d'échelle pour l'axe des y (facultatif).
- legend : les options de la légende du graphique (facultatif). Les options de la légende doivent être passées sous forme d'objet JavaScript avec les propriétés suivantes :
- display : indique si la légende doit être affichée (facultatif, par défaut true).
- position : la position de la légende (facultatif, par défaut en haut).
- title : les options du titre du graphique (facultatif). Les options du titre doivent être passées sous forme d'objet JavaScript avec les propriétés suivantes :
- display : indique si le titre doit être affiché (facultatif, par défaut true).
- text : le texte du titre (facultatif).
- fontSize : la taille de police du titre (facultatif).
- fontStyle : le style de police du titre (facultatif).
- fontFamily : la famille de polices du titre (facultatif).
- padding : le rembourrage autour du titre (facultatif).
- theme : le thème à utiliser pour le graphique (facultatif, par défaut le thème par défaut). Le thème doit être passé sous forme d'objet JavaScript avec les propriétés suivantes :
- backgroundColor : la couleur d'arrière-plan du graphique (facultatif, par défaut blanc).
- gridLineColor : la couleur des lignes de grille du graphique (facultatif, par défaut gris clair).
- textColor : la couleur du texte du graphique (facultatif, par défaut noir).
- titleColor : la couleur du titre du graphique (facultatif, par défaut noir).
- legendColor : la couleur de la légende du graphique (facultatif, par défaut noir).
- Le composant Chart doit créer un graphique en fonction du type spécifié.
- Le composant Chart doit prendre en charge les options de personnalisation du graphique.
- Le composant Chart doit fournir une API simple pour récupérer les données du graphique.
- Le composant Chart doit prendre en charge les interactions utilisateur telles que le survol et le clic sur les éléments du graphique.

---
### Bibliothère React Form

**Sujet :** Créez une bibliothèque React Form qui permettra aux utilisateurs de créer des formulaires personnalisés dans une interface utilisateur React. La bibliothèque doit proposer un design par défaut avec un système de thèmes pré-définis et personnalisable. Elle doit également inclure une documentation détaillée avec un site d'exemple ainsi qu'un StoryBook.

**Description :** Dans cet exercice, vous allez créer une bibliothèque React Form qui fournira une interface utilisateur pour créer des formulaires personnalisés.

**Votre bibliothèque de formulaires devra prendre en charge les fonctionnalités suivantes :**

- Créer des champs de formulaire personnalisés tels que des champs de texte, des cases à cocher, des boutons radio, etc.
- Permettre aux utilisateurs de personnaliser les champs de formulaire avec des options telles que les étiquettes, les validations, etc.
- Fournir une gestion de validation des formulaire.
- Fournir une API simple pour récupérer les données du formulaire.
- Fournir un design par défaut avec un système de thèmes pré-définis et personnalisable.
- Fournir une documentation claire et des exemples de code pour faciliter l'utilisation de votre bibliothèque.
- Fournir un site d'exemple et un StoryBook pour présenter les fonctionnalités de la bibliothèque.
- Être facilement installable avec `npm install <package>`.

#### Spécifications de l'API (suggestion):

**La bibliothèque doit fournir un composant Form qui prend les props suivantes :**
- onSubmit : une fonction de rappel qui prend les données du formulaire en paramètre et qui est appelée lorsque le formulaire est soumis. Les données doivent être passées sous forme d'objet JavaScript.
- theme : le thème à utiliser pour le formulaire (facultatif, par défaut le thème par défaut). Le thème doit être passé sous forme d'objet JavaScript avec les propriétés suivantes :
- backgroundColor : la couleur d'arrière-plan du formulaire (facultatif, par défaut blanc).
- textColor : la couleur du texte du formulaire (facultatif, par défaut noir).
- inputBackgroundColor : la couleur d'arrière-plan des champs d'entrée du formulaire (facultatif, par défaut blanc).
- inputTextColor : la couleur du texte des champs d'entrée du formulaire (facultatif, par défaut noir).
- inputBorderColor : la couleur de bordure des champs d'entrée du formulaire (facultatif, par défaut gris clair).
- buttonBackgroundColor : la couleur d'arrière-plan des boutons du formulaire (facultatif, par défaut bleu).
- buttonTextColor : la couleur du texte des boutons du formulaire (facultatif, par défaut blanc).
- Le composant Form doit fournir une API simple pour créer des champs de formulaire personnalisés tels que des champs de texte, des cases à cocher, des boutons radio, etc.
- Le composant Form doit prendre en charge les options de personnalisation des champs de formulaire telles que les étiquettes, les validations, etc.
- Le composant Form doit fournir une API simple pour récupérer les données du formulaire.
- Le composant Form doit prendre en charge la validation des champs de formulaire en utilisant des fonctions de validation personnalisées.
- Le composant Form doit prendre en charge la soumission asynchrone du formulaire en utilisant des promesses.
- Le composant Form doit prendre en charge tous les types d'inputs HTML tels que text, email, password, number, date, time, etc.
- Le composant Form doit prendre en charge les champs de formulaire personnalisés tels que les champs de sélection, les champs de saisie de fichiers, etc.
- Le composant Form doit prendre en charge la gestion de l'état des champs de formulaire en utilisant les hooks useState et useEffect de React.
- Le composant Form doit fournir une API simple pour réinitialiser les champs de formulaire.
- Le composant Form doit prendre en charge la personnalisation de l'apparence des champs de formulaire en utilisant des classes CSS personnalisées.
- Le composant Form doit prendre en charge l'internationalisation des étiquettes et des messages d'erreur de validation.
- Le composant Form doit fournir une documentation détaillée avec des exemples d'utilisation pour chaque type de champ de formulaire pris en charge.