chore(storybook): Storybook 6.0.X Upgrade (#1177)

Co-authored-by: James Hardwick <jamesdh@gmail.com>
plouc · Oct 22, 2020 · 48d402e · 48d402e
1 parent 7854529
commit 48d402e
Show file tree

Hide file tree

Showing 10 changed files with 2,850 additions and 1,701 deletions.
diff --git a/.storybook/addons.js b/.storybook/addons.js
diff --git a/.storybook/config.js b/.storybook/config.js
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ['../**/*.stories.js'],
+  addons: [
+    '@storybook/addon-knobs',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-storysource',
+  ],
+};
diff --git a/.storybook/theme.js → .storybook/manager.js b/.storybook/theme.js → .storybook/manager.js
@@ -2,7 +2,6 @@ import { create } from '@storybook/theming'
 
 export default create({
     base: 'light',
-
     brandTitle: 'nivo',
     brandUrl: 'https://nivo.rocks',
     brandImage: null,

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,42 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import { withInfo } from '@storybook/addon-info'
+import theme from './manager'
+
+export const parameters = {
+    options: {
+        theme,
+    }
+};
+export const decorators = [withInfo({
+    header: true,
+    inline: true,
+    propTables: false,
+    source: false,
+    maxPropObjectKeys: 10000,
+    maxPropArrayLength: 10000,
+    maxPropStringLength: 10000,
+    styles: {
+        infoBody: {
+            border: 'none',
+            borderRadius: 0,
+            padding: '0 30px 20px',
+            marginTop: '0',
+            marginBottom: '0',
+            boxShadow: 'none',
+        },
+        header: {
+            h1: {
+                fontSize: '28px',
+            },
+            h2: {
+                fontSize: '16px',
+            },
+        },
+        source: {
+            h1: {
+                fontSize: '22px',
+            },
+        },
+    },
+})];
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
diff --git a/package.json b/package.json
@@ -23,14 +23,14 @@
     "@nivo/generators": "*",
     "@rollup/plugin-babel": "^5.0.3",
     "@rollup/plugin-node-resolve": "^8.0.1",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-info": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addon-storysource": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/react": "^5.3.19",
-    "@storybook/theming": "^5.3.19",
+    "@storybook/addon-actions": "^6.0.26",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-knobs": "^6.0.26",
+    "@storybook/addon-links": "^6.0.26",
+    "@storybook/addon-storysource": "^6.0.26",
+    "@storybook/addons": "^6.0.26",
+    "@storybook/react": "^6.0.26",
+    "@storybook/theming": "^6.0.26",
     "@types/lodash": "^4.14.149",
     "@types/react": "^16.9.16",
     "babel-eslint": "^10.1.0",
@@ -40,6 +40,7 @@
     "babel-preset-react-app": "^9.1.2",
     "chalk": "^2.4.2",
     "clog-cli": "^1.0.0",
+    "core-js": "^3.0.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^7.3.0",

diff --git a/packages/bar/stories/raceChart.stories.js b/packages/bar/stories/raceChart.stories.js
@@ -10,7 +10,7 @@ import React, { useState, useEffect } from 'react'
 import { storiesOf } from '@storybook/react'
 import { Bar } from '../src'
 
-const stories = storiesOf('Bar/race chart', module)
+const stories = storiesOf('Bar', module)
 
 const DataGenerator = (initialIndex, initialState) => {
     let index = initialIndex
@@ -141,4 +141,4 @@ const Sample = () => {
     )
 }
 
-stories.add('demo', () => <Sample />)
+stories.add('race chart', () => <Sample />)
diff --git a/packages/funnel/stories/clustering.stories.js b/packages/funnel/stories/clustering.stories.js
@@ -15,7 +15,7 @@ import { ResponsiveWaffle } from '../../waffle/src'
 import { ResponsiveBar } from '../../bar/src'
 import { ResponsiveFunnel } from '../src'
 
-const stories = storiesOf('Funnel/sub-clustering', module)
+const stories = storiesOf('Funnel', module)
 
 const steps = ['sent', 'viewed', 'clicked', 'add_to_card', 'purchased']
 const baseValue = 100000
@@ -342,4 +342,4 @@ const Sample = () => {
     )
 }
 
-stories.add('demo', () => <Sample />)
+stories.add('sub-clustering', () => <Sample />)