upgrade storybook to v4

import object move story wrappers to config add min heights
gumgum · Oct 31, 2018 · 0003565 · 0003565
1 parent 860183e
commit 0003565
Show file tree

Hide file tree

Showing 35 changed files with 2,190 additions and 1,577 deletions.
diff --git a/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee b/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee
@@ -0,0 +1 @@
+{"value":{"success":true,"data":{"latest":{"version":"4.0.0","info":{"plain":"- upgrade webpack & babel to latest\n- new addParameters and third argument to .add to pass data to addons\n- added the ability to theme storybook\n- improved ui for mobile devices\n- improved performance of addon-knobs"}}},"time":1540842081579},"type":"Object"}
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,42 +1,38 @@
-import { configure, setAddon } from '@storybook/react';
-import infoAddon, { setDefaults } from '@storybook/addon-info';
-import { setOptions } from '@storybook/addon-options';
-// import ReadmeContainer from 'storybook-readme/components/readme-container';
-// import DefaultPreview from 'storybook-readme/with-docs';
+import React from 'react';
+import { configure, addDecorator } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
+import { withInfo } from '@storybook/addon-info';
 
 import './index.css';
 
-setOptions({
-    name: 'Gumdrops',
-    url: 'https://storybook.gumgum.com',
-    goFullScreen: false,
-    showStoriesPanel: true,
-    showAddonPanel: true,
-    showSearchBox: false,
-    addonPanelInRight: true,
-    sortStoriesByKind: true
-});
-
-setDefaults({
-    inline: true,
-    header: false,
-    source: true,
-    styles: stylesheet => {
-        stylesheet.infoBody = {
-            infoBody: {
-                padding: '10px'
-            }
-        };
-        return stylesheet;
-    },
-    maxPropsIntoLine: 1
-    // propTablesExclude: [ReadmeContainer, DefaultPreview]
-});
-
 function loadStories() {
     require('../_stories/');
 }
 
-setAddon(infoAddon);
+const storyWrapper = story => <div style={{ margin: 35 }}>{story()}</div>;
+
+addDecorator(
+    withInfo({
+        inline: true,
+        header: false,
+        source: true,
+        maxPropsIntoLine: 1
+    })
+);
+
+addDecorator(
+    withOptions({
+        name: 'Gumdrops',
+        url: 'https://storybook.gumgum.com',
+        goFullScreen: false,
+        showStoriesPanel: true,
+        showAddonPanel: true,
+        showSearchBox: false,
+        addonPanelInRight: true,
+        sortStoriesByKind: true
+    })
+);
+
+addDecorator(storyWrapper);
 
 configure(loadStories, module);
diff --git a/_stories/atoms/Button/index.js b/_stories/atoms/Button/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { text, selectV2 as select, boolean, object } from '@storybook/addon-knobs';
+import { text, select, boolean, object } from '@storybook/addon-knobs';
 import { optionalSelect } from '../../../components/utils/optionalSelect';
 import { action } from '@storybook/addon-actions';
 

diff --git a/_stories/atoms/NumberCircle/index.js b/_stories/atoms/NumberCircle/index.js
@@ -24,13 +24,15 @@ const sizeOptions = {
 };
 
 const component = () => (
-    <NumberCircle
-        text={text('Text', '1')}
-        size={optionalSelect('Size', sizeOptions, '')}
-        context={optionalSelect('Context', contextOptions, '')}
-        className={text('ClassName', '')}
-        style={object('Styles', {})}
-    />
+    <div style={{ minHeight: 100 }}>
+        <NumberCircle
+            text={text('Text', '1')}
+            size={optionalSelect('Size', sizeOptions, '')}
+            context={optionalSelect('Context', contextOptions, '')}
+            className={text('ClassName', '')}
+            style={object('Styles', {})}
+        />
+    </div>
 );
 
 export default [readme, component];
