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

Refs #8513
This commit is contained in:
Vladimir Gorej
2023-04-19 19:21:13 +02:00
committed by Vladimír Gorej
parent d6d3e9ffc1
commit 679698b998
9 changed files with 83 additions and 1 deletions

View File

@@ -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 }) => {
<KeywordProperties schema={schema} />
)}
<Keyword$schema schema={schema} />
<Keyword$vocabulary schema={schema} />
</div>
)}
</article>

View File

@@ -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';

View File

@@ -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 (
<div className="json-schema-2020-12__$vocabulary">
<Accordion expanded={expanded} onChange={handleExpansion}>
<span className="json-schema-2020-12-core-keyword">$vocabulary</span>
</Accordion>
<ul>
{expanded &&
Object.entries(schema.$vocabulary).map(([uri, enabled]) => (
<li
key={uri}
className={classNames("json-schema-2020-12__$vocabulary-uri", {
"json-schema-2020-12__$vocabulary-uri--disabled": !enabled,
})}
>
<span className="json-schema-2020-12-core-keyword__value">
{uri}
</span>
</li>
))}
</ul>
</div>
)
}
$vocabulary.propTypes = {
schema: schema.isRequired,
}
export default $vocabulary

View File

@@ -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;
}
}
}

View File

@@ -2,4 +2,8 @@
color: #6b6b6b;
font-size: 12px;
margin-left: 20px;
& p {
margin: 0;
}
}

View File

@@ -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
)
}

View File

@@ -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,

View File

@@ -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,

View File

@@ -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,