🦔

Storybook サイドバーの並び順を Atomic Design の階層と同じにするための Storybook Tips

に公開
Storybook
frontend
tech

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