@upendra19/swagger-ui-custom 1.0.0

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

@@ -0,0 +1,41 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent, usePath } from "../../../hooks"
+import { JSONSchemaPathContext } from "../../../context"
+
+const PatternProperties = ({ schema }) => {
+  const patternProperties = schema?.patternProperties || {}
+  const JSONSchema = useComponent("JSONSchema")
+  const { path } = usePath("patternProperties")
+
+  /**
+   * Rendering.
+   */
+  if (Object.keys(patternProperties).length === 0) {
+    return null
+  }
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--patternProperties">
+        <ul>
+          {Object.entries(patternProperties).map(([propertyName, schema]) => (
+            <li key={propertyName} className="json-schema-2020-12-property">
+              <JSONSchema name={propertyName} schema={schema} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+PatternProperties.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default PatternProperties

package/src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/_pattern-properties.scss

@@ -0,0 +1,21 @@
+@use "./../../../../../../style/variables" as *;
+
+.json-schema-2020-12 {
+  &-keyword--patternProperties {
+    ul {
+      margin: 0;
+      padding: 0;
+      border: none;
+    }
+
+    .json-schema-2020-12__title:first-of-type::before {
+      color: $prop-type-font-color;
+      content: "/";
+    }
+
+    .json-schema-2020-12__title:first-of-type::after {
+      color: $prop-type-font-color;
+      content: "/";
+    }
+  }
+}

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

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

@@ -0,0 +1,61 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import classNames from "classnames"
+
+import { schema } from "../../../prop-types"
+import { useFn, useComponent, usePath } from "../../../hooks"
+import { JSONSchemaPathContext } from "../../../context"
+
+const Properties = ({ schema }) => {
+  const fn = useFn()
+  const properties = schema?.properties || {}
+  const required = Array.isArray(schema?.required) ? schema.required : []
+  const JSONSchema = useComponent("JSONSchema")
+  const { path } = usePath("properties")
+
+  /**
+   * Rendering.
+   */
+  if (Object.keys(properties).length === 0) {
+    return null
+  }
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--properties">
+        <ul>
+          {Object.entries(properties).map(([propertyName, propertySchema]) => {
+            const isRequired = required.includes(propertyName)
+            const dependentRequired = fn.getDependentRequired(
+              propertyName,
+              schema
+            )
+
+            return (
+              <li
+                key={propertyName}
+                className={classNames("json-schema-2020-12-property", {
+                  "json-schema-2020-12-property--required": isRequired,
+                })}
+              >
+                <JSONSchema
+                  name={propertyName}
+                  schema={propertySchema}
+                  dependentRequired={dependentRequired}
+                />
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+Properties.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Properties

package/src/core/plugins/json-schema-2020-12/components/keywords/Properties/_properties.scss

@@ -0,0 +1,24 @@
+.json-schema-2020-12 {
+  &-keyword--properties {
+    & > ul {
+      margin: 0;
+      padding: 0;
+      border: none;
+    }
+  }
+
+  &-property {
+    list-style-type: none;
+
+    &--required {
+      &
+        > .json-schema-2020-12:first-of-type
+        > .json-schema-2020-12-head
+        .json-schema-2020-12__title:after {
+        content: "*";
+        color: red;
+        font-weight: bold;
+      }
+    }
+  }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { schema } from "../../../prop-types"
+import { useFn } from "../../../hooks"
+
+const Title = ({ title = "", schema }) => {
+  const fn = useFn()
+  const renderedTitle = title || fn.getTitle(schema)
+
+  if (!renderedTitle) return null
+
+  return <div className="json-schema-2020-12__title">{renderedTitle}</div>
+}
+
+Title.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  schema: schema.isRequired,
+}
+
+export default Title

package/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss

@@ -0,0 +1,26 @@
+@use "./../../../../../../style/variables" as *;
+@use "./../../../../../../style/type";
+
+.json-schema-2020-12 {
+  &__title {
+    @include type.text_headline($section-models-model-title-font-color);
+    display: inline-block;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: normal;
+
+    & .json-schema-2020-12-keyword__name {
+      margin: 0;
+    }
+  }
+
+  &-property {
+    margin: 7px 0;
+
+    .json-schema-2020-12__title {
+      @include type.text_code();
+      font-size: 12px;
+      vertical-align: middle;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { schema } from "../../prop-types"
+import { useFn } from "../../hooks"
+
+const Type = ({ schema, isCircular = false }) => {
+  const fn = useFn()
+  const type = fn.getType(schema)
+  const circularSuffix = isCircular ? " [circular]" : ""
+
+  return (
+    <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+      {`${type}${circularSuffix}`}
+    </strong>
+  )
+}
+
+Type.propTypes = {
+  schema: schema.isRequired,
+  isCircular: PropTypes.bool,
+}
+
+export default Type

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+@use "./../../../../../style/variables" as *;
+@use "./../mixins";
+@use "./$vocabulary/$vocabulary" as vocabulary;
+@use "./Const/const";
+@use "./Constraint/constraint";
+@use "./Default/default";
+@use "./DependentRequired/dependent-required";
+@use "./Description/description";
+@use "./Enum/enum";
+@use "./Examples/examples";
+@use "./ExtensionKeywords/extension-keywords";
+@use "./PatternProperties/pattern-properties";
+@use "./Properties/properties";
+@use "./Title/title";
+
+.json-schema-2020-12-keyword {
+  @include mixins.json-schema-2020-12-keyword;
+}
+
+.json-schema-2020-12-keyword__name--secondary
+  + .json-schema-2020-12-keyword__value--secondary::before {
+  content: "=";
+}
+
+.json-schema-2020-12__attribute {
+  font-family: monospace;
+  color: $text-code-default-font-color;
+  font-size: 12px;
+  text-transform: lowercase;
+  padding-left: 10px;
+
+  &--primary {
+    color: $prop-type-font-color;
+  }
+
+  &--muted {
+    color: gray;
+  }
+
+  &--warning {
+    color: red;
+  }
+}

package/src/core/plugins/json-schema-2020-12/context.js

@@ -0,0 +1,14 @@
+/**
+ * @prettier
+ */
+import { createContext } from "react"
+
+export const JSONSchemaContext = createContext(null)
+JSONSchemaContext.displayName = "JSONSchemaContext"
+
+export const JSONSchemaLevelContext = createContext(0)
+JSONSchemaLevelContext.displayName = "JSONSchemaLevelContext"
+
+export const JSONSchemaCyclesContext = createContext(new Set())
+
+export const JSONSchemaPathContext = createContext([])

package/src/core/plugins/json-schema-2020-12/enum.js

@@ -0,0 +1,10 @@
+/**
+ * @prettier
+ */
+export class JSONSchemaIsExpandedState {
+  static Collapsed = "collapsed"
+
+  static Expanded = "expanded"
+
+  static DeeplyExpanded = "deeply-expanded"
+}