Empezando con Storybook

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.

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:

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.

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/