@upendra19/swagger-ui-custom 1.0.0

package/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx

@@ -0,0 +1,107 @@
+/**
+ * @prettier
+ */
+import React, { useRef, useEffect } from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+import saveAs from "js-file-download"
+import { CopyToClipboard } from "react-copy-to-clipboard"
+
+const HighlightCode = ({
+  fileName = "response.txt",
+  className,
+  downloadable,
+  getComponent,
+  canCopy,
+  language,
+  children,
+}) => {
+  const rootRef = useRef(null)
+  const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
+
+  const handleDownload = () => {
+    saveAs(children, fileName)
+  }
+
+  const handlePreventYScrollingBeyondElement = (e) => {
+    const { target, deltaY } = e
+    const {
+      scrollHeight: contentHeight,
+      offsetHeight: visibleHeight,
+      scrollTop,
+    } = target
+    const scrollOffset = visibleHeight + scrollTop
+    const isElementScrollable = contentHeight > visibleHeight
+    const isScrollingPastTop = scrollTop === 0 && deltaY < 0
+    const isScrollingPastBottom = scrollOffset >= contentHeight && deltaY > 0
+
+    if (isElementScrollable && (isScrollingPastTop || isScrollingPastBottom)) {
+      e.preventDefault()
+    }
+  }
+
+  useEffect(() => {
+    const childNodes = Array.from(rootRef.current.childNodes).filter(
+      (node) => !!node.nodeType && node.classList.contains("microlight")
+    )
+
+    // eslint-disable-next-line no-use-before-define
+    childNodes.forEach((node) =>
+      node.addEventListener(
+        "mousewheel",
+        handlePreventYScrollingBeyondElement,
+        { passive: false }
+      )
+    )
+
+    return () => {
+      // eslint-disable-next-line no-use-before-define
+      childNodes.forEach((node) =>
+        node.removeEventListener(
+          "mousewheel",
+          handlePreventYScrollingBeyondElement
+        )
+      )
+    }
+  }, [children, className, language])
+
+  return (
+    <div className="highlight-code" ref={rootRef}>
+      {canCopy && (
+        <div className="copy-to-clipboard">
+          <CopyToClipboard text={children}>
+            <button />
+          </CopyToClipboard>
+        </div>
+      )}
+
+      {!downloadable ? null : (
+        <button className="download-contents" onClick={handleDownload}>
+          Download
+        </button>
+      )}
+
+      <SyntaxHighlighter
+        language={language}
+        className={classNames(className, "microlight")}
+        renderPlainText={({ children, PlainTextViewer }) => (
+          <PlainTextViewer className={className}>{children}</PlainTextViewer>
+        )}
+      >
+        {children}
+      </SyntaxHighlighter>
+    </div>
+  )
+}
+
+HighlightCode.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  downloadable: PropTypes.bool,
+  fileName: PropTypes.string,
+  language: PropTypes.string,
+  canCopy: PropTypes.bool,
+  children: PropTypes.string.isRequired,
+}
+
+export default HighlightCode

package/src/core/plugins/syntax-highlighting/components/PlainTextViewer.jsx

@@ -0,0 +1,17 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+
+const PlainTextViewer = ({ className = "", children }) => (
+  <pre className={classNames("microlight", className)}>{children}</pre>
+)
+
+PlainTextViewer.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.string.isRequired,
+}
+
+export default PlainTextViewer

package/src/core/plugins/syntax-highlighting/components/SyntaxHighlighter.jsx

@@ -0,0 +1,42 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import ReactSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light"
+
+const SyntaxHighlighter = ({
+  language,
+  className = "",
+  getConfigs,
+  syntaxHighlighting = {},
+  children = "",
+}) => {
+  const theme = getConfigs().syntaxHighlight.theme
+  const { styles, defaultStyle } = syntaxHighlighting
+  const style = styles?.[theme] ?? defaultStyle
+
+  return (
+    <ReactSyntaxHighlighter
+      language={language}
+      className={className}
+      style={style}
+    >
+      {children}
+    </ReactSyntaxHighlighter>
+  )
+}
+
+SyntaxHighlighter.propTypes = {
+  language: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  getConfigs: PropTypes.func.isRequired,
+  syntaxHighlighting: PropTypes.shape({
+    styles: PropTypes.object,
+    defaultStyle: PropTypes.object,
+  }),
+  renderPlainText: PropTypes.func,
+  children: PropTypes.string,
+}
+
+export default SyntaxHighlighter

package/src/core/plugins/syntax-highlighting/index.js

