🐕
StorybookのPackage Compositionをdisableにしたい
はじめに
CRA × Chakra UI × Storybook という環境でnpm run storybookして画面を確認してみると、何か見慣れないもの出ていることに気が付きました。
現在の開発環境では不要なので消したいと思っていました。
Storybook Composition
↑ の赤枠で出ている部分は、Storybook 6.0 から導入されたStorybook Compositionという機能です。
簡単に説明すると、ある Storybook の中から別の Storybook を参照することができる機能です。
上記 URL のドキュメントを見ると、.storybook/main.jsに下記のように設定すると設定できると書いています。
.storybook/main.js
module.exports={
// your Storybook configuration
refs: {
'design-system': {
title: "Storybook Design System",
url: "https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com"
}
}
}
そこで私は、自分のプロジェクトを確認したが上記のような設定はしていませんでした。
では、どこで Chakra UI の Composition の設定がされているのか。
Package Composition
Composition にはもう一つ種類があり、Package Compositionという機能があります。
こちらは参照先のパッケージのpackage.jsonに設定を書いておくことで、参照元の Storybook に自動的に読み込ませることができます。
今回のプロジェクトで参照している@chakra-ui/reactの package.json を調べてみます。
調査すると、下記のソースを発見。これだ...
package.json
"storybook": {
"title": "Chakra UI",
"url": "https://chakra-ui.netlify.app"
},
上記ドキュメントによると、.storybook/main.jsに設定することで disable にすることができると書いているのでやってみます。
.storybook/main.js
module.exports = {
// 省略
refs: {
'@chakra-ui/react': { disable: true },
},
そして実行！
無事 disable にできました！
Discussion