French translation - design systems for developers | react #777

justine-tarlet · 2024-09-21T10:21:49Z

Description

Here is the pull request for the french translation of design systems for developers (react version) : https://storybook.js.org/tutorials/design-systems-for-developers/react/en/introduction/.
I hope I opened the PR the right way 😄 , this is my first contribution, tell me if there is any problem.

Notes for translation

Here is some main vocabulary and suggested translations:

design system / design systems : in french we usually keep this word in english
package: I also wouldn't translate it
project token: token de projet ?
commit: sometimes I see commiter but we can also say effectuer un commit
review: I see a lot of variants, I chose relecture and revue
addons: I used modules complémentaires and also simply addons
worklow: not so sure about this one, I translated it with flux de travail but we could also leave workflow

Hope this translation will help 🙏 feel free to ask questions and make some feedbacks.

Have a nice day!

jeanphi-baconnais

Wow great job @justine-tarlet 👏
I just quickly looked, I will continue this week

jeanphi-baconnais · 2024-09-23T10:43:30Z

content/design-systems-for-developers/react/fr/architecture.md

+commit: '341ea8a'
+---
+
+Dans ce chapitre 2, nous allons créer un design system à partir de librairies de composants existantes. Nous déterminerons au fur et à mesure quels composants correspondent au design system et nous mettrons en avant les défis communs que rencontrent les développeurs au début de ce processus.


développeurs et développeuses ?
je vois que tu as mis cette syntaxe pour les contributeurs et contributrices, alors je me permets cette question, je ne sais pas / plus si l'écriture inclusive est réalisée dans la documentation 🙂

Ahh oui , il ne me semble pas qu'elle soit employée dans les autres traductions en français, je ne la vois pas non plus dans les autres langues (ou alors on a des mots neutres propres aux langues en question) !

Hello, c'est une spécificité français 😁

jeanphi-baconnais · 2024-09-23T10:47:58Z

content/design-systems-for-developers/react/fr/workflow.md

+
+## Partager
+
+Nous avons une pull request ouverte qui ajoute `AvatarList` au design system. Nous avons écrit nos stories, les tests sont passés et la documentation existe. Enfin, nous sommes prêts à mettre à jour notre design system avec Auto et npm. Ajouter le label « minor » à la PR. Cela indique à Auto de mettre à jour la version mineure du paquet lors du merge.


parfois pull request, parfois PR, je n'ai pas encore vu la première fois que Pull Request est écrit mais il peut être écrit en mode Pull Request (PR).

Hello, merci pour ces premiers retours ! Je vais faire une vérification l) où certains mot ont des abréviations / sigles pour chaque page, histoire d'avoir en effet une définition avant d'utiliser l'abréviation ou le sigle, à minima à la première occurrence du mot 😄 !

✔️ Modifications effectuées dans ce commit : 09840fd
👉 J'ai utilisé ce format : Pull Request (PR) et utilisé PR dans les cas où le mot apparaissait dans le même paragraphe

jeanphi-baconnais · 2024-10-04T13:54:31Z

content/design-systems-for-developers/react/fr/architecture.md

+
+## Le défi
+
+Si vous travaillez au sein d'une équipe de développement, vous avez probablement remarqué que grandes les équipes ne sont pas les plus efficaces. Une mauvaise communication peut vite s'installer au fur et à mesure que les équipes grandissent. Les modèles d'interface utilisateur existants ne sont pas documentés ou sont totalement abandonnés. En d'autres termes, les développeurs tentent de réinventer la roue plutôt que de développer de nouvelles fonctionnalités. Au fil du temps, les projets sont remplis de composants uniques.


remarqué que **grandes** les équipes ?

Que les grandes équipes ne sont pas les plus efficaces ?

✔️ Corrigé dans ce commit : a3374aa

jeanphi-baconnais · 2024-10-04T13:56:02Z

content/design-systems-for-developers/react/fr/architecture.md

+
+## Créer un dépôt dans GitHub
+
+React est la couche de visualisation (view layer) la plus populaire selon l'enquête de [State of JS](https://stateofjs.com/). Un nombre incalculable de Storybooks utilisent React : c'est la raison pour laquelle nous l'utiliserons dans ce tutoriel pour créer notre design system.


