Storybook 6 and config changes #75357

smith · 2020-08-18T18:38:23Z

Upgrade to Storybook 6 and attempt to use the declarative configuration.

The goals of this PR (as part of Kibana's Storybook roadmap, are:

Upgrade to Storybook 6
Still allow running Storybooks with yarn storybook plugin_name
Use the declarative configuration to (hopefully) make the configuration simpler to use an easier to understand, as well as avoiding deprecation warnings and loss of future compatibility

The ways in which what I have so far differs from how we do things today are:

In the alias configuration it takes a path to a storybook configuration directory instead of the storybook.js file from before
Each plugin (it doesn't have to be a plugin; can be any directory) has a .storybook/main.js (the aliases file in @kbn/storybook specifies these locations) where they can define their Storybook configuration. You can require('@kbn/storybook').defaultConfig to get defaults and override them
@kbn/storybook has a preset that can provide Webpack and Babel configuration and Storybook parameters and decorators
Instead of dynamically creating the list of stories to import, we define them in the globs of the stories property in .storybook/main.js.
Do not build a DLL. We are using @kbn/ui-shared-deps as externals. Startup time is not quite as fast but still acceptable.

Other things done in this PR:

Allow default exports in .stories. to allow for Common Story Format CSF stories
Add guard in Webpack configuration needed for overriding CSS rules
Update filename casing check to allow for files with required names in Storybook
Clean up observability stories
Rename *.examples.tsx and *.story.tsx to *.stories.tsx

TODO:

Change alias configuration for all stories and make them work
You need to run scripts/storybook --dll in canvas first to make that story work, and withInfo has been removed.
Use @kbn/ui-shared-deps
Set up Storybook essentials to replace knobs and info addons
Remove deprecation warning change from exit_on_warning
Remove old unused addons
Ensure stories aren't double-adding decorators, by converting to CSF or other means
Verify everything works

smith · 2020-09-15T20:56:26Z

retest

smith · 2020-09-15T22:51:29Z

retest

clintandrewhall

I tested this locally and we're in good shape. Thanks for the Canvas changes, @smith. Let me know if you need help clearing up the CI issues.

x-pack/plugins/canvas/storybook/main.ts

`src` is incorrect, and will throw an error on startup. The `scripts/storybook` script in `canvas` builds the addon.

tylersmalley · 2020-09-29T05:17:41Z

Just a heads up, looks like this is going to block the Jest 26 upgrade. #78720

Let me know if there is anything you need to help get this over the finish line.

smith · 2020-09-29T14:46:29Z

@tylersmalley

Just a heads up, looks like this is going to block the Jest 26 upgrade. #78720

How's it blocking? I'd be happy to go back and fix this once the upgrade is merged.

Let me know if there is anything you need to help get this over the finish line.

I haven't been able to get to it in the last few days, but the only failure was in the Canvas storyshots because it's relying on the DLL being built, so I'm going to figure out how best to fix that.

tylersmalley · 2020-09-29T14:51:39Z

@smith,

Sorry, there might be some confusion. The upgrade to Storybook 6 is blocking upgrading to Jest 26. There was a breaking change in Jest 26 which Storyshots didn't resolve until 6.0. Details: storybookjs/storybook#10631

smith · 2020-09-29T14:56:10Z

@tylersmalley oh ok that makes sense. @clintandrewhall do you think it would be ok to momentarily disable the storyshot test in canvas to get this and the jest upgrade merged?

kibanamachine · 2020-09-29T21:26:44Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 7b7f083

Metrics [docs]

@kbn/optimizer bundle module count

id	value	diff	baseline
`core`	432	+2	430
`ingestManager`	542	+2	540
`kibanaReact`	291	+2	289
`kibanaUtils`	191	+2	189
`ml`	1185	+1	1184
`security`	456	+2	454
`securitySolution`	1972	+2	1970
total		+13

async chunks size

id	value	diff	baseline
`core`	155.4KB	+2.5KB	152.8KB
`enterpriseSearch`	477.3KB	+170.0B	477.1KB
`ingestManager`	1.1MB	+2.5KB	1.1MB
`kibanaReact`	391.5KB	+2.5KB	389.0KB
`kibanaUtils`	158.6KB	+2.5KB	156.0KB
`ml`	10.5MB	+2.5KB	10.5MB
`security`	1.0MB	+2.5KB	1.0MB
`securitySolution`	10.2MB	+2.5KB	10.2MB
total		+17.8KB

distributable file count

id	value	diff	baseline
`default`	45771	-51	45822
`oss`	26526	-46	26572

page load bundle size

id	value	diff	baseline
`upgradeAssistant`	64.8KB	+85.0B	64.7KB

History

💔 Build #78015 failed 2ad31ae
💔 Build #78005 failed 0432d67
💔 Build #77959 failed 2313019
💔 Build #76559 failed aa43376
💔 Build #76337 failed a853763

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Upgrade to Storybook 6 and attempt to use the declarative configuration. The goals of this PR (as part of Kibana's Storybook roadmap, are: Upgrade to Storybook 6 Still allow running Storybooks with yarn storybook plugin_name Use the declarative configuration to (hopefully) make the configuration simpler to use an easier to understand, as well as avoiding deprecation warnings and loss of future compatibility The ways in which what I have so far differs from how we do things today are: In the alias configuration it takes a path to a storybook configuration directory instead of the storybook.js file from before Each plugin (it doesn't have to be a plugin; can be any directory) has a .storybook/main.js (the aliases file in @kbn/storybook specifies these locations) where they can define their Storybook configuration. You can require('@kbn/storybook').defaultConfig to get defaults and override them @kbn/storybook has a preset that can provide Webpack and Babel configuration and Storybook parameters and decorators Instead of dynamically creating the list of stories to import, we define them in the globs of the stories property in .storybook/main.js. Do not build a DLL. We are using @kbn/ui-shared-deps as externals. Startup time is not quite as fast but still acceptable. Other things done in this PR: Allow default exports in .stories. to allow for Common Story Format CSF stories Add guard in Webpack configuration needed for overriding CSS rules Update filename casing check to allow for files with required names in Storybook Clean up observability stories Rename *.examples.tsx and *.story.tsx to *.stories.tsx

kibanamachine · 2020-10-02T00:34:40Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

kibanamachine · 2020-10-05T00:44:38Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

Upgrade to Storybook 6 and attempt to use the declarative configuration. The goals of this PR (as part of Kibana's Storybook roadmap, are: Upgrade to Storybook 6 Still allow running Storybooks with yarn storybook plugin_name Use the declarative configuration to (hopefully) make the configuration simpler to use an easier to understand, as well as avoiding deprecation warnings and loss of future compatibility The ways in which what I have so far differs from how we do things today are: In the alias configuration it takes a path to a storybook configuration directory instead of the storybook.js file from before Each plugin (it doesn't have to be a plugin; can be any directory) has a .storybook/main.js (the aliases file in @kbn/storybook specifies these locations) where they can define their Storybook configuration. You can require('@kbn/storybook').defaultConfig to get defaults and override them @kbn/storybook has a preset that can provide Webpack and Babel configuration and Storybook parameters and decorators Instead of dynamically creating the list of stories to import, we define them in the globs of the stories property in .storybook/main.js. Do not build a DLL. We are using @kbn/ui-shared-deps as externals. Startup time is not quite as fast but still acceptable. Other things done in this PR: Allow default exports in .stories. to allow for Common Story Format CSF stories Add guard in Webpack configuration needed for overriding CSS rules Update filename casing check to allow for files with required names in Storybook Clean up observability stories Rename *.examples.tsx and *.story.tsx to *.stories.tsx * Storybook 6 and config changes (#75357) Upgrade to Storybook 6 and attempt to use the declarative configuration. The goals of this PR (as part of Kibana's Storybook roadmap, are: Upgrade to Storybook 6 Still allow running Storybooks with yarn storybook plugin_name Use the declarative configuration to (hopefully) make the configuration simpler to use an easier to understand, as well as avoiding deprecation warnings and loss of future compatibility The ways in which what I have so far differs from how we do things today are: In the alias configuration it takes a path to a storybook configuration directory instead of the storybook.js file from before Each plugin (it doesn't have to be a plugin; can be any directory) has a .storybook/main.js (the aliases file in @kbn/storybook specifies these locations) where they can define their Storybook configuration. You can require('@kbn/storybook').defaultConfig to get defaults and override them @kbn/storybook has a preset that can provide Webpack and Babel configuration and Storybook parameters and decorators Instead of dynamically creating the list of stories to import, we define them in the globs of the stories property in .storybook/main.js. Do not build a DLL. We are using @kbn/ui-shared-deps as externals. Startup time is not quite as fast but still acceptable. Other things done in this PR: Allow default exports in .stories. to allow for Common Story Format CSF stories Add guard in Webpack configuration needed for overriding CSS rules Update filename casing check to allow for files with required names in Storybook Clean up observability stories Rename *.examples.tsx and *.story.tsx to *.stories.tsx Co-authored-by: Tyler Smalley <tyler.smalley@elastic.co>

smith added 3 commits August 18, 2020 09:48

Update to version 6

bac40a9

WIP

6adc4d7

Add codeeditor, start doing some stuff with tmp directory

e3d516d

smith added release_note:skip Skip the PR/issue when compiling release notes v7.10.0 v8.0.0 labels Aug 19, 2020

smith added 24 commits August 19, 2020 00:30

Merge remote-tracking branch 'upstream/master' into nls/sb6

1c71a79

Add infra

2d5fe66

Remove other old configs

1b288e3

Start security_solution

8801f8b

Merge remote-tracking branch 'upstream/master' into nls/sb6

b329484

Add essentials plugin; remove info and options

5b5c114

Remove console addon

277870c

update yarn again

c00c383

Add dashboard enhanced

1f71458

Add dashboard enhanced config

1640f0c

Add ui_actions_enhanced

39f919e

Add embeddable

6663149

APM

f0e2d72

Merge remote-tracking branch 'upstream/master' into nls/sb6

4c9c93b

Make canvas work

40a00cb

Merge remote-tracking branch 'upstream/master' into nls/sb6

daf35ee

Rename everything to .stories.tsx

1657e13

revert change from exit_on_warning

76c4086

Some cleanup

94c795e

Get rid of preview-head

ba19e63

Upgrade to latest and fix some warnings

680df14

cleanup and logger fixes

ad8f0ce

Merge remote-tracking branch 'upstream/master' into nls/sb6

cb9642a

Package json cleanup

e89d998

pm update

e8ca720

smith added 2 commits September 16, 2020 13:17

Merge remote-tracking branch 'upstream/master' into nls/sb6

0ace6e4

Merge remote-tracking branch 'upstream/master' into nls/sb6

a853763

clintandrewhall approved these changes Sep 23, 2020

View reviewed changes

clintandrewhall reviewed Sep 23, 2020

View reviewed changes

x-pack/plugins/canvas/storybook/main.ts Outdated Show resolved Hide resolved

Update x-pack/plugins/canvas/storybook/main.ts

aa43376

`src` is incorrect, and will throw an error on startup. The `scripts/storybook` script in `canvas` builds the addon.

tylersmalley mentioned this pull request Sep 29, 2020

Bumps Jest related packages #78720

Merged

smith added 5 commits September 29, 2020 11:24

Merge remote-tracking branch 'upstream/master' into nls/sb6

ac24836

Update pm

2313019

Disable Canvas storyshots

0432d67

Comment out import

2ad31ae

Add todo test for storyshots

7b7f083

smith merged commit 564a7b1 into elastic:master Sep 30, 2020

smith deleted the nls/sb6 branch September 30, 2020 00:34

smith mentioned this pull request Sep 30, 2020

[7.x] Storybook 6 and config changes (#75357) #78894

Merged

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Oct 2, 2020

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Oct 5, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook 6 and config changes #75357

Storybook 6 and config changes #75357

smith commented Aug 18, 2020 •

edited

Loading

smith commented Sep 15, 2020

smith commented Sep 15, 2020

clintandrewhall left a comment

tylersmalley commented Sep 29, 2020

smith commented Sep 29, 2020

tylersmalley commented Sep 29, 2020

smith commented Sep 29, 2020

kibanamachine commented Sep 29, 2020

kibanamachine commented Oct 2, 2020

kibanamachine commented Oct 5, 2020

Storybook 6 and config changes #75357

Storybook 6 and config changes #75357

Conversation

smith commented Aug 18, 2020 • edited Loading

smith commented Sep 15, 2020

smith commented Sep 15, 2020

clintandrewhall left a comment

Choose a reason for hiding this comment

tylersmalley commented Sep 29, 2020

smith commented Sep 29, 2020

tylersmalley commented Sep 29, 2020

smith commented Sep 29, 2020

kibanamachine commented Sep 29, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

distributable file count

page load bundle size

History

kibanamachine commented Oct 2, 2020

kibanamachine commented Oct 5, 2020

smith commented Aug 18, 2020 •

edited

Loading