Storybook

Storybookのアドオンパネルが表示されない場合の対応

Storybookを使っていると、アドオンパネルが開かなくなった。 Controlsでプロパティの変更ができず、ハマったので対応方法をメモ。 環境 Storybook 6.5.13 for React。 問題 StorybookをGoogle Chromeで開き、 Show addons 状態にしても、アドオンパネルが表…

Storybookにアイコンでのロケール変更機能を追加する

React + Next.js で、多言語対応したアプリケーションを開発している。 日本語から、英語などのラテン文字で記述する言語に切り替えた場合、文字が長くなり、レイアウトが崩れることがあるため、各言語でのレイアウトを簡潔に確認したい。 アプリケーション…

StorybookのDecoratorの引数を、TypeScriptで型定義する

Storybookのストーリーファイルをtsxで記述しているが、TypeScriptをstrictモードにしているため、Decoratorを定義する際、引数に型を付けないとエラーになる。 // パラメーター 'Story' の型は暗黙的に 'any' になります。 const decorator = Story => ( <div style={{ maxWidth: '400px' }}> <Story /> </div>…