vue-styleguidist
Version:
Vue components style guide generator
126 lines (125 loc) • 6.69 kB
JavaScript
import "core-js/modules/es.object.keys.js";
import "core-js/modules/es.symbol.js";
import "core-js/modules/es.array.filter.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.object.get-own-property-descriptor.js";
import "core-js/modules/web.dom-collections.for-each.js";
import "core-js/modules/es.object.get-own-property-descriptors.js";
import "core-js/modules/es.reflect.construct.js";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "core-js/modules/es.function.name.js";
import "core-js/modules/es.array.concat.js";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import map from 'lodash/map';
import { getDefaultExample } from 'vue-inbrowser-compiler-utils';
import Styled from 'rsg-components/Styled';
import Markdown from 'rsg-components/Markdown';
import consts from '../../../scripts/consts';
import { DocumentedComponentContext } from '../VsgReactComponent/ReactComponent';
var styles = function styles(_ref) {
var fontFamily = _ref.fontFamily,
fontSize = _ref.fontSize,
color = _ref.color;
return {
button: {
padding: 0,
fontSize: fontSize.base,
fontFamily: fontFamily.base,
textDecoration: 'underline',
color: color.light,
border: 0,
cursor: 'pointer',
background: 'transparent',
'&:hover, &:active': {
isolate: false,
color: color.lightest
}
}
};
};
export function propsToArray(props) {
return map(props, function (prop, name) {
return _objectSpread(_objectSpread({}, prop), {}, {
name: name
});
});
}
export var ExamplePlaceholderRendererWithDoc = /*#__PURE__*/function (_Component) {
_inherits(ExamplePlaceholderRendererWithDoc, _Component);
var _super = _createSuper(ExamplePlaceholderRendererWithDoc);
function ExamplePlaceholderRendererWithDoc(props) {
var _this;
_classCallCheck(this, ExamplePlaceholderRendererWithDoc);
_this = _super.call(this);
_this.handleOpen = _this.handleOpen.bind(_assertThisInitialized(_this));
var tags = props.component.props.tags;
_this.state = {
shouldDisplay: !tags || !tags.examples || !tags.examples.length || tags.examples[tags.examples.length - 1].content !== '[none]',
isVisible: false
};
return _this;
}
_createClass(ExamplePlaceholderRendererWithDoc, [{
key: "handleOpen",
value: function handleOpen() {
this.setState({
isVisible: true
});
}
}, {
key: "render",
value: function render() {
var _this$state = this.state,
isVisible = _this$state.isVisible,
shouldDisplay = _this$state.shouldDisplay;
// in case we have an ignored example file
// do not display the helper text
if (!shouldDisplay) {
return /*#__PURE__*/React.createElement("div", null);
}
var _this$props = this.props,
classes = _this$props.classes,
name = _this$props.name,
props = _this$props.component.props;
if (isVisible) {
return /*#__PURE__*/React.createElement(Markdown, {
text: "\nCreate **Readme.md** or **".concat(name, ".md** file in the component\u2019s folder like this:\n\n ").concat(name, " example:\n\n ```vue\n ").concat(getDefaultExample(_objectSpread(_objectSpread({}, props), {}, {
props: propsToArray(props.props),
slots: propsToArray(props.slots),
events: propsToArray(props.events)
})), "\n ```\n\nYou can also add examples and documentation in the `<docs>` block of your `.vue` Single File Component.\n\nYou may need to **restart** the style guide server after adding an example file.\n\nRead more in the [documenting components guide](").concat(consts.DOCS_DOCUMENTING, ").\n\t\t\t\t\t")
});
}
return /*#__PURE__*/React.createElement("button", {
className: classes.button,
onClick: this.handleOpen
}, "Add examples to this component");
}
}]);
return ExamplePlaceholderRendererWithDoc;
}(Component);
_defineProperty(ExamplePlaceholderRendererWithDoc, "propTypes", {
classes: PropTypes.object.isRequired,
name: PropTypes.string,
component: PropTypes.object
});
export function ExamplePlaceholderRenderer(props) {
return /*#__PURE__*/React.createElement(DocumentedComponentContext.Consumer, null, function (component) {
return /*#__PURE__*/React.createElement(ExamplePlaceholderRendererWithDoc, _extends({}, props, {
component: component
}));
});
}
export default Styled(styles)(ExamplePlaceholderRenderer);