Storybookのaddon-viewportの最小幅を変更する

@storybook/addon-viewport

Storybookでは @storybook/addon-viewport を導入すれば、コンポーネントの表示をレスポンシブに確認することができます。

このアドオンはデフォルトでは、Small mobile Large mobile Tabletの3つのViewportを提供しています。

https://storybook.js.org/addons/@storybook/addon-viewport

デザイン要件と画面の最小幅

Small mobileはデフォルトでは320x568のサイズで定義されています。これはiPhone8や初代iPhoneSEなど昔の端末の画面サイズになっており、デザイン要件として最小の画面サイズをこれより大きくしている場合にデザイン要件と確認する画面サイズに差異が出てしまいます。

そこで、Small mobileをiPhoneSE3などの375x667に変更するようにします。

Viewportの変更

Small mobileなどのViewportサイズの一覧は MINIMAL_VIEWPORTSとして定数定義されており、デフォルトではこの定数が適用されています。

Viewportの一覧は.storybook/preview.tsから設定ができるので、このMINIMAL_VIEWPORTSの定数の値を上書きする設定を書いてあげることで、最小幅を変更することができます。

import type { Preview } from '@storybook/react';
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
    },
    viewport: {
      viewports: {
        ...MINIMAL_VIEWPORTS,
	// Small mobileの定義を上書き
        mobile1: {
          name: 'Small mobile',
          styles: { width: '375px', height: '667px' },
        },
      },
    },
  },
};

export default preview;

https://storybook.js.org/docs/essentials/viewport