allow to import all stories files to storybook without explicitly requiring one file at a time #125

Closed
gavriguy opened this Issue Apr 20, 2016 · 9 comments

Comments

6 participants
@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

This comment has been minimized.

Show comment
Hide comment
@arunoda

arunoda Apr 20, 2016

Member

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.

Member

arunoda commented Apr 20, 2016

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.

@arunoda arunoda added the discussion label Apr 20, 2016

@gavriguy

This comment has been minimized.

Show comment
Hide comment
@gavriguy

gavriguy Apr 20, 2016

Hi, I followed your advice:

Assuming all your stories follow the name _story.js

e.g

components
|- 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.

Hi, I followed your advice:

Assuming all your stories follow the name _story.js

e.g

components
|- 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

This comment has been minimized.

Show comment
Hide comment
@gavriguy

This comment has been minimized.

Show comment
Hide comment
@gavriguy

gavriguy Apr 20, 2016

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

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

@gavriguy gavriguy closed this Apr 20, 2016

@arunoda

This comment has been minimized.

Show comment
Hide comment
@arunoda

arunoda Apr 20, 2016

Member

oops.

Member

arunoda commented Apr 20, 2016

oops.

@JohnAlbin

This comment has been minimized.

Show comment
Hide comment

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

ndelangen pushed a commit that referenced this issue Apr 5, 2017

Merge pull request #125 from storybooks/root-babelrc
Load config from project dir (fixes #119)
@philcockfield

This comment has been minimized.

Show comment
Hide comment
@philcockfield

philcockfield May 21, 2017

Contributor

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

philcockfield commented May 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@shilman

shilman May 21, 2017

Member

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

Member

shilman commented May 21, 2017

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

@iksemot iksemot referenced this issue in blstream/ShopMe_Frontend Apr 20, 2018

Closed

Integracja Storybook #25

@daverau-optimizely

This comment has been minimized.

Show comment
Hide comment
@daverau-optimizely

daverau-optimizely May 25, 2018

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

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
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment