React용 스토리북 — ArgsTable

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

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

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

이 기사에서는 ArgsTable을 Storybook과 함께 추가하는 방법을 살펴보겠습니다.

문서 블록

문서 블록은 스토리북 문서 페이지의 빌딩 블록입니다.

DocsPage는 doc 블록의 조합을 사용하여 문서를 구성합니다.

인수 테이블

Storybook 문서는 구성 요소에 대한 구성 요소 인수 테이블을 자동으로 생성합니다.

표에는 구성 요소의 인수가 나열되어 있습니다.

또한 컨트롤과 통합하여 현재 렌더링된 스토리의 인수를 변경할 수 있습니다.

이를 문서화하는 주석을 추가하여 자체 코드로 확장할 수 있습니다.

예를 들어, Button.js 파일에서 다음과 같이 작성할 수 있습니다.

import React from 'react';
import PropTypes from 'prop-types';
import './button.css';

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'button-primary' : 'button-secondary';
  return (
    <button
      type="button"
      className={['button', `button-${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

Button.propTypes = {
  primary: PropTypes.bool,
  /**
    String for the background color
  */
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: 'medium',
  onClick: undefined,
};

Button 구성 요소를 생성합니다.
backgroundColor 소품 위에 댓글이 있습니다.

이것은 args 테이블의 설명 열에 표시됩니다.

문서 페이지

구성 요소에 대한 DocsPage를 추가하려면 파일에 대한 components 속성이 있는 개체를 내보내면 됩니다.

예를 들어 다음과 같이 작성할 수 있습니다.
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.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',
};

우리는 다음을 가지고 있습니다:

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

기본 내보내기는 component 속성이 있는 객체를 내보내 버튼에 Button 구성 요소를 표시하도록 합니다.

ArgsTable 사용자 정의

다음과 같이 작성하여 ArgsTable을 사용자 정의할 수 있습니다.
src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    primary: {
      description: 'overwritten description',
      table: {
        type: {
          summary: 'summary',
          detail: 'some detail'
        },
      },
      control: {
        type: null,
      },
    },
  },
};

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',
};

argsTypes 인수에 대한 속성이 있는 개체와 함께 primary 속성이 있습니다.
description 속성에 설명이 있습니다.
table 설명에 채워질 개체가 있습니다.
summary는 detail를 표시하도록 토글할 수 있는 버튼으로 표시됩니다.
control에는 인수를 설정하는 컨트롤이 있습니다.

스토리에 대해 표시되는 소스 스니펫을 변경할 수 있습니다.

그렇게 하려면 docs.source.code 속성을 설정할 수 있습니다.

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    primary: {
      description: 'overwritten description',
      table: {
        type: {
          summary: 'summary',
          detail: 'some detail'
        },
      },
      control: {
        type: null,
      },
    },
  },
};

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

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

Primary.parameters = {
  docs: {
    source: {
      code: 'Some custom string here'
    }
  },
};

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',
};

코드 표시 버튼을 클릭하면 ‘Some custom string here’ 문자열이 표시됩니다.

결론

구성 요소가 Storybook에서 허용하는 인수를 문서화하기 위해 ArgsTable에 다른 것을 표시하는 코드를 추가할 수 있습니다.