Storybookでサイドバーのラベルにタグを付ける

2024-09-19

Tech

Storybook

Storybook で次のような表示が出来るようにする。

alt text

tags からラベルにタグを付ける#

各 Story で tags に特定のタグが含まれていればラベルにタグを表示するようにする。

次の例では、deprecatedというタグが含まれていれば、非推奨を表すタグを表示するようにしている。

1
import { addons } from "@storybook/manager-api";
2
import startCase from "lodash/startCase.js";
3
import Tag from "../your-components/tag";
4

5
addons.setConfig({
6
  sidebar: {
7
    renderLabel: (item, api) => {
8
      // item.typeがrootの場合、apiはundefined
9
      const data = api?.getCurrentStoryData()
10
      if (item.depth === 1) {
11
        return(
12
            <span>
13
                {startCase(item.name)}
14
                {data?.tags.includes("deprecated") && (
15
                    <Tag variant="warning">Deprecated</Tag>
16
                )}
17
            </span>
18
        );
19
      }
20
      return  startCase(item.name)
21
    }
22
});

この例では、item.depthを見ることで一階層目にのみタグが付くようにしている。これを行わない場合、tags は継承されていくため、そのラベル以下の階層全てのラベルに同じタグが付いてしまう。

tags の付与方法#

tags は、次のように指定することが出来る。

1
// ...
2
export default {
3
  title: "Layout/Grid",
4
  component: Grid,
5
  tags: ["deprecated"],
6
} satisfies Meta<typeof Grid>;
7
// ...

注意点#

この方法は、とてもタグと tags が紐づいており、とても素直な実装に思えるかもしれないが、次のことに注意が必要。

タグが被ると意図しない副作用が発生する。
- tags には、暗黙的にdev/test/autodocs/play-fnなど Storybook から様々なタグが自動的に付与される。
- これらを Storybook やその Addon が見ているため、副作用が起こりえる。
タグの取得に利用している api を使うことが想定されていないように思える。
- api の型が any になっている。
- ドキュメントにもほぼ言及がない。

Stories ファイルのタイトル名からタグを付ける#

tagsやapiの利用が不安であれば、タイトルの文字列をパースするくらいしか方法が残されていないように思う。

次のようにタイトルへタグを付ける。

1
// ...
2
export default {
3
  title: "Layout/Grid#Deprecated",
4
  component: Grid,
5
} satisfies Meta<typeof Grid>;
6
// ...

次のようにしてタイトルをパースして利用する。

1
import { addons } from "@storybook/manager-api";
2
import startCase from "lodash/startCase.js";
3
import Tag from "../your-components/tag";
4

5
addons.setConfig({
6
  sidebar: {
7
    renderLabel: (item) => {
8
        if (item.depth === 1) {
9
            if (item.name.endsWith("#Deprecated")){
10
                const name = item.name.replace("#Deprecated", "");
11
                return(
12
                    <span>
13
                        {startCase(name)}
14
                        <Tag variant="warning">Deprecated</Tag>
15
                    </span>
16
                );
17
            }
18
        }
19
        return  startCase(item.name)
20
    }
21
});