はじめに
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コンポーネントを使用していた時もデフォルト開くようにしていたので、今回はそのままにした。