docs: add fr translations for architecture, getting-started, `ind…

…ex`, `testing`, and `why-bloc` (#4273)

Co-authored-by: Felix Angelov <[email protected]>

docs/src/content/docs/fr/architecture.mdx

@@ -0,0 +1,116 @@
+---
+title: Architecture
+description: Vue d'ensemble des modèles d'architecture recommandés pour l'utilisation de Bloc.
+---
+
+import DataProviderSnippet from '~/components/architecture/DataProviderSnippet.astro';
+import RepositorySnippet from '~/components/architecture/RepositorySnippet.astro';
+import BusinessLogicComponentSnippet from '~/components/architecture/BusinessLogicComponentSnippet.astro';
+import BlocTightCouplingSnippet from '~/components/architecture/BlocTightCouplingSnippet.astro';
+import BlocLooseCouplingPresentationSnippet from '~/components/architecture/BlocLooseCouplingPresentationSnippet.astro';
+import AppIdeasRepositorySnippet from '~/components/architecture/AppIdeasRepositorySnippet.astro';
+import AppIdeaRankingBlocSnippet from '~/components/architecture/AppIdeaRankingBlocSnippet.astro';
+import PresentationComponentSnippet from '~/components/architecture/PresentationComponentSnippet.astro';
+
+![Bloc Architecture](~/assets/concepts/bloc_architecture_full.png)
+
+L'utilisation de la librairie bloc nous permet de séparer notre application en trois couches :
+
+- Presentation
+- Logique Métier (Business Logic)
+- Data
+  - Repository
+  - Data Provider
+
+Nous allons commencer avec la couche la plus basse (la plus éloignée de l'interfacer utilisateur) et remonter jusqu'à la couche de Présentation.
+
+## Couche Data
+
+Le rôle de la couche Data est de récupérer et de manipuler des données provenant d'une ou plusieurs sources.
+
+La couche Data peut être divisée en deux parties :
+
+- Repository
+- Data Provider
+
+Cette couche est le niveau le plus bas de l'application, elle interagit avec les bases de données, les requêtes réseau et d'autres sources de données asynchrones.
+
+### Data Provider
+
+Le rôle du Data Provider est de fournir des données brutes. Il doit être générique et polyvalent.
+
+Le Data Provider permet généralement d’interagir avec des API simple afin d'effectuer des opérations [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete).
+Nous pourrions avoir des méthodes `createData`, `readData`, `updateData`, et `deleteData` qui feront partie de notre couche Data.
+
+<DataProviderSnippet />
+
+### Repository
+
+La couche Repository est un wrapper d'un ou plusieurs Data Provider avec lesquels la couche Bloc communique.
+
+<RepositorySnippet />
+
+Comme vous pouvez le constater, notre couche Repository peut interagir avec plusieurs Data Provider et effectuer des transformations sur les données avant de transmettre le résultat à la couche Logic Métier.
+
+## Couche Logique Métier (Business Logic layer)
+
+La fonction de la couche de Logique Métier est de répondre aux entrées provenant de la couche Présentation avec de nouveaux états. Cette couche peut dépendre d'un ou plusieurs Repository afin de récupérer les données nécessaires à la construction de l'état de l'application.
+
+Considérez la couche Logique Métier comme le pont entre l'interface utilisateur (couche Présentation) et la couche Data. La couche Logique Métier est informée des événements/actions de la couche Présentation et communique alors avec le Repository afin de construire un nouvel état que la couche Présentation pourra appliquer.
+
+<BusinessLogicComponentSnippet />
+
+### Communication de Bloc-à-Bloc
+
+Because blocs expose streams, it may be tempting to make a bloc which listens to another bloc. You should **not** do this. There are better alternatives than resorting to the code below:
+Comme les blocs mettent à disposition des flux, il peut être tentant de créer un bloc qui écoute un autre bloc. Vous ne devriez **pas** faire ça. Il existe de meilleures alternatives que le code ci-dessous :
+
+<BlocTightCouplingSnippet />
+
+Bien que le code ci-dessus ne comporte pas d'erreurs, il présente un problème plus important : il crée une dépendance entre deux blocs.
+
+En règle générale, il faut éviter à tout prix les dépendances entre deux entités de la même couche architecturale, car elles créent un couplage fort difficile à maintenir. Étant donné que ces deux blocs résident tous les deux dans la couche architecturale de la Logique Métier, aucun des deux blocs ne devraient connaître l'existence de l'un autre bloc.
+
+![Application Architecture Layers](~/assets/architecture/architecture.png)
+
+Un bloc ne doit recevoir des informations que par le biais d'événements et de Repository injectés (c'est-à-dire des Repository qui sont passés au bloc via son constructeur).
+
+Si vous êtes dans une situation où un bloc doit répondre à un autre bloc, vous avez deux autres options. Vous pouvez soit faire remonter le problème d'une couche (couche de Présentation), soit le faire descendre d'une couche (couche Domain).
+
+#### Relier des Blocs à travers la couche Présentation
+
+Vous pouvez utiliser un `BlocListener` pour écouter un bloc et ajouter un événement à un autre bloc lorsque le premier change.
+
+<BlocLooseCouplingPresentationSnippet />
+
+Le code ci-dessus empêche `SecondBloc` d'avoir besoin de connaître `FirstBloc`, créant ainsi un couplage faible. L'application [flutter_weather](/fr/tutorials/flutter-weather) [utilise cette technique](https://github.com/felangel/bloc/blob/b4c8db938ad71a6b60d4a641ec357905095c3965/examples/flutter_weather/lib/weather/view/weather_page.dart#L38-L42) pour changer le thème de l'application en fonction des informations météorologiques reçues.
+
+Dans certains cas, il n'est pas préférable de coupler deux blocs dans la couche Présentation. En revanche, il est souvent logique que deux blocs partagent la même source de données et se mettent à jour lorsque ces données changent.
+
+#### Relier des Blocs à travers la couche Domain
+
+Deux blocs peuvent écouter un flux provenant d'un Repository et mettre à jour leur état indépendamment l'un de l'autre chaque fois que les données du Repository changent. L'utilisation de Repository réactifs pour maintenir la synchronisation des états est courante dans les applications d'entreprise à grande échelle.
+
+En premier lieu, créez ou utilisez un Repository qui met à disposition un flux de données (`Stream`). Par exemple, le Repository suivant met à disposition un `Stream` infini comportant cinq idées d'applications.
+
+<AppIdeasRepositorySnippet />
+
+Le même Repository peut être injecté dans chaque bloc qui doit réagir aux nouvelles idées d'applications. Voici un `AppIdeaRankingBloc` qui crée un état pour chaque idée d'application provenant du Repository ci-dessus :
+
+<AppIdeaRankingBlocSnippet />
+
+Pour en savoir plus sur l'utilisation des flux avec Bloc, voir [How to use Bloc with streams and concurrency](https://verygood.ventures/blog/how-to-use-bloc-with-streams-and-concurrency).
+
+## Couche Presentation
+
+Le rôle de la couche Presentation est de déterminer comment elle doit s'afficher, en fonction d'un ou plusieurs états de bloc. Elle doit également gérer les entrées de l'utilisateur et les événements du cycle de vie de l'application.
+
+La plupart des flux d'applications commencent par un événement `AppStart` qui déclenche la récupération des données qui vont être présentées à l'utilisateur.
+
+Dans ce scénario, la couche Presentation provoquerait un événement `AppStart`.
+
+En plus de cela, elle devra déterminer ce qu'il faut afficher à l'écran en fonction de l'état de la couche Bloc.
+
+<PresentationComponentSnippet />
+
+Jusqu'à présent, bien que nous ayons vu quelques extraits de code, tout cela est resté assez théorique. Dans la section tutoriel, nous allons mettre en pratique ces concepts en réalisant plusieurs exemples d'applications.

docs/src/content/docs/fr/getting-started.mdx

@@ -0,0 +1,35 @@
+---
+title: Démarrer
+description: Tout le nécessaire pour débuter avec Bloc.
+---
+
+import InstallationTabs from '~/components/getting-started/InstallationTabs.astro';
+import ImportTabs from '~/components/getting-started/ImportTabs.astro';
+
+## Packages
+
+L'écosystème bloc contient plusieurs packages listés ci-dessous :
+
+| Packages                                                                                   | Description                 | Lien                                                                                                           |
+| ------------------------------------------------------------------------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| [angular_bloc](https://github.com/felangel/bloc/tree/master/packages/angular_bloc)         | AngularDart Components      | [![pub package](https://img.shields.io/pub/v/angular_bloc.svg)](https://pub.dev/packages/angular_bloc)         |
+| [bloc](https://github.com/felangel/bloc/tree/master/packages/bloc)                         | Core Dart APIs              | [![pub package](https://img.shields.io/pub/v/bloc.svg)](https://pub.dev/packages/bloc)                         |
+| [bloc_concurrency](https://github.com/felangel/bloc/tree/master/packages/bloc_concurrency) | Event Transformers          | [![pub package](https://img.shields.io/pub/v/bloc_concurrency.svg)](https://pub.dev/packages/bloc_concurrency) |
+| [bloc_test](https://github.com/felangel/bloc/tree/master/packages/bloc_test)               | Testing APIs                | [![pub package](https://img.shields.io/pub/v/bloc_test.svg)](https://pub.dev/packages/bloc_test)               |
+| [flutter_bloc](https://github.com/felangel/bloc/tree/master/packages/flutter_bloc)         | Flutter Widgets             | [![pub package](https://img.shields.io/pub/v/flutter_bloc.svg)](https://pub.dev/packages/flutter_bloc)         |
+| [hydrated_bloc](https://github.com/felangel/bloc/tree/master/packages/hydrated_bloc)       | Caching/Persistence Support | [![pub package](https://img.shields.io/pub/v/hydrated_bloc.svg)](https://pub.dev/packages/hydrated_bloc)       |
+| [replay_bloc](https://github.com/felangel/bloc/tree/master/packages/replay_bloc)           | Undo/Redo Support           | [![pub package](https://img.shields.io/pub/v/replay_bloc.svg)](https://pub.dev/packages/replay_bloc)           |
+
+## Installation
+
+<InstallationTabs />
+
+:::note
+Pour commencer à utiliser bloc, le [Dart SDK](https://dart.dev/get-dart) doit préalablement être installé sur votre machine.
+:::
+
+## Imports
+
+Maintenant que nous avons installé Bloc avec succès, nous pouvons créer notre fichier `main.dart` et importer le package `bloc`.
+
+<ImportTabs />

docs/src/content/docs/fr/index.mdx

@@ -0,0 +1,83 @@
+---
+template: splash
+title: Bloc State Management Library
+description: Documentation officielle de la bibliothèque de gestion d'état Bloc. Supportée pour Dart, Flutter et AngularDart. Inclut des exemples et des tutoriels.
+banner:
+  content: |
+    ✨ Visite le
+    <a href="https://shop.bloclibrary.dev">Bloc Shop</a> ✨
+editUrl: false
+lastUpdated: false
+hero:
+  title: Bloc <sup><span style="font-size:0.4em">v8.1.4</span></sup>
+  tagline: Une bibliothèque de gestion d'états prévisibles pour Dart.
+  image:
+    alt: Bloc logo
+    file: ~/assets/bloc.svg
+  actions:
+    - text: Démarrer
+      link: /fr/getting-started/
+      variant: primary
+      icon: rocket
+    - text: Voir sur GitHub
+      link: https://github.com/felangel/bloc
+      icon: github
+      variant: secondary
+---
+
+import { CardGrid } from '@astrojs/starlight/components';
+import SponsorsGrid from '~/components/landing/SponsorsGrid.astro';
+import Card from '~/components/landing/Card.astro';
+import ListCard from '~/components/landing/ListCard.astro';
+import SplitCard from '~/components/landing/SplitCard.astro';
+import Discord from '~/components/landing/Discord.astro';
+
+<SponsorsGrid />
+
+<hr />
+
+<CardGrid>
+
+<SplitCard title="Démarrer" icon="rocket">
+	```sh
+	# Ajoute un bloc ton projet
+	dart pub add bloc
+	```
+
+Notre [guide de démarrage](/fr/getting-started) possède des instructions étape par étape pour commencer à utiliser Bloc en quelques minutes seulement.
+
+</SplitCard>
+
+<Card title="Explorer avec des tutoriels" icon="star">
+	Complète les [tutoriels officiels](/fr/tutorials/flutter-counter) pour
+	apprendre les meilleures pratiques et créer une variété d'applications avec
+	Bloc.
+</Card>
+
+<Card title="Développer avec Bloc" icon="laptop">
+	Explore des [applications
+	demo](https://github.com/felangel/bloc/tree/master/examples) de qualité et
+	entièrement testées telles qu'un compteur, un minuteur, une liste infinie, une
+	application de météo, une todo-list et plus encore!
+</Card>
+
+<ListCard title="Apprendre" icon="open-book">
+
+    - [Pourquoi utiliser Bloc?](/fr/why-bloc)
+    - [Concepts fondamentaux](/fr/bloc-concepts)
+    - [Architecture](/fr/architecture)
+    - [Tester](/fr/testing)
+    - [Conventions de nommage](/fr/naming-conventions)
+
+</ListCard>
+
+  <ListCard title="Intégration" icon="puzzle">
+    - [Intégration pour VSCode](https://marketplace.visualstudio.com/items?itemName=FelixAngelov.bloc)
+    - [Intégration pour IntelliJ](https://plugins.jetbrains.com/plugin/12129-bloc)
+    - [Intégration de Mason CLI ](https://github.com/felangel/bloc/blob/master/bricks/README.md)
+    - [Templates customisées](https://brickhub.dev/search?q=bloc)
+    - [Outils de développeur](https://github.com/felangel/bloc/issues/2748)
+  </ListCard>
+</CardGrid>
+
+<Discord />

docs/src/content/docs/fr/testing.mdx

@@ -0,0 +1,64 @@
+---
+title: Tester
+description: Les bases de l'écriture de tests pour vos blocs.
+---
+
+import CounterBlocSnippet from '~/components/testing/CounterBlocSnippet.astro';
+import AddDevDependenciesSnippet from '~/components/testing/AddDevDependenciesSnippet.astro';
+import CounterBlocTestImportsSnippet from '~/components/testing/CounterBlocTestImportsSnippet.astro';
+import CounterBlocTestMainSnippet from '~/components/testing/CounterBlocTestMainSnippet.astro';
+import CounterBlocTestSetupSnippet from '~/components/testing/CounterBlocTestSetupSnippet.astro';
+import CounterBlocTestInitialStateSnippet from '~/components/testing/CounterBlocTestInitialStateSnippet.astro';
+import CounterBlocTestBlocTestSnippet from '~/components/testing/CounterBlocTestBlocTestSnippet.astro';
+
+Bloc a été conçu pour être extrêmement facile à tester. Dans cette section, nous allons voir comment tester un bloc de manière unitaire.
+
+Par souci de simplicité, nous allons écrire des tests pour le `CounterBloc` que nous avons créé dans [Core Concepts](/fr/bloc-concepts).
+
+Pour rappel, l'implémentation du `CounterBloc` ressemble à ceci:
+
+<CounterBlocSnippet />
+
+## Configuration
+
+Avant de commencer à écrire nos tests, nous avons besoin d'ajouter des framework de test dans nos dépendances,
+
+Nous allons ajouter les packages [test](https://pub.dev/packages/test) et [bloc_test](https://pub.dev/packages/bloc_test) à notre projet.
+
+<AddDevDependenciesSnippet />
+
+## Tester
+
+Commençons par créer le fichier `counter_bloc_test.dart` afin de tester notre `CounterBloc` et importons le package de test.
+
+<CounterBlocTestImportsSnippet />
+
+Ensuite, nous devons créer notre `main` ainsi que notre groupe de tests.
+
+<CounterBlocTestMainSnippet />
+
+:::note
+Les groupes servent à organiser des tests unitaires et à créer un contexte dans lequel vous pouvez partager un `setUp` et un `tearDown` communs à tous les tests du groupe.
+:::
+
+Commençons par créer une instance de notre `CounterBloc` qui sera utilisée dans tous nos tests.
+
+<CounterBlocTestSetupSnippet />
+
+Maintenant, nous pouvons commencer à écrire des tests unitaires.
+
+<CounterBlocTestInitialStateSnippet />
+
+:::note
+Nous pouvons exécuter tous nos tests avec la commande `dart test`.
+:::
+
+À ce stade, nous devrions avoir notre premier test réussi! Écrivons maintenant des tests plus complexes en utilisant le package [bloc_test](https://pub.dev/packages/bloc_test).
+
+<CounterBlocTestBlocTestSnippet />
+
+Nous devrions être en mesure d'exécuter les tests et de constater qu'ils passent tous.
+
+C'est aussi simple que ça, tester devrait être un jeu d'enfant et nous devrions nous sentir en confiance lorsque nous apportons des modifications et que nous refactorisons notre code.
+
+Vous pouvez vous référer à l'application [Weather App](https://github.com/felangel/bloc/tree/master/examples/flutter_weather) pour un exemple d'application entièrement testée.

docs/src/content/docs/fr/why-bloc.mdx

@@ -0,0 +1,31 @@
+---
+title: Pourquoi utiliser Bloc?
+description: Un aperçu de ce qui fait de Bloc une solution solide pour la gestion d’états.
+sidebar:
+  order: 1
+---
+
+Bloc permet de facilement séparer les composants visuels de la logique métier, rendant votre code `rapide`, `facile à tester` et `réutilisable`.
+
+Lorsqu'on développe des application de qualité destinées à être utilisé en production, la gestion des états devient critique.
+
+En tant que développeurs, nous souhaitons :
+
+- connaître l'état de notre application à tout moment.
+- tester facilement chaque cas pour nous assurer que notre application réagit correctement.
+- enregistrer chaque interaction utilisateur dans notre application
+- travailler de manière aussi efficace que possible et réutiliser des composants au sein de notre application ainsi que dans des applications différentes.
+- permettre à de nombreux développeurs de travailler en harmonie en suivant des modèles et des conventions communes.
+- développer des applications performantes et réactives.
+
+Bloc a été conçu pour répondre à tous ces besoins et bien plus encore.
+
+Il existe beaucoup de solutions pour gérer les états et décider laquelle utiliser peut être une tâche laborieuse. Il n'y a pas de solution parfaite! Ce qui est important est de choisir celle qui correspond le mieux à ton équipe et à ton projet.
+
+Bloc a été conçu avec trois principes fondamentaux en tête :
+
+- **Simple:** Facile à comprendre et utilisable par des développeurs de niveaux variés.
+- **Puissant:** Aide à faire des applications complexes en les assemblant à partir de composants plus simples.
+- **Testable:** Permet de tester facilement tous les aspects d'une application afin de pouvoir itérer en toute confiance.
+
+Globalement, Bloc tente de rendre les changements d'état prévisibles en réglementant le moment où un changement d'état peut se produire et en imposant une unique façon de changer d'état dans l'ensemble d'une application.