react-storybook-addon-chapters/dist/components/Story.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.StoryDecorator = exports.storyStyles = void 0;

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

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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

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

var _Chapter = _interopRequireDefault(require("./Chapter"));

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,
  chapters: _propTypes["default"].arrayOf(_propTypes["default"].object),
  addonInfo: _propTypes["default"].object,
  sectionOptions: _propTypes["default"].object
};
var defaultProps = {
  context: {},
  title: '',
  subtitle: '',
  info: '',
  chapters: []
};
var storyStyles = {
  story: _objectSpread({}, _components.baseFonts),
  header: {
    marginBottom: 60
  },
  title: {
    color: _theme["default"].grayDarkest,
    fontSize: 36,
    marginBottom: 10
  },
  subtitle: {
    color: _theme["default"].grayDark,
    fontSize: 18,
    marginBottom: 20,
    marginTop: 0
  },
  info: _theme["default"].infoStyle
};
exports.storyStyles = storyStyles;

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

  (0, _createClass2["default"])(StoryDecorator, null, [{
    key: "title",
    value: function title(_title, useTheme) {
      return _react["default"].createElement("h1", {
        style: useTheme ? storyStyles.title : {},
        className: "story-title"
      }, _title);
    }
  }, {
    key: "subtitle",
    value: function subtitle(_subtitle, useTheme) {
      return _react["default"].createElement("span", {
        style: useTheme ? storyStyles.subtitle : {},
        className: "story-subtitle"
      }, _subtitle);
    }
  }, {
    key: "info",
    value: function info(_info, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? storyStyles.info : {},
        className: "story-info"
      }, _info);
    }
  }, {
    key: "main",
    value: function main(header, chapters, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? storyStyles.story : {},
        className: "story"
      }, _react["default"].createElement("div", {
        style: useTheme ? storyStyles.info : {},
        className: "story-header"
      }, header), _react["default"].createElement("div", {
        className: "story-chapters"
      }, chapters));
    }
  }]);
  return StoryDecorator;
}();

exports.StoryDecorator = StoryDecorator;

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

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

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

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

      var renderedChapters = chapters.map(function (chapter, i) {
        return _react["default"].createElement(_Chapter["default"], (0, _extends2["default"])({
          key: i,
          context: context,
          addonInfo: addonInfo,
          useTheme: useTheme
        }, chapter));
      });
      return StoryDecorator.main(header, renderedChapters, useTheme);
    }
  }]);
  return Story;
}(_react.Component);

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