From 679698b998b0d49e63465547ff824bdf765768e4 Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Wed, 19 Apr 2023 19:21:13 +0200 Subject: [PATCH] feat(json-schema-2020-12): add support for vocabulary keyword Refs #8513 --- .../components/JSONSchema/JSONSchema.jsx | 2 + .../json-schema-2020-12/components/_all.scss | 1 + .../keywords/$vocabulary/$vocabulary.jsx | 50 +++++++++++++++++++ .../keywords/$vocabulary/_$vocabulary.scss | 14 ++++++ .../keywords/Description/_description.scss | 4 ++ src/core/plugins/json-schema-2020-12/fn.js | 7 ++- src/core/plugins/json-schema-2020-12/hoc.jsx | 2 + src/core/plugins/json-schema-2020-12/index.js | 2 + .../plugins/oas31/wrap-components/models.jsx | 2 + 9 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx create mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx index cfd7c0be..d11d1181 100644 --- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx +++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx @@ -33,6 +33,7 @@ const JSONSchema = ({ schema, name }) => { const renderedSchemas = useRenderedSchemas(schema) const Accordion = useComponent("Accordion") const Keyword$schema = useComponent("Keyword$schema") + const Keyword$vocabulary = useComponent("Keyword$vocabulary") const KeywordProperties = useComponent("KeywordProperties") const KeywordType = useComponent("KeywordType") const KeywordFormat = useComponent("KeywordFormat") @@ -97,6 +98,7 @@ const JSONSchema = ({ schema, name }) => { )} + )} diff --git a/src/core/plugins/json-schema-2020-12/components/_all.scss b/src/core/plugins/json-schema-2020-12/components/_all.scss index 60f423e5..0956d7d8 100644 --- a/src/core/plugins/json-schema-2020-12/components/_all.scss +++ b/src/core/plugins/json-schema-2020-12/components/_all.scss @@ -1,6 +1,7 @@ @import './JSONSchema/json-schema'; @import './Accordion/accordion'; @import './ExpandDeepButton/expand-deep-button'; +@import './keywords/$vocabulary/$vocabulary'; @import './keywords/Type/type'; @import './keywords/Format/format'; @import './keywords/Description/description'; diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx new file mode 100644 index 00000000..f6f0b536 --- /dev/null +++ b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx @@ -0,0 +1,50 @@ +/** + * @prettier + */ +import React, { useCallback, useState } from "react" +import classNames from "classnames" + +import { schema } from "../../../prop-types" +import { useComponent, useIsExpandedDeeply } from "../../../hooks" + +const $vocabulary = ({ schema }) => { + if (!schema?.$vocabulary) return null + if (typeof schema.$vocabulary !== "object") return null + + const isExpandedDeeply = useIsExpandedDeeply() + const [expanded, setExpanded] = useState(isExpandedDeeply) + const Accordion = useComponent("Accordion") + + const handleExpansion = useCallback(() => { + setExpanded((prev) => !prev) + }, []) + + return ( +
+ + $vocabulary + +
    + {expanded && + Object.entries(schema.$vocabulary).map(([uri, enabled]) => ( +
  • + + {uri} + +
    • + ))} +
+
+ ) +} + +$vocabulary.propTypes = { + schema: schema.isRequired, +} + +export default $vocabulary diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss new file mode 100644 index 00000000..8bb1f25b --- /dev/null +++ b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss @@ -0,0 +1,14 @@ +.json-schema-2020-12 { + &__\$vocabulary { + ul { + margin: 0 0 0 20px; + border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1); + } + } + + &__\$vocabulary-uri { + &--disabled { + text-decoration: line-through; + } + } +} diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss b/src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss index 291e1663..98fb434f 100644 --- a/src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss @@ -2,4 +2,8 @@ color: #6b6b6b; font-size: 12px; margin-left: 20px; + + & p { + margin: 0; + } } diff --git a/src/core/plugins/json-schema-2020-12/fn.js b/src/core/plugins/json-schema-2020-12/fn.js index 64ce503e..6b6024cc 100644 --- a/src/core/plugins/json-schema-2020-12/fn.js +++ b/src/core/plugins/json-schema-2020-12/fn.js @@ -112,5 +112,10 @@ export const getType = (schema, processedSchemas = new WeakSet()) => { export const isBooleanJSONSchema = (schema) => typeof schema === "boolean" export const isExpandable = (schema) => { - return schema?.description || schema?.properties || schema?.$schema + return ( + schema?.$schema || + schema?.$vocabulary || + schema?.description || + schema?.properties + ) } diff --git a/src/core/plugins/json-schema-2020-12/hoc.jsx b/src/core/plugins/json-schema-2020-12/hoc.jsx index e025886b..9cbe91c0 100644 --- a/src/core/plugins/json-schema-2020-12/hoc.jsx +++ b/src/core/plugins/json-schema-2020-12/hoc.jsx @@ -5,6 +5,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 KeywordProperties from "./components/keywords/Properties" import KeywordType from "./components/keywords/Type/Type" import KeywordFormat from "./components/keywords/Format/Format" @@ -27,6 +28,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => { components: { JSONSchema, Keyword$schema, + Keyword$vocabulary, KeywordProperties, KeywordType, KeywordFormat, diff --git a/src/core/plugins/json-schema-2020-12/index.js b/src/core/plugins/json-schema-2020-12/index.js index 35d2188d..d55f6f7d 100644 --- a/src/core/plugins/json-schema-2020-12/index.js +++ b/src/core/plugins/json-schema-2020-12/index.js @@ -4,6 +4,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 KeywordType from "./components/keywords/Type/Type" import KeywordFormat from "./components/keywords/Format/Format" import KeywordTitle from "./components/keywords/Title/Title" @@ -18,6 +19,7 @@ const JSONSchema202012Plugin = () => ({ components: { JSONSchema202012: JSONSchema, JSONSchema202012Keyword$schema: Keyword$schema, + JSONSchema202012Keyword$vocabulary: Keyword$vocabulary, JSONSchema202012KeywordProperties: KeywordProperties, JSONSchema202012KeywordType: KeywordType, JSONSchema202012KeywordFormat: KeywordFormat, diff --git a/src/core/plugins/oas31/wrap-components/models.jsx b/src/core/plugins/oas31/wrap-components/models.jsx index bb5cf7f0..15173512 100644 --- a/src/core/plugins/oas31/wrap-components/models.jsx +++ b/src/core/plugins/oas31/wrap-components/models.jsx @@ -10,6 +10,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => { const Models = getComponent("OAS31Models", true) const JSONSchema = getComponent("JSONSchema202012") const Keyword$schema = getComponent("JSONSchema202012Keyword$schema") + const Keyword$vocabulary = getComponent("JSONSchema202012Keyword$vocabulary") const KeywordProperties = getComponent("JSONSchema202012KeywordProperties") const KeywordType = getComponent("JSONSchema202012KeywordType") const KeywordFormat = getComponent("JSONSchema202012KeywordFormat") @@ -30,6 +31,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => { components: { JSONSchema, Keyword$schema, + Keyword$vocabulary, KeywordProperties, KeywordType, KeywordFormat,