whale-component-docgen

根据package.json/md生成组件api文档，产生如下文档

# @alife/test-select

业务组件描述

## 安装方法

\`\`\`sh
$ tnpm install @alife/test-select --save
\`\`\`

## API

### Select

选择器

| 参数                | 说明                                     | 类型                           | 可选值                     | 默认值 |
| ------------------- | ---------------------------------------- | ------------------------------ | -------------------------- | ------ |
| dataSource _(必填)_ | 传入的数据源，可以动态渲染子项           | string\[]                      |                            |        |
| onChange            | Select发生改变时触发的回调               | (item: string) => void         |                            |        |
| readOnly            | 是否只读，只读模式下可以展开弹层但不能选 | boolean                        |                            | false  |
| size                | 选择器尺寸                               | "medium" \| "small" \| "large" | "medium", "small", "large" | medium |
| value               | 当前值，用于受控模式                     | string \| number               | string, number             |        |
| icon                |                                          | ReactNode                      |                            |        |

Install

$ tnpm install whale-component-docgen --save

Usage

parse

生成深层组件Props信息

import { whaleParse } from 'whale-component-docgen';

const p = 'Chart.tsx'; // path to component
whaleParse(p);

产生JSON数据

whale-component-docgen

根据包中的package.json自动生成一份README.md

约定文件结构如下

List
├── src
│   └── index.tsx
├── package.json
└── README.md

whale-component-docgen README.md

将react-docgen-typescript:链接转为Api文档表格，如下文件结构

List
├── src
│   └── index.tsx
└── README.md

<!-- README.md -->
# 自定义标题

描述

## Demo

xxx

## API

[Select](./src/index.ts "react-docgen-typescript:")

// src/index.tsx
import * as React from 'react';

export interface ISelectProps {
  /**
   * 传入的数据源，可以动态渲染子项
   */
  dataSource: string[];
  /**
   * Select发生改变时触发的回调
   */
  onChange?: (item: string) => void;
  /**
   * 是否只读，只读模式下可以展开弹层但不能选
   */
  readOnly?: boolean;
  /**
   * 选择器尺寸
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * 当前值，用于受控模式
   */
  value?: string | number;
}

/**
 * 选择器
 */
class Select extends React.Component<ISelectProps> {
  static defaultProps = {
    readOnly: false,
    size: 'medium',
  };

  render() {
    return <div>Test</div>;
  }
}
export default Select;

执行

$ whale-component-docgen README.md

将得到如下文档

# 自定义标题

描述

## Demo

xxx

\`\`\`tsx
// some demo
\`\`\`

## API

### Select

选择器

| 参数                | 说明                                     | 类型                           | 可选值                     | 默认值 |
| ------------------- | ---------------------------------------- | ------------------------------ | -------------------------- | ------ |
| dataSource _(必填)_ | 传入的数据源，可以动态渲染子项           | string\[]                      |                            |        |
| onChange            | Select发生改变时触发的回调               | (item: string) => void         |                            |        |
| readOnly            | 是否只读，只读模式下可以展开弹层但不能选 | boolean                        |                            | false  |
| size                | 选择器尺寸                               | "medium" \| "small" \| "large" | "medium", "small", "large" | medium |
| value               | 当前值，用于受控模式                     | string \| number               | string, number             |        |
| icon                |                                          | ReactNode                      |                            |        |