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

December 06, 2021

Atomic Design な設計のプロジェクトで Storybook を使う際に、地味に自分にとってフラストレーションになっていたことがあります。それは Storybook サイドバーの Templates と Pages 階層の順番が反対になってしまうことです。（Atomic Design 的には Atoms→Molecules→Organisms→Templates→Pages になってほしい）

地味なフラストレーションくらいだったので、そのために何かをするということはやってませんでしたが、Storybook に Atomic Design の階層以外に Foundations とか Utils などを入れようとすると可視性がかなり悪くなるのでちょっとだけ調べたら簡単に解決できました。

.storybook/preview.js に以下の設定を入れてあげることで並び順を好きに入れ替えることができます。

// .storybook/preview.js
export const parameters = {
  options: {
    storySort: {
      order: ['Atoms', 'Molecules', 'Organisms', 'Templates', 'Pages'],
    },
  },
}

Foundations とか Utils を入れたい場合はこんな感じ ↓

export const parameters = {
  options: {
    storySort: {
      order: ['Foundations', 'Atoms', 'Molecules', 'Organisms', 'Templates', 'Pages', 'Utils'],
    },
  },
}

めっちゃ簡単でした。 Storybook の古いバージョンではこの設定の書き方を変えるか、もしくはそもそも storySort Option が使えないかもしれないのでご注意ください。（v6 であれば間違いなく使えます）

参考

Naming components and hierarchy