Implémentation d'une bibliothèque REACT de 10 composantes à l'aide des frameworks Antd et Material-UI.
Une collaboration de Samuel Demers et Yannick Jean.
- Alerte
- Avatar
- Bouton
- Carte
- ChampTexte
- Etape
- LoadSpin
- MenuDeroulant
- Popup
- Resultat
- Succes : Applique les paramètres de l'alerte succès.
- Avertissement : Applique les paramètres de l'alerte avertissement.
- Erreur : Applique les paramètres de l'alerte erreur.
<Alerte
message="Vous avez réussi à créer votre alerte!!!"
type="success"
/>
- Petit : La taille de l'avatar sera petite.
- Moyen : La taille de l'avatar sera moyenne.
- Grand : La taille de l'avatar sera grande.
<Avatars
alt="Roger"
src="assets/img/Roger.jpg"
width={24}
height={24}
/>
- Start : Applique l'aspect visuel du bouton Start.
- Eject : Applique l'aspect visuel du bouton Eject.
- Destroy : Applique l'aspect visuel du bouton Auto Destroy.
<Bouton
type="primary"
shape="circle"
text1="START"
color="green"
borderColor="black"
height={45}
width={50}
/>
- Default : Carte par défaut.
- DarkMode : Active le "DarkMode".
- Hoverable : Effet visuel "hoverable".
<Carte
width={250}
title="European cool girl"
description="www.tinder.com"
/>
- Contour : Ajoute à l'aspect visuel du champ un contour bleu.
- Attention : Ajoute à l'aspect visuel du champ un avertissement.
- Succes : Ajoute à l'aspect visuel du champ un encadré succès.
<ChampTexte
label="Nom"
color="primary"
defaultValue=""
helperText=""
/>
- Attente : L'étape est au niveau attente.
- Chargement : L'étape est au niveau chargement.
- Termine : Toutes les étapes sont terminées.
<Etape
current="1"
labelPlacement="vertical"
title1="En attente.."
title2="Chargement"
title3="Terminé!"
description1=""
description2=""
description3=""
/>
- Small : L'icône de chargement est petit.
- Medium : L'icône de chargement est moyen.
- Large : L'icône de chargement est grand.
<LoadSpin
size="small"
/>
- BottomLeft : Menu en bas à gauche.
- Bottom : Menu en bas au milieu.
- Right : Menu à droite.
<MenuDeroulant
item1="Hot-Dog"
item2="Poutine"
item3="Hamburger"
placement="bottomLeft"
/>
- Basic : Fênetre modale de base.
- Centered : Fênetre modale centré.
- Warning : Fênetre modale d'alerte.
<PopUp
title="Basic modal"
/>
- Succes : Affiche la couleur, l'icône et le texte pour un succès.
- Probleme : Affiche la couleur, l'icône et le texte pour un avertissement.
- Erreur : Affiche la couleur, l'icône et le texte pour une erreur.
<Resultats
status="success"
title="Votre achat a été complété avec succès!"
subTitle="Numéro de commande : 1234567890"
type="primary"
key="console"
/>
Pour démarrer le projet dans le terminal:
yarn install
yarn storybook
ou
npm install
npm run storybook