Update storybook and fix changes

packages/devui/.storybook/config.js

@@ -1,23 +1,23 @@
 import { configure, setAddon, addDecorator } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
+import { withOptions } from '@storybook/addon-options';
-import infoAddon from '@storybook/addon-info';
+import { withInfo } from '@storybook/addon-info';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withTheme } from './themeAddon/theme';
 import '../src/presets.js';
 
-setAddon(infoAddon);
+addDecorator(withOptions({
-setOptions({
   name: 'DevUI',
   url: 'https://github.com/reduxjs/redux-devtools/tree/master/packages/devui',
   goFullScreen: false,
-  showLeftPanel: true,
+  showStoriesPanel: true,
-  showDownPanel: true,
+  showAddonPanel: true,
   showSearchBox: false,
-  downPanelInRight: true
+  addonPanelInRight: true
-});
+}));
 
 addDecorator(withTheme);
 addDecorator(withKnobs);
+addDecorator(withInfo);
 
 const req = require.context('../src/', true, /stories\/index\.js$/);
 

packages/devui/.storybook/preview-head.html

@@ -14,7 +14,7 @@
     font-family: "Helvetica Neue", "Lucida Grande", sans-serif;
     font-size: 11px;
   }
-  #root, #root > div, #root > div > div {
+  #root, #root > div {
     height: 100%;
   }
   #root > div > div {
@@ -22,5 +22,6 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
+    overflow-y: auto;
   }
 </style>

packages/devui/.storybook/themeAddon/Panel.js

@@ -25,6 +25,8 @@ export default class Panel extends React.Component {
     this.setState(state);
   };
 
+  onClick = () => {};
+
   render() {
     const { theme, scheme, light } = this.state;
     return (
@@ -50,6 +52,7 @@ export default class Panel extends React.Component {
             }
           ]}
           onFieldChange={this.onChange}
+          onFieldClick={this.onClick}
         />
       </FormWrapper>
     );

packages/devui/.storybook/themeAddon/register.js

@@ -7,6 +7,10 @@ addons.register(ADDON_ID, api => {
   const channel = addons.getChannel();
   addons.addPanel(PANEL_ID, {
     title: 'Theme',
-    render: () => <Panel channel={channel} api={api} />
+    render: ({ active }) => (
+      active ?
+        <Panel channel={channel} api={api} />
+        : null
+    )
   });
 });

packages/devui/.storybook/themeAddon/theme.js

@@ -1,22 +1,8 @@
 import React from 'react';
 import addons from '@storybook/addons';
-import styled from 'styled-components';
 import { EVENT_ID_DATA, DEFAULT_THEME_STATE } from './constant';
 import { Container } from '../../src';
 
-const ContainerStyled = styled(Container)`
-  > div {
-    height: 100%;
-    width: 100%;
-
-    > div {
-      height: 100%;
-      width: 100%;
-      overflow-y: auto;
-    }
-  }
-`;
-
 const channel = addons.getChannel();
 
 class Theme extends React.Component {
@@ -35,7 +21,7 @@ class Theme extends React.Component {
   };
 
   render() {
-    return <ContainerStyled themeData={this.state}>{this.props.children}</ContainerStyled>;
+    return <Container themeData={this.state}>{this.props.children}</Container>;
   }
 }
 

packages/devui/.storybook/user/modify_webpack_config.js

@@ -1,4 +0,0 @@
-module.exports = function (config) {
-  // This is the default webpack config defined in the `../webpack.config.js`
-  // modify as you need.
-};

packages/devui/.storybook/webpack.config.js

@@ -1,26 +1,8 @@
 const path = require('path');
-const updateConfig = require('./user/modify_webpack_config');
 
-const config = {
+module.exports = (baseConfig, env, defaultConfig) => {
-  module: {
+  // Add custom webpack config here like:
-    rules: [
+  // defaultConfig.module.rules.push
-      {
+
-        test: /\.css?$/,
+  return defaultConfig;
-        use: [{ loader: 'style-loader' }, { loader: 'raw-loader' }],
-        include: path.resolve(__dirname, '../')
-      },
-      {
-        test: /\.json?$/,
-        loader: 'json-loader',
-        include: path.resolve(__dirname, '../')
-      },
-      {
-        test: /\.woff2?(\?\S*)?$/,
-        loader: 'url?limit=65000&mimetype=application/font-woff'
-      }
-    ]
-  }
 };
-
-updateConfig(config);
-module.exports = config;

packages/devui/package.json

@@ -30,11 +30,11 @@
   },
   "homepage": "https://github.com/reduxjs/redux-devtools",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.2.13",
+    "@storybook/addon-actions": "^4.1.4",
-    "@storybook/addon-info": "^3.2.13",
+    "@storybook/addon-info": "^4.1.4",
-    "@storybook/addon-knobs": "^3.2.13",
+    "@storybook/addon-knobs": "^4.1.4",
-    "@storybook/addon-options": "^3.2.13",
+    "@storybook/addon-options": "^4.1.4",
-    "@storybook/react": "^3.2.13",
+    "@storybook/react": "4.0.9",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^6.0.2",
@@ -45,7 +45,6 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.16.0",
-    "css-loader": "^0.28.7",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "enzyme-to-json": "^3.1.4",
@@ -54,25 +53,18 @@
     "eslint-plugin-babel": "^3.2.0",
     "eslint-plugin-jsx-a11y": "^0.6.2",
     "eslint-plugin-react": "^4.3.0",
-    "file-loader": "^1.1.5",
     "git-url-parse": "^7.0.1",
     "jest": "^23.6.0",
     "jsdom": "^11.3.0",
