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

Refs #8513

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

@@ -39,6 +39,7 @@ const JSONSchema = ({ schema, name }) => {
   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 KeywordProperties = useComponent("KeywordProperties")
   const KeywordType = useComponent("KeywordType")
   const KeywordFormat = useComponent("KeywordFormat")
@@ -109,6 +110,7 @@ const JSONSchema = ({ schema, name }) => {
                 <Keyword$dynamicAnchor schema={schema} />
                 <Keyword$ref schema={schema} />
                 <Keyword$dynamicRef schema={schema} />
+                <Keyword$defs schema={schema} />
               </div>
             )}
           </article>

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

@@ -2,7 +2,9 @@
 @import './Accordion/accordion';
 @import './ExpandDeepButton/expand-deep-button';
 @import './keywords/$vocabulary/$vocabulary';
+@import './keywords/$defs/$defs';
 @import './keywords/Type/type';
 @import './keywords/Format/format';
 @import './keywords/Description/description';
 @import './keywords/Title/title';
+@import './keywords/Properties/properties';

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

@@ -0,0 +1,48 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useState } from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent, useIsExpandedDeeply } from "../../../hooks"
+
+const $defs = ({ schema }) => {
+  const $defs = schema?.$defs || {}
+
+  if (Object.keys($defs).length === 0) {
+    return null
+  }
+
+  const isExpandedDeeply = useIsExpandedDeeply()
+  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const Accordion = useComponent("Accordion")
+  const JSONSchema = useComponent("JSONSchema")
+
+  const handleExpansion = useCallback(() => {
+    setExpanded((prev) => !prev)
+  }, [])
+
+  return (
+    <div className="json-schema-2020-12__$defs">
+      <Accordion expanded={expanded} onChange={handleExpansion}>
+        <span className="json-schema-2020-12-core-keyword">$defs</span>
+        <span className="json-schema-2020-12__type">object</span>
+      </Accordion>
+      {expanded && (
+        <ul>
+          {Object.entries($defs).map(([schemaName, schema]) => (
+            <li key={schemaName} className="json-schema-2020-12-$def">
+              <JSONSchema name={schemaName} schema={schema} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+$defs.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default $defs

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

@@ -0,0 +1,13 @@
+.json-schema-2020-12 {
+  &__\$defs {
+    & ul {
+      padding: 0;
+      margin: 0 0 0 20px;
+      border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
+    }
+  }
+
+  &-\$def {
+    @extend .json-schema-2020-12-property;
+  }
+}

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

@@ -1,32 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-
-import { schema } from "../../prop-types"
-import { useComponent } from "../../hooks"
-
-const Properties = ({ schema }) => {
-  const JSONSchema = useComponent("JSONSchema")
-  const properties = schema?.properties || {}
-
-  if (Object.keys(properties).length === 0) {
-    return null
-  }
-
-  return (
-    <>
-      {Object.entries(properties).map(([propertyName, propertyValue]) => (
-        <div key={propertyName} className="json-schema-2020-12-property">
-          <JSONSchema name={propertyName} schema={propertyValue} />
-        </div>
-      ))}
-    </>
-  )
-}
-
-Properties.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default Properties

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

@@ -0,0 +1,33 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent } from "../../../hooks"
+
+const Properties = ({ schema }) => {
+  const properties = schema?.properties || {}
+
+  if (Object.keys(properties).length === 0) {
+    return null
+  }
+
+  const JSONSchema = useComponent("JSONSchema")
+
+  return (
+    <ul className="json-schema-2020-12__properties">
+      {Object.entries(properties).map(([propertyName, schema]) => (
+        <li key={propertyName} className="json-schema-2020-12-property">
+          <JSONSchema name={propertyName} schema={schema} />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+Properties.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Properties

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

@@ -0,0 +1,10 @@
+.json-schema-2020-12 {
+  &__properties {
+    margin: 0;
+    padding: 0;
+  }
+
+  &-property {
+    list-style-type: none;
+  }
+}

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

@@ -120,6 +120,7 @@ export const isExpandable = (schema) => {
     schema?.$dynamicAnchor ||
     schema?.$ref ||
     schema?.$dynamicRef ||
+    schema?.$defs ||
     schema?.description ||
     schema?.properties
   )

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

@@ -11,7 +11,8 @@ import Keyword$anchor from "./components/keywords/$anchor"
 import Keyword$dynamicAnchor from "./components/keywords/$dynamicAnchor"
 import Keyword$ref from "./components/keywords/$ref"
 import Keyword$dynamicRef from "./components/keywords/$dynamicRef"
-import KeywordProperties from "./components/keywords/Properties"
+import Keyword$defs from "./components/keywords/$defs/$defs"
+import KeywordProperties from "./components/keywords/Properties/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordTitle from "./components/keywords/Title/Title"
@@ -39,6 +40,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       Keyword$dynamicAnchor,
       Keyword$ref,
       Keyword$dynamicRef,
+      Keyword$defs,
       KeywordProperties,
       KeywordType,
       KeywordFormat,

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

@@ -2,7 +2,7 @@
  * @prettier
  */
 import JSONSchema from "./components/JSONSchema/JSONSchema"
-import KeywordProperties from "./components/keywords/Properties"
+import KeywordProperties from "./components/keywords/Properties/Properties"
 import Keyword$schema from "./components/keywords/$schema"
 import Keyword$vocabulary from "./components/keywords/$vocabulary/$vocabulary"
 import Keyword$id from "./components/keywords/$id"
@@ -10,6 +10,7 @@ import Keyword$anchor from "./components/keywords/$anchor"
 import Keyword$dynamicAnchor from "./components/keywords/$dynamicAnchor"
 import Keyword$ref from "./components/keywords/$ref"
 import Keyword$dynamicRef from "./components/keywords/$dynamicRef"
+import Keyword$defs from "./components/keywords/$defs/$defs"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordTitle from "./components/keywords/Title/Title"
@@ -30,6 +31,7 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012Keyword$dynamicAnchor: Keyword$dynamicAnchor,
     JSONSchema202012Keyword$ref: Keyword$ref,
     JSONSchema202012Keyword$dynamicRef: Keyword$dynamicRef,
+    JSONSchema202012Keyword$defs: Keyword$defs,
     JSONSchema202012KeywordProperties: KeywordProperties,
     JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012KeywordFormat: KeywordFormat,

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

@@ -18,6 +18,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   )
   const Keyword$ref = getComponent("JSONSchema202012Keyword$ref")
   const Keyword$dynamicRef = getComponent("JSONSchema202012Keyword$dynamicRef")
+  const Keyword$defs = getComponent("JSONSchema202012Keyword$defs")
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
   const KeywordType = getComponent("JSONSchema202012KeywordType")
   const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
@@ -44,6 +45,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       Keyword$dynamicAnchor,
       Keyword$ref,
       Keyword$dynamicRef,
+      Keyword$defs,
       KeywordProperties,
       KeywordType,
       KeywordFormat,