react-storybook-addon-chapters/dist/components/Section.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.SectionDecorator = exports.sectionStyles = exports.sectionButtonStyles = 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 _Node = _interopRequireDefault(require("./Node"));

var _PropTable = _interopRequireDefault(require("./PropTable"));

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 = {
  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
  subtitle: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
  info: _propTypes["default"].string,
  showSource: _propTypes["default"].bool,
  showPropTables: _propTypes["default"].bool,
  propTables: _propTypes["default"].arrayOf(_propTypes["default"].func),
  children: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].array]).isRequired,
  allowSourceToggling: _propTypes["default"].bool,
  allowPropTablesToggling: _propTypes["default"].bool,
  addonInfo: _propTypes["default"].object.isRequired,
  useTheme: _propTypes["default"].bool
};
var defaultProps = {
  title: '',
  subtitle: '',
  info: '',
  showSource: true,
  allowSourceToggling: true,
  showPropTables: false,
  allowPropTablesToggling: true,
  useTheme: false
};
var sectionButtonStyles = {
  backgroundColor: 'transparent',
  border: "1px solid ".concat(_theme["default"].gray),
  borderRadius: 3,
  color: _theme["default"].grayDark,
  cursor: 'pointer',
  "float": 'right',
  marginLeft: 5,
  padding: '5px 10px'
};
exports.sectionButtonStyles = sectionButtonStyles;
var sectionStyles = {
  container: {
    marginBottom: 100
  },
  header: {
    marginBottom: 60
  },
  title: {
    color: _theme["default"].grayDarkest,
    fontSize: 18,
    marginBottom: 10
  },
  subtitle: {
    color: _theme["default"].grayDark,
    fontSize: 14,
    marginBottom: 20,
    marginTop: 0
  },
  buttonContainer: {
    height: 15
  },
  button: sectionButtonStyles,
  'button-active': _objectSpread({}, sectionButtonStyles, {
    backgroundColor: _theme["default"].grayLight,
    borderColor: _theme["default"].grayLight,
    color: _theme["default"].grayDark
  }),
  info: _theme["default"].infoStyle,
  componentContainer: {
    marginBottom: 60
  },
  subsection: {
    marginBottom: 60
  },
  subsectionTitle: {
    color: _theme["default"].grayDark,
    fontSize: 12,
    letterSpacing: 2,
    textTransform: 'uppercase'
  },
  pre: {
    fontSize: '.88em',
    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
    backgroundColor: 'rgb(250, 250, 250)',
    padding: '0.5rem',
    lineHeight: '1.5',
    overflowX: 'scroll'
  }
};
exports.sectionStyles = sectionStyles;

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

  (0, _createClass2["default"])(SectionDecorator, null, [{
    key: "main",
    value: function main(header, component, additional, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? sectionStyles.container : {},
        className: "section-container"
      }, header, component, additional);
    }
  }, {
    key: "header",
    value: function header(_header, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? sectionStyles.header : {},
        className: "section-header"
      }, _header);
    }
  }, {
    key: "title",
    value: function title(_title, useTheme) {
      return _react["default"].createElement("h3", {
        style: useTheme ? sectionStyles.title : {},
        className: "section-title"
      }, _title);
    }
  }, {
    key: "subtitle",
    value: function subtitle(_subtitle, useTheme) {
      return _react["default"].createElement("p", {
        style: useTheme ? sectionStyles.subtitle : {},
        className: "section-subtitle"
      }, _subtitle);
    }
  }, {
    key: "component",
    value: function component(_component, useTheme, decorator) {
      var decoratedComponent = decorator ? decorator(function () {
        return _component;
      }) : _component;
      return _react["default"].createElement("div", {
        style: useTheme ? sectionStyles.componentContainer : {},
        className: "section-component-container"
      }, decoratedComponent);
    }
  }, {
    key: "additional",
    value: function additional(_additional, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? sectionStyles.additional : {},
        className: "section-additional"
      }, _additional);
    }
  }, {
    key: "sourceCode",
    value: function sourceCode(_sourceCode, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? sectionStyles.subsection : {},
        className: "section-subsection"
      }, _react["default"].createElement("h4", {
        style: useTheme ? sectionStyles.subsection.title : {},
        className: "section-subsection-title"
      }, "Source"), _react["default"].createElement("pre", {
        style: useTheme ? sectionStyles.pre : {},
        className: "section-pre"
      }, _sourceCode));
    }
  }, {
    key: "propTables",
    value: function propTables(_propTables, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? sectionStyles.subsection : {},
        className: "section-subsection"
      }, _react["default"].createElement("h4", {
        style: useTheme ? sectionStyles.subsection.title : {},
        className: "section-subsection-title"
      }, "PropTypes"), _propTables);
    }
  }, {
    key: "buttons",
    value: function buttons(_buttons, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? sectionStyles.buttonContainer : {},
        className: "section-button-container"
      }, _buttons);
    }
  }, {
    key: "info",
    value: function info(infoContent, useTheme) {
      return _react["default"].createElement("div", {
        style: useTheme ? sectionStyles.subsection : {},
        className: "section-subsection"
      }, _react["default"].createElement("div", {
        style: useTheme ? sectionStyles.info : {},
        className: "section-info"
      }, infoContent));
    }
  }]);
  return SectionDecorator;
}();

exports.SectionDecorator = SectionDecorator;

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

  function Section(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Section);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Section).call(this, props));
    _this.state = {
      isSourceShown: props.showSource,
      isPropsTableShown: props.showPropTables
    };
    return _this;
  }

  (0, _createClass2["default"])(Section, [{
    key: "renderSourceCode",
    value: function renderSourceCode(useTheme) {
      var _this2 = this;

      var _this$props = this.props,
          addonInfo = _this$props.addonInfo,
          children = _this$props.children;

      var sourceCode = _react["default"].Children.map(children, function (root, idx) {
        return _react["default"].createElement(_Node["default"], (0, _extends2["default"])({
          key: idx,
          depth: 0,
          node: root
        }, addonInfo, _this2.props));
      });

      return SectionDecorator.sourceCode(sourceCode, useTheme);
    }
  }, {
    key: "renderPropTables",
    value: function renderPropTables(useTheme) {
      var _this$props2 = this.props,
          children = _this$props2.children,
          propTables = _this$props2.propTables;
      var components = new Map();

      if (!children) {
        return null;
      }

      if (propTables) {
        propTables.forEach(function (component) {
          components.set(component, true);
        });
      } // Depth-first traverse and collect components.


      function extract(traverseChildren) {
        if (!traverseChildren) {
          return;
        }

        if (Array.isArray(traverseChildren)) {
          traverseChildren.forEach(extract);
          return;
        }

        if (traverseChildren.props && traverseChildren.props.children) {
          extract(traverseChildren.props.children);
        }

        if (typeof traverseChildren === 'string' || typeof traverseChildren.type === 'string') {
          return;
        }

        if (traverseChildren.type && !components.has(traverseChildren.type)) {
          components.set(traverseChildren.type, true);
        }
      } // Extract components from children.


      extract(children);
      var componentsList = Array.from(components.keys());
      componentsList.sort(function (a, b) {
        return (a.displayName || a.name) > (b.displayName || b.name);
      });
      var newPropTables = componentsList.map(function (component, i) {
        return _react["default"].createElement("div", {
          key: i
        }, _react["default"].createElement("h5", null, "<", component.displayName || component.name, "> Component"), _react["default"].createElement(_PropTable["default"], {
          component: component,
          useTheme: useTheme
        }));
      });

      if (!newPropTables || newPropTables.length === 0) {
        return null;
      }

      return SectionDecorator.propTables(newPropTables, useTheme);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props3 = this.props,
          title = _this$props3.title,
          subtitle = _this$props3.subtitle,
          children = _this$props3.children,
          info = _this$props3.info,
          allowPropTablesToggling = _this$props3.allowPropTablesToggling,
          allowSourceToggling = _this$props3.allowSourceToggling,
          useTheme = _this$props3.useTheme,
          decorator = _this$props3.decorator;
      var showButtonsRow = allowPropTablesToggling || allowSourceToggling;
      var _this$state = this.state,
          isPropsTableShown = _this$state.isPropsTableShown,
          isSourceShown = _this$state.isSourceShown;

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

      var buttons = [allowPropTablesToggling && _react["default"].createElement("button", {
        type: "button",
        key: "allowPropTablesToggling",
        onClick: function onClick() {
          _this3.setState({
            isPropsTableShown: !_this3.state.isPropsTableShown
          });
        },
        style: useTheme ? isPropsTableShown ? sectionStyles['button-active'] : sectionStyles.button : isPropsTableShown ? sectionStyles['button-active'] : sectionStyles.button,
        className: isPropsTableShown ? 'button-active' : 'button'
      }, isPropsTableShown ? 'Hide' : 'Show', " Props Table"), allowSourceToggling && _react["default"].createElement("button", {
        type: "button",
        key: "allowSourceToggling",
        onClick: function onClick() {
          _this3.setState({
            isSourceShown: !isSourceShown
          });
        },
        style: useTheme ? isSourceShown ? sectionStyles['button-active'] : sectionStyles.button : isSourceShown ? sectionStyles['button-active'] : sectionStyles.button,
        className: isSourceShown ? 'button-active' : 'button'
      }, isSourceShown ? 'Hide' : 'Show', " Source")];

      var additional = _react["default"].createElement("div", null, info && SectionDecorator.info((0, _infoContent["default"])(info), useTheme), showButtonsRow && SectionDecorator.buttons(buttons, useTheme), isSourceShown && this.renderSourceCode(useTheme), isPropsTableShown && this.renderPropTables(useTheme));

      return SectionDecorator.main(SectionDecorator.header(header), SectionDecorator.component(children, useTheme, decorator), SectionDecorator.additional(additional), useTheme);
    }
  }]);
  return Section;
}(_react.Component);

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