Comment Talend centralise Coral son Design System avec Storybook ?

Dans ce 12e évènement de Design Systems France, Monia et Fabien de Talend nous expliquent et montrent en live leur workflow pour centraliser leur Design System dans un seul et même outil : Storybook. On y parle de leur contexte et organisation avec une démo en direct du workflow, l'utilisation de Storybook pour centraliser le tout dans le Design System et aussi des tests via Chromatic. 📚 Chapitres --------------------- 0:00 - Intro 1:58 - Contexte 11:03 - Focus Storybook 15:38 - Le workflow de Talend avec Storybook 52:59 - Session Questions et Réponses 54:20 - Quelle est la source de vérité ultime, Figma, le code dans Storybook ?? Comment est-ce que vous assurez la synchro ? 56:08 - Sur quoi vous êtes-vous appuyés pour trouver les sources chiffrées pour convaincre vos dirigeants ? 58:23 - Qu'est ce qui a guidé votre choix d'aller sur Storybook que sur Zeroheight ? Pourquoi Zeroheight ne vous a pas convaincu ? 59:28 - Comment les composants sont-ils publiés ou utilisés ? Via NPM ? Et si oui sont-ils publiés tous ensemble ou de manière séparée (@coral/all/button ou @coral/button) ? 1:00:42 - Les designers doivent-ils attendre la doc sur Storybook pour composer de nouveaux composants et pages ? N'est-ce pas un frein pour vos productions ? 1:02:20 - La gouvernance est partagée ou centralisée ? 1:03:07 - Si tes composants consomment des API, le documentes-tu dans Storybook aussi ou tu le gardes dans le git ? 1:04:18 - Est ce que vous avez des choses spécifiques à l'accessibilité dans le système (documentation ou éléments techniques comme des tests automatisés)? 1:05:00 - Avez-vous testé Gatsby pour la liberté de documentation ? 1:06:04 - Quel est votre modèle de contribution par la communauté de Talend (design et dev) ? Ou est-ce que tout est ajouté par l'équipe design system ? 1:06:56 - Est-ce que le design des UI des Talend Open Studio vont bénéficier à un moment de ce Design System (sous réserve de ce que Talend décide de faire avec TOS (Talend Open Studio) dans sa gamme produit) ? 1:07:47 - Quand vous modifiez un composant, appuies-tu sur un bouton et bim c'est mis à jour sur tous les products ? 1:09:05 - Storybook est-il aussi votre outil de TU (tests unitaires) ? 1:09:49 - Question pratico-légale : Est-ce que le Design System pourrait être utilisé par un éditeur de solution (indépendant) mappant les APIs Talend pour exécuter les jobs ETL dans un ordonnanceur par exemple ? 1:12:08 - Est-ce possible d'avoir la config pour mdx ? 🙂 1:13:12 - Comment gérez vous les versions (patch minor major) ? 1:13:58 - Est-ce que les produits utilisent-ils aussi Storybook pour leurs composants spécifiques dans leur propre app ? 1:14:28 - TOUS vos composants sont-ils gérés sur Storybook ou alors autorisez-vous du code brut ? 1:15:11 - Est-ce que vous avez eu des plaintes pour le forçage de version? 1:15:57 - Avez-vous quelque chose sur la roadmap pour offrir plus de flexibilité ? 1:17:02 - Pour les référents Design System comme vous deux, en terme de temps dédié au DS à quoi cela équivaut ? 1:18:00 - Comment conciliez-vous les tests unitaires et visuels (code + visuel) et des test AB par exemple ? 1:19:24 - Avez-vous des designers qui créent des prototypes HTML plutôt que passer par Figma ? 🌐 Ressources et liens des sources citées pendant la conférence Pour retrouver le GitHub de la demo, où vous retrouvez tous les détails allant de l’initialisation du projet à la personnalisation de sections. https://github.com/frassinier/dsf-sto... https://storybook.js.org/ https://www.chromatic.com/ changesets- https://www.cypress.io/ 💬 Pour toutes questions ou retours sur http://design.talend.com/ vous pouvez contacter Monia et Fabien sur: Le Slack de Design System France : https://designsystems.fr Sur Twitter: @mo_n_ia et @frassinier Par email: mhuet@talend.com et frassinier@talend.com Et si vous êtes de Nantes, il sont toujours partants pour boire un verre et discuter de vive-voix 🎉 🗣 Verbatims Bravo c'était cool de voir votre travail ! 👏 - Christophe Ici on etait a la frontiere entre design et dev, vraiment un bon format pour détruire les silos :) Kevin Convaincu par l'approche de Talend et Storybook. Merci à tous, bonne soirée! - Dimitri Merci pour la démo, c'était très intéressant ✌️ - Charles-Antoine 🇫🇷 Design Systems France La communauté dédiée aux concepteurs de Design Systems dans l'éco-système français. https://designsystems.fr #DesignSystem #Storybook #Chromatic