Storybook es una herramienta para desarrollar componentes de interfaz de usuario (UI) fuera de la aplicación en un entorno aislado. Los complementos permiten mejorar y automatizar partes de este flujo de trabajo. De hecho, la mayoría de las funciones principales de Storybook se implementan como complementos. Por ejemplo: documentación, pruebas de accesibilidad y controles interactivos, entre otros. También hay más de 200 complementos creados por la comunidad que permiten a los desarrolladores de UI ahorrar valioso tiempo.
Es difícil saber si el diseño CSS coincide con el diseño general. La alineación visual es complicada cuando los elementos DOM están muy separados o tienen formas extrañas.
El complemento Outline addon agrega un botón de barra de herramientas que describe todos los elementos de la interfaz de usuario, utilizando CSS. Eso hace que sea fácil de verificar el posicionamiento y la ubicación de un vistazo. Mira el ejemplo a continuación.
Los complementos permiten ampliar las posibilidades de Storybook. Todo, desde la interfaz hasta las API. ⚡Aceleran⚡ el flujo de trabajo en el desarrollo de UI.
Hay dos amplias categorías de complementos:
Los complementos pueden crear tres tipos de elementos de interfaz:
Queda claro que los complementos pueden hacer mucho. Entonces, ¿qué hace nuestro complemento?
El complemento Outline permite al desarrollador hacer clic en un botón de la barra de herramientas para dibujar contornos alrededor de cada elemento de la historia. Cuando se vuelve a hacer clic en ese botón, se eliminan todos los contornos.
El código de nuestro complemento tiene cuatro partes que cubriremos en los próximos capítulos: