chore(storybook): update v1 syntax to use Storybook v6

.storybook/main.js

@@ -0,0 +1,21 @@
+const path = require('path');
+
+module.exports = {
+    stories: ['../stories/*.stories.tsx'],
+    addons: ['@storybook/addon-essentials'],
+    typescript: {
+        check: false, // typecheck separately
+        reactDocgen: false, // substantially improves performance: https://github.com/storybookjs/storybook/issues/22164#issuecomment-1603627308
+    },
+    webpackFinal: async (config, {configType}) => {
+        config.devtool = false; // perf per: https://github.com/storybookjs/storybook/issues/19736#issuecomment-1478103817
+        config.module.rules.push({
+            test: /\.scss$/,
+            exclude: /node_modules/,
+            include: path.resolve(__dirname, '../'),
+            sideEffects: true, // get side-effect styles to load per: https://github.com/storybookjs/storybook/issues/4690#issuecomment-435909433
+            loader: 'style-loader!raw-loader!sass-loader'
+        });
+        return config;
+    },
+};

.storybook/preview.js

@@ -0,0 +1 @@
+// import '../src/styles/main.scss'; -- this seems to not work and also makes the Storybook freeze for multiple minutes 😕

package.json

@@ -87,7 +87,6 @@
         "storybook": "6.5.0-beta.1",
         "style-loader": "^2.0.0",
         "ts-jest": "^26.5.6",
-        "ts-loader": "^8.3.0",
         "ts-node": "^10.9.1",
         "webfonts-generator": "^0.4.0",
         "webpack": "^4.46.0"

stories/data-loader.tsx → stories/data-loader.stories.tsx

@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
 import { App } from './utils';
@@ -9,10 +8,14 @@ function loadData(input: string): Promise<string> {
     return new Promise((resolve) => window.setTimeout(() => resolve(`hello ${input}`), 50));
 }
 
-storiesOf('Data Loader', module)
-    .add('loading data asynchronously', () => {
-        const [input, setInput] = React.useState('world');
-        return <App>
+export default {
+  title: 'Data Loader',
+};
+
+export const LoadingDataAsynchronously = () => {
+    const [input, setInput] = React.useState('world');
+    return (
+        <App>
             {() => (
                 <React.Fragment>
                     <input value={input} onChange={(e) => setInput(e.target.value)}/>
@@ -26,4 +29,6 @@ storiesOf('Data Loader', module)
                 </React.Fragment>
             )}
         </App>
-    });
+    );
+};
+LoadingDataAsynchronously.storyName = 'loading data asynchronously';

stories/dropdown.tsx → stories/dropdown.stories.tsx

@@ -1,21 +1,33 @@
-import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
 import { DropDown } from '../src/components/dropdown/dropdown';
 import { DropDownMenu } from '../src/components/dropdown-menu';
 
-storiesOf('Dropdown', module)
-    .add('default', () => <DropDown anchor={() => <a>Click me</a>}><p>Dropdown content here</p></DropDown>)
-    .add('menu', () => (
+export default {
+    title: 'Dropdown',
+};
+
+export const Default = () => (<DropDown anchor={() => <a>Click me</a>}><p>Dropdown content here</p></DropDown>);
+Default.storyName = 'default';
+
+export const Menu = () => {
+    return (
         <DropDown isMenu={true} anchor={() => <a>Click me</a>}>
             <ul>
                 <li><a>menu item 1</a></li>
                 <li><a>menu item 2</a></li>
             </ul>
         </DropDown>
-    )).add('menu wrapper', () => (
+    );
+}
+Menu.storyName = 'menu';
+
+export const MenuWrapper = () => {
+    return (
         <DropDownMenu anchor={() => <a>Click me</a>} items={[{
             title: 'menu item 1',
             action: () => window.alert('Clicked!'),
         }]} />
-    ));
+    );
+}
+MenuWrapper.storyName = 'menu wrapper';

stories/forms.tsx → stories/forms.stories.tsx

@@ -1,11 +1,14 @@
-import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { Form, Text } from 'react-form';
 
 import { FormField, FormSelect } from '../src/components/form-field/form-field';
 
-storiesOf('Forms', module)
-    .add('default', () => (
+export default {
+    title: 'Forms',
+};
+
+export const Default = () => {
+    return (
         <Form>
             {(api) => (
                 <form style={{padding: '1em'}}>
@@ -16,9 +19,11 @@ storiesOf('Forms', module)
                         <FormField label='Password' formApi={api} field='passwordField' component={Text} componentProps={{type: 'password'}} />
                     </div>
                     <div className='argo-form-row'>
-                        <FormField label='Select' formApi={api}  field='selectField' component={FormSelect} componentProps={{options: ['option1', 'option2']}} />
+                        <FormField label='Select' formApi={api} field='selectField' component={FormSelect} componentProps={{options: ['option1', 'option2']}} />
                     </div>
                 </form>
             )}
         </Form>
-    ));
+    );
+}
+Default.storyName = 'default';

stories/logs-viewer.tsx → stories/logs-viewer.stories.tsx

@@ -1,10 +1,13 @@
-import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { Observable } from 'rxjs';
 
 import { LogsViewer } from '../src/components/logs-viewer/logs-viewer';
 
-storiesOf('LogsViewer', module).add('default', () => (
+export default {
+    title: 'LogsViewer',
+};
+
+export const Default = () => (
   <div>
     <LogsViewer source={{
         key: 'test',
@@ -15,4 +18,5 @@ storiesOf('LogsViewer', module).add('default', () => (
         shouldRepeat: () => false,
     }}/>
   </div>
-));
+);
+Default.storyName = 'default';

stories/notifications.tsx → stories/notifications.stories.tsx

@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
 import { NotificationType } from '../src/components/notifications/notifications';
@@ -15,20 +14,25 @@ function getMessage() {
     return messages[Math.floor(Math.random() * messages.length)];
 }
 
-storiesOf('Notifications', module)
-    .add('default', () => (
+export default {
+    title: 'Notifications',
+};
+
+export const Default = () => {
+    return (
         <App>
-            {(apis) => (
-                [
-                 {type: NotificationType.Success, title: 'Success'},
-                 {type: NotificationType.Warning, title: 'Warning'},
-                 {type: NotificationType.Error, title: 'Error'},
-                ].map((item) => (
-                    <button key={item.type} className='argo-button argo-button--base'
-                            onClick={() => apis.notifications.show({type: item.type, content: <div>{getMessage()}</div>})}>
-                        {item.title}
-                    </button>
-                ))
-            )}
+            {(apis) => [
+                {type: NotificationType.Success, title: 'Success'},
+                {type: NotificationType.Warning, title: 'Warning'},
+                {type: NotificationType.Error, title: 'Error'},
+            ].map((item) => (
+                <button key={item.type} className='argo-button argo-button--base' onClick={() =>
+                    apis.notifications.show({type: item.type, content: <div>{getMessage()}</div>})
+                }>
+                    {item.title}
+                </button>
+            ))}
         </App>
-    ));
+    );
+}
+Default.storyName = 'default';