Docs: Intro to Storybook (React) - Update the french doc based on the english version

content/intro-to-storybook/react/fr/composite-component.md

@@ -19,13 +19,11 @@ Comme les données de `Task` peuvent être envoyées de manière asynchrone, nou
 
 ## Se préparer
 
-Un composant complexe n'est pas très différent des composants de base qu'il contient. Créez un composant `TaskList` et sa story associée: `src/components/TaskList.js` et `src/components/TaskList.stories.js`.
+Un composant complexe n'est pas très différent des composants de base qu'il contient. Créez un composant `TaskList` et sa story associée: `src/components/TaskList.jsx` et `src/components/TaskList.stories.jsx`.
 
 Commencez par une implémentation simpliste de la `TaskList`. Vous devrez importer le composant `Task` de la version précédente, puis lui passer les attributs et les actions en entrée.
 
-```js:title=src/components/TaskList.js
-import React from 'react';
-
+```jsx:title=src/components/TaskList.jsx
 import Task from './Task';
 
 export default function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
@@ -54,61 +52,66 @@ export default function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
 
 Ensuite, créez les états de test de la `Tasklist` dans la story.
 
-```js:title=src/components/TaskList.stories.js
-import React from 'react';
-
+```jsx:title=src/components/TaskList.stories.jsx
 import TaskList from './TaskList';
+
 import * as TaskStories from './Task.stories';
 
 export default {
   component: TaskList,
   title: 'TaskList',
-  decorators: [story => <div style={{ padding: '3rem' }}>{story()}</div>],
+  decorators: [(story) => <div style={{ margin: '3rem' }}>{story()}</div>],
+  tags: ['autodocs'],
+  args: {
+    ...TaskStories.ActionsData,
+  },
 };
 
