feat(json-schema-2020-12): add support for vocabulary keyword

Refs #8513

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

@@ -33,6 +33,7 @@ const JSONSchema = ({ schema, name }) => {
   const renderedSchemas = useRenderedSchemas(schema)
   const Accordion = useComponent("Accordion")
   const Keyword$schema = useComponent("Keyword$schema")
+  const Keyword$vocabulary = useComponent("Keyword$vocabulary")
   const KeywordProperties = useComponent("KeywordProperties")
   const KeywordType = useComponent("KeywordType")
   const KeywordFormat = useComponent("KeywordFormat")
@@ -97,6 +98,7 @@ const JSONSchema = ({ schema, name }) => {
                   <KeywordProperties schema={schema} />
                 )}
                 <Keyword$schema schema={schema} />
+                <Keyword$vocabulary schema={schema} />
               </div>
             )}
           </article>

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

@@ -1,6 +1,7 @@
 @import './JSONSchema/json-schema';
 @import './Accordion/accordion';
 @import './ExpandDeepButton/expand-deep-button';
+@import './keywords/$vocabulary/$vocabulary';
 @import './keywords/Type/type';
 @import './keywords/Format/format';
 @import './keywords/Description/description';

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

@@ -0,0 +1,50 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useState } from "react"
+import classNames from "classnames"
+
+import { schema } from "../../../prop-types"
+import { useComponent, useIsExpandedDeeply } from "../../../hooks"
+
+const $vocabulary = ({ schema }) => {
+  if (!schema?.$vocabulary) return null
+  if (typeof schema.$vocabulary !== "object") return null
+
+  const isExpandedDeeply = useIsExpandedDeeply()
+  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const Accordion = useComponent("Accordion")
+
+  const handleExpansion = useCallback(() => {
+    setExpanded((prev) => !prev)
+  }, [])
+
+  return (
+    <div className="json-schema-2020-12__$vocabulary">
+      <Accordion expanded={expanded} onChange={handleExpansion}>
+        <span className="json-schema-2020-12-core-keyword">$vocabulary</span>
+      </Accordion>
+      <ul>
+        {expanded &&
+          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-core-keyword__value">
+                {uri}
+              </span>
+            </li>
+          ))}
+      </ul>
+    </div>
+  )
+}
+
+$vocabulary.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default $vocabulary

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

@@ -0,0 +1,14 @@
+.json-schema-2020-12 {
+  &__\$vocabulary {
+    ul {
+      margin: 0 0 0 20px;
+      border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
+    }
+  }
+
+  &__\$vocabulary-uri {
+    &--disabled {
+      text-decoration: line-through;
+    }
+  }
+}

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

@@ -2,4 +2,8 @@
   color: #6b6b6b;
   font-size: 12px;
   margin-left: 20px;
+
+  & p {
+    margin: 0;
+  }
 }

src/core/plugins/json-schema-2020-12/fn.js

@@ -112,5 +112,10 @@ export const getType = (schema, processedSchemas = new WeakSet()) => {
 export const isBooleanJSONSchema = (schema) => typeof schema === "boolean"
 
 export const isExpandable = (schema) => {
-  return schema?.description || schema?.properties || schema?.$schema
+  return (
+    schema?.$schema ||
+    schema?.$vocabulary ||
+    schema?.description ||
+    schema?.properties
+  )
 }

src/core/plugins/json-schema-2020-12/hoc.jsx

@@ -5,6 +5,7 @@ import React from "react"
 
 import JSONSchema from "./components/JSONSchema/JSONSchema"
 import Keyword$schema from "./components/keywords/$schema"
+import Keyword$vocabulary from "./components/keywords/$vocabulary/$vocabulary"
 import KeywordProperties from "./components/keywords/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
@@ -27,6 +28,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
     components: {
       JSONSchema,
       Keyword$schema,
+      Keyword$vocabulary,
       KeywordProperties,
       KeywordType,
       KeywordFormat,

src/core/plugins/json-schema-2020-12/index.js

@@ -4,6 +4,7 @@
 import JSONSchema from "./components/JSONSchema/JSONSchema"
 import KeywordProperties from "./components/keywords/Properties"
 import Keyword$schema from "./components/keywords/$schema"
+import Keyword$vocabulary from "./components/keywords/$vocabulary/$vocabulary"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordTitle from "./components/keywords/Title/Title"
@@ -18,6 +19,7 @@ const JSONSchema202012Plugin = () => ({
   components: {
     JSONSchema202012: JSONSchema,
     JSONSchema202012Keyword$schema: Keyword$schema,
+    JSONSchema202012Keyword$vocabulary: Keyword$vocabulary,
     JSONSchema202012KeywordProperties: KeywordProperties,
     JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012KeywordFormat: KeywordFormat,

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

@@ -10,6 +10,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const Models = getComponent("OAS31Models", true)
   const JSONSchema = getComponent("JSONSchema202012")
   const Keyword$schema = getComponent("JSONSchema202012Keyword$schema")
+  const Keyword$vocabulary = getComponent("JSONSchema202012Keyword$vocabulary")
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
   const KeywordType = getComponent("JSONSchema202012KeywordType")
   const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
@@ -30,6 +31,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
     components: {
       JSONSchema,
       Keyword$schema,
+      Keyword$vocabulary,
       KeywordProperties,
       KeywordType,
       KeywordFormat,