Setup Mantine in Storybook

Setup Mantine in Storybook (Storybook에서 Mantine 설정하기)

Storybook 10+에서 Mantine을 설정하는 방법을 설명해 드릴게요. 더 오래된 Storybook 버전을 사용한다면 동작하지 않아요.

출처: 문서

본문

애플리케이션에 Storybook 추가하기

이미 애플리케이션에 Storybook이 있다면 이 단계를 건너뛰어도 돼요.

Storybook getting started 가이드를 따라 애플리케이션에 Storybook을 추가해요:

npx storybook@latest init

애드온 구성

@storybook/addon-themes Storybook 애드온을 설치해요:

yarn add --dev @storybook/addon-themes

.storybook/main.ts에 애드온을 추가해요:

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  // ... other config properties
  addons: ['@storybook/addon-themes'],
};

export default config;

테마 객체

애플리케이션과 Storybook 사이에서 theme 객체를 공유하려면, 테마 오버라이드가 있는 src/theme.ts(또는 애플리케이션의 다른 경로) 파일을 만들어요:

// src/theme.ts
import { createTheme } from '@mantine/core';

export const theme = createTheme({
  fontFamily: 'serif',
  // ... other theme override properties
});

그러면 애플리케이션과 Storybook 양쪽에서 같은 테마를 사용할 수 있어요:

// In your application

import { MantineProvider } from '@mantine/core';
import { theme } from './theme';

function App() {
  return <MantineProvider theme={theme}>{/* ... */}</MantineProvider>;
}

Storybook preview

.storybook/preview.tsx 파일이 없다면 만들고 다음 내용을 넣어요:

// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';

import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { theme } from '../theme';

export const parameters = {
  layout: 'fullscreen',
  options: {
    showPanel: false,
    storySort: (a, b) => a.title.localeCompare(b.title, undefined, { numeric: true }),
  },
  backgrounds: { disable: true },
};

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Mantine color scheme',
    defaultValue: 'light',
    toolbar: {
      icon: 'mirror',
      items: [
        { value: 'light', title: 'Light' },
        { value: 'dark', title: 'Dark' },
      ],
    },
  },
};

export const decorators = [
  (renderStory: any, context: any) => {
    const scheme = (context.globals.theme || 'light') as 'light' | 'dark';
    return (
      <MantineProvider theme={theme} forceColorScheme={scheme}>
        <ColorSchemeScript />
        {renderStory()}
      </MantineProvider>
    );
  },
];

모든 준비가 끝났어요. Storybook을 시작해요:

npm run storybook

더 알아보기 (Learn more)