Storybook 8.1 で追加された story の追加・編集機能が便利すぎた

はじめに

2024/05/23 の深夜に更新された Storybook v8.1 の新機能で、story の作成・編集を storybook の画面上で行う機能が追加されました。

従来は Story の作成を行うためには Editor などで .stories.tsx などを作成する必要がありましたが、今回から Storybook の画面上で作成できるようになりました。

とても便利だったので、今回はその機能について紹介します！

https://storybook.js.org/blog/storybook-8-1/

使い方

新規で Story を作成する

コンポーネントの Story が 1 つも無い場合

右上の + マークを押すと、「Add a new story」というダイアログが出てくるので、対象となるコンポーネントを入力します。

Story を作成したいコンポーネントファイルを選択すると、
Controls の中身が空になっている story が新規で作成されます。

もちろん、ディレクトリを確認すると、コンポーネントと同じディレクトリ内に{{コンポーネント名}}.stories.tsx が作成されます。

---

コンポーネントの Story が 1 つある場合

Story の Controls の編集を行った際、

You modified this story. Do you want to save your changes?

というメニューが画面下部に出てきます。

「Create new story」というボタンを押すと Create new story のダイアログが出てくるので、Story の名前を入力し、Create ボタンを押下することで、Story が作成されます。

作成後は story が 2 つとも存在していることを .stories.tsx ファイルから確認することができます。

export const Default: Story = {
  args: {
    primary: true,
    label: 'Button',
    size: 'medium',
  },
};

export const Red: Story = {
  args: {
    primary: true,
    backgroundColor: '#ff0000',
    size: 'medium',
    label: 'Button',
  },
};

既存の Story を修正する

Story の修正は、前述の「コンポーネントの Story が 1つある場合」とほぼ同じ流れです。
Controls を編集した後の「Update story」 を押すことで、Story の修正が行われます。

もちろん、修正後は .stories.tsx ファイル内のコードに変更が入っていることを確認できます。
※ Story の名前を修正することはできないっぽいです ><

まとめ

今までは Story の作成に手間がかかることが多かったですが、これからは画面をポチポチするだけで Story を作成することができるので、かなり便利になった印象です。
ぜひ皆さんも使ってみていただければと思います！