New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Create an Addon
React
Chapters
  • Introducción
  • Configuración
  • Registrar complemento
  • Seguimiento de Estado
  • Decoradores
  • Preajuste
  • Agregar al catálogo
  • Conclusión

Preajuste

Habilita Outline (contorno) para cada historia

Ahora que terminamos el decorador, usemos un preajuste que envuelva cada historia.

preset-create-react-app y preset-nuxt. Estos se denominan complementos preestablecidos.

Los preajustes permiten combinar varias configuraciones diferentes de Storybook y aplicarlas de una vez. Algunos complementos son puramente responsables de configurar Storybook y no contienen UI.Por ejemplo, preset-create-react-app y preset-nuxt. Estos se denominan Preset addons (Complementos preajustados).

Nuestro preajuste se divide en dos partes:

  1. manager.js para registrar el complemento
  2. preview.js Para especificar decoradores globales

Actualiza la vista previa para usar solo el decorador withGlobals, que automáticamente envolverá todas las historias.

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

export const decorators = [withGlobals];
Nota: el decorador withRoundTrip del Addon Kit es un ejemplo de comunicación bidireccional entre la historia y un complemento. Sin embargo, no es necesario para nuestro complemento y podemos eliminarlo.

¡Éxitos! Ahora tienes un complemento completamente funcional en tu Storybook local. En el capítulo final, aprende a incluir tu complemento en el catálogo. De esa manera, puedes compartirlo con tu equipo y con la comunidad de Storybook.

toggling the tool toggles the outlines

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
Agregar al catálogo
Comparte tu complemento de Storybook con la comunidad
✍️ 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