Open5
Next.jsにStorybookを導入する
nafuka11公式を参考にインストール。
npx storybook init
package.jsonには以下の変更が加わりました。他の記事を見て、Webpack 4が入るかと思ったら5でした。
package.json
"scripts": {
...
+ "storybook": "start-storybook -p 6006",
+ "build-storybook": "build-storybook"
},
...
"devDependencies": {
+ "@babel/core": "^7.18.13",
+ "@storybook/addon-actions": "^6.5.10",
+ "@storybook/addon-essentials": "^6.5.10",
+ "@storybook/addon-interactions": "^6.5.10",
+ "@storybook/addon-links": "^6.5.10",
+ "@storybook/builder-webpack5": "^6.5.10",
+ "@storybook/manager-webpack5": "^6.5.10",
+ "@storybook/react": "^6.5.10",
+ "@storybook/testing-library": "^0.0.13",
...
+ "babel-loader": "^8.2.5",
...
+ "eslint-plugin-storybook": "^0.6.4",
...
}
storybookを起動してみます。
yarn storybook
以下のDeprecationWarningがTerminalに表示されました。
70% sealing plugins DocGenPluginDeprecationWarning: 'createIdentifier' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: '' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createLiteral' has been deprecated since v4.0.0. Use `factory.createStringLiteral`, `factory.createStringLiteralFromNode`, `factory.createNumericLiteral`, `factory.createBigIntLiteral`, `factory.createTrue`, `factory.createFalse`, or the factory supplied by your transformation context instead.
DeprecationWarning: 'createBinaryExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createPropertyAssignment' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createNull' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createFalse' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createObjectLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTrue' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTypeOfExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createElementAccessExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createIfStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createBlock' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createVariableDeclaration' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createCatchClause' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTryStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createArrayLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
起動自体はできるので、Warningを無視するか、TypeScriptのバージョンを4.7に落とすか、どちらかになりそう。
試しにTypeScriptのバージョンを4.8未満にしたところ、Warningは表示されなくなりました。
package.json
"devDependencies": {
...
- "typescript": "4.8.2"
+ "typescript": "<4.8.0"
}
✔ Do you want to run the 'eslintPlugin' migration on your project? … yes
✅ Adding dependencies: eslint-plugin-storybook
...
❌ error when running eslintPlugin migration:
⚠️ The plugin was successfuly installed but failed to configure.
Found an .eslintrc config file with an unsupported automigration format: json.
Supported formats for automigration are: js, cjs.
Please refer to https://github.com/storybookjs/eslint-plugin-storybook#usage to finish setting up the plugin manually.
.eslintrc.jsonは自動マイグレーションに対応していないとのことで、手動でpluginを追加する。
.eslintrc.json
{
"extends": [
"next/core-web-vitals",
"plugin:storybook/recommended"
]
}
Chromaticも導入した。
Highchartsを使ってたら、グラフのanimationの途中でChromaticのsnapshotが取られてしまった。
Highchartsの設定を見ると、デフォルトのanimation時間が1000msとのこと。
Chromaticのsnapshotを遅らせる設定があるので、それを使うことでanimation終了後にsnapshotを取ることができた。