remarkjs / ideas

Share ideas for new utilities and tools built with @remarkjs
https://remark.js.org
5 stars 1 forks source link

Support for importing React component documents by react-docgen-typescript #19

Closed cytle closed 3 years ago

cytle commented 4 years ago

Subject of the feature

Markdown Api documents can be generated by react-docgen-typescript. I expect to import React component documentation in markdown by react-docgen-typescript.

Expected behavior

The Component Column.tsx

import * as React from "react";
import { Component } from "react";

/**
 * Column properties.
 */
export interface IColumnProps {
  /** prop1 description */
  prop1?: string;
  /** prop2 description */
  prop2: number;
  /**
   * prop3 description
   */
  prop3: () => void;
  /** prop4 description */
  prop4: "option1" | "option2" | "option3";
}

/**
 * Form column.
 */
export class Column extends Component<IColumnProps, {}> {
  render() {
    return <div>Test</div>;
  }
}

Convert the following Markdown:

# foo-components

## Apis

<react-docgen-typescript src="./Column.tsx" />

Into

# foo-components

## Apis

### Column

Form column.

#### props

| prop | type | default | required | description |
|---- | :----: | :-------: | :--------: | -----------|
| **prop1** | `string` | `null` | :x: | prop1 description | 
| **prop2** | `number` | `null` | :x: | prop2 description | 
| **prop3** | `() => void` | `null` | :x: | prop3 description | 
| **prop4** | `"option1" | "option2" | "option3"` | `null` | :x: | prop4 description | 

Alternatives

ChristianMurphy commented 3 years ago

Thanks for starting the discussion @cytle ! We're in the process unifying ideas in with discussions unifiedjs/collective#44 If you'd like to continue this thread, or start a new one https://github.com/remarkjs/remark/discussions/categories/ideas will be the home for ideas going forward.