🦔
Storybook サイドバーの並び順を Atomic Design の階層と同じにするための Storybook Tips
Atomic Design な設計のプロジェクトで Storybook を使う際に、地味に自分にとってフラストレーションになっていたことがあります。それは Storybook サイドバーの Templates
と Pages
階層の順番が反対になってしまうことです。(Atomic Design 的には Atoms
→Molecules
→Organisms
→Templates
→Pages
になってほしい)
地味なフラストレーションくらいだったので、そのために何かをするということはやってませんでしたが、Storybook に Atomic Design の階層以外に Foundations
とか Utils
などを入れようとすると可視性がかなり悪くなるのでちょっとだけ調べたら簡単に解決できました。
.storybook/preview.js
に以下の設定を入れてあげることで並び順を好きに入れ替えることができます。
.storybook/preview.js
const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
options: {
storySort: {
order: ['Atoms', 'Molecules', 'Organisms', 'Templates', 'Pages'],
},
},
},
};
Foundations
とか Utils
を入れたい場合はこんな感じ ↓
.storybook/preview.js
const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
options: {
storySort: {
order: ['Foundations', 'Atoms', 'Molecules', 'Organisms', 'Templates', 'Pages', 'Utils'],
},
},
},
};
めっちゃ簡単でした。
Storybook の古いバージョンではこの設定の書き方を変えるか、もしくはそもそも storySort
Option が使えないかもしれないのでご注意ください。
(v6
以降であれば間違いなく使えます)
Discussion