Storybookでコンポーネントをフォルダ分けする

はじめに

ChakraUIを使っていたら、このようにフォルダ分けされおり、再現したいと思いました。
しかし、Googleで「Storybook フォルダ分け」で調べても出てこなかったので手法を記します。

手法を探す

恐らくStorybookのドキュメントにもあるものだと思いますが、ChakraUIのコードから参照してみたところ、このような記述が見つかりました。

実際のコード

bar-chart.stories.tsx

import { Box } from "../src"

export default {
  title: "WIP / Bar Chart",
  decorators: [
    (Story: any) => (
      <Box p="10">
        <Story />
      </Box>
    ),
  ],
}

どうやらtitleに<フォルダ名> / <コンポーネント名>にすれば良さそうだということがわかりました。

実装してみる

Component.stories.tsx

export default {
+  title: "Folder1 / Component1",
  component: Component1,
} satisfies Meta<T>;

できました🎉　とてもシンプルでしたね。