Skip to content

Commit

Permalink
chore(storybook): update v1 syntax to use Storybook v6 (#568)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
Anton Gilgur authored Aug 23, 2024
1 parent a7b01f9 commit d1f1d44
Show file tree
Hide file tree
Showing 18 changed files with 311 additions and 244 deletions.
9 changes: 0 additions & 9 deletions .storybook/config.js

This file was deleted.

21 changes: 21 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -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;
},
};
1 change: 1 addition & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// import '../src/styles/main.scss'; -- this seems to not work and also makes the Storybook freeze for multiple minutes 😕
26 changes: 0 additions & 26 deletions .storybook/webpack.config.js

This file was deleted.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
17 changes: 11 additions & 6 deletions stories/data-loader.tsx → stories/data-loader.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';

import { App } from './utils';
Expand All @@ -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)}/>
Expand All @@ -26,4 +29,6 @@ storiesOf('Data Loader', module)
</React.Fragment>
)}
</App>
});
);
};
LoadingDataAsynchronously.storyName = 'loading data asynchronously';
24 changes: 18 additions & 6 deletions stories/dropdown.tsx → stories/dropdown.stories.tsx
Original file line number Diff line number Diff line change
@@ -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';
15 changes: 10 additions & 5 deletions stories/forms.tsx → stories/forms.stories.tsx
Original file line number Diff line number Diff line change
@@ -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'}}>
Expand All @@ -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';
10 changes: 0 additions & 10 deletions stories/index.stories.tsx

This file was deleted.

10 changes: 7 additions & 3 deletions stories/logs-viewer.tsx → stories/logs-viewer.stories.tsx
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -15,4 +18,5 @@ storiesOf('LogsViewer', module).add('default', () => (
shouldRepeat: () => false,
}}/>
</div>
));
);
Default.storyName = 'default';
36 changes: 20 additions & 16 deletions stories/notifications.tsx → stories/notifications.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';

import { NotificationType } from '../src/components/notifications/notifications';
Expand All @@ -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';
Loading

0 comments on commit d1f1d44

Please sign in to comment.