各 Story を CSF3.0 で書き直す

[wakamsha]

📝 変更情報

なぜこれをやるのか

現行の Storybook は CSF3.0 を推奨している。Storybook の恩恵を最大化するためにもこれに準拠するのが望ましい。

何を変更したのか

• 各種 story を CSF3.0 に則って書き直した。
• 各種コンポーネントの JSDoc が Storybook の Docs ページに表示されるよう修正した。

技術的にはどこがポイントか

CSF3.0

• default export するオブジェクトには Meta 型を明記する。
• 各 story には StoryObj 型を明記する。
• storyObj には原則として以下のプロパティのみを使用するものとする。
  　　- args
  　　- argTypes
  　　- render
• render に渡す引数は無名関数のため、そのままだと ESLint ルールに抵触してフックが使えない。これを解消するため、 *.stories.tsx においては react-hooks/rules-of-hooks ルールを無効化した。

JSDoc

monorepo 配下にある全パッケージの UI コンポーネントを1つの Storybook に集約しようとすると、各 UI コンポーネントの JSDoc が適切に読み込まれず Docs ページに表示されない。これを解消するため、 .storybook/main.js に以下の設定を追加した。

module.exports = {
  // ...
  typescript: {
    reactDocgenTypescriptOptions: {
      include: ['../../../**/*.tsx'],
    },
  },
};

これにより現状の monorepo 構成であっても JSDoc が Storybook にて適切に表示されるようになる。

どこまで動作確認したか

備考

🏛️ 参考文献

• [Bug]: pnpm + vite Mono-Repository Test Rig — Cases of No JSDocs, No new file HMR, Recursion, Breaking · Issue #21399 · storybookjs/storybook

🚧 TODO リスト / 未完了タスク

📸 スクリーンショットや Movie ( 画面遷移、導線変更など ) 🎥

Before	After