Chapters

Preset

Activer Outline sur chaque story

Cette traduction de la communauté n'a pas encore été mise à jour avec la dernière version de Storybook. Aidez-nous à la mettre à jour en appliquant les modifications du guide français pour cette traduction. Les pull requests sont les bienvenues.

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 :

manager.js pour enregistrer l'addon
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!