react-storybook-addon-chapters/dist/components/Chapter.js

React Storybook Chapters addon allows showcasing of multiple components within a story by breaking it down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Section = _interopRequireDefault(require("./Section"));

var _infoContent = _interopRequireDefault(require("../utils/info-content"));

var _theme = _interopRequireDefault(require("../theme"));

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) { (0, _defineProperty2["default"])(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; }

var propTypes = {
  context: _propTypes["default"].object,
  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
  subtitle: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
  info: _propTypes["default"].string,
  sections: _propTypes["default"].arrayOf(_propTypes["default"].object),
  addonInfo: _propTypes["default"].object,
  useTheme: _propTypes["default"].bool
};
var defaultProps = {
  context: {},
  title: '',
  subtitle: '',
  info: '',
  sections: []
};
var chapterStyles = {
  header: {
    marginBottom: 60
  },
  hr: {
    border: 'none',
    backgroundColor: _theme["default"].border,
    height: 1
  },
  title: {
    color: _theme["default"].grayDarkest,
    fontSize: 24,
    marginBottom: 10
  },
  subtitle: {
    color: _theme["default"].grayDark,
    fontSize: 16,
    marginBottom: 20,
    marginTop: 0
  },
  info: _theme["default"].infoStyle
};
exports.chapterStyles = chapterStyles;

var ChapterDecorator =
/*#__PURE__*/
function () {
  function ChapterDecorator() {
    (0, _classCallCheck2["default"])(this, ChapterDecorator);
  }

  (0, _createClass2["default"])(ChapterDecorator, null, [{
    key: "title",
    value: function title(_title, useTheme) {
      return _react["default"].createElement("h3", {
        style: useTheme ? chapterStyles.title : {},
        className: "chapter-h3"
      }, _title);
    }
  }, {
    key: "subtitle",
    value: function subtitle(_subtitle, useTheme) {
      return _react["default"].createElement("span", {
        style: useTheme ? chapterStyles.subTitle : {},
        className: "chapter-subtitle"
      }, _subtitle);
    }
  }, {
    key: "info",
    value: function info(_info, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? chapterStyles.info : {},
        className: "chapter-info"
      }, _info);
    }
  }, {
    key: "ruler",
    value: function ruler(useTheme) {
      return _react["default"].createElement("hr", {
        style: useTheme ? chapterStyles.hr : {},
        className: "chapter-hr"
      });
    }
  }, {
    key: "main",
    value: function main(header, sections, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? chapterStyles.chapter : {},
        className: "chapter"
      }, _react["default"].createElement("div", {
        style: useTheme ? chapterStyles.header : {},
        className: "chapter-header"
      }, header), _react["default"].createElement("div", {
        className: "chapter-sections"
      }, sections));
    }
  }]);
  return ChapterDecorator;
}();

exports.ChapterDecorator = ChapterDecorator;

var Chapter =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(Chapter, _Component);

  function Chapter() {
    (0, _classCallCheck2["default"])(this, Chapter);
    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Chapter).apply(this, arguments));
  }

  (0, _createClass2["default"])(Chapter, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          context = _this$props.context,
          title = _this$props.title,
          subtitle = _this$props.subtitle,
          info = _this$props.info,
          sections = _this$props.sections,
          addonInfo = _this$props.addonInfo,
          useTheme = _this$props.useTheme;

      var header = _react["default"].createElement("div", null, title && ChapterDecorator.title(title, useTheme), subtitle && ChapterDecorator.subtitle(subtitle, useTheme), (subtitle || info) && ChapterDecorator.ruler(useTheme), info && ChapterDecorator.subtitle((0, _infoContent["default"])(info), useTheme));

      var renderedSections = sections.map(function (section, index) {
        var options = section.options || {};

        var sectionProps = _objectSpread({
          context: context,
          title: section.title,
          subtitle: section.subtitle,
          info: section.info
        }, options, {
          addonInfo: addonInfo
        });

        return _react["default"].createElement(_Section["default"], (0, _extends2["default"])({
          key: index
        }, sectionProps, {
          useTheme: useTheme
        }), section.sectionFn(context));
      });
      return ChapterDecorator.main(header, renderedSections, useTheme);
    }
  }]);
  return Chapter;
}(_react.Component);

exports["default"] = Chapter;
Chapter.displayName = 'Chapter';
Chapter.propTypes = propTypes;
Chapter.defaultProps = defaultProps;