Nucleus Powered Mitochondria
    Have ideas to improve npm?Join in the discussion! »

    react-autodocs-utils

    3.6.3 • 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

    214

    Version

    3.6.3

    License

    MIT

    Unpacked Size

    157 kB

    Total Files

    81

    Last publish

    Collaborators

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