Update storybook and fix changes

2024-11-22 09:36:43 +03:00 · 2019-01-09 01:08:34 +02:00 · 2019-01-09 01:08:34 +02:00 · e2f9bf52b5
commit e2f9bf52b5
parent b2adfb1238
19 changed files with 59 additions and 103 deletions
--- a/packages/devui/.storybook/config.js
+++ b/packages/devui/.storybook/config.js
@ -1,23 +1,23 @@
 import { configure, setAddon, addDecorator } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
-import infoAddon from '@storybook/addon-info';
+import { withOptions } from '@storybook/addon-options';
+import { withInfo } from '@storybook/addon-info';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withTheme } from './themeAddon/theme';
 import '../src/presets.js';

-setAddon(infoAddon);
-setOptions({
+addDecorator(withOptions({
  name: 'DevUI',
  url: 'https://github.com/reduxjs/redux-devtools/tree/master/packages/devui',
  goFullScreen: false,
-  showLeftPanel: true,
-  showDownPanel: true,
+  showStoriesPanel: true,
+  showAddonPanel: true,
  showSearchBox: false,
-  downPanelInRight: true
-});
+  addonPanelInRight: true
+}));

 addDecorator(withTheme);
 addDecorator(withKnobs);
+addDecorator(withInfo);

 const req = require.context('../src/', true, /stories\/index\.js$/);

--- a/packages/devui/.storybook/preview-head.html
+++ b/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>
--- a/packages/devui/.storybook/themeAddon/Panel.js
+++ b/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>
    );
--- a/packages/devui/.storybook/themeAddon/register.js
+++ b/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
+    )
  });
 });
--- a/packages/devui/.storybook/themeAddon/theme.js
+++ b/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>;
  }
 }

--- a/packages/devui/.storybook/user/modify_webpack_config.js
+++ b/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.
-};
--- a/packages/devui/.storybook/webpack.config.js
+++ b/packages/devui/.storybook/webpack.config.js
@ -1,26 +1,8 @@
 const path = require('path');
-const updateConfig = require('./user/modify_webpack_config');

-const config = {
-  module: {
-    rules: [
-      {
-        test: /\.css?$/,
-        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'
-      }
-    ]
-  }
+module.exports = (baseConfig, env, defaultConfig) => {
+  // Add custom webpack config here like:
+  // defaultConfig.module.rules.push
+
+  return defaultConfig;
 };
-
-updateConfig(config);
-module.exports = config;
--- a/packages/devui/package.json
+++ b/packages/devui/package.json
@ -30,11 +30,11 @@
  },
  "homepage": "https://github.com/reduxjs/redux-devtools",
  "devDependencies": {
-    "@storybook/addon-actions": "^3.2.13",
-    "@storybook/addon-info": "^3.2.13",
-    "@storybook/addon-knobs": "^3.2.13",
-    "@storybook/addon-options": "^3.2.13",
-    "@storybook/react": "^3.2.13",
+    "@storybook/addon-actions": "^4.1.4",
+    "@storybook/addon-info": "^4.1.4",
+    "@storybook/addon-knobs": "^4.1.4",
+    "@storybook/addon-options": "^4.1.4",
+    "@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",
-    "url-loader": "^0.6.2"
+    "stylelint-processor-styled-components": "^0.0.4"
  },
  "peerDependencies": {
    "react": "^0.14.9 || ^15.3.0"
--- a/packages/devui/src/Button/stories/index.js
+++ b/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
--- a/packages/devui/src/ContextMenu/stories/index.js
+++ b/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
--- a/packages/devui/src/Dialog/stories/index.js
+++ b/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)}
--- a/packages/devui/src/Editor/stories/index.js
+++ b/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/).' }
  )
-  )
-  .addWithInfo(
+  .add(
    'with tabs',
-    '',
    () => (
      <WithTabs
        lineNumbers={boolean('lineNumbers', true)}
--- a/packages/devui/src/Form/stories/index.js
+++ b/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.'
+    }
  );
--- a/packages/devui/src/Notification/stories/index.js
+++ b/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
--- a/packages/devui/src/SegmentedControl/stories/index.js
+++ b/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
--- a/packages/devui/src/Select/stories/index.js
+++ b/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`.'
+    }
  );
--- a/packages/devui/src/Slider/stories/index.js
+++ b/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
--- a/packages/devui/src/Tabs/stories/index.js
+++ b/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}
--- a/packages/devui/src/Toolbar/stories/index.js
+++ b/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>