storybook-readme/services/getPropsTables/index.js

Storybook addon to show components README (for React and Vue)

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = getPropsTables;

var _marked = _interopRequireDefault(require("../../services/marked"));

var _parseProps = _interopRequireDefault(require("./parseProps"));

var _excludePropTable = require("./excludePropTable");

var getName = function getName(type) {
  return type.displayName || type.name;
};

var renderPropMeta = function renderPropMeta(propType, propMeta) {
  if (!propMeta) {
    return '';
  }

  switch (propType) {
    case 'enum':
      {
        return propMeta.join(' | ');
      }

    case 'instanceOf':
    case 'arrayOf':
      {
        return propMeta;
      }

    case 'union':
      {
        return propMeta.join(' | ');
      }

    case 'objectOf':
      {
        return propMeta;
      }

    case 'shape':
      {
        return Object.keys(propMeta).map(function (k) {
          return "<div class=\"property_meta\">".concat(k, ": ").concat(propMeta[k].name, "</div>");
        }).join('');
      }

    default:
      return '';
  }
};

var getMarkdown = function getMarkdown(_ref) {
  var type = _ref.type,
      name = _ref.name;
  var propDefinitions = (0, _parseProps.default)(type);

  if (propDefinitions.length === 0) {
    return null;
  }

  var md = "### ".concat(name, " Props\n");
  /* copy & modified from addon-info */

  md += "<table>\n    <thead>\n      <tr>\n        <th>Name</th>\n        <th>Required</th>\n        <th>Type</th>\n        <th>DefaultValue</th>\n        <th>Description</th>\n      </tr>\n    </thead>\n    <tbody>";
  propDefinitions.forEach(function (prop) {
    md += "<tr>\n      <td>".concat(prop.property, "</td>\n      <td>").concat(prop.required ? '+' : '-', "</td>\n      <td>\n        <div><b>").concat(prop.propType, "</b></div>\n        <div class=\"property_meta\">").concat(renderPropMeta(prop.propType, prop.propMeta), "</div>\n      </td>\n      <td>").concat(prop.defaultValue ? prop.defaultValue : '-', "</td>\n      <td>").concat(prop.description || '-', "</td>\n    </tr>");
  });
  md += '</tbody></table>';
  return (0, _marked.default)(md);
};
/**
 * Copied from @storybook/addon-info
 */


function getPropsTables(_ref2) {
  var story = _ref2.story,
      _ref2$config = _ref2.config,
      config = _ref2$config === void 0 ? {} : _ref2$config;
  var types = new Map();
  var excludePropTables = config.excludePropTables,
      includePropTables = config.includePropTables;

  if (!story) {
    return null;
  } // depth-first traverse and collect types


  var extract = function extract(innerChildren) {
    if (!innerChildren) {
      return;
    }

    if (Array.isArray(innerChildren)) {
      innerChildren.forEach(extract);
      return;
    }

    if (innerChildren.props && innerChildren.props.children) {
      extract(innerChildren.props.children);
    } // Exclude specific propTable according to its exclude and include rules.


    if (typeof innerChildren.type === 'function' && (0, _excludePropTable.excludePropTable)(innerChildren, excludePropTables, includePropTables)) {
      return;
    }

    if (innerChildren.type && !types.has(innerChildren.type)) {
      types.set(innerChildren.type, true);
    }
  }; // extract components from children


  extract(story);
  var array = Array.from(types.keys());
  array.sort(function (a, b) {
    return getName(a) > getName(b) ? 1 : -1;
  });
  var propTables = array.map(function (type, i) {
    return getMarkdown({
      name: getName(type),
      config: config,
      type: type
    });
  });

  if (!propTables || propTables.length === 0) {
    return null;
  }

  return propTables;
}