Storybook

monorepo 만들기

기존 프로젝트가 없는 경우, create-turbo를 사용하여 새 monorepo를 만듭니다:

pnpm dlx create-turbo@latest

앱용 디렉터리 생성

Storybook 애플리케이션용 디렉터리가 필요합니다:

mkdir apps/storybook
cd apps/storybook

Storybook 애플리케이션 추가

apps/storybook 디렉터리에서 새 Storybook 애플리케이션을 초기화합니다:

pnpm create storybook@latest

프롬프트에 따라 애플리케이션을 만듭니다. 이 가이드의 나머지 부분에서는 React 및 TypeScript를 사용한다고 가정합니다.

Storybook에 UI 키트 추가

이제 UI 패키지를 Storybook에 설치합니다.

pnpm add @repo/ui --filter=storybook

Button 컴포넌트에 대한 스토리 설정

Storybook 스캐폴딩 도구로 생성된 src/stories에서 스토리 및 컴포넌트를 삭제합니다. 직접 만들 것입니다.

예를 들어, @repo/ui/button의 Button 컴포넌트에 대한 스토리는 다음과 같습니다.

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '@repo/ui/button';
 
const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Primary: Story = {
  args: {
    appName: 'Button',
    children: 'I am a primary button.',
  },
};

작업에 스크립트 정렬

마지막으로, 새 Storybook 애플리케이션을 Turborepo에 통합합니다:

{
  "scripts": {
    "dev": "storybook dev -p 6006",
    "build": "storybook build"
  }
}

이제 이러한 스크립트는 turbo.json의 turbo dev 및 turbo build 작업과 함께 실행됩니다.

build를 실행할 때 파일 출력이 캐시되도록 하려면 turbo.json 빌드 작업의 출력에 storybook-static을 추가합니다:

{
  "tasks": {
    "build": {
      "outputs": [
        ".next/**",
        "!.next/cache/**"
+       "storybook-static/**"
      ]
    }
  }
}

+ storybook-static

Re-configure Storybook sources

In .storybook/main.ts, change the stories paths in config to the directories you'd like to capture. For instance, if you'd like to write stories in the UI package:

 
const config = {
  stories: [
-   "../src/**/*.mdx",
-   "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+   "../../../packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
};

Move story files to the UI package

Following along with the guide above, move the ./apps/storybook/src/stories/Button.stories.tsx file to ./packages/ui/src/Button.stories.tsx.

Update components imports so that they reference the now co-located modules. For instance, in the story's imports:

- import { Button } from "@repo/ui/button";
+ import { Button } from "./button";

You'll also need to install any Storybook packages required for writing stories. For example, moving the story from above would require that you install @storybook/react into your @repo/ui package.

pnpm add @storybook/react --filter=@repo/ui --save-dev

Configure caching

Because stories are now in the UI package, changes to those stories can cause cache misses for any builds that depend on your UI package. However, changing a story doesn't mean your production applications should miss cache.

To prevent this, exclude stories from the inputs to your build task in your root turbo.json. You'll also need to create a build:storybook task, which you'll need in a moment:

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", "!**/*.stories.{tsx,jsx,mdx}"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "build:storybook": {} 
  }
}

Additionally, create a Package Configuration in the storybook application so stories are accounted for in building the Storybook application, specifically:

{
  "extends": ["//"],
  "tasks": {
    "build:storybook": {
      "dependsOn": ["^build:storybook"],
      "outputs": ["storybook-static/**"]
    }
  }
}

Rename the build script

Last, make sure your script to build Storybook uses the configuration we just wrote by renaming it to the name of the task:

{
  "scripts": {
    "dev": "storybook dev -p 6006",
    "build:storybook": "storybook build"
  }
}

The script that was once "build" is now "build:storybook" to ensure the stories are included in hashes for caching.

Verify your configuration

To ensure your setup is correct:

1. Run turbo build:storybook build. You should see cache misses.
2. Run turbo build:storybook build again. You should see all cache hits.
3. Make a code change to a story in your @repo/ui package.
4. Run turbo build:storybook build again. You should only see a cache miss for the Storybook application. All others should hit cache.