Storybookでのコンポーネントの表示順は基本的にはアルファベット順になります。
ただ、h2やh3をそれぞれコンポーネントで作成した場合は、タグのレベル順に並び替えた方がわかりやすいと思います。
公式書き方を参考にしましたが、少しハマったのでメモとして残します！
並び順が変わらないのはtitleを指定がなかったことだった…
いくつか考えられる理由はあるのですが、一番先に確認してもらいたいのはstoriesファイルにtitleを指定しているかです。
私の書いていたコードは指定せずにお任せ状態でしたのでtitleを追加したところ表示順が変わりました！
const meta = {
+ title: 'Components/Heading/SecondaryHeading',
component: SecondaryHeading,
argTypes: {
children: { control: 'text' },
},
} satisfies Meta<typeof SecondaryHeading>
preview.jsには下記のように追加します。
const preview = {
...,
parameters: {
+ options: {
+ storySort: {
+ order: [
+ [
+ 'Heading',
+ ['SecondaryHeading', '＊', '＊'],
+ ],
+ ],
+ },
+ },
},
}
Headingの一つ下の階層に並び替えをかけたいのでHeading全体を[]で囲んで指定します。
その他並び順が変わらない原因
私は最初に下記の点を疑いました。
- 正しい設定ファイル（.storybook/preview.js）に記述されているか
- ストーリー名が不一致になっていないか（小文字と大文字は区別されます）
- Storybookのバージョンは大丈夫か
- 古いキャッシュが残っていないか
Storybookのバージョンは公式サイト左上あたりにあるバージョン選択する箇所から対応のバージョンのリファレンスを確認できます。
Storybookのキャッシュが古い設定を保持している場合があるようです。
Storybookを再起動するか、node_modules/.cache ディレクトリを削除してから再試行すれば良いみたいです。
まとめ
titleを明示的に指定しなくてもディレクトリ構造でよしなにStorybookは表示してくれます。
それに甘えていた結果今回ハマってしまいました…。
並び替えたいコンポーネントだけ指定することでも並び替えは可能ですが、コード全体の一貫性がなくなるので全てのstoriesファイルにtitleを指定しておくのが良いと考えます。
また、3階層目を並び替えたい場合は拡張機能を利用する必要がありそうです。