@@ -0,0 +1,34 @@
+/**
+ * @prettier
+ */
+import afterLoad from "./after-load"
+import { styles, defaultStyle } from "./root-injects"
+import SyntaxHighlighter from "./components/SyntaxHighlighter"
+import HighlightCode from "./components/HighlightCode"
+import PlainTextViewer from "./components/PlainTextViewer"
+import SyntaxHighlighterWrapper from "./wrap-components/SyntaxHighlighter"
+
+const SyntaxHighlightingPlugin1 = () => ({
+  afterLoad,
+  rootInjects: {
+    syntaxHighlighting: { styles, defaultStyle },
+  },
+  components: {
+    SyntaxHighlighter,
+    HighlightCode,
+    PlainTextViewer,
+  },
+})
+
+const SyntaxHighlightingPlugin2 = () => ({
+  wrapComponents: {
+    SyntaxHighlighter: SyntaxHighlighterWrapper,
+  },
+})
+
+const SyntaxHighlightingPlugin = () => [
+  SyntaxHighlightingPlugin1,
+  SyntaxHighlightingPlugin2,
+]
+
+export default SyntaxHighlightingPlugin

package/src/core/plugins/syntax-highlighting/root-injects.js

@@ -0,0 +1,22 @@
+/**
+ * @prettier
+ */
+import agate from "react-syntax-highlighter/dist/esm/styles/hljs/agate"
+import arta from "react-syntax-highlighter/dist/esm/styles/hljs/arta"
+import monokai from "react-syntax-highlighter/dist/esm/styles/hljs/monokai"
+import nord from "react-syntax-highlighter/dist/esm/styles/hljs/nord"
+import obsidian from "react-syntax-highlighter/dist/esm/styles/hljs/obsidian"
+import tomorrowNight from "react-syntax-highlighter/dist/esm/styles/hljs/tomorrow-night"
+import idea from "react-syntax-highlighter/dist/esm/styles/hljs/idea"
+
+export const styles = {
+  agate,
+  arta,
+  monokai,
+  nord,
+  obsidian,
+  "tomorrow-night": tomorrowNight,
+  idea,
+}
+
+export const defaultStyle = agate

package/src/core/plugins/syntax-highlighting/wrap-components/SyntaxHighlighter.jsx

@@ -0,0 +1,31 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+const SyntaxHighlighterWrapper = (Original, system) => {
+  const SyntaxHighlighter = ({ renderPlainText, children, ...rest }) => {
+    const canSyntaxHighlight = system.getConfigs().syntaxHighlight.activated
+    const PlainTextViewer = system.getComponent("PlainTextViewer")
+
+    if (!canSyntaxHighlight && typeof renderPlainText === "function") {
+      return renderPlainText({ children, PlainTextViewer })
+    }
+    if (!canSyntaxHighlight) {
+      return <PlainTextViewer>{children}</PlainTextViewer>
+    }
+
+    return <Original {...rest}>{children}</Original>
+  }
+
+  SyntaxHighlighter.propTypes = {
+    ...Original.propTypes,
+    renderPlainText: PropTypes.func,
+    children: PropTypes.string.isRequired,
+  }
+
+  return SyntaxHighlighter
+}
+
+export default SyntaxHighlighterWrapper

package/src/core/plugins/util/index.js

@@ -0,0 +1,11 @@
+import { shallowEqualKeys } from "core/utils"
+import { sanitizeUrl } from "core/utils/url"
+
+export default function() {
+  return {
+    fn: {
+      shallowEqualKeys,
+      sanitizeUrl,
+    }
+  }
+}

package/src/core/plugins/versions/after-load.js

@@ -0,0 +1,19 @@
+/**
+ * @prettier
+ */
+import win from "core/window"
+
+const afterLoad = () => {
+  // eslint-disable-next-line no-undef
+  const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION, BUILD_TIME } = buildInfo
+
+  win.versions = win.versions || {}
+  win.versions.swaggerUI = {
+    version: PACKAGE_VERSION,
+    gitRevision: GIT_COMMIT,
+    gitDirty: GIT_DIRTY,
+    buildTimestamp: BUILD_TIME,
+  }
+}
+
+export default afterLoad

package/src/core/plugins/versions/index.js

@@ -0,0 +1,10 @@
+/**
+ * @prettier
+ */
+import afterLoad from "./after-load.js"
+
+const VersionsPlugin = () => ({
+  afterLoad,
+})
+
+export default VersionsPlugin

package/src/core/plugins/view/fn.js

@@ -0,0 +1 @@
+export const getDisplayName = (WrappedComponent) => WrappedComponent.displayName || WrappedComponent.name || "Component"

package/src/core/plugins/view/index.js

