Is there a way to generate stories dynamically?

[mrmartineau]

If I'm using CSF is there any way I can generate a bunch of stories dynamically/programmatically based on some JSON data or a JS object?

As far as I can see, because each story needs to be exported like export const StoryName, there isn't a way to do what I want.

I know this is possible with the storiesOf method, but am keen to know if it's possible with the newer format.

Also, in case you're wondering, I am using Theme UI to style and configure my design system. It uses a large theme config object and I was hoping to import that and loop through a set of properties and create stories that way.

[shilman]

No, CSF is statically defined. For now you need to use the storiesOf API if you want to do it dynamically.

[poroia]

Aha missed that. We plan to add support for that, but don't have a timeline yet.

One CSF compatible workaround is to make a custom webpack loader for that which compiles an input file into CSF when it's loaded.

May someone point me in the right direction for this one? I've been trying to accomplish this with loaders and plugins but I can't find a way to inject the stories before they're added to storybook during the phase

info => Adding stories defined in "main.js"

Thank you in advance!

[localjo]

Is the answer to the question "Is there a way to generate stories dynamically?" currently "No"? I've also got a huge configuration object that I'm using to generate stories, and want to be able to export those stories to storybook without having to repeat all of the entries of the config object in the export syntax.

[poroia]

Is the answer to the question "Is there a way to generate stories dynamically?" currently "No"? I've also got a huge configuration object that I'm using to generate stories, and want to be able to export those stories to storybook without having to repeat all of the entries of the config object in the export syntax.

I was able to resolve this by creating a node script that dynamically generated storybook files based upon our project structure and config files. More specifically, the script ran whenever we started our storybook server and it traversed our component directory to generate a storybook file for each component to be ultimately placed in .gitignore'd folder only to be read by storybook. Was a bit of work and might not be the intended usage of Storybook, but got the job done since we wanted to use Storybook in a non-invasive way since we already had maintained config files for each of our components.
Hope that helps!

[XenoWad01]

@poroia Sorry, I know a lot of time passed since this but could I maybe have an example of this? It would greatly help me as I'm trying to write something similar rn.

[biedronnemw]

@poroia if you'd be willing to share your solution I would also be very grateful.