Storybookのアドオンを作る
普通はこれを使えばおk
見ると良い資料
公式アドオンのソースコード
勘所
実行環境は3つある
コンポーネントのトランスパイラやサーバが動くNode.js
StorybookのUIが動くManager
コンポーネントがレンダリングされるPreview
各環境からStorybookのアドオンシステムによって読み込まれるエントリーポイントは以下
Node.js:./preset
.storybook/main.tsに記載する設定のプリセットを提供できる
Manager:./manager
ツールバーやパネルを追加するのはここから
Preview:./preview
.storybook/preview.tsに記載する設定のプリセットを提供できる
共通:.
一般的なnpmパッケージのようにimportするとき
それぞれの環境をまたいでデータをやり取りする方法が提供されているが、いくつか制限がある
Node → Manager, Preview
.storybook/main.tsやpresetのenvで環境変数として渡せる
環境変数なのでStringのみ
Manager ←→ Preview
EventEmitterのようにonとemitでやり取りできる
オブジェクトは受け渡せるが、.storybook/main.tsで明示的に許可しないと関数やDateは渡せない
Channelsをラップして扱いやすくするhookが提供されている
useParameterはManager側からparameterにアクセスすることができるが、前述の制限から、関数は引き渡されず、undefinedになる
Storyの切替や、Storyのリロードなど、Storybook内部で使用されているイベントについてもハンドルできる