Create "sitemap"/list of all stories on build

[donaldpipowitch]

Is your feature request related to a problem? Please describe.
It is possible to get all stories at runtime/on the client with import {configure, getStorybook} from '@storybook/react';, but sometimes you want to have the same information somewhere else. E.g. if you want to run a test against all stories and the test runner isn't aware of Storybook at all.

You can expose the stories on your client and let the test runner crawl the information (as I did in the case https://gist.github.com/donaldpipowitch/898854e2f71f64d0d91e199537b3ee1a#file-config-js), but this seems to be a brittle workaround and makes certain things harder to achieve (e.g. if I would use Jest in this example and I'd want to create a test for every story, I'd need to add a custom setup/environment to fetch my data before the tests are opened, because fetching is async and test definitions in Jest need to be known synchronous/on startup). This can be quite cumbersome and would be solved if a "sitemap"/list of all stories would be created as an artefact during the build. Then I could just require that information.

Describe the solution you'd like
I'd suggest that Storybook would include a custom plugin (either by default or as an opt-in) to create some stories.json in the root of the storybook. The stories.json could look like this:

[
  {
    "kind": "Hello",
    "story": "World"
  }
]

My main use case is crawling the storybook, so maybe it could even include the encodeURIComponent'd version or even the complete query, but that would be a nice-to-have:

[
  {
    "kind": "Hello 1",
    "story": "World 2",
    "encodedKind": "Hello%201",
    "encodedStory": "World%202",
    "query": "?selectedKind=Hello%201&selectedStory=World%202"
  }
]

Describe alternatives you've considered
Mainly two things:

• Keep a file system convention so that every kind is represented by a single directory and every story is represented by a single file. (We partially do this, but it can be brittle. It needs to be explained to others, it is a custom solution, it can become more complex for nested kinds).
• The solution represented in the gist: https://gist.github.com/donaldpipowitch/898854e2f71f64d0d91e199537b3ee1a#file-config-js.

Are you able to assist bring the feature to reality?
Probably yes :)

[stale]

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!

[BPScott]

This would be useful for percy-storybook which currently does something very similar to @donaldpipowitch's gist workaround.

It would also help with allowing the a11y addon to expose an executable that runs an accessibility report over all stories

[stale]

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]

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!

[fredboyle]

Was there ever a solution implemented for this? This would be very useful for our team as well.

[jasondeng]

Curious if anyone has found a solution to this? Our team is using percy-storybook for visual testing and this would save us a boat load on our costs