de Storybooks: de composants Storybooks ?

✔️ Corrigé dans ce commit : a3374aa

jeanphi-baconnais · 2024-10-04T13:56:52Z

content/design-systems-for-developers/react/fr/architecture.md

+
+![Commit initial dans le dépôt GitHub](/design-systems-for-developers/created-github-repository.png)
+
+<div class="aside">💡 D'autres méthodes valables existent pour créer un design system comme le HTML/CSS bruts, l'utilisation d'autres couches de visualisation, la compilation de composants avec Svelte ou l'utilisation de composants web. Choisissez ce qui convient le mieux à votre équipe.</div>


bruts-> brut ?

✔️ Corrigé dans ce commit : a3374aa

jeanphi-baconnais · 2024-10-04T13:58:45Z

content/design-systems-for-developers/react/fr/architecture.md

+
+## Ce qui appartient au design system et ce qui n’en fait pas partie
+
+Les design systems ne devraient contenir que des composants purs et destinés à l'affichage. Ces composants sont liés à l'affichage au sein de l'interface utilisateur, ne fonctionnent qu'avec des propriétés et ne contiennent pas de logique métier ou spécifique à une application, ils ne sont pas déterminants dans le chargement de données. Ces propriétés sont essentielles pour rendre un composant réutilisable.


composants purs : cela me fait drôle de voir cette notion de purpour un composant. Je fais ma relecture sans lire la version anglaise mais grammaticalement, cela fait drole.

✔️ Corrigé dans ce commit : a3374aa
👉 Je suis d'accord que ce terme est un peu étrange en français. Je propose une définition entre paranthèses, tout en conservant ce mot (je le vois utilisé en FR dans les documentations React par exemple). N'hésite pas si tu vois une meilleure proposition 😄

jeanphi-baconnais · 2024-10-04T14:12:23Z

content/design-systems-for-developers/react/fr/conclusion.md

