@upendra19/swagger-ui-custom 1.0.0

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,66 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import classNames from "classnames"
+
+import { schema } from "../../../prop-types"
+import { useComponent, useIsExpanded, usePath } from "../../../hooks"
+import { JSONSchemaPathContext } from "../../../context"
+
+const $vocabulary = ({ schema }) => {
+  const pathToken = "$vocabulary"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const Accordion = useComponent("Accordion")
+
+  const handleExpansion = useCallback(() => {
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+
+  /**
+   * Rendering.
+   */
+  if (!schema?.$vocabulary) return null
+  if (typeof schema.$vocabulary !== "object") return null
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$vocabulary">
+        <Accordion expanded={isExpanded} onChange={handleExpansion}>
+          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
+            $vocabulary
+          </span>
+        </Accordion>
+        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+          object
+        </strong>
+        <ul>
+          {isExpanded &&
+            Object.entries(schema.$vocabulary).map(([uri, enabled]) => (
+              <li
+                key={uri}
+                className={classNames("json-schema-2020-12-$vocabulary-uri", {
+                  "json-schema-2020-12-$vocabulary-uri--disabled": !enabled,
+                })}
+              >
+                <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
+                  {uri}
+                </span>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+$vocabulary.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default $vocabulary

package/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss

@@ -0,0 +1,17 @@
+@use "./../../../components/mixins";
+
+.json-schema-2020-12 {
+  &-keyword--\$vocabulary {
+    ul {
+      @include mixins.expansion-border;
+    }
+  }
+
+  &-\$vocabulary-uri {
+    margin-left: 35px;
+
+    &--disabled {
+      text-decoration: line-through;
+    }
+  }
+}

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

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

package/src/core/plugins/json-schema-2020-12/components/keywords/AllOf.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 AllOf = ({ schema }) => {
+  const allOf = schema?.allOf || []
+  const fn = useFn()
+  const pathToken = "allOf"
+  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(allOf) || allOf.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--allOf"
+          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">
+              All of
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <KeywordType schema={{ allOf }} />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {allOf.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>
+  )
+}
+
+AllOf.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default AllOf

package/src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.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 AnyOf = ({ schema }) => {
+  const anyOf = schema?.anyOf || []
+  const fn = useFn()
+  const pathToken = "anyOf"
+  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(anyOf) || anyOf.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--anyOf"
+          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">
+              Any of
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <KeywordType schema={{ anyOf }} />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {anyOf.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>
+  )
+}
+
+AnyOf.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default AnyOf

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

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

package/src/core/plugins/json-schema-2020-12/components/keywords/Const/_const.scss

@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--const {
+  .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/Constraint/Constraint.jsx

@@ -0,0 +1,38 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { isPlainObject } from "../../../fn"
+
+/**
+ * This component represents various constraint keywords
+ * from JSON Schema 2020-12 validation vocabulary.
+ */
+const Constraint = ({ constraint }) => {
+  if (
+    !isPlainObject(constraint) ||
+    typeof constraint.scope !== "string" ||
+    typeof constraint.value !== "string"
+  ) {
+    return null
+  }
+
+  return (
+    <span
+      className={`json-schema-2020-12__constraint json-schema-2020-12__constraint--${constraint.scope}`}
+    >
+      {constraint.value}
+    </span>
+  )
+}
+
+Constraint.propTypes = {
+  constraint: PropTypes.shape({
+    scope: PropTypes.oneOf(["number", "string", "array", "object"]).isRequired,
+    value: PropTypes.string.isRequired,
+  }).isRequired,
+}
+
+export default React.memo(Constraint)

package/src/core/plugins/json-schema-2020-12/components/keywords/Constraint/_constraint.scss

@@ -0,0 +1,16 @@
+@use "./../../../../../../style/type";
+
+.json-schema-2020-12__constraint {
+  @include type.text_code();
+  margin-left: 10px;
+  line-height: 1.5;
+  padding: 1px 3px;
+  color: white;
+  background-color: #805ad5;
+  border-radius: 4px;
+
+  &--string {
+    color: white;
+    background-color: #d69e2e;
+  }
+}

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

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

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

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

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

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