Storybook Setup in Mono-Repo: Single or Multiple storybooks? V7

[Rikard-Johansson97]

Im working on a mono-repo with two apps (app-one, app-two) and a shared UI package. All use Storybook.

Is it better to have a .storybook in each app or a single shared storybook in root? I want to be able to have the two apps so they don't depend on each other, allowing me to report coverage separately (e.g., for ui and app-one).

• Current Structure:

  apps/
    app-one/
      .storybook
    app-two/
      .storybook
  packages/
    ui/
      .storybook
  

• Options:

1. Separate .storybook in each app.
2. One shared Storybook config in the UI package or root.

Looking for advice on best practices and efficiency.

[anthonyshew]

Storybook guide: https://turbo.build/repo/docs/guides/tools/storybook

The only thing I'll discourage is that you do not want to create a Storybook in a UI package. That would make it such that there wouldn't be a clean boundary between your Application Package and Library Package. More here: https://turbo.build/repo/docs/core-concepts/package-types

[azertyalex]

What if you're developing a component library in a normal repo?

[clement91190]

Personally, i prefer considering storybook as small apps that live close to the package. So, i have a storybook-config package ( like you could have your tsconfig package) in my monorepo ( with my default config basically) and i have a light .storybook/ in each of the package where i want stories.
main.ts :

import type { StorybookConfig } from "@storybook/react-vite";
import baseConfig from "storybook-config/src/StorybookConfig.ts";
const config: StorybookConfig = {
  ...baseConfig,
  stories: ["../__stories__/**/*.stories.@(js|jsx|ts|tsx)"], // Override stories path for this package
};

export default config;

and preview.ts

import "../src/styles/globals.css";
export { decorators, parameters, globalTypes } from "storybook-config"

// Add type for Storybook channel
declare global {
  interface Window {
    __STORYBOOK_ADDONS_CHANNEL__?: {
      on: (event: string, callback: (data: any) => void) => void;
    };
  }
}

I find that useful for a dev experience where i want to focus on only one package.