+
+Des études appuyées par des recherches suggèrent que la réutilisation du code peut permettre de gagner [42-81% de temps](https://www.researchgate.net/publication/3188437_Evaluating_Software_Reuse_Alternatives_A_Model_and_Its_Application_to_an_Industrial_Case_Study?ev=publicSearchHeader&_sg=g8WraNGZNGPw0R-1-jGpy0XwUDeAr3qb472J6lhisyQ3l24pSmndO6anMdX2L3HdWHifsczPegR9wjA) et d'augmenter la productivité de [40%](http://www.cin.ufpe.br/~in1045/papers/art03.pdf). Il n'est donc pas surprenant que les design systems, qui facilitent le partage du **code de l'interface utilisateur**, soient de plus en plus populaires auprès des développeurs.
+
+Au cours des dernières années, Tom et moi avons vu d'innombrables équipes chevronnées ancrer leur design system autour de Storybook. Ils se sont concentrés sur la réduction des frais généraux de communication, sur une architecture durable et sur l'automatisation des tâches manuelles répétitives.


Tom et moi, moi ?

Corrigé dans ce commit : fab2e24
👉 C'est pas défini dans la documentation en anglais, qui est ce "I", mais j'ai du coup quand même mis le nom de l'autre auteur entre parenthèses, histoire de comprendre de qui on parle 😄

jeanphi-baconnais · 2024-10-04T14:13:39Z

content/design-systems-for-developers/react/fr/conclusion.md

+
+#### N'y a-t-il pas plus que cela dans les design system ?
+
+Les design system comprennent (sans s'y limiter) les fichiers de design, les librairies de composants, les design tokens, la documentation, les principes et les flux de travail et de contribution. Le guide est axé sur le point de vue du développeur sur les design systems et nous couvrons donc un sous-ensemble de sujets. Plus précisément, les détails techniques, les API et l'infrastructure qui entrent dans la composition des design system de la production.


Les design system: tu as mis un 's' à system dans toute la doc 🙂

Oups 😄
✔️ Corrigé dans ce commit : c436dcb

jeanphi-baconnais · 2024-10-04T14:15:05Z

content/design-systems-for-developers/react/fr/introduction.md

+
+Les design systems connaissent une popularité fulgurante. Des poids lourds en matière de tech comme Airbnb aux petites startups, les entreprises de toutes tailles réutilisent des modèles d'interface utilisateur (User Interface ou UI) dans le but de faire des économies de temps et d'argent. Il y a cependant une grande différence entre les design systems créés par la BBC, Airbnb, IBM ou Microsoft et les design systems créés par la plupart des développeurs.
+
+Pourquoi les équipes en charge des design systems utilisent ces outils et ces techniques en particulier ? Mon co-auteur Tom et moi avons recherché les caractéristiques des design systems les plus réussis de la communauté Storybook afin d'identifier les meilleures pratiques.


Mon co-auteur Tom et moi: notion du 'moi'

Corrigé dans ce commit : fab2e24
👉 C'est pas défini dans la documentation en anglais, qui est ce "I", mais j'ai du coup quand même mis le nom de l'autre auteur entre parenthèses, histoire de comprendre de qui on parle 😄

jeanphi-baconnais · 2024-10-04T14:16:41Z

content/design-systems-for-developers/react/fr/review.md

+
+### Établir un point de référence universel
+
+Supprimer les node_modules. Réinstaller les packages. Effacer le stockage local.


les node_modules : le contenu du répertoire node_modules

✔️ Corrigé dans ce commit : b527adb

justine-tarlet added 9 commits September 21, 2024 12:03

translation(content): introduction.md

8c849c5

translation(content): architecture.md

fdfc96d

translation(content): build.md

1ff1190

translation(content): review.md

56308d6

translation(content): test.md

3102e75

translation(content): distribute.md

6f4fade

translation(content): document.md

396bfac

translation(content): workflow.md

525b2de

translation(content): conclusion.md

dd75c6c

justine-tarlet mentioned this pull request Sep 21, 2024

Translations wanted #3

Open

jeanphi-baconnais reviewed Sep 23, 2024

View reviewed changes

jeanphi-baconnais reviewed Oct 4, 2024

View reviewed changes

justine-tarlet added 5 commits October 20, 2024 15:42

definitions: add PR after Pull Request definition

09840fd

typos: fix typos and add a pure component explanation

a3374aa

typo: use design system instead of design systems

c436dcb

add details to node_modules definition

b527adb

authors definition : add context to "Tom and I"

fab2e24

justine-tarlet requested a review from jeanphi-baconnais October 20, 2024 14:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

French translation - design systems for developers | react #777

French translation - design systems for developers | react #777

justine-tarlet commented Sep 21, 2024 •

edited

Loading

jeanphi-baconnais left a comment

jeanphi-baconnais Sep 23, 2024

justine-tarlet Oct 2, 2024

jeanphi-baconnais Oct 4, 2024

jeanphi-baconnais Sep 23, 2024

justine-tarlet Oct 2, 2024

justine-tarlet Oct 20, 2024

jeanphi-baconnais Oct 4, 2024

justine-tarlet Oct 20, 2024

jeanphi-baconnais Oct 4, 2024

justine-tarlet Oct 20, 2024

jeanphi-baconnais Oct 4, 2024

justine-tarlet Oct 20, 2024

jeanphi-baconnais Oct 4, 2024

justine-tarlet Oct 20, 2024

jeanphi-baconnais Oct 4, 2024

justine-tarlet Oct 20, 2024

jeanphi-baconnais Oct 4, 2024

justine-tarlet Oct 20, 2024

jeanphi-baconnais Oct 4, 2024

justine-tarlet Oct 20, 2024

jeanphi-baconnais Oct 4, 2024

justine-tarlet Oct 20, 2024


		## Partager

		Nous avons une pull request ouverte qui ajoute `AvatarList` au design system. Nous avons écrit nos stories, les tests sont passés et la documentation existe. Enfin, nous sommes prêts à mettre à jour notre design system avec Auto et npm. Ajouter le label « minor » à la PR. Cela indique à Auto de mettre à jour la version mineure du paquet lors du merge.


		## Le défi

		Si vous travaillez au sein d'une équipe de développement, vous avez probablement remarqué que grandes les équipes ne sont pas les plus efficaces. Une mauvaise communication peut vite s'installer au fur et à mesure que les équipes grandissent. Les modèles d'interface utilisateur existants ne sont pas documentés ou sont totalement abandonnés. En d'autres termes, les développeurs tentent de réinventer la roue plutôt que de développer de nouvelles fonctionnalités. Au fil du temps, les projets sont remplis de composants uniques.


		## Créer un dépôt dans GitHub

		React est la couche de visualisation (view layer) la plus populaire selon l'enquête de [State of JS](https://stateofjs.com/). Un nombre incalculable de Storybooks utilisent React : c'est la raison pour laquelle nous l'utiliserons dans ce tutoriel pour créer notre design system.


		![Commit initial dans le dépôt GitHub](/design-systems-for-developers/created-github-repository.png)

		<div class="aside">💡 D'autres méthodes valables existent pour créer un design system comme le HTML/CSS bruts, l'utilisation d'autres couches de visualisation, la compilation de composants avec Svelte ou l'utilisation de composants web. Choisissez ce qui convient le mieux à votre équipe.</div>


		## Ce qui appartient au design system et ce qui n’en fait pas partie

		Les design systems ne devraient contenir que des composants purs et destinés à l'affichage. Ces composants sont liés à l'affichage au sein de l'interface utilisateur, ne fonctionnent qu'avec des propriétés et ne contiennent pas de logique métier ou spécifique à une application, ils ne sont pas déterminants dans le chargement de données. Ces propriétés sont essentielles pour rendre un composant réutilisable.


		Des études appuyées par des recherches suggèrent que la réutilisation du code peut permettre de gagner [42-81% de temps](https://www.researchgate.net/publication/3188437_Evaluating_Software_Reuse_Alternatives_A_Model_and_Its_Application_to_an_Industrial_Case_Study?ev=publicSearchHeader&_sg=g8WraNGZNGPw0R-1-jGpy0XwUDeAr3qb472J6lhisyQ3l24pSmndO6anMdX2L3HdWHifsczPegR9wjA) et d'augmenter la productivité de [40%](http://www.cin.ufpe.br/~in1045/papers/art03.pdf). Il n'est donc pas surprenant que les design systems, qui facilitent le partage du code de l'interface utilisateur, soient de plus en plus populaires auprès des développeurs.

		Au cours des dernières années, Tom et moi avons vu d'innombrables équipes chevronnées ancrer leur design system autour de Storybook. Ils se sont concentrés sur la réduction des frais généraux de communication, sur une architecture durable et sur l'automatisation des tâches manuelles répétitives.


		#### N'y a-t-il pas plus que cela dans les design system ?

		Les design system comprennent (sans s'y limiter) les fichiers de design, les librairies de composants, les design tokens, la documentation, les principes et les flux de travail et de contribution. Le guide est axé sur le point de vue du développeur sur les design systems et nous couvrons donc un sous-ensemble de sujets. Plus précisément, les détails techniques, les API et l'infrastructure qui entrent dans la composition des design system de la production.


		Les design systems connaissent une popularité fulgurante. Des poids lourds en matière de tech comme Airbnb aux petites startups, les entreprises de toutes tailles réutilisent des modèles d'interface utilisateur (User Interface ou UI) dans le but de faire des économies de temps et d'argent. Il y a cependant une grande différence entre les design systems créés par la BBC, Airbnb, IBM ou Microsoft et les design systems créés par la plupart des développeurs.

		Pourquoi les équipes en charge des design systems utilisent ces outils et ces techniques en particulier ? Mon co-auteur Tom et moi avons recherché les caractéristiques des design systems les plus réussis de la communauté Storybook afin d'identifier les meilleures pratiques.


		### Établir un point de référence universel

		Supprimer les node_modules. Réinstaller les packages. Effacer le stockage local.

French translation - design systems for developers | react #777

Are you sure you want to change the base?

French translation - design systems for developers | react #777

Conversation

justine-tarlet commented Sep 21, 2024 • edited Loading

Description

Notes for translation

jeanphi-baconnais left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justine-tarlet commented Sep 21, 2024 •

edited

Loading