Can I import stories from another project?

[wagedomain]

Hello! Thanks for reading this.

I know composition exists, but in our original investigation it does almost what we need but falls short. Our setup is a bit strange, we have a 3-tier set of projects. We have: Base Components -> Themed Components -> Applications.

All of these pieces are in different repos. The Base Components are sometimes passed through to the Application as-is, with just a different skin applied, so the set of components in each library is not a 1:1. Something can be in the middle tier that doesn't exist in Base as well.

What we want to do is: create a storybook instance in the middle tier (themed components) that includes the base components and their stories in a single storybook instance.

Composition didn't work for two reasons: the first is the theme from the Base project was used for the Base Components. We want the middle tier's theme to override this. The second reason is versioning - we have many versions of Base and the middle tier is not guaranteed to be on latest. For this reason, URL-based composition becomes tricky.

What we were hoping for: We want to be able to import the stories from node_modules of the installed package, using a glob or something similar.

However, when we tried this, we discovered that any kind of bundling made this impossible, and removing the stories from the bundle also seems to break since it's looking for components.

[shilman]

If the components in node_modules are already bundled in CJS, shouldn't it be possible to include those stories? I'm pretty sure we used to do this successfully with Storybook's design system before we introduced composition.

As for theming, we've discussed the idea of making it possible to theme composed storybooks. If this were implemented, would you be willing to work around the other limitations you listed, e.g. by publishing versioned storybooks? cc @tooppaaa @oliviertassinari @itsderek23

[shilman]

our composition approach has a bunch of advantages over importing from node_modules:

• building/loading speed
• distribution size
• cross-framework compatibility
• access control

that said, importing from node_modules should also work in most cases

[wagedomain]

Yes, I think if we had theming in composition we would be willing to test it out. In the multi-client design system approach we have with a single centralized storybook consumed by different themes, some degree of that consumer-level control would be amazing. For example if the consumer's storybook preview.js file could override the parent.

(We're using StyledComponents and wrapping our stories with ThemeProvider in a decorator, as per the Storybook example, so the preview.js of the consumer would have a different theme passed into the ThemeProvider).

We actually did get the import-from-node-modules approach working as well. Turns out we were running into a styled-components bug where it wasn't deduping the dependency so there were multiple instances in storybook, which is not supported. Once we got past that hurdle, we discovered that since we're using a monorepo, we were referencing our actual components via relative path in the story, making it inherently not portable.

In the end we moved the stories to a new package, changed the Component imports to use the package name, fixed the multiple-styled-components issue, and added the new package to one of our consumer applications, and the import worked just as expected, with theming.

Personally, I'm less concerned with build time and distribution size than I am customization and control options.

[shilman]

Thanks so much for the clarification. I'm glad you got the node_modules support sorted out. If/when we tackle theming in composed Storybook's I'd definitely love your input to make sure we get it right.

[wagedomain]

Absolutely, I'd love to help out however I can.

We ran into a few gotchas with node_modules, in particular the problem of how to make them truly portable. Our stories sit with our components, and so they reference the React components via relative imports, which makes total sense, but prevents them being truly portable.

I also noticed there's an Issue open for documentation that me and my team may contribute too. We're using Storybook heavily, and have difficulties finding docs. Almost everything is in fact documented, which is great, but most of the time we only find the relevant information by accident, or via another route like linked in an Issue or from another repo.

[shilman]

PRs very welcome, for both code and docs!! 🙏🙏🙏