-
Notifications
You must be signed in to change notification settings - Fork 182
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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]>
- Loading branch information
Anton Gilgur
authored
Aug 23, 2024
1 parent
a7b01f9
commit d1f1d44
Showing
18 changed files
with
311 additions
and
244 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 😕 |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.