refactor(json-schema-2020-12): render format keyword as Constraint (#8646)

Refs #8513

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

@@ -69,7 +69,6 @@ const JSONSchema = forwardRef(
     const KeywordConst = useComponent("KeywordConst")
     const KeywordConstraint = useComponent("KeywordConstraint")
     const KeywordDependentRequired = useComponent("KeywordDependentRequired")
-    const KeywordFormat = useComponent("KeywordFormat")
     const KeywordContentSchema = useComponent("KeywordContentSchema")
     const KeywordTitle = useComponent("KeywordTitle")
     const KeywordDescription = useComponent("KeywordDescription")
@@ -133,11 +132,10 @@ const JSONSchema = forwardRef(
                   <KeywordTitle title={name} schema={schema} />
                 )}
                 <KeywordType schema={schema} isCircular={isCircular} />
-                <KeywordFormat schema={schema} />
                 {constraints.length > 0 &&
                   constraints.map((constraint) => (
                     <KeywordConstraint
-                      key={constraint}
+                      key={`${constraint.scope}-${constraint.value}`}
                       constraint={constraint}
                     />
                   ))}

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

@@ -3,32 +3,24 @@
  */
 import React from "react"
 import PropTypes from "prop-types"
-import classNames from "classnames"
 
 /**
  * This component represents various constraint keywords
  * from JSON Schema 2020-12 validation vocabulary.
  */
-const Constraint = ({ constraint }) => {
-  const isStringRelated =
-    /^matches /.test(constraint) || // pattern keyword
-    /characters$/.test(constraint) || // minLength, maxLength keywords
-    /^media type: /.test(constraint) || // contentMediaType keyword
-    /^encoding: /.test(constraint) // contentEncoding keyword
-
-  return (
-    <span
-      className={classNames("json-schema-2020-12__constraint", {
-        "json-schema-2020-12__constraint--string-related": isStringRelated,
-      })}
-    >
-      {constraint}
-    </span>
-  )
-}
+const Constraint = ({ constraint }) => (
+  <span
+    className={`json-schema-2020-12__constraint json-schema-2020-12__constraint--${constraint.scope}`}
+  >
+    {constraint.value}
+  </span>
+)
 
 Constraint.propTypes = {
-  constraint: PropTypes.string.isRequired,
+  constraint: PropTypes.shape({
+    scope: PropTypes.oneOf(["number", "string", "array", "object"]).isRequired,
+    value: PropTypes.string.isRequired,
+  }).isRequired,
 }
 
 export default React.memo(Constraint)

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

@@ -7,7 +7,7 @@
   background-color: #805AD5;
   border-radius: 4px;
 
-  &--string-related {
+  &--string {
     color: white;
     background-color: #D69E2E;
   }

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

@@ -1,18 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-
-import { schema } from "../../../prop-types"
-
-const Format = ({ schema }) => {
-  if (!schema?.format) return null
-
-  return <span className="json-schema-2020-12__format">{schema.format}</span>
-}
-
-Format.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default Format

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

@@ -1,14 +0,0 @@
-.json-schema-2020-12__format {
-  @include text_code();
-  margin-left: 10px;
-  line-height: 1.5;
-  padding: 1px 3px;
-  color: white;
-  background-color: #D69E2E;
-  border-radius: 4px;
-  text-transform: lowercase;
-
-  &::before {
-    content: "format: ";
-  }
-}

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

@@ -67,7 +67,6 @@
 
 @import './$vocabulary/$vocabulary';
 @import './Type/type';
-@import './Format/format';
 @import './Description/description';
 @import './Title/title';
 @import './Properties/properties';

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

@@ -258,9 +258,18 @@ export const stringifyConstraints = (schema) => {
 
   // validation Keywords for Numeric Instances (number and integer)
   const multipleOf = stringifyConstraintMultipleOf(schema)
-  if (multipleOf !== null) constraints.push(multipleOf)
+  if (multipleOf !== null) {
+    constraints.push({ scope: "number", value: multipleOf })
+  }
   const numberRange = stringifyConstraintNumberRange(schema)
-  if (numberRange !== null) constraints.push(numberRange)
+  if (numberRange !== null) {
+    constraints.push({ scope: "number", value: numberRange })
+  }
+
+  // vocabularies for Semantic Content With "format"
+  if (schema?.format) {
+    constraints.push({ scope: "string", value: schema.format })
+  }
 
   // validation Keywords for Strings
   const stringRange = stringifyConstraintRange(
@@ -268,8 +277,26 @@ export const stringifyConstraints = (schema) => {
     schema?.minLength,
     schema?.maxLength
   )
-  if (stringRange !== null) constraints.push(stringRange)
-  if (schema?.pattern) constraints.push(`matches ${schema?.pattern}`)
+  if (stringRange !== null) {
+    constraints.push({ scope: "string", value: stringRange })
+  }
+  if (schema?.pattern) {
+    constraints.push({ scope: "string", value: `matches ${schema?.pattern}` })
+  }
+
+  // vocabulary for the Contents of String-Encoded Data
+  if (schema?.contentMediaType) {
+    constraints.push({
+      scope: "string",
+      value: `media type: ${schema.contentMediaType}`,
+    })
+  }
+  if (schema?.contentEncoding) {
+    constraints.push({
+      scope: "string",
+      value: `encoding: ${schema.contentEncoding}`,
+    })
+  }
 
   // validation Keywords for Arrays
   const arrayRange = stringifyConstraintRange(
@@ -277,13 +304,17 @@ export const stringifyConstraints = (schema) => {
     schema?.minItems,
     schema?.maxItems
   )
-  if (arrayRange !== null) constraints.push(arrayRange)
+  if (arrayRange !== null) {
+    constraints.push({ scope: "array", value: arrayRange })
+  }
   const containsRange = stringifyConstraintRange(
     "contained items",
     schema?.minContains,
     schema?.maxContains
   )
-  if (containsRange !== null) constraints.push(containsRange)
+  if (containsRange !== null) {
+    constraints.push({ scope: "array", value: containsRange })
+  }
 
   // validation Keywords for Objects
   const objectRange = stringifyConstraintRange(
@@ -291,14 +322,8 @@ export const stringifyConstraints = (schema) => {
     schema?.minProperties,
     schema?.maxProperties
   )
-  if (objectRange !== null) constraints.push(objectRange)
-
-  // a Vocabulary for the Contents of String-Encoded Data
-  if (schema?.contentMediaType) {
-    constraints.push(`media type: ${schema.contentMediaType}`)
-  }
-  if (schema?.contentEncoding) {
-    constraints.push(`encoding: ${schema.contentEncoding}`)
+  if (objectRange !== null) {
+    constraints.push({ scope: "object", value: objectRange })
   }
 
   return constraints

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

@@ -35,7 +35,6 @@ import KeywordEnum from "./components/keywords/Enum/Enum"
 import KeywordConst from "./components/keywords/Const"
 import KeywordConstraint from "./components/keywords/Constraint/Constraint"
 import KeywordDependentRequired from "./components/keywords/DependentRequired/DependentRequired"
-import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordContentSchema from "./components/keywords/ContentSchema"
 import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
@@ -90,7 +89,6 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       KeywordConst,
       KeywordConstraint,
       KeywordDependentRequired,
-      KeywordFormat,
       KeywordContentSchema,
       KeywordTitle,
       KeywordDescription,

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

@@ -33,7 +33,6 @@ import KeywordEnum from "./components/keywords/Enum/Enum"
 import KeywordConst from "./components/keywords/Const"
 import KeywordConstraint from "./components/keywords/Constraint/Constraint"
 import KeywordDependentRequired from "./components/keywords/DependentRequired/DependentRequired"
-import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordContentSchema from "./components/keywords/ContentSchema"
 import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
@@ -77,7 +76,6 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012KeywordConst: KeywordConst,
     JSONSchema202012KeywordConstraint: KeywordConstraint,
     JSONSchema202012KeywordDependentRequired: KeywordDependentRequired,
-    JSONSchema202012KeywordFormat: KeywordFormat,
     JSONSchema202012KeywordContentSchema: KeywordContentSchema,
     JSONSchema202012KeywordTitle: KeywordTitle,
     JSONSchema202012KeywordDescription: KeywordDescription,

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

@@ -62,7 +62,6 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const KeywordDependentRequired = getComponent(
     "JSONSchema202012KeywordDependentRequired"
   )
-  const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
   const KeywordContentSchema = getComponent(
     "JSONSchema202012KeywordContentSchema"
   )
@@ -114,7 +113,6 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       KeywordConst,
       KeywordConstraint,
       KeywordDependentRequired,
-      KeywordFormat,
       KeywordContentSchema,
       KeywordTitle,
       KeywordDescription,