Documentación: Cómo implementar Storybook en React

por
Tiempo de lectura: 3 minutos

Usar Storybook para documentar y desarrollar tus componentes de React es una excelente manera de crear un entorno visual donde puedas ver y probar tus componentes de forma aislada.

Castillo Story - Pexels

1. Instalar Storybook

Primero, asegúrate de estar en la raíz de tu proyecto y ejecuta el siguiente comando para instalar Storybook:

npx sb init --type react

Esto instalará Storybook y configurará algunas cosas por defecto.

2. Instalación de Dependencias

Si estás usando TypeScript, es posible que necesites instalar algunas dependencias adicionales. Ejecuta el siguiente comando:

npm install --save-dev @storybook/addon-essentials @storybook/addon-links @storybook/addon-interactions @storybook/react @storybook/testing-library typescript

Si nos salta error de automigrate:

npx storybook automigrate

3. Configuración de Storybook

Storybook crea una carpeta llamada .storybook donde se encuentran las configuraciones. Puedes personalizar el archivo main.js dentro de esta carpeta para incluir tus componentes y ajustar otras configuraciones:

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: '@storybook/react',
  typescript: {
    check: false, // Puedes habilitar esto para verificar tipos en Storybook
  },
};

4. Crear Historias para tus Componentes

Crea un archivo de historias para cada componente en la misma carpeta que el componente o en una carpeta dedicada a las historias. Por ejemplo, si tienes un componente BadgeCustom.tsx, crea un archivo BadgeCustom.stories.tsx:

// src/components/BadgeCustom.stories.tsx
import React from 'react';
import BadgeCustom from './BadgeCustom';

export default {
  title: 'Componentes/BadgeCustom',
  component: BadgeCustom,
};

// Plantilla de historia
const Template = (args) => <BadgeCustom {...args} />;

// Historia para un uso por defecto
export const Default = Template.bind({});
Default.args = {
  texto: 'Texto de ejemplo',
  icon: <span>🌟</span>, // Puedes usar un icono aquí
  backgroundColor: '#fff',
  color: '#000',
};

Edita el archivo package.json

"scripts": {
  "storybook": "start-storybook -p 6006",
  // otros scripts...
}

5. Ejecutar Storybook

Después de crear tus historias, puedes ejecutar Storybook con el siguiente comando:

npm run storybook

Esto abrirá Storybook en tu navegador, y podrás ver tus componentes y sus variaciones.

Construir Storybook:

npm run build-storybook

6. Documentación y Accesibilidad

Storybook también permite agregar documentación a tus componentes. Puedes usar el addon @storybook/addon-docs para agregar documentación automáticamente basada en comentarios JSDoc. Solo necesitas asegurarte de que esté incluido en tu archivo de configuración de Storybook.

7. Uso de Addons

Storybook tiene una amplia variedad de addons que pueden ayudarte a mejorar tu flujo de trabajo, como:

  • Controls: Permite a los usuarios interactuar con los props de tus componentes.
  • Actions: Muestra las acciones de los eventos en el panel de Storybook.
  • Knobs: Permite editar props en tiempo real desde el panel de Storybook.

Puedes consultar la documentación oficial de Storybook para más detalles sobre cómo aprovechar estos addons y otras funcionalidades.

Extra: Desplegar Storybook

Para generar y desplegar tu Storybook, sigue estos pasos:

Paso 1: Generar la Construcción Estática

Primero, necesitas construir tu Storybook para que sea una versión estática lista para ser desplegada. Puedes hacerlo con el siguiente comando:

npm run build-storybook

Este comando generará un directorio llamado storybook-static en la raíz de tu proyecto que contendrá todos los archivos estáticos necesarios.

Paso 2: Desplegar el Storybook

Dependiendo de dónde deseas desplegar tu Storybook, hay varias opciones. Aquí hay algunas de las más comunes:

Opción 1: Desplegar en GitHub Pages

  1. Instala el paquete de GitHub Pages (si no lo has hecho ya):
   npm install --save-dev gh-pages
  1. Agrega un script a tu package.json:
   "scripts": {
     "deploy-storybook": "gh-pages -d storybook-static"
   }
  1. Despliega tu Storybook:
   npm run deploy-storybook

Esto publicará tu Storybook en GitHub Pages. Asegúrate de que tu repositorio de GitHub tenga habilitadas las páginas en la configuración.

Opción 2: Desplegar en un Servidor Web

Si tienes acceso a un servidor web (como Apache, Nginx, etc.), puedes simplemente copiar el contenido de la carpeta storybook-static al directorio de tu servidor web.

Opción 3: Usar Netlify

  1. Crea una cuenta en Netlify (si no tienes una).
  2. Conecta tu repositorio y selecciona la rama que deseas desplegar.
  3. En la configuración de Build, configura el comando de construcción:
  • Build command: npm run build-storybook
  • Publish directory: storybook-static
  1. Despliega.

Opción 4: Usar Vercel

  1. Crea una cuenta en Vercel (si no tienes una).
  2. Conecta tu repositorio y sigue el proceso de configuración.
  3. Asegúrate de que en la configuración de la construcción esté definido el comando:
  • Build Command: npm run build-storybook
  • Output Directory: storybook-static

Despliega.

    Verificación

    Una vez que hayas realizado el despliegue, verifica que tu Storybook esté funcionando correctamente accediendo a la URL donde lo has desplegado.

    NOTA: Posibles errores

    Es posible que aparezca un error con las rutas de alias. @/, para solucionarlo debemos cambiarlas por rutas directas ../

    Post Views: 1

    Deja un comentario