Storybook: allow to import all stories files to storybook without explicitly requiring one file at a time

[gavriguy]

it would be nice to add to the storybook config an option to require all story files that matches a specific file name pattern like *.storie.js - in a similar way that test runners are loading all test files in a projects

[arunoda]

I think that's possible to do with webpack. So simply need to use it in the config.js
But I'm not exactly sure about the syntax.

[gavriguy]

Hi, I followed your advice:

Assuming all your stories follow the name _story.js

e.g

|- Component1
   |- index.jsx
   |- _story.jsx
|- Component2
   |- index.jsx
   |- _story.jsx

then this is the way to require all project's stories

import { configure } from '@kadira/storybook';

function requireAll(requireContext) {
  return requireContext.keys().map(requireContext);
}

function loadStories() {
  requireAll(require.context("..", true, /_story\.jsx?$/));
}

configure(loadStories, module);

Maybe it will be good idea to add this to the docs. Let me know if you want me to open a pull request for it.

[arunoda]

Yes. It should fit somewhere here - https://github.com/kadirahq/react-storybook/blob/master/docs/api.md#loading-modules

[gavriguy]

I see its already documented there :)

import { configure } from '@kadira/storybook';

const req = require.context('./', true, /Story\.js$/)

function loadStories() {
  req.keys().forEach(req)
}

configure(loadStories, module);

[arunoda]

oops.

[JohnAlbin]

Updated URL of docs if you are landing here via Google search: https://getstorybook.io/docs/react-storybook/basics/slow-start-guide#create-the-config-file

[philcockfield]

This seems to have been pulled out of the documentation now. I've been using this approach for a long time, and it still currently works. Is this an approach that is still intended to be used?

// Load stories.
const req = require.context("../lib", true, /.stories.js$/);
configure(() => {
  req.keys().forEach(filename => req(filename));
}, module);

[shilman]

@philcockfield it's in the docs:

https://storybooks.js.org/docs/react-storybook/basics/writing-stories/#loading-stories-dynamically

maybe we should also add it to the "slow start guide"? any suggestions welcome!

[daverau-optimizely]

Some folks searching might find this useful for sorting all stories ignoring folder structure/hierarchy, using the options addon, and this in your config:

setOptions({
  sortStoriesByKind: true
});

[ivansnek]

For those RN devs having this issue, according the docs the solution is: https://github.com/elderfo/react-native-storybook-loader I tried and it works

Docs Reference: https://storybook.js.org/basics/writing-stories/#loading-stories-dynamically