Storybook에서 Chakra UI 사용하기

Storybook에서 Chakra UI 사용하기 (Using Chakra UI in Storybook)

Storybook에서 Chakra UI를 사용하는 방법을 안내하는 가이드예요. provider를 설정하고 다크 모드 토글을 추가해 Storybook에서 Chakra 컴포넌트를 쉽게 개발할 수 있습니다.

출처: 문서

본문

설치 (Installation)

의존성 설치 (Install dependencies)

Chakra UI와 Storybook에 필요한 의존성을 설치하세요.

npm i @storybook/addon-themes @chakra-ui/react @emotion/react

Preview 설정 (Setup Preview)

.storybook/preview.tsx 파일을 편집해 Chakra UI provider를 포함하세요.

import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import type { Preview } from "@storybook/react"

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

export default preview

다크 모드 토글 설정 (Setup dark mode toggle)

@storybook/addon-themes의 withThemeByClassName 데코레이터를 사용해 Storybook 툴바에 컬러 모드 토글을 추가하세요.

import { withThemeByClassName } from "@storybook/addon-themes"
import type { Preview, ReactRenderer } from "@storybook/react"

const preview: Preview = {
  decorators: [
    // ...
    withThemeByClassName({
      defaultTheme: "light",
      themes: { light: "", dark: "dark" },
    }),
  ],
}

export default preview

Storybook 서버 시작 (Start the Storybook server)

npm run storybook

즐거운 개발 되세요! (Enjoy!)

스토리에서 Chakra UI 컴포넌트를 사용하세요.

import { Button } from "@chakra-ui/react"

export const SampleStory = {
  render() {
    return <Button>Click me</Button>
  },
}