Question: Loading stories from individual component folders?

[reggi]

I'm interested in editing my config.js to abide by a different storybook structure.

• /components
  • /SearchBox
    • /index.js
    • /story.js

Where each storybook story for a given component lives in the same folder with the component itself.

import { configure } from '@kadira/storybook'

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

function loadStories () {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module)

I think this would be a useful config to document for others as well.

[shilman]

@reggi like this?

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

Or did you have something else in mind?

[reggi]

Thanks!

[alistair-hmh]

What if our components are in multiple node module folders? Eg:

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

const req = require.context("@my-lib/src/", true, /.stories.js$/);
const req2 = require.context("@your-lib/src/", true, /.stories.js$/);

// How can I require stories from req2?
configure(() => {
	req.keys().forEach(filename => req(filename));
}, module);

[zachintosh]

What if our components are in multiples node module folders? Eg:

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

const req = require.context("@my-lib/src/", true, /.stories.js$/);
const req2 = require.context("@your-lib/src/", true, /.stories.js$/);

// How can I require stories from req2?
configure(() => {
	req.keys().forEach(filename => req(filename));
}, module);

I would also like to know the right way to do this.

[alistair-hmh]

@zlw11063 - I found this kind of thing to work ok...

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

const libs = ['@my-lib/src', '@your-lib/src'];

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

[wbern]

@alistair-hmh don't you get webpack compile errors when using that?

[markolofsen]

My variant:

const req1 = require.context('../stories', true, /\.stories\.js$/);
const req2 = require.context('../widgets', true, /\.story\.js$/);
const libs = [req1, req2];

configure(() => libs.forEach(req => req.keys().forEach(f => req(f))), module);

[elewin]

Just pass them in as an array:

configure([
  require.context('../src/components', true, /\.stories\.js$/),
  require.context('../lib', true, /\.stories\.js$/)
], module);

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