Introducción a Storybook

1. ¿Qué es un Storybook?

Storybook es una plataforma de desarrollo para crear, visualizar, documentar y probar componentes de interfaz de usuario de forma independiente. Crea un entorno aislado para cada componente, lo que permite desarrollarlos y probarlos uno a uno de forma interactiva y visual.

2. Instalación de Storybook

Para instalar Storybook, primero necesitamos crear un proyecto. La forma más fácil de hacerlo es utilizar Vite y escribir el siguiente comando en un terminal:

npm create vite@latest 

Ahora puede entrar en el directorio e iniciar Storybook con el siguiente comando:

npx sb init 

Una vez completada la instalación, tendrás una nueva...

1. Creación de un componente

Para crear un componente en Storybook, cree una carpeta para sus componentes (por ejemplo, src/components). Dentro de la carpeta components, cree un nuevo archivo para su componente (por ejemplo, Title.js). Finalmente, implemente su componente en el archivo.

He aquí un ejemplo de componente:

// src/components/Title.js  
import React from 'react';  
  
const Title = ({ children, variant }) => {  
  const classNames = `title ${variant}`;  
  
  return (  
    <h1 className={classNames}>  
      {children}  
    </h1>  
  );  
};  
  
export default Title; 

El componente título podría tener un estilo primary y un estilo secundary que lo mostrarían de una forma u otra. Pasando cualquiera de estos valores como prop del componente se obtendrá una visualización diferente.

// src/components/Title.stories.js  ...

1. Instalación de add-ons

Para utilizar complementos en Storybook, debe instalarlos y configurarlos en su proyecto. Algunos ya están preinstalados con Storybook, a menudo los más populares.

Por ejemplo, para instalar el add-on de visualización de notas sobre la documentación, puede ejecutar:

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

module.exports = {  
  addons: [  
    '@storybook/addon-notes/register', // Añade aquí el  
nombre del add-on  
    // Otros add-ons  
  ],  
}; 

El archivo main.js es el conductor de tu proyecto Storybook. Situado en la carpeta .storybook en la raíz de su proyecto, le permite controlar varios aspectos de su entorno.

2. Utilización de add-ons

Una vez los add-ons instalados y configurados los complementos, puede utilizarlos en sus stories...