wix-storybook-utils/dist/src/AutoDocs/props-table.js

Utilities for automated component documentation within Storybook

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropsTable = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var Markdown_1 = tslib_1.__importDefault(require("../Markdown"));
var styles_scss_1 = tslib_1.__importDefault(require("./styles.scss"));
var wrap = function (name) { return function (children) { return (react_1.default.createElement("span", null,
    name,
    " [",
    children,
    "]")); }; };
var failSafe = function (type) { return function () { return (react_1.default.createElement("span", null,
    "Unable to parse propType:",
    react_1.default.createElement("pre", null, JSON.stringify(type, null, 2)))); }; };
var buildLinkToType = function (tags) {
    var description = ((tags === null || tags === void 0 ? void 0 : tags.find(function (_a) {
        var title = _a.title;
        return title === 'linkTypeTo';
    })) || {}).description;
    if (description) {
        var baseUrl = window.parent.location.href;
        var isExternalLink = description.substring(0, 7) === 'http://' ||
            description.substring(0, 8) === 'https://';
        if (isExternalLink) {
            return description;
        }
        return (baseUrl.substring(0, baseUrl.indexOf('/story/') + 7) + description.toLowerCase());
    }
};
var PropTypeName = function (_a) {
    var name = _a.name, link = _a.link;
    if (link) {
        return (react_1.default.createElement("a", { "data-hook": "autodocs-prop-row-linked-type", href: link, target: "_blank" }, name));
    }
    return react_1.default.createElement("span", { "data-hook": "autodocs-prop-row-type" }, name);
};
var renderPropType = function (type, tags) {
    var _a;
    if (type === void 0) { type = {}; }
    var typeHandlers = {
        custom: function () { return wrap('custom')(''); },
        enum: function () {
            return wrap('oneOf')(Array.isArray(type.value)
                ? type.value.map(function (v, i, allValues) { return (react_1.default.createElement("span", { key: i },
                    react_1.default.createElement("code", null, v.value),
                    allValues[i + 1] && ', ')); })
                : JSON.stringify(type.value, null, 2));
        },
        union: function () {
            return wrap('oneOfType')(type.value.map(function (v, i, allValues) { return (react_1.default.createElement("span", { key: i },
                renderPropType(v),
                allValues[i + 1] && ', ')); }));
        },
        shape: function () {
            return type.computed
                ? type.value
                : wrap('shape')(react_1.default.createElement("ul", { style: { marginBottom: 0 } }, Object.keys(type.value)
                    .map(function (key) { return (tslib_1.__assign(tslib_1.__assign({}, type.value[key]), { key: key })); })
                    .map(function (v, i) { return (react_1.default.createElement("li", { key: i },
                    v.key,
                    ":\u00A0",
                    renderPropType(v),
                    v.required && (react_1.default.createElement("small", null,
                        react_1.default.createElement("strong", null, "\u00A0required"))))); })));
        },
        arrayOf: function () { return wrap('arrayOf')(renderPropType(type.value)); },
    };
    var propTypeName = type.value
        ? (typeHandlers[type.name] || failSafe(type))()
        : type.name;
    var propTypeNameOverride = (_a = (tags || []).find(function (_a) {
        var title = _a.title;
        return title === 'setTypeName';
    })) === null || _a === void 0 ? void 0 : _a.description;
    return (react_1.default.createElement(PropTypeName, { name: propTypeNameOverride || propTypeName, link: buildLinkToType(tags) }));
};
var prepareProps = function (props) {
    var asList = Object.keys(props).map(function (key) { return (tslib_1.__assign(tslib_1.__assign({}, props[key]), { name: key })); });
    var lexical = function (a, b) { return a.name.localeCompare(b.name); };
    var required = asList.filter(function (prop) { return prop.required; }).sort(lexical);
    var notRequired = asList.filter(function (prop) { return !prop.required; }).sort(lexical);
    // required props go first
    return required.concat(notRequired);
};
var PropsTable = function (_a) {
    var props = _a.props;
    return (react_1.default.createElement("table", { "data-hook": "autodocs-props-table" },
        react_1.default.createElement("thead", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "Name"),
                react_1.default.createElement("th", null, "Type"),
                react_1.default.createElement("th", null, "Default Value"),
                react_1.default.createElement("th", null, "Description"))),
        react_1.default.createElement("tbody", null, prepareProps(props).map(function (prop) { return (react_1.default.createElement("tr", { key: prop.name },
            react_1.default.createElement("td", { className: styles_scss_1.default.propName, "data-hook": "autodocs-prop-row-name" }, prop.name || '-'),
            react_1.default.createElement("td", { className: styles_scss_1.default.propType }, renderPropType(prop.type, prop.tags)),
            react_1.default.createElement("td", { className: styles_scss_1.default.defaultProp }, prop.defaultValue && prop.defaultValue.value && (react_1.default.createElement(Markdown_1.default, { source: "`".concat(prop.defaultValue.value, "`") }))),
            react_1.default.createElement("td", { className: styles_scss_1.default.description }, prop.description && react_1.default.createElement(Markdown_1.default, { source: prop.description })))); }))));
};
exports.PropsTable = PropsTable;
//# sourceMappingURL=props-table.js.map