storybook-addon-react-docgen
Version:
A storybook addon to display react docgen info.
266 lines (210 loc) • 10.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.stylesheetBase = exports.getProps = void 0;
var _react = _interopRequireDefault(require("react"));
var _utils = require("./utils");
var _PropTable = _interopRequireDefault(require("./PropTable"));
var _makeTableComponent = _interopRequireDefault(require("./makeTableComponent"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var getDescription = function getDescription(type) {
var _type$__docgenInfo;
return (_type$__docgenInfo = type.__docgenInfo) === null || _type$__docgenInfo === void 0 ? void 0 : _type$__docgenInfo.description;
};
var getProps = function getProps(_ref) {
var propTables = _ref.propTables,
include = _ref.include,
exclude = _ref.exclude,
order = _ref.order,
children = _ref.children;
var types = new Map();
if (propTables === null) {
return [];
}
if (propTables) {
propTables.forEach(function (type) {
types.set(type, true);
});
}
var propTableCompare = function propTableCompare(element, Component) {
// https://github.com/gaearon/react-hot-loader#checking-element-types
// @ts-expect-error
// eslint-disable-next-line no-undef
if (typeof reactHotLoaderGlobal !== 'undefined') {
// @ts-expect-error
// eslint-disable-next-line no-undef
if (reactHotLoaderGlobal.areComponentsEqual(element.type, Component)) {
return true;
}
}
if (element.type === Component) {
return true;
}
if (element.type && _typeof(element.type) && element.type.name === Component) {
return true;
}
if (element.type && _typeof(element.type) && element.type.displayName === Component) {
return true;
}
return false;
}; // Depth-first traverse and collect types
var extract = function extract(innerChild) {
var _innerChild$props;
if (!innerChild) {
return;
}
if (Array.isArray(innerChild)) {
innerChild.forEach(function (c) {
return extract(c);
});
return;
}
if ((_innerChild$props = innerChild.props) === null || _innerChild$props === void 0 ? void 0 : _innerChild$props.children) {
extract(innerChild.props.children);
}
if (innerChild.props) {
Object.values(innerChild.props).forEach(function (value) {
var values = Array.isArray(value) ? value : [value];
values.forEach(function (v) {
if (_typeof(v) === 'object' && v !== null && v.type) {
extract(v);
}
});
});
}
if (typeof innerChild === 'string' || typeof innerChild.type === 'string' || Array.isArray(exclude) && // Also ignore excluded types
exclude.some(function (Comp) {
return propTableCompare(innerChild, Comp);
})) {
return;
}
if (innerChild.type && !types.has(innerChild.type)) {
if (!include || include.some(function (Comp) {
return propTableCompare(innerChild, Comp);
})) {
types.set(innerChild.type, true);
}
}
}; // Extract components from children
extract(children);
var array = _toConsumableArray(types.keys());
if (order && Array.isArray(order) && order.length > 0) {
array.sort(function (a, b) {
var nameA = (0, _utils.getName)(a);
var nameB = (0, _utils.getName)(b);
var sA = order.indexOf(nameA);
var sB = order.indexOf(nameB);
if (sA === -1 && sB === -1) {
return nameA.localeCompare(nameB);
}
if (sA === -1) {
return 1;
}
if (sB === -1) {
return -1;
}
return sA - sB;
});
} else {
array.sort(function (a, b) {
return (0, _utils.getName)(a).localeCompare((0, _utils.getName)(b));
});
}
return array;
};
exports.getProps = getProps;
var stylesheetBase = {
infoBody: {
fontWeight: 300,
lineHeight: 1.45,
fontSize: '15px',
padding: '20px 40px 40px',
borderRadius: '2px',
marginTop: '20px',
marginBottom: '20px'
},
h1: {
margin: '20px 0 0 0',
padding: '0 0 5px 0',
fontSize: '25px',
borderBottom: '1px solid #EEE'
},
propTableHead: {
margin: '20px 0 0 0',
fontSize: 20
},
description: {},
infoPage: {}
};
exports.stylesheetBase = stylesheetBase;
var getPropTables = function getPropTables(props, stylesheet) {
var _props$components = props.components,
components = _props$components === void 0 ? [] : _props$components,
maxPropObjectKeys = props.maxPropObjectKeys,
maxPropArrayLength = props.maxPropArrayLength,
maxPropStringLength = props.maxPropStringLength,
excludedPropTypes = props.excludedPropTypes,
PropTable = props.PropTable;
var propTables = props.propTables;
if (propTables === null) {
return null;
}
var componentPropTables = components.map(function (type, i) {
var description = getDescription(type);
return (
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
_react["default"].createElement("div", {
key: "".concat((0, _utils.getName)(type), "_").concat(i)
}, /*#__PURE__*/_react["default"].createElement("h2", {
style: stylesheet.propTableHead
}, "\u201C", (0, _utils.getName)(type), "\u201D Component"), description && /*#__PURE__*/_react["default"].createElement("p", {
style: stylesheet.description
}, description), /*#__PURE__*/_react["default"].createElement(PropTable, {
type: type,
maxPropObjectKeys: maxPropObjectKeys,
maxPropArrayLength: maxPropArrayLength,
maxPropStringLength: maxPropStringLength,
excludedPropTypes: excludedPropTypes
}))
);
});
if (!componentPropTables || componentPropTables.length === 0) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h1", {
style: stylesheet.h1
}, "Prop Types"), componentPropTables);
};
var Story = function Story(_ref2) {
var styles = _ref2.styles,
props = _objectWithoutProperties(_ref2, ["styles"]);
var _React$useState = _react["default"].useState(typeof styles === 'function' ? styles(stylesheetBase) : styles),
_React$useState2 = _slicedToArray(_React$useState, 1),
stylesheet = _React$useState2[0];
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
style: stylesheet.infoPage
}, /*#__PURE__*/_react["default"].createElement("div", {
style: stylesheet.infoBody
}, getPropTables(props, stylesheet))));
};
Story.defaultProps = {
PropTable: (0, _makeTableComponent["default"])(_PropTable["default"]),
excludedPropTypes: []
};
var _default = Story;
exports["default"] = _default;