react-storybook-addon-chapters/dist/components/PropTable.js

React Storybook Chapters addon allows showcasing of multiple components within a story by breaking it down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.propTableStyles = void 0;

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

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

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

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

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

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _PropVal = _interopRequireDefault(require("@storybook/addon-info/dist/components/PropVal"));

var _theme = _interopRequireDefault(require("../theme"));

var propTypes = {
  component: _propTypes["default"].func,
  useTheme: _propTypes["default"].bool
};
var defaultProps = {
  useTheme: false,
  component: {}
};
var PropTypesMap = new Map();
Object.keys(_propTypes["default"]).forEach(function (typeName) {
  var type = _propTypes["default"][typeName];
  PropTypesMap.set(type, typeName);
  PropTypesMap.set(type.isRequired, typeName);
});
var padding = 10;
var propTableStyles = {
  propTable: {
    fontSize: 13,
    marginLeft: -10
  },
  propTableTh: {
    color: _theme["default"].grayDarker,
    padding: padding
  },
  propTableTd: {
    borderTop: "1px solid ".concat(_theme["default"].grayLight),
    padding: padding
  }
};
exports.propTableStyles = propTableStyles;

var PropTable =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(PropTable, _Component);

  function PropTable() {
    (0, _classCallCheck2["default"])(this, PropTable);
    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(PropTable).apply(this, arguments));
  }

  (0, _createClass2["default"])(PropTable, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          component = _this$props.component,
          useTheme = _this$props.useTheme;

      if (!component) {
        return null;
      }

      var props = {};

      if (component.propTypes) {
        Object.keys(component.propTypes).forEach(function (property) {
          var typeInfo = component.propTypes[property];
          var propType = PropTypesMap.get(typeInfo) || 'other';
          var required = typeInfo.isRequired === undefined ? 'Yes' : 'No';
          props[property] = {
            property: property,
            propType: propType,
            required: required
          };
        });
      }

      if (component.defaultProps) {
        Object.keys(component.defaultProps).forEach(function (property) {
          var value = component.defaultProps[property];

          if (!props[property]) {
            props[property] = {
              property: property
            };
          }

          props[property].defaultValue = value;
        });
      }

      var propsList = Object.values(props);

      if (!propsList.length) {
        return _react["default"].createElement("small", null, "No propTypes defined!");
      }

      propsList.sort(function (a, b) {
        return a.property > b.property;
      });
      var thStyle = useTheme ? propTableStyles.propTableTh : {};
      var tdStyle = useTheme ? propTableStyles.propTableTd : {};
      return _react["default"].createElement("table", {
        style: useTheme ? propTableStyles.propTable : {},
        className: "propTable"
      }, _react["default"].createElement("thead", null, _react["default"].createElement("tr", null, _react["default"].createElement("th", {
        style: thStyle,
        className: "propTable-th"
      }, "Property"), _react["default"].createElement("th", {
        style: thStyle,
        className: "propTable-th"
      }, "PropType"), _react["default"].createElement("th", {
        style: thStyle,
        className: "propTable-th"
      }, "Required"), _react["default"].createElement("th", {
        style: thStyle,
        className: "propTable-th"
      }, "Default"))), _react["default"].createElement("tbody", null, propsList.map(function (row) {
        return _react["default"].createElement("tr", {
          key: row.property
        }, _react["default"].createElement("td", {
          style: tdStyle,
          className: "propTable-td"
        }, row.property), _react["default"].createElement("td", {
          style: tdStyle,
          className: "propTable-td"
        }, row.propType), _react["default"].createElement("td", {
          style: tdStyle,
          className: "propTable-td"
        }, row.required), _react["default"].createElement("td", {
          style: tdStyle,
          className: "propTable-td"
        }, row.defaultValue === undefined ? '-' : _react["default"].createElement(_PropVal["default"], {
          val: row.defaultValue
        })));
      })));
    }
  }]);
  return PropTable;
}(_react.Component);

exports["default"] = PropTable;
PropTable.displayName = 'PropTable';
PropTable.propTypes = propTypes;
PropTable.defaultProps = defaultProps;