Configurando Storybook para proyectos React.js

La librería llamada storybook te permite organizar de forma cómoda un showroom bastante funcional para todos los componentes implementados en tu sistema.

Además de la capacidad de renderizar componentes, puedes interactuar con los componentes agregados: diferentes eventos, variaciones, parámetros personalizados... ¡y manipularlos directamente a través de la interfaz!

Configurando storybook

Instala las dependencias

yarn install @storybook/react @types/storybook__react @storybook/preset-create-react-app @storybook/builder-webpack5 @storybook/manager-webpack5

Agrega el comando a package.json

"storybook": "NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 9009 -s public"

Crea la carpeta .storybook en la raíz de tu proyecto
Crea el archivo .storybook/preview.tsx con el contenido:

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { TestProvider } from '../src/utils/tests';
import { store } from '../src/redux/store';

const req = require.context('../src', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(req);
}

// Test provider contains all necessary react contexts for proper application work, such as redux context, @mui/theme provider, and so on
addDecorator((S) => (
  <TestProvider store={store}>
    <S />
  </TestProvider>
));

configure(loadStories, module);

Crea el archivo .storybook/main.js con el contenido:

const path = require('path');

module.exports = {
  addons: ['@storybook/preset-create-react-app'],
  core: {
    builder: 'webpack5',
  },
  // feel free to modify webpack config here as well
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    });

    // my custom alias for pretty-path module resolution. ~ sign points to root of src folder
    config.resolve.alias['~'] = path.resolve(__dirname, '../src');

    return config;
  },
};

Índice

Configurando storybook

Disponible para colaboración por contrato

Estoy disponible para colaborar por contrato. Si tiene una idea de proyecto interesante, reserve una llamada por Calendly.

Agenda una llamada de 30 min