Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from
Oct 5, 2020

Conversation

smith
Copy link
Contributor

@smith smith commented Sep 30, 2020

Backports the following commits to 7.x:

smith and others added 2 commits September 29, 2020 20:35
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
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
@smith smith added the backport label Sep 30, 2020
Tyler Smalley added 2 commits October 1, 2020 15:23
@tylersmalley
Copy link
Contributor

Updated the branch 🤞

@tylersmalley
Copy link
Contributor

Merge conflicts - trying this again. This time will try to merge as soon as it goes green. 🤞

@smith
Copy link
Contributor Author

smith commented Oct 2, 2020

Getting this:

ERROR [single_version_dependencies] Multiple version ranges for the same dependency

[2020-10-02T03:54:37.979Z]       were found declared across different package.json files. Please consolidate

[2020-10-02T03:54:37.979Z]       those to match across all package.json files. Different versions for the

[2020-10-02T03:54:37.979Z]       same dependency is not supported.

[2020-10-02T03:54:37.979Z] 

[2020-10-02T03:54:37.979Z]       If you have questions about this please reach out to the operations team.

[2020-10-02T03:54:37.979Z] 

[2020-10-02T03:54:37.979Z]       The conflicting dependencies are:

[2020-10-02T03:54:37.979Z] 

[2020-10-02T03:54:37.979Z]         @types/webpack

[2020-10-02T03:54:37.979Z]           ^4.41.21 => kibana

[2020-10-02T03:54:37.979Z]           ^4.41.3 => @kbn/optimizer

[2020-10-02T03:54:37.979Z]           ^4.41.5 => @kbn/storybook

[2020-10-02T03:54:37.979Z]         @types/loader-utils

[2020-10-02T03:54:37.979Z]           ^1.1.3 => @kbn/optimizer

[2020-10-02T03:54:37.979Z]           ^2.0.1 => @kbn/storybook

[2020-10-02T03:54:37.979Z] error Command failed with exit code 1.

I can update optimizer and storybook to fix.

"@types/watchpack": "^1.1.5",
"@types/webpack": "^4.41.3"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like master has "@types/webpack": "^4.41.3" and "@types/loader-utils": "^1.1.3",. Mind aligning with those to keep the branches consistent?

@smith
Copy link
Contributor Author

smith commented Oct 2, 2020

@tylersmalley the e2e is failing because of a dependency that should be fixed with tomorrow's packer image build.

The type check is failing because of the updates to the types in the optimizer. Let me know if there's anything you want me to do. I plan on going in and either fixing the types or aligning to a previous version but either push commits or let me know if we should do anything differently.

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

id before after diff
core 438 441 +3
ingestManager 541 544 +3
kibanaReact 290 293 +3
kibanaUtils 190 193 +3
security 455 458 +3
securitySolution 1995 1998 +3
total +18

@kbn/ui-shared-deps asset size

id before after diff
kbn-ui-shared-deps.@elastic.js 2.8MB 2.8MB +5.0B
kbn-ui-shared-deps.js 4.6MB 4.6MB +2.4KB
total +2.4KB

async chunks size

id before after diff
core 255.5KB 258.3KB +2.8KB
enterpriseSearch 429.7KB 429.8KB +84.0B
ingestManager 1.1MB 1.1MB +2.8KB
kibanaReact 355.9KB 358.7KB +2.8KB
kibanaUtils 123.0KB 125.8KB +2.8KB
security 1.0MB 1.0MB +2.8KB
securitySolution 10.3MB 10.3MB +2.8KB
total +17.0KB

distributable file count

id before after diff
default 47367 47390 +23
oss 28857 28879 +22

page load bundle size

id before after diff
upgradeAssistant 64.4KB 64.4KB +84.0B

History

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

@smith smith merged commit 7a2e487 into elastic:7.x Oct 5, 2020
@smith smith deleted the backport/7.x/pr-75357 branch October 5, 2020 17:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants