Docz를 사용해 보았습니다.

배경.

Docz 소개

Docz 피쳐

사용법

Hello World까지.

yarn add -D docz
# or
npm i -D docz

---
name: Hello
---

# Hello world

Hello!

yarn docz dev
# or
npx docz dev

React 구성 요소 포함

---
name: Button
---

import { Playground, PropsTable } from 'docz'
import Button from './Button'

# Button

- ボタンコンポーネント

## Usage

<Playground>
  <Button onClick={() => alert('hello!')}>ボタン</Button>
</Playground>

<Playground>
  <Button wide onClick={() => alert('hello!')}>ボタン</Button>
</Playground>

## Props

<PropsTable of={Button} />

특징1

특징2

// ...省略

// flowの場合
type Props = {
  /** 横幅いっぱいにするかどうか */
  wide?: boolean,
};

// PropTypesの場合
Button.propTypes = {
   /** 横幅いっぱいにするかどうかにするかどうか */
   wide: PropTypes.bool,
 };

// DefaultPropsはFlowでもPropTypesでも共通
Button.defaultProps = {
  wide: false,
};

(참조) Storybook과 비교

import React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';

import Button from './Button';

storiesOf('Button', module)
  .addDecorator(withInfo)
  .addParameters({
    info: {
      text: 'ボタンコンポーネント',
      inline: true,
    },
  })
  .add('通常パターン', () => (
    <Button onClick={action('click!!')}>
      {text('label', 'ボタン')}
    </Button>
  ))
  .add('幅広パターン', () => (
    <Button onClick={action('click')} wide>
      {text('label', 'ボタン')}
    </Button>
  ));

총결산