@uidu/docs/dist/uidu-docs.esm.js

Utilities for building documentation

import React, { Component } from 'react';
import defaultMd from 'react-markings';
import PrettyProps from 'pretty-proptypes';
export { Prop } from 'pretty-proptypes';
import styled, { css } from 'styled-components';
import { PrismAsyncLight } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
import stringRaw from 'string-raw';
import { jsx, jsxs } from 'react/jsx-runtime';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _callSuper from '@babel/runtime/helpers/esm/callSuper';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import Tooltip from '@uidu/tooltip';
import { Code, ChevronDown, ChevronUp } from 'react-feather';
import { replaceImports } from 'codesandboxer';
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import Button from '@uidu/button';
import { themed, colors, borderRadius } from '@uidu/theme';

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(sources, substitutions);
  source = source.replace(/^(\s*\n)+/g, ''); // Remove leading newlines
  source = source.replace(/(\n\s*)+$/g, ''); // Remove trailing newlines
  return /*#__PURE__*/jsx(_StyledDiv$1, {
    children: /*#__PURE__*/jsx(PrismAsyncLight, {
      language: "javascript",
      style: tomorrow,
      customStyle: {
        border: 0,
        marginTop: 0,
        marginBottom: 0,
        padding: '1rem',
        borderRadius: 4
      },
      children: source
    })
  });
}
var _StyledDiv$1 = styled("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__*/jsx("h4", {
          children: "Something went wrong loading this example."
        });
      }
      return this.props.children;
    }
  }]);
}(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 = replaceImports(replacedCode, [['../src', name]]);
  }
  return replacedCode;
}

var TRANSITION_DURATION = '200ms';
var Wrapper = styled.div.withConfig({
  displayName: "Example__Wrapper",
  componentId: "sc-1qn7uh-0"
})(["margin-top:20px;transition:background-color ", ";"], TRANSITION_DURATION);
var _StyledWrapper = styled(Wrapper).withConfig({
  displayName: "Example___StyledWrapper",
  componentId: "sc-1qn7uh-1"
})({
  "borderRadius": "0.25rem",
  "borderWidth": "1px"
});
var Toggle = styled.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.h5.withConfig({
  displayName: "Example__ToggleTitle",
  componentId: "sc-1qn7uh-3"
})(["margin:0;color:#adb5bd;"]);
var Showcase = styled.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 ? 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__*/jsx("span", {
        children: "Hide Code Snippet"
      }) : /*#__PURE__*/jsx("span", {
        children: "Show Code Snippet"
      });
      return /*#__PURE__*/jsxs(_StyledDiv, {
        children: [/*#__PURE__*/jsx(Tooltip, {
          position: "mouse",
          content: toggleLabel,
          delay: 0,
          children: /*#__PURE__*/jsxs(Toggle, {
            ref: function ref(c) {
              _this2.toggleElement = c;
            },
            onClick: this.toggleSource,
            children: [/*#__PURE__*/jsxs(ToggleTitle, {
              children: [title, " ", /*#__PURE__*/jsx("small", {
                children: "Example"
              })]
            }), /*#__PURE__*/jsx(Code, {
              id: "UncontrolledTooltipExample"
            })]
          })
        }), /*#__PURE__*/jsxs(_StyledWrapper, {
          children: [isSourceVisible && /*#__PURE__*/jsx(PrismAsyncLight, {
            language: "javascript",
            style: tomorrow,
            customStyle: {
              border: 0,
              marginTop: 0,
              marginBottom: 0,
              padding: '1.5rem',
              borderTopRightRadius: 4,
              borderTopLeftRadius: 4
            },
            children: packageName ? replaceSrc(source, packageName) : source
          }), /*#__PURE__*/jsx(_StyledDiv2, {
            $_css: [!fullWidth && {
              "padding": "1.25rem"
            }],
            children: /*#__PURE__*/jsx(Showcase, {
              overflowHidden: overflowHidden,
              style: style,
              children: /*#__PURE__*/jsx(ErrorBoundary, {
                onError: this.onError,
                children: /*#__PURE__*/jsx(Component, {})
              })
            })
          })]
        })]
      });
    }
  }]);
}(React.Component);
_defineProperty(Example, "defaultProps", {
  language: 'javascript'
});
var _StyledDiv = styled("div").withConfig({
  displayName: "Example___StyledDiv",
  componentId: "sc-1qn7uh-5"
})({
  "marginTop": "1.25rem",
  "marginBottom": "1.25rem"
});
var _StyledDiv2 = styled("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__*/jsx("p", {
    children: children
  }) : /*#__PURE__*/jsx("div", {
    style: style,
    children: children
  });
}

function Indent(props) {
  return /*#__PURE__*/jsx("div", {
    style: {
      paddingLeft: '1.3em'
    },
    children: props.children
  });
}

var Outline = styled.span.withConfig({
  displayName: "Outline",
  componentId: "sc-1iv3w2k-0"
})(["line-height:1;"]);

var Required = styled.span.withConfig({
  displayName: "Required",
  componentId: "sc-1k8i1ph-0"
})(["color:", ";"], themed({
  light: colors.R500,
  dark: colors.R300
}));

var Type = styled.span.withConfig({
  displayName: "Type",
  componentId: "sc-18js5ka-0"
})(["background-color:", ";border-radius:", "px;color:", ";display:inline-block;margin:2px 0;padding:0 0.2em;"], themed({
  light: colors.P50,
  dark: colors.P500
}), borderRadius, themed({
  light: colors.P500,
  dark: colors.P50
}));
var TypeMeta = styled(Type).withConfig({
  displayName: "Type__TypeMeta",
  componentId: "sc-18js5ka-1"
})(["background-color:", ";color:", ";"], themed({
  light: colors.N20,
  dark: colors.DN50
}), colors.subtleText);
var StringType = styled(Type).withConfig({
  displayName: "Type__StringType",
  componentId: "sc-18js5ka-2"
})(["background-color:", ";color:", ";"], themed({
  light: colors.G50,
  dark: colors.G500
}), themed({
  light: colors.G500,
  dark: 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__*/jsx(Button, _objectSpread({
    iconBefore: isCollapsed ? /*#__PURE__*/jsx(ChevronDown, {}) : /*#__PURE__*/jsx(ChevronUp, {})
  }, rest));
};
var Props = function Props(props) {
  return /*#__PURE__*/jsx(PrettyProps, _objectSpread({
    components: components
  }, props));
};

function Table(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/jsx("table", {
    children: children
  });
}
function Tr(_ref2) {
  var children = _ref2.children;
    _ref2.isOdd;
  return /*#__PURE__*/jsx("tr", {
    children: children
  });
}
function Td(_ref3) {
  var children = _ref3.children;
  return /*#__PURE__*/jsx(_StyledTd, {
    children: children
  });
}
function Th(_ref4) {
  var children = _ref4.children;
  return /*#__PURE__*/jsx(_StyledTh, {
    children: children
  });
}
var _StyledTd = styled("td")({
  "whiteSpace": "nowrap",
  "paddingLeft": "1.5rem",
  "paddingRight": "1.5rem",
  "paddingTop": "1rem",
  "paddingBottom": "1rem"
});
var _StyledTh = styled("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.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.createElement('ul', {
        className: ''
      }, props.children);
    }
  }
});

export { Example, Props, Table, Td, Th, Tr, code, customMd as md, replaceSrc };