chore: Upgrade Storybook to v4 #1498

vpicone · 2018-10-29T18:49:51Z

Closes IBM/carbon-components-react#1496

This upgrades storybook to v4. Webpack & babel upgrades, theming, along with a new, backward-compatible parameters API.

Changelog

New

@storybook/addon-links (this was registered in addons.js but never added as a dependency)
@babel-loader necessary for backward-compatible babel 6 stuff.

Changed

Updated all of the @storybook deps to 4.0.0

joshblack · 2018-10-29T23:48:41Z

Thanks for doing this! Will take a look tomorrow to make sure we're good to merge in 🎉

asudoh · 2018-10-30T02:56:35Z

Thank you for doing this @vpicone! One question - Is knobs in <Button> working at your end? Just quickly fiddling with this PR and haven't been able to see non-primary buttons, so wanted to make sure I'm not missing anything. Happy to see new stuffs in Storybook BTW!

vpicone · 2018-10-30T15:51:49Z

@asudoh No, you're right they changed how select works for knobs. I'll dig in to this.

vpicone · 2018-10-30T19:13:40Z

ugh yarn.lock merge conflicts?

vpicone · 2018-10-30T19:17:43Z

On the plus side, it looks like the update to addon-info fixes the 'multiple named import' issue that took the descriptions away.

joshblack · 2018-10-30T19:20:38Z

Hey @vpicone! For yarn merge conflicts, just pull down the changes and re-run yarn. It will resolve them automatically 😄

…upgrade-storybook

vpicone · 2018-10-30T19:29:28Z

Passing stories directly into withInfo() is deprecated in 4.0, so I'm gonna swap it out in favor of the info option and then we should be good to go.

Passing stories directly into withInfo() is deprecated, instead use addDecorator(withInfo) and pass options with the 'info' parameter

joshblack · 2018-10-30T21:08:25Z

Let us know when you're ready for us to review btw @vpicone!

vpicone · 2018-10-30T21:18:52Z

@joshblack Should be good to go now. Switched everything off the deprecated withInfo syntax.

asudoh · 2018-10-31T04:06:39Z

Thank you for the updates @vpicone! Things seems to work very well except that CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS=true (ref) seems broken due to Webpack4 move associated with Storybook4 move. Some search tells me that extract-text-webpack-plugin has to be replaced with mini-css-extract-plugin, like below. Could you please try CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS=true and ensure it works? Thanks!

diff --git a/.storybook/addons.js b/.storybook/addons.js
index 5837958..139bbfe 100644
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -1,7 +1,7 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-links/register';
-import 'storybook-addon-a11y/register';
+import '@storybook/addon-a11y/register';
 import '@storybook/addon-options/register';
 import 'storybook-readme/register';
 import '@storybook/addon-storysource/register';
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 7d67d05..a634c6d 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const useExperimentalFeatures =
   process.env.CARBON_USE_EXPERIMENTAL_FEATURES === 'true';
