Storybook で特定の Story で Controls を無効にする

概要

Storybook のアドオンの一種である Controls を使用するストーリーとしないストーリーがある際に、使用しないストーリーでは Controls パネルを使用できないようにする。

モチベーション

粒度の小さいコンポーネントは1ストーリーで複数の props パターンをレンダリングすることがあり、その場合は Controls が不要になるため。

バージョン

• @storybook/react 6.5.12

対応方法

各ストーリーの parameters フィールドで、 props ごとに Controls を無効化するための exclude オプションが使用できるが、ここで正規表現を用いることができるので、全ての props がマッチするようにする。

export default {
  title: 'SampleComponent',
  component: Component,
  parameters: {
    controls: {
      exclude: /.*/g
    }
  }

こんな感じになる。

参考