@upendra19/swagger-ui-custom 1.0.0

package/src/core/plugins/oas31/wrap-components/info.jsx

@@ -0,0 +1,15 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { createOnlyOAS31ComponentWrapper } from "../fn"
+
+const InfoWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
+  const system = getSystem()
+  const OAS31Info = system.getComponent("OAS31Info", true)
+
+  return <OAS31Info />
+})
+
+export default InfoWrapper

package/src/core/plugins/oas31/wrap-components/license.jsx

@@ -0,0 +1,15 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { createOnlyOAS31ComponentWrapper } from "../fn"
+
+const LicenseWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
+  const system = getSystem()
+  const OAS31License = system.getComponent("OAS31License", true)
+
+  return <OAS31License />
+})
+
+export default LicenseWrapper

package/src/core/plugins/oas31/wrap-components/model.jsx

@@ -0,0 +1,44 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { createOnlyOAS31ComponentWrapper } from "../fn"
+import { makeGetSchemaKeywords } from "../json-schema-2020-12-extensions/fn"
+
+const ModelWrapper = createOnlyOAS31ComponentWrapper(
+  ({ getSystem, ...props }) => {
+    const system = getSystem()
+    const { getComponent, fn, getConfigs } = system
+    const configs = getConfigs()
+
+    const Model = getComponent("OAS31Model")
+    const withJSONSchemaSystemContext = getComponent(
+      "withJSONSchema202012SystemContext"
+    )
+
+    // we cache the HOC as recreating it with every re-render is quite expensive
+    ModelWrapper.ModelWithJSONSchemaContext ??= withJSONSchemaSystemContext(
+      Model,
+      {
+        config: {
+          default$schema: "https://spec.openapis.org/oas/3.1/dialect/base",
+          defaultExpandedLevels: configs.defaultModelExpandDepth,
+          includeReadOnly: props.includeReadOnly,
+          includeWriteOnly: props.includeWriteOnly,
+        },
+        fn: {
+          getProperties: fn.jsonSchema202012.getProperties,
+          isExpandable: fn.jsonSchema202012.isExpandable,
+          getSchemaKeywords: makeGetSchemaKeywords(
+            fn.jsonSchema202012.getSchemaKeywords
+          ),
+        },
+      }
+    )
+
+    return <ModelWrapper.ModelWithJSONSchemaContext {...props} />
+  }
+)
+
+export default ModelWrapper

package/src/core/plugins/oas31/wrap-components/models.jsx

@@ -0,0 +1,47 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { createOnlyOAS31ComponentWrapper } from "../fn"
+import { makeGetSchemaKeywords } from "../json-schema-2020-12-extensions/fn"
+
+const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
+  const { getComponent, fn, getConfigs } = getSystem()
+  const configs = getConfigs()
+
+  if (ModelsWrapper.ModelsWithJSONSchemaContext) {
+    return <ModelsWrapper.ModelsWithJSONSchemaContext />
+  }
+
+  const Models = getComponent("OAS31Models", true)
+  const withJSONSchemaSystemContext = getComponent(
+    "withJSONSchema202012SystemContext"
+  )
+
+  // we cache the HOC as recreating it with every re-render is quite expensive
+  ModelsWrapper.ModelsWithJSONSchemaContext ??= withJSONSchemaSystemContext(
+    Models,
+    {
+      config: {
+        default$schema: "https://spec.openapis.org/oas/3.1/dialect/base",
+        defaultExpandedLevels: configs.defaultModelsExpandDepth - 1,
+        includeReadOnly: true,
+        includeWriteOnly: true,
+      },
+      fn: {
+        getProperties: fn.jsonSchema202012.getProperties,
+        isExpandable: fn.jsonSchema202012.isExpandable,
+        getSchemaKeywords: makeGetSchemaKeywords(
+          fn.jsonSchema202012.getSchemaKeywords
+        ),
+      },
+    }
+  )
+
+  return <ModelsWrapper.ModelsWithJSONSchemaContext />
+})
+
+ModelsWrapper.ModelsWithJSONSchemaContext = null
+
+export default ModelsWrapper

package/src/core/plugins/oas31/wrap-components/version-pragma-filter.jsx

@@ -0,0 +1,16 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+const VersionPragmaFilterWrapper = (Original, system) => (props) => {
+  const isOAS31 = system.specSelectors.isOAS31()
+
+  const OAS31VersionPragmaFilter = system.getComponent(
+    "OAS31VersionPragmaFilter"
+  )
+
+  return <OAS31VersionPragmaFilter isOAS31={isOAS31} {...props} />
+}
+
+export default VersionPragmaFilterWrapper

package/src/core/plugins/on-complete/index.js

@@ -0,0 +1,28 @@
+let engaged = false
+
+export default function() {
+
+  return {
+    statePlugins: {
+      spec: {
+        wrapActions: {
+          updateSpec: (ori) => (...args) => {
+            engaged = true
+            return ori(...args)
+          },
+          updateJsonSpec: (ori, system) => (...args) => {
+            const cb = system.getConfigs().onComplete
+            if(engaged && typeof cb === "function") {
+              // call `onComplete` on next tick, which allows React to
+              // reconcile the DOM before we notify the user
+              setTimeout(cb, 0)
+              engaged = false
+            }
+
+            return ori(...args)
+          }
+        }
+      }
+    }
+  }
+}

package/src/core/plugins/request-snippets/fn.js

@@ -0,0 +1,169 @@
+import { List, Map } from "immutable"
+import win from "../../window"
+
+
+/**
+ * if duplicate key name existed from FormData entries,
+ * we mutated the key name by appending a hashIdx
+ * @param {String} k - possibly mutated key name
+ * @return {String} - src key name
+ */
+const extractKey = (k) => {
+  const hashIdx = "_**[]"
+  if (k.indexOf(hashIdx) < 0) {
+    return k
+  }
+  return k.split(hashIdx)[0].trim()
+}
+
+const escapeShell = (str) => {
+  if (str === "-d ") {
+    return str
+  }
+  // eslint-disable-next-line no-useless-escape
+  if (!/^[_\/-]/g.test(str))
+    return ("'" + str
+      .replace(/'/g, "'\\''") + "'")
+  else
+    return str
+}
+
+const escapeCMD = (str) => {
+  str = str
+    .replace(/\^/g, "^^")
+    .replace(/\\"/g, "\\\\\"")
+    .replace(/"/g, "\"\"")
+    .replace(/\n/g, "^\n")
+  if (str === "-d ") {
+    return str
+      .replace(/-d /g, "-d ^\n")
+  }
+  // eslint-disable-next-line no-useless-escape
+  if (!/^[_\/-]/g.test(str))
+    return "\"" + str + "\""
+  else
+    return str
+}
+
+const escapePowershell = (str) => {
+  if (str === "-d ") {
+    return str
+  }
+  if (/\n/.test(str)) {
+    const escaped = str.replace(/`/g, "``").replace(/\$/g, "`$")
+    return `@"\n${escaped}\n"@`
+  }
+  if (!/^[_\/-]/.test(str)) { // eslint-disable-line no-useless-escape
+    const escaped = str.replace(/'/g, "''")
+    return `'${escaped}'`
+  }
+  return str
+}
+
+function getStringBodyOfMap(request) {
+  let curlifyToJoin = []
+  for (let [k, v] of request.get("body").entrySeq()) {
+    let extractedKey = extractKey(k)
+    if (v instanceof win.File) {
+      curlifyToJoin.push(`  "${extractedKey}": {\n    "name": "${v.name}"${v.type ? `,\n    "type": "${v.type}"` : ""}\n  }`)
+    } else {
+      curlifyToJoin.push(`  "${extractedKey}": ${JSON.stringify(v, null, 2).replace(/(\r\n|\r|\n)/g, "\n  ")}`)
+    }
+  }
+  return `{\n${curlifyToJoin.join(",\n")}\n}`
+}
+
+const curlify = (request, escape, newLine, ext = "") => {
+  let isMultipartFormDataRequest = false
+  let curlified = ""
+  const addWords = (...args) => curlified += " " + args.map(escape).join(" ")
+  const addWordsWithoutLeadingSpace = (...args) => curlified += args.map(escape).join(" ")
+  const addNewLine = () => curlified += ` ${newLine}`
+  const addIndent = (level = 1) => curlified += "  ".repeat(level)
+  let headers = request.get("headers")
+  curlified += "curl" + ext
+
+  const curlOptions = request.get("curlOptions")
+  if (List.isList(curlOptions) && !curlOptions.isEmpty()) {
+    addWords(...request.get("curlOptions"))
+  }
+
+  addWords("-X", request.get("method"))
+
+  addNewLine()
+  addIndent()
+  addWordsWithoutLeadingSpace(`${request.get("url")}`)
+
+  if (headers && headers.size) {
+    for (let p of request.get("headers").entries()) {
+      addNewLine()
+      addIndent()
+      let [h, v] = p
+      addWordsWithoutLeadingSpace("-H", `${h}: ${v}`)
+      isMultipartFormDataRequest = isMultipartFormDataRequest || /^content-type$/i.test(h) && /^multipart\/form-data$/i.test(v)
+    }
+  }
+
+  const body = request.get("body")
+  if (body) {
+    if (isMultipartFormDataRequest && ["POST", "PUT", "PATCH"].includes(request.get("method"))) {
+      for (let [k, v] of body.entrySeq()) {
+        let extractedKey = extractKey(k)
+        addNewLine()
+        addIndent()
+        addWordsWithoutLeadingSpace("-F")
+
+        /**
+         * SwaggerClient produces specialized sub-class of File class, that only
+         * accepts string data and retain this data in `data`
+         * public property throughout the lifecycle of its instances.
+         *
+         * This sub-class is exclusively used only when Encoding Object
+         * is defined within the Media Type Object (OpenAPI 3.x.y).
+         */
+        if (v instanceof win.File && typeof v.valueOf() === "string") {
+          addWords(`${extractedKey}=${v.data}${v.type ? `;type=${v.type}` : ""}`)
+        } else if (v instanceof win.File) {
+          addWords(`${extractedKey}=@${v.name}${v.type ? `;type=${v.type}` : ""}`)
+        } else {
+          addWords(`${extractedKey}=${v}`)
+        }
+      }
+    } else if(body instanceof win.File) {
+      addNewLine()
+      addIndent()
+      addWordsWithoutLeadingSpace(`--data-binary '@${body.name}'`)
+    } else {
+      addNewLine()
+      addIndent()
+      addWordsWithoutLeadingSpace("-d ")
+      let reqBody = body
+      if (!Map.isMap(reqBody)) {
+        if (typeof reqBody !== "string") {
+          reqBody = JSON.stringify(reqBody)
+        }
+        addWordsWithoutLeadingSpace(reqBody)
+      } else {
+        addWordsWithoutLeadingSpace(getStringBodyOfMap(request))
+      }
+    }
+  } else if (!body && request.get("method") === "POST") {
+    addNewLine()
+    addIndent()
+    addWordsWithoutLeadingSpace("-d ''")
+  }
+
+  return curlified
+}
+
+export const requestSnippetGenerator_curl_powershell = (request) => {
+  return curlify(request, escapePowershell, "`\n", ".exe")
+}
+
+export const requestSnippetGenerator_curl_bash = (request) => {
+  return curlify(request, escapeShell, "\\\n")
+}
+
+export const requestSnippetGenerator_curl_cmd = (request) => {
+  return curlify(request, escapeCMD, "^\n")
+}

package/src/core/plugins/request-snippets/index.js

@@ -0,0 +1,21 @@
+import { requestSnippetGenerator_curl_bash, requestSnippetGenerator_curl_cmd, requestSnippetGenerator_curl_powershell } from "./fn"
+import * as selectors from "./selectors"
+import RequestSnippets from "./request-snippets"
+
+export default () => {
+  return {
+    components: {
+      RequestSnippets
+    },
+    fn: {
+      requestSnippetGenerator_curl_bash,
+      requestSnippetGenerator_curl_cmd,
+      requestSnippetGenerator_curl_powershell,
+    },
+    statePlugins: {
+      requestSnippets: {
+        selectors
+      }
+    }
+  }
+}

package/src/core/plugins/request-snippets/request-snippets.jsx

@@ -0,0 +1,163 @@
+import React, { useRef, useEffect, useState } from "react"
+import classNames from "classnames"
+import PropTypes from "prop-types"
+import { CopyToClipboard } from "react-copy-to-clipboard"
+
+const style = {
+  cursor: "pointer",
+  lineHeight: 1,
+  display: "inline-flex",
+  backgroundColor: "rgb(250, 250, 250)",
+  paddingBottom: "0",
+  paddingTop: "0",
+  border: "1px solid rgb(51, 51, 51)",
+  borderRadius: "4px 4px 0 0",
+  boxShadow: "none",
+  borderBottom: "none"
+}
+
+const activeStyle = {
+  cursor: "pointer",
+  lineHeight: 1,
+  display: "inline-flex",
+  backgroundColor: "rgb(51, 51, 51)",
+  boxShadow: "none",
+  border: "1px solid rgb(51, 51, 51)",
+  paddingBottom: "0",
+  paddingTop: "0",
+  borderRadius: "4px 4px 0 0",
+  marginTop: "-5px",
+  marginRight: "-5px",
+  marginLeft: "-5px",
+  zIndex: "9999",
+  borderBottom: "none"
+}
+
+const RequestSnippets = ({ request, requestSnippetsSelectors, getComponent }) => {
+  const rootRef = useRef(null)
+
+  const ArrowIcon = getComponent("ArrowUpIcon")
+  const ArrowDownIcon = getComponent("ArrowDownIcon")
+  const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
+
+  const [activeLanguage, setActiveLanguage] = useState(requestSnippetsSelectors.getSnippetGenerators()?.keySeq().first())
+  const [isExpanded, setIsExpanded] = useState(requestSnippetsSelectors?.getDefaultExpanded())
+
+  const snippetGenerators = requestSnippetsSelectors.getSnippetGenerators()
+  const activeGenerator = snippetGenerators.get(activeLanguage)
+  const snippet = activeGenerator.get("fn")(request)
+
+  const handleGenChange = (key) => {
+    const needsChange = activeLanguage !== key
+    if (needsChange) {
+      setActiveLanguage(key)
+    }
+  }
+
+  const handleSetIsExpanded = () => {
+    setIsExpanded(!isExpanded)
+  }
+
+  const handleGetBtnStyle = (key) => {
+    if (key === activeLanguage) {
+      return activeStyle
+    }
+    return style
+  }
+
+  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 doIt = () => {
+
+    }
+    doIt()
+  }, [])
+
+  useEffect(() => {
+    const childNodes = Array
+      .from(rootRef.current.childNodes)
+      .filter(node => !!node.nodeType && node.classList?.contains("curl-command"))
+    // 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))
+    }
+  }, [request])
+
+  return (
+    <div className="request-snippets" ref={rootRef}>
+      <div style={{ width: "100%", display: "flex", justifyContent: "flex-start", alignItems: "center", marginBottom: "15px" }}>
+        <h4
+          onClick={() => handleSetIsExpanded()}
+          style={{ cursor: "pointer" }}
+        >Snippets</h4>
+        <button
+          onClick={() => handleSetIsExpanded()}
+          style={{ border: "none", background: "none" }}
+          title={isExpanded ? "Collapse operation" : "Expand operation"}
+        >
+          {isExpanded ? <ArrowDownIcon className="arrow" width="10" height="10" /> : <ArrowIcon className="arrow" width="10" height="10" />}
+        </button>
+      </div>
+      {
+        isExpanded && <div className="curl-command">
+          <div style={{ paddingLeft: "15px", paddingRight: "10px", width: "100%", display: "flex" }}>
+            {
+              snippetGenerators.entrySeq().map(([key, gen]) => {
+                return (
+                  <div
+                    className={classNames("btn", {"active": key === activeLanguage })}
+                    style={handleGetBtnStyle(key)}
+                    key={key}
+                    onClick={() => handleGenChange(key)}
+                  >
+                    <h4 style={key === activeLanguage ? { color: "white", } : {}}>{gen.get("title")}</h4>
+                  </div>
+                )
+              })
+            }
+          </div>
+          <div className="copy-to-clipboard">
+            <CopyToClipboard text={snippet}>
+              <button />
+            </CopyToClipboard>
+          </div>
+          <div>
+            <SyntaxHighlighter
+              language={activeGenerator.get("syntax")}
+              className="curl microlight"
+              renderPlainText={({ children, PlainTextViewer }) => (
+                <PlainTextViewer className="curl">{children}</PlainTextViewer>
+              )}
+            >
+              {snippet}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      }
+    </div>
+  )
+}
+
+RequestSnippets.propTypes = {
+  request: PropTypes.object.isRequired,
+  requestSnippetsSelectors: PropTypes.object.isRequired,
+  getComponent: PropTypes.func.isRequired,
+  requestSnippetsActions: PropTypes.object,
+}
+
+export default RequestSnippets

package/src/core/plugins/request-snippets/selectors.js

@@ -0,0 +1,45 @@
+import { createSelector } from "reselect"
+import { Map } from "immutable"
+
+const state = state => state || Map()
+
+export const getGenerators = createSelector(
+  state,
+  state => {
+    const languageKeys = state
+      .get("languages")
+    const generators = state
+      .get("generators", Map())
+    if(!languageKeys || languageKeys.isEmpty()) {
+      return generators
+    }
+    return generators
+      .filter((v, key) => languageKeys.includes(key))
+  }
+)
+
+export const getSnippetGenerators = (state) => ({ fn }) => {
+  const getGenFn = (key) => fn[`requestSnippetGenerator_${key}`]
+  return getGenerators(state)
+    .map((gen, key) => {
+      const genFn = getGenFn(key)
+      if(typeof genFn !== "function") {
+        return null
+      }
+
+      return gen.set("fn", genFn)
+    })
+    .filter(v => v)
+}
+
+export const getActiveLanguage = createSelector(
+  state,
+  state => state
+    .get("activeLanguage")
+)
+
+export const getDefaultExpanded = createSelector(
+  state,
+  state => state
+    .get("defaultExpanded")
+)

package/src/core/plugins/safe-render/components/error-boundary.jsx

@@ -0,0 +1,52 @@
+import PropTypes from "prop-types"
+import React, { Component } from "react"
+
+import { componentDidCatch } from "../fn"
+import Fallback from "./fallback"
+
+export class ErrorBoundary extends Component {
+  static propTypes = {
+    targetName: PropTypes.string,
+    getComponent: PropTypes.func,
+    fn: PropTypes.object,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node,
+    ])
+  }
+
+  static defaultProps = {
+    targetName: "this component",
+    getComponent: () => Fallback,
+    fn: {
+      componentDidCatch,
+    },
+    children: null,
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error }
+  }
+
+  constructor(...args) {
+    super(...args)
+    this.state = { hasError: false, error: null }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    this.props.fn.componentDidCatch(error, errorInfo)
+  }
+
+  render() {
+    const { getComponent, targetName, children } = this.props
+
+    if (this.state.hasError) {
+      const FallbackComponent = getComponent("Fallback")
+      return <FallbackComponent name={targetName} />
+    }
+
+    return children
+  }
+}
+
+export default ErrorBoundary

package/src/core/plugins/safe-render/components/fallback.jsx

@@ -0,0 +1,13 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const Fallback = ({ name }) => (
+  <div className="fallback">
+    😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i>
+  </div>
+)
+Fallback.propTypes = {
+  name: PropTypes.string.isRequired,
+}
+
+export default Fallback

package/src/core/plugins/safe-render/fn.jsx

@@ -0,0 +1,32 @@
+import React, { Component } from "react"
+
+export const componentDidCatch = console.error
+
+const isClassComponent = component => component.prototype && component.prototype.isReactComponent
+
+export const withErrorBoundary = (getSystem) => (WrappedComponent) => {
+  const { getComponent, fn } = getSystem()
+  const ErrorBoundary = getComponent("ErrorBoundary")
+  const targetName = fn.getDisplayName(WrappedComponent)
+
+  class WithErrorBoundary extends Component {
+    render() {
+      return (
+        <ErrorBoundary targetName={targetName} getComponent={getComponent} fn={fn}>
+          <WrappedComponent {...this.props} {...this.context} />
+        </ErrorBoundary>
+      )
+    }
+  }
+  WithErrorBoundary.displayName = `WithErrorBoundary(${targetName})`
+  if (isClassComponent(WrappedComponent)) {
+    /**
+     * We need to handle case of class components defining a `mapStateToProps` public method.
+     * Components with `mapStateToProps` public method cannot be wrapped.
+     */
+    WithErrorBoundary.prototype.mapStateToProps = WrappedComponent.prototype.mapStateToProps
+  }
+
+  return WithErrorBoundary
+}
+