fxgcomponents_bcormier
v1.0.30
Published
pipeline deploiement composantes story book
Downloads
69
Readme
Déploiement en continu
Le fichier .yml exécute un déploiement de composantes React qui peuvent être affichées sous forme de storybook. Ce déploiement se fait en 3 étapes:
Étape 1 : Version
Incrémentation de la version du package et ajout de tags au Git.
Étape 2 : Publish
Publication du package de composantes sur npmjs.com.
Étape 3 : Deploy
Déploiement vers un serveur FTP.
Activer le storybook de composantes React
-yarn pour installer les dépendances du projet.
-yarn storybook pour démarrer le storybook qui s'ouvrira sur le http://localhost:6006/ dans le navigateur.
Fonctionnement des composantes React
Composant Alert
args:
- text (string) -> le texte que l'on veut afficher
- type (3 types d'Alert)
- Success -> Background vert
- Info -> Background bleu
- Error -> Background rouge
Composant Avatar
args:
- size (number)
- Small -> 30
- Medium -> 60
- Large -> 90
Composant Badge
args:
- shape (string)
- count (number) -> nombre de notifications affichées en rouge
Déclinaisons
- Square -> Carré avec un count de 5
- Circle -> Cercle avec count de 99+
- Square70 -> Carré avec count de 70
Composant Button
args:
- type (string)
- text (string)
Déclinaisons
- Primary -> Type Primary (Couleur bleue)
- Default -> Même couleur que background
- Dashed -> Type dashed (bordure en pointillé), même couleur que background et bordure en pointillé
Composant Card
args:
- title (string)
- bordered (bool) --> est à true par défaut, en le mettant à false, les bordures disparaîssent
- hoverable (bool) --> ajoute un effet de survol, par défaut à false
Déclinaisons
- Basic
- NoBorders -> bordered est à false
- Hover -> hoverable est à true
Empty
C'est un placeholder lorsque l'emplacement de la requête est vide.
args:
- image
Déclinaisons
- Basic -> affiche l'image d'un dossier avec un text "No Data"
- WithImage - affiche l'image d'un chien avec des lunettes qui code derrière son ordinateur
- Simple -> affiche l'image d'un dossier avec des couleurs plus pâles
Composant Input
args:
- maxLength (number) -> nombre de caractères maximum que prend le Input
- placeholder (string)
- width (number) -> la largeur du input en %
Déclinaisons
- Short -> Maximum 15 caractères, width 10%
- Medium -> Maximum 50 caractères, width 20%
- Long -> Maximum 100 caractères, width 40%
Composant Rate
Affichage avec des étoiles pour attribuer une note sur 5.
args
- allowHalf (bool) -> permet de sélectionner la moitié d'une étoile
- disabled (bool) -> Il devient impossible de sélectionner des étoiles
- defaultValue (number) -> Le nombre d'étoiles sélectionnées au chargement
Déclinaisons
- Basic
- HalfStar -> On peut attribuer des demi-étoiles
- ReadOnly -> defaultValue de 2, les étoiles sont disabled
Composant Select
Menu déroulant de 3 items qui ouvre vers le bas
args:
- defaultValue (string) -> la valeur affichée quand le menu n'est pas ouvert
- value1 (string) -> Item 1
- value2 (string) -> Item 2
- value3 (string) -> Item 3
- bordered (bool) -> De base à true
- status (string) -> possiblité d'afficher un statut d'erreur (couleur rouge)
Déclinaisons
- DefaultDropdown
- NoBorder -> bordered est à false
- Error -> Le statut est à 'error', la bordure du menu apparaît rouge
Typography
Différents styles de typographie
args:
- italic (bool) -> texte en italique
- strong (bool)-> texte en gras
- underline (bool)-> texte souligné
Déclinaisons
- Italic -> italic est à true
- Strong -> strong est à true
- Underline - underline est à true