@uidu/docs
Version:
Utilities for building documentation
426 lines (406 loc) • 14.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var defaultMd = require('react-markings');
var PrettyProps = require('pretty-proptypes');
var styled = require('styled-components');
var reactSyntaxHighlighter = require('react-syntax-highlighter');
var prism = require('react-syntax-highlighter/dist/esm/styles/prism');
var stringRaw = require('string-raw');
var jsxRuntime = require('react/jsx-runtime');
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _createClass = require('@babel/runtime/helpers/createClass');
var _callSuper = require('@babel/runtime/helpers/callSuper');
var _inherits = require('@babel/runtime/helpers/inherits');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Tooltip = require('@uidu/tooltip');
var reactFeather = require('react-feather');
var codesandboxer = require('codesandboxer');
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var Button = require('@uidu/button');
var theme = require('@uidu/theme');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var defaultMd__default = /*#__PURE__*/_interopDefault(defaultMd);
var PrettyProps__default = /*#__PURE__*/_interopDefault(PrettyProps);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var stringRaw__default = /*#__PURE__*/_interopDefault(stringRaw);
var Tooltip__default = /*#__PURE__*/_interopDefault(Tooltip);
var Button__default = /*#__PURE__*/_interopDefault(Button);
function code(
// Tagged Template Literal support is still WIP for flow: https://github.com/facebook/flow/issues/2616
sources) {
for (var _len = arguments.length, substitutions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
substitutions[_key - 1] = arguments[_key];
}
var source = stringRaw__default["default"](sources, substitutions);
source = source.replace(/^(\s*\n)+/g, ''); // Remove leading newlines
source = source.replace(/(\n\s*)+$/g, ''); // Remove trailing newlines
return /*#__PURE__*/jsxRuntime.jsx(_StyledDiv$1, {
children: /*#__PURE__*/jsxRuntime.jsx(reactSyntaxHighlighter.PrismAsyncLight, {
language: "javascript",
style: prism.tomorrow,
customStyle: {
border: 0,
marginTop: 0,
marginBottom: 0,
padding: '1rem',
borderRadius: 4
},
children: source
})
});
}
var _StyledDiv$1 = styled__default["default"]("div").withConfig({
displayName: "code___StyledDiv",
componentId: "sc-18947wq-0"
})({
"marginTop": "1rem",
"marginBottom": "1.25rem"
});
var ErrorBoundary = /*#__PURE__*/function (_Component) {
function ErrorBoundary() {
var _this;
_classCallCheck(this, ErrorBoundary);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, ErrorBoundary, [].concat(args));
_defineProperty(_this, "state", {
hasError: false
});
return _this;
}
_inherits(ErrorBoundary, _Component);
return _createClass(ErrorBoundary, [{
key: "componentDidCatch",
value: function componentDidCatch(error, info) {
var onError = this.props.onError;
this.setState({
hasError: true
});
if (onError) {
onError(error, info);
}
}
}, {
key: "render",
value: function render() {
if (this.state.hasError) {
return /*#__PURE__*/jsxRuntime.jsx("h4", {
children: "Something went wrong loading this example."
});
}
return this.props.children;
}
}]);
}(React.Component);
/* eslint-disable no-useless-escape */
var srcEntryPointRegexString = /((?:import|export)[^'"\`]*['"\`])(..\/src\/)([^/]*['"\`]\s*)/;
function replaceSrc(content /*: string*/, name /*: string*/) {
var replacedCode = content;
if (name) {
// Replace ../src/<entry-point> with ${name}/<entry-point>
replacedCode = replacedCode.replace(srcEntryPointRegexString, "$1".concat(name, "/$3"));
replacedCode = codesandboxer.replaceImports(replacedCode, [['../src', name]]);
}
return replacedCode;
}
var TRANSITION_DURATION = '200ms';
var Wrapper = styled__default["default"].div.withConfig({
displayName: "Example__Wrapper",
componentId: "sc-1qn7uh-0"
})(["margin-top:20px;transition:background-color ", ";"], TRANSITION_DURATION);
var _StyledWrapper = styled__default["default"](Wrapper).withConfig({
displayName: "Example___StyledWrapper",
componentId: "sc-1qn7uh-1"
})({
"borderRadius": "0.25rem",
"borderWidth": "1px"
});
var Toggle = styled__default["default"].div.withConfig({
displayName: "Example__Toggle",
componentId: "sc-1qn7uh-2"
})(["align-items:center;cursor:pointer;display:flex;justify-content:space-between;transition:color ", ",fill ", ";"], TRANSITION_DURATION, TRANSITION_DURATION);
// NOTE: use of important necessary to override element targeted headings
var ToggleTitle = styled__default["default"].h5.withConfig({
displayName: "Example__ToggleTitle",
componentId: "sc-1qn7uh-3"
})(["margin:0;color:#adb5bd;"]);
var Showcase = styled__default["default"].div.withConfig({
displayName: "Example__Showcase",
componentId: "sc-1qn7uh-4"
})(["position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;", ";"], function (_ref) {
var overflowHidden = _ref.overflowHidden;
return overflowHidden ? styled.css(["overflow-x:hidden;"]) : null;
});
var Example = /*#__PURE__*/function (_React$Component) {
function Example() {
var _this;
_classCallCheck(this, Example);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Example, [].concat(args));
_defineProperty(_this, "state", {
isSourceVisible: false,
isHover: false
});
_defineProperty(_this, "toggleElement", void 0);
_defineProperty(_this, "toggleSource", function () {
_this.setState({
isSourceVisible: !_this.state.isSourceVisible
});
});
_defineProperty(_this, "onError", function (error, info) {
console.error(error);
console.error(info);
});
return _this;
}
_inherits(Example, _React$Component);
return _createClass(Example, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
Component = _this$props.Component,
source = _this$props.source;
_this$props.language;
var title = _this$props.title,
packageName = _this$props.packageName,
overflowHidden = _this$props.overflowHidden,
style = _this$props.style,
fullWidth = _this$props.fullWidth;
var isSourceVisible = this.state.isSourceVisible;
var toggleLabel = isSourceVisible ? /*#__PURE__*/jsxRuntime.jsx("span", {
children: "Hide Code Snippet"
}) : /*#__PURE__*/jsxRuntime.jsx("span", {
children: "Show Code Snippet"
});
return /*#__PURE__*/jsxRuntime.jsxs(_StyledDiv, {
children: [/*#__PURE__*/jsxRuntime.jsx(Tooltip__default["default"], {
position: "mouse",
content: toggleLabel,
delay: 0,
children: /*#__PURE__*/jsxRuntime.jsxs(Toggle, {
ref: function ref(c) {
_this2.toggleElement = c;
},
onClick: this.toggleSource,
children: [/*#__PURE__*/jsxRuntime.jsxs(ToggleTitle, {
children: [title, " ", /*#__PURE__*/jsxRuntime.jsx("small", {
children: "Example"
})]
}), /*#__PURE__*/jsxRuntime.jsx(reactFeather.Code, {
id: "UncontrolledTooltipExample"
})]
})
}), /*#__PURE__*/jsxRuntime.jsxs(_StyledWrapper, {
children: [isSourceVisible && /*#__PURE__*/jsxRuntime.jsx(reactSyntaxHighlighter.PrismAsyncLight, {
language: "javascript",
style: prism.tomorrow,
customStyle: {
border: 0,
marginTop: 0,
marginBottom: 0,
padding: '1.5rem',
borderTopRightRadius: 4,
borderTopLeftRadius: 4
},
children: packageName ? replaceSrc(source, packageName) : source
}), /*#__PURE__*/jsxRuntime.jsx(_StyledDiv2, {
$_css: [!fullWidth && {
"padding": "1.25rem"
}],
children: /*#__PURE__*/jsxRuntime.jsx(Showcase, {
overflowHidden: overflowHidden,
style: style,
children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
onError: this.onError,
children: /*#__PURE__*/jsxRuntime.jsx(Component, {})
})
})
})]
})]
});
}
}]);
}(React__default["default"].Component);
_defineProperty(Example, "defaultProps", {
language: 'javascript'
});
var _StyledDiv = styled__default["default"]("div").withConfig({
displayName: "Example___StyledDiv",
componentId: "sc-1qn7uh-5"
})({
"marginTop": "1.25rem",
"marginBottom": "1.25rem"
});
var _StyledDiv2 = styled__default["default"]("div").withConfig({
displayName: "Example___StyledDiv2",
componentId: "sc-1qn7uh-6"
})(["", ""], function (p) {
return p.$_css;
});
function ReadmeDescription(_ref) {
var children = _ref.children;
var style = {
marginTop: 12
};
return typeof children === 'string' ? /*#__PURE__*/jsxRuntime.jsx("p", {
children: children
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
style: style,
children: children
});
}
function Indent(props) {
return /*#__PURE__*/jsxRuntime.jsx("div", {
style: {
paddingLeft: '1.3em'
},
children: props.children
});
}
var Outline = styled__default["default"].span.withConfig({
displayName: "Outline",
componentId: "sc-1iv3w2k-0"
})(["line-height:1;"]);
var Required = styled__default["default"].span.withConfig({
displayName: "Required",
componentId: "sc-1k8i1ph-0"
})(["color:", ";"], theme.themed({
light: theme.colors.R500,
dark: theme.colors.R300
}));
var Type = styled__default["default"].span.withConfig({
displayName: "Type",
componentId: "sc-18js5ka-0"
})(["background-color:", ";border-radius:", "px;color:", ";display:inline-block;margin:2px 0;padding:0 0.2em;"], theme.themed({
light: theme.colors.P50,
dark: theme.colors.P500
}), theme.borderRadius, theme.themed({
light: theme.colors.P500,
dark: theme.colors.P50
}));
var TypeMeta = styled__default["default"](Type).withConfig({
displayName: "Type__TypeMeta",
componentId: "sc-18js5ka-1"
})(["background-color:", ";color:", ";"], theme.themed({
light: theme.colors.N20,
dark: theme.colors.DN50
}), theme.colors.subtleText);
var StringType = styled__default["default"](Type).withConfig({
displayName: "Type__StringType",
componentId: "sc-18js5ka-2"
})(["background-color:", ";color:", ";"], theme.themed({
light: theme.colors.G50,
dark: theme.colors.G500
}), theme.themed({
light: theme.colors.G500,
dark: theme.colors.G100
}));
var components = {
Indent: Indent,
Outline: Outline,
Required: Required,
Type: Type,
StringType: StringType,
TypeMeta: TypeMeta,
Description: ReadmeDescription
};
var _excluded = ["isCollapsed"];
components.Button = function (_ref) {
var isCollapsed = _ref.isCollapsed,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], _objectSpread({
iconBefore: isCollapsed ? /*#__PURE__*/jsxRuntime.jsx(reactFeather.ChevronDown, {}) : /*#__PURE__*/jsxRuntime.jsx(reactFeather.ChevronUp, {})
}, rest));
};
var Props = function Props(props) {
return /*#__PURE__*/jsxRuntime.jsx(PrettyProps__default["default"], _objectSpread({
components: components
}, props));
};
function Table(_ref) {
var children = _ref.children;
return /*#__PURE__*/jsxRuntime.jsx("table", {
children: children
});
}
function Tr(_ref2) {
var children = _ref2.children;
_ref2.isOdd;
return /*#__PURE__*/jsxRuntime.jsx("tr", {
children: children
});
}
function Td(_ref3) {
var children = _ref3.children;
return /*#__PURE__*/jsxRuntime.jsx(_StyledTd, {
children: children
});
}
function Th(_ref4) {
var children = _ref4.children;
return /*#__PURE__*/jsxRuntime.jsx(_StyledTh, {
children: children
});
}
var _StyledTd = styled__default["default"]("td")({
"whiteSpace": "nowrap",
"paddingLeft": "1.5rem",
"paddingRight": "1.5rem",
"paddingTop": "1rem",
"paddingBottom": "1rem"
});
var _StyledTh = styled__default["default"]("th").withConfig({
displayName: "Table___StyledTh",
componentId: "sc-185zwvz-0"
})({
"paddingLeft": "1.5rem",
"paddingRight": "1.5rem",
"paddingTop": "0.75rem",
"paddingBottom": "0.75rem",
"textAlign": "left",
"fontSize": "0.75rem",
"lineHeight": "1rem",
"fontWeight": "500",
"textTransform": "uppercase",
"letterSpacing": "0.05em",
"--tw-text-opacity": "1",
"color": "rgb(107 114 128 / var(--tw-text-opacity))"
});
var customMd = defaultMd__default["default"].customize({
renderers: {
// customize heading with class
// heading: props =>
// React.createElement(
// 'h' + props.level,
// {
// className: `h${props.level === 1 ? '2 mb-4' : '5 mt-5'}`,
// },
// props.children,
// ),
list: function list(props) {
return /*#__PURE__*/React__default["default"].createElement('ul', {
className: ''
}, props.children);
}
}
});
Object.defineProperty(exports, 'Prop', {
enumerable: true,
get: function () { return PrettyProps.Prop; }
});
exports.Example = Example;
exports.Props = Props;
exports.Table = Table;
exports.Td = Td;
exports.Th = Th;
exports.Tr = Tr;
exports.code = code;
exports.md = customMd;
exports.replaceSrc = replaceSrc;