Library with name storybook lets you handy organize pretty functional showroom for all implemented components in your system.
Apart of ability render component, you can interact with added components: different events, variations, custom params… and manipulate them right through interface!
Configuring storybook
- Install dependencies
|
1 |
yarn install @storybook/react @types/storybook__react @storybook/preset-create-react-app @storybook/builder-webpack5 @storybook/manager-webpack5 |
- Add command to
package.json
|
1 |
"storybook": "NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 9009 -s public" |
- Create folder
.storybookin root of your project - Create file
.storybook/preview.tsxwith content:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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); |
- Create file
.storybook/main.jswith content:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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; } } |
