Output JSON list of stories for 3rd party integration

[JohnAlbin]

Is your feature request related to a problem? Please describe.

I was looking to use the list of stories in a 3rd party tool. Unfortunately, I don't see any documented way to get the stories list.

This issue has been brought up before, but closed before implemented:

• How to get a list of stories during a build step? #775
• List of all stories in runtime #3847
• Create "sitemap"/list of all stories on build #4878

Describe the solution you'd like

A URL in the Storybook site like /stories.json that includes a list of all the stories on the site. Maybe the same information that is available from the storySort function.

• unique id (token used in URL?)
• kind
• name
• parameters
• URL

Describe alternatives you've considered

Scraping the navbar of the Storybook.

Are you able to assist bring the feature to reality?

If I can figure it out, yes.

[atanasster]

@JohnAlbin - I made a quick addon https://github.com/atanasster/storybook-addon-export-stories

It adds a save to json button to the toolbar. You can play with it - basically you can also save automatically from the setStories event but it can create some complications. Feel free to open issues or send a PR.

[shilman]

I think wanting a list of stories in a JSON endpoint is a reasonable request, although it increases our surface area slightly. WDYT @ndelangen @tmeasday

[ndelangen]

It's a strong yes, we should be able to do this as a webpack plugin also, so that we indeed can generate the .json for serving it and outputting a static file.

[ndelangen]

This is on my todo list for this year

[ColCh]

Look what I found! Looks interesting indeed

Plugin which generates tests for storybook, using webpack.

https://github.com/yandex/storytests-webpack-plugin/blob/master/index.js

example: https://github.com/baushonok/tested-storybook

[ndelangen]

In 6.0.0 the storybook CLI will have a command:

sb extract

Which will generate a stories.json

storybook/lib/cli/src/generate.js

Lines 70 to 79 in 4a3d161

	program
	.command('extract [location] [output]')
	.description('extract stories.json from a built version')
	.action((location = 'storybook-static', output = path.join(location, 'stories.json')) =>
	extract(location, output).catch((e) => {
	logger.error(e);
	process.exit(1);
	})
	);

[ColCh]

Hi @ndelangen . Any news? Version 6 seems to be in RC now

[alexbchr]

Tried running the mentioned sb extract command like so with latest version of the CLI and it worked great! It outputs a stories.json file in the Storybook build directory.

Command:

npx -p @storybook/[email protected] sb extract
// Or equivalent taking automatically latest Storybook CLI version
npx -p @storybook/cli@next sb extract

[jayarjo]

@atanasster @alexbchr but what's the point to extract them to json, how can you use them after that?

I actually wonder if there a way to do the opposite, have stories that are stored in json to be imported into storybook?

[tmeasday]

The primary use case of this is for composition:

• https://medium.com/storybookjs/storybook-composition-af0da9084fba
• https://storybook.js.org/docs/react/workflows/storybook-composition

If your published Storybook includes a stories.json generated is this way, it will load much faster in a composed SB.

If you upload to Chromatic (and in future other services) this all happens automatically.

---

Can you tell me a little more about the use case of generating stories from a JSON file?

[jayarjo]

@tmeasday I'm looking to have stories auto-generated and thought something like JSON would be a great common format that can be converted to anything else (if required). But just not sure if it is already supoprted internally or if I need to write something like custom webpack loader and convert them manually to something like JSX (that'd suck)

[tmeasday]

Not currently something that's supported but it is something that fits naturally with the args concept.

You could do it right now with a loader as you suggest and I'd hazard a guess it wouldn't be too hard if you knew about that kind of thing (we'd be super interested in the result too).

Longer term I could see a feature like this landing in the medium term, probably by 7.0 at the latest (don't hold me to that 😉)

[daneah]

I'm using sb extract and it seems to work as expected, but in the documentation linked above I don't generally see mention of needing to generate a stories.json file. I'm wondering if I'm missing something in my configuration that should be automatically extracting the story JSON data, especially for local development where there isn't a statically-built Storybook to extract anything from?

Edit: upon further inspection, my issue is definitely a manifestation of #11892

[ndelangen]

This feature is released in 6.0.0, I think this issue should be closed now.

@daneah let's track that issue in #11892