diff --git a/_stories/atoms/TextInput/index.js b/_stories/atoms/TextInput/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { boolean, selectV2 as select, text, object } from '@storybook/addon-knobs';
+import { boolean, select, text, object } from '@storybook/addon-knobs';
 import { optionalSelect } from '../../../components/utils/optionalSelect';
 import { action } from '@storybook/addon-actions';
 

diff --git a/_stories/atoms/Trend/index.js b/_stories/atoms/Trend/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select, text, object } from '@storybook/addon-knobs';
+import { select, text, object } from '@storybook/addon-knobs';
 
 import readme from './README.md';
 import Trend from '../../../components/atoms/Trend';

diff --git a/_stories/atoms/index.js b/_stories/atoms/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withReadme } from 'storybook-readme';
 import { withKnobs } from '@storybook/addon-knobs';
-import { withInfo } from '@storybook/addon-info';
 
 import Badge from './Badge/';
 import Button from './Button/';
@@ -20,13 +19,7 @@ import TextInput from './TextInput';
 import Select from './Select';
 
 const stories = storiesOf('Atoms', module);
-const storyWrapper = story => {
-    return <div style={{ margin: '35px' }}>{story()}</div>;
-};
-
 stories
-    .addDecorator((story, context) => withInfo('')(story)(context))
-    .addDecorator(storyWrapper)
     .addDecorator(withKnobs)
     .add('Badge', withReadme(...Badge))
     .add('Button', withReadme(...Button))

diff --git a/_stories/layout/index.js b/_stories/layout/index.js
@@ -2,20 +2,14 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withReadme } from 'storybook-readme';
 import { withKnobs } from '@storybook/addon-knobs';
-import { withInfo } from '@storybook/addon-info';
 
 import Column from './Column/';
 import LayoutContainer from './LayoutContainer/';
 import Row from './Row/';
 
 const stories = storiesOf('Layout', module);
-const storyWrapper = story => {
-    return <div style={{ margin: '35px' }}>{story()}</div>;
-};
 
 stories
-    .addDecorator((story, context) => withInfo('')(story)(context))
-    .addDecorator(storyWrapper)
     .addDecorator(withKnobs)
     .add('Column', withReadme(...Column))
     .add('LayoutContainer', withReadme(...LayoutContainer))

diff --git a/_stories/molecules/Avatar/index.js b/_stories/molecules/Avatar/index.js
@@ -14,16 +14,18 @@ const options = [
 ];
 
 const component = () => (
-    <Avatar
-        open={boolean('Open', false)}
-        menuCallback={action('avatar_menu_toggled')}
-        optionCallback={action('avatar_menu_option_clicked')}
-        username={text('Username', 'Michele')}
-        img={text('Image url', '')}
-        menuOptions={options}
-        className={text('ClassName', '-float-right')}
-        style={object('Style', {})}
-    />
+    <div style={{ minHeight: 100 }}>
+        <Avatar
+            open={boolean('Open', false)}
+            menuCallback={action('avatar_menu_toggled')}
+            optionCallback={action('avatar_menu_option_clicked')}
+            username={text('Username', 'Michele')}
+            img={text('Image url', '')}
+            menuOptions={options}
+            className={text('ClassName', '-float-right')}
+            style={object('Style', {})}
+        />
+    </div>
 );
 
 export default [readme, component];
diff --git a/_stories/molecules/Breadcrumbs/index.js b/_stories/molecules/Breadcrumbs/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { selectV2 as select, boolean } from '@storybook/addon-knobs';
+import { select, boolean } from '@storybook/addon-knobs';
 
 import readme from './README.md';
 import Breadcrumbs from '../../../components/molecules/Breadcrumbs';

diff --git a/_stories/molecules/MultiSelect/index.js b/_stories/molecules/MultiSelect/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { text } from '@storybook/addon-knobs';
 import { optionalSelect } from '../../../components/utils/optionalSelect';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 // import { action } from '@storybook/addon-actions';
 
 import readme from './README.md';

