Yamada UIのStorybookをv8にアップデートする
Summary
koralleです。2024年の1月からYamada UIのコアメンバーをやっています。
今回はYamada UIのStorybookをv8にアップデートしたので、その作業の流れについてまとめておきます。
Yamada UIとは何か？
Yamada Hirotomo氏が制作したReactのUIコンポーネントライブラリです。
詳しい説明は本人が記事にしていますのでそちらをご覧ください。
環境情報
| 項番 | 名前 | バージョン |
|---|---|---|
| 1 | macOS | 14.4 |
| 2 | Node.js | 20.11.0 |
| 3 | pnpm | 8.15.1 |
| 4 | @yamada-ui/react |
1.2.11 |
| 5 | Storybook | 7.6.17 |
Storybook v8での変更点
ここに記載がありますが、ざっくり日本語に翻訳します。
パフォーマンス、互換性、安定性の向上に重点を置いているとのことです。
- Visual Testsアドオンによる新しいビジュアルテストワークフロー
- テストビルドの2-4倍高速化、React
docgenの25-50%高速化、WebpackプロジェクトのSWCサポート - フレームワークのサポートの改善
- ReactおよびVueプロジェクトにおけるcontrol生成の強化
- Viteアーキテクチャ、Vitestによるテスト、Vite 5サポートの強化
- React Server Components（RSC）のサポート
- デスクトップUIとモバイルUXの刷新
アップデート作業
Storybookのアップデート
Automatic upgradeに記載されているコマンドを実行します。
pnpm dlx storybook@latest upgrade
アップデートはいくつかのステップに分かれており、毎ステップでYes/Noの選択が求められます。
一旦、全てYesを選択して進めます。
途中で'mdx-to-csf' migrationのステップに辿り着きます。
🔎 found a 'mdx-to-csf' migration:
╭ Automigration detected ─────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ We've detected your project has one or more globs in your 'stories' config that matches .stories.mdx files: │
│ "../stories/**/*.stories.@(tsx|mdx)" │
│ │
│ In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx. │
│ Since Storybook 8, we have removed the support of story definition in MDX files entirely. Therefore '.stories.mdx' files │
│ aren't supported anymore. │
│ │
│ Now, since Storybook 8.0, we have removed support for .stories.mdx files. │
│ │
│ We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx. │
│ That would result in the following 'stories' config: │
│ "../stories/**/*.@(mdx|stories.@(tsx))" │
│ │
│ Additionally, we will run the 'mdx-to-csf' codemod for you, which tries to transform '*.stories.mdx' files to │
│ '*.stories.js' and '*.mdx' files. │
│ │
│ To learn more about this change, see: https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'mdx-to-csf' migration on your project?
ここでYesを選択します。
次に以下の確認メッセージが表示されます。
✔ Please enter the glob for your MDX stories
ここではYes/Noの選択ではなく、MDX形式のStoryにマッチするglobパターンの入力が求められます。
結論だけ言うとYamada UIでは./stories/**/*.stories.mdxを入力します。
'mdx-to-csf' migrationステップが完了して次のステップに進むので、ひたすらYesを選択して進めます。
全てのステップが完了すると以下のメッセージが表示されます。どうやら成功した様です。
╭ Migration check ran successfully ───────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Successful migrations: │
│ │
│ github-flavored-markdown-mdx, mdx-to-csf, autodocsTrue, wrap-require, upgradeStorybookRelatedDependencies │
│ │
│ ───────────────────────────────────────────────── │
│ │
│ If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate' │
│ │
│ The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to │
│ the latest version of Storybook. │
│ │
│ Please check the changelog and migration guide for manual migrations and more information: │
│ https://storybook.js.org/docs/8.0/migration-guide │
│ And reach out on Discord if you need help: https://discord.gg/storybook │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
Storybookを起動
Storybookを起動してみます。
pnpm storybook
正常に起動できました。
ついでに、元々*.stories.mdxで記述されていたStoryも確認しておきます。
どうやら大丈夫そうです。
まとめ
「Storybook v6からv7へのアップデートは地獄だった」と言う声が当時は各所から聞こえてきましたが、v7からv8へのアップデートは驚くほど簡単に完了できました。
特にハマったポイントも無かったので情報量は少ないですが、参考にして頂けたら幸いです。
おまけ
Yamada UIではOSSコントリビュートしてみたい方のチャレンジをお待ちしています。
因みにYamada UIのコアメンバーはYamada Hirotomo氏含め全員日本人です。
そのためDiscordサーバーでは日本語で会話しています（英語のチャンネルも最近できました）。
「英語が分からなくてOSS活動に踏み出せない...」という方の最初の一歩にしてみませんか。
良ければDiscordだけでも覗いてみてください。
Discussion