Story 문서 블록

문서 블록(Doc block)은 Storybook 문서 페이지 컴포넌트입니다.

인자 테이블

Storybook Docs는 컴포넌트 인자 테이블을 자동으로 생성합니다.

https://storybook.js.org/386bdaed7a08de9d831f68e43e18142c/addon-controls-docs-optimized.mp4storybook.js.org

문서화

보다 나은 문서화를 위해 PropTypes를 사용해 args 정보를 컴포넌트에 추가 할 수 있습니다. 추가 정보를 포함하면 args 테이블이 업데이트 됩니다. 이는 함께 하는 팀원에게 보다 풍부한 경험을 제공합니다.

import PropTypes from 'prop-types'

export default function Button({ isDisabled, content }) {
  return (
    <button type="button" disabled={isDisabled}>
      {content}
    </button>
  )
}

Button.propTypes = {
  /**
   * 체크할 경우 버튼 비활성화
   */
  isDisabled: PropTypes.bool.isRequired,
  /**
   * 버튼 콘텐츠
   */
  content: PropTypes.string.isRequired,
};

설명

Storybook Docs는 소스 코드에서 추출하거나, 사용자가 제공한 설명 정보를 컴포넌트 설명을 보여줍니다.

export default {
  // ...
  parameters: {
    docs: {
      description: {
        // 컴포넌트 설명 (Markdown 문법 사용 가능)
        component: '**버튼** 컴포넌트',
      },
    },
  },
};