Storybookにて全Story共通のコンポーネントを設定する方法

背景

_app(カスタムAppコンポーネント？)に配置しているモーダルコンポーネント等をStorybookでも使用したかった。
各Storyに書いてもいいのだが面倒に感じたので全Storyに設定したかった。

環境

"next": "13.1.1",
"react": "18.2.0",
"storybook": "^7.0.12",
"typescript": "4.9.4"

方法

preview.tsxにdecoratorsを追加する。

※拡張子はtsxなので注意

preview.tsx

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

  decorators: [
    (Story) => (
      <RecoilRoot>
        <MantineProvider withGlobalStyles withNormalizeCSS>
          <CommentModal />
          <PostModal />
          <LoginModal />
          <SignupModal />
          <EditProfileModal />
          <Story />
        </MantineProvider>
      </RecoilRoot>
    ),
  ],
};