build: migrate to storybook 5 (apache#133)

* build: storybook 5

* feat: configure js/jsx storybook

* chore: modify storybook webpack config

* fix: type

* fix: packages.json dep order

superset-frontend/temporary_superset_ui/superset-ui/package.json

@@ -16,7 +16,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 install && yarn run test",
     "prerelease": "yarn run build",
     "pretest": "yarn run lint",

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/.storybook/addons.js

@@ -0,0 +1,4 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';
+import 'storybook-addon-jsx/register';

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/storybookInfo.js → superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/.storybook/config.js

@@ -1,20 +1,25 @@
-import { addDecorator } from '@storybook/react';
-import { withOptions } from '@storybook/addon-options';
+import { addParameters, configure } from '@storybook/react';
 
-addDecorator(
-  withOptions({
+addParameters({
+  options: {
+    name: '✨ Superset UI',
     addonPanelInRight: false,
     enableShortcuts: false,
     goFullScreen: false,
     hierarchySeparator: /\|/,
-    // hierarchyRootSeparator: null,
-    name: '✨ Superset UI',
     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,
     showStoriesPanel: true,
     sidebarAnimations: true,
     sortStoriesByKind: false,
     url: '#',
-  }),
-);
+  },
+});
+
+function loadStorybook() {
+  require('./storybook.css');
+  require('../storybook/stories'); // all of the stories
+}
+
+configure(loadStorybook, module);

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook-config/webpack.config.js → superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/.storybook/webpack.config.js

@@ -1,7 +1,5 @@
-module.exports = (baseConfig, env, config) => {
-  const customConfig = config;
-
-  customConfig.module.rules.push({
+module.exports = async ({ config }) => {
+  config.module.rules.push({
     loader: require.resolve('babel-loader'),
     options: {
       presets: [
@@ -13,7 +11,7 @@ module.exports = (baseConfig, env, config) => {
     test: /\.tsx?$/,
   });
 
-  customConfig.resolve.extensions.push('.ts', '.tsx');
+  config.resolve.extensions.push('.ts', '.tsx');
 
-  return customConfig;
+  return config;
 };

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-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,12 +29,13 @@
   },
   "homepage": "https://github.com/apache-superset/superset-ui#readme",
   "dependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/polyfill": "^7.2.5",
-    "@storybook/addon-knobs": "^4.0.2",
-    "@storybook/addon-options": "^4.0.3",
-    "@storybook/react": "^4.0.2",
-    "@superset-ui/chart": "^0.11.1",
+    "@babel/polyfill": "^7.4.3",
+    "@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",
+    "@superset-ui/chart": "^0.11.0",
     "@superset-ui/color": "^0.11.0",
     "@superset-ui/connection": "^0.11.0",
     "@superset-ui/legacy-plugin-chart-sankey": "^0.10.0",
@@ -43,16 +44,15 @@
     "@superset-ui/legacy-preset-chart-big-number": "^0.10.0",
     "@superset-ui/number-format": "^0.11.0",
     "@superset-ui/plugin-chart-word-cloud": "^0.10.0",
-    "@superset-ui/time-format": "^0.11.2",
-    "babel-loader": "^8.0.4",
-    "bootstrap": "^4.2.1",
-    "git-directory-deploy": "^1.5.1",
-    "prop-types": "^15.6.2",
+    "@superset-ui/time-format": "^0.11.0",
+    "@types/storybook__addon-knobs": "^4.0.4",
+    "bootstrap": "^4.3.1",
     "react": "^16.6.0",
-    "react-dom": "^16.6.0",
-    "storybook-addon-jsx": "^5.4.0"
+    "storybook-addon-jsx": "^7.1.0"
   },
   "devDependencies": {
-    "@types/storybook__addon-knobs": "^4.0.4"
+    "@babel/core": "^7.4.3",
+    "babel-loader": "^8.0.5",
+    "gh-pages": "^2.0.1"
   }
 }