-const Template = args => <TaskList {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  // Shaping the stories through args composition.
-  // The data was inherited from the Default story in Task.stories.js.
-  tasks: [
-    { ...TaskStories.Default.args.task, id: '1', title: 'Task 1' },
-    { ...TaskStories.Default.args.task, id: '2', title: 'Task 2' },
-    { ...TaskStories.Default.args.task, id: '3', title: 'Task 3' },
-    { ...TaskStories.Default.args.task, id: '4', title: 'Task 4' },
-    { ...TaskStories.Default.args.task, id: '5', title: 'Task 5' },
-    { ...TaskStories.Default.args.task, id: '6', title: 'Task 6' },
-  ],
+export const Default = {
+  args: {
+    // Shaping the stories through args composition.
+    // The data was inherited from the Default story in Task.stories.jsx.
+    tasks: [
+      { ...TaskStories.Default.args.task, id: '1', title: 'Task 1' },
+      { ...TaskStories.Default.args.task, id: '2', title: 'Task 2' },
+      { ...TaskStories.Default.args.task, id: '3', title: 'Task 3' },
+      { ...TaskStories.Default.args.task, id: '4', title: 'Task 4' },
+      { ...TaskStories.Default.args.task, id: '5', title: 'Task 5' },
+      { ...TaskStories.Default.args.task, id: '6', title: 'Task 6' },
+    ],
+  },
 };
 
-export const WithPinnedTasks = Template.bind({});
-WithPinnedTasks.args = {
-  // Shaping the stories through args composition.
-  // Inherited data coming from the Default story.
-  tasks: [
-    ...Default.args.tasks.slice(0, 5),
-    { id: '6', title: 'Task 6 (pinned)', state: 'TASK_PINNED' },
-  ],
+export const WithPinnedTasks = {
+  args: {
+    tasks: [
+      ...Default.args.tasks.slice(0, 5),
+      { id: '6', title: 'Task 6 (pinned)', state: 'TASK_PINNED' },
+    ],
+  },
 };
 
-export const Loading = Template.bind({});
-Loading.args = {
-  tasks: [],
-  loading: true,
+export const Loading = {
+  args: {
+    tasks: [],
+    loading: true,
+  },
 };
 
-export const Empty = Template.bind({});
-Empty.args = {
-  // Shaping the stories through args composition.
-  // Inherited data coming from the Loading story.
-  ...Loading.args,
-  loading: false,
+export const Empty = {
+  args: {
+    // Shaping the stories through args composition.
+    // Inherited data coming from the Loading story.
+    ...Loading.args,
+    loading: false,
+  },
 };
 ```
 
 <div class="aside">
-<a href="https://storybook.js.org/docs/react/writing-stories/decorators"><b>Les décorateurs</b></a> sont un moyen de fournir une encapsulation arbitraire aux stories. Dans notre cas, nous utilisons une clé (`key`) de décorateur dans l'export par défaut pour ajouter du `padding` autour du composant rendu. Ils peuvent également être utilisés pour encapsuler des stories dans des "providers" - c'est-à-dire des composants de bibliothèque qui définissent le contexte de React.
+
+💡 Les [**décorateurs**](https://storybook.js.org/docs/writing-stories/decorators) sont un moyen de fournir des enveloppes arbitraires aux stories. Dans ce cas, nous utilisons une clé de décorateur dans l'export par défaut pour ajouter une `margin` autour du composant rendu. Ils peuvent également être utilisés pour encapsuler des stories dans des "providers" - c'est-à-dire des composants de bibliothèque qui définissent le contexte React.
+
 </div>
 
 En important `TaskStories`, nous avons pu [composer](https://storybook.js.org/docs/react/writing-stories/args#args-composition) les arguments (args pour faire court) de nos stories avec un minimum d'effort. De cette façon, les données et les actions (callbacks simulés) attendues par les deux composants sont préservées.
@@ -117,7 +120,7 @@ Maintenant, regardez les nouvelles stories de la `TaskList` dans Storybook.
 
 <video autoPlay muted playsInline loop>
   <source
-    src="/intro-to-storybook/inprogress-tasklist-states-6-0.mp4"
+    src="/intro-to-storybook/inprogress-tasklist-states-7-0.mp4"
     type="video/mp4"
   />
 </video>
@@ -126,9 +129,7 @@ Maintenant, regardez les nouvelles stories de la `TaskList` dans Storybook.
 
 Notre composant est encore rudimentaire, mais nous avons maintenant une idée des stories à travailler. Vous pensez peut-être que la présentation de la `.list-items` est trop simpliste. Vous avez raison - dans la plupart des cas, nous ne créerions pas un nouveau composant juste pour ajouter une enveloppe. Mais la **réelle complexité** du composant `TaskList` est révélée dans les cas particuliers `withPinnedTasks`, `loading`, et `empty`.
 
-```js:title=src/components/TaskList.js
-import React from 'react';
-
+```jsx:title=src/components/TaskList.jsx
 import Task from './Task';
 
 export default function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
@@ -169,8 +170,8 @@ export default function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
   }
 
   const tasksInOrder = [
-    ...tasks.filter((t) => t.state === "TASK_PINNED"),
-    ...tasks.filter((t) => t.state !== "TASK_PINNED"),
+    ...tasks.filter((t) => t.state === 'TASK_PINNED'),
+    ...tasks.filter((t) => t.state !== 'TASK_PINNED'),
   ];
   return (
     <div className="list-items">
@@ -186,7 +187,7 @@ Les balises ajoutées donnent l'interface suivante :
 
 <video autoPlay muted playsInline loop>
   <source
-    src="/intro-to-storybook/finished-tasklist-states-6-0.mp4"
+    src="/intro-to-storybook/finished-tasklist-states-7-0.mp4"
     type="video/mp4"
   />
 </video>
@@ -197,8 +198,7 @@ Notez la position de l'élément épinglé dans la liste. Nous voulons que l'él
 
 Au fur et à mesure que le composant grossit, le nombre de données à l'entrée augmente également. Définissez les exigences en matière de props de la `TaskList`. Comme `Task` est un composant enfant, assurez-vous de fournir des données de la bonne manière pour le rendu. Pour gagner du temps et épargner des soucis, réutilisez les `propTypes` que vous avez définis dans `Task` précédemment.
 
-```diff:title=src/components/TaskList.js
-import React from 'react';
+```diff:title=src/components/TaskList.jsx
 + import PropTypes from 'prop-types';
 
 import Task from './Task';
@@ -241,8 +241,8 @@ export default function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
   }
 
   const tasksInOrder = [
-    ...tasks.filter((t) => t.state === "TASK_PINNED"),
-    ...tasks.filter((t) => t.state !== "TASK_PINNED"),
+    ...tasks.filter((t) => t.state === 'TASK_PINNED'),
+    ...tasks.filter((t) => t.state !== 'TASK_PINNED'),
   ];
   return (
     <div className="list-items">
@@ -269,5 +269,5 @@ export default function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
 ```
 
 <div class="aside">
-💡 N'oubliez pas de commiter vos changements avec git!
+💡 N'oubliez pas de commiter vos changements avec git !
 </div>

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)
 <br/>
+
 [🌎 **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.

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 = [
 ```
 
 <div class="aside">
-💡 <code>excludeStories</code> 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 <a href="https://storybook.js.org/docs/react/api/csf">documentation Storybook</a>.
+
+💡 `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).
+
 </div>
 
 <video autoPlay muted playsInline loop>
   <source
-    src="/intro-to-storybook/finished-tasklist-states-6-4-optimized.mp4"
+    src="/intro-to-storybook/finished-tasklist-states-7-0-optimized.mp4"
     type="video/mp4"
   />
 </video>
 
 <div class="aside">
-💡 N'oubliez pas de commiter vos changements avec git!
+💡 N'oubliez pas de commiter vos changements avec git !
 </div>
 
 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.

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 <a href="https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook">Chromatic</a>, 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,23 +89,29 @@ 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
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
 ```
 
-<div class="aside"><p>💡 Pour des raisons de sécurité <a href="https://docs.github.com/fr/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository">les secrets de GitHub</a> 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 <code>projet-token</code>.</p></div>
+<div class="aside">
+
+💡 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`.
+
+</div>
 
 ### 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.
 
-![Lien Storybook sur Chromatic](/intro-to-storybook/chromatic-build-storybook-link-6-4-optimized.png)
+![Lien Storybook sur Chromatic](/intro-to-storybook/chromatic-build-storybook-link.png)
 
 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 💅.

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
 ```
 
-<div class="aside">
-💡 Nous avons ajouté le drapeau <code>--watchAll</code> à 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 <code>package.json</code> .
-</div>
-
-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.
 
-![les 3 modules](/intro-to-storybook/app-three-modalities.png)
+![Modalités principales](/intro-to-storybook/app-main-modalities-react.png)
 
 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.