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

Refs #8513

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

@@ -53,6 +53,7 @@ const JSONSchema = ({ schema, name }) => {
   const KeywordItems = useComponent("KeywordItems")
   const KeywordContains = useComponent("KeywordContains")
   const KeywordProperties = useComponent("KeywordProperties")
+  const KeywordPatternProperties = useComponent("KeywordPatternProperties")
   const KeywordType = useComponent("KeywordType")
   const KeywordFormat = useComponent("KeywordFormat")
   const KeywordTitle = useComponent("KeywordTitle")
@@ -114,7 +115,10 @@ const JSONSchema = ({ schema, name }) => {
               <div className="json-schema-2020-12-body">
                 <KeywordDescription schema={schema} />
                 {!isCircular && isExpandable && (
-                  <KeywordProperties schema={schema} />
+                  <>
+                    <KeywordProperties schema={schema} />
+                    <KeywordPatternProperties schema={schema} />
+                  </>
                 )}
                 <KeywordAllOf schema={schema} />
                 <KeywordAnyOf schema={schema} />

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

@@ -0,0 +1,38 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent } from "../../../hooks"
+
+const PatternProperties = ({ schema }) => {
+  const patternProperties = schema?.patternProperties || {}
+
+  if (Object.keys(patternProperties).length === 0) {
+    return null
+  }
+
+  const JSONSchema = useComponent("JSONSchema")
+
+  return (
+    <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 json-schema-2020-12-property"
+          >
+            <JSONSchema name={propertyName} schema={schema} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+PatternProperties.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default PatternProperties

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

@@ -0,0 +1,19 @@
+.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: "/";
+    }
+  }
+}

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

@@ -16,13 +16,15 @@ const Properties = ({ schema }) => {
   const JSONSchema = useComponent("JSONSchema")
 
   return (
-    <ul className="json-schema-2020-12__properties">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--properties">
-      {Object.entries(properties).map(([propertyName, schema]) => (
+      <ul>
-        <li key={propertyName} className="json-schema-2020-12-property">
+        {Object.entries(properties).map(([propertyName, schema]) => (
-          <JSONSchema name={propertyName} schema={schema} />
+          <li key={propertyName} className="json-schema-2020-12-property">
-        </li>
+            <JSONSchema name={propertyName} schema={schema} />
-      ))}
+          </li>
-    </ul>
+        ))}
+      </ul>
+    </div>
   )
 }
 

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

@@ -1,7 +1,10 @@
 .json-schema-2020-12 {
-  &__properties {
+  &-keyword--properties {
-    margin: 0;
+    ul {
-    padding: 0;
+      margin: 0;
+      padding: 0;
+      border: none;
+    }
   }
 
   &-property {

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

@@ -49,3 +49,4 @@
 @import './Description/description';
 @import './Title/title';
 @import './Properties/properties';
+@import './PatternProperties/pattern-properties';

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

@@ -144,7 +144,8 @@ export const isExpandable = (schema) => {
     schema?.prefixItems ||
     schema?.items ||
     schema?.contains ||
-    schema?.description ||
+    schema?.properties ||
-    schema?.properties
+    schema?.patternProperties ||
+    schema?.description
   )
 }

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

@@ -25,6 +25,7 @@ import KeywordPrefixItems from "./components/keywords/PrefixItems"
 import KeywordItems from "./components/keywords/Items"
 import KeywordContains from "./components/keywords/Contains"
 import KeywordProperties from "./components/keywords/Properties/Properties"
+import KeywordPatternProperties from "./components/keywords/PatternProperties/PatternProperties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordTitle from "./components/keywords/Title/Title"
@@ -66,6 +67,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       KeywordItems,
       KeywordContains,
       KeywordProperties,
+      KeywordPatternProperties,
       KeywordType,
       KeywordFormat,
       KeywordTitle,

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

@@ -2,7 +2,6 @@
  * @prettier
  */
 import JSONSchema from "./components/JSONSchema/JSONSchema"
-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"
@@ -23,6 +22,8 @@ import KeywordDependentSchemas from "./components/keywords/DependentSchemas"
 import KeywordPrefixItems from "./components/keywords/PrefixItems"
 import KeywordItems from "./components/keywords/Items"
 import KeywordContains from "./components/keywords/Contains"
+import KeywordProperties from "./components/keywords/Properties/Properties"
+import KeywordPatternProperties from "./components/keywords/PatternProperties/PatternProperties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordTitle from "./components/keywords/Title/Title"
@@ -57,6 +58,7 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012KeywordItems: KeywordItems,
     JSONSchema202012KeywordContains: KeywordContains,
     JSONSchema202012KeywordProperties: KeywordProperties,
+    JSONSchema202012KeywordPatternProperties: KeywordPatternProperties,
     JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012KeywordFormat: KeywordFormat,
     JSONSchema202012KeywordTitle: KeywordTitle,

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

@@ -34,6 +34,9 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const KeywordItems = getComponent("JSONSchema202012KeywordItems")
   const KeywordContains = getComponent("JSONSchema202012KeywordContains")
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
+  const KeywordPatternProperties = getComponent(
+    "JSONSchema202012KeywordPatternProperties"
+  )
   const KeywordType = getComponent("JSONSchema202012KeywordType")
   const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
   const KeywordTitle = getComponent("JSONSchema202012KeywordTitle")
@@ -73,6 +76,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       KeywordItems,
       KeywordContains,
       KeywordProperties,
+      KeywordPatternProperties,
       KeywordType,
       KeywordFormat,
       KeywordTitle,