New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Create an Addon
React
Chapters
  • Présentation
  • Avant de commencer
  • Enregistrer l'addon
  • Suivre l'état
  • Décorateurs
  • Preset
  • Ajouter au catalogue
  • Conclusion

Preset

Activer Outline sur chaque story

Maintenant que nous nous sommes occupés du décorateur, utilisons un preset pour qu'il englobe chaque story.

Les presets vous permettent de combiner différentes configurations Storybook et de les appliquer d'un seul coup. Certains addons se chargent uniquement de configurer Storybook et n'ont aucune UI. Par exemple preset-create-react-app et preset-nuxt. Ce sont ce qu'on appelle des addons Preset.

Notre preset est divisé en deux parties :

  1. manager.js pour enregistrer l'addon
  2. preview.js pour définir des décorateurs globaux

Modifiez la prévisualisation afin de n'utiliser que le décorateur withGlobals pour l'appliquer automatiquement à toutes les stories.

Copy
src/preset/preview.js
import { withGlobals } from '../withGlobals';

export const decorators = [withGlobals];
Note : Le décorateur withRoundTrip de l'Addon Kit est un exemple de communication bidirectionnelle entre une story et un addon. Cependant, nous n'en avons pas besoin dans notre addon. Nous pouvons donc le supprimer

Succès ! Vous avez désormais un addon parfaitement fonctionnel sur votre Storybook local. Dans le chapitre final, apprenez à répertorier votre addon dans le catalogue pour le partager à votre équipe et à la communauté Storybook.

activer/désactiver l'addon affiche/masque les contours

Keep your code in sync with this chapter. View bdb7aaa on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Ajouter au catalogue
Partagez votre addon Storybook avec la communauté
✍️ Edit on GitHub – PRs welcome!
Join the community
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI