TP1 - Composants React

:women_wrestling: Équipe

Stéphanie Denis (steden001) et Emeline Marquès (emmar009)

:page_facing_up: Description

Il s'agit de la création d'une bibliothèque de 10 composants React ayant chacun 3 stories différentes.

La liste des composants :

• Alert
• Badge
• Button
• Card
• Carousel
• Checkbox
• Collection
• Pagination
• Progress
• Spin

:arrow_forward: Pour démarrer le projet :

yarn install

yarn storybook

:books: Les composantes

:large_orange_diamond: Alert

:small_orange_diamond: Description

Permet d'afficher un message d'alerte.

:small_orange_diamond: Librairie utilisée

mui Version : 5.2.7

:small_orange_diamond: Exemple

const Success = Template.bind({});
Success.args={
    variant:'outlined',
    color: 'success',
    severity: 'success'
}

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | variant | string | outlined, filled | | severity | string | error, warning, info, success | | color | string | error, warning, info, success |

:large_orange_diamond: Badge

:small_orange_diamond: Description

Permet de créer un badge.

:small_orange_diamond: Librairie utilisée

antd Version : 4.18.2

:small_orange_diamond: Exemple

const Green = Template.bind({});
Green.args={
    text:'citron vert',
    color:'lime'
}

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | text | string | au choix | | color | string | pink, red, yellow, orange, cyan, green, blue, purple, geekblue, magenta, volcano, gold, lime |

:large_orange_diamond: Button

:small_orange_diamond: Description

Permet de créer un bouton.

:small_orange_diamond: Librairie utilisée

mui Version : 5.2.7

:small_orange_diamond: Exemple

const Principal = Template.bind({});
Principal.args={
    variant: 'outlined',
    color:'primary',
    size:'medium',
    disabled:false,
    text:'Principal'
}

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | variant | string | text, contained, outlined | | color | string | inherit, primary, secondary, success, error, info, warning | | size | string | small, medium, large | | disabled | boolean | true, false | | text | string | Texte du bouton au choix |

:large_orange_diamond: Card

:small_orange_diamond: Description

Permet de créer une carte avec une image d'illustration ainsi que du texte.

:small_orange_diamond: Librairie utilisée

react-bootstrap Version : 2.5.0

:small_orange_diamond: Exemple

const Small = Template.bind({});
Small.args = {
  width: '200px',
  title:'Petit titre',
  variant:'primary'
};

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | width | string | Au choix, pour changer la largeur de la carte | | title | string | Titre au choix | | variant | string | primary, secondary, success, danger, warning, info, light, dark |

:large_orange_diamond: Carousel

:small_orange_diamond: Description

Permet de créer un carousel d'images avec un titre.

:small_orange_diamond: Librairie utilisée

antd Version : 4.18.2

:small_orange_diamond: Exemple

const Small = Template.bind({});
Small.args={
    width: '200px',
    background:'#ac9a66',
    height: '180px',
    color: '#fff',
    lineHeight: '180px',
    textAlign: 'center'
}

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | width | string | Au choix, pour changer la largeur du carousel | | background | string | Au choix, entrer un code hexadécimal | | heigth | string | Au choix, pour changer la hauteur du h3 | | color | string | Au choix, entrer un code hexadécimal | | lineHeight | string | Au choix pour changer la hauteur de l'interlignage | | textAlign | string | left, center, right, justify |

:large_orange_diamond: Checkbox

:small_orange_diamond: Description

Permet de créer des checkbox.

:small_orange_diamond: Librairie utilisée

mui Version : 5.2.7

:small_orange_diamond: Exemple

const Bleu = Template.bind({});
Bleu.args={
    color: 'primary'
}

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | color | string | inherit, primary, secondary, success, error, info, warning |

:large_orange_diamond: Collection

:small_orange_diamond: Description

Permet de créer une collection d'images.

:small_orange_diamond: Librairie utilisée

antd Version : 4.18.2

:small_orange_diamond: Exemple

const Small = Template.bind({});
Small.args = {
  imagesurl: img,
  width: 100
};

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | imageurl | array | Ajouter des images | | width | number | Modifier la largeur, au choix |

:large_orange_diamond: Pagination

:small_orange_diamond: Description

:small_orange_diamond: Librairie utilisée

antd Version : 4.18.2

:small_orange_diamond: Exemple

const Vingt = Template.bind({});
Vingt.args={
    defaultCurrent: 1,
    total: 200
};

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | defaultCurrent | number | Indique le numéro de page initial par défaut | | total | number | Remplacer par le nombre d'éléments souhaité |

:large_orange_diamond: Progress

:small_orange_diamond: Description

:small_orange_diamond: Librairie utilisée

antd Version : 4.18.2

:small_orange_diamond: Exemple

const Petit = Template.bind({});
Petit.args = {
    percent:30
};

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | percent | number | Entre 0 et 100 |

:large_orange_diamond: Spin

:small_orange_diamond: Description

:small_orange_diamond: Librairie utilisée

antd Version : 4.18.2

:small_orange_diamond: Exemple

const Small = Template.bind({});
Small.args={
    size:'small'
}

:small_orange_diamond: Élément(s) personnalisable(s)

| Nom | Type | Valeur(s) disponible(s) | | ------------- | ------------- | ------------- | | size | string | small, medium, large |