参考にさせていただいたページ
インストールする
frontendディレクトリで作業をしていきます。
% cd frontend/
インストールします。
% yarn add -D storybook
storybookを初期化
bundlerにwebpack5を指定して初期化してみます。
% yarn storybook init --builder webpack5
以下のような質問が表示されました。eslintPluginを使うのでyを選択しました。
? Do you want to run the 'eslintPlugin' migration on your project? › (y/N)
storybook initによって変更されたファイルなどの確認
.eslintrc.jsに以下の+行が追記されました。prettierが一番下になるように手で並べ替えています。
extends: [
'airbnb',
'plugin:@typescript-eslint/recommended',
'next/core-web-vitals',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'next/babel',
+ 'plugin:storybook/recommended',
'prettier',
],
package.jsonのscriptsに以下の+行が追記されました。
"scripts": {
"dev": "next dev -p 3001",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --watch",
"test:ci": "jest --ci",
+ "storybook": "start-storybook -p 6006",
+ "build-storybook": "build-storybook",
"preinstall": "typesync || :"
},
package.jsonのdevDependenciesに以下の+行が追記されました。たぶん @types/babel__core はstorybook initではなくtypesyncが自動実行されたことによる変更です。
"devDependencies": {
+ "@babel/core": "^7.18.9",
+ "@storybook/addon-actions": "^6.5.9",
+ "@storybook/addon-essentials": "^6.5.9",
+ "@storybook/addon-interactions": "^6.5.9",
+ "@storybook/addon-links": "^6.5.9",
+ "@storybook/builder-webpack5": "^6.5.9",
+ "@storybook/manager-webpack5": "^6.5.9",
+ "@storybook/react": "^6.5.9",
+ "@storybook/testing-library": "^0.0.13",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.3.0",
+ "@types/babel__core": "^7.1.19",
"@types/eslint": "8.4.5",
"@types/node": "18.0.3",
"@types/prettier": "^2.6.3",
"@types/react": "18.0.15",
"@types/react-dom": "18.0.6",
"@types/testing-library__jest-dom": "^5.14.5",
"@typescript-eslint/eslint-plugin": "^5.30.7",
+ "babel-loader": "^8.2.5",
"eslint": "8.19.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "12.2.1",
"eslint-config-prettier": "^8.5.0",
+ "eslint-plugin-storybook": "^0.6.1",
"jest": "^28.1.3",
"jest-environment-jsdom": "^28.1.3",
"prettier": "^2.7.1",
"storybook": "^6.5.9",
"stylelint": "^14.9.1",
"stylelint-config-recess-order": "^3.0.0",
"stylelint-config-standard": "^26.0.0",
"stylelint-order": "^5.0.0",
"typescript": "4.7.4",
"typesync": "^0.9.2"
}
当然のことながらyarn.lockも変更されていますが割愛します。
.storybook/* と src/stories/* が自動生成されています。
storybookを実行してみる
% yarn storybook
自動でブラウザが起動して、「http://localhost:6006/?path=/story/example-introduction--page」を開き、以下のような画面が表示されます。
画面の左側にあるメニューから、storybook initによって自動生成されたサンプルのコンポーネントが確認できます。
.storybookディレクトリの中身の確認
以下の2ファイルが生成されています。
- main.js
- preview.js
これらはstorybookの設定ファイルです。
公式ページを確認すると良いでしょう。
Configure Storybook
