Storybook7でchakra-uiを利用する

バージョンアップに伴って、諸々の設定値がexportする形になっているので、
多少フォーマットが変わっています。

main.ts

webpackの設定値を追加する

const config: StorybookConfig = {
  stories: [・・・],
  addons: [・・・],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  core: {},
  docs: {・・・ },
  /**
    * ↓↓↓ 追加するコード ↓↓↓ 
    */
  webpackFinal: async (baseConfig) => {
    return {
      ...baseConfig,
      resolve: {
        ...baseConfig.resolve,
        alias: {
          ...baseConfig.resolve?.alias,
          "@app": path.resolve(__dirname, "../app/"),
          "@": path.resolve(__dirname, "../"),
        },
      },
    };
  },
};
export default config;

preview.ts(x)

previewファイルの拡張子を変更する

preview.ts
↓
preview.tsx

関連要素をimportする

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';

decoratorsプロパティを追加する

const preview: Preview = {
  decorators: [
    (Story) => (
        <ChakraProvider>
          <Story />
        </ChakraProvider>
    ),
  ],

preview.tsx全文

preview.tsx

import React from 'react';
import type { Preview } from "@storybook/react";
import { ChakraProvider } from '@chakra-ui/react';

const preview: Preview = {
  decorators: [
    (Story) => (
      <ChakraProvider>
        <Story />
      </ChakraProvider>
    ),
  ],
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;