Import .stories file into another .stories file with Storybook?

user_467875 0
Viewed 1528

Can you import one .stories file into another .stories with Storybook?

Eg I have

/component1/component1.tsx
/component1/component1.stories.tsx
/component2/component2.tsx
/component2/component2.stories.tsx

I would like to also have a story for all of my components:

In /all-components/all-components.stories.tsx

import * as React from 'react';
import Component1Story from '../component1/component1.stories.tsx';
import Component2Story from '../component2/component2.stories.tsx';

export const Test = () => {
  return (
    <div>
      <Component1Story />
      <Component2Story />
    </div>
  );
};

export default {
  title: 'Components',
};

I get this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of storyFn.

storybook
1 Answers

this should be doable as your stories are just React components. Your problem is happening because you're trying to import the default from your module, which is actually just an object:

export default {
  title: 'Components',
};

All stories are named exports, and you should import them with destructuring:

import { Component1Story } from '../component1/component1.stories';
import { Component2Story } from '../component2/component2.stories';

I created an example for you which shows a working scenario here.

p.s. It's interesting to know that starting with Storybook 6 there's a new mechanism to simplify the creation and reuse of stories so stay tuned! It's called Args.

user_25754400
Related