はじめに

StorybookのDocsでCanvasコンポーネントを使用して、Storyの内容を表示していた。

1~3個だったら特に気にならなかったが、それ以上多くなると描画が遅く、動作が重くなってしまった。

その事象への対応を行った。

環境

Storybook 8.6.4

対応内容

修正前

Canvasコンポーネントを使用して、Storyを表示していた。
以下はButtonの.storiesファイルからimportし、PrimaryButton StoryをCanvasで表示している例。

import { Canvas } from "@storybook/blocks";


<Canvas of={ButtonStory.PrimaryButton} />

この場合、表示は以下のようになる。

修正後

Storyと、そのコード内容を表示させたい。
そこでCanvasコンポーネントではなく、StoryコンポーネントとSource
コンポーネントを使用した。

import { Story, Source } from "@storybook/blocks";

<Story of={ButtonStory.PrimaryButton} inline={false} height="250px" />
<Source of={Button.PrimaryButton} dark/>

Storyコンポーネントの調整

Storyコンポーネントのinline={false}を指定することで、iframeの中にソースコードを表示できる。
trueの場合は他のドキュメント部分と同じように表示される(下図)。

Canvasと見た目を同じようにしたかったため、今回はfalseにした

またheightを指定しないと、微妙に高さが余計に出てしまうので、Storyの描画内容に応じて調整した。

Sourceコンポーネントの調整

Sourceコンポーネントで、Storyのコードを表示した。
Canvasコンポーネントを使っていた時はダークモードでコードが表示されていたため、
それに合わせてdarkを指定した。
Sourceコンポーネントは、コードの開閉ができない。しかしCanvasコンポーネントを使用していた時もデフォルト開くようにしていたので、今回はそのままにした。

参考

Story
Source