Zenn
📖

Storybook で個別の story に日本語のタイトルをつける方法

2022/01/29に公開
Storybook
tech

MyComponent.stories.js 中で named export 形式のオブジェクトとして表現される story は export されるオブジェクトの変数名がそのまま story 名としてカタログ中に表示されます。

そのため、以下のようなコードがあった時

import MyComponent from "./MyComponent"

export default {
  title: 'MyComponent', 
  component: MyComponent,
};

export const Default = () => ({
  // ...
});
Default.args = {}

Storybook のカタログ中では以下のように表示されます。

MyComponent
 Default

この時 storyName フィールドを使用することで、カタログ中に日本語名の story を表示させることが出来るようになります。

// 省略

export const Default = () => ({
  // ...
});
Default.storyName = "デフォルト"
Default.args = {}

MyComponent
 デフォルト

参考URL

Discussion