Upgrade Storybook to v6 #214

jeremylenz · 2020-09-02T19:03:38Z

Testing instructions are on the associated Foreman PR: theforeman/foreman#7990

Along with the upgrade to v6, this PR incorporates several Storybook improvements and addresses issues I had along the way:

Switched to the new main.js API. This simplifies our configuration quite a bit.
With the new main.js configuration, it appeared that some Webpack loaders were being run twice on the same files, particularly the @mdx-js/loader. This manifested in an error message Unexpected default export without title for every story. The loaders were being run once from main.js and another time from our manual Webpack configuration in webpack.config.rules.js.
After addressing the above, Storybook still wouldn't render any stories, instead spewing out copious console errors. I noticed that in index.js we were doing export * from several @storybook/addon packages. Once I removed them, the Storybook finally rendered.
Since the Storybook addon exports are no longer passed through @theforeman/stories, the stories files in Foreman must import them directly from @storybook/addon-knobs etc. I added deprecation errors to inform the users. Also, I suppressed the import/no-extraneous-dependencies eslint rule for packages that are dependencies of @theforeman/stories.
The story sorting implementation we were using in v5.3 involved passing in a storyWeight parameter, which stopped working in v6. Thanks to the Storybook folks for the help on Component-level parameters not available in storySort storybookjs/storybook#11010, I was able to update our storySort function and no changes will be required in our story files.

jeremylenz · 2020-09-28T20:04:26Z

packages/stories/src/index.js

-export * from '@storybook/addon-actions';
-export * from '@storybook/addon-storysource';


Storybook didn't render when both of these were exported. Probably not safe to export * from multiple npm packages when some of the exports could have the same names.

update: Added deprecations to inform users of the new export locations. also updated all existing stories in theforeman/foreman#7990

jeremylenz · 2020-09-29T19:02:50Z

@sharvit @johnpmitsch rebased and ready for review :)

Will squash once acked

jeremylenz · 2020-09-29T19:57:56Z

packages/stories/src/config/services/sorting.js

