storybook-readme/components/ReadmeContent/index.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 = void 0;

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

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

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

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

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

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

var _StoryPreview = _interopRequireDefault(require("../Preview/StoryPreview"));

var _FooterPreview = _interopRequireDefault(require("../Preview/FooterPreview"));

var _HeaderPreview = _interopRequireDefault(require("../Preview/HeaderPreview"));

var _DocPreview = _interopRequireDefault(require("../Preview/DocPreview"));

var _highlite = _interopRequireDefault(require("../../services/highlite"));

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

var _githubMarkdownCss = _interopRequireDefault(require("../../styles/githubMarkdownCss"));

var _codeThemeCss = _interopRequireDefault(require("../../styles/codeThemeCss"));

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

var ReadmeContentContext = _react.default.createContext({
  withPreview: true
});

var ReadmeContent =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(ReadmeContent, _React$Component);

  function ReadmeContent() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, ReadmeContent);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ReadmeContent)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      withPreview: true
    };
    _this.ref = null;

    _this.handleRef = function (ref) {
      _this.ref = ref;

      _this.highlight();
    };

    _this.notifyParent = function () {
      _this.setState({
        withPreview: false
      });
    };

    return _this;
  }

  (0, _createClass2.default)(ReadmeContent, [{
    key: "highlight",
    value: function highlight() {
      if (this.ref && this.props.codeTheme) {
        (0, _highlite.default)(this.ref);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.highlight();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.ref = null;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      /**
       * ReadmeContent notify parent ReadmeContent to hide story preview
       * if combined decorators/hocs  way with `addParamters()`
       */
      if (this.context && this.context.notifyParent) {
        this.context.notifyParent();
      } else {
        (0, _githubMarkdownCss.default)({
          theme: this.props.theme
        });

        if (this.props.codeTheme) {
          (0, _codeThemeCss.default)({
            codeTheme: this.props.codeTheme
          });
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var config = (0, _config.getConfig)();
      var _this$props = this.props,
          layout = _this$props.layout,
          _this$props$withPrevi = _this$props.withPreview,
          withPreview = _this$props$withPrevi === void 0 ? true : _this$props$withPrevi,
          _this$props$StoryPrev = _this$props.StoryPreview,
          StoryPreview = _this$props$StoryPrev === void 0 ? config.StoryPreview || _StoryPreview.default : _this$props$StoryPrev,
          _this$props$FooterPre = _this$props.FooterPreview,
          FooterPreview = _this$props$FooterPre === void 0 ? config.FooterPreview || _FooterPreview.default : _this$props$FooterPre,
          _this$props$HeaderPre = _this$props.HeaderPreview,
          HeaderPreview = _this$props$HeaderPre === void 0 ? config.HeaderPreview || _HeaderPreview.default : _this$props$HeaderPre,
          _this$props$DocPrevie = _this$props.DocPreview,
          DocPreview = _this$props$DocPrevie === void 0 ? config.DocPreview || _DocPreview.default : _this$props$DocPrevie;
      return _react.default.createElement(ReadmeContentContext.Provider, {
        value: {
          notifyParent: this.notifyParent
        }
      }, _react.default.createElement("div", {
        className: 'storybook-readme-story',
        ref: this.handleRef
      }, layout.map(function (_ref, index) {
        var type = _ref.type,
            content = _ref.content;

        if (!_this2.props.types.includes(type)) {
          return null;
        }

        switch (type) {
          case _const.LAYOUT_TYPE_FOOTER_MD:
            return _react.default.createElement(FooterPreview, {
              key: index
            }, _react.default.createElement("div", {
              className: 'markdown-body',
              dangerouslySetInnerHTML: {
                __html: content
              }
            }));

          case _const.LAYOUT_TYPE_HEADER_MD:
            return _react.default.createElement(HeaderPreview, {
              key: index
            }, _react.default.createElement("div", {
              className: 'markdown-body',
              dangerouslySetInnerHTML: {
                __html: content
              }
            }));

          case _const.LAYOUT_TYPE_MD:
            return _react.default.createElement(DocPreview, {
              key: index
            }, _react.default.createElement("div", {
              className: 'markdown-body',
              dangerouslySetInnerHTML: {
                __html: content
              }
            }));

          case _const.LAYOUT_TYPE_STORY:
            {
              if (!withPreview || !_this2.state.withPreview) {
                return _react.default.createElement(_react.default.Fragment, {
                  key: index
                }, content);
              } else {
                return _react.default.createElement(StoryPreview, {
                  key: index
                }, content);
              }
            }

          case _const.LAYOUT_TYPE_STORY_SOURCE:
            {
              return _react.default.createElement(DocPreview, {
                key: index
              }, _react.default.createElement("div", {
                className: 'markdown-body',
                dangerouslySetInnerHTML: {
                  __html: content
                }
              }));
            }

          case _const.LAYOUT_TYPE_PROPS_TABLE:
            {
              if (!content) {
                return null;
              }

              return content.map(function (md, index) {
                if (md === null) {
                  return null;
                }

                return _react.default.createElement("div", {
                  key: index,
                  className: 'markdown-body markdown-props-table',
                  dangerouslySetInnerHTML: {
                    __html: md
                  }
                });
              });
            }

          default:
            return null;
        }
      })));
    }
  }]);
  return ReadmeContent;
}(_react.default.Component);

exports.default = ReadmeContent;
ReadmeContent.defaultProps = {
  types: [_const.LAYOUT_TYPE_MD, _const.LAYOUT_TYPE_STORY, _const.LAYOUT_TYPE_STORY_SOURCE, _const.LAYOUT_TYPE_PROPS_TABLE, _const.LAYOUT_TYPE_FOOTER_MD, _const.LAYOUT_TYPE_HEADER_MD]
};
ReadmeContent.contextType = ReadmeContentContext;