Storybook and monorepo

[afoures]

Hi, I want to use Storybook in a monorepo, is there a recommended way of using it in a monorepo ?
Given that not all packages in the monorepo need a storybook.
Thanks

[shilman]

you can install it in each of the packages you want a storybook for, and then use Composition to combine those storybooks into one. you could also install it at the root of the monorepo and use the stories glob in .storybook/main.js to suck in all the stories you need.

[emadbaqeri]

Hi @shilman,
Can you please provide a working link to the composition topic?

[vilkinsons]

@emadbaqeri https://storybook.js.org/docs/react/sharing/storybook-composition

[lostdesign]

I am currently setting up a monorepo with Lerna containing multiple storybooks. The repo is private though, but I may be able to setup a public example soon.

But have some thoughts/insights:

• With lerna you can install global and local dependencies, e.g. just one package that's storybook
• The stories can be loaded from anywhere or kept inside that book, loading components from some package folder. I'd say that's a matter of preference and your actual goal
• We currently run multiple storybooks for each team, they all build and export their own components with a custom build pipeline
• All sub-storybooks are grouped in a global dummy storybook which doesn't contain anything but the refs to the other sb's
• There is a core package which contains all reusable/team unspecific components
• All components can be important independently from packages, we don't publish components as a single package - they are part of a bundle

[SebasG22]

Another way to setup storybooks that I highly recommend it in a monorepo is using Nrwl Nx.
There is a big community and they have fully support for storybooks and cypress.
https://blog.nrwl.io/ui-testing-with-storybook-and-nx-4b86975224c

[dvh91]

Just adding my two cents from my experience with storybook in a monorepo in the root vs as-a-package and got to say that a dedicated package for the docs which has the other packages in the monorepo as dependencies made more sense to me as I didn't need to install vast dependencies in the root packages just for the sake of the storybook.

Not sure if composition will be the right solution for monorepo as we have access to stories code in the monorepo already so I don't see much value in this.

[airtonix]

if you're using nx or lerna, then you'll be able to only rebuild the things that changed.

Assume you've chosen one single storybook that globs in all the monorepos pkg/**/*.stories.tsx, then as your monorepo grows so too will the PR checks and build times. if 10 minutes os too long in your world, then this won't be a viable path and it's hard to get out of long term due to having to justify the time you need to spend retooling in the middle of a feature sprint.

if instead you have a storybook per package and use composition, then you can lean on nx affected to only build the storybook(s) of the packages that nx affected reports.