【Storybook】viewportアドオンの選択肢を増やす

viewportアドオンはiframeで表示しているcanvasのviewportを変更するアドオンで、Essentials addons を有効化にしていれば利用できる

storybook.js.org

ただ、初期設定だと選べるデバイスがSmall Mobile、Large Mobile、Tableの３つで少ない

そこで、iPhoneSEやiPhoneXなどの粒度で選択できるようにしたい

やり方は同アドオンのINITIAL_VIEWPORTSを使う

// .storybook/preview.js

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
};

このように設定すれば、たくさんの種類のデバイスから選択することができるようになる

初期設定

初期表示の時にviewportを指定したい場合はdefaultViewportを使う

export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
    defaultViewport: 'iphone6'
  },
};

これで、初期表示から'iphone6'のviewportになる

もし、初期表示から'iphone6'のストーリーのあと、別のデスクトップviewportのストーリーを表示させたい場合は、そのストーリーではdefaultViewを消せばよい

どうすればデスクトップviewportになるのか試行錯誤して、defaultView: 'responsive'とかdefaultView: 'reset'とかdefaultView: ''などを試したがいずれもダメだった（一応指定しない状態になるが警告が出る）

参考

https://zenn.dev/sa2knight/books/aca5d5e021dd10262bb9/viewer/bad1b3