Turborepo で Storybook を使用する

Storybook (新しいタブで開きます) は、隔離された環境で UI コンポーネントを構築するための人気の高い方法です。Storybook を Turborepo に組み込むことで、アプリケーションと並行してデザインシステムを簡単に開発できます。テンプレートを使用したい場合は、このガイドでは Vercel でこの Storybook/Turborepo テンプレート (新しいタブで開きます)を構築する方法について説明します。

ガイド

このガイドでは、以下の方法を説明します。

1. モノレポで Storybook を設定する
2. 最初のストーリーを作成する
3. Storybook が他のタスクと連携するようにする

1. モノレポを作成する

既存のプロジェクトがない場合は、クイックスタートを使用して新しいモノレポを作成します。

npx create-turbo@latest

2. 新しい workshop アプリを追加する

Storybook は使用するビルダが必要なので、Vite アプリを作成します。

cd apps
npm create vite

プロンプトに従って、「workshop」という名前のアプリを React、TypeScript アプリとして作成します。

次に、Storybook のスキャフォールディングを行う必要があります

cd workshop
npx sb init --skip-install
npm install --save-dev @storybook/cli   # Manually install deps and CLI

3. Button コンポーネントのストーリーを設定する

Storybook のスキャフォールディングでは、/src/stories ディレクトリにいくつかのストーリーと React コンポーネントが作成されます。ui パッケージのボタンのストーリーを作成するには、Button.stories.tsx のインポートを独自のものに置き換えます。

1. ui パッケージの Button を、ストーリーの仕様と一致するように更新します。

interface Props {
  primary?: boolean;
  size?: "small" | "large";
  label?: string;
}
 
export const Button = ({
  primary = false,
  label = "Boop",
  size = "small",
}: Props) => {
  return (
    <button
      style={{
        backgroundColor: primary ? "red" : "blue",
        fontSize: size === "large" ? "24px" : "14px",
      }}
    >
      {label}
    </button>
  );
};

2. ui パッケージを workshop アプリに追加します

{
  // ...
  {
    "dependencies": {
      "ui": "*",
      // ...
    }
  }
}

3. Button.stories.tsx の Button インポートを、ui パッケージからのものになるように置き換えます

import { Button } from 'ui'

4. タスクを調整する

最後に行う必要があるのは、Storybook が他のタスクと連携していることを確認することです

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

ビルドキャッシュを確実に使用するためには、まずstorybook-staticを.gitignoreに追加する必要があります。次に、storybook-staticをturbo.jsonのビルドタスクの出力に追加します。

{
  "pipeline": {
    "build": {
      "outputs": [
        "dist/**",
+       "storybook-static/**"
      ]
    }
  }
}

devタスクとbuildタスクには、Storybookが含まれるようになります。これにより、アプリケーションと並行してStorybookを開発し、他のアプリケーションと同様にキャッシュされたビルドを利用できます。

Vercelにデプロイする

Storybookプロジェクトをデプロイしましょう。

プロジェクト設定の「一般」タブにある「ビルドと開発の設定」で、「出力ディレクトリ」をstorybook-staticに変更します。