Storybook

Ejemplo de integración de storybook con React

Inicializar un proyecto con storybook en react

1. Crear proyecto de React
2. Limpiar proyecto de React, solo dejar el archivo src/main.tsx

• Los siguientes pasos pueden variar dependiendo de versión y la documentación Storybook

3. Ejecutar el comando dentro del proyecto: npx storybook init

• Una vez creados los archivos de configuración de storybook, continuar con lo siguiente:

4. Cambiar el comando dev por el nuevo que añadio storybook dentro del package.json
5. Cambiar el comando build por el nuevo que añadio storybook dentro del package.json
6. Colocar una exportación dentro del main.tsx

Ejemplo de importación en main.tsx
export { Button } from "./stories/Button";

7. Ejecutar el comando dentro del proyecto: yarn dev o yarn storybook

Subir a producción

1. Ejecutar comando: yarn build
2. Copiar carpeta storybooks-static
3. Desplegar en Netlify o GithubPages (se requiere cambiar el nombre de la carpeta a docs)

Uso con Chromatic

1. Ir a chromatic
2. Acceder a cuenta
3. Enlazar repositorio de proyecto storybook con React
4. Ejecutar comandos de instalación para Chromatic dentro del proyecto
5. Validar comando chromatic dentro de package.json
6. Ejecutar yarn chromatic
7. Aceptar revisión de cambios

Paquete -> jlme-my-story-components

Este paquete me sirve para practicar React Components + Storybook + NPM Publish

yarn add jlme-my-story-components

Demo

Storybook Components