@compositor/kit/dist/Library.js

Components for development environments, style guides, and demos

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Head = exports.Detail = exports.Example = exports.Library = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp2;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _nanoStyle = require('nano-style');

var _nanoStyle2 = _interopRequireDefault(_nanoStyle);

var _reactRouterDom = require('react-router-dom');

var _ui = require('./ui');

var _Frame = require('./Frame');

var _Frame2 = _interopRequireDefault(_Frame);

var _Catch = require('./Catch');

var _Catch2 = _interopRequireDefault(_Catch);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Root = (0, _nanoStyle2.default)('div')({
  display: 'flex',
  alignItems: 'flex-start',
  height: '100vh'
});

var Main = (0, _nanoStyle2.default)('div')({
  flex: '1 1 auto',
  height: '100vh',
  overflowY: 'auto',
  WebkitOverflowScrolling: 'touch'
});

var Card = (0, _nanoStyle2.default)(_reactRouterDom.Link)({
  display: 'block',
  color: 'inherit',
  textDecoration: 'none',
  overflow: 'hidden',
  border: '1px solid #f6f6f6',
  '&:hover': {
    borderColor: '#ddd'
  }
});

var SideBar = (0, _nanoStyle2.default)('div')({
  width: '192px',
  flex: 'none',
  height: '100vh',
  overflowY: 'auto',
  WebkitOverflowScrolling: 'touch',
  borderRight: '1px solid #f6f6f6'
});

var NavItem = (0, _nanoStyle2.default)(_reactRouterDom.NavLink)({
  display: 'block',
  paddingLeft: '8px',
  paddingRight: '8px',
  paddingTop: '4px',
  paddingBottom: '4px',
  fontSize: '12px',
  fontWeight: 'bold',
  textDecoration: 'none',
  color: 'inherit',
  WebkitUserSelect: 'none',
  userSelect: 'none',
  '&.active': {
    color: 'white',
    backgroundColor: 'black'
  }
});

var Router = typeof document !== 'undefined' ? _reactRouterDom.BrowserRouter : _reactRouterDom.StaticRouter;

var Library = exports.Library = function (_React$Component) {
  (0, _inherits3.default)(Library, _React$Component);

  function Library() {
    (0, _classCallCheck3.default)(this, Library);
    return (0, _possibleConstructorReturn3.default)(this, (Library.__proto__ || (0, _getPrototypeOf2.default)(Library)).apply(this, arguments));
  }

  (0, _createClass3.default)(Library, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          basename = _props.basename,
          props = (0, _objectWithoutProperties3.default)(_props, ['basename']);


      return _react2.default.createElement(
        Router,
        { basename: basename, context: {} },
        _react2.default.createElement(LibraryApp, props)
      );
    }
  }]);
  return Library;
}(_react2.default.Component);

var LibraryApp = (0, _reactRouterDom.withRouter)((_temp2 = _class = function (_React$Component2) {
  (0, _inherits3.default)(_class, _React$Component2);

  function _class() {
    var _ref;

    var _temp, _this2, _ret;

    (0, _classCallCheck3.default)(this, _class);

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

    return _ret = (_temp = (_this2 = (0, _possibleConstructorReturn3.default)(this, (_ref = _class.__proto__ || (0, _getPrototypeOf2.default)(_class)).call.apply(_ref, [this].concat(args))), _this2), _this2.getExampleChildren = function (_ref2) {
      var children = _ref2.children;
      return _react2.default.Children.toArray(children).filter(function (c) {
        return c.type._kitLibraryExample;
      }).filter(function (c) {
        return !!c.props.name;
      }).map(function (c) {
        return {
          name: c.props.name,
          element: c.props.children
        };
      });
    }, _this2.getHead = function (_ref3) {
      var children = _ref3.children;

      var _React$Children$toArr = _react2.default.Children.toArray(children).filter(function (c) {
        return c.type === Head;
      }),
          _React$Children$toArr2 = (0, _slicedToArray3.default)(_React$Children$toArr, 1),
          head = _React$Children$toArr2[0];

      if (!head || !head.props) return null;
      return head.props.children;
    }, _temp), (0, _possibleConstructorReturn3.default)(_this2, _ret);
  }

  (0, _createClass3.default)(_class, [{
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          title = _props2.title,
          renderSideNav = _props2.renderSideNav,
          renderCard = _props2.renderCard;


      var examples = this.props.examples || this.getExampleChildren(this.props);
      var head = this.getHead(this.props);

      var sidenav = typeof renderSideNav === 'function' ? renderSideNav((0, _extends3.default)({}, this.state, { title: title, examples: examples })) : _react2.default.createElement(SideNav, { title: title, examples: examples });

      return _react2.default.createElement(
        Root,
        null,
        _react2.default.createElement(
          SideBar,
          null,
          sidenav
        ),
        _react2.default.createElement(
          Main,
          null,
          _react2.default.createElement(_reactRouterDom.Route, {
            exact: true,
            path: '/',
            render: function render() {
              return _react2.default.createElement(
                _ui.Grid,
                null,
                examples.map(function (example) {
                  return typeof renderCard === 'function' ? renderCard({ example: example, Card: Card, Link: _reactRouterDom.Link }) : _react2.default.createElement(
                    Card,
                    { key: example.name, to: '/' + example.name },
                    _react2.default.createElement(
                      _Catch2.default,
                      null,
                      _react2.default.createElement(
                        _ui.Box,
                        { p: 2 },
                        _react2.default.createElement(ExampleFrame, {
                          head: head,
                          example: example
                        })
                      )
                    )
                  );
                })
              );
            }
          }),
          examples.map(function (example) {
            return _react2.default.createElement(_reactRouterDom.Route, {
              key: example.name,
              path: '/' + example.name,
              render: function render() {
                return _react2.default.createElement(
                  _ui.Box,
                  null,
                  _react2.default.createElement(
                    _Catch2.default,
                    null,
                    _react2.default.createElement(ExampleFrame, {
                      head: head,
                      example: example,
                      height: '100vh'
                    })
                  )
                );
              }
            });
          })
        )
      );
    }
  }]);
  return _class;
}(_react2.default.Component), _class.propTypes = {
  title: _propTypes2.default.string,
  examples: _propTypes2.default.array,
  renderSideNav: _propTypes2.default.func,
  renderCard: _propTypes2.default.func,
  useFrame: _propTypes2.default.bool
}, _temp2));

