Skip to content

Commit 7e2a120

Browse files
committed
test(storybook): add storybook for improved testing/debugging
1 parent 6c17b8d commit 7e2a120

26 files changed

+26763
-2000
lines changed

.babelrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env", {
5+
"useBuiltIns": "entry",
6+
"corejs": 2
7+
}
8+
],
9+
"@babel/preset-react"
10+
]
11+
}

.storybook/main.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const path = require('path')
2+
// your app's webpack.config.js
3+
const custom = require('./webpack.config.js');
4+
5+
module.exports = {
6+
stories: ['../stories/*.stories.js'],
7+
addons: [
8+
'@storybook/addon-links',
9+
'@storybook/addon-essentials',
10+
'@storybook/preset-create-react-app'
11+
],
12+
webpackFinal: (config) => {
13+
return { ...config, module: { ...config.module, rules: custom.module.rules } };
14+
}
15+
}

.storybook/preview.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
export const parameters = {
3+
actions: { argTypesRegex: "^on[A-Z].*" },
4+
}

.storybook/webpack.config.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
4+
/*
5+
* SplitChunksPlugin is enabled by default and replaced
6+
* deprecated CommonsChunkPlugin. It automatically identifies modules which
7+
* should be splitted of chunk by heuristics using module duplication count and
8+
* module category (i. e. node_modules). And splits the chunks…
9+
*
10+
* It is safe to remove "splitChunks" from the generated configuration
11+
* and was added as an educational example.
12+
*
13+
* https://webpack.js.org/plugins/split-chunks-plugin/
14+
*
15+
*/
16+
17+
/*
18+
* We've enabled TerserPlugin for you! This minifies your app
19+
* in order to load faster and run less javascript.
20+
*
21+
* https://github.com/webpack-contrib/terser-webpack-plugin
22+
*
23+
*/
24+
25+
const TerserPlugin = require('terser-webpack-plugin');
26+
27+
module.exports = {
28+
mode: 'development',
29+
entry: '../lib/transitive.js',
30+
31+
output: {
32+
path: path.resolve(__dirname, 'build'),
33+
},
34+
35+
plugins: [new webpack.ProgressPlugin()],
36+
37+
module: {
38+
rules: [
39+
{
40+
test: /\.(js|jsx)$/,
41+
include: [path.resolve(__dirname, '../lib'), path.resolve(__dirname, '../stories')],
42+
loader: 'babel-loader',
43+
},
44+
{
45+
test: /\.(png|jpe?g|gif)$/i,
46+
use: [
47+
{
48+
loader: 'file-loader',
49+
},
50+
],
51+
},
52+
{
53+
test: /.css$/,
54+
55+
use: [
56+
{
57+
loader: 'style-loader',
58+
},
59+
{
60+
loader: 'css-loader',
61+
62+
options: {
63+
sourceMap: true,
64+
},
65+
},
66+
],
67+
},
68+
],
69+
},
70+
71+
optimization: {
72+
minimizer: [new TerserPlugin()],
73+
74+
splitChunks: {
75+
cacheGroups: {
76+
vendors: {
77+
priority: -10,
78+
test: /[\\/]node_modules[\\/]/,
79+
},
80+
},
81+
82+
chunks: 'async',
83+
minChunks: 1,
84+
minSize: 30000,
85+
name: false,
86+
},
87+
},
88+
};

0 commit comments

Comments
 (0)