Create an Addon
  • Présentation
  • Avant de commencer
  • Enregistrer l'addon
  • Suivre l'état
  • Décorateurs
  • Preset
  • Ajouter au catalogue
  • Conclusion
Framework:
React

Présentation des addons

L'anatomie d'un addon
Ce guide est destiné aux développeurs professionnels souhaitant apprendre à créer un addon pour Storybook. Une certaine expérience en JavaScript et avec React est recommandée. Il est également recommandé de connaître les bases de Storybook telles que la rédaction d'une story et la modification des fichiers de configuration (ces bases sont décrites dans Intro to Storybook).

Storybook est un outil permettant de développer des composants UI dans un environnement isolé hors de votre application. Les addons vous permettent d'améliorer et d'automatiser certaines parties de ce workflow. En fait, la plupart des fonctionnalités propres à Storybook sont implémentées en tant qu'addons. C'est entre autres le cas de la documentation, des tests d'accessibilité et des contrôles interactifs. Il existe également plus de 200 addons développés par la communauté qui offrent un gain de temps pour les développeurs UI.

Qu'allons-nous développer ?

Il est difficile de déterminer qu'une mise en page CSS est bien conforme au design. Évaluer à l'œil le bon alignement des éléments du DOM devient compliqué lorsque ceux-ci sont éloignés les uns des autres ou ont des formes particulières.

L'addon Outline ajoute un bouton à la barre d'outils permettant d'ajouter un contour à tous les éléments UI grâce à du CSS. Cela facilite la vérification de leur positionnement et de leur placement en un coup d'œil. Voyez l'exemple ci-dessous :

Addon Outline

L'anatomie d'un addon

Les addons vous permettent d'étendre les possibilités de Storybook, de son interface à ses APIs. Ils ⚡boostent⚡ le workflow du développement UI.

Il y a deux sortes d'addons :

  • Les addons liés à l'UI: personnaliser l'interface, ajouter des raccourcis pour des tâches répétitives ou mettre en forme et afficher des informations complémentaires. Par exemple : mise en place de documentation, de tests d'accessibilité, de contrôles interactifs ou de prévisualisations du design.
  • Presets: une collection de configurations Storybook appliquées automatiquement. Elles sont souvent utilisées pour coupler Storybook à une technologie spécifique. Par exemple : preset-create-react-app, preset-nuxt et preset-scss.

Addons liés à l'UI

Les addons peuvent créer trois types d'éléments d'interface :

  1. Un outil dans la barre d'outils, comme par exemple les outils Grid et Background.

toolbar

  1. Un panneau à l'image de l'addon Actions qui permet d'afficher un journal d'actions.

panel

  1. Un nouvel onglet comme Storybook Docs qui permet d'afficher la documentation d'un composant.

tab

Il est clair que les addons peuvent faire beaucoup de choses. Que fait donc le nôtre ?

L'addon Outline permet d'appliquer un contour à tous les éléments d'une story lors d'un clic sur un bouton dans la barre d'outils. Cliquer à nouveau sur le bouton permet de retirer ces contours.

Le code de notre addon est composé de quatre parties que nous couvrirons dans les chapitres suivants :

  • L'UI de l'addon qui crée le bouton dans la barre d'outils, l'élément sur lequel l'utilisateur clique.
  • L'enregistrement de l'addon dans Storybook.
  • La gestion d'état pour suivre l'état actif/inactif de l'outil, contrôlant l'affichage ou non des contours.
  • Le décorateur injectant le CSS dans l'iframe de prévisualisation afin d'afficher les contours.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Avant de commencer
Avant de commencer avec l'Addon Kit
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify