Cómo crear un componente UI con React y Storybook

Introducción

Storybook es una biblioteca de interfaz de usuario (UI) que se puede utilizar para documentar componentes.

Nota: Este artículo se basa en Introducción a Storybook , que cubre cómo se puede utilizar para organizar y crear componentes de JavaScript.

En este artículo, creará un componente de interfaz de usuario interactivo utilizando React y Storybook.

Al final del tutorial, implementará el libro de cuentos como una aplicación independiente para que sirva como guía de estilo.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .

Este tutorial fue verificado con Node v14.4.0, npmv6.14.5, reactv16.13.1 y @storybook/reactv5.3.19.

Paso 1: Configuración del proyecto

Para comenzar, necesitaremos crear un nuevo proyecto React y para esto usaremos, create-react-appque es una gran herramienta para el andamiaje de aplicaciones React.

npx create-react-app storybook-app

A continuación navegue hasta el directorio del proyecto recién creado:

cd storybook-app

Y el siguiente paso será instalar el storybookpaquete en nuestro proyecto:

npx -p @storybook/cli sb init

El comando puede detectar automáticamente el marco que estamos usando desde el package.jsonarchivo e instalar la versión Storybook de ese marco.

Después de ejecutar ambos comandos, podemos confirmar que tenemos @storybook/reactlas dependencias instaladas abriendo el package.jsonarchivo para verificar si los paquetes están instalados y luego podemos ejecutar la aplicación y ejecutar Storybook.

npm start

npm run storybook

Después de ejecutar ambos comandos, tendremos la aplicación React y la aplicación Storybook ejecutándose en diferentes puertos.

Agregar configuración manualmente

Si seguimos los pasos descritos anteriormente, ya está preconfigurado. Si instalamos el @storybook/reactpaquete en un proyecto de React ya existente, tendremos que seguir estos pasos para configurar Storybook.

Primero queremos crear una carpeta .storybooken el directorio raíz de nuestro proyecto React y luego crear un archivo dentro de la carpeta llamada config.jsy agregar las siguientes líneas de código:

.libro de cuentos/config.js

import { configure } from '@storybook/react';function loadStories() {  require('../src/stories');}configure(loadStories, module);

El bloque de código anterior es una configuración para Storybook y le indica a Storybook que busque las historias en el src/storiesdirectorio. Crearemos esa carpeta si aún no la hemos configurado. Dentro de la srccarpeta, crea una carpeta llamada stories. Aquí es donde se ubicarán todos los componentes para los que crearemos historias.

Nota: Storybook 5.3.0 y versiones posteriores incorporan main.jsfunciones que se ocupan de lo que config.jsse hacía en el pasado. Los cambios están documentados en la documentación oficial de migración .

Si está utilizando Storybook 5.3.0 o posterior, no necesita un config.jsarchivo y puede ignorar este paso.

La documentación oficial también sugiere diferentes enfoques sobre dónde colocarlo stories.

En este punto, Storybook está configurado para su uso.

Paso 2: Agregar historias a una aplicación React

Ahora que hemos terminado con la configuración, podemos crear componentes usando Storybook.

En este tutorial, crearemos un Buttoncomponente y, para este componente, documentaremos historias dentro de la storiescarpeta. Continúe y cree un Buttoncomponente dentro del componentdirectorio con las siguientes líneas de código:

fuente/componentes/Button.js

import React from 'react';import './Button.css';const Button = props = (  button onClick={props.onClick} style={props.style}    {props.label  span{props.label}/span}  /button);export default Button;

Y agrega estilos para el componente:

src/componentes/boton.css

button {  padding: 20px;  width: 20em;  margin: 10px;  color: white;  font-size: 19px;  cursor: pointer;  border: 2px solid #fecd43;  background: #fecd43;}

Ahora podemos agregar una historia para el Buttoncomponente creado. Dentro del storiesdirectorio creamos un archivo y lo llamamos buttonStories.jsy luego agregamos las siguientes líneas de código en el archivo:

src/historias/buttonHistorias.js

import React from 'react';import { storiesOf } from '@storybook/react';import Button from '../components/Button';storiesOf('Button', module)  .add('with primary', () = Button label="Primary Button" /)  .add('with outline', () = Button    label="Ouline Button"    style={{ background: 'transparent', border: '3px solid #fecd43' }}  /)  .add('with rounder corners', () = Button    label="Rounded Button"    style={{ borderRadius: '15px' }}  /)  .add('disabled', () = Button disabled    label="Disabled Button"    style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}  /);

A continuación, crea un index.jsarchivo. Importa el buttonStories.jsarchivo:

src/historias/index.js

import './buttonStories';

Esto servirá como archivo base con todas las historias y podremos importarlas todas a este archivo.

Nota: Storybook 5.3.0 y versiones posteriores adoptan un patrón de nombre de archivo de: *.stories.js. Para cumplir con esta convención, buttonStories.jsse debe cambiar el nombre a button.stories.js.

También puede encontrar un 1-Button.stories.jsarchivo generado para una historia de demostración que use el mismo Buttontítulo. Para evitar confusiones, puede comentar el contenido de ese archivo.

Luego, para cada nuevo archivo creado en el storiesdirectorio, lo importaremos a este archivo.

Paso 3: Integración de complementos

Los complementos de Storybook ayudan a implementar funciones adicionales para que sean más útiles e interactivos. En el sitio oficial se puede encontrar una lista completa de todos los complementos disponibles para Storybook .

En este artículo, agregaremos el Actioncomplemento a las historias creadas. El complemento Acciones se puede usar para mostrar los datos recibidos por los controladores de eventos en Storybook.

Agregar complementos manualmente

Podemos configurar el complemento si aún no está hecho de forma predeterminada, deberá seguir estos pasos.

Nota: Si está utilizando Storybook 5.3.0 o posterior, para los fines de este tutorial, no necesitará un addons.jsarchivo y puede ignorar este paso.

Instale el paquete complementario con este comando:

npm install --save-dev @storybook/addon-actions

A continuación, añade el siguiente contenido a .storybook/addons.js:

.storybook/complementos.js

import '@storybook/addon-actions/register';

Ahora tu Storybook admite complementos.

Paso 4: Uso de acciones complementarias

Para hacer que nuestra historia de Button sea interactiva con Storybook, podemos agregar el siguiente código a buttonStories.js:

src/historias/buttonHistorias.js

import React from 'react';import { storiesOf } from '@storybook/react';import { action } from '@storybook/addon-actions';import Button from '../components/Button';storiesOf('Button', module)  .add('with primary', () = Button    onClick={action('click')}    label="Primary Button"  /)  .add('with outline', () = Button    label="Ouline Button"    onClick={action('click')}    style={{ background: 'transparent', border: '3px solid #fecd43' }}  /)  .add('with rounder corners', () = Button    label="Rounded Button"    onClick={action('click')}    style={{ borderRadius: '15px' }}  /)  .add('disabled', () = Button disabled    label="Disabled Button"    onClick={action('click')}    style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}  /);

Luego ejecuta Storybook:

En la pestaña a continuación podrás observar Actions tabdónde se registra la acción cada vez que interactuamos con los botones.

Paso 5: Personalización de temas

Con Storybook, tenemos la posibilidad de personalizar el tema predeterminado que se utiliza y Storybook viene con un tema claro predeterminado. Ahora, exploremos cómo podemos personalizarlo con algo diferente. Tal vez un tema oscuro o algo completamente diferente. Para comenzar, necesitaremos modificar las configuraciones que hemos establecido en config.jsel archivo agregando las siguientes líneas de código:

.libro de cuentos/config.js

import { addParameters } from '@storybook/react';import { themes } from '@storybook/theming';addParameters({  options: {    theme: themes.dark  }});

Nota: Storybook 5.3.0 y versiones posteriores incorporan manager.js. Los pasos para crear temas con esta nueva convención se describen en la documentación oficial de creación de temas .

Con el tema oscuro configurado, podemos observar que todo el tema de Storybook ha cambiado al tema oscuro. En cualquier momento, este puede volver a cambiarse al tema claro u oscuro según nuestras preferencias.

También podemos definir un tema dinámico de manera predeterminada si queremos un tema completamente diferente. El primer paso es crear un archivo para nuestro tema. Dentro de .storybookla carpeta, crea un nuevo archivo llamado yourTheme.js. El siguiente paso es generar un nuevo tema usando la create()función from storybook/theming.

A continuación se muestra un ejemplo de un pink.jstema:

.libro de cuentos/rosa.js

import { create } from '@storybook/theming';export default create ({  base: 'light',  colorPrimary: 'hotpink',  colorSecondary: 'deepskyblue',  // UI  appBg: 'rgb(234, 0, 133)',  appContentBg: 'white',  appBorderColor: 'white',  appBorderRadius: 4,  // Typography  fontBase: '"Open Sans", sans-serif',  fontCode: 'monospace',  // Text colors  textColor: 'rgb(255, 250, 250)',  textInverseColor: 'white',  // Toolbar default and active colors  barTextColor: 'white',  barSelectedColor: 'white',  barBg: 'rgb(246, 153, 190)',  // Form colors  inputBg: 'white',  inputBorder: 'silver',  inputTextColor: 'black',  inputBorderRadius: 4,  brandTitle: 'Pink Storybook'});

Luego, podemos continuar e importar pink.jsnuestro archivo de configuración de Storybook.

.libro de cuentos/config.js

import pink from './pink';addParameters({  options: {    theme: pink  }});

Esto nos da un tema completamente diferente en comparación con la imagen anterior.

Paso 6: Implementación de Storybook

Una característica que viene incluida con Storybook es el hecho de que podemos implementar nuestro Storybook como un sitio estático que podemos implementar en cualquier opción de alojamiento que elijamos. Para configurar esto, necesitaremos agregar un build-storybookscript a nuestro package.json:

paquete.json

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

Lo que hará este script es crear nuestro directorio de libros de cuentos en una aplicación web estática y generarlo en un .outdirectorio. Podemos ejecutar este script e implementar el contenido del .outdirectorio cuando se complete la creación. Continúe y ejecute el comando:

npm run build-storybook

Una vez finalizada la compilación, podremos implementar el contenido del directorio utilizando cualquier alojamiento que elijamos.

Para probar que esto funciona localmente, podemos ejecutar el siguiente comando:

npx http-server .out

: Nota: Es posible que package.jsonaparezca un build-storybookscript similar a: build-storybook -s public. En lugar del .outdirectorio especificado, esto envía los archivos estáticos del sitio a un storybook-staticdirectorio.

Esto servirá el contenido de la carpeta como un sitio estático.

Conclusión

En este artículo, aprendimos a crear componentes interactivos con Storybook y React. Ahora hemos explorado lo que es posible con Storybook y también tenemos una guía sobre cómo integrar Storybook como una biblioteca de componentes en nuestros proyectos de React. El desarrollo con Storybook sirve como una única fuente de información para los desarrolladores y diseñadores que trabajan en equipo y se puede integrar con otros marcos de trabajo frontend.

Esta publicación solo describe cómo se usa con React. Si buscas una guía sobre otros frameworks, puedes consultar la documentación oficial de Storybook .

También puedes encontrar el código de este artículo en GitHub .