@n3/prop-types-to-markdown

Установка

yarn add @n3/prop-types-to-markdown --dev

Использование

Код компонента:

// src/Example.jsx

import React from 'react';
import PropTypes from 'prop-types';

const Example = () => <div />;

Example.propTypes = {
  /**
   * Необязательная строка
   */
  simpleString: PropTypes.string,
  /**
   * Обязательная строка
   */
  requiredString: PropTypes.string.isRequired,
  /**
   * Число
   */
  number: PropTypes.number.isRequired,
  /**
   * Функция
   * @param {number} value - аргумент-число
   * @param {string} description - аргумент-строка
   */
  function: PropTypes.func,
  /**
   * Объект с заданными ключами
   */
  shape: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  }),
  /**
   * Словарь
   */
  dictionary: PropTypes.objectOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  })),
  /**
   * Массив
   */
  array: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  })),
  /**
   * Одно из значений
   */
  color: PropTypes.oneOf([
    'red',
    'green',
    'blue',
  ]).isRequired,
};

Example.defaultProps = {
  simpleString: 'Hello',
  function: () => null,
  shape: null,
  dictionary: {},
  array: [],
};

export default Example;

Команда:

./node_modules/bin/pt2md src/Example.jsx

Результат (будет выведен в консоль):

| Название | Обязательность | Тип | Значение по умолчанию | Описание | |----------|----------------|-----|-----------------------|----------| | simpleString | | string | 'Hello' | Необязательная строка | | requiredString | + | string | | Обязательная строка | | number | + | number | | Число | | function | | func | () => null | Функция@param {number} value - аргумент-число@param {string} description - аргумент-строка | | shape | | shape {- id  number- name  string} | null | Объект с заданными ключами | | dictionary | | objectOf {  shape {  - id    number  - name    string  }} | {} | Словарь | | array | | arrayOf [  shape {  - id    number  - name    string  }] | [] | Массив | | color | + | enum- 'red'- 'green'- 'blue' | | Одно из значений |