Using React Storybook

[treshugart]

This issue is a:

• [ ] Bug report
• [ ] Feature request
• [x] Question / support request
• [ ] Other

I was wondering if there is any way to get React Storybook running with NWB out of the box. I've seen #692 which would help manual integration. There's also this issue in Storybook, but it feels like it'd be better implemented as an option.

In case this gets as far as being implemented, it'd be something that's useful for all build types, as opposed to just the react one (I've used Storybook with Web Components, for example).

[stephenwf]

Heres an example of a vanilla NWB install (0.19.1) with storybook installed: https://github.com/how-to-react/nwb-storybook

The commit that gets it working is here: https://github.com/how-to-react/nwb-storybook/commit/2d86666bca48a5688e25ab98f220a125716ce832

If you're just interested in getting the webpack configuration, you'll find that here: https://github.com/stephenwf/create-nwb-webpack-config https://www.npmjs.com/package/create-nwb-webpack-config

Quick note: this will only get you the configuration used in the nwb build-{config.type} command, but should be easily fork-able if you want more.

(Very similar process for styleguidist: https://github.com/how-to-react/nwb-styleguidist)

[insin]

Me looking at https://github.com/how-to-react, @stephenwf: 😮😮😮

Would the proposal in https://github.com/insin/nwb/issues/112#issuecomment-346020207 help here?

Only just saw your comment above and create-nwb-webpack-config is pretty much what I was thinking of for nwb/config/{serve,build,test}, but I'll refactor the internals where needed to try to make it more pleasant.

[stephenwf]

Ah I see, so the webpack config in that example uses something like require.resolve(...) to get the path to the file. That would be ideal. I did run into a few issues with storybook, it didn't like the chunking webpack plugins. (https://github.com/how-to-react/nwb-storybook/blob/master/.storybook/webpack.config.js). Not sure if there is a standard way to filter webpack plugins, but that would be useful too

[insin]

I can do something to associate a name with each plugin for config purposes similar to the way webpack loader config works, which should make it easier to flag them off.

[kylemh]

@insin do you have any plans on changing how nwb exposes/shares it's configuration? We're creating a PoC using NWB for a UI library, and we're gonna try using the above solution to keep Storybook in configuration parity with NWB, but I'd feel a lot safer if configuration was overridable like it is with Storybook and Next (passing the default config as an overridable parameter in the configuration file).

[alzalabany]

it work out of the box just use

npm i -g @storybook/cli
nwb new react-component nameOflib
cd nameOflib
getstorybook

this will install and start storybook @ 6006 port :). 👍 💯

[kylemh]

With that setup my storybook isn't matching the babel configuration that nwb is using.

[alzalabany]

@kylemh should that be a problem ? given storybook is a dev dependency anyway

[kylemh]

If changes are made by overriding key-value config pairs in nwb.config, they're not easily shared in a palatable format for Storybook (who is looking for .babelrc or a custom Webpack config if necessary).

Imagine that I want to be able to use some stage-2 feature that NWB doesn't have out of the box. As it stands, I have to duplicate code via nwb.config and then in .storybook/.babelrc

Also, it's not a devDependency if it's part of my CI process and deploys a built Storybook instance...

[amowu]

My solution:

.
├── .storybook
├── .babelrc.js
└── nwb.config.js

// .babelrc.js
module.exports = {
  "plugins": [...]
};

// nwb.config.js
var babel = require('./.babelrc');

module.exports = {
  babel: babel,
};

[virajsoni06]

Doesn't seem to work with Storybook 5

[adamchenwei]

Uhmmmm.... It's 2021. 4 years and it still didn't work with storybook? What's the reasoning behind it? Is this a repo ..... No longer under active development?

[stephenwf]

@adamchenwei It's been a few years since I've looked at this problem. Would it be useful if I created an updated NWB v0.25 + Storybook 5 example?

[stephenwf]

@adamchenwei Have tested with a vanilla installtion:

• Run npx nwb new react-app nwb-storybook-5
• cd into folder
• Run npx sb init

Storybook works fine in this case, with CSS imports. As noted above, if you customise with babel or webpack configuration you may need to also apply those changes to your storybook webpack configuration.

If you'd like to have a completely matching webpack configuration to a highly customised NWB build, you can check out the previous methods in:

https://github.com/stephenwf/create-nwb-webpack-config https://github.com/how-to-react/nwb-storybook/commit/2d86666bca48a5688e25ab98f220a125716ce832

Much of this still applied - adapt the create-nwb-webpack-config to use NWB to create a webpack configuration, filter out the parts that storybook doesn't need and you're good to go.

If you're running into issues with an older NWB + newer Storybook, it could be related to Webpack or Babel versions. There's nothing wrong with downgrading to an older storybook version if it works for your use-case.

Happy to help with specific use-case 👍