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

Utilities for automated component documentation within Storybook

import { __assign } from "tslib";
import React from 'react';
import Markdown from '../Markdown';
import styles from './styles.scss';
var wrap = function (name) { return function (children) { return (React.createElement("span", null,
    name,
    " [",
    children,
    "]")); }; };
var failSafe = function (type) { return function () { return (React.createElement("span", null,
    "Unable to parse propType:",
    React.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.createElement("a", { "data-hook": "autodocs-prop-row-linked-type", href: link, target: "_blank" }, name));
    }
    return React.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.createElement("span", { key: i },
                    React.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.createElement("span", { key: i },
                renderPropType(v),
                allValues[i + 1] && ', ')); }));
        },
        shape: function () {
            return type.computed
                ? type.value
                : wrap('shape')(React.createElement("ul", { style: { marginBottom: 0 } }, Object.keys(type.value)
                    .map(function (key) { return (__assign(__assign({}, type.value[key]), { key: key })); })
                    .map(function (v, i) { return (React.createElement("li", { key: i },
                    v.key,
                    ":\u00A0",
                    renderPropType(v),
                    v.required && (React.createElement("small", null,
                        React.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.createElement(PropTypeName, { name: propTypeNameOverride || propTypeName, link: buildLinkToType(tags) }));
};
var prepareProps = function (props) {
    var asList = Object.keys(props).map(function (key) { return (__assign(__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);
};
export var PropsTable = function (_a) {
    var props = _a.props;
    return (React.createElement("table", { "data-hook": "autodocs-props-table" },
        React.createElement("thead", null,
            React.createElement("tr", null,
                React.createElement("th", null, "Name"),
                React.createElement("th", null, "Type"),
                React.createElement("th", null, "Default Value"),
                React.createElement("th", null, "Description"))),
        React.createElement("tbody", null, prepareProps(props).map(function (prop) { return (React.createElement("tr", { key: prop.name },
            React.createElement("td", { className: styles.propName, "data-hook": "autodocs-prop-row-name" }, prop.name || '-'),
            React.createElement("td", { className: styles.propType }, renderPropType(prop.type, prop.tags)),
            React.createElement("td", { className: styles.defaultProp }, prop.defaultValue && prop.defaultValue.value && (React.createElement(Markdown, { source: "`".concat(prop.defaultValue.value, "`") }))),
            React.createElement("td", { className: styles.description }, prop.description && React.createElement(Markdown, { source: prop.description })))); }))));
};
//# sourceMappingURL=props-table.js.map