From 62d7c71d653110507f2b4f0571d10f310d4ccae9 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Wed, 10 Apr 2019 11:58:26 -0700 Subject: [PATCH] build: migrate to storybook 5 (#46) * build: migrate to storybook 5 * fix: configuration * fix: delete dir on build --- plugins/superset-ui-plugins/package.json | 6 +- .../addons.js | 3 +- .../storybookInfo.js => .storybook/config.js} | 21 ++++--- .../storybook.css | 0 .../.storybook/webpack.config.js | 53 +++++++++++++++++ .../superset-ui-plugins-demo/package.json | 47 ++++++++------- .../storybook-config/config.js | 9 --- .../storybook-config/webpack.config.js | 57 ------------------- .../storybook/stories/index.js | 1 + 9 files changed, 97 insertions(+), 100 deletions(-) rename plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/{storybook-config => .storybook}/addons.js (63%) rename plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/{storybook/storybookInfo.js => .storybook/config.js} (66%) rename plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/{storybook-config => .storybook}/storybook.css (100%) create mode 100644 plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/webpack.config.js delete mode 100644 plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/config.js delete mode 100644 plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js diff --git a/plugins/superset-ui-plugins/package.json b/plugins/superset-ui-plugins/package.json index 6540471b9..0fa13669b 100644 --- a/plugins/superset-ui-plugins/package.json +++ b/plugins/superset-ui-plugins/package.json @@ -5,8 +5,8 @@ "private": true, "scripts": { "build": "yarn build:cjs && yarn build:esm && yarn run type:dts && yarn build:assets", - "build:cjs": "NODE_ENV=production beemo babel --extensions=\".js,.jsx,.ts,.tsx\" ./src --out-dir lib/ --minify --workspaces=\"@superset-ui/!(plugins-demo)\"", - "build:esm": "NODE_ENV=production beemo babel --extensions=\".js,.jsx,.ts,.tsx\" ./src --out-dir esm/ --esm --minify --workspaces=\"@superset-ui/!(plugins-demo)\"", + "build:cjs": "NODE_ENV=production beemo babel --extensions=\".js,.jsx,.ts,.tsx\" ./src --out-dir lib/ --delete-dir-on-start --minify --workspaces=\"@superset-ui/!(plugins-demo)\"", + "build:esm": "NODE_ENV=production beemo babel --extensions=\".js,.jsx,.ts,.tsx\" ./src --out-dir esm/ --delete-dir-on-start --esm --minify --workspaces=\"@superset-ui/!(plugins-demo)\"", "build:assets": "node ./buildAssets.js", "commit": "superset-commit", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0", @@ -15,7 +15,7 @@ "lint": "beemo create-config prettier && beemo eslint \"./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"", "lint:fix": "beemo create-config prettier && beemo eslint --fix \"./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"", "jest": "beemo jest --color --coverage --react", - "postrelease": "lerna run gh-pages", + "postrelease": "lerna run deploy-demo", "prepare-release": "git checkout master && git pull --rebase origin master && lerna bootstrap && yarn run test", "prerelease": "yarn run build", "pretest": "yarn run lint", diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/addons.js b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/addons.js similarity index 63% rename from plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/addons.js rename to plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/addons.js index 39b15d1c8..74d263f3d 100644 --- a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/addons.js +++ b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/addons.js @@ -1,4 +1,5 @@ // note that the import order here determines the order in the UI! +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; import '@storybook/addon-knobs/register'; -import '@storybook/addon-options/register'; import 'storybook-addon-jsx/register'; diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/storybookInfo.js b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/config.js similarity index 66% rename from plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/storybookInfo.js rename to plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/config.js index 8f710c5d4..8adc61eb5 100644 --- a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/storybookInfo.js +++ b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/config.js @@ -1,14 +1,12 @@ -import { addDecorator } from '@storybook/react'; -import { withOptions } from '@storybook/addon-options'; +import { addParameters, configure } from '@storybook/react'; -addDecorator( - withOptions({ +addParameters({ + options: { + name: '@superset-ui/plugins 🔌💡', addonPanelInRight: false, enableShortcuts: false, goFullScreen: false, hierarchySeparator: /\|/, - // hierarchyRootSeparator: null, - name: '@superset-ui/plugins 🔌💡', selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook showAddonPanel: true, showSearchBox: false, @@ -16,5 +14,12 @@ addDecorator( sidebarAnimations: true, sortStoriesByKind: false, url: '#', - }), -); + }, +}); + +function loadStorybook() { + require('./storybook.css'); + require('../storybook/stories'); // all of the stories +} + +configure(loadStorybook, module); diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/storybook.css b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/storybook.css similarity index 100% rename from plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/storybook.css rename to plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/storybook.css diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/webpack.config.js b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/webpack.config.js new file mode 100644 index 000000000..77754e432 --- /dev/null +++ b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/.storybook/webpack.config.js @@ -0,0 +1,53 @@ +const path = require('path'); + +const BABEL_TYPESCRIPT_OPTIONS = { + presets: [ + ['@babel/preset-env', { useBuiltIns: 'entry' }], + '@babel/preset-react', + '@babel/preset-typescript', + ], + plugins: [ + '@babel/plugin-proposal-object-rest-spread', + '@babel/plugin-proposal-class-properties', + '@babel/plugin-syntax-dynamic-import', + ] +}; + +const SIBLING_PACKAGES_PATH_REGEXP = new RegExp( + `${path.resolve(__dirname, '../../superset-ui-(legacy-)*(plugin|preset)-')}.+/src`, +); + +module.exports = async ({ config }) => { + config.resolve = config.resolve || {}; + config.resolve.extensions = ['.tsx', '.ts', '.jsx', '.js']; + + // To enable live debugging of other packages when referring to `src` + config.module.rules.push({ + include: SIBLING_PACKAGES_PATH_REGEXP, + exclude: /node_modules/, + test: /\.jsx?$/, + use: config.module.rules[0].use, + }); + + // Enable TypeScript + config.module.rules.push({ + include: SIBLING_PACKAGES_PATH_REGEXP, + exclude: /node_modules/, + test: /\.tsx?$/, + use: [{ + loader: 'babel-loader', + options: BABEL_TYPESCRIPT_OPTIONS, + }], + }); + + config.module.rules.push({ + exclude: /node_modules/, + test: /\.tsx?$/, + use: [{ + loader: 'babel-loader', + options: BABEL_TYPESCRIPT_OPTIONS, + }], + }); + + return config; +}; diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json index fac5164cc..ea79f4874 100644 --- a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json +++ b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json @@ -5,11 +5,11 @@ "private": true, "main": "index.js", "scripts": { - "gh-pages:clean": "rm -rf _gh-pages", - "gh-pages:build": "build-storybook -o _gh-pages -c storybook-config", - "gh-pages:publish": "git-directory-deploy --directory _gh-pages", - "gh-pages": "npm run gh-pages:clean && npm run gh-pages:build && npm run gh-pages:publish && npm run gh-pages:clean", - "storybook": "start-storybook -p 9001 -c storybook-config" + "demo:clean": "rm -rf _gh-pages", + "demo:build": "build-storybook -o _gh-pages", + "demo:publish": "gh-pages -d _gh-pages", + "deploy-demo": "npm run demo:clean && npm run demo:build && npm run demo:publish && npm run demo:clean", + "storybook": "start-storybook -p 9001" }, "repository": { "type": "git", @@ -29,26 +29,29 @@ }, "homepage": "https://github.com/apache-superset/superset-ui-plugins#readme", "dependencies": { - "@babel/core": "^7.1.2", - "@babel/plugin-syntax-dynamic-import": "^7.2.0", + "@babel/polyfill": "^7.4.3", "@data-ui/event-flow": "^0.0.54", - "@storybook/addon-knobs": "^4.0.2", - "@storybook/addon-options": "^4.0.3", - "@storybook/react": "^4.1.11", + "@storybook/addon-actions": "^5.0.6", + "@storybook/addon-knobs": "^5.0.6", + "@storybook/addon-links": "^5.0.6", + "@storybook/addons": "^5.0.6", + "@storybook/react": "^5.0.6", + "@types/react": "^16.8.8", + "@types/storybook__addon-knobs": "^4.0.4", + "bootstrap": "^4.3.1", + "react": "^16.6.0", + "storybook-addon-jsx": "^7.1.0" + }, + "devDependencies": { + "@babel/core": "^7.4.3", + "@babel/plugin-syntax-dynamic-import": "^7.2.0", + "babel-loader": "^8.0.5", + "gh-pages": "^2.0.1" + }, + "peerDependencies": { "@superset-ui/chart": "^0.11.0", "@superset-ui/color": "^0.11.0", "@superset-ui/time-format": "^0.11.0", - "@superset-ui/translation": "^0.11.0", - "@types/react": "^16.8.8", - "babel-loader": "^8.0.4", - "bootstrap": "^3.3.6", - "cache-loader": "^1.2.2", - "fork-ts-checker-webpack-plugin": "^0.4.9", - "git-directory-deploy": "^1.5.1", - "react": "^16.6.0", - "react-dom": "^16.6.0", - "storybook-addon-jsx": "^5.4.0", - "thread-loader": "^1.2.0", - "ts-loader": "^5.2.0" + "@superset-ui/translation": "^0.11.0" } } diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/config.js b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/config.js deleted file mode 100644 index 582d5317d..000000000 --- a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/config.js +++ /dev/null @@ -1,9 +0,0 @@ -import { configure } from '@storybook/react'; - -function loadStorybook() { - require('./storybook.css'); - require('../storybook/storybookInfo'); // this customizes the UI (labels, etc.) - require('../storybook/stories'); // all of the stories -} - -configure(loadStorybook, module); diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js deleted file mode 100644 index 94c808ecc..000000000 --- a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js +++ /dev/null @@ -1,57 +0,0 @@ -const path = require('path'); -const os = require('os'); -const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); - -// Export a function. Accept the base config as the only param. -module.exports = (storybookBaseConfig, configType, defaultConfig) => { - // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' - // You can change the configuration based on that. - // 'PRODUCTION' is used when building the static version of storybook. - - /* eslint-disable-next-line */ - defaultConfig.resolve = defaultConfig.resolve || {}; - /* eslint-disable-next-line */ - defaultConfig.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx']; - - defaultConfig.plugins.push( - new ForkTsCheckerWebpackPlugin({ - checkSyntacticErrors: true, - }), - ); - - defaultConfig.module.rules[0].use[0].options.plugins.push('@babel/plugin-syntax-dynamic-import'); - - defaultConfig.module.rules.push({ - exclude: /node_modules/, - include: new RegExp( - `${path.resolve(__dirname, '../../superset-ui-(legacy-)*(plugin|preset)-')}.+/src`, - ), - test: /\.jsx?$/, - use: defaultConfig.module.rules[0].use, - }); - - defaultConfig.module.rules.push({ - test: /\.tsx?$/, - use: [ - { loader: 'cache-loader' }, - { - loader: 'thread-loader', - options: { - // there should be 1 cpu for the fork-ts-checker-webpack-plugin - workers: os.cpus().length - 1, - }, - }, - { - loader: 'ts-loader', - options: { - // transpile only in happyPack mode - // type checking is done via fork-ts-checker-webpack-plugin - happyPackMode: true, - }, - }, - ], - }); - - // Return the altered config - return defaultConfig; -}; diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/index.js b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/index.js index 012e97a7a..79581ecc2 100644 --- a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/index.js +++ b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/index.js @@ -1,3 +1,4 @@ +import '@babel/polyfill'; import { setAddon, storiesOf } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; import JSXAddon from 'storybook-addon-jsx';