Skip to content

Commit

Permalink
feat(build): storybook
Browse files Browse the repository at this point in the history
Use webpack instead of rollup to reduce number of bundlers.
  • Loading branch information
alampros committed Mar 13, 2019
1 parent 3c3184c commit 462f682
Show file tree
Hide file tree
Showing 9 changed files with 4,858 additions and 711 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
dist/*
node_modules/
www/public/
!.storybook/
2 changes: 2 additions & 0 deletions .storybook/addons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import '@storybook/addon-knobs/register'
import '@storybook/addon-storysource/register'
9 changes: 9 additions & 0 deletions .storybook/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { configure } from '@storybook/react'

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.jsx?$/)
function loadStories() {
req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)
13 changes: 13 additions & 0 deletions .storybook/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.tsx?$/,
use: ['babel-loader'],
})
config.module.rules.push({
test: /.stories.jsx?$/,
use: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
})
config.resolve.extensions.push('.ts', '.tsx')
return config
}
34 changes: 21 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,21 @@
"index.js"
],
"scripts": {
"build": "tsc && rollup -c",
"build": "yarn build-types && yarn build-transpile && yarn build-bundle",
"build-types": "tsc",
"build-transpile": "babel src --out-dir dist --extensions \".ts\"",
"build-bundle": "webpack",
"build-storybook": "build-storybook",
"prebuild": "yarn clean",
"develop": "rollup -c -w",
"watch": "webpack --watch",
"test": "tsc; yarn run lint",
"clean": "git clean -xfd dist/",
"cleanall": "git clean -xfd .",
"lint": "eslint . --ext .js --ext .ts --ext .tsx",
"prepare": "yarn run clean && yarn run lint && yarn run build",
"prepare": "yarn run lint && yarn run build",
"semantic-release": "semantic-release",
"commit": "git-cz"
"commit": "git-cz",
"develop": "start-storybook -p 3000"
},
"peerDependencies": {
"prop-types": "^15.6.0",
Expand All @@ -46,6 +51,7 @@
"tween-functions": "^1.2.0"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.3.4",
"@babel/plugin-proposal-object-rest-spread": "^7.3.4",
Expand All @@ -58,10 +64,17 @@
"@semantic-release/github": "^5.2.10",
"@semantic-release/npm": "^5.1.4",
"@semantic-release/release-notes-generator": "^7.1.4",
"@storybook/addon-actions": "^5.0.1",
"@storybook/addon-knobs": "^5.0.1",
"@storybook/addon-links": "^5.0.1",
"@storybook/addon-storysource": "^5.0.1",
"@storybook/addons": "^5.0.1",
"@storybook/react": "^5.0.1",
"@types/react": "^16.8.6",
"@typescript-eslint/eslint-plugin": "^1.4.2",
"@typescript-eslint/parser": "^1.3.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"commitizen": "^3.0.7",
"cz-conventional-changelog": "^2.1.0",
"eslint": "^5.13.0",
Expand All @@ -77,16 +90,11 @@
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"rollup": "^1.4.0",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^9.2.1",
"rollup-plugin-node-resolve": "^4.0.1",
"rollup-plugin-uglify": "^6.0.2",
"react-use": "^5.5.6",
"semantic-release": "^15.1.7",
"stylelint": "^9.10.1",
"stylelint-config-rational-order": "^0.0.4",
"stylelint-config-standard": "^18.2.0",
"typescript": "^3.3.3333"
"typescript": "^3.3.3333",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"config": {
"commitizen": {
Expand Down
40 changes: 0 additions & 40 deletions rollup.config.js

This file was deleted.

98 changes: 98 additions & 0 deletions stories/index.stories.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import React from 'react'
import { useWindowSize } from 'react-use'
import { withKnobs, boolean, number } from '@storybook/addon-knobs'
import { storiesOf } from '@storybook/react'

import ReactConfetti from '../src/ReactConfetti'

const SizedConfetti = (passedProps) => {
const { width, height } = useWindowSize()
return (
<ReactConfetti
width={width}
height={height}
{...passedProps}
/>
)
}

const PointConfetti = (passedProps) => {
const { width, height } = useWindowSize()
return (
<ReactConfetti
width={width}
height={height}
confettiSource={{
w: 10,
h: 10,
x: width / 2,
y: height / 2,
}}
{...passedProps}
/>
)
}

storiesOf('Confetti', module)
.addDecorator(withKnobs)
.add('Props', () => (
<SizedConfetti
run={boolean('Run', true)}
recycle={boolean('Recycle', true)}
numberOfPieces={number('# Pieces', 200, {
range: true,
min: 0,
max: 2000,
step: 10,
})}
wind={number('Wind', 0, {
range: true,
min: -0.5,
max: 0.5,
step: 0.001,
})}
gravity={number('Gravity', 0.1, {
range: true,
min: -1,
max: 1,
step: 0.01,
})}
opacity={number('Opacity', 100, {
range: true,
min: 0,
max: 100,
step: 1,
}) / 100}
/>
))
.add('Custom Source', () => (
<PointConfetti
run={boolean('Run', true)}
recycle={boolean('Recycle', true)}
numberOfPieces={number('# Pieces', 200, {
range: true,
min: 0,
max: 2000,
step: 10,
})}
wind={number('Wind', 0, {
range: true,
min: -0.5,
max: 0.5,
step: 0.001,
})}
gravity={number('Gravity', 0.1, {
range: true,
min: -1,
max: 1,
step: 0.01,
})}
opacity={number('Opacity', 100, {
range: true,
min: 0,
max: 100,
step: 1,
}) / 100}
/>
))
.add('Default', () => <ReactConfetti />)
49 changes: 49 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
const path = require('path')

const base = {
mode: 'development',
devtool: 'source-map',
entry: {
'react-confetti': ['./src/ReactConfetti.tsx'],
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
library: 'ReactConfetti',
libraryTarget: 'umd',
libraryExport: 'default',
globalObject: 'typeof self !== "undefined" ? self : this',
},
module: {
rules: [
{
test: /\.tsx?$/,
loaders: ['babel-loader'],
exclude: [/node_modules/],
},
],
},
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
}

module.exports = [
base,
{
...base,
mode: 'production',
output: {
...base.output,
filename: '[name].min.js',
},
},
]
Loading

0 comments on commit 462f682

Please sign in to comment.