React용 스토리북 — Docs 페이지

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

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

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

이 기사에서는 DocsPage 템플릿을 Storybook으로 바꾸는 방법을 살펴보겠습니다.

문서 페이지 교체

DocsPage 템플릿을 자체 콘텐츠로 바꿀 수 있습니다.

스토리 레벨에서 다음과 같이 작성할 수 있습니다.
src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

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

export const Primary = Template.bind({});
Primary.parameters = { docs: { page: null } }

docs.page 속성을 null로 설정하면 '문서 없음' 페이지가 표시됩니다.

또한 구성 요소 수준에서 docs.page 속성을 설정할 수 있습니다.

이를 위해 다음과 같이 작성합니다.
src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: { page: null }
  }
};

그러면 모든 스토리에 '문서 없음' 메시지가 표시됩니다.

글로벌 수준

모든 스토리에서 DocsPage를 대체할 수 있도록 전역 수준에서 docs.page 속성을 설정할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
./storybook/preview.js

export const parameters = {
  docs: { page: null }
}

이제 모든 스토리에 '문서 없음' 메시지가 표시됩니다.

DocsPage 리믹싱

또한 페이지에서 소품을 가져와서 자체 콘텐츠를 추가할 수도 있습니다.

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

import React from 'react';
import { Button } from './Button';
import {
  Title,
  Subtitle,
  Description,
  Primary as PrimaryDoc,
  Props,
  Stories,
  PRIMARY_STORY,
} from '@storybook/addon-docs/blocks';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description />
          <PrimaryDoc />
          <ArgsTable story={PRIMARY_STORY} />
          <Stories />
        </>
      ),
    },
  },
};

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

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

문서 페이지를 구축하기 위해 구성 요소를 추가합니다.

사용자 정의 문서 페이지를 추가할 수 있도록 @storybook/addon-docs 패키지를 설치합니다.
Title와 Subtitle는 제목과 부제목이 있습니다.
Description 구성 요소에 대한 설명이 있습니다.
Primary 미리보기가 있습니다.
ArgsTable에는 인수 목록이 있습니다.
Stories 스토리 목록이 있습니다.
PRIMARY_STORY 스토리북의 메인 스토리가 있습니다.

인라인 대 Iframe 스토리

스토리를 인라인이나 iframe에 넣을 수 있습니다.

이를 위해 iframe에 항목을 넣는 것을 중지할 수 있도록 inlineStories를 true로 설정합니다.

또한 자체 함수를 작성하고 prepareForInline 속성으로 설정하여 문서를 인라인으로 표시할 수 있습니다.

예를 들어 다음과 같이 작성하여 Vue 스토리를 React 스토리로 렌더링할 수 있습니다.

import React from 'react';
import { render } from 'react-dom';
import toReact from '@egoist/vue-to-react';

export const parameters = {
  docs: {
    prepareForInline: (storyFn, { args }) => {
      const Story = toReact(storyFn());
      return <Story {...args} />;
    },
  },
}

storyFn에서 반환된 콘텐츠를 React 구성 요소로 렌더링합니다.

Vue 콘텐츠를 React 구성 요소로 렌더링하려면 @egoist/vue-to-react 패키지가 필요합니다.

결론

자체 콘텐츠로 스토리를 렌더링하는 방법에는 여러 가지가 있습니다.

Storybook 애드온에서 제공하는 구성 요소를 사용할 수 있습니다.