From f06c1caed5b1d1bff10951c222bf11a9401fd26c Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Fri, 14 Apr 2023 14:23:37 +0200 Subject: [PATCH] feat(json-schema-2020-12): add support for type keyword Refs #8513 --- .../ExpandDeepButton/_expand-deep-button.scss | 2 +- .../components/JSONSchema/JSONSchema.jsx | 2 ++ .../components/JSONSchema/_json-schema.scss | 16 +--------------- .../json-schema-2020-12/components/_all.scss | 1 + .../components/keywords/Type/Type.jsx | 19 +++++++++++++++++++ .../components/keywords/Type/_type.scss | 7 +++++++ src/core/plugins/json-schema-2020-12/fn.js | 13 ++++++++++++- src/core/plugins/json-schema-2020-12/hoc.jsx | 5 ++++- src/core/plugins/json-schema-2020-12/index.js | 6 ++++-- .../plugins/oas31/wrap-components/models.jsx | 2 ++ 10 files changed, 53 insertions(+), 20 deletions(-) create mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/Type/Type.jsx create mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss diff --git a/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss b/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss index 525bec2292c..476543c0e5a 100644 --- a/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss +++ b/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss @@ -1,6 +1,6 @@ .json-schema-2020-12-expand-deep-button { @include text_headline($section-models-model-title-font-color); font-size: 12px; - color: #6b6b6b; + color: rgb(175, 174, 174); border: none; } 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 7749d225c70..d31daadd15c 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 @@ -28,6 +28,7 @@ const JSONSchema = ({ schema, name }) => { const BooleanJSONSchema = useComponent("BooleanJSONSchema") const Accordion = useComponent("Accordion") const KeywordProperties = useComponent("KeywordProperties") + const KeywordType = useComponent("KeywordType") const ExpandDeepButton = useComponent("ExpandDeepButton") /** @@ -78,6 +79,7 @@ const JSONSchema = ({ schema, name }) => { expanded={expanded} onClick={handleExpansionDeep} /> + {expanded && (
diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss b/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss index 8e90484761a..171aee80f6a 100644 --- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss +++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss @@ -38,21 +38,6 @@ } } - &__type { - @include text_code(); - color: $prop-type-font-color; - font-size: 12px; - text-transform: capitalize; - font-weight: bold; - - &:before { - content: "{"; - } - &:after { - content: "}"; - } - } - &__description { color: #6b6b6b; font-size: 12px; @@ -66,6 +51,7 @@ color: white; background-color: #D69E2E; border-radius: 4px; + text-transform: lowercase; &:before { content: "format: "; 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 e51f88044e8..b0ecf8c8c11 100644 --- a/src/core/plugins/json-schema-2020-12/components/_all.scss +++ b/src/core/plugins/json-schema-2020-12/components/_all.scss @@ -2,3 +2,4 @@ @import './JSONSchema/json-schema'; @import './Accordion/accordion'; @import './ExpandDeepButton/expand-deep-button'; +@import './keywords/Type/type'; diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Type/Type.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Type/Type.jsx new file mode 100644 index 00000000000..b4f988a6b4b --- /dev/null +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Type/Type.jsx @@ -0,0 +1,19 @@ +/** + * @prettier + */ +import React from "react" + +import { schema } from "../../../prop-types" +import { useFn } from "../../../hooks" + +const Type = ({ schema }) => { + const fn = useFn() + + return {fn.getType(schema)} +} + +Type.propTypes = { + schema: schema.isRequired, +} + +export default Type diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss b/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss new file mode 100644 index 00000000000..1251812d887 --- /dev/null +++ b/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss @@ -0,0 +1,7 @@ +.json-schema-2020-12__type { + @include text_code(); + color: $prop-type-font-color; + font-size: 12px; + text-transform: lowercase; + font-weight: bold; +} diff --git a/src/core/plugins/json-schema-2020-12/fn.js b/src/core/plugins/json-schema-2020-12/fn.js index 286b394717f..f2bcca9955c 100644 --- a/src/core/plugins/json-schema-2020-12/fn.js +++ b/src/core/plugins/json-schema-2020-12/fn.js @@ -1,7 +1,6 @@ /** * @prettier */ - export const upperFirst = (value) => { if (typeof value === "string") { return `${value.charAt(0).toUpperCase()}${value.slice(1)}` @@ -17,4 +16,16 @@ export const getTitle = (schema) => { return "" } +export const getType = (schema) => { + if (Array.isArray(schema.type)) { + return schema.type.map(String).join(" | ") + } + + if (schema.type != null) { + return String(schema.type) + } + + return "any" +} + export const isBooleanJSONSchema = (schema) => typeof schema === "boolean" diff --git a/src/core/plugins/json-schema-2020-12/hoc.jsx b/src/core/plugins/json-schema-2020-12/hoc.jsx index b2d516f6b22..7b528663fc0 100644 --- a/src/core/plugins/json-schema-2020-12/hoc.jsx +++ b/src/core/plugins/json-schema-2020-12/hoc.jsx @@ -6,11 +6,12 @@ import React from "react" import JSONSchema from "./components/JSONSchema/JSONSchema" import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema" import KeywordProperties from "./components/keywords/Properties" +import KeywordType from "./components/keywords/Type/Type" import Accordion from "./components/Accordion/Accordion" import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton" import ChevronRightIcon from "./components/icons/ChevronRight" import { JSONSchemaContext } from "./context" -import { getTitle, isBooleanJSONSchema, upperFirst } from "./fn" +import { getTitle, isBooleanJSONSchema, upperFirst, getType } from "./fn" export const withJSONSchemaContext = (Component, overrides = {}) => { const value = { @@ -18,6 +19,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => { JSONSchema, BooleanJSONSchema, KeywordProperties, + KeywordType, Accordion, ExpandDeepButton, ChevronRightIcon, @@ -30,6 +32,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => { fn: { upperFirst, getTitle, + getType, isBooleanJSONSchema, ...overrides.fn, }, diff --git a/src/core/plugins/json-schema-2020-12/index.js b/src/core/plugins/json-schema-2020-12/index.js index c2910c2171a..d9c78406a16 100644 --- a/src/core/plugins/json-schema-2020-12/index.js +++ b/src/core/plugins/json-schema-2020-12/index.js @@ -3,7 +3,8 @@ */ import JSONSchema from "./components/JSONSchema/JSONSchema" import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema" -import JSONSchemaKeywordProperties from "./components/keywords/Properties" +import KeywordProperties from "./components/keywords/Properties" +import KeywordType from "./components/keywords/Type/Type" import Accordion from "./components/Accordion/Accordion" import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton" import ChevronRightIcon from "./components/icons/ChevronRight" @@ -14,7 +15,8 @@ const JSONSchema202012Plugin = () => ({ components: { JSONSchema202012: JSONSchema, BooleanJSONSchema202012: BooleanJSONSchema, - JSONSchema202012KeywordProperties: JSONSchemaKeywordProperties, + JSONSchema202012KeywordProperties: KeywordProperties, + JSONSchema202012KeywordType: KeywordType, JSONSchema202012Accordion: Accordion, JSONSchema202012ExpandDeepButton: ExpandDeepButton, JSONSchema202012ChevronRightIcon: ChevronRightIcon, diff --git a/src/core/plugins/oas31/wrap-components/models.jsx b/src/core/plugins/oas31/wrap-components/models.jsx index 0aade56f0a1..0a48a6ca8d1 100644 --- a/src/core/plugins/oas31/wrap-components/models.jsx +++ b/src/core/plugins/oas31/wrap-components/models.jsx @@ -11,6 +11,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => { const JSONSchema = getComponent("JSONSchema202012") const BooleanJSONSchema = getComponent("BooleanJSONSchema202012") const KeywordProperties = getComponent("JSONSchema202012KeywordProperties") + const KeywordType = getComponent("JSONSchema202012KeywordType") const Accordion = getComponent("JSONSchema202012Accordion") const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton") const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon") @@ -23,6 +24,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => { JSONSchema, BooleanJSONSchema, KeywordProperties, + KeywordType, Accordion, ExpandDeepButton, ChevronRightIcon,