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

* chore(storybook): update v1 syntax to use Storybook v6 - while the deps used Storybook v6, the configuration and stories themselves were still on a legacy v5 format - v6 had backward compat for v5, but v7 does not, so this needs upgrading/migrating - or well, v7 has some legacy mode for it that can be enabled with some config, but it is entirely gone in v8 - migrate `storiesOf` to CSF per https://storybook.js.org/docs/7/migration-guide#storiesof-to-csf - then had to do a bunch of manual changes to get back mostly the same previous indentation (with some minor differences where there were mistakes or inconsistencies) - tried to keep the diff as small as possible - CSF is still valid through to latest v8 Signed-off-by: Anton Gilgur <[email protected]> * chore(storybook): convert v1 config to use Storybook v6 - modified version of v2's config Signed-off-by: Anton Gilgur <[email protected]> * fixup config a bit -- take more from prev webpack config - `ts-loader` is necessary to handle the `import type` syntax - custom `tsconfig.json` doesn't seem necessary though - use same SASS config - plain CSS config not needed though bc PostCSS already runs by default Signed-off-by: Anton Gilgur <[email protected]> * rename to `.stories.tsx` and remove `index` - the conventional format - also had some problems finding stories without this change Signed-off-by: Anton Gilgur <[email protected]> * fix deprecation warning re: `storyName` - per https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations - migrate `.story.name` -> `.storyName` - not sure why the automigration didn't do this and instead used the deprecated name 😕 Signed-off-by: Anton Gilgur <[email protected]> * also fix history deprecation warning Signed-off-by: Anton Gilgur <[email protected]> * attempt to load CSS properly but still fail Signed-off-by: Anton Gilgur <[email protected]> * improve perf with built in loader for TS - remove `ts-loader` as not necessary - plus some settings for Storybook's TS loader preset Signed-off-by: Anton Gilgur <[email protected]> * diff reduction Signed-off-by: Anton Gilgur <[email protected]> * more diff reduction Signed-off-by: Anton Gilgur <[email protected]> * more diff reduction Signed-off-by: Anton Gilgur <[email protected]> * attempt to reduce diff a bit more hackily Signed-off-by: Anton Gilgur <[email protected]> * one more diff reduction with one hackishness Signed-off-by: Anton Gilgur <[email protected]> * diff reduction with older wacky syntax Signed-off-by: Anton Gilgur <[email protected]> * slightly better syntax than previous while retaining indentation Signed-off-by: Anton Gilgur <[email protected]> * last diff reduction/indentation change Signed-off-by: Anton Gilgur <[email protected]> * missing trailing comma Signed-off-by: Anton Gilgur <[email protected]> --------- Signed-off-by: Anton Gilgur <[email protected]>
argoproj · Aug 23, 2024 · d1f1d44 · d1f1d44
1 parent a7b01f9
commit d1f1d44
Show file tree

Hide file tree

Showing 18 changed files with 311 additions and 244 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
diff --git a/.storybook/main.js b/.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;
+    },
+};
diff --git a/.storybook/preview.js b/.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 😕
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
diff --git a/package.json b/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"

diff --git a/stories/data-loader.tsx → stories/data-loader.stories.tsx b/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';
diff --git a/stories/dropdown.tsx → stories/dropdown.stories.tsx b/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';
diff --git a/stories/forms.tsx → stories/forms.stories.tsx b/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';
diff --git a/stories/index.stories.tsx b/stories/index.stories.tsx
diff --git a/stories/logs-viewer.tsx → stories/logs-viewer.stories.tsx b/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';
diff --git a/stories/notifications.tsx → stories/notifications.stories.tsx b/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';