Storybook es una librería javascript que permite probar los componentes gráficos por medio de la separación de la lógica de negocio y del contexto de la aplicación.

Storybook soporta actualmente frameworks y librerías tales como: React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, and Ember

En Swapps usamos React y React Native, por lo que en este artículo vamos a usar React para los ejemplos.

Creando una app de react

Para empezar, vamos a configurar un proyecto con create-react-app:

# Crea nuestra aplicación:
npx create-react-app storybook-example

El comando npx nos permite ejecutar cualquier paquete npm sin tener que tenerlo instalado globalmente; introducido por npm en la versión 5.2.0.
Para más información vaya a: Introducing-npx-an-npm-package-runner (En inglés)

Agregando Storybook

Si ya tienes tu proyecto React configurado, puedes empezar por aquí. La manera de agregar storybook a casi cualquier proyecto es ejecutando el comando desde la carpeta del proyecto:

# Añade Storybook:
npx -p @storybook/cli sb init

Cuando el comando se ejecuta correctamente, la consola nos muestra el comando para correr el storybook.

Después de agregar el storybook a nuestro proyecto tendremos disponibles los siguientes comandos,  los cuales explicaré a continuación:

  • start
  • test
  • storybook

Primero que todo, para correr cualquiera de estos comandos en la línea de comandos utilizamos npm o yarn. Por ejemplo:

npm run test = yarn test

yarn start:

El comando start nos sirve para ver nuestra aplicación corriendo. se utiliza para desarrollo, ya que vienen integrados hotreload, linters y la gran mayoría de herramientas que se usan en una instancia de desarrollo.

yarn test:

Con este comando podemos correr los test de JEST, estos test son test automatizados que nos ayudan a comprobar que nuestra aplicación funcione correctamente cada vez que algún desarrollador haga algún cambio en el código; En el caso ideal se usan en el continuous deployment para comprobar que la aplicación funciona como se espera antes de enviar a producción.

LEER
Cuadrícula CSS: la herramienta de diseño definitiva

yarn storybook:

Este es el comando con el que vamos a correr el storybook. Al ejecutarlo, nos mostrará que el proyecto ha sido iniciado y las urls para acceder a el dashboard de storybook

Ejecutando storybook

Como lo mencioné antes, el comando es yarn storybook; en la consola nos muestra el siguiente mensaje cuando está corriendo.


Si accedemos a la url podemos ver corriendo el storybook con un mensaje de bienvenida y más documentación acerca de cómo usarlo.

Se basa en 3 secciones: barra lateral, zona de previsualización y zona de acciones.

En la barra lateral podemos ver el listado de todas las historias que hemos agregado, la zona de previsualización nos sirve para ver la historia e interactuar con ella, y en la zona de acción podemos ver los resultados de ejecutar algunas acciones en cada componente.

Agregar historias

Para agregar historias necesitamos de un componente. En este artículo no voy a mostrar cómo crear componentes, vamos a utilizar un componente de una librería externa llamada react-icons. Para más información, ir al repositorio: https://github.com/react-icons/react-icons

Para agregar la librería debemos correr el comando: yarn add react-icons

La estructura del proyecto en este momento es:

En la carpeta src/stories; está el archivo index.js en este archivo vamos a agregar nuestra historia.

Para escribir nuestra primer historia debemos abrir el archivo index.js que se encuentra en la carpeta stories y agregar los siguiente:

# Importamos el componente
import { FaBeer } from 'react-icons/fa';

# Agregamos un set de historias.
storiesOf('Icons', module)
  .add('default', () => (
   # Retornamos el componente como queremos verlo
    <h3> Lets go for a <FaBeer />? </h3>
  ))

El resultado es que podemos ver el componente funcionando en nuestra zona de previsualización; lo que nos permite probar varios casos de uso con nuestro componente.

LEER
Construyendo un Web Component sin Frameworks JS

Storybook es un herramienta muy útil para probar componentes. Nos permite ver cómo van a funcionar los componentes y tener un listado de ellos para coordinar con los demás desarrolladores del equipo.

Para más información y uso por favor vaya a: https://storybook.js.org/basics/quick-start-guide/


Comentarios