React용 스토리북 — MDX 문서

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Storybook을 사용하면 다양한 매개변수를 사용하여 구성 요소의 프로토타입을 쉽게 만들 수 있습니다.

이 기사에서는 Storybook으로 MDX 문서를 추가하는 방법을 살펴보겠습니다.

MDX

MDX 파일 형식은 Markdown과 JSX를 혼합합니다.

문서에 Markdown의 간결한 구문을 사용할 수 있습니다.

Storybook은 Markdown과 JSX를 함께 문서로 컴파일합니다.

설명서를 만들기 위해 stories.mdx MDX 파일을 만듭니다.

예를 들어 다음과 같이 작성할 수 있습니다.
Button.stories.mdx

import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { Button } from './Button';

<Meta title="Example/Button" component={Button} />

# Button

A button

<!--- This is your Story template function, shown here in React -->

export const Template = (args) => <Button {...args} />

<Canvas>
  <Story name="Primary" args={{
      label: 'button',
      primary: true
    }}>
    {Template.bind({})}
   </Story>
  <Story name="Secondary" args={{
      label: 'button',
    }}>
    {Template.bind({})}
   </Story>
  <Story name="Secondary" args={{
    label: 'button'
  }}>
    {Template.bind({})}
   </Story>
</Canvas>

그런 다음 스토리북 화면에 버튼이 표시됩니다.
Canvas 구성 요소는 문서의 컨테이너입니다.
Story에는 문서에서 채우는 이야기가 있습니다.

마크다운 설명은 문서 탭에 표시됩니다.

데코레이터 및 매개변수

MDX 문서에 데코레이터와 매개변수를 추가할 수 있습니다.
Meta 컴포넌트의 소품으로 추가할 수 있습니다.

예를 들어 다음과 같이 작성하여 decorators 소품을 추가할 수 있습니다.

import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { Button } from './Button';

<Meta
  title="Example/Button"
  component={Button}
  decorators={[(Story) => <div style={{ margin: '20px' }}><Story/></div>]}
/>

# Button

A button

<!--- This is your Story template function, shown here in React -->

export const Template = (args) => <Button {...args} />

<Canvas>
  <Story name="Primary" args={{
      label: 'button',
      primary: true
    }}>
    {Template.bind({})}
   </Story>
  <Story name="Secondary" args={{
      label: 'button',
    }}>
    {Template.bind({})}
   </Story>
  <Story name="Secondary" args={{
    label: 'button'
  }}>
    {Template.bind({})}
   </Story>
</Canvas>

매개변수를 추가하려면 다음과 같이 작성할 수 있습니다.

import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { Button } from './Button';

<Meta
  title="Example/Button"
  component={Button}
  parameters={{
    backgrounds: {
      values: [
        { name: 'red', value: '#f00' },
        { name: 'green', value: '#0f0' },
      ],
    },
  }}
/>

# Button

A button

<!--- This is your Story template function, shown here in React -->

export const Template = (args) => <Button {...args} />

<Canvas>
  <Story name="Primary" args={{
      label: 'button',
      primary: true
    }}>
    {Template.bind({})}
   </Story>
  <Story name="Secondary" args={{
      label: 'button',
    }}>
    {Template.bind({})}
   </Story>
  <Story name="Secondary" args={{
    label: 'button'
  }}>
    {Template.bind({})}
   </Story>
</Canvas>

일반적인 매개 변수 개체와 함께 parameters 소품을 추가했습니다.

이제 background 속성을 추가하여 추가된 배경색 드롭다운이 표시되어야 합니다.

문서 전용 MDX

문서 전용 MDX를 정의하기 위해 Meta 구성 요소를 추가하지만 스토리는 정의하지 않습니다.

예를 들어 src/stories/Foo.stories.mdx 파일을 만들고 다음을 추가할 수 있습니다.

import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';

<Meta
  title="Example/Foo"
/>

# Foo

foo bar

이제 왼쪽 사이드바에 Foo 링크가 표시되어야 하며 이를 클릭하여 HTML로 표시된 Markdown을 볼 수 있습니다.

결론

Markdown과 JSX를 혼합한 MDX 파일로 스토리를 추가할 수 있습니다.