Not Preposterously Macho
Join us to discuss the challenges, solutions and best practices for in-house JavaScript code sharing. Tuesday, 12/17 at 10am PT/1pm ET.Sign up here »

react-autodocs-utils

3.6.1 • Public • Published

React Autodocs Utils

Build Status

A collection of React component parsers for automating documentation.

Install

npm i react-autodocs-utils --save-dev

Use

const reactAutodocsUtils = require('react-autodocs-utils');
const path = './path/to/react-component.js';
const componentMetadata = reactAutodocsUtils(path);

componentMetadata is an object with metadata of component.

Example

given component.js:

import React from 'react';
import {oneOf, node} from 'prop-types';
 
export class Component extends React.PureComponent {
  static propTypes = {
    thing: oneOf(['first', 'second']),
 
    /** i am description about `children` prop */
    children: node.isRequired
  }
 
  render() {
    return <div/>;
  }
}

reactAutodocsUtils('./component.js') Will return a JSON:

{
  "props": {
    "thing": {
      "type": {
        "name": "enum",
        "value": [
          {
            "value": "'first'",
            "computed": false
          },
          {
            "value": "'second'",
            "computed": false
          }
        ]
      },
      "required": false,
      "description": ""
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": true,
      "description": "i am description about `children` prop"
    }
  },
  "description": "",
  "displayName": "Component",
  "methods": [],
  "readme": "source of `./readme.md` if exists, otherwise empty string",
  "readmeAccessibility": "source of `./readme.accessibility.md` if exists, otherwise empty string",
  "readmeTestkit": "source of `./readme.testkit.md` if exists, otherwise empty string",
 
  // metadata of exported methods in *.driver.js, *.protractor.driver.js or *.pupeteer.driver.js
  "drivers": [
    {
      "file": "component.driver.js",
      "descriptor": [
        {
          "name": "click",
          "args": [],
          "type": "function"
        }
      ]
    },
    {
      "file": "component.pupeteer.driver.js",
      "descriptor": [
        {
          "name": "element",
          "args": [],
          "type": "function"
        }
      ]
    }
  ]
}

With this information it is easy to display documentation with regular React components.

It is used heavily in wix-storybook-utils. Live example available at wix-style-react storybook.

Contribute

  • git clone git@github.com:wix/react-autodocs-utils.git
  • npm install
  • npm test

Jest used to run tests.

  • jest --watch

Install

npm i react-autodocs-utils

DownloadsWeekly Downloads

353

Version

3.6.1

License

MIT

Unpacked Size

155 kB

Total Files

81

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar