storybook-readme/services/getDocsLayout.js

Storybook addon to show components README (for React and Vue)

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = getDocsLayout;

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

var _transformEmojis = _interopRequireDefault(require("./transformEmojis"));

var _marked = _interopRequireDefault(require("./marked"));

var _getPropsTables = _interopRequireDefault(require("./getPropsTables"));

var _validatePropTables = require("./getPropsTables/validatePropTables");

var _config = require("./config");

var _reactElementToJsxString = _interopRequireDefault(require("react-element-to-jsx-string"));

var _const = require("../const");

function split(md, story, config) {
  return md
  /**
   * Should replace <!-- --> with custom placeholders to allow default md/html comments
   */
  .replace(_const.MARKER_STORY, "___{{".concat(_const.LAYOUT_TYPE_STORY, "}}___")).replace(_const.MARKER_STORY_SOURCE, "___{{".concat(_const.LAYOUT_TYPE_STORY_SOURCE, "}}___")).replace(_const.MARKER_PROPS_TABLE, "___{{".concat(_const.LAYOUT_TYPE_PROPS_TABLE, "}}___")).split(/___{{|}}___/) // .split(/<!--|-->/)
  .filter(function (p) {
    return p.trim().length !== 0;
  }).map(function (part) {
    switch (part.trim()) {
      case _const.LAYOUT_TYPE_STORY:
        return {
          type: _const.LAYOUT_TYPE_STORY,
          content: story
        };

      case _const.LAYOUT_TYPE_STORY_SOURCE:
        return {
          type: _const.LAYOUT_TYPE_STORY_SOURCE,
          content: getStorySource(story)
        };

      case _const.LAYOUT_TYPE_PROPS_TABLE:
        return {
          type: _const.LAYOUT_TYPE_PROPS_TABLE,
          content: (0, _getPropsTables.default)({
            story: story,
            config: config
          })
        };

      default:
        return {
          type: _const.LAYOUT_TYPE_MD,
          // content: marked(part),
          content: part
        };
    }
  });
}

function getStorySource(story) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
    tabStop: 2,
    sortProps: true,
    maxInlineAttributesLineLength: 100
  };
  var storySource = story && story.props && story.props.children;
  var stringifiedSource = storySource ? (0, _reactElementToJsxString.default)(storySource, options) : '';
  return processMd('```jsx\n' + stringifiedSource + '\n```');
}

function processMd(md) {
  return (0, _marked.default)((0, _transformEmojis.default)(md.replace(_const.MARKER_HIDDEN, '')));
}

function getDocsLayout(_ref) {
  var md = _ref.md,
      story = _ref.story,
      _ref$excludePropTable = _ref.excludePropTables,
      excludePropTables = _ref$excludePropTable === void 0 ? [] : _ref$excludePropTable,
      _ref$includePropTable = _ref.includePropTables,
      includePropTables = _ref$includePropTable === void 0 ? [] : _ref$includePropTable;
  var mdAsArray = Array.isArray(md) ? (0, _toConsumableArray2.default)(md) : [md]; // const mdWithEmojis = mdAsArray.map(md => transformEmojis(md));

  var mdWithEmojis = mdAsArray.map(processMd);
  var main = mdWithEmojis[0];
  var propTables = (0, _validatePropTables.validatePropTables)(excludePropTables, includePropTables);
  var layout = (0, _toConsumableArray2.default)(split(main, story, propTables));
  mdWithEmojis.slice(1).map(function (md) {
    layout.push.apply(layout, (0, _toConsumableArray2.default)(split(md, story, propTables)));
  });

  if (layout.findIndex(function (p) {
    return p.type === _const.LAYOUT_TYPE_STORY;
  }) === -1) {
    layout.push({
      type: _const.LAYOUT_TYPE_STORY,
      content: story
    });
  }

  var config = (0, _config.getConfig)();

  if (config.footer) {
    layout.push({
      type: _const.LAYOUT_TYPE_FOOTER_MD,
      content: processMd(config.footer)
    });
  }

  if (config.header) {
    layout.unshift({
      type: _const.LAYOUT_TYPE_HEADER_MD,
      content: processMd(config.header)
    });
  }

  return layout;
}