var ExampleFrame = function ExampleFrame(_ref4) {
  var example = _ref4.example,
      useFrame = _ref4.useFrame,
      head = _ref4.head;

  if (!useFrame) {
    return example.element;
  }
  return _react2.default.createElement(
    _Frame2.default,
    (0, _extends3.default)({ head: head }, props),
    example.element
  );
};

var SideNav = function (_React$Component3) {
  (0, _inherits3.default)(SideNav, _React$Component3);

  function SideNav() {
    (0, _classCallCheck3.default)(this, SideNav);
    return (0, _possibleConstructorReturn3.default)(this, (SideNav.__proto__ || (0, _getPrototypeOf2.default)(SideNav)).apply(this, arguments));
  }

  (0, _createClass3.default)(SideNav, [{
    key: 'render',
    value: function render() {
      var _props3 = this.props,
          examples = _props3.examples,
          title = _props3.title;


      return _react2.default.createElement(
        _react2.default.Fragment,
        null,
        _react2.default.createElement(
          NavItem,
          { exact: true, to: '/' },
          title
        ),
        examples.map(function (example) {
          return _react2.default.createElement(
            NavItem,
            { key: example.name, to: '/' + example.name },
            example.name
          );
        })
      );
    }
  }]);
  return SideNav;
}(_react2.default.Component);

SideNav.propTypes = {
  title: _propTypes2.default.string,
  examples: _propTypes2.default.array
};
SideNav.defaultProps = {
  title: 'Kit',
  examples: []
};

var Example = exports.Example = function (_React$Component4) {
  (0, _inherits3.default)(Example, _React$Component4);

  function Example() {
    (0, _classCallCheck3.default)(this, Example);
    return (0, _possibleConstructorReturn3.default)(this, (Example.__proto__ || (0, _getPrototypeOf2.default)(Example)).apply(this, arguments));
  }

  (0, _createClass3.default)(Example, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(_react2.default.Fragment, this.props);
    }
  }]);
  return Example;
}(_react2.default.Component);

Example._kitLibraryExample = true;
Example.propTypes = {
  name: _propTypes2.default.string.isRequired
};
var Detail = exports.Detail = (0, _reactRouterDom.withRouter)(function (_React$Component5) {
  (0, _inherits3.default)(_class2, _React$Component5);

  function _class2() {
    (0, _classCallCheck3.default)(this, _class2);
    return (0, _possibleConstructorReturn3.default)(this, (_class2.__proto__ || (0, _getPrototypeOf2.default)(_class2)).apply(this, arguments));
  }

  (0, _createClass3.default)(_class2, [{
    key: 'render',
    value: function render() {
      var location = this.props.location;

      if (location.pathname === '/') return false;

      return _react2.default.createElement('div', this.props);
    }
  }]);
  return _class2;
}(_react2.default.Component));

var Head = exports.Head = function (_React$Component6) {
  (0, _inherits3.default)(Head, _React$Component6);

  function Head() {
    (0, _classCallCheck3.default)(this, Head);
    return (0, _possibleConstructorReturn3.default)(this, (Head.__proto__ || (0, _getPrototypeOf2.default)(Head)).apply(this, arguments));
  }

  (0, _createClass3.default)(Head, [{
    key: 'render',
    value: function render() {
      return false;
    }
  }]);
  return Head;
}(_react2.default.Component);

exports.default = Library;