diff --git a/_stories/molecules/Pagination/index.js b/_stories/molecules/Pagination/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { number, boolean, selectV2 as select } from '@storybook/addon-knobs';
+import { number, boolean, select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 import readme from './README.md';

diff --git a/_stories/molecules/SearchMultiSelect/index.js b/_stories/molecules/SearchMultiSelect/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select, text, boolean, button } from '@storybook/addon-knobs';
+import { select, button, text, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 import readme from './README.md';

diff --git a/_stories/molecules/Toggle/index.js b/_stories/molecules/Toggle/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select, text, object } from '@storybook/addon-knobs';
+import { select, text, object } from '@storybook/addon-knobs';
 import { optionalSelect } from '../../../components/utils/optionalSelect';
 
 import readme from './README.md';

diff --git a/_stories/molecules/index.js b/_stories/molecules/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withReadme } from 'storybook-readme';
 import { withKnobs } from '@storybook/addon-knobs';
-import { withInfo } from '@storybook/addon-info';
 
 import Accordion from './Accordion';
 import Avatar from './Avatar/';
@@ -24,11 +23,8 @@ import Toggle from './Toggle/';
 import Well from './Well/';
 
 const stories = storiesOf('Molecules', module);
-const storyWrapper = story => <div style={{ margin: '35px' }}>{story()}</div>;
 
 stories
-    .addDecorator((story, context) => withInfo('')(story)(context))
-    .addDecorator(storyWrapper)
     .addDecorator(withKnobs)
     .add('Accordion', withReadme(...Accordion))
     .add('Avatar', withReadme(...Avatar))

diff --git a/_stories/utilities/BorderRadius/index.js b/_stories/utilities/BorderRadius/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/Color/index.js b/_stories/utilities/Color/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 
 import readme from './README.md';
 import { colors } from '../constants';

diff --git a/_stories/utilities/Cursor/index.js b/_stories/utilities/Cursor/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/Disable/index.js b/_stories/utilities/Disable/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import Button from '../../../components/atoms/Button';
 
 import readme from './README.md';

diff --git a/_stories/utilities/Display/index.js b/_stories/utilities/Display/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/Ellipsis/index.js b/_stories/utilities/Ellipsis/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/Float/index.js b/_stories/utilities/Float/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select, object } from '@storybook/addon-knobs';
+import { select, object } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/Margin/index.js b/_stories/utilities/Margin/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/Overflow/index.js b/_stories/utilities/Overflow/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select, object } from '@storybook/addon-knobs';
+import { select, object } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/Padding/index.js b/_stories/utilities/Padding/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/PointerEvents/index.js b/_stories/utilities/PointerEvents/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 

diff --git a/_stories/utilities/TextAlign/index.js b/_stories/utilities/TextAlign/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/TextTransform/index.js b/_stories/utilities/TextTransform/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/UserSelect/index.js b/_stories/utilities/UserSelect/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 
 import readme from './README.md';
 

diff --git a/_stories/utilities/VerticalAlign/index.js b/_stories/utilities/VerticalAlign/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import arrToObjOptions from '../../../components/utils/arrToObjOptions';
 
 import readme from './README.md';

diff --git a/_stories/utilities/ZIndex/index.js b/_stories/utilities/ZIndex/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 
 import readme from './README.md';
 import { colors } from '../constants';

diff --git a/_stories/utilities/index.js b/_stories/utilities/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withReadme } from 'storybook-readme';
 import { withKnobs } from '@storybook/addon-knobs';
-import { withInfo } from '@storybook/addon-info';
 
 import AbsolutePosition from './AbsolutePosition';
 import BorderRadius from './BorderRadius';
@@ -28,7 +27,6 @@ const storyWrapper = story => {
 };
 
 stories
-    .addDecorator((story, context) => withInfo('')(story)(context))
     .addDecorator(storyWrapper)
     .addDecorator(withKnobs)
     .add('AbsolutePosition', withReadme(...AbsolutePosition))

diff --git a/components/utils/optionalSelect.js b/components/utils/optionalSelect.js
@@ -1,4 +1,4 @@
-import { selectV2 as select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 
 /**