-    "node-sass": "^3.13.0",
-    "postcss-loader": "^2.0.8",
     "prettier-eslint-cli": "^4.4.0",
-    "raw-loader": "^0.5.1",
     "react": "^16.0.0",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",
     "rimraf": "^2.6.2",
-    "sass-loader": "^4.0.2",
-    "style-loader": "^0.19.0",
     "stylelint": "^7.6.0",
     "stylelint-config-standard": "^15.0.0",
-    "stylelint-processor-styled-components": "^0.0.4",
+    "stylelint-processor-styled-components": "^0.0.4"
-    "url-loader": "^0.6.2"
   },
   "peerDependencies": {
     "react": "^0.14.9 || ^15.3.0"

packages/devui/src/Button/stories/index.js

@@ -16,9 +16,8 @@ export const Container = styled.div`
 
 storiesOf('Button', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    '',
     () => (
       <Container>
         <Button
@@ -37,9 +36,8 @@ storiesOf('Button', module)
       </Container>
     )
   )
-  .addWithInfo(
+  .add(
     'mark',
-    '',
     () => (
       <Container>
         <Button

packages/devui/src/ContextMenu/stories/index.js

@@ -16,9 +16,8 @@ export const Container = styled.div`
 
 storiesOf('ContextMenu', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    '',
     () => (
       <Container>
         <ContextMenu

packages/devui/src/Dialog/stories/index.js

@@ -7,9 +7,8 @@ import { schema, uiSchema, formData } from '../../Form/stories/schema';
 
 storiesOf('Dialog', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    '',
     () => (
       <Dialog
         title={text('title', 'Dialog Title')}
@@ -25,9 +24,8 @@ storiesOf('Dialog', module)
       />
     )
   )
-  .addWithInfo(
+  .add(
     'with form',
-    '',
     () => (
       <Dialog
         open={boolean('open', true)}

packages/devui/src/Editor/stories/index.js

@@ -15,9 +15,8 @@ function getThemes() {
 
 storiesOf('Editor', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    'Based on [CodeMirror](http://codemirror.net/).',
     () => (
       <Editor
         value={text('value', value)}
@@ -28,11 +27,11 @@ storiesOf('Editor', module)
         onChange={action('change')}
         autofocus
       />
+    ),
+    { info: 'Based on [CodeMirror](http://codemirror.net/).' }
   )
-  )
+  .add(
-  .addWithInfo(
     'with tabs',
-    '',
     () => (
       <WithTabs
         lineNumbers={boolean('lineNumbers', true)}

packages/devui/src/Form/stories/index.js

@@ -7,9 +7,8 @@ import { schema, uiSchema, formData } from './schema';
 
 storiesOf('Form', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    'Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form) with custom widgets.',
     () => (
       <Form
         formData={object('formData', formData)}
@@ -19,5 +18,9 @@ storiesOf('Form', module)
         onChange={action('form changed')}
         onSubmit={action('form submitted')}
       />
-    )
+    ),
+    { info:
+        'Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form)'
+        + ' with custom widgets.'
+    }
   );

packages/devui/src/Notification/stories/index.js

@@ -15,9 +15,8 @@ export const Container = styled.div`
 
 storiesOf('Notification', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    '',
     () => (
       <Container>
         <Notification

packages/devui/src/SegmentedControl/stories/index.js

@@ -15,9 +15,8 @@ export const Container = styled.div`
 
 storiesOf('SegmentedControl', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    '',
     () => (
       <Container>
         <SegmentedControl

packages/devui/src/Select/stories/index.js

@@ -20,9 +20,8 @@ export const Container = styled.div`
 
 storiesOf('Select', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    'Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes and new props like `openOuterUp` and `menuMaxHeight`.',
     () => (
       <Container>
         <Select
@@ -39,5 +38,9 @@ storiesOf('Select', module)
           openOuterUp={boolean('openOuterUp', false)}
         />
       </Container>
-    )
+    ),
+    { info: 
+        'Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes '
+        + 'and new props like `openOuterUp` and `menuMaxHeight`.'
+    }
   );

packages/devui/src/Slider/stories/index.js

@@ -15,9 +15,8 @@ export const Container = styled.div`
 
 storiesOf('Slider', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    '',
     () => (
       <Container>
         <Slider

packages/devui/src/Tabs/stories/index.js

@@ -16,9 +16,8 @@ const Container = styled.div`
 
 storiesOf('Tabs', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    '',
     () => (
       <Container><Tabs
         tabs={simple10Tabs}
@@ -30,9 +29,8 @@ storiesOf('Tabs', module)
       /></Container>
     )
   )
-  .addWithInfo(
+  .add(
     'with content',
-    '',
     () => (
       <Tabs
         tabs={tabs}

packages/devui/src/Toolbar/stories/index.js

@@ -26,9 +26,8 @@ export const SliderContainer = styled.div`
 
 storiesOf('Toolbar', module)
   .addDecorator(withKnobs)
-  .addWithInfo(
+  .add(
     'default',
-    '',
     () => (
       <Container>
         <Toolbar borderPosition={select('borderPosition', ['top', 'bottom'])}>
@@ -62,9 +61,8 @@ storiesOf('Toolbar', module)
       </Container>
     )
   )
-  .addWithInfo(
+  .add(
     'tabs',
-    '',
     () => (
       <Container>
         <Toolbar>
@@ -102,9 +100,8 @@ storiesOf('Toolbar', module)
       </Container>
     )
   )
-  .addWithInfo(
+  .add(
     'with slider',
-    '',
     () => (
       <Container>
         <SliderContainer>