Storybook: Pre-Made Stories

[Haaruun-I]

I was just wondering if there was any library of pre-made stories.

[mrmckeb]

Hi @Haaruun-I, not that I know of - but I can help you get started if you have any questions. Personally, I love using the knobs addon, and would definitely recommend looking into that.

[leoyli]

I have written an automatic story generator in my experimental branch. Basically you can do the same easily with WebPack require.context API.

In short, here is how I did it:
(1) use require.context to get all component in the source folder;
(2) filter all *.stories.jsx files, blackLists (e.g. Containers);
(3) generate the story for the left components.

Thanks HMR feature in WebPack, my storybook can load story automatically when a new file is created, and stop composing stories automatically when I decide to handle it manually.

[mrmckeb]

I do the same in my projects, @Haaruun-I :) It's a great way to manage stories.

[leoyli]

@mrmckeb I'm wonder if we can have such feature out of the box. However, I see there are many things to consider... Or maybe just simply document an example that might be helpful?!

Here is my implementation for the story loader, for example:

/**
 * a story loader function factory with the automatic story generator
 *
 * @param {Boolean} auto - should drive stories automatically
 * @param {String[]} excluded - a blacklist array contains exclusive path fragments
 * @return {Function} - a loader function
 *
 * @see https://webpack.js.org/guides/dependency-management/#require-context
 */
export const loadStories = ({ auto = true, excluded = [] }) => () => {
  const req = require.context('@src', true, /.*\/.*\/[A-Z].*(?<!\.test|\.spec).[jt]sx$/);
  const files = req.keys();
  const stories = files.filter((path) => path.includes('.stories.js'));

  // load predefined stories
  stories.forEach(req);

  // classify and drive stories automatically
  if (auto === true) {
    const existed = new Set(stories.map((path) => path.replace('.stories', '')));
    files
      .filter((path) => !existed.has(path) && !excluded.some((str) => path.includes(str)))
      .map((path) => [
        path
          .split('/')
          .splice(1, 2)
          .join(':'), // <- this matching with mine `addon-options` configs
        req(path).default,
      ])
      .forEach(([nodeName, C]) =>
        storiesOf(nodeName, module).add(C.displayName || C.name, makeStoryOf(C))
      );
  }
};

// @config.js
configure(
  loadStories({
    auto: true,
    excluded: ['/containers', '/routing'],
  }),
  module
);

Note: @src uses the WebPack alias, and makeStoryOf is the implementation details on how the story being generated.

A dummy example for makeStoryOf:

const makeStoryOf = (C) => h(C, null, null);  // h is the `createElement` API used in React or Vue

This way is really good when we want to quickly compose a new presentational component, since HMR will watch the folder and the loader can generate the story automatically, especially when we have addon-smart-knobs used together. However, I have my own version of smart knob since the one under this project is not listed as an official add-on and not worked as I wished because I write SFC with styled-components in React, cc to @ndelangen ).

I would be happy to submit a PR in my free time to improve the documentation 😄, but I'm not sure where to add and what is the boundary of the context... since makeStoryOf is pretty customized in my use case. But I do think such feature that composes stories automatically can improve the DX in general for people using Storybook and if we want to promote CDD approach.

[mrmckeb]

I think examples in documentation would be a great way to go, and perhaps a hint in the default config that points to that documentation for copy-and-paste configs?

[Haaruun-I]

@leoyli I cant find the experimental branch, also is there any way to do do it with a @storybook/html

[leoyli]

Not sure about @storybook/html. The experimental branch is my own repo... I'm trying to integrate storybook into our tech stack in the company... That is why I shared the above code. I believe it is fairly straightforward to understand. I will submit a PR to improve the doc too :)

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!