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

December 06, 2021

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

地味なフラストレーションくらいだったので、そのために何かをするということはやってませんでしたが、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 であれば間違いなく使えます)

参考


Profile picture

Johnny Okafuji
フロントエンドエンジニア / ビートルズバンド Crescendo Four のジョン・レノン担当。/ Love Darts🎯 / 独学でコーチング勉強中 / コーチング関係の記事は note に書いてます。
Twitter: @johnykei
note: https://note.com/johnykei

© 2021 All rights reserved.