@@ -269,5 +269,5 @@ export default function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
```
+ [🌎 **Storybook déployé**](https://master--5ccbe484c994280020b6d128.chromatic.com) Storybook est un outil puissant pour React, React Native, Vue, Angular, Svelte et bien d'autres. Il dispose d'une communauté de développeurs florissante et d'une multitude d'addons. Cette introduction décrit brièvement une infime partie de ce qu'il est possible de faire. Nous sommes persuadés qu'une fois que vous aurez adopté Storybook, vous serez impressionné de voir comme il est fructueux de créer des UI durables. diff --git a/content/intro-to-storybook/react/fr/data.md b/content/intro-to-storybook/react/fr/data.md index 716b493c8..32d5134fc 100644 --- a/content/intro-to-storybook/react/fr/data.md +++ b/content/intro-to-storybook/react/fr/data.md @@ -83,10 +83,11 @@ export default store; Ensuite, mettons à jour le composant `TaskList` pour se connecter au store Redux et rendre les tâches qui nous intéressent: -```js:title=src/components/TaskList.js -import React from 'react'; +```jsx:title=src/components/TaskList.jsx import Task from './Task'; + import { useDispatch, useSelector } from 'react-redux'; + import { updateTaskState } from '../lib/store'; export default function TaskList() { @@ -287,18 +288,20 @@ Empty.decorators = [ ```
+
+ {story()} ],
+ tags: ['autodocs'],
};
-const Template = () => {story()} ],
+ tags: ['autodocs'],
};
-const Template = () => {story()} ],
+ tags: ['autodocs'],
};
-const Template = () =>
-💡 N'oubliez pas de commiter vos changements avec git!
+💡 N'oubliez pas de commiter vos changements avec git !
diff --git a/content/intro-to-storybook/react/fr/conclusion.md b/content/intro-to-storybook/react/fr/conclusion.md
index 4d93cb967..d3accdfb3 100644
--- a/content/intro-to-storybook/react/fr/conclusion.md
+++ b/content/intro-to-storybook/react/fr/conclusion.md
@@ -3,10 +3,11 @@ title: 'Conclusion'
description: 'Combinez toutes vos connaissances et apprenez plus de techniques de Storybook'
---
-Félicitations! Vous avez créé votre premiere interface utilisateur dans Storybook. En cours de route, vous avez appris à construire, assembler, tester et déployer des composants graphiques. Si vous avez suivi les étapes, votre projet et votre Storybook déployé devraient ressembler à ceci:
+Félicitations ! Vous avez créé votre premiere interface utilisateur dans Storybook. En cours de route, vous avez appris à construire, assembler, tester et déployer des composants graphiques. Si vous avez suivi les étapes, votre projet et votre Storybook déployé devraient ressembler à ceci :
[📕 **GitHub repo: chromaui/learnstorybook-code**](https://github.com/chromaui/learnstorybook-code)
+ [🌎 **Storybook déployé**](https://master--5ccbe484c994280020b6d128.chromatic.com) Storybook est un outil puissant pour React, React Native, Vue, Angular, Svelte et bien d'autres. Il dispose d'une communauté de développeurs florissante et d'une multitude d'addons. Cette introduction décrit brièvement une infime partie de ce qu'il est possible de faire. Nous sommes persuadés qu'une fois que vous aurez adopté Storybook, vous serez impressionné de voir comme il est fructueux de créer des UI durables. diff --git a/content/intro-to-storybook/react/fr/data.md b/content/intro-to-storybook/react/fr/data.md index 716b493c8..32d5134fc 100644 --- a/content/intro-to-storybook/react/fr/data.md +++ b/content/intro-to-storybook/react/fr/data.md @@ -83,10 +83,11 @@ export default store; Ensuite, mettons à jour le composant `TaskList` pour se connecter au store Redux et rendre les tâches qui nous intéressent: -```js:title=src/components/TaskList.js -import React from 'react'; +```jsx:title=src/components/TaskList.jsx import Task from './Task'; + import { useDispatch, useSelector } from 'react-redux'; + import { updateTaskState } from '../lib/store'; export default function TaskList() { @@ -287,18 +288,20 @@ Empty.decorators = [ ```
-💡
excludeStories est un champ de la configuration Storybook qui empêche notre état simulé d'être traité comme une story. Vous pouvez en savoir plus sur ce champ dans la documentation Storybook.
+
+💡 `excludeStories` est un champ de la configuration Storybook qui empêche notre état simulé d'être traité comme une story. Vous pouvez en savoir plus sur ce champ dans la [documentation Storybook](https://storybook.js.org/docs/api/csf).
+
-💡 N'oubliez pas de commiter vos changements avec git!
+💡 N'oubliez pas de commiter vos changements avec git !
Félicitations ! Nous sommes de nouveau opérationnel, notre Storybook fonctionne, et nous sommes capables de récupérer de la donnée à travers un composant connecté. Dans le prochain chapitre, nous utiliserons ce que nous avons appris and nous l'appliquerons à un écran.
diff --git a/content/intro-to-storybook/react/fr/deploy.md b/content/intro-to-storybook/react/fr/deploy.md
index 9403bf754..692d8c0b0 100644
--- a/content/intro-to-storybook/react/fr/deploy.md
+++ b/content/intro-to-storybook/react/fr/deploy.md
@@ -15,7 +15,7 @@ L'exécution de `yarn build-storybook` produira un Storybook statique dans le r
## Publier Storybook
-Ce tutoriel utilise Chromatic, un service de publication gratuit réalisé par les mainteneurs de Storybook. Il nous permet de déployer et d'héberger notre Storybook en toute sécurité dans le cloud.
+Ce tutoriel utilise [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook), un service de publication gratuit réalisé par les mainteneurs de Storybook. Il nous permet de déployer et d'héberger notre Storybook en toute sécurité dans le cloud.
### Configurer un dépôt dans GitHub
@@ -89,15 +89,17 @@ on: push
# List of jobs
jobs:
- test:
- # Operating System
+ chromatic:
+ name: 'Run Chromatic'
runs-on: ubuntu-latest
# Job steps
steps:
- - uses: actions/checkout@v1
+ - uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
- run: yarn
#👇 Adds Chromatic as a step in the workflow
- - uses: chromaui/action@v1
+ - uses: chromaui/action@latest
# Options required for Chromatic's GitHub Action
with:
#👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/fr/deploy/ to obtain it
@@ -105,7 +107,11 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
```
-💡 Pour des raisons de sécurité les secrets de GitHub n'ont pas été mentionnés. Les secrets sont des variables d'environnement sécurisées fournies par GitHub afin que vous n'ayez pas besoin de coder directement le projet-token.
+
+💡 Pour des raisons de sécurité les [secrets GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) n'ont pas été mentionnés. Les secrets sont des variables d'environnement sécurisées fournies par GitHub afin que vous n'ayez pas besoin de coder directement le `project-token`.
+
+
### Commiter l'action
@@ -135,6 +141,6 @@ Cliquez sur le dernier build, cela doit être celui du haut.
Ensuite, cliquez sur le bouton `View Storybook` pour voir la dernière version de votre Storybook.
-
+
Utilisez le lien et partagez-le avec les membres de votre équipe. Ceci est utile dans le cadre du processus de développement standard d'une application ou simplement pour montrer son travail 💅.
diff --git a/content/intro-to-storybook/react/fr/get-started.md b/content/intro-to-storybook/react/fr/get-started.md
index 0d358a387..cecf5f022 100644
--- a/content/intro-to-storybook/react/fr/get-started.md
+++ b/content/intro-to-storybook/react/fr/get-started.md
@@ -32,23 +32,16 @@ yarn
Maintenant, nous pouvons vérifier rapidement que les différents environnements de notre application fonctionnent correctement:
```shell:clipboard=false
-# Run the test runner (Jest) in a terminal:
-yarn test --watchAll
-
# Start the component explorer on port 6006:
yarn storybook
-# Run the frontend app proper on port 3000:
-yarn start
+# Run the frontend app proper on port 5173:
+yarn dev
```
-
-💡 Nous avons ajouté le drapeau
-
-Notre application front-end se compose de trois modules: test automatisé (Jest), développement de composants (Storybook) et l'application elle-même.
+Les principales modalités de notre application frontend : développement de composants (Storybook) et l'application elle-même.
-
+
Selon la partie de l'application sur laquelle vous travaillez, vous voudriez peut-être exécuter un ou plusieurs de ces modules simultanément. Comme nous nous concentrerons actuellement sur la création d'un seul composant d'UI, nous continuerons à exécuter Storybook.
diff --git a/content/intro-to-storybook/react/fr/screen.md b/content/intro-to-storybook/react/fr/screen.md
index eb07ee04d..d908823db 100644
--- a/content/intro-to-storybook/react/fr/screen.md
+++ b/content/intro-to-storybook/react/fr/screen.md
@@ -113,12 +113,15 @@ const store = configureStore({
export default store;
```
-Maintenant que nous avons mis à jour notre store pour récupérer les données de l'API et que nous gérons les différents états de notre application, nous pouvons créer `InboxScreen.js` dans le dossier `src/components`:
+Maintenant que nous avons mis à jour notre store pour récupérer les données de l'API et que nous gérons les différents états de notre application, nous pouvons créer `InboxScreen.jsx` dans le dossier `src/components`:
+
+```jsx:title=src/components/InboxScreen.jsx
+import { useEffect } from 'react';
-```js:title=src/components/InboxScreen.js
-import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
+
import { fetchTasks } from '../lib/store';
+
import TaskList from './TaskList';
export default function InboxScreen() {
@@ -154,9 +157,12 @@ export default function InboxScreen() {
Nous avons aussi besoin de changer le composant `App` pour rendre le `InboxScreen` (nous utiliserons à la fin un routeur pour choisir le bon écran, mais ne nous inquiétons pas de cela ici):
-```diff:title=src/App.js
-- import logo from './logo.svg';
-- import './App.css';
+```diff:title=src/App.jsx
+- import { useState } from 'react'
+- import reactLogo from './assets/react.svg'
+- import viteLogo from '/vite.svg'
+- import './App.css'
+
+ import './index.css';
+ import store from './lib/store';
@@ -164,22 +170,29 @@ Nous avons aussi besoin de changer le composant `App` pour rendre le `InboxScree
+ import InboxScreen from './components/InboxScreen';
function App() {
+- const [count, setCount] = useState(0)
return (
- --watchAll à notre commande de test, pour s'assurer que tous les tests sont effectués. Pendant que vous progressez dans ce tutoriel, vous serez exposés à différents scénarios de test. Vous pouvez aussi ajouter ce drapeau à votre script de test dans votre package.json .
-
--
-- 
+-
+-
+ Vite + React
+-
+-
-
+-
-- Edit src/App.js and save to reload.
+- Edit src/App.jsx and save to test HMR
-
+- Click on the Vite and React logos to learn more +-
-
-💡 En complément, une autre approche valable serait de passer la donnée à travers la hiérarchie des composants, d'autant plus si vous utilisez GraphQL. C'est comment nous avons construit Chromatic à travers plus de 800 stories.
+
+💡 En complément, une autre approche valable serait de passer la donnée à travers la hiérarchie des composants, d'autant plus si vous utilisez [GraphQL](http://graphql.org/). C'est comment nous avons construit [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) à travers plus de 800 stories.
@@ -312,20 +325,20 @@ Regardez votre Storybook, et vous verrez que la story `error` fonctionne doréna
-## Tests d'intéraction
+## Tests des composants
Jusque là, nous avons été capable de construire une application fonctionnelle, en construisant de simples composants jusqu'à un écran, en testant continuellement les changements grâce à nos stories. Mais chaque nouvelle story nécessite aussi une vérification manuelle sur les autres stories, pour s'assurer que l'interface utilisateur n'a pas été changé. Ceci donne beaucoup de travail supplémentaire.
Ne pouvons-nous pas automatiser ce flux et tester nos interactions entre les composants de manière automatique?
-### Ecrire un test d'interaction en utilisant la fonction play
+### Écrire un test de composant en utilisant la fonction play
-La fonction de Storybook [`play`](https://storybook.js.org/docs/react/writing-stories/play-function) et [`@storybook/addon-interactions`](https://storybook.js.org/docs/react/writing-tests/interaction-testing) nous aide à faire des tests d'interactions. Une fonction play inclue de petits exemples de code qui s'exécutent après que les stories se rendent.
+La fonction [`play`](https://storybook.js.org/docs/writing-stories/play-function) de Storybook et [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/component-testing) nous aident avec cela. Une fonction play inclut de petits extraits de code qui s'exécutent après le rendu de la story.
La fonction play nous aide à vérifier les changements d'UI quand les tâches sont mises à jour. Elle utilise les API du DOM, agnostiques du type de librairie utilisé, ce qui signifie que nous pouvons écrire des stories avec cette fonction pour interagir avec l'UI et simuler des actions utilisateurs, quelque soit la librarie front utilisée.
@@ -333,46 +346,42 @@ L'addon `@storybook/addon-interactions` nous aide à visualiser nos tests dans S
Regardons cela! Mettez à jour votre nouvelle story `InboxScreen`, et créer les interactions avec le composant en ajoutant le code suivant:
-```diff:title=src/components/InboxScreen.stories.js
-import React from 'react';
-
+```diff:title=src/components/InboxScreen.stories.jsx
import InboxScreen from './InboxScreen';
import store from '../lib/store';
-import { rest } from 'msw';
+
+import { http, HttpResponse } from 'msw';
+
import { MockedState } from './TaskList.stories';
+
import { Provider } from 'react-redux';
+ import {
+ fireEvent,
-+ within,
+ waitFor,
++ within,
+ waitForElementToBeRemoved
-+ } from '@storybook/testing-library';
++ } from '@storybook/test';
export default {
component: InboxScreen,
title: 'InboxScreen',
decorators: [(story) =>
+
+💡 Le package `@storybook/test` remplace les packages de test `@storybook/jest` et `@storybook/testing-library`, offrant une taille de bundle plus petite et une API plus simple basée sur le package [Vitest](https://vitest.dev/).
+
+
+
Regardez la story `Default` . Cliquer sur le section `Interactions` pour voir la liste des interactions de votre fonction play de votre story.
@@ -440,9 +456,11 @@ yarn test-storybook --watch
```
-💡 Les tests d'interactions avec la fonction play sont une manière fantastique de tester vos composants d'UI. Ils peuvent faire plein plus que ce que nous avons parcouru. Nous vous encourageons à lire la documentation officielle pour apprendre plus à ce sujet.
-
-Pour creuser encore plus les tests, vous pouvez lire Le livre du test. Il agrège les stratégies de tests utilisées par les équipes front reconnues afin de vous faire accélérer votre flux de développement. + +💡 Les tests d'interactions avec la fonction play sont une manière fantastique de tester vos composants d'UI. Ils peuvent faire plein plus que ce que nous avons parcouru. Nous vous encourageons à lire la [documentation officielle](https://storybook.js.org/docs/writing-tests/component-testing) pour en savoir plus. + +Pour creuser encore plus les tests, vous pouvez lire le [Guide des Tests](/ui-testing-handbook). Il agrège les stratégies de tests utilisées par les équipes front reconnues afin de vous faire accélérer votre flux de développement. +
@@ -465,5 +483,5 @@ Nous avons commencé du bas avec une `Task`, puis progressé avec `TaskList`, et
Nous n'avons pas encore terminé - le travail ne s'arrête pas à la construction de l'UI. Nous devons également veiller à ce qu'elle reste durable dans le temps.
-Pour creuser encore plus les tests, vous pouvez lire Le livre du test. Il agrège les stratégies de tests utilisées par les équipes front reconnues afin de vous faire accélérer votre flux de développement. + +💡 Les tests d'interactions avec la fonction play sont une manière fantastique de tester vos composants d'UI. Ils peuvent faire plein plus que ce que nous avons parcouru. Nous vous encourageons à lire la [documentation officielle](https://storybook.js.org/docs/writing-tests/component-testing) pour en savoir plus. + +Pour creuser encore plus les tests, vous pouvez lire le [Guide des Tests](/ui-testing-handbook). Il agrège les stratégies de tests utilisées par les équipes front reconnues afin de vous faire accélérer votre flux de développement. +
-💡 N'oubliez pas de commiter vos changements avec git!
+💡 N'oubliez pas de commiter vos changements avec git !
diff --git a/content/intro-to-storybook/react/fr/simple-component.md b/content/intro-to-storybook/react/fr/simple-component.md
index 2c3205c1d..646adfae1 100644
--- a/content/intro-to-storybook/react/fr/simple-component.md
+++ b/content/intro-to-storybook/react/fr/simple-component.md
@@ -20,18 +20,16 @@ Lorsque nous commençons à construire une `Task`, nous écrivons d'abord nos te
## 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`.
+Tout d'abord, créons la composante "tâche" et le fichier story qui l'accompagne : `src/components/Task.jsx` et `src/components/Task.stories.jsx`.
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';
-
+```jsx:title=src/components/Task.jsx
export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
return (
-
);
@@ -42,44 +40,62 @@ Ci-dessus, nous rendons un balisage simple pour `Task` fondé sur la structure H
Ci-dessous, nous allons construire les trois états de test de Task dans le fichier story:
-```js:title=src/components/Task.stories.js
-import React from 'react';
+```jsx:title=src/components/Task.stories.jsx
+import { fn } from "@storybook/test";
import Task from './Task';
+export const ActionsData = {
+ onArchiveTask: fn(),
+ onPinTask: fn(),
+};
+
export default {
component: Task,
title: 'Task',
+ tags: ['autodocs'],
+ //👇 Our exports that end in "Data" are not stories.
+ excludeStories: /.*Data$/,
+ args: {
+ ...ActionsData,
+ },
};
-const Template = args =>
+
+💡 Les [**Actions**](https://storybook.js.org/docs/essentials/actions) vous aident à vérifier les interactions lors de la construction des composants UI en isolation. Souvent, vous n'aurez pas accès aux fonctions et à l'état que vous avez dans le contexte de l'application. Utilisez `fn()` pour les simuler.
+
+
+
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**
@@ -89,24 +105,21 @@ Il y a deux niveaux d'organisation de base dans Storybook: le composant et ses s
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
-
-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).
+- `component` -- le composant lui-même
+- `title` -- comment faire référence au composant dans la barre latérale de Storybook
+- `tags` -- pour générer automatiquement la documentation de nos composants
+- `excludeStories` -- informations supplémentaires requises par la story mais qui ne doivent pas être rendues dans Storybook
+- `args` -- définir les actions [args](https://storybook.js.org/docs/essentials/actions#action-args) que le composant attend pour simuler les événements personnalisés
-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.
-
-
-💡
+Pour définir nos stories, nous utiliserons le Component Story Format 3 (également connu sous le nom de [CSF3](https://storybook.js.org/docs/api/csf)) pour construire chacun de nos cas de test. Ce format est conçu pour élaborer nos cas de test de manière concise. En exportant un objet contenant chaque état du composant, nous pouvons définir nos tests de manière plus intuitive et créer et réutiliser les stories plus efficacement.
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'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.
+`fn()` nous permet de créer un callback qui apparaît dans le panneau **Actions** de l'interface 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.
-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.
-
-💡 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
+Comme nous devons passer le même ensemble d'actions à toutes les permutations de notre composant, il est pratique de les regrouper dans une seule variable `ActionsData` et de les passer dans notre définition de story à chaque fois. Un autre avantage du regroupement des `ActionsData` dont un composant a besoin est que vous pouvez les `export` et les utiliser dans les stories des composants qui réutilisent ce composant, comme nous le verrons plus tard.
+
+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, `export` cette forme nous permettra de la réutiliser dans des stories ultérieures, comme nous le verrons.
## Configuration
@@ -115,27 +128,22 @@ Nous devrons apporter quelques modifications à la configuration du Storybook po
Commencez par modifier le fichier de configuration de votre Storybook (`.storybook/main.js`) comme suit:
```diff:title=.storybook/main.js
-module.exports = {
-- stories: [
-- '../src/**/*.stories.mdx',
-- '../src/**/*.stories.@(js|jsx|ts|tsx)'
-- ],
-+ stories: ['../src/components/**/*.stories.js'],
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
++ stories: ['../src/components/**/*.stories.@(js|jsx)'],
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,
+ framework: {
+ name: '@storybook/react-vite',
+ options: {},
},
};
+export default config;
```
Après avoir effectué la modification ci-dessus, dans le dossier `storybook`, changez votre `preview.js` en ce qui suit:
@@ -144,26 +152,28 @@ Après avoir effectué la modification ci-dessus, dans le dossier `storybook`, c
+ 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$/,
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+ parameters: {
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
},
},
};
-```
-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.
+export default preview;
+```
-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.
+Les [`parameters`](https://storybook.js.org/docs/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 ne les utiliserons pas à cette fin. À la place, nous importerons le fichier CSS de notre application.
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:
@@ -174,14 +184,12 @@ Maintenant que nous avons configuré Storybook, importé des styles et élaboré
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:
-```js:title=src/components/Task.js
-import React from 'react';
-
+```jsx:title=src/components/Task.jsx
export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
return (
action() pour les simuler.
-
-