[Storybook] 충돌하는 decorator 적용하기

스토리북 환경에서 react-router-dom의 라우팅, 여러 스타일 라이브러리의 ThemeProvider, Context 등을 적용하기 위해선 preview.js에서 decorator를 설정해주어야 한다.

( 더 정확히는, 각 스토리북 컴포넌트 story -> 컴포넌트 단위(파일) -> 글로벌(preview.js) 범위로 적용이 가능하다. )
공식 홈페이지 참고 : https://www.google.com/search?client=safari&rls=en&q=storybook+decorator&ie=UTF-8&oe=UTF-8

Mui 컴포넌트를 클론 코딩하는 개인 프로젝트를 진행중이다. 이에 스토리북 환경에서 Mui 컴포넌트와, 내가 직접 제작한, emotion.js를 활용한 컴포넌트를 둘 다 확인할 수 있어야하는데, 이 경우 두 프레임워크의 ThemeProvider가 충돌한다.

<ThemeProvider theme={theme}>
  <GlobalStyle />
    <BrowserRouter>
	    <Story {...context} />
  </BrowserRouter>
</ThemeProvider>

ThemeProvder를 2개 적용 시킬 수는 없는 노릇이다.

이에 preview.js에서 다음과 같은 코드를 추가하였다.

// preview.js
export const decorators = [
  (Story, context) => {
    const { args } = context;
    if (args.noProvider) {
      return <Story {...context} />;
    }

    if (args.mui) {
      return (
        <div
          style={{ outline: '1px solid black', margin: '3em', padding: '1em' }}
        >
          <Story {...context} />
        </div>
      );
    }

    return (
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <BrowserRouter>
          <Story {...context} />
        </BrowserRouter>
      </ThemeProvider>
    );
  },
];

// some component story
export default {
  title: 'Test/MuiTest',
  component: MuiTest,
  argTypes: {},
  args: {
    mui: true,
  },
} as ComponentMeta<typeof MuiTest>;

MuiTest 컴포넌트는 mui 프로퍼티를 args로 받는다. decorator에서 이를 검사하여 해당 프로퍼티 유무에 따라 서로 다른 컨텍스트 환경을 제공하는 것이다.

이를 통해 같은 스토리북환경에서 다양한 decorator를 적용시킬 수 있다.