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

Created on 20 Apr 2016  ·  10Comments  ·  Source: storybookjs/storybook

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

discussion

Most helpful comment

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.

All 10 comments

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.

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.

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);

oops.

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

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);

@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!

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
});

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

miljan-aleksic picture miljan-aleksic  ·  3Comments

alexanbj picture alexanbj  ·  3Comments

arunoda picture arunoda  ·  3Comments

sakulstra picture sakulstra  ·  3Comments

ZigGreen picture ZigGreen  ·  3Comments