Storybookを7系の最新安定版に更新

[keitakn]

issueURL

https://github.com/nekochans/lgtm-cat-frontend/issues/255

関連 URL

なし

Done の定義

• https://github.com/nekochans/lgtm-cat-frontend/issues/255 のDoneの定義を満たす実装は全てこのPR内で実装されている事

Storybook の URL もしくはスクリーンショット

https://622b6c5dc31e9e003a111eb5-slszbkrbvg.chromatic.com/

変更点概要

Storybookを 7.2.3 にアップグレード

最新安定版である 7.2.3 にアップグレード。

公式からは upgrade コマンドが用意されているが、Storybook側のTemplateも変わっていると思うので以下の手順で新規作成したプロジェクトを元にしてStorybookを入れ直した。

1. 新規でNext.jsのプロジェクトを作成して npx storybook@latest init を実行。

2. 以下で関連packageを削除

npm uninstall -D @storybook/addon-a11y @storybook/addon-actions @storybook/addon-essentials @storybook/addon-interactions @storybook/addon-links @storybook/builder-webpack5 @storybook/manager-webpack5 @storybook/react @storybook/testing-library storybook-addon-next

3. 1で作成したプロジェクトを参考に必要なpackageを追加

npm install -D storybook @storybook/addon-essentials @storybook/addon-interactions @storybook/addon-links @storybook/addon-onboarding @storybook/blocks @storybook/nextjs @storybook/react @storybook/testing-library

4. 設定ファイル、npm script等を新しいプロジェクトから移植

TypeScriptのバージョンを最新安定版の 5.1.6 にアップグレード

Storybookの6系が未対応のTypeScriptの5系に未対応だった為、4系を利用していたが今回の対応でアップグレード出来るようになったので対応。

不要なpackageを削除

webpack やPostCSSの不要なPluginが残っていたので削除した。

レビュアーに重点的にチェックして欲しい点

特になし

補足情報

特になし

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lgtm-cat-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 13, 2023 8:27am

[codecov[bot]]

Codecov Report

Patch and project coverage have no change.

Comparison is base (b08b6bf) 74.22% compared to head (dbb3148) 74.22%.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #256 +/- ## ======================================= Coverage 74.22% 74.22% ======================================= Files 48 48 Lines 454 454 Branches 113 113 ======================================= Hits 337 337 Misses 113 113 Partials 4 4 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.