feat: update storybook to 5

Author: ariesjia

.storybook/addons.js

@@ -1,3 +1,3 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
 import '@storybook/addon-storysource/register'

.storybook/config.js

@@ -1,4 +1,9 @@
-import { configure } from '@storybook/react';
+import { configure, addParameters } from '@storybook/react';
+import { create } from '@storybook/theming';
+import 'bulma/css/bulma.css'
+
+const theme = create({ colorPrimary: '#FF4785', colorSecondary: '#1EA7FD' });
+addParameters({ options: { theme } });
 
 // automatically import all files ending in *.stories.js
 const req = require.context('../src/', true, /.*\.(stories|story)\.(js|jsx|ts|tsx)?$/);

.storybook/preview-head.html

@@ -0,0 +1 @@
+<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">-->

.storybook/webpack.config.js

@@ -2,62 +2,50 @@ const path = require('path');
 
 const SRC_PATH = path.join(__dirname, '../src');
 
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        loader: ['babel-loader', 'ts-loader'],
-        include: [
-          SRC_PATH,
-        ]
-      },
-      {
-        test: /\.story\.tsx?$/,
-        loaders: [
-          {
-            loader: require.resolve('@storybook/addon-storysource/loader'),
-            options: { parser: 'typescript' }
-          }
-        ],
-        enforce: 'pre',
-      },
-      {
-        test: /\.css$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.sass$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'scss-loader',
-            options: {
-              sourceMap: true,
-            },
+module.exports = ({ config, mode }) => {
+
+  config.module.rules.push(...[
+    {
+      test: /\.tsx?$/,
+      loader: ['babel-loader', 'ts-loader'],
+      include: [
+        SRC_PATH,
+      ]
+    },
+    {
+      test: /\.story\.tsx?$/,
+      loaders: [
+        {
+          loader: require.resolve('@storybook/addon-storysource/loader'),
+          options: { parser: 'typescript' }
+        }
+      ],
+      enforce: 'pre',
+    },
+    {
+      test: /\.sass$/,
+      use: [
+        {
+          loader: 'style-loader',
+        },
+        {
+          loader: 'css-loader',
+        },
+        {
+          loader: 'scss-loader',
+          options: {
+            sourceMap: true,
           },
-        ],
-      },
-    ]
-  },
+        },
+      ],
+    },
+  ])
 
-  resolve: {
+  config.resolve = {
+    ...config.resolve,
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
     enforceExtension: false
   }
+
+  return config
 };

package.json

@@ -24,14 +24,15 @@
     "async-validator": "^1.10.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.3.4",
     "@semantic-release/changelog": "^3.0.1",
     "@semantic-release/git": "^7.0.5",
     "@semantic-release/npm": "^5.0.5",
-    "@storybook/addon-actions": "^4.1.11",
-    "@storybook/addon-links": "^4.1.11",
-    "@storybook/addon-storysource": "^4.1.11",
-    "@storybook/addons": "^4.1.11",
-    "@storybook/react": "^4.1.11",
+    "@storybook/addon-actions": "^5.0.0",
+    "@storybook/addon-links": "^5.0.0",
+    "@storybook/addon-storysource": "^5.0.0",
+    "@storybook/addons": "^5.0.0",
+    "@storybook/react": "^5.0.0",
     "@types/jest": "^24.0.6",
     "@types/react": "^16.8.0",
     "@types/styled-jsx": "^2.2.8",

src/__stories__/1-normal.story.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import 'bulma/css/bulma.css'
 import {Checkbox, CheckboxGroup} from 'react-checkbox-group'
 import {storiesOf} from '@storybook/react'
 import {action} from '@storybook/addon-actions'

src/index.ts

@@ -1,5 +1,5 @@
 import {useState} from 'react'
-import * as AsyncValidator from 'async-validator'
+import AsyncValidator from 'async-validator'
 import {get} from './utils/safe-get'
 import {mapValues} from './utils/map-values'
 import {memoize} from './utils/memoize'