feat(storybook): upgrade storybook

.storybook/addons.js

@@ -1,4 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 
-import '@storybook/addon-links/register'
 import '@storybook/addon-knobs/register'
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-storysource/register'

.storybook/config.js

@@ -1,13 +1,20 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 
-import { configure, setAddon } from '@storybook/react'
-import infoAddon, { setDefaults } from '@storybook/addon-info'
-import './style.css'
+import { configure, addParameters, addDecorator } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+import theme from './theme'
 
-setDefaults({
+addParameters({
+    options: {
+        theme,
+    }
+})
+
+addDecorator(withInfo({
     header: true,
     inline: true,
     propTables: false,
+    source: false,
     maxPropObjectKeys: 10000,
     maxPropArrayLength: 10000,
     maxPropStringLength: 10000,
@@ -34,8 +41,7 @@ setDefaults({
             },
         },
     },
-})
-setAddon(infoAddon)
+}))
 
 function loadStories() {
     require('../packages/bar/stories/bar.stories')

.storybook/preview-head.html

@@ -0,0 +1,26 @@
+<style type="text/css">
+#root {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+}
+
+#story-root {
+    /*
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    */
+    font-family: 'Consolas', monospace;
+    font-size: 13px;
+}
+
+#story-root text {
+    font-family: 'Consolas', monospace;
+}
+</style>

.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming'
+
+export default create({
+    base: 'light',
+
+    brandTitle: 'nivo',
+    brandUrl: 'https://nivo.rocks',
+    brandImage: null,
+})

.storybook/webpack.config.js

@@ -0,0 +1,45 @@
+module.exports = ({ config }) => {
+    return {
+        ...config,
+        module: {
+            ...config.module,
+            rules: [
+                // Temp fix for issue: https://github.com/storybooks/storybook/issues/3346
+                ...config.module.rules.map(rule => {
+                    if (rule.use && rule.use.length) {
+                        const isBabelLoader = rule.use.some(({ loader }) => loader === 'babel-loader')
+                        if (isBabelLoader) {
+                            return {
+                                ...rule,
+                                use: rule.use.map(use => {
+                                    if (use.loader === 'babel-loader') {
+                                        return {
+                                            ...use,
+                                            options: {
+                                                ...use.options,
+                                                babelrc: false,
+                                            }
+                                        }
+                                    }
+
+                                    return use
+                                }),
+                                exclude: [
+                                    ...rule.exclude,
+                                    /\/packages\/.*\/cjs\//
+                                ]
+                            }
+                        }
+                    }
+
+                    return rule
+                }),
+                {
+                    test: /\.stories\.jsx?$/,
+                    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+                    enforce: 'pre',
+                }
+            ]
+        }
+    }
+}

Makefile

@@ -260,11 +260,11 @@ website-links-rm: ##@2 website unlink all linked packages
 ########################################################################################################################
 
 storybook: ##@3 storybook start storybook in dev mode on port 6006
-	@./node_modules/.bin/start-storybook -p 6006
+	@yarn start-storybook -p 6006
 
 storybook-build: ##@3 storybook build storybook
 	@echo "${YELLOW}Building storybook${RESET}"
-	@./node_modules/.bin/build-storybook
+	@yarn build-storybook
 
 storybook-deploy: ##@3 storybook build and deploy storybook
 	@$(MAKE) storybook-build