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

Refs #8513

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

@@ -48,6 +48,7 @@ const JSONSchema = ({ schema, name }) => {
   const KeywordIf = useComponent("KeywordIf")
   const KeywordThen = useComponent("KeywordThen")
   const KeywordElse = useComponent("KeywordElse")
+  const KeywordDependentSchemas = useComponent("KeywordDependentSchemas")
   const KeywordProperties = useComponent("KeywordProperties")
   const KeywordType = useComponent("KeywordType")
   const KeywordFormat = useComponent("KeywordFormat")
@@ -119,6 +120,7 @@ const JSONSchema = ({ schema, name }) => {
                 <KeywordIf schema={schema} />
                 <KeywordThen schema={schema} />
                 <KeywordElse schema={schema} />
+                <KeywordDependentSchemas schema={schema} />
                 <Keyword$schema schema={schema} />
                 <Keyword$vocabulary schema={schema} />
                 <Keyword$id schema={schema} />

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

@@ -15,6 +15,7 @@
 @import './keywords/If/if';
 @import './keywords/Then/then';
 @import './keywords/Else/else';
+@import './keywords/DependentSchemas/dependent-schemas';
 @import './keywords/Type/type';
 @import './keywords/Format/format';
 @import './keywords/Description/description';

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

@@ -27,7 +27,7 @@ const AllOf = ({ schema }) => {
     <div className="json-schema-2020-12__allOf">
       <Accordion expanded={expanded} onChange={handleExpansion}>
         <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--allOf">
-          AllOf
+          All of
         </span>
         <span className="json-schema-2020-12__type">
           {fn.getType({ allOf })}

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

@@ -27,7 +27,7 @@ const AnyOf = ({ schema }) => {
     <div className="json-schema-2020-12__anyOf">
       <Accordion expanded={expanded} onChange={handleExpansion}>
         <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--anyOf">
-          AnyOf
+          Any of
         </span>
         <span className="json-schema-2020-12__type">
           {fn.getType({ anyOf })}

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

@@ -0,0 +1,49 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useState } from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent, useIsExpandedDeeply } from "../../../hooks"
+
+const DependentSchemas = ({ schema }) => {
+  const dependentSchemas = schema?.dependentSchemas || []
+
+  if (typeof dependentSchemas !== "object") return null
+  if (Object.keys(dependentSchemas).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__dependentSchemas">
+      <Accordion expanded={expanded} onChange={handleExpansion}>
+        <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--dependentSchemas">
+          Dependent schemas
+        </span>
+        <span className="json-schema-2020-12__type">object</span>
+      </Accordion>
+      {expanded && (
+        <ul>
+          {Object.entries(dependentSchemas).map(([schemaName, schema]) => (
+            <li key={schemaName} className="json-schema-2020-12-property">
+              <JSONSchema name={schemaName} schema={schema} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+DependentSchemas.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default DependentSchemas

src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas/_dependent-schemas.scss

@@ -0,0 +1,13 @@
+.json-schema-2020-12 {
+  &__dependentSchemas {
+    @extend .json-schema-2020-12__allOf;
+  }
+
+  &-core-keyword {
+    &--dependentSchemas {
+      @extend .json-schema-2020-12-core-keyword--allOf;
+    }
+  }
+}
+
+

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

@@ -27,7 +27,7 @@ const OneOf = ({ schema }) => {
     <div className="json-schema-2020-12__oneOf">
       <Accordion expanded={expanded} onChange={handleExpansion}>
         <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--oneOf">
-          OneOf
+          One of
         </span>
         <span className="json-schema-2020-12__type">
           {fn.getType({ oneOf })}

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

@@ -133,6 +133,7 @@ export const isExpandable = (schema) => {
     schema?.if ||
     schema?.then ||
     schema?.else ||
+    schema?.dependentSchemas ||
     schema?.description ||
     schema?.properties
   )

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

@@ -20,6 +20,7 @@ import KeywordNot from "./components/keywords/Not/Not"
 import KeywordIf from "./components/keywords/If/If"
 import KeywordThen from "./components/keywords/Then/Then"
 import KeywordElse from "./components/keywords/Else/Else"
+import KeywordDependentSchemas from "./components/keywords/DependentSchemas/DependentSchemas"
 import KeywordProperties from "./components/keywords/Properties/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
@@ -57,6 +58,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       KeywordIf,
       KeywordThen,
       KeywordElse,
+      KeywordDependentSchemas,
       KeywordProperties,
       KeywordType,
       KeywordFormat,

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

@@ -19,6 +19,7 @@ import KeywordNot from "./components/keywords/Not/Not"
 import KeywordIf from "./components/keywords/If/If"
 import KeywordThen from "./components/keywords/Then/Then"
 import KeywordElse from "./components/keywords/Else/Else"
+import KeywordDependentSchemas from "./components/keywords/DependentSchemas/DependentSchemas"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordTitle from "./components/keywords/Title/Title"
@@ -48,6 +49,7 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012KeywordIf: KeywordIf,
     JSONSchema202012KeywordThen: KeywordThen,
     JSONSchema202012KeywordElse: KeywordElse,
+    JSONSchema202012KeywordDependentSchemas: KeywordDependentSchemas,
     JSONSchema202012KeywordProperties: KeywordProperties,
     JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012KeywordFormat: KeywordFormat,

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

@@ -27,6 +27,9 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const KeywordIf = getComponent("JSONSchema202012KeywordIf")
   const KeywordThen = getComponent("JSONSchema202012KeywordThen")
   const KeywordElse = getComponent("JSONSchema202012KeywordElse")
+  const KeywordDependentSchemas = getComponent(
+    "JSONSchema202012KeywordDependentSchemas"
+  )
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
   const KeywordType = getComponent("JSONSchema202012KeywordType")
   const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
@@ -62,6 +65,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       KeywordIf,
       KeywordThen,
       KeywordElse,
+      KeywordDependentSchemas,
       KeywordProperties,
       KeywordType,
       KeywordFormat,