+  const storyWeightA = kindParamsA.storyWeight || globalParamsA.storyWeight;
+  const storyWeightB = kindParamsB.storyWeight || globalParamsB.storyWeight;
+  const combined = storyWeightA - storyWeightB;
+  if (combined) {


will evaluate to false if 0

jeremylenz · 2020-09-29T19:59:05Z

packages/stories/src/config/webpack/webpack.config.vendor.js

-  // htmlWebpackPlugin is the first plugin in the array
-  const htmlWebpackPlugin = config.plugins[0];
+  const htmlWebpackPlugin = config.plugins.find(
+    p => p.constructor.name === 'HtmlWebpackPlugin'


After the upgrade it appears the order of config.plugins changed, so I changed this to look for the correct name instead

johnpmitsch · 2020-10-01T15:17:38Z

The functionality appears to be working great!

The code seems fine but I need to take a closer look at the webpack aspect of it as I'm not as familiar with the existing code there. Maybe @sharvit can review that part better.

jeremylenz · 2020-11-06T22:03:40Z

@sharvit can this be merged soon?

johnpmitsch · 2020-11-13T11:57:17Z

@jeremylenz commits look a little funky here, did something happen when rebasing?

jeremylenz · 2020-11-13T17:53:16Z

@johnpmitsch Re-rebased, hopefully it's better now

johnpmitsch · 2020-11-13T19:33:56Z

@jeremylenz still working well 👍

sharvit

Thanks @jeremylenz 👍

I deployed those changes to npm as 6.1.0-next-storybook-6-upgrade.0 and it works well together with theforeman/foreman#7990, see:

https://github.com/theforeman/foreman-js/releases/tag/v6.1.0-next-storybook-6-upgrade.0

To install it, replace the version in the package.json with ^6.1.0-next-storybook-6-upgrade.0.

Please update the readme file according to the changes and the deprecations.
Please squash and finalize your commit message.
In your commit, describe the breaking changes and write a migration guide so it will be landed in the changelog (https://github.com/theforeman/foreman-js/blob/master/CHANGELOG.md) and in the release notes (https://github.com/theforeman/foreman-js/releases).

packages/stories/src/config/decorators/centered.js

jeremylenz · 2020-11-16T18:28:10Z

Thanks @sharvit, squashed and updated!

- Do not merge until theforeman/foreman-js#214 is merged and @theforeman/stories@7.0.0 is published to npm

sharvit · 2020-11-17T09:30:12Z

Thanks @jeremylenz

Please add another depreciation error and a breaking change line about the storiesOf is not supported anymore.
I was playing with the changelog and the release notes generator and it seems to be working best when I formated the commit as well:

    feat(stories): update Storybook to v6

    BREAKING CHANGE: @storybook/addon-knobs, @storybook/addon-actions,
    and @storybook/addon-storysource are no longer re-exported
    from @theforeman/stories.  Going forward, import these items
    directly: e.g. `import { withKnobs } from @storybook/addon-knobs`
    instead of `import { withKnobs } from @theforeman/stories`.
    Deprecation error messages have been added where appropriate.

    BREAKING CHANGE: The Preview component has been renamed to Canvas.

    BREAKING CHANGE: The Props component has been renamed to ArgsTable.

    BREAKING CHANGE: Custom separators are no longer supported in story titles.
    Instead of `title: 'Components|DiffView'` you must write `title: 'Components/DiffView'`.

This format generated the following release notes:

Please format the commit accordingly.

BREAKING CHANGE: @storybook/addon-knobs, @storybook/addon-actions, and @storybook/addon-storysource are no longer re-exported from @theforeman/stories. Going forward, import these items directly: e.g. `import { withKnobs } from @storybook/addon-knobs` instead of `import { withKnobs } from @theforeman/stories`. Deprecation error messages have been added where appropriate. BREAKING CHANGE: The Preview component has been renamed to Canvas. BREAKING CHANGE: The Props component has been renamed to ArgsTable. BREAKING CHANGE: Custom separators are no longer supported in story titles. Instead of `title: 'Components|DiffView'` you must write `title: 'Components/DiffView'`. BREAKING CHANGE: The storiesOf API is no longer supported. Please use Component Story Format or MDX instead.

jeremylenz · 2020-11-17T15:20:18Z

@sharvit updated and formatted the commit message!

sharvit

Thanks @jeremylenz

sharvit · 2020-11-18T14:54:00Z

Published as v7.0.0, see https://github.com/theforeman/foreman-js/releases/tag/v7.0.0

jeremylenz force-pushed the storybook-6-upgrade branch 2 times, most recently from f5b9384 to d15f7b6 Compare September 2, 2020 19:19

This was referenced Sep 8, 2020

can't run foreman storybook with link #213

Closed

Refs #30842 - Update Stories files for Storybook v6 upgrade theforeman/foreman#7990

Merged

jeremylenz mentioned this pull request Sep 28, 2020

Component-level parameters not available in storySort storybookjs/storybook#11010

Closed

jeremylenz commented Sep 28, 2020

View reviewed changes

jeremylenz force-pushed the storybook-6-upgrade branch from e7b76a5 to ffb4237 Compare September 29, 2020 18:27

jeremylenz marked this pull request as ready for review September 29, 2020 19:02

jeremylenz requested a review from sharvit September 29, 2020 19:02

jeremylenz requested a review from johnpmitsch September 29, 2020 19:17

jeremylenz commented Sep 29, 2020

View reviewed changes

sharvit self-assigned this Oct 12, 2020

sharvit mentioned this pull request Nov 8, 2020

feat(root): migrate deploy to github actions #233

Merged

jeremylenz force-pushed the storybook-6-upgrade branch from f34918e to 762c284 Compare November 12, 2020 21:30

jeremylenz force-pushed the storybook-6-upgrade branch from 762c284 to 7e5721c Compare November 13, 2020 17:51

johnpmitsch previously approved these changes Nov 13, 2020

View reviewed changes

sharvit suggested changes Nov 16, 2020

View reviewed changes

packages/stories/src/config/decorators/centered.js Show resolved Hide resolved

jeremylenz dismissed johnpmitsch’s stale review via 0a4f685 November 16, 2020 17:12

jeremylenz force-pushed the storybook-6-upgrade branch from 7e5721c to 0a4f685 Compare November 16, 2020 17:12

jeremylenz added a commit to jeremylenz/foreman that referenced this pull request Nov 16, 2020

Refs #30842 - use @theforeman/stories v7.0.0

0624c1b

- Do not merge until theforeman/foreman-js#214 is merged and @theforeman/stories@7.0.0 is published to npm

jeremylenz force-pushed the storybook-6-upgrade branch from 0a4f685 to 7c458d0 Compare November 17, 2020 14:41

sharvit approved these changes Nov 18, 2020

View reviewed changes

sharvit merged commit f9abe6e into theforeman:master Nov 18, 2020

jeremylenz mentioned this pull request Feb 15, 2021

tfm-stories stopped working after storybook v5.3 released #122

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade Storybook to v6 #214

Upgrade Storybook to v6 #214

jeremylenz commented Sep 2, 2020 •

edited

Loading

jeremylenz Sep 28, 2020

jeremylenz Sep 29, 2020

jeremylenz commented Sep 29, 2020

jeremylenz Sep 29, 2020

jeremylenz Sep 29, 2020

johnpmitsch commented Oct 1, 2020

jeremylenz commented Nov 6, 2020

johnpmitsch commented Nov 13, 2020

jeremylenz commented Nov 13, 2020

johnpmitsch commented Nov 13, 2020

sharvit left a comment

jeremylenz commented Nov 16, 2020

sharvit commented Nov 17, 2020

jeremylenz commented Nov 17, 2020

sharvit left a comment

sharvit commented Nov 18, 2020

		export * from '@storybook/addon-actions';
		export * from '@storybook/addon-storysource';

Upgrade Storybook to v6 #214

Upgrade Storybook to v6 #214

Conversation

jeremylenz commented Sep 2, 2020 • edited Loading

jeremylenz Sep 28, 2020

Choose a reason for hiding this comment

jeremylenz Sep 29, 2020

Choose a reason for hiding this comment

jeremylenz commented Sep 29, 2020

jeremylenz Sep 29, 2020

Choose a reason for hiding this comment

jeremylenz Sep 29, 2020

Choose a reason for hiding this comment

johnpmitsch commented Oct 1, 2020

jeremylenz commented Nov 6, 2020

johnpmitsch commented Nov 13, 2020

jeremylenz commented Nov 13, 2020

johnpmitsch commented Nov 13, 2020

sharvit left a comment

Choose a reason for hiding this comment

jeremylenz commented Nov 16, 2020

sharvit commented Nov 17, 2020

jeremylenz commented Nov 17, 2020

sharvit left a comment

Choose a reason for hiding this comment

sharvit commented Nov 18, 2020

jeremylenz commented Sep 2, 2020 •

edited

Loading