Native stories viewer

[JReinhold]

I think it would be awesome if npmx.dev could show how the components of a UI library package look like. Luckily there's a sort-of standard for how to render UI components, and it's stories!

Imagine if a UI package like React Aria or Chakra UI use Storybook to document/develop/test their components, wouldn't it be great if users could inspect those components directly on npmx.dev?

What I'm imagining, is a view very similar to the existing Code view, except a Stories/Storybook view. See these mock ups:

But how?

I'm glad you asked! Luckily, there is already an API that would make this "fairly easy" to do.
Storybook has a little known feature (we should try to make it more known), that any npm package that has a "storybook.url" property in their package.json will be composed into projects that use that dependency. It is used in the wild, but not much yet. An example is @chakra-ui/react:

https://npmx.dev/package-code/@chakra-ui/react/v/3.32.0/package.json#L36-L39

We could look that property up in the package, and if it's there, add the "Stories" button as shown above.

Step 1 here would maybe just to do that, and make the button an external link to the Storybook.

But we could also render all of this natively in npmx.dev. Storybooks are builtable, deployable SPAs (like the Chakra UI link above). All Storybooks have an /index.json-file that is the source of truth for all the stories, their id's and human readable names. We would fetch that from the url to build the "story tree" on the left, similar to how we build the file tree in the code view. Then, navigating between each story would render the story's isolated iframe in the center of the screen.

Additional Considerations

This doesn't have to be Storybook-only, I'm sure this could work in a similar fashion with Histoire/Ladle as well, if they have similar constructs we could use. Both also use Stories as the terminology, so that would be compatible.
We could also use something more generic, like a new "component-explorer" field in package.json/.npmxconfig or similar. The reason I have proposed the "storybook"-field is because that is something that exists today and already have use, so it would work from day-1 and it speaks in to npmx's general idea of being backwards compatible.

[danielroe]

we already have a 'playground' tab in the sidebar and I think including this here or in a similar tab would be perfect ....

[sacrosanctic]

Sounds interesting, will give it a go.

[JReinhold]

Ah yes that makes sense @danielroe !
When you say "similar tab", do you mean another entry under "try it out" or a new section below like "see stories" or something? I can see arguments for both.