@@ -0,0 +1,34 @@
+import { memoize } from "core/utils"
+
+import memoizeN from "core/utils/memoizeN"
+import { getComponent, render, withMappedContainer } from "./root-injects"
+import { getDisplayName } from "./fn"
+
+const memoizeForGetComponent = (fn) => {
+  const resolver = (...args) => JSON.stringify(args)
+  return memoize(fn, resolver)
+}
+
+const memoizeForWithMappedContainer = (fn) => {
+  const resolver = (...args) => args
+  return memoizeN(fn, resolver)
+}
+
+const viewPlugin = ({getComponents, getStore, getSystem}) => {
+  // getComponent should be passed into makeMappedContainer, _already_ memoized... otherwise we have a big performance hit ( think, really big )
+  const memGetComponent = memoizeForGetComponent(getComponent(getSystem, getStore, getComponents))
+  const memMakeMappedContainer = memoizeForWithMappedContainer(withMappedContainer(getSystem, getStore, memGetComponent))
+
+  return {
+    rootInjects: {
+      getComponent: memGetComponent,
+      makeMappedContainer: memMakeMappedContainer,
+      render: render(getSystem, getStore, getComponent, getComponents),
+    },
+    fn: {
+      getDisplayName,
+    },
+  }
+}
+
+export default viewPlugin

package/src/core/plugins/view/root-injects.jsx

@@ -0,0 +1,118 @@
+import React, { Component } from "react"
+import ReactDOM from "react-dom"
+import { compose } from "redux"
+import { connect, Provider } from "react-redux"
+import omit from "lodash/omit"
+import identity from "lodash/identity"
+
+const withSystem = (getSystem) => (WrappedComponent) => {
+  const { fn } = getSystem()
+
+  class WithSystem extends Component {
+    render() {
+      return <WrappedComponent {...getSystem()} {...this.props} {...this.context} />
+    }
+  }
+  WithSystem.displayName = `WithSystem(${fn.getDisplayName(WrappedComponent)})`
+  return WithSystem
+}
+
+const withRoot = (getSystem, reduxStore) => (WrappedComponent) => {
+  const { fn } = getSystem()
+
+  class WithRoot extends Component {
+    render() {
+      return (
+        <Provider store={reduxStore}>
+          <WrappedComponent {...this.props} {...this.context} />
+        </Provider>
+      )
+    }
+  }
+  WithRoot.displayName = `WithRoot(${fn.getDisplayName(WrappedComponent)})`
+  return WithRoot
+}
+
+const withConnect = (getSystem, WrappedComponent, reduxStore) => {
+  const mapStateToProps = (state, ownProps) => {
+    const props = {...ownProps, ...getSystem()}
+    const customMapStateToProps = WrappedComponent.prototype?.mapStateToProps || (state => ({state}))
+    return customMapStateToProps(state, props)
+  }
+
+  return compose(
+    reduxStore ? withRoot(getSystem, reduxStore) : identity,
+    connect(mapStateToProps),
+    withSystem(getSystem),
+  )(WrappedComponent)
+}
+
+const handleProps = (getSystem, mapping, props, oldProps) => {
+  for (const prop in mapping) {
+    const fn = mapping[prop]
+
+    if (typeof fn === "function") {
+      fn(props[prop], oldProps[prop], getSystem())
+    }
+  }
+}
+
+export const withMappedContainer = (getSystem, getStore, memGetComponent) => (componentName, mapping) => {
+  const { fn } = getSystem()
+  const WrappedComponent = memGetComponent(componentName, "root")
+
+  class WithMappedContainer extends Component {
+    constructor(props, context) {
+      super(props, context)
+      handleProps(getSystem, mapping, props, {})
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      handleProps(getSystem, mapping, nextProps, this.props)
+    }
+
+    render() {
+      const cleanProps = omit(this.props, mapping ? Object.keys(mapping) : [])
+      return <WrappedComponent {...cleanProps} />
+    }
+  }
+  WithMappedContainer.displayName = `WithMappedContainer(${fn.getDisplayName(WrappedComponent)})`
+  return WithMappedContainer
+}
+
+export const render = (getSystem, getStore, getComponent, getComponents) => (domNode) => {
+  const App = getComponent(getSystem, getStore, getComponents)("App", "root")
+  const { createRoot } = ReactDOM
+  const root = createRoot(domNode)
+
+  root.render(<App/>)
+}
+
+export const getComponent = (getSystem, getStore, getComponents) => (componentName, container, config = {}) => {
+
+  if (typeof componentName !== "string")
+    throw new TypeError("Need a string, to fetch a component. Was given a " + typeof componentName)
+
+    // getComponent has a config object as a third, optional parameter
+    // using the config object requires the presence of the second parameter, container
+    // e.g. getComponent("JsonSchema_string_whatever", false, { failSilently: true })
+  const component = getComponents(componentName)
+
+  if (!component) {
+    if (!config.failSilently) {
+      getSystem().log.warn("Could not find component:", componentName)
+    }
+    return null
+  }
+
+  if(!container) {
+    return component
+  }
+
+  if(container === "root") {
+    return withConnect(getSystem, component, getStore())
+  }
+
+  // container == truthy
+  return withConnect(getSystem, component)
+}

package/src/core/plugins/view-legacy/index.js

@@ -0,0 +1,25 @@
+/**
+ * @prettier
+ */
+import { getComponent } from "core/plugins/view/root-injects"
+import { render } from "./root-injects"
+
+const ViewLegacyPlugin = ({ React, getSystem, getStore, getComponents }) => {
+  const rootInjects = {}
+  const reactMajorVersion = parseInt(React?.version, 10)
+
+  if (reactMajorVersion >= 16 && reactMajorVersion < 18) {
+    rootInjects.render = render(
+      getSystem,
+      getStore,
+      getComponent,
+      getComponents
+    )
+  }
+
+  return {
+    rootInjects,
+  }
+}
+
+export default ViewLegacyPlugin

package/src/core/plugins/view-legacy/root-injects.jsx

@@ -0,0 +1,12 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import ReactDOM from "react-dom"
+
+export const render =
+  (getSystem, getStore, getComponent, getComponents) => (domNode) => {
+    const App = getComponent(getSystem, getStore, getComponents)("App", "root")
+
+    ReactDOM.render(<App />, domNode)
+  }

package/src/core/presets/apis/index.js

@@ -0,0 +1,18 @@
+/**
+ * @prettier
+ */
+import BasePreset from "core/presets/base"
+import OpenAPI30Plugin from "core/plugins/oas3"
+import OpenAPI31Plugin from "core/plugins/oas31"
+import JSONSchema202012Plugin from "core/plugins/json-schema-2020-12"
+import JSONSchema202012SamplesPlugin from "core/plugins/json-schema-2020-12-samples"
+
+export default function PresetApis() {
+  return [
+    BasePreset,
+    OpenAPI30Plugin,
+    JSONSchema202012Plugin,
+    JSONSchema202012SamplesPlugin,
+    OpenAPI31Plugin,
+  ]
+}

package/src/core/presets/base/index.js

@@ -0,0 +1,55 @@
+/**
+ * @prettier
+ */
+import AuthPlugin from "core/plugins/auth/"
+import ConfigsPlugin from "core/plugins/configs"
+import DeepLinkingPlugin from "core/plugins/deep-linking"
+import ErrPlugin from "core/plugins/err"
+import FilterPlugin from "core/plugins/filter"
+import IconsPlugin from "core/plugins/icons"
+import LayoutPlugin from "core/plugins/layout"
+import LogsPlugin from "core/plugins/logs"
+import OnCompletePlugin from "core/plugins/on-complete"
+import RequestSnippetsPlugin from "core/plugins/request-snippets"
+import JSONSchema5Plugin from "core/plugins/json-schema-5"
+import JSONSchema5SamplesPlugin from "core/plugins/json-schema-5-samples"
+import SpecPlugin from "core/plugins/spec"
+import SwaggerClientPlugin from "core/plugins/swagger-client"
+import UtilPlugin from "core/plugins/util"
+import ViewPlugin from "core/plugins/view"
+import ViewLegacyPlugin from "core/plugins/view-legacy"
+import DownloadUrlPlugin from "core/plugins/download-url"
+import SyntaxHighlightingPlugin from "core/plugins/syntax-highlighting"
+import VersionsPlugin from "core/plugins/versions"
+import SafeRenderPlugin from "core/plugins/safe-render"
+// ad-hoc plugins
+import CoreComponentsPlugin from "core/presets/base/plugins/core-components"
+import FormComponentsPlugin from "core/presets/base/plugins/form-components"
+
+const BasePreset = () => [
+  ConfigsPlugin,
+  UtilPlugin,
+  LogsPlugin,
+  ViewPlugin,
+  ViewLegacyPlugin,
+  SpecPlugin,
+  ErrPlugin,
+  IconsPlugin,
+  LayoutPlugin,
+  JSONSchema5Plugin,
+  JSONSchema5SamplesPlugin,
+  CoreComponentsPlugin,
+  FormComponentsPlugin,
+  SwaggerClientPlugin,
+  AuthPlugin,
+  DownloadUrlPlugin,
+  DeepLinkingPlugin,
+  FilterPlugin,
+  OnCompletePlugin,
+  RequestSnippetsPlugin,
+  SyntaxHighlightingPlugin,
+  VersionsPlugin,
+  SafeRenderPlugin(),
+]
+
+export default BasePreset