Docz를 사용해 보았습니다.

배경.


  • 이 학습회 듣고 나서 이를 계기로 Docz
  • 를 알게 됐어요.
  • 실제로 접촉했기 때문에 간단한 사용법을 문장으로 쓴다
  • Docz 소개

  • 공식 사이트
  • 이 말
  • 구성 요소 가이드를 제작할 수 있는 라이브러리

  • https://www.docz.site/
  • Docz 피쳐

  • mdx로 쓸 수 있어요.
  • markdown + jsx
  • 는 기본적으로markdown으로 쓸 수 있다
  • markdown에 jsx 탭을 삽입할 수 있음
  • 설정 파일 없이 제작 가능
  • 사용법


    Hello World까지.

  • 설치 라이브러리
  • yarn add -D docz
    # or
    npm i -D docz
    
  • mdx 파일 만들기
  • 프로젝트 내 어디든지 가능
  • hello.mdx
    ---
    name: Hello
    ---
    
    # Hello world
    
    Hello!
    
  • 시작
  • yarn docz dev
    # or
    npx docz dev
    
    방문
  • 페이지

  • Storybook 시작 시 Hello World
  • 확인 가능
    http://localhost:3000/

    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} />
    
  • 위의mdx를 제작하면 다음과 같은 화면이 된다

  • 특징1

  • 표시할 구성 요소가 <Playground>에 둘러싸일 때 그림 내용과 jsx 탭을 자동으로 표시합니다
  • 그림에서 빨간 테두리로 둘러싸인 것처럼 jsx를 확인할 수 있을 뿐만 아니라 변환된''
  • 도 확인할 수 있다.

    특징2

  • <PropsTable of={Button} /> Proops의 정보를 자동으로 표 작성
  • 플로우든 프로프타입이든 잘 줍는다
  • 견본을 다음과 같은 느낌으로 정의하는 예
  • Button.js
    // ...省略
    
    // flowの場合
    type Props = {
      /** 横幅いっぱいにするかどうか */
      wide?: boolean,
    };
    
    // PropTypesの場合
    Button.propTypes = {
       /** 横幅いっぱいにするかどうかにするかどうか */
       wide: PropTypes.bool,
     };
    
    // DefaultPropsはFlowでもPropTypesでも共通
    Button.defaultProps = {
      wide: false,
    };
    

    (참조) Storybook과 비교

  • Storybook으로 상기 예와 같은 단추 구성 요소를 만드는 마법사와 같은 단추 구성 요소
  • 설치 중단
  • Docz 버전과 같은 것을 재현하려면 @storybook/addon-info
  • 그 외에 재현할 수 있는 것은 없다
  • stories.js
    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>
      ));
    
    

    총결산

  • Storybook과 같거나 적게 할 수 있지만 설정 파일 없이 이렇게 많은 내용을 할 수 있다는 것은 매우 간단하다고 생각합니다!
  • 좋은 웹페이지 즐겨찾기