chore: Update to @storybook/react 5 (#506)

Author: Claudéric Demers

.storybook/addons.js

@@ -1,13 +1,12 @@
-import {addDecorator, configure} from '@storybook/react';
-import {withOptions} from '@storybook/addon-options';
+import {addParameters, configure} from '@storybook/react';
+import theme from './theme';
 
-addDecorator(
-  withOptions({
-    name: 'React Sortable HOC',
-    url: 'https://github.com/clauderic/react-sortable-hoc',
+addParameters({
+  options: {
     showAddonPanel: false,
-  })
-);
+    theme,
+  },
+});
 
 function loadStories() {
   require('../src/.stories/index.js');

.storybook/config.js

@@ -0,0 +1,4 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"
+  rel="stylesheet"
+/>

.storybook/manager-head.html

@@ -0,0 +1,37 @@
+import {create} from '@storybook/theming';
+
+export default create({
+  base: 'light',
+
+  colorSecondary: '#9276ff',
+
+  // UI
+  appBg: 'white',
+  appContentBg: '#f9f9f9',
+  appBorderColor: 'grey',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Roboto", Helvetica Neue, Helvetica, Arial, sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#364149',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: '#FFF',
+  barSelectedColor: '#FFF',
+  barBg: '#9276ff',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: '#efefef',
+  inputTextColor: '#364149',
+  inputBorderRadius: 0,
+
+  brandTitle: 'React Sortable HOC',
+  brandUrl: 'https://github.com/clauderic/react-sortable-hoc',
+  brandImage:
+    'https://d12c9k59mfk1gc.cloudfront.net/items/1T3k3f1s0v3K283t2W1s/react-sortable-hoc.svg',
+});

.storybook/theme.js

@@ -63,8 +63,9 @@
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.3",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-options": "^4.1.4",
-    "@storybook/react": "^4.1.4",
+    "@storybook/addon-options": "^5.0.1",
+    "@storybook/react": "^5.0.1",
+    "@storybook/theming": "^5.0.1",
     "autoprefixer": "^6.3.6",
     "babel-loader": "^8.0.5",
     "babel-plugin-transform-async-to-promises": "^0.8.4",
@@ -89,6 +90,7 @@
     "react-infinite": "^0.13.0",
     "react-tiny-virtual-list": "^2.0.1",
     "react-virtualized": "^9.2.2",
+    "react-window": "^1.6.2",
     "rollup": "^1.0.0",
     "rollup-plugin-babel": "^4.2.0",
     "rollup-plugin-commonjs": "^9.2.0",

package.json

@@ -56,9 +56,6 @@
   display: block;
   width: 18px;
   height: 18px;
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 L 0 7.5 z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 L 0 22.5 z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 L 0 37.5 z" color="#000"></path></svg>');
-  background-size: contain;
-  background-repeat: no-repeat;
   opacity: 0.25;
   margin-right: 20px;
   cursor: row-resize;