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

Refs #8513

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

@@ -34,6 +34,7 @@ const JSONSchema = ({ schema, name }) => {
   const Accordion = useComponent("Accordion")
   const Keyword$schema = useComponent("Keyword$schema")
   const Keyword$vocabulary = useComponent("Keyword$vocabulary")
+  const Keyword$id = useComponent("Keyword$id")
   const KeywordProperties = useComponent("KeywordProperties")
   const KeywordType = useComponent("KeywordType")
   const KeywordFormat = useComponent("KeywordFormat")
@@ -99,6 +100,7 @@ const JSONSchema = ({ schema, name }) => {
                 )}
                 <Keyword$schema schema={schema} />
                 <Keyword$vocabulary schema={schema} />
+                <Keyword$id schema={schema} />
               </div>
             )}
           </article>

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

@@ -35,11 +35,13 @@
   &-core-keyword {
     color: #6b6b6b;
     font-size: 12px;
+    font-style: italic;
     margin-left: 20px;
     font-weight: bold;
 
     &__value {
       color: #6b6b6b;
+      font-style: italic;
       font-size: 12px;
       font-weight: normal;
     }

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

@@ -0,0 +1,25 @@
+/**
+ * @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__$id">
+      <span className="json-schema-2020-12-core-keyword">$id</span>
+      <span className="json-schema-2020-12-core-keyword__value">
+        ={schema.$id}
+      </span>
+    </div>
+  )
+}
+
+$id.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default $id

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

@@ -23,6 +23,7 @@ const $vocabulary = ({ schema }) => {
     <div className="json-schema-2020-12__$vocabulary">
       <Accordion expanded={expanded} onChange={handleExpansion}>
         <span className="json-schema-2020-12-core-keyword">$vocabulary</span>
+        <span className="json-schema-2020-12__type">object</span>
       </Accordion>
       <ul>
         {expanded &&

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

@@ -115,6 +115,7 @@ export const isExpandable = (schema) => {
   return (
     schema?.$schema ||
     schema?.$vocabulary ||
+    schema?.$id ||
     schema?.description ||
     schema?.properties
   )

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

@@ -6,6 +6,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 Keyword$id from "./components/keywords/$id"
 import KeywordProperties from "./components/keywords/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
@@ -29,6 +30,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       JSONSchema,
       Keyword$schema,
       Keyword$vocabulary,
+      Keyword$id,
       KeywordProperties,
       KeywordType,
       KeywordFormat,

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

@@ -5,6 +5,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 Keyword$id from "./components/keywords/$id"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordTitle from "./components/keywords/Title/Title"
@@ -20,6 +21,7 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012: JSONSchema,
     JSONSchema202012Keyword$schema: Keyword$schema,
     JSONSchema202012Keyword$vocabulary: Keyword$vocabulary,
+    JSONSchema202012Keyword$id: Keyword$id,
     JSONSchema202012KeywordProperties: KeywordProperties,
     JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012KeywordFormat: KeywordFormat,

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

@@ -11,6 +11,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const JSONSchema = getComponent("JSONSchema202012")
   const Keyword$schema = getComponent("JSONSchema202012Keyword$schema")
   const Keyword$vocabulary = getComponent("JSONSchema202012Keyword$vocabulary")
+  const Keyword$id = getComponent("JSONSchema202012Keyword$id")
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
   const KeywordType = getComponent("JSONSchema202012KeywordType")
   const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
@@ -32,6 +33,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       JSONSchema,
       Keyword$schema,
       Keyword$vocabulary,
+      Keyword$id,
       KeywordProperties,
       KeywordType,
       KeywordFormat,