From 294c42b4e7be3dd4085214af6603e062b5218d3c Mon Sep 17 00:00:00 2001 From: Xavier Marchal Date: Sun, 12 Mar 2023 19:40:30 +0100 Subject: [PATCH] chore(react): update simple-component.md file to last english version #3 --- .../react/fr/get-started.md | 2 +- .../react/fr/simple-component.md | 284 ++++++++++++------ 2 files changed, 191 insertions(+), 95 deletions(-) diff --git a/content/intro-to-storybook/react/fr/get-started.md b/content/intro-to-storybook/react/fr/get-started.md index e9990ff5e..250fd2d22 100644 --- a/content/intro-to-storybook/react/fr/get-started.md +++ b/content/intro-to-storybook/react/fr/get-started.md @@ -5,7 +5,7 @@ description: 'Configurer Storybook dans votre environnement de développement' commit: '9245261' --- -Storybook s'éxécute parallèlement à votre application en mode développement. Il vous aide à construire des composants d'interface utilisateur (User Interface ou UI) isolés de la logique applicative et du contexte de votre application. Cette édition de Learn Storybook est pour React; d'autres éditions existent pour [React Native](/intro-to-storybook/react-native/en/get-started), [Vue](/intro-to-storybook/vue/fr/get-started), [Angular](/intro-to-storybook/angular/en/get-started), [Svelte](/intro-to-storybook/svelte/en/get-started) et [Ember](/intro-to-storybook/ember/en/get-started). +sStorybook s'éxécute parallèlement à votre application en mode développement. Il vous aide à construire des composants d'interface utilisateur (User Interface ou UI) isolés de la logique applicative et du contexte de votre application. Cette édition de Learn Storybook est pour React; d'autres éditions existent pour [React Native](/intro-to-storybook/react-native/en/get-started), [Vue](/intro-to-storybook/vue/fr/get-started), [Angular](/intro-to-storybook/angular/en/get-started), [Svelte](/intro-to-storybook/svelte/en/get-started) et [Ember](/intro-to-storybook/ember/en/get-started). ![Storybook et votre application](/intro-to-storybook/storybook-relationship.jpg) diff --git a/content/intro-to-storybook/react/fr/simple-component.md b/content/intro-to-storybook/react/fr/simple-component.md index 11ca4cca6..bd9e8f22b 100644 --- a/content/intro-to-storybook/react/fr/simple-component.md +++ b/content/intro-to-storybook/react/fr/simple-component.md @@ -5,24 +5,24 @@ description: 'Créer un simple composant en isolation' commit: 'efa06ff' --- -Nous allons construire notre UI en suivant la méthode [Component-Driven Development](https://www.componentdriven.org/) (CDD). Il s'agit d'un processus qui construit les interfaces utilisateur de "bas en haut" en commençant par les composants et en terminant par les écrans. Le CDD vous permet d'évaluer le degré de complexité auquel vous êtes confronté lors de la construction de l'UI. +Nous allons construire notre UI en suivant la méthode [de développement orienté composant](https://www.componentdriven.org/) (CDD). Il s'agit d'un processus qui construit les interfaces utilisateur de "bas en haut" en commençant par les composants et en terminant par les écrans. Le CDD vous permet d'évaluer le degré de complexité auquel vous êtes confronté lors de la construction de l'UI. -## Tâche(Task) +## Tâche (Task) ![Les trois états du composant Tâche](/intro-to-storybook/task-states-learnstorybook.png) -`Task` (Tâche) est le composant principal dans notre application. Chaque tâche s'affiche avec une légère différence selon l'état dans lequel elle se trouve. Nous affichons une case cochée (ou non cochée), des informations sur la tâche et un bouton "épingle", qui nous permet de déplacer les tâches de haut en bas de la liste. Pour mettre tout cela en place, nous aurons besoin de ces props: +`Task` (Tâche) est le composant principal de notre application. Chaque tâche s'affiche avec une légère différence selon l'état dans lequel elle se trouve. Nous affichons une case cochée (ou non cochée), des informations sur la tâche et un bouton "épingle", qui nous permet de déplacer les tâches de haut en bas de la liste. Pour mettre tout cela en place, nous aurons besoin de ces props: - `title` – un string (chaîne de caractères) décrivant la tâche -- `state` - sur quelle liste se trouve actuellement la tâche et est-elle cochée ? +- `state` - sur quelle liste se trouve actuellement la tâche et est-elle cochée? -Lorsque nous commençons à construire une `Task` (Tâche), nous écrivons d'abord nos tests d'états pour les différents types de tâches décrits ci-dessus. Ensuite, nous utilisons Storybook pour construire le composant de façon isolée en utilisant des données simulées. Nous testerons manuellement l'apparence du composant en fonction de chaque état au fur et à mesure. +Lorsque nous commençons à construire une `Task`, nous écrivons d'abord nos tests d'états pour les différents types de tâches décrits ci-dessus. Ensuite, nous utilisons Storybook pour construire le composant de façon isolée en utilisant des données simulées. Nous testerons manuellement l'apparence du composant en fonction de chaque état au fur et à mesure. ## Préparer le terrain Tout d'abord, créons la composante "tâche" et le fichier story qui l'accompagne : `src/components/Task.js` et `src/components/Task.stories.js`. -Nous commencerons par une mise en œuvre de base de `Task` (Tâche), en prenant simplement en compte les attributs dont nous savons que nous en aurons besoin et les deux actions que vous pouvez entreprendre sur une tâche (pour la déplacer entre les listes) : +Nous commencerons par une implémentation standard de `Task`, en prenant simplement en compte les attributs dont nous savons que nous en aurons besoin et les deux actions que vous pouvez entreprendre sur une tâche (pour la déplacer entre les listes) : ```js:title=src/components/Task.js import React from 'react'; @@ -30,13 +30,15 @@ import React from 'react'; export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) { return (
- +
); } ``` -Ci-dessus, nous rendons un balisage simple pour `Task` basé sur la structure HTML existante de l'application Todos. +Ci-dessus, nous rendons un balisage simple pour `Task` fondé sur la structure HTML existante de l'application Todos. Ci-dessous, nous allons construire les trois états de test de Task dans le fichier story: @@ -50,7 +52,7 @@ export default { title: 'Task', }; -const Template = (args) => ; +const Template = args => ; export const Default = Template.bind({}); Default.args = { @@ -58,7 +60,6 @@ Default.args = { id: '1', title: 'Test Task', state: 'TASK_INBOX', - updatedAt: new Date(2018, 0, 1, 9, 0), }, }; @@ -79,69 +80,84 @@ Archived.args = { }; ``` -Il y a deux niveaux d'organisation de base dans Storybook : le composant et ses story enfants. Considérez chaque story comme une permutation d'un composant. Vous pouvez avoir autant de story par composant que vous en voulez. +Il y a deux niveaux d'organisation de base dans Storybook: le composant et ses stories enfants. Considérez chaque story comme une permutation d'un composant. Vous pouvez avoir autant de story par composant que vous en voulez. - **Composant** - Story - Story - Story -Pour informer Storybook sur le composant que nous documentons, nous créons un `default` export qui contient: +Pour informer Storybook sur le composant que nous documentons, nous créons un export `default` qui contient: -- `component` -- le composant lui-même, -- `title` -- comment faire référence au composant dans la barre latérale de l'application Storybook, +- `component`: le composant lui-même +- `title`: Comment faire référence au composant dans la barre latérale de l'application Storybook -Pour définir nos story, nous exportons une fonction pour chacun de nos états tests afin de générer un story. -Le story est une fonction qui renvoie un élément qui a été rendu (c'est-à-dire un composant avec un ensemble de props) dans un état donné--exactement comme un [Functional Component](https://reactjs.org/docs/components-and-props.html#function-and-class-components). +Pour définir nos stories, nous exportons une fonction pour chacun de nos états tests afin de générer une story. La story est une fonction qui renvoie un élément qui a été rendu (c'est-à-dire un composant avec un ensemble de props) dans un état donné --exactement comme un [Composant fonctionnel](https://reactjs.org/docs/components-and-props.html#function-and-class-components). -Comme nous avons plusieurs permutations de notre composant, il est pratique de lui assigner une variable `Template`. L'introduction de ce schéma dans vos story réduira la quantité de code que vous devez écrire et maintenir. +Comme nous avons plusieurs permutations de notre composant, il est pratique de lui assigner une variable `Template`. L'introduction de ce schéma dans vos stories réduira la quantité de code que vous devez écrire et maintenir.
- -`Template.bind({})` est une technique [standard de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) permettant de faire une copie d'une fonction. Nous utilisons cette technique pour permettre à chaque story exportée de définir ses propres propriétés, mais en utilisant la même implémentation. - +💡 Template.bind({}) est une technique standard JavaScript permettant de faire une copie d'une fonction. Nous utilisons cette technique pour permettre à chaque story exportée de définir ses propres propriétés, mais en utilisant la même implémentation.
-Arguments ou [`args`](https://storybook.js.org/docs/react/writing-stories/args) pour faire court, nous permettent d'éditer en temps réel nos composants avec l'addon de contrôle sans avoir à redémarrer Storybook. Une fois que la valeur d'un [`args`](https://storybook.js.org/docs/react/writing-stories/args) change, le composant change aussi. +Les arguments ou [`args`](https://storybook.js.org/docs/react/writing-stories/args) pour faire court, nous permettent d'éditer en temps réel nos composants avec l'addon de contrôles sans avoir à redémarrer Storybook. Quand la valeur d'un [`args`](https://storybook.js.org/docs/react/writing-stories/args) change, le composant change aussi. -Lors de la création d'un story, nous utilisons un argument de base "task" pour construire la forme de la tâche que le composant attend. Cette tâche est généralement modélisée à partir de ce à quoi ressemblent les données réelles. Encore une fois, "exporter" cette forme nous permettra de la réutiliser dans des story ultérieures, comme nous le verrons. +Lors de la création d'une story, nous utilisons un argument de base `task` pour construire la forme de la tâche que le composant attend. Cette tâche est généralement modélisée à partir de ce à quoi ressemblent les données réelles. Encore une fois, `exporter` cette forme nous permettra de la réutiliser dans des stories ultérieures, comme nous le verrons.
-Actions vous aident à vérifier les interactions lors de la construction des composants de l'UI en isolation. Souvent, vous n'aurez pas accès aux fonctions et à l'état dont vous disposez dans le contexte de l'application. Utilisez action() pour les simuler. +💡 Les actions vous aident à vérifier les interactions lors de la construction des composants de l'UI en isolation. Souvent, vous n'aurez pas accès aux fonctions et à l'état dont vous disposez dans le contexte de l'application. Utilisez action() pour les simuler.
## Configuration -Nous devrons apporter quelques modifications à la configuration du Storybook pour qu'il remarque non seulement nos story récemment créées, mais nous permette également d'utiliser le fichier CSS qui a été modifié dans le [chapitre précédent](/intro-to-storybook/react/fr/get-started). +Nous devrons apporter quelques modifications à la configuration du Storybook pour qu'il remarque non seulement nos stories récemment créées, mais nous permette également d'utiliser le fichier CSS de l'application (situé dans `src/index.css`). -Commencez par modifier le fichier de configuration de votre Storybook (`.storybook/main.js`) comme suit : +Commencez par modifier le fichier de configuration de votre Storybook (`.storybook/main.js`) comme suit: -```js:title=.storybook/main.js +```diff:title=.storybook/main.js module.exports = { - //👇 Location of our stories - stories: ['../src/components/**/*.stories.js'], +- stories: [ +- '../src/**/*.stories.mdx', +- '../src/**/*.stories.@(js|jsx|ts|tsx)' +- ], ++ stories: ['../src/components/**/*.stories.js'], + staticDirs: ['../public'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app', + '@storybook/addon-interactions', ], + framework: '@storybook/react', + core: { + builder: '@storybook/builder-webpack5', + }, + features: { + interactionsDebugger: true, + }, }; ``` -Après avoir effectué la modification ci-dessus, dans le dossier `storybook`, changez votre `preview.js` en ce qui suit : +Après avoir effectué la modification ci-dessus, dans le dossier `storybook`, changez votre `preview.js` en ce qui suit: -```js:title=.storybook/preview.js -import '../src/index.css'; //👈 The app's CSS file goes here +```diff:title=.storybook/preview.js ++ import '../src/index.css'; //👇 Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI. export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, }; ``` -[`parameters`](https://storybook.js.org/docs/react/writing-stories/parameters) sont généralement utilisés pour contrôler le comportement des fonctionnalités et des addons de Storybook. Dans notre cas, nous allons les utiliser pour configurer la manière dont les `actions` (les callbacks simulés) sont gérées. +Les [`parameters`](https://storybook.js.org/docs/react/writing-stories/parameters) sont généralement utilisés pour contrôler le comportement des fonctionnalités et des addons de Storybook. Dans notre cas, nous allons les utiliser pour configurer la manière dont les `actions` (les callbacks simulés) sont gérées. -Les `actions` nous permettent de créer des callbacks qui apparaissent dans le panneau **actions** du UI de Storybook lorsqu'on clique dessus. Ainsi, lorsque nous construisons un bouton d'épingle, nous pourrons déterminer dans le UI de test si un clic de bouton est réussi. +Les `actions` nous permettent de créer des callbacks qui apparaissent dans la section **actions** de Storybook lorsqu'on clique dessus. Ainsi, lorsque nous construisons un bouton d'épingle, nous pourrons déterminer si un clic de bouton est réussi dans l'interface. Une fois que nous aurons fait cela, le redémarrage du serveur Storybook devrait permettre d'obtenir des cas de test pour les trois états de Task: @@ -152,45 +168,63 @@ Une fois que nous aurons fait cela, le redémarrage du serveur Storybook devrait /> -## Construire les États +## Construire les états -Maintenant que nous avons configuré Storybook, importé des styles et élaboré des scénarios de test, nous pouvons rapidement commencer à mettre en œuvre le HTML du composant pour qu'il corresponde au design. +Maintenant que nous avons configuré Storybook, importé des styles et élaboré des scénarios de test, nous pouvons rapidement commencer à implémenter le HTML du composant pour qu'il corresponde au design. Le composant est encore basique pour le moment. Tout d'abord, écrivons le code qui permettra de réaliser la conception sans trop entrer dans les détails: -```jsx:title=src/components/Task.js +```js:title=src/components/Task.js import React from 'react'; export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) { return (
-
); } ``` -La balisage supplémentaire ci-dessus, combiné avec le CSS que nous avons importé précédemment, donne l'UI suivante : +Le balisage supplémentaire ci-dessus, combiné avec le CSS que nous avons importé précédemment, donne l'UI suivante: