Adding stories from data structure throws error

I have a working set of stories from the sample code. However, when I try to populate stories from a simple data structure, storybook gives me an error. Loading stories from data would keep code DRY when you are sharing fixture data between stories and unit tests.

When I modify the storybook example components/stories/TodoItem.js with the following trivial change, it gives me the following error preview.js?a230:61 Uncaught TypeError: story is not a function. Is there a better way to do this?

const data = {
  'not completed': { id: 'the-id', text: 'Hello Todo', completed: false },
  'completed': { id: 'the-id', text: 'Hello Todo', completed: true }
}

const todoStories = storiesOf('TodoItem', module)
for (const key in data) {
  todoStories.add(key, getItem(data[key]))
}

// storiesOf('TodoItem', module)
//   .add('not completed', () => {
//     const todo = {
//       id: 'the-id',
//       text: 'Hello Todo',
//       completed: false
//     };
//
//     return getItem(todo);
//   })
//   .add('completed', () => {
//     const todo = {
//       id: 'the-id',
//       text: 'Hello Todo',
//       completed: true
//     };
//
//     return getItem(todo);
//   });

[thani-sh]

Hi @shilman, I believe the code given above will work fine if we use an arrow function.

const todoStories = storiesOf('TodoItem', module)
for (const key in data) {
  todoStories.add(key, () => getItem(data[key]))
}

React storybook can be modified to support data structures by changing these 2 lines.

• https://github.com/kadirahq/react-storybook/blob/master/src/client/story_store.js#L53
• https://github.com/kadirahq/react-storybook/blob/master/src/client/ui/preview.js#L35

But using a function to create the component can be useful. Let’s keep the issue open for now.

[jeef3]

Could be a convenience function perhaps, something like todoStories.addAll(data)?

I was thinking this as well. The only problem though is that currently the add() story requires you to pass a function that does the rendering. addAll could only work like you’ve described if a Story was set-up knowing what component it would render, and then only allowed you to pass props.

Perhaps something like:

todoStories.addAll(data, (props) => <TodoItem {...props} />);

Where the render function of addAll passes the props each time. Could actually work quite well with functional components:

// functional component
const TodoItem = ({ id, text, completed }) => <div>{id}: {text} {completed ? 'Y' : 'N'}</div>;

// ... other set-up

// Since it would be called, given the props.
todoStories.addAll(data, TodoItem);