📙

Storybookをバージョン6から7への移行

2023/05/07に公開

Next.js

Storybook

tech

はじめに

Storybookのメジャーバージョン7が最新版になりました。

この記事では、Next.js環境での移行を備忘録として残します。
移行手順は公式を参考にします。

アップグレード

公式手順の通りコマンドをポチっていきます。

npx storybook@latest upgrade

インストールするバージョンが問題ないか聞かれるのでyを返します。

 Need to install the following packages:
   storybook@7.0.6
 Ok to proceed?

Storybook7では、start-storybookやbuild-storybookが廃止され、storybook dev、storybook buildになりました。
以下にyを返すとdevDependenciesにstorybookというパッケージします。

 Do you want to run the 'storybook-binary' migration on your project?

また、以下にもyを返すことでpackage.jsonのコマンドを自動で置き換えます。

 Do you want to run the 'sb-scripts' migration on your project?

私の環境では、以下の通りpackage.jsonが変更されました。

package.json

  変更前
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook"

  変更後
  "storybook": "storybook dev -p 6006",
  "build-storybook": "storybook build"

Next.js環境では、frameworkに@storybook/react、builderに@storybook/builder-webpack5を使用していましたが、@storybook/nextjsを使用するようになりました。
下記にyと返すと不要なパッケージを削除して@storybook/nextjsをインストールします。

Do you want to run the 'new-frameworks' migration on your project?

 ✅ Removing dependencies: @storybook/builder-webpack5, @storybook/manager-webpack5, 
 storybook-addon-next

 ✅ Installing new dependencies: @storybook/nextjs

main.jsの修正

上記の処理でDo you want to run the 'new-frameworks' migration on your project?にyと答えるとmain.jsも書き換わるらしいですが、手元の環境では変わらなかったので手動で修正しました。

frameworkを@storybook/nextjsに変更
storybook-addon-nextを削除
core(builder)を削除

書き換え前

main.js

const path = require('path')

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    '@storybook/addon-a11y',
    {
      name: 'storybook-addon-next',
      options: {
        nextConfigPath: path.resolve(__dirname, '../next.config.js')
      }
    }
  ],
  staticDirs: ['../public'],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  babel: async (options) => ({
    ...options,
    presets: [...options.presets, '@emotion/babel-preset-css-prop'],
    plugins: ['react-require']
  }),
}

書き換え後

main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    '@storybook/addon-a11y',
  ],
  staticDirs: ['../public'],
  // 変更部分
  framework: "@storybook/nextjs",
  babel: async (options) => ({
    ...options,
    presets: [...options.presets, '@emotion/babel-preset-css-prop'],
    plugins: ['react-require']
  }),
}

Storyの修正

最後に、非推奨だらけになったStoryを修正しました。

ComponentMeta, ComponentStoryなどが非推奨の型になり、代わりに Meta, StoryObjを使用する
CSF2も非推奨なので、CSF3に書き換え

書き換え前

stories.tsx

import { ComponentMeta, ComponentStory } from '@storybook/react';

import { TagChip } from './tagChip';

export default {
  title: 'Elements/TagChip',
  component: TagChip,
} as ComponentMeta<typeof TagChip>;

const Template: ComponentStory<typeof TagChip> = (args) => <TagChip {...args} />;

export const Single = Template.bind({});
Single.args = {
  tagsOnArticles: ['tag1']
};

export const Many = Template.bind({});
Many.args = {
  tagsOnArticles: ['tag1','tag2','tag3']
};

書き換え後

stories.tsx

import type { Meta, StoryObj } from '@storybook/react';

import { TagChip } from './tagChip';

const meta: Meta<typeof TagChip> = {
  title: 'Elements/TagChip',
  component: TagChip,
};
export default meta;

export const Single: StoryObj<typeof TagChip> = {
  args: {
    tagsOnArticles: ['tag1']
  },
};

export const Many: StoryObj<typeof TagChip> = {
  args: {
    tagsOnArticles: ['tag1','tag2','tag3']
  },
};

私は手動で直しましたが、CSF2→CSF3は以下のコマンドで書き換えをしてくれます。

npx storybook@latest migrate csf-2-to-3 --glob="src/**/*.stories.tsx"

あとがき

以上がStorybook7への移行作業でした。
Storyの数が多くなかったため移行自体は1時間程度で完了し、Github Action→Chromaticにデプロイも変更なしで動作しました(^^)

GitHubで編集を提案

はじめに

アップグレード

main.jsの修正

Storyの修正

あとがき

Discussion