@yeutech-lab/rollup-umd-documentation
Version:
Quickly build awesome documentation for your rollup-umd project.
342 lines (291 loc) • 21 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.propTypes = exports.defaultProps = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _templateObject = _taggedTemplateLiteral([' \n ', '\n'], [' \n ', '\n']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _lodash = require('lodash.omit');
var _lodash2 = _interopRequireDefault(_lodash);
var _breakpoints = require('@bootstrap-styled/css-mixins/lib/breakpoints');
var _breakpoints2 = _interopRequireDefault(_breakpoints);
var _Fa = require('@bootstrap-styled/v4/lib/Fa');
var _Fa2 = _interopRequireDefault(_Fa);
var _hover = require('@bootstrap-styled/css-mixins/lib/hover');
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _lib = require('map-to-css-modules/lib');
var _lib2 = _interopRequireDefault(_lib);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _Ribbon = require('rsg-components/Ribbon');
var _Ribbon2 = _interopRequireDefault(_Ribbon);
var _SideBar = require('../../components/SideBar');
var _SideBar2 = _interopRequireDefault(_SideBar);
var _FooterRenderer = require('../../components/FooterRenderer');
var _FooterRenderer2 = _interopRequireDefault(_FooterRenderer);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var defaultProps = exports.defaultProps = {
hasSidebar: true,
theme: {
styleguide: {
'$rsg-styleguide-background-color': '#fff',
'$rsg-styleguide-has-sidebar-padding-left': {
xs: '0',
sm: '0',
md: '30px',
lg: '240px'
},
'$rsg-styleguide-content-max-width': '1000px',
'$rsg-styleguide-content-margin': '0 auto',
'$rsg-styleguide-content-display': 'block',
'$rsg-styleguide-no-print-display': 'none',
'$rsg-styleguide-content-transition': 'transform ease-out 500ms',
'$rsg-styleguide-content-padding': {
xs: '0 10px',
lg: '0 60px'
},
'$rsg-styleguide-content-width': {
md: '60%',
lg: '90%'
},
'$rsg-styleguide-content-sidebar-open-transform': {
md: 'translateX(120px)',
lg: 'translateX(0)'
},
'$rsg-styleguide-sidebar-z-index': '4000',
'$rsg-styleguide-sidebar-transform': 'translateX(0)',
'$rsg-styleguide-sidebar-open-transition': 'transform ease-out 500ms',
'$rsg-styleguide-sidebar-open-transform': {
md: 'translateX(0px)',
lg: 'translateX(0px)'
},
'$rsg-styleguide-sidebar-close-transition': 'transform ease-out 500ms',
'$rsg-styleguide-sidebar-close-transform': {
md: 'translateX(-250px)',
lg: 'translateX(0px)'
},
'$rsg-styleguide-sidebar-button-transform': 'rotate(0deg)',
'$rsg-styleguide-sidebar-button-padding': '10px 0 0 0',
'$rsg-styleguide-sidebar-button-color': '#B31255',
'$rsg-styleguide-sidebar-button-box-shadow': 'none',
'$rsg-styleguide-sidebar-button-position': 'fixed',
'$rsg-styleguide-sidebar-button-transition': 'all 500ms',
'$rsg-styleguide-sidebar-button-hover-color': '#3A007D',
'$rsg-styleguide-sidebar-button-outline': '0',
'$rsg-styleguide-sidebar-button-visibility': {
xs: 'hidden',
md: 'visible',
lg: 'hidden'
},
'$rsg-styleguide-sidebar-open-button-transition': 'transform 500ms',
'$rsg-styleguide-sidebar-open-button-transform': 'translateX(230px) rotate(90deg)',
'$rsg-styleguide-sidebar-close-button-transition': 'transform 500ms',
'$rsg-styleguide-sidebar-close-button-z-index': '-500',
'$rsg-styleguide-sidebar-close-button-transform': {
sm: 'translateX(-20px)',
md: 'translateX(0px)',
lg: 'ranslateX(-10px)'
}
}
}
};
/* eslint-disable react/require-default-props */
var propTypes = exports.propTypes = {
/**
* @ignore
*/
className: _propTypes2.default.string, // eslint-disable-line react/require-default-props
/** Set title used in `<SideBar />` component. */
title: _propTypes2.default.string.isRequired,
/** Specified node element will be passed as children of `<StyleGuideRenderer />` component. */
children: _propTypes2.default.node.isRequired,
/** Table of content element to be rendered. */
toc: _propTypes2.default.node.isRequired,
/** Version of documentation. */
version: _propTypes2.default.string,
/** Toggle sidebar style. */
hasSidebar: _propTypes2.default.bool,
/** Logo attributes in order to render menu logo. */
logoMenu: _propTypes2.default.shape({
logo: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired,
href: _propTypes2.default.string,
target: _propTypes2.default.string,
text: _propTypes2.default.string,
alt: _propTypes2.default.string
}),
/** Logo attributes in order to render footer logo. */
logoFooter: _propTypes2.default.shape({
logo: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired,
height: _propTypes2.default.string,
href: _propTypes2.default.string,
target: _propTypes2.default.string,
text: _propTypes2.default.string,
alt: _propTypes2.default.string
}),
/** Theme variables. Can be: */
theme: _propTypes2.default.shape({
styleguide: _propTypes2.default.shape({
'$rsg-styleguide-background-color': _propTypes2.default.string,
'$rsg-styleguide-has-sidebar-padding-left': _propTypes2.default.shape({
xs: _propTypes2.default.string,
sm: _propTypes2.default.string,
md: _propTypes2.default.string,
lg: _propTypes2.default.string
}),
'$rsg-styleguide-content-max-width': _propTypes2.default.string,
'$rsg-styleguide-content-margin': _propTypes2.default.string,
'$rsg-styleguide-content-display': _propTypes2.default.string,
'$rsg-styleguide-no-print-display': _propTypes2.default.string,
'$rsg-styleguide-content-transition': _propTypes2.default.string,
'$rsg-styleguide-content-padding': _propTypes2.default.shape({
xs: _propTypes2.default.string,
lg: _propTypes2.default.string
}),
'$rsg-styleguide-content-width': _propTypes2.default.shape({
md: _propTypes2.default.string,
lg: _propTypes2.default.string
}),
'$rsg-styleguide-content-sidebar-open-transform': _propTypes2.default.shape({
md: _propTypes2.default.string,
lg: _propTypes2.default.string
}),
'$rsg-styleguide-sidebar-z-index': _propTypes2.default.string,
'$rsg-styleguide-sidebar-transform': _propTypes2.default.string,
'$rsg-styleguide-sidebar-open-transition': _propTypes2.default.string,
'$rsg-styleguide-sidebar-open-transform': _propTypes2.default.shape({
md: _propTypes2.default.string,
lg: _propTypes2.default.string
}),
'$rsg-styleguide-sidebar-close-transition': _propTypes2.default.string,
'$rsg-styleguide-sidebar-close-transform': _propTypes2.default.shape({
md: _propTypes2.default.string,
lg: _propTypes2.default.string
}),
'$rsg-styleguide-sidebar-button-transform': _propTypes2.default.string,
'$rsg-styleguide-sidebar-button-padding': _propTypes2.default.string,
'$rsg-styleguide-sidebar-button-color': _propTypes2.default.string,
'$rsg-styleguide-sidebar-button-box-shadow': _propTypes2.default.string,
'$rsg-styleguide-sidebar-button-position': _propTypes2.default.string,
'$rsg-styleguide-sidebar-button-transition': _propTypes2.default.string,
'$rsg-styleguide-sidebar-button-hover-color': _propTypes2.default.string,
'$rsg-styleguide-sidebar-button-outline': _propTypes2.default.string,
'$rsg-styleguide-sidebar-button-visibility': _propTypes2.default.shape({
xs: _propTypes2.default.string,
md: _propTypes2.default.string,
lg: _propTypes2.default.string
}),
'$rsg-styleguide-sidebar-open-button-transition': _propTypes2.default.string,
'$rsg-styleguide-sidebar-open-button-transform': _propTypes2.default.string,
'$rsg-styleguide-sidebar-close-button-transition': _propTypes2.default.string,
'$rsg-styleguide-sidebar-close-button-z-index': _propTypes2.default.string,
'$rsg-styleguide-sidebar-close-button-transform': _propTypes2.default.shape({
sm: _propTypes2.default.string,
md: _propTypes2.default.string,
lg: _propTypes2.default.string
})
})
}),
/**
* Replace or remove a className from the component.
* See example <a href="https://www.npmjs.com/package/map-to-css-modules" target="_blank">here</a>.
*/
cssModule: _propTypes2.default.object // eslint-disable-line react/require-default-props
};
/* eslint-enable react/require-default-props */
var StyleGuideRendererUnstyled = function (_Component) {
_inherits(StyleGuideRendererUnstyled, _Component);
function StyleGuideRendererUnstyled() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, StyleGuideRendererUnstyled);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = StyleGuideRendererUnstyled.__proto__ || Object.getPrototypeOf(StyleGuideRendererUnstyled)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
isOpenSidebar: false
}, _this.toggleSideBar = function () {
_this.setState({
isOpenSidebar: !_this.state.isOpenSidebar
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(StyleGuideRendererUnstyled, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return this.state.isOpenSidebar !== nextState.isOpenSidebar || this.props.children !== nextProps.children;
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _omit = (0, _lodash2.default)(this.props, ['theme']),
className = _omit.className,
title = _omit.title,
version = _omit.version,
children = _omit.children,
toc = _omit.toc,
hasSidebar = _omit.hasSidebar,
logoMenu = _omit.logoMenu,
logoFooter = _omit.logoFooter,
cssModule = _omit.cssModule,
attributes = _objectWithoutProperties(_omit, ['className', 'title', 'version', 'children', 'toc', 'hasSidebar', 'logoMenu', 'logoFooter', 'cssModule']);
var isOpenSidebar = this.state.isOpenSidebar;
return _react2.default.createElement(
'div',
_extends({
className: (0, _lib2.default)((0, _classnames2.default)(className, 'rsg-styleguide', { 'has-sidebar': hasSidebar }), cssModule)
}, attributes),
hasSidebar && _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{
className: 'sidebar-button ' + (isOpenSidebar ? 'sidebar-open' : 'sidebar-close'),
role: 'button',
tabIndex: '0',
onClick: function onClick() {
return _this2.toggleSideBar();
},
onKeyPress: function onKeyPress() {
return _this2.toggleSideBar();
}
},
_react2.default.createElement(_Fa2.default, {
size: 'lg',
bars: true
})
),
_react2.default.createElement(_SideBar2.default, { className: 'sidebar ' + (isOpenSidebar ? 'sidebar-open' : 'sidebar-close'), version: version, logo: logoMenu, title: title, items: toc }),
_react2.default.createElement(_Ribbon2.default, null)
),
_react2.default.createElement(
'main',
{ className: 'content ' + (isOpenSidebar && hasSidebar ? 'sidebar-open' : 'sidebar-close') },
children,
_react2.default.createElement(_FooterRenderer2.default, { logo: logoFooter })
)
);
}
}]);
return StyleGuideRendererUnstyled;
}(_react.Component);
StyleGuideRendererUnstyled.propTypes = propTypes;
StyleGuideRendererUnstyled.defaultProps = defaultProps;
var StyleGuideRenderer = (0, _styledComponents2.default)(StyleGuideRendererUnstyled)(_templateObject, function (props) {
return '\n &.rsg-styleguide {\n @media print{\n .no-print {\n display: ' + props.theme.styleguide['$rsg-styleguide-no-print-display'] + ';\n }\n }\n background-color: ' + props.theme.styleguide['$rsg-styleguide-background-color'] + ';\n .content {\n max-width: ' + props.theme.styleguide['$rsg-styleguide-content-max-width'] + ';\n margin: ' + props.theme.styleguide['$rsg-styleguide-content-margin'] + ';\n display: ' + props.theme.styleguide['$rsg-styleguide-content-display'] + ';\n transition: ' + props.theme.styleguide['$rsg-styleguide-content-transition'] + ';\n ' + _breakpoints2.default.up('xs', props.theme['$grid-breakpoints'], '\n padding: ' + props.theme.styleguide['$rsg-styleguide-content-padding'].xs + ';\n ') + '\n ' + _breakpoints2.default.up('md', props.theme['$grid-breakpoints'], '\n width: ' + props.theme.styleguide['$rsg-styleguide-content-width'].md + ';\n ') + '\n ' + _breakpoints2.default.up('lg', props.theme['$grid-breakpoints'], '\n width: ' + props.theme.styleguide['$rsg-styleguide-content-width'].lg + ';\n padding: ' + props.theme.styleguide['$rsg-styleguide-content-padding'].lg + ';\n ') + '\n }\n }\n .content.sidebar-close {\n ' + _breakpoints2.default.up('md', props.theme['$grid-breakpoints'], '\n transform: ' + props.theme.styleguide['$rsg-styleguide-content-sidebar-close-transform'] + '\n ') + ' \n }\n &.has-sidebar {\n ' + _breakpoints2.default.up('xs', props.theme['$grid-breakpoints'], '\n padding-left: ' + props.theme.styleguide['$rsg-styleguide-has-sidebar-padding-left'].xs + ';\n ') + '\n ' + _breakpoints2.default.up('sm', props.theme['$grid-breakpoints'], '\n padding-left: ' + props.theme.styleguide['$rsg-styleguide-has-sidebar-padding-left'].xs + ';\n ') + '\n ' + _breakpoints2.default.up('md', props.theme['$grid-breakpoints'], '\n padding-left: ' + props.theme.styleguide['$rsg-styleguide-has-sidebar-padding-left'].md + ';\n ') + '\n ' + _breakpoints2.default.up('lg', props.theme['$grid-breakpoints'], '\n padding-left: ' + props.theme.styleguide['$rsg-styleguide-has-sidebar-padding-left'].lg + ';\n ') + '\n }\n & .sidebar {\n z-index: ' + props.theme.styleguide['$rsg-styleguide-sidebar-z-index'] + ';\n ' + _breakpoints2.default.up('lg', props.theme['$grid-breakpoints'], '\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-transform'] + ';\n ') + '\n }\n & .sidebar.sidebar-open {\n transition: ' + props.theme.styleguide['$rsg-styleguide-sidebar-open-transition'] + ';\n ' + _breakpoints2.default.up('md', props.theme['$grid-breakpoints'], '\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-open-transform'].md + ';\n ') + '\n ' + _breakpoints2.default.up('lg', props.theme['$grid-breakpoints'], '\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-open-transform'].lg + ';\n ') + '\n }\n & .sidebar.sidebar-close {\n transition: ' + props.theme.styleguide['$rsg-styleguide-sidebar-close-transition'] + ';\n ' + _breakpoints2.default.up('md', props.theme['$grid-breakpoints'], '\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-close-transform'].md + ';\n ') + '\n ' + _breakpoints2.default.up('lg', props.theme['$grid-breakpoints'], '\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-close-transform'].lg + ';\n ') + '\n }\n & .sidebar-button {\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-transform'] + ';\n padding: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-padding'] + ';\n color: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-color'] + ';\n box-shadow: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-box-shadow'] + ';\n position: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-position'] + ';\n transition: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-transition'] + ';\n top: 30px;\n z-index: 4999;\n ' + (0, _hover.hover)('\n color: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-hover-color'] + ';\n ') + ' \n &:focus, &:active {\n outline: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-outline'] + ';\n }\n ' + _breakpoints2.default.up('xs', props.theme['$grid-breakpoints'], '\n visibility: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-visibility'].xs + ';\n ') + '\n ' + _breakpoints2.default.up('md', props.theme['$grid-breakpoints'], '\n visibility: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-visibility'].md + ';\n ') + '\n ' + _breakpoints2.default.up('lg', props.theme['$grid-breakpoints'], '\n visibility: ' + props.theme.styleguide['$rsg-styleguide-sidebar-button-visibility'].lg + ';\n ') + '\n }\n & .sidebar-button.sidebar-open {\n transition: ' + props.theme.styleguide['$rsg-styleguide-sidebar-open-button-transition'] + ';\n ' + _breakpoints2.default.up('md', props.theme['$grid-breakpoints'], '\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-open-button-transform'] + ';\n color: white;\n ') + '\n }\n & .sidebar-button.sidebar-close {\n transition: ' + props.theme.styleguide['$rsg-styleguide-sidebar-close-button-transition'] + ';\n ' + _breakpoints2.default.down('sm', props.theme['$grid-breakpoints'], '\n z-index: ' + props.theme.styleguide['$rsg-styleguide-sidebar-close-button-z-index'] + ';\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-close-button-transform'].sm + ';\n ') + '\n ' + _breakpoints2.default.up('md', props.theme['$grid-breakpoints'], '\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-close-button-transform'].md + ';\n ') + '\n ' + _breakpoints2.default.up('lg', props.theme['$grid-breakpoints'], '\n transform: ' + props.theme.styleguide['$rsg-styleguide-sidebar-close-button-transform'].lg + ';\n ') + '\n }\n ';
});
StyleGuideRenderer.defaultProps = defaultProps;
StyleGuideRenderer.propTypes = propTypes;
exports.default = StyleGuideRenderer;