Skip to content

Commit 462f682

Browse files
alamprosalampros
committed
feat(build): storybook
Use webpack instead of rollup to reduce number of bundlers.
1 parent 3c3184c commit 462f682

File tree

9 files changed

+4858
-711
lines changed

9 files changed

+4858
-711
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
dist/*
22
node_modules/
33
www/public/
4+
!.storybook/

‎.storybook/addons.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '@storybook/addon-knobs/register'
2+
import '@storybook/addon-storysource/register'

‎.storybook/config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { configure } from '@storybook/react'
2+
3+
// automatically import all files ending in *.stories.js
4+
const req = require.context('../stories', true, /.stories.jsx?$/)
5+
function loadStories() {
6+
req.keys().forEach(filename => req(filename))
7+
}
8+
9+
configure(loadStories, module)

‎.storybook/webpack.config.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = ({ config, mode }) => {
2+
config.module.rules.push({
3+
test: /\.tsx?$/,
4+
use: ['babel-loader'],
5+
})
6+
config.module.rules.push({
7+
test: /.stories.jsx?$/,
8+
use: [require.resolve('@storybook/addon-storysource/loader')],
9+
enforce: 'pre',
10+
})
11+
config.resolve.extensions.push('.ts', '.tsx')
12+
return config
13+
}

‎package.json

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,21 @@
2727
"index.js"
2828
],
2929
"scripts": {
30-
"build": "tsc && rollup -c",
30+
"build": "yarn build-types && yarn build-transpile && yarn build-bundle",
31+
"build-types": "tsc",
32+
"build-transpile": "babel src --out-dir dist --extensions \".ts\"",
33+
"build-bundle": "webpack",
34+
"build-storybook": "build-storybook",
3135
"prebuild": "yarn clean",
32-
"develop": "rollup -c -w",
36+
"watch": "webpack --watch",
3337
"test": "tsc; yarn run lint",
3438
"clean": "git clean -xfd dist/",
3539
"cleanall": "git clean -xfd .",
3640
"lint": "eslint . --ext .js --ext .ts --ext .tsx",
37-
"prepare": "yarn run clean && yarn run lint && yarn run build",
41+
"prepare": "yarn run lint && yarn run build",
3842
"semantic-release": "semantic-release",
39-
"commit": "git-cz"
43+
"commit": "git-cz",
44+
"develop": "start-storybook -p 3000"
4045
},
4146
"peerDependencies": {
4247
"prop-types": "^15.6.0",
@@ -46,6 +51,7 @@
4651
"tween-functions": "^1.2.0"
4752
},
4853
"devDependencies": {
54+
"@babel/cli": "^7.2.3",
4955
"@babel/core": "^7.1.6",
5056
"@babel/plugin-proposal-class-properties": "^7.3.4",
5157
"@babel/plugin-proposal-object-rest-spread": "^7.3.4",
@@ -58,10 +64,17 @@
5864
"@semantic-release/github": "^5.2.10",
5965
"@semantic-release/npm": "^5.1.4",
6066
"@semantic-release/release-notes-generator": "^7.1.4",
67+
"@storybook/addon-actions": "^5.0.1",
68+
"@storybook/addon-knobs": "^5.0.1",
69+
"@storybook/addon-links": "^5.0.1",
70+
"@storybook/addon-storysource": "^5.0.1",
71+
"@storybook/addons": "^5.0.1",
72+
"@storybook/react": "^5.0.1",
6173
"@types/react": "^16.8.6",
6274
"@typescript-eslint/eslint-plugin": "^1.4.2",
6375
"@typescript-eslint/parser": "^1.3.0",
6476
"babel-eslint": "^10.0.1",
77+
"babel-loader": "^8.0.5",
6578
"commitizen": "^3.0.7",
6679
"cz-conventional-changelog": "^2.1.0",
6780
"eslint": "^5.13.0",
@@ -77,16 +90,11 @@
7790
"prop-types": "^15.6.0",
7891
"react": "^16.2.0",
7992
"react-dom": "^16.2.0",
80-
"rollup": "^1.4.0",
81-
"rollup-plugin-babel": "^4.3.2",
82-
"rollup-plugin-commonjs": "^9.2.1",
83-
"rollup-plugin-node-resolve": "^4.0.1",
84-
"rollup-plugin-uglify": "^6.0.2",
93+
"react-use": "^5.5.6",
8594
"semantic-release": "^15.1.7",
86-
"stylelint": "^9.10.1",
87-
"stylelint-config-rational-order": "^0.0.4",
88-
"stylelint-config-standard": "^18.2.0",
89-
"typescript": "^3.3.3333"
95+
"typescript": "^3.3.3333",
96+
"webpack": "^4.29.6",
97+
"webpack-cli": "^3.2.3"
9098
},
9199
"config": {
92100
"commitizen": {

‎rollup.config.js

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎stories/index.stories.jsx

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React from 'react'
2+
import { useWindowSize } from 'react-use'
3+
import { withKnobs, boolean, number } from '@storybook/addon-knobs'
4+
import { storiesOf } from '@storybook/react'
5+
6+
import ReactConfetti from '../src/ReactConfetti'
7+
8+
const SizedConfetti = (passedProps) => {
9+
const { width, height } = useWindowSize()
10+
return (
11+
<ReactConfetti
12+
width={width}
13+
height={height}
14+
{...passedProps}
15+
/>
16+
)
17+
}
18+
19+
const PointConfetti = (passedProps) => {
20+
const { width, height } = useWindowSize()
21+
return (
22+
<ReactConfetti
23+
width={width}
24+
height={height}
25+
confettiSource={{
26+
w: 10,
27+
h: 10,
28+
x: width / 2,
29+
y: height / 2,
30+
}}
31+
{...passedProps}
32+
/>
33+
)
34+
}
35+
36+
storiesOf('Confetti', module)
37+
.addDecorator(withKnobs)
38+
.add('Props', () => (
39+
<SizedConfetti
40+
run={boolean('Run', true)}
41+
recycle={boolean('Recycle', true)}
42+
numberOfPieces={number('# Pieces', 200, {
43+
range: true,
44+
min: 0,
45+
max: 2000,
46+
step: 10,
47+
})}
48+
wind={number('Wind', 0, {
49+
range: true,
50+
min: -0.5,
51+
max: 0.5,
52+
step: 0.001,
53+
})}
54+
gravity={number('Gravity', 0.1, {
55+
range: true,
56+
min: -1,
57+
max: 1,
58+
step: 0.01,
59+
})}
60+
opacity={number('Opacity', 100, {
61+
range: true,
62+
min: 0,
63+
max: 100,
64+
step: 1,
65+
}) / 100}
66+
/>
67+
))
68+
.add('Custom Source', () => (
69+
<PointConfetti
70+
run={boolean('Run', true)}
71+
recycle={boolean('Recycle', true)}
72+
numberOfPieces={number('# Pieces', 200, {
73+
range: true,
74+
min: 0,
75+
max: 2000,
76+
step: 10,
77+
})}
78+
wind={number('Wind', 0, {
79+
range: true,
80+
min: -0.5,
81+
max: 0.5,
82+
step: 0.001,
83+
})}
84+
gravity={number('Gravity', 0.1, {
85+
range: true,
86+
min: -1,
87+
max: 1,
88+
step: 0.01,
89+
})}
90+
opacity={number('Opacity', 100, {
91+
range: true,
92+
min: 0,
93+
max: 100,
94+
step: 1,
95+
}) / 100}
96+
/>
97+
))
98+
.add('Default', () => <ReactConfetti />)

‎webpack.config.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const path = require('path')
2+
3+
const base = {
4+
mode: 'development',
5+
devtool: 'source-map',
6+
entry: {
7+
'react-confetti': ['./src/ReactConfetti.tsx'],
8+
},
9+
output: {
10+
path: path.join(__dirname, 'dist'),
11+
filename: '[name].js',
12+
library: 'ReactConfetti',
13+
libraryTarget: 'umd',
14+
libraryExport: 'default',
15+
globalObject: 'typeof self !== "undefined" ? self : this',
16+
},
17+
module: {
18+
rules: [
19+
{
20+
test: /\.tsx?$/,
21+
loaders: ['babel-loader'],
22+
exclude: [/node_modules/],
23+
},
24+
],
25+
},
26+
externals: {
27+
react: {
28+
root: 'React',
29+
commonjs2: 'react',
30+
commonjs: 'react',
31+
amd: 'react',
32+
},
33+
},
34+
resolve: {
35+
extensions: ['.js', '.jsx', '.ts', '.tsx'],
36+
},
37+
}
38+
39+
module.exports = [
40+
base,
41+
{
42+
...base,
43+
mode: 'production',
44+
output: {
45+
...base.output,
46+
filename: '[name].min.js',
47+
},
48+
},
49+
]

0 commit comments

Comments
 (0)