@upendra19/swagger-ui-custom 1.0.0

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

@@ -0,0 +1,227 @@
+/**
+ * @prettier
+ */
+import React, { forwardRef, useCallback } from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+
+import * as propTypes from "../../prop-types"
+import {
+  useComponent,
+  useLevel,
+  useFn,
+  useIsEmbedded,
+  useIsExpanded,
+  useIsCircular,
+  useRenderedSchemas,
+  usePath,
+} from "../../hooks"
+import {
+  JSONSchemaLevelContext,
+  JSONSchemaCyclesContext,
+  JSONSchemaPathContext,
+} from "../../context"
+
+const JSONSchema = forwardRef(
+  (
+    {
+      schema,
+      name = "",
+      dependentRequired = [],
+      onExpand = () => {},
+      identifier = "",
+    },
+    ref
+  ) => {
+    const fn = useFn()
+    // this implementation assumes that $id is always non-relative URI
+    const pathToken = identifier || schema?.$id || name
+    const { path } = usePath(pathToken)
+    const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+    const [level, nextLevel] = useLevel()
+    const isEmbedded = useIsEmbedded()
+    const isExpandable = fn.isExpandable(schema) || dependentRequired.length > 0
+    const isCircular = useIsCircular(schema)
+    const renderedSchemas = useRenderedSchemas(schema)
+    const constraints = fn.stringifyConstraints(schema)
+    const Accordion = useComponent("Accordion")
+    const Keyword$schema = useComponent("Keyword$schema")
+    const Keyword$vocabulary = useComponent("Keyword$vocabulary")
+    const Keyword$id = useComponent("Keyword$id")
+    const Keyword$anchor = useComponent("Keyword$anchor")
+    const Keyword$dynamicAnchor = useComponent("Keyword$dynamicAnchor")
+    const Keyword$ref = useComponent("Keyword$ref")
+    const Keyword$dynamicRef = useComponent("Keyword$dynamicRef")
+    const Keyword$defs = useComponent("Keyword$defs")
+    const Keyword$comment = useComponent("Keyword$comment")
+    const KeywordAllOf = useComponent("KeywordAllOf")
+    const KeywordAnyOf = useComponent("KeywordAnyOf")
+    const KeywordOneOf = useComponent("KeywordOneOf")
+    const KeywordNot = useComponent("KeywordNot")
+    const KeywordIf = useComponent("KeywordIf")
+    const KeywordThen = useComponent("KeywordThen")
+    const KeywordElse = useComponent("KeywordElse")
+    const KeywordDependentSchemas = useComponent("KeywordDependentSchemas")
+    const KeywordPrefixItems = useComponent("KeywordPrefixItems")
+    const KeywordItems = useComponent("KeywordItems")
+    const KeywordContains = useComponent("KeywordContains")
+    const KeywordProperties = useComponent("KeywordProperties")
+    const KeywordPatternProperties = useComponent("KeywordPatternProperties")
+    const KeywordAdditionalProperties = useComponent(
+      "KeywordAdditionalProperties"
+    )
+    const KeywordPropertyNames = useComponent("KeywordPropertyNames")
+    const KeywordUnevaluatedItems = useComponent("KeywordUnevaluatedItems")
+    const KeywordUnevaluatedProperties = useComponent(
+      "KeywordUnevaluatedProperties"
+    )
+    const KeywordType = useComponent("KeywordType")
+    const KeywordEnum = useComponent("KeywordEnum")
+    const KeywordConst = useComponent("KeywordConst")
+    const KeywordConstraint = useComponent("KeywordConstraint")
+    const KeywordDependentRequired = useComponent("KeywordDependentRequired")
+    const KeywordContentSchema = useComponent("KeywordContentSchema")
+    const KeywordTitle = useComponent("KeywordTitle")
+    const KeywordDescription = useComponent("KeywordDescription")
+    const KeywordDefault = useComponent("KeywordDefault")
+    const KeywordDeprecated = useComponent("KeywordDeprecated")
+    const KeywordReadOnly = useComponent("KeywordReadOnly")
+    const KeywordWriteOnly = useComponent("KeywordWriteOnly")
+    const KeywordExamples = useComponent("KeywordExamples")
+    const ExtensionKeywords = useComponent("ExtensionKeywords")
+    const ExpandDeepButton = useComponent("ExpandDeepButton")
+
+    /**
+     * Event handlers.
+     */
+    const handleExpansion = useCallback(
+      (e, expandedNew) => {
+        if (expandedNew) {
+          setExpanded()
+        } else {
+          setCollapsed()
+        }
+        onExpand(e, expandedNew, false)
+      },
+      [onExpand, setExpanded, setCollapsed]
+    )
+    const handleExpansionDeep = useCallback(
+      (e, expandedDeepNew) => {
+        if (expandedDeepNew) {
+          setExpanded({ deep: true })
+        } else {
+          setCollapsed({ deep: true })
+        }
+        onExpand(e, expandedDeepNew, true)
+      },
+      [onExpand, setExpanded, setCollapsed]
+    )
+
+    return (
+      <JSONSchemaPathContext.Provider value={path}>
+        <JSONSchemaLevelContext.Provider value={nextLevel}>
+          <JSONSchemaCyclesContext.Provider value={renderedSchemas}>
+            <article
+              ref={ref}
+              data-json-schema-level={level}
+              className={classNames("json-schema-2020-12", {
+                "json-schema-2020-12--embedded": isEmbedded,
+                "json-schema-2020-12--circular": isCircular,
+              })}
+            >
+              <div className="json-schema-2020-12-head">
+                {isExpandable && !isCircular ? (
+                  <>
+                    <Accordion expanded={isExpanded} onChange={handleExpansion}>
+                      <KeywordTitle title={name} schema={schema} />
+                    </Accordion>
+                    <ExpandDeepButton
+                      expanded={isExpanded}
+                      onClick={handleExpansionDeep}
+                    />
+                  </>
+                ) : (
+                  <KeywordTitle title={name} schema={schema} />
+                )}
+                <KeywordDeprecated schema={schema} />
+                <KeywordReadOnly schema={schema} />
+                <KeywordWriteOnly schema={schema} />
+                <KeywordType schema={schema} isCircular={isCircular} />
+                {constraints.length > 0 &&
+                  constraints.map((constraint) => (
+                    <KeywordConstraint
+                      key={`${constraint.scope}-${constraint.value}`}
+                      constraint={constraint}
+                    />
+                  ))}
+              </div>
+              <div
+                className={classNames("json-schema-2020-12-body", {
+                  "json-schema-2020-12-body--collapsed": !isExpanded,
+                })}
+              >
+                {isExpanded && (
+                  <>
+                    <KeywordDescription schema={schema} />
+                    {!isCircular && isExpandable && (
+                      <>
+                        <KeywordProperties schema={schema} />
+                        <KeywordPatternProperties schema={schema} />
+                        <KeywordAdditionalProperties schema={schema} />
+                        <KeywordUnevaluatedProperties schema={schema} />
+                        <KeywordPropertyNames schema={schema} />
+                        <KeywordAllOf schema={schema} />
+                        <KeywordAnyOf schema={schema} />
+                        <KeywordOneOf schema={schema} />
+                        <KeywordNot schema={schema} />
+                        <KeywordIf schema={schema} />
+                        <KeywordThen schema={schema} />
+                        <KeywordElse schema={schema} />
+                        <KeywordDependentSchemas schema={schema} />
+                        <KeywordPrefixItems schema={schema} />
+                        <KeywordItems schema={schema} />
+                        <KeywordUnevaluatedItems schema={schema} />
+                        <KeywordContains schema={schema} />
+                        <KeywordContentSchema schema={schema} />
+                      </>
+                    )}
+                    <KeywordEnum schema={schema} />
+                    <KeywordConst schema={schema} />
+                    <KeywordDependentRequired
+                      schema={schema}
+                      dependentRequired={dependentRequired}
+                    />
+                    <KeywordDefault schema={schema} />
+                    <KeywordExamples schema={schema} />
+                    <Keyword$schema schema={schema} />
+                    <Keyword$vocabulary schema={schema} />
+                    <Keyword$id schema={schema} />
+                    <Keyword$anchor schema={schema} />
+                    <Keyword$dynamicAnchor schema={schema} />
+                    <Keyword$ref schema={schema} />
+                    {!isCircular && isExpandable && (
+                      <Keyword$defs schema={schema} />
+                    )}
+                    <Keyword$dynamicRef schema={schema} />
+                    <Keyword$comment schema={schema} />
+                    <ExtensionKeywords schema={schema} />
+                  </>
+                )}
+              </div>
+            </article>
+          </JSONSchemaCyclesContext.Provider>
+        </JSONSchemaLevelContext.Provider>
+      </JSONSchemaPathContext.Provider>
+    )
+  }
+)
+
+JSONSchema.propTypes = {
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  schema: propTypes.schema.isRequired,
+  dependentRequired: PropTypes.arrayOf(PropTypes.string),
+  onExpand: PropTypes.func,
+  identifier: PropTypes.string,
+}
+
+export default JSONSchema

