Storybook: Improve docs & assist with automatic story loading

Created on 4 Apr 2017 · 11Comments · Source: storybookjs/storybook

config.js requires you to require() all your stories, It's very common to see users use webpack to autorequire all stories using a pattern:

const regex = /.stories.js$/;
const context = require.context('../src/components', true, regex)
context.keys().map(context)

However this is undocumented. We should add this to the docs and possibly add a demo-project using this to refer to.

discussion

Source

ndelangen

All 11 comments

not easy to find in the docs, but it is in there: https://getstorybook.io/docs/react-storybook/basics/writing-stories#loading-stories-dynamically

travi on 4 Apr 2017

👍1

The code in the docs doesn't mention this but it also support nested folders too.

something like stories/buttons/cancelButton.stories.jsx would also work. makes organization a lot easier.

danielduan on 5 Apr 2017

yep, i keep my stories in nested folders, right next to the component. the details in the docs support that approach well

travi on 5 Apr 2017

@travi You say it was not easy to find, do you have any suggestions how to make it easier to find?

ndelangen on 5 Apr 2017

@ndelangen I feel like this should be a default that *.stories.js(x) be automatically included when you define a stories folder with an option to opt out or define custom filename regex in the config file.

danielduan on 5 Apr 2017

👍1

yeah something to think about.

ndelangen on 5 Apr 2017

@ndelangen good question. docs organization is never simple. the main thought i guess i have it that i would have expected these details under the "slow start guide" where it describes the config file since its more related to config than the stories themselves

travi on 5 Apr 2017

👍1

i would appreciate for checking stor(ies|y). we use this pattern in our modules: