@upendra19/swagger-ui-custom 1.0.0

package/src/core/plugins/json-schema-2020-12/components/keywords/Default/_default.scss

@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--default {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+}

package/src/core/plugins/json-schema-2020-12/components/keywords/DependentRequired/DependentRequired.jsx

@@ -0,0 +1,37 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import * as propTypes from "../../../prop-types"
+
+const DependentRequired = ({ dependentRequired }) => {
+  if (!Array.isArray(dependentRequired) || dependentRequired.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--dependentRequired">
+      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+        Required when defined
+      </span>
+      <ul>
+        {dependentRequired.map((propertyName) => (
+          <li key={propertyName}>
+            <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--warning">
+              {propertyName}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+DependentRequired.propTypes = {
+  schema: propTypes.schema.isRequired,
+  dependentRequired: PropTypes.arrayOf(PropTypes.string).isRequired,
+}
+
+export default DependentRequired

package/src/core/plugins/json-schema-2020-12/components/keywords/DependentRequired/_dependent-required.scss

@@ -0,0 +1,12 @@
+.json-schema-2020-12-keyword--dependentRequired {
+  & > ul {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+
+    li {
+      display: inline;
+      list-style-type: none;
+    }
+  }
+}

package/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx

@@ -0,0 +1,97 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import classNames from "classnames"
+
+import { schema } from "../../prop-types"
+import { useComponent, useIsExpanded, useLevel, usePath } from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
+
+const DependentSchemas = ({ schema }) => {
+  const dependentSchemas = schema?.dependentSchemas || []
+  const pathToken = "dependentSchemas"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONSchema = useComponent("JSONSchema")
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
+
+  /**
+   * Rendering.
+   */
+  if (typeof dependentSchemas !== "object") return null
+  if (Object.keys(dependentSchemas).length === 0) return null
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--dependentSchemas"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+              Dependent schemas
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+            object
+          </strong>
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {Object.entries(dependentSchemas).map(
+                  ([schemaName, schema]) => (
+                    <li
+                      key={schemaName}
+                      className="json-schema-2020-12-property"
+                    >
+                      <JSONSchema name={schemaName} schema={schema} />
+                    </li>
+                  )
+                )}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+DependentSchemas.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default DependentSchemas

package/src/core/plugins/json-schema-2020-12/components/keywords/Deprecated.jsx

@@ -0,0 +1,22 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../prop-types"
+
+const Deprecated = ({ schema }) => {
+  if (schema?.deprecated !== true) return null
+
+  return (
+    <span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--warning">
+      deprecated
+    </span>
+  )
+}
+
+Deprecated.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Deprecated

package/src/core/plugins/json-schema-2020-12/components/keywords/Description/Description.jsx

@@ -0,0 +1,24 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+
+const Description = ({ schema }) => {
+  if (!schema?.description) return null
+
+  return (
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--description">
+      <div className="json-schema-2020-12-core-keyword__value json-schema-2020-12-core-keyword__value--secondary">
+        {schema.description}
+      </div>
+    </div>
+  )
+}
+
+Description.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Description

package/src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss

@@ -0,0 +1,9 @@
+.json-schema-2020-12-keyword--description {
+  color: #6b6b6b;
+  font-size: 12px;
+  margin-left: 20px;
+
+  & p {
+    margin: 0;
+  }
+}

package/src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx

@@ -0,0 +1,35 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../prop-types"
+import { useFn, useComponent } from "../../hooks"
+
+const Else = ({ schema }) => {
+  const fn = useFn()
+  const JSONSchema = useComponent("JSONSchema")
+
+  /**
+   * Rendering.
+   */
+  if (!fn.hasKeyword(schema, "else")) return null
+
+  const name = (
+    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+      Else
+    </span>
+  )
+
+  return (
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
+      <JSONSchema name={name} schema={schema.else} identifier="else" />
+    </div>
+  )
+}
+
+Else.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Else

package/src/core/plugins/json-schema-2020-12/components/keywords/Enum/Enum.jsx

@@ -0,0 +1,27 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent } from "../../../hooks"
+
+const Enum = ({ schema }) => {
+  const JSONViewer = useComponent("JSONViewer")
+
+  if (!Array.isArray(schema?.enum)) return null
+
+  return (
+    <JSONViewer
+      name="Enum"
+      value={schema.enum}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--enum"
+    />
+  )
+}
+
+Enum.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Enum

package/src/core/plugins/json-schema-2020-12/components/keywords/Enum/_enum.scss

@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--enum {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+}

package/src/core/plugins/json-schema-2020-12/components/keywords/Examples/Examples.jsx

@@ -0,0 +1,30 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent } from "../../../hooks"
+
+const Examples = ({ schema }) => {
+  const examples = schema?.examples || []
+  const JSONViewer = useComponent("JSONViewer")
+
+  if (!Array.isArray(examples) || examples.length === 0) {
+    return null
+  }
+
+  return (
+    <JSONViewer
+      name="Examples"
+      value={schema.examples}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--examples"
+    />
+  )
+}
+
+Examples.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Examples

package/src/core/plugins/json-schema-2020-12/components/keywords/Examples/_examples.scss

@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--examples {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+}

package/src/core/plugins/json-schema-2020-12/components/keywords/ExtensionKeywords/ExtensionKeywords.jsx

@@ -0,0 +1,103 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import classNames from "classnames"
+
+import { schema } from "../../../prop-types"
+
+import {
+  useComponent,
+  useIsExpanded,
+  useFn,
+  usePath,
+  useLevel,
+  useConfig,
+} from "../../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../../context"
+
+const ExtensionKeywords = ({ schema }) => {
+  const fn = useFn()
+  const pathToken = "ExtensionKeywords"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONViewer = useComponent("JSONViewer")
+  const { showExtensionKeywords } = useConfig("showExtensionKeywords")
+  const extensionKeywords = fn.getExtensionKeywords(schema)
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
+
+  /**
+   * Rendering.
+   */
+  if (!showExtensionKeywords || extensionKeywords.length === 0) {
+    return null
+  }
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--extension-keywords"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--extension">
+              Extension Keywords
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {extensionKeywords.map((keyword) => (
+                  <JSONViewer
+                    key={keyword}
+                    name={keyword}
+                    value={schema[keyword]}
+                    className="json-schema-2020-12-json-viewer-extension-keyword"
+                  />
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+ExtensionKeywords.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default ExtensionKeywords

package/src/core/plugins/json-schema-2020-12/components/keywords/ExtensionKeywords/_extension-keywords.scss

@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-json-viewer-extension-keyword {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--extension;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--extension;
+  }
+}

package/src/core/plugins/json-schema-2020-12/components/keywords/If.jsx

@@ -0,0 +1,35 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../prop-types"
+import { useFn, useComponent } from "../../hooks"
+
+const If = ({ schema }) => {
+  const fn = useFn()
+  const JSONSchema = useComponent("JSONSchema")
+
+  /**
+   * Rendering.
+   */
+  if (!fn.hasKeyword(schema, "if")) return null
+
+  const name = (
+    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+      If
+    </span>
+  )
+
+  return (
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
+      <JSONSchema name={name} schema={schema.if} identifier="if" />
+    </div>
+  )
+}
+
+If.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default If

package/src/core/plugins/json-schema-2020-12/components/keywords/Items.jsx

@@ -0,0 +1,35 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../prop-types"
+import { useFn, useComponent } from "../../hooks"
+
+const Items = ({ schema }) => {
+  const fn = useFn()
+  const JSONSchema = useComponent("JSONSchema")
+
+  /**
+   * Rendering.
+   */
+  if (!fn.hasKeyword(schema, "items")) return null
+
+  const name = (
+    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+      Items
+    </span>
+  )
+
+  return (
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--items">
+      <JSONSchema name={name} schema={schema.items} identifier="items" />
+    </div>
+  )
+}
+
+Items.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Items

package/src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx

@@ -0,0 +1,35 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../prop-types"
+import { useFn, useComponent } from "../../hooks"
+
+const Not = ({ schema }) => {
+  const fn = useFn()
+  const JSONSchema = useComponent("JSONSchema")
+
+  /**
+   * Rendering.
+   */
+  if (!fn.hasKeyword(schema, "not")) return null
+
+  const name = (
+    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+      Not
+    </span>
+  )
+
+  return (
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--not">
+      <JSONSchema name={name} schema={schema.not} identifier="not" />
+    </div>
+  )
+}
+
+Not.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Not

package/src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx

@@ -0,0 +1,105 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import classNames from "classnames"
+
+import { schema } from "../../prop-types"
+import {
+  useFn,
+  useComponent,
+  useIsExpanded,
+  usePath,
+  useLevel,
+} from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
+
+const OneOf = ({ schema }) => {
+  const oneOf = schema?.oneOf || []
+  const fn = useFn()
+  const pathToken = "oneOf"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONSchema = useComponent("JSONSchema")
+  const KeywordType = useComponent("KeywordType")
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
+
+  /**
+   * Rendering.
+   */
+  if (!Array.isArray(oneOf) || oneOf.length === 0) {
+    return null
+  }
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--oneOf"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+              One of
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <KeywordType schema={{ oneOf }} />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {oneOf.map((schema, index) => (
+                  <li
+                    key={`#${index}`}
+                    className="json-schema-2020-12-property"
+                  >
+                    <JSONSchema
+                      name={`#${index} ${fn.getTitle(schema)}`}
+                      schema={schema}
+                    />
+                  </li>
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+OneOf.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default OneOf