📕

Next.js + Chakra UIプロジェクトにStorybookを導入する

2021/08/08に公開

Next.js

Storybook

Chakra UI

tech

はじめに

※この記事は下記記事の延長です。下記記事を読まなくても問題ないように書いていますが、ご興味ありましたらご一読ください。

今回はNext.js+Chakra UIプロジェクトにStorybookを導入する手順を書いていきたい思います。

導入手順

npx sb initを実行
設定ファイルを修正
Storyを追加

`npx sb init`を実行

npx sb init

こちらのコマンドを実行することで必要なパッケージのインストールやデフォルトの設定の追加などをしてくれます。

設定ファイルを修正

.storybook/main.ts

const path = require('path')

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.tsx'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  typescript: {
    check: true,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      include: ['../src/**/*.stories.mdx', '../src/**/*.stories.tsx'],
    },
  },
  webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          src: path.resolve(__dirname, '../src'),
          '@emotion/core': path.resolve(
            __dirname,
            '../node_modules/@emotion/react'
          ),
          'emotion-theming': path.resolve(
            __dirname,
            '../node_modules/@emotion/react'
          ),
        },
      },
    }
  },
}

.storybook/main.jsではStoryとして表示する対象ファイルやWebpackの設定などStorybook Serverの振る舞いを設定します。

webpackFinalではStorybookがNext.jsのディレクトリ構成を認識できるように、今回はsrcディレクトリのエイリアスを設定しています（create-next-appのデフォルトのディレクトリ構成のままの場合はcomponentsディレクトリなどを適宜エイリアスに設定してください）。

.storybook/preview.ts

import { ChakraProvider } from '@chakra-ui/react'
import { Story } from '@storybook/react'
import React from 'react'
import theme from '../src/theme'

const withChakra = (Story: Story) => {
  return (
    <ChakraProvider theme={theme}>
      <Story />
    </ChakraProvider>
  )
}

export const decorators = [withChakra]

const customViewports = {
  /** iPhone X */
  base: {
    name: 'base',
    styles: {
      width: '375px',
      height: '812px',
    },
    type: 'mobile',
  },
  /** iPad */
  md: {
    name: 'md',
    styles: {
      width: '768px',
      height: '1024px',
    },
    type: 'tablet',
  },
  /** MacBook Air */
  lg: {
    name: 'lg',
    styles: {
      width: '1280px',
      height: '800px',
    },
    type: 'desktop',
  },
}

export const parameters = {
  viewport: {
    viewports: customViewports,
    defaultViewport: 'base',
  },
}

.storybook/preview.tsではChakra UIのTheme Providerやカスタムビューポートなどを設定します。
カスタムビューポートを設定することでStoryを任意の画面幅で簡単に確認できるので便利です。

Storyを追加

src/stories/Button.stories.tsx

import { Button, ButtonProps } from '@chakra-ui/react'
import { Meta, Story } from '@storybook/react'
import React from 'react'

export default {
  title: 'UI/Button',
  component: Button,
} as Meta<ButtonProps>

type Template = Story<ButtonProps>

const Template: Template = (args) => <Button {...args}>Default</Button>

export const Default: Template = Template.bind({})

この状態でyarn storybookを実行するとStorybook Serverが立ち上がりStoryを確認できると思います。

おわりに

いかがでしたか。
これでNext.js+Chakra UIプロジェクトにStorybookを導入することができました。
プロダクトのコンポーネントを一覧で確認できて便利なのでぜひ導入してみてください。
それではよいNext.jsライフを！