Cómo configurar Storybook en React

Uno de los beneficios de usar React es que puede crear componentes de interfaz de usuario, reutilizarlos en toda su aplicación y, en última instancia, evitar la rotación de código. Aún así, es difícil crear componentes de interfaz de usuario completamente independientes solo con React. Deberá crear vistas que muestren estos componentes para verlos.


Aquí es donde entra el libro de cuentos. Le permite crear y probar componentes de interfaz de usuario en un entorno de tiempo de ejecución independiente. En este tutorial, aprenderá cómo usarlo en React. Al final de este artículo, habrá creado un componente de botón y documentado algunos de sus posibles estados en React.

¿Qué es un libro de cuentos?

Storybook es una herramienta de desarrollo que le permite ejecutar y probar sus componentes de interfaz de usuario sin un entorno React completo. Esto facilita el desarrollo basado en componentes porque puede desarrollar componentes de forma aislada.

Con Storybook, una vez que haya creado un componente, puede crear múltiples historias que definen diferentes estados del componente. Para un componente de botón, estos estados pueden incluir estado primario, estado secundario, estado deshabilitado, etc.

Dado que Storybook le permite incluir código al crear historias, también se puede utilizar como una herramienta de documentación.

Para usar Storybook, debe tener Node instalado en su máquina y tener una comprensión básica de React.

Creación de una aplicación receptiva

Para comenzar a usar Storybook, primero creará un proyecto React, luego creará componentes y sus historias.

Ejecute el siguiente comando para crear una aplicación React:

npx create-react-app btn-storybook

Esto generará una carpeta llamada btn-storybook con todas las dependencias que necesita una aplicación React.

Luego, con unos pocos pasos más, puede instalar y ejecutar Storybook.

Instalación del libro de cuentos.

Navegue a la carpeta btn-storybook e instale storybook:

cd btn-storybook
npx storybook init

Dado que usó create-react-app, este es el único comando que debe ejecutar para configurar Storybook. Storybook instalará todas las dependencias necesarias y realizará toda la configuración necesaria. También creará historias repetitivas para que pueda comenzar.


Una vez que se complete el comando anterior, inicie el libro de cuentos con el siguiente código.

npm run storybook

Esto abrirá el tablero del libro de cuentos en su navegador. Debería verse algo como esto:

Crear el componente de botón

En la carpeta ./src, cree una carpeta llamada Componentes y cree otra carpeta llamada Botón. La carpeta Button debe estar en esta ruta: ./src/Components/Button.

Ahora, en esta carpeta, cree Button y agregue el siguiente código:

import PropTypes from "prop-types"
function Button({ label, backgroundColor = "#6B4EFF", color = "white", borderRadius="48px", border="none"}) {
const style = {
backgroundColor,
padding: "0.5rem 1rem",
color,
borderRadius,
border
}
return (
<button style={style}>
{label}
</button>
)
}
Button.propTypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
color: PropTypes.string,
border:PropTypes.string,
borderRadius: PropTypes.string,
}
export default Button;

Este componente acepta algunos accesorios de React que incluyen la etiqueta del botón y sus estilos. También usa propTypes para verificar los tipos de accesorios pasados ​​y generar una advertencia si está usando el tipo incorrecto. El componente devuelve un elemento de botón.

Creación de historias de botones.

Cuando instaló Storybook en el proyecto React, generó una carpeta que contenía historias de muestra, llamada cuentos. Navegue a esta carpeta y elimine todo lo que contiene. Crearás las historias desde cero.

Creará dos historias que representan el botón principal y el botón secundario. Cada uno de estos botones tiene un estilo diferente que lo diferencia del resto. Podrá ver cada uno en el tablero de Storybook una vez que haya creado las historias.

En la carpeta de historias, cree un nuevo archivo llamado button.stories.js. Es importante incluir .cuentos antes de .js porque eso es lo que dice Storybook, que es un archivo de historia.

Importe el componente Botón.

import Button from "../Components/Button/Button"

Luego exporte el título del componente y el propio componente. Tenga en cuenta que el título es opcional.

export default {
title: "Components/Button",
component: Button,
}

La primera historia que creará es para el botón principal. Así que cree una nueva función llamada Primaria y expórtela.

export const Primary = () => <Button backgroundColor="#6B4EFF" label="Primary"/>

Ahora, si va al tablero de Storybook, podrá ver el botón de procesamiento.

Para modificar el componente renderizado en vivo y cambiar su estado en el tablero de Storybook, usará args. Args le permite pasar argumentos a Storybook que, cuando se modifican, hacen que el componente se renderice.

Para definir los argumentos de la historia del botón, cree una plantilla de función.

const Template = args => <Button {...args}/>

Este patrón acepta argumentos y los pasa como accesorios al componente Botón.

Ahora puede reescribir la historia principal usando la plantilla como se muestra a continuación.

export const Primary = Template.bind({})

Primary.args = {
backgroundColor: "#6B4EFF",
label: "Primary",
}

Si observa el tablero de Storybook, debería ver los controles en la parte inferior. Estos comandos le permiten modificar la visualización del botón. Puede cambiar el color de fondo, el color del texto, la etiqueta, el borde y el radio del borde.

Solo necesita cambiar los valores de args para crear las otras historias. Por ejemplo, para crear un botón secundario, use el siguiente código.

export const Secondary = Template.bind({})

Secondary.args = {
backgroundColor: "#E7E7FF",
color: "#6B4EFF",
label: "Secondary",
}

En el tablero de Storybook, navegue a diferentes historias haciendo clic en ellas en la barra lateral. Verás como se hace cada uno. Puede continuar agregando otros estados a las historias de botones según lo desee. Intente agregar una toma o una historia de tomas.

Prueba de componentes de la interfaz de usuario

Este tutorial le dio una breve introducción al uso de Storybook con componentes React UI. Aprendió a agregar Storybook a un proyecto de React y a crear una historia básica para un componente Button con argumentos.

Es posible que haya notado que durante este proceso estaba probando cómo se representa el componente del botón en diferentes estados. Puede escribir más código, pero una vez que escriba las historias de los componentes, minimizará los errores que pueden ocurrir al reutilizar componentes en su aplicación. Además, será más fácil rastrear el error si ocurre. Esa es la belleza del desarrollo basado en componentes.


Leave a Reply

Your email address will not be published.