storybook-addon-jsx/lib/renderer.js

Display the JSX of the story

"use strict";

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

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

var _components = require("@storybook/components");

var _storybookPrettyProps = _interopRequireDefault(require("storybook-pretty-props"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/** Combine the classnames and the stylesheet into a style prop */
function createStyleObject(classNames, elementStyle, stylesheet) {
  return classNames.reduce(function (styleObject, className) {
    return _objectSpread({}, styleObject, {}, stylesheet[className]);
  }, elementStyle);
}
/** Join and array of classnames into one */


function createClassNameString(classNames) {
  return classNames.join(' ');
}

/** Render the rows of children to HTML nodes or text */
function createChildren(components, stylesheet, useInlineStyles) {
  var childrenCount = 0;
  return function (children) {
    childrenCount += 1;
    return children.map(function (child, i) {
      return (// eslint-disable-next-line @typescript-eslint/no-use-before-define
        createElement({
          node: child,
          stylesheet: stylesheet,
          useInlineStyles: useInlineStyles,
          components: components,
          key: "code-segment-".concat(childrenCount, "-").concat(i)
        })
      );
    });
  };
}

var componentStack = [];
/** Transform a row of highlighted output into an HTML node */

function createElement(_ref) {
  var node = _ref.node,
      _ref$stylesheet = _ref.stylesheet,
      stylesheet = _ref$stylesheet === void 0 ? {} : _ref$stylesheet,
      components = _ref.components,
      _ref$style = _ref.style,
      style = _ref$style === void 0 ? {} : _ref$style,
      useInlineStyles = _ref.useInlineStyles,
      key = _ref.key;
  var properties = node.properties,
      type = node.type,
      tagName = node.tagName,
      value = node.value;

  if (type === 'text') {
    return value;
  }

  if (tagName) {
    var TagName = tagName;
    var childrenCreator = createChildren(components, stylesheet, useInlineStyles);
    var nonStylesheetClassNames = useInlineStyles && properties.className && properties.className.filter(function (className) {
      return !stylesheet[className];
    });
    var className = nonStylesheetClassNames && nonStylesheetClassNames.length ? nonStylesheetClassNames : '';
    var props = useInlineStyles ? _objectSpread({}, properties, {}, {
      className: className ? createClassNameString(className) : className
    }, {
      style: createStyleObject(properties.className, _objectSpread({}, properties.style, {}, style), stylesheet)
    }) : _objectSpread({}, properties, {
      className: createClassNameString(properties.className)
    });
    var children = childrenCreator(node.children);
    var lastComponent = componentStack[componentStack.length - 1] || '';
    var name = typeof children[0] === 'string' ? children[0] : '';
    var hasDocs = props.className.includes('class-name') || props.className.includes('attr-name');

    if (hasDocs) {
      var message;
      var title;

      if (props.className.includes('class-name')) {
        var docs = components[name] || {};

        if (docs.description) {
          title = children;
          message = _react["default"].createElement("div", null, docs.description);
        }

        componentStack.push(name);
      } else if (lastComponent.match(/^[A-Z]/)) {
        var _ref2 = components[lastComponent] || {},
            _ref2$props = _ref2.props,
            componentProps = _ref2$props === void 0 ? {} : _ref2$props;

        var _docs = componentProps[name] || {};

        if (_docs.type || _docs.description || _docs.required) {
          title = _react["default"].createElement("div", {
            style: {
              display: 'flex',
              justifyContent: 'space-between'
            }
          }, children, _docs.required && _react["default"].createElement("div", {
            style: {
              color: 'red',
              fontWeight: 900
            }
          }, "Required"));
          message = _react["default"].createElement("div", null, _react["default"].createElement("div", {
            style: {
              color: 'green',
              fontWeight: 'bold'
            }
          }, _react["default"].createElement(_storybookPrettyProps["default"], {
            propType: _docs.type
          })), _docs.description);
        }
      }

      if (title) {
        return _react["default"].createElement(_components.WithTooltip, {
          key: key,
          placement: "bottom",
          trigger: "hover",
          tooltip: _react["default"].createElement(_components.TooltipMessage, {
            title: title,
            desc: message
          })
        }, _react["default"].createElement(TagName, props, children));
      }
    } else if (name === '/>' || name === '>') {
      componentStack.pop();
    }

    return _react["default"].createElement(TagName, _extends({
      key: key
    }, props), children);
  }
}

/** Render a row from the react-syntax-highlighter output */
var jsxRenderer = function jsxRenderer(components) {
  return function (_ref3) {
    var rows = _ref3.rows,
        stylesheet = _ref3.stylesheet,
        useInlineStyles = _ref3.useInlineStyles;
    return rows.map(function (node, i) {
      return createElement({
        node: node,
        stylesheet: stylesheet,
        useInlineStyles: useInlineStyles,
        components: components,
        key: "code-segement".concat(i)
      });
    });
  };
};

var _default = jsxRenderer;
exports["default"] = _default;