Cómo crear componentes JS con Storybook

Introducción

Storybook es una herramienta de código abierto para desarrollar componentes de UI (interfaz de usuario) de forma aislada.

Esto significa que los desarrolladores pueden crear componentes de interfaz de usuario en un entorno separado de la aplicación sin preocuparse por datos inestables, API incompletas o lógica empresarial. Esto le permite enviar componentes con confianza.

Storybook tiene integraciones con la mayoría de los marcos front-end, incluidos React, Vue y Angular.

En este artículo, aprenderá a usar Storybook para sus proyectos.

Análisis de casos de uso para Storybook

Existen varios casos de uso para adoptar Storybook:

• Biblioteca de componentes: con la forma en que funciona Storybook, puede mantener una biblioteca de componentes utilizando este proceso de tener todos los componentes de su aplicación en una ubicación con la capacidad de probar cada estado del componente.
• Sistemas de diseño: Un sistema de diseño es una serie de componentes que se pueden reutilizar en diferentes combinaciones. Los sistemas de diseño le permiten gestionar el diseño a escala. Con Storybook, obtiene un sistema de diseño listo para usar.
• Pruebas visuales: con los complementos de Storybook, puede integrar pruebas de regresión visual para probar y mantener su biblioteca de componentes consistente sin importar cuán grande sea.
• Compartir entre equipos: Storybook se puede compartir entre equipos debido a que se puede implementar como un sitio estático que funciona de manera independiente. Se puede compartir entre diseñadores y gerentes de proyectos de un equipo para brindar comentarios sobre el diseño actual de los componentes, lo que mejora la colaboración dentro de los equipos.

Varios equipos confían en Storybook para realizar el trabajo pesado de componer una biblioteca de componentes y también como un elemento básico para sus sistemas de diseño. Empresas como Salesforce , Artsy , GOV.UK y GitHub utilizan Storybook para crear y distribuir componentes de interfaz de usuario que afectan a millones de personas.

Escribir historias con Storybook

Un libro de cuentos es una combinación de diferentes historias para distintos componentes. Las historias son funciones que devuelven algo que se puede mostrar en la pantalla. Una historia puede contener un solo estado de un componente o puede verse como una representación visual de un componente.

Desarrollar componentes de UI con Storybook significa que todos los componentes de su aplicación están aislados para que funcionen independientemente de la conexión entre ellos y puedan probarse como componentes de UI separados.

Al construir con Storybook hay varias formas de estructurar y organizar historias dentro de su aplicación.

A continuación se muestra un ejemplo de una estrategia de origen de directorio con stories.jsarchivos dentro de un directorio de componentes:

. └── src/  └── components/   └── button    └── button.js    └── button.stories.js

A continuación se muestra un ejemplo de una segunda estrategia de organización de directorios con storiesun directorio fuera del srcdirectorio:

. └── src  └── components   └── button.js └── stories  └── button.stories.js

A continuación se muestra un ejemplo de una tercera estrategia de organización de directorios con storiesun subdirectorio en un directorio de componentes:

. └── src/  └── components/   └── button    └── button.js    └── stories     └── button.stories.js

Seguir cualquiera de estos métodos es una cuestión de elección. Depende de usted elegir lo que funcione mejor para usted y su equipo.

Integración de Storybook con otros marcos

Storybook es compatible con casi todos los marcos de interfaz disponibles y para que pueda integrarse con cualquiera de estos marcos, el equipo de Storybook ha escrito una guía que puede seguir para configurar Storybook para marcos individuales, que incluye:

• Reaccionar
• Vista
• Angular
• Componentes web

La compatibilidad con otros marcos es posible gracias a los complementos de la comunidad:

• Ascua
• HTML
• Mithril
• Marco
• Esbelto
• Disturbio
• Preact
• Rax

Uso de complementos de Storybook

Los complementos amplían las funciones y el comportamiento de Storybook.

Un ejemplo es el @storybook/addon-actionscomplemento que ayuda a registrar los datos recibidos por los controladores de eventos en Storybook.

Hay un conjunto de complementos esenciales que vienen preinstalados y muchos complementos de terceros proporcionados por la comunidad.

Puedes encontrar una lista de todos los complementos seleccionados por el equipo de Storybook en esta página de complementos .

Implementación de Storybook como una aplicación estática

Storybook se puede utilizar junto con el proyecto que estás desarrollando porque ofrece una gran experiencia para desarrolladores con funciones como la recarga en caliente a través de Webpack HMR. Pero también puedes ampliar esto aún más implementando Storybook como un sitio estático por sí solo. Esto te permitirá mostrar tus componentes a todos como una guía de estilo de referencia.

Para ello, deberás configurar tu Storybook usando este script:

{  "scripts": {    "build-storybook": "build-storybook -c .storybook -o .out"  }}

Ahora, cuando ejecutes npm run build-storybooko yarn build-storybookesto, crearás el Storybook configurado en el storybookdirectorio en una aplicación web estática y lo colocarás dentro del directorio llamado out. Luego, puedes implementar ese directorio usando servicios como GitHub Pages, Netlify o Now.

Conclusión

En este artículo aprendiste qué es Storybook y cuándo es útil aprovecharlo al crear aplicaciones web.

Storybook funciona para muchos casos de uso e integrarlo en su flujo de trabajo le permitirá crear componentes de UI completos para sus aplicaciones de forma aislada.

Continúe su aprendizaje con un tutorial sobre cómo crear un componente de UI interactivo usando React y Storybook .