【storybook8】docsやcontrolでpropsのargTypesが自動設定されない解決【vue】

2024-03-12 (Tue)

つい先程、storybook8が公開されましたね。

7のときからargTypesが自動的に設定されない不具合がありましたが、8になってどうなったでしょうか……

vueではargTypesが自動的に設定されない不具合がある

storybookには.vueファイルのpropsから自動的にargTypesを生成して、ユニオン型などはラジオボタンやセレクトボタンなど、各型に沿ったコントロールをdocsやcontrolsで表示してくれる便利機能があるのですが、7系の時代からなぜかそれがうまく機能せず、set objectみたいな感じになってしまう現象が続いていました。

ストーリー事にargTypesを明示的に記載すればコントロールを切り替えることは可能なのですが、正直めんどくさい。

この不具合は、どうやらvueの静的解析を行っているvue-docgen-apiが原因っぽい事が書いてあったissueは以前見つけたのですが、それが解決される前にstorybookの8系が公開されたので、どうなったのか確認してみようとおもいます。

でこちらがstorybook8にアップグレードした状態のdocsです。

どうやら無事直っているっぽい？　と安心したのですが、別のコンポーネントを見てみると7のとき同様にコントロールが正常に自動生成されていないものも多数見つかりました……（なんでやねん）

解決策

どうやら静的解析ライブラリを変えることができるようなので、.storybook/main.tsの記載を変更します。

// .storybook/main.ts

const config: StorybookConfig = {
-    framework: '@storybook/vue3-vite',
+    framework: {
+        name: '@storybook/vue3-vite',
+        options: {
+            docgen: "vue-component-meta"
+        },
+    },
    // ...etc
}

export default config

静的解析ライブラリをデフォルトのvue-docgen-apiからvue-component-metaに変更しました。

そうすると無事自動生成されていなかった他のコンポーネントでもコントロールが反映されるようになりました。

これで各ストーリーでargTypesを明示する必要がなくなります。

※7系でも同様にできるかは未確認です。