Building Storybook stories with allExamples.js

story.js

import { storiesOf, action } from '@kadira/storybook';

import { browserDLSExamples } from '../examples/allExamples';
import fixtures from '../examples/fixtures';

const { DLSExamples, DLSComponents } = browserDLSExamples();

Object.entries(DLSExamples).forEach(([name, examplesFunc]) => {
  let story = storiesOf(name, module);

  const {
    component,
    examples,
    isPrivate,
    tags,
    usage,
    isDeprecated: isStoryDeprecated,
  } = examplesFunc(DLSComponents, { action, fixtures });

  examples.forEach(({
    render,
    description,
    noStory,
    isDeprecated,
  }) => {
    if (noStory) return null;

    if (tags) {
      story = story.withTags(...tags);
    }

    if (isPrivate) {
      story = story.private();
    }

    if (usage) {
      story = story.usage(usage);
    }

    // setDeprecated needs to be called on every story to prevent leaking state
    // between examples. Otherwise every example following a deprecated one will
    // also show as deprecated.
    story = story.setDeprecated({
      isDeprecated: isStoryDeprecated || isDeprecated,
      isExample: !isStoryDeprecated,
    });

    return story.addWithSource(
      description,
      render,
      component || DLSComponents[name],
    );
  });
});