@@ -88,17 +89,16 @@ module.exports = {
         test: /\.scss$/,
         use: !useExternalCss
           ? [{ loader: 'style-loader' }, ...styleLoaders]
-          : ExtractTextPlugin.extract({
-              use: styleLoaders,
-            }),
+          : [{ loader: MiniCssExtractPlugin.loader }, ...styleLoaders],
       },
     ],
   },
   plugins: !useExternalCss
     ? []
     : [
-        new ExtractTextPlugin({
-          filename: '[name].[contenthash].css',
+        new MiniCssExtractPlugin({
+          filename: '[name].css',
+          chunkFilename: '[id].css',
         }),
       ],
 };
diff --git a/package.json b/package.json
index 0411d97..42b64e1 100644
--- a/package.json
+++ b/package.json
@@ -155,6 +155,7 @@
     "@babel/plugin-transform-object-assign": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "@storybook/addon-a11y": "^4.0.0",
     "@storybook/addon-actions": "^4.0.0",
     "@storybook/addon-info": "^4.0.0",
     "@storybook/addon-knobs": "^4.0.0",
@@ -192,6 +193,7 @@
     "jest-circus": "^23.6.0",
     "lcov2badge": "^0.1.0",
     "lint-staged": "^7.3.0",
+    "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "4.9.2",
     "object-assign": "^4.1.1",
     "postcss-loader": "^3.0.0",
@@ -212,7 +214,6 @@
     "rollup-plugin-uglify": "^3.0.0",
     "sass-loader": "^7.1.0",
     "semantic-release": "^15.0.0",
-    "storybook-addon-a11y": "^3.1.9",
     "storybook-readme": "^4.0.2",
     "string-replace-loader": "^2.1.0",
     "validate-commit-msg": "^2.10.1",

…-components-react into upgrade-storybook

asudoh

LGTM 👍 - Thanks @vpicone!

vpicone · 2018-10-31T18:48:13Z

There were a few things that required web pack as a peer dependancy. It got installed eventually as a regular dependency of storybook but installing it as a regular dependency gets rid of a few of those errors.

asudoh · 2018-10-31T19:29:05Z

@vpicone I saw a similar error - Which seems to have caused by WebPack3 installation still being there by old version of Storybook a11y add-on installation. Upgrading that add-on fixed the issue for me, though your solution is fine for now.

vpicone · 2018-10-31T19:43:00Z

@asudoh I could be wrong, but I think the loader needs it as a peer dependency at the same level rather than as a dependency of some other peer. Without installing it I get a lot of peer deps warnings.

asudoh · 2018-10-31T23:29:07Z

@vpicone Great point, I see at least one dependency having webpack as a peer dependency. Seems that I thought of a different error from what you saw. Thank you for articulating where your earlier comment came from!

This reverts commit e60b1c8.

asudoh · 2018-11-01T07:28:58Z

Had to revert this PR due to an issue with missing CSS in static build (running yarn build-storybook and running local web server at storybook-static directory). Tried several, including rewinding back to @vpicone's original code, but no luck as of now. Need further investigation - One possibility is that v4 move was too soon. @vpicone Sorry for this and great if you have any ideas - Thanks!

joshblack · 2018-11-01T15:08:06Z

Oh no! Sorry we didn't catch this during review. Is this related to the change from extract-text-webpack-plugin?

vpicone · 2018-11-01T19:02:58Z

Hmm weird! everything in the custom web pack config looks correct. Sorry I didn't include the static generation in my testing. I'll definitely be more aware of that next time.

Thinking more about it now, having added webpack 4 as a peer to accommadate the mini-css plugin means we have to make sure the config jives 100% with webpack 4 migration. v3->v4 was pretty minor if I remember but worth investigating I suppose.

asudoh · 2018-11-02T07:25:53Z

Ref: Issue# 4690 at https://github.com/storybooks/storybook

vpicone · 2018-11-02T14:59:34Z

Also, storybookjs/storybook#4645 could be related. I think you were right about jumping the gun @asudoh might have to wait for the dust to settle a bit.

I was having so much fun with theming too haha.

asudoh · 2018-11-02T21:25:30Z

You are fast on research @vpicone! I can see your link seems close to what we hit. I enjoyed fiddling with your work, too, BTW!

carbon-bot · 2018-11-05T13:43:29Z

🎉 This PR is included in version 6.46.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

vpicone · 2018-11-05T18:13:16Z

@asudoh Hey just wanted to make sure this branch didn't actually get released haha. Carbon-bot might just be overzealous.

joshblack · 2018-11-05T19:02:13Z

@vpicone I think this commit was included alongside the revert commit so technically it was included, but the effect was not 😅

asudoh · 2018-11-06T00:02:56Z

@vpicone @joshblack I think you both got the point - The code was not released. The code won't affect the NPM release either because the stuffs are not in files list.

docs: upgrade storybook

55a1a8d

joshblack added status: merge conflict 🚫 status: ready for review 👀 labels Oct 29, 2018

fix: run prettier.

66c8209

Merge branch 'master' of github.com:IBM/carbon-components-react into …

c42bf05

…upgrade-storybook

joshblack removed status: merge conflict 🚫 status: ready for review 👀 labels Oct 30, 2018

vpicone and others added 2 commits October 30, 2018 15:57

fix: Don't pass stories directly into withInfo

6411884

Merge branch 'master' into upgrade-storybook

0c2ff56

Merge branch 'master' into upgrade-storybook

1f2be6a

vpicone added 2 commits October 31, 2018 13:03

fix: Swap out text extract plugin and add webpack peer dep.

728d942

Merge branch 'upgrade-storybook' of https://github.com/vpicone/carbon…

180e871

…-components-react into upgrade-storybook

asudoh approved these changes Oct 31, 2018

View reviewed changes

joshblack approved these changes Oct 31, 2018

View reviewed changes

asudoh merged commit e60b1c8 into carbon-design-system:master Oct 31, 2018

asudoh added a commit that referenced this pull request Nov 1, 2018

Revert "chore: Upgrade Storybook to v4 (#1498)"

1b7fe22

This reverts commit e60b1c8.

asudoh pushed a commit that referenced this pull request Nov 1, 2018

Revert "chore: Upgrade Storybook to v4 (#1498)"

5953496

This reverts commit e60b1c8.

vpicone mentioned this pull request Nov 6, 2018

Upgrade storybook #1521

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Upgrade Storybook to v4 #1498

chore: Upgrade Storybook to v4 #1498

vpicone commented Oct 29, 2018

joshblack commented Oct 29, 2018

asudoh commented Oct 30, 2018

vpicone commented Oct 30, 2018

vpicone commented Oct 30, 2018

vpicone commented Oct 30, 2018

joshblack commented Oct 30, 2018

vpicone commented Oct 30, 2018 •

edited

Loading

joshblack commented Oct 30, 2018

vpicone commented Oct 30, 2018

asudoh commented Oct 31, 2018

asudoh left a comment

vpicone commented Oct 31, 2018

asudoh commented Oct 31, 2018

vpicone commented Oct 31, 2018

asudoh commented Oct 31, 2018 •

edited

Loading

asudoh commented Nov 1, 2018 •

edited

Loading

joshblack commented Nov 1, 2018

vpicone commented Nov 1, 2018 •

edited

Loading

asudoh commented Nov 2, 2018

vpicone commented Nov 2, 2018 •

edited

Loading

asudoh commented Nov 2, 2018

carbon-bot commented Nov 5, 2018

vpicone commented Nov 5, 2018

joshblack commented Nov 5, 2018

asudoh commented Nov 6, 2018

chore: Upgrade Storybook to v4 #1498

chore: Upgrade Storybook to v4 #1498

Conversation

vpicone commented Oct 29, 2018

Changelog

joshblack commented Oct 29, 2018

asudoh commented Oct 30, 2018

vpicone commented Oct 30, 2018

vpicone commented Oct 30, 2018

vpicone commented Oct 30, 2018

joshblack commented Oct 30, 2018

vpicone commented Oct 30, 2018 • edited Loading

joshblack commented Oct 30, 2018

vpicone commented Oct 30, 2018

asudoh commented Oct 31, 2018

asudoh left a comment

Choose a reason for hiding this comment

vpicone commented Oct 31, 2018

asudoh commented Oct 31, 2018

vpicone commented Oct 31, 2018

asudoh commented Oct 31, 2018 • edited Loading

asudoh commented Nov 1, 2018 • edited Loading

joshblack commented Nov 1, 2018

vpicone commented Nov 1, 2018 • edited Loading

asudoh commented Nov 2, 2018

vpicone commented Nov 2, 2018 • edited Loading

asudoh commented Nov 2, 2018

carbon-bot commented Nov 5, 2018

vpicone commented Nov 5, 2018

joshblack commented Nov 5, 2018

asudoh commented Nov 6, 2018

vpicone commented Oct 30, 2018 •

edited

Loading

asudoh commented Oct 31, 2018 •

edited

Loading

asudoh commented Nov 1, 2018 •

edited

Loading

vpicone commented Nov 1, 2018 •

edited

Loading

vpicone commented Nov 2, 2018 •

edited

Loading