package/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss

@@ -0,0 +1,34 @@
+@use "./../../../../../style/variables" as *;
+@use "./../../components/mixins";
+
+.json-schema-2020-12 {
+  margin: 0 20px 15px 20px;
+  border-radius: 4px;
+  padding: 12px 0 12px 20px;
+  background-color: rgba(
+    $section-models-model-container-background-color,
+    0.05
+  );
+
+  &:first-of-type {
+    margin: 20px;
+  }
+
+  &:last-of-type {
+    margin: 0 20px;
+  }
+
+  &--embedded {
+    background-color: inherit;
+    padding: 0 inherit 0 inherit;
+  }
+
+  &-body {
+    @include mixins.expansion-border;
+    margin: 2px 0;
+
+    &--collapsed {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,153 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+
+import {
+  useComponent,
+  useIsExpanded,
+  useFn,
+  usePath,
+  useLevel,
+} from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
+import { isEmptyObject, isEmptyArray } from "../../fn"
+
+const JSONViewer = ({ name, value, className }) => {
+  const fn = useFn()
+  const { path } = usePath(name)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(name)
+  const [level, nextLevel] = useLevel()
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const isPrimitive =
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "bigint" ||
+    typeof value === "boolean" ||
+    typeof value === "symbol" ||
+    value == null
+  const isEmpty = isEmptyObject(value) || isEmptyArray(value)
+
+  /**
+   * 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 (isPrimitive) {
+    return (
+      <div className={classNames("json-schema-2020-12-json-viewer", className)}>
+        <span className="json-schema-2020-12-json-viewer__name json-schema-2020-12-json-viewer__name--secondary">
+          {name}
+        </span>
+        <span className="json-schema-2020-12-json-viewer__value json-schema-2020-12-json-viewer__value--secondary">
+          {fn.stringify(value)}
+        </span>
+      </div>
+    )
+  }
+
+  if (isEmpty) {
+    return (
+      <div className={classNames("json-schema-2020-12-json-viewer", className)}>
+        <span className="json-schema-2020-12-json-viewer__name json-schema-2020-12-json-viewer__name--secondary">
+          {name}
+        </span>
+        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+          {Array.isArray(value) ? "empty array" : "empty object"}
+        </strong>
+      </div>
+    )
+  }
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className={classNames("json-schema-2020-12-json-viewer", className)}
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-json-viewer__name json-schema-2020-12-json-viewer__name--secondary">
+              {name}
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+            {Array.isArray(value) ? "array" : "object"}
+          </strong>
+          <ul
+            className={classNames("json-schema-2020-12-json-viewer__children", {
+              "json-schema-2020-12-json-viewer__children--collapsed":
+                !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {Array.isArray(value)
+                  ? value.map((item, index) => (
+                      <li
+                        key={`#${index}`}
+                        className="json-schema-2020-12-property"
+                      >
+                        <JSONViewer
+                          name={`#${index}`}
+                          value={item}
+                          className={className}
+                        />
+                      </li>
+                    ))
+                  : Object.entries(value).map(
+                      ([propertyName, propertyValue]) => (
+                        <li
+                          key={propertyName}
+                          className="json-schema-2020-12-property"
+                        >
+                          <JSONViewer
+                            name={propertyName}
+                            value={propertyValue}
+                            className={className}
+                          />
+                        </li>
+                      )
+                    )}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+JSONViewer.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  className: PropTypes.string,
+}
+
+export default JSONViewer

package/src/core/plugins/json-schema-2020-12/components/JSONViewer/_json-viewer.scss

@@ -0,0 +1,11 @@
+@use "./../mixins";
+@use "./../keywords/all";
+
+.json-schema-2020-12-json-viewer {
+  @include mixins.json-schema-2020-12-keyword;
+}
+
+.json-schema-2020-12-json-viewer__name--secondary
+  + .json-schema-2020-12-json-viewer__value--secondary::before {
+  content: "=";
+}

package/src/core/plugins/json-schema-2020-12/components/_all.scss

@@ -0,0 +1,4 @@
+@use "./JSONViewer/json-viewer";
+@use "./JSONSchema/json-schema";
+@use "./Accordion/accordion";
+@use "./ExpandDeepButton/expand-deep-button";

package/src/core/plugins/json-schema-2020-12/components/_mixins.scss

@@ -0,0 +1,82 @@
+@use "./../../../../style/variables" as *;
+@use "./../../../../style/type";
+
+@mixin expansion-border {
+  margin: 0 0 0 20px;
+  border-left: 1px dashed
+    rgba($section-models-model-container-background-color, 0.1);
+}
+
+@mixin json-schema-2020-12-keyword--primary {
+  color: $text-code-default-font-color;
+  font-style: normal;
+}
+
+@mixin json-schema-2020-12-keyword--extension {
+  color: #929292;
+  font-style: italic;
+}
+
+@mixin json-schema-2020-12-keyword {
+  margin: 5px 0 5px 0;
+
+  &__children {
+    @include expansion-border;
+    padding: 0;
+
+    &--collapsed {
+      display: none;
+    }
+  }
+
+  &__name {
+    font-size: 12px;
+    margin-left: 20px;
+    font-weight: bold;
+
+    &--primary {
+      @include json-schema-2020-12-keyword--primary;
+    }
+
+    &--secondary {
+      color: #6b6b6b;
+      font-style: italic;
+    }
+
+    &--extension {
+      @include json-schema-2020-12-keyword--extension;
+    }
+  }
+
+  &__value {
+    color: #6b6b6b;
+    font-style: italic;
+    font-size: 12px;
+    font-weight: normal;
+
+    &--primary {
+      @include json-schema-2020-12-keyword--primary;
+    }
+
+    &--secondary {
+      color: #6b6b6b;
+      font-style: italic;
+    }
+
+    &--extension {
+      @include json-schema-2020-12-keyword--extension;
+    }
+
+    &--warning {
+      @include type.text_code();
+      font-style: normal;
+      display: inline-block;
+      margin-left: 10px;
+      line-height: 1.5;
+      padding: 1px 4px 1px 4px;
+      border-radius: 4px;
+      color: red;
+      border: 1px dashed red;
+    }
+  }
+}

package/src/core/plugins/json-schema-2020-12/components/icons/ChevronRight.jsx

@@ -0,0 +1,17 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+const ChevronRight = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+  </svg>
+)
+
+export default ChevronRight

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

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

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

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

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

@@ -0,0 +1,93 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import classNames from "classnames"
+
+import { schema } from "../../prop-types"
+import { useComponent, useIsExpanded, usePath, useLevel } from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
+
+const $defs = ({ schema }) => {
+  const $defs = schema?.$defs || {}
+  const pathToken = "$defs"
+  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 (Object.keys($defs).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--$defs"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
+              $defs
+            </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($defs).map(([schemaName, schema]) => (
+                  <li key={schemaName} className="json-schema-2020-12-property">
+                    <JSONSchema name={schemaName} schema={schema} />
+                  </li>
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+$defs.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default $defs