Storybook で Story ごとに viewport をカスタマイズ

Backgrounds

• Storybook を活用しているが、モバイル用のデザインもデフォルトではレスポンシブな表示形式になるため確認が手間
• プロダクト特性上、PC/Mobile 双方に対応したい

Conclusion

@storybook/addon-viewport を導入し、ストーリーごとに viewport を任意のものに設定できるようにした

How To

• .storybook/preview.js を以下を追加

  import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
  export const parameters = {
    viewport: {
      viewports: INITIAL_VIEWPORTS,
      defaultViewport: 'responsive'
    },
  }
  

  • INITIAL_VIEWPORTS を設定することでメジャーどころのモバイル端末を指定できるようになる
  • defaultViewport は設定しない場合は resopnsive になる

• 上記の設定が終われば、あとはストーリー側で設定するだけ

• 上記までの時点で viewport に端末を指定できるようになる

• デフォルトで viewport を指定しておきたい場合には以下のように Story 側で使いたい viewport を指定する

  export default {
    component: SampleComponent,
    title: 'SampleComponent'
  } as ComponentMeta<typeof SampleComponent>
  
  export const Default = {
  	args: { ...略...},
  	parameters: {
      viewport: { defaultViewport: 'iphonex' } <- デフォルト表示を `iPhone X` に
    },
    render: (args) => <SampleComponent {...args} />
  } as ComponentMeta<typeof SampleComponent>