kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: introduce new UI + extendable behavior

Browse Source 
Ref #8513
This commit is contained in:
Vladimir Gorej
2023-04-13 17:43:19 +02:00
committed by Vladimír Gorej
parent ab1842083d
commit 9ed1c1b3a0
10 changed files with 277 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/core/plugins/json-schema-2020-12/components/Accordion/Accordion.jsx Normal file
View File

@@ -0,0 +1,45 @@
/**
* @prettier
*/
import React, { useCallback } from "react"
import PropTypes from "prop-types"
import classNames from "classnames"
import { useComponent } from "../../hooks"
const Accordion = ({ expanded, children, onChange }) => {
const ChevronRightIcon = useComponent("ChevronRightIcon")
const handleExpansion = useCallback(
(event) => {
onChange(event, !expanded)
},
[expanded, onChange]
)
return (
<button className="json-schema-2020-12-accordion" onClick={handleExpansion}>
<div className="json-schema-2020-12-accordion__children">{children}</div>
<div
className={classNames("json-schema-2020-12-accordion__icon", {
"json-schema-2020-12-accordion__icon--expanded": expanded,
"json-schema-2020-12-accordion__icon--collapsed": !expanded,
})}
>
<ChevronRightIcon />
</div>
</button>
)
}
Accordion.propTypes = {
expanded: PropTypes.bool,
children: PropTypes.node.isRequired,
onClick: PropTypes.func.isRequired,
}
Accordion.defaultProps = {
expanded: false,
}
export default Accordion

35
src/core/plugins/json-schema-2020-12/components/Accordion/_accordion.scss Normal file
View File

@@ -0,0 +1,35 @@
.json-schema-2020-12-accordion {
outline: none;
border: none;
display: flex;
align-items: center;
&__children {
display: inline-block;
}
&__icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: center;
&--expanded {
transition: transform .15s ease-in;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
&--collapsed {
transition: transform .15s ease-in;
transform: rotate(0deg);
transform-origin: 50% 50%;
}
& svg {
height: 20px;
width: 20px;
}
}
}

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

@@ -1,30 +1,97 @@
/**
* @prettier
*/
import React from "react"
import React, { useState, useCallback } from "react"
import PropTypes from "prop-types"
import * as propTypes from "../../prop-types"
import { useComponent, useFn } from "../../hooks"
const JSONSchema = ({ schema, name }) => {
const fn = useFn()
const [expanded, setExpanded] = useState(false)
const fn = useFn()
const BooleanJSONSchema = useComponent("BooleanJSONSchema")
const Accordion = useComponent("Accordion")
const handleExpansion = useCallback(() => {
setExpanded((prev) => !prev)
}, [])
if (fn.isBooleanJSONSchema(schema)) {
return <BooleanJSONSchema schema={schema} name={name} />
}
return (
<article className="json-schema-2020-12 model-container">
<div className="model-box">
<div className="model">
<div className="json-schema-2020-12__title model-title">
<article className="json-schema-2020-12">
<div className="json-schema-2020-12-head">
<Accordion expanded={expanded} onChange={handleExpansion}>
<div className="json-schema-2020-12__title">
{name || fn.getTitle(schema)}
</div>
</div>
</Accordion>
</div>
{expanded && (
<div className="json-schema-2020-12-body">
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">property1</span>
<span className="json-schema-2020-12__type">Object</span>
<span className="json-schema-2020-12__format">int64</span>
<span className="json-schema-2020-12__limit">[0...100]</span>
<div className="json-schema-2020-12__description">
Whether to turn on or off the light.
</div>
</div>
<div className="json-schema-2020-12-body">
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">
property11
</span>
<span className="json-schema-2020-12__type">Object</span>
</div>
</article>
</div>
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">
property22
</span>
<span className="json-schema-2020-12__type">Object</span>
</div>
</article>
</div>
<div className="json-schema-2020-12-note">
Additional properties are allowed.
</div>
</div>
</article>
</div>
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">property2</span>
<span className="json-schema-2020-12__type">Object</span>
</div>
</article>
</div>
<div className="json-schema-2020-12-property">
<article className="json-schema-2020-12 json-schema-2020-12--embedded">
<div className="json-schema-2020-12-head">
<span className="json-schema-2020-12__title">property3</span>
<span className="json-schema-2020-12__type">Object</span>
</div>
</article>
</div>
<div className="json-schema-2020-12-note">
Additional properties are allowed.
</div>
</div>
)}
</article>
)
}

92
src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss
View File

@@ -0,0 +1,92 @@
.json-schema-2020-12 {
margin: 0 20px 15px 20px;
border-radius: 4px;
padding: 12px 0 12px 20px;
background-color: rgba($section-models-model-container-background-color, .05);
&:first-of-type {
margin: 20px;
}
&:last-of-type {
margin: 0 20px;
}
&--embedded {
background-color: inherit;
padding: 0 inherit 0 inherit;
}
&__title {
@include text_headline($section-models-model-title-font-color);
font-weight: bold;
}
&-body {
margin: 2px 0;
border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
}
&-property {
margin: 7px 0;
.json-schema-2020-12__title {
font-size: 12px;
@include text_code();
}
}
&__type {
@include text_code();
color: $prop-type-font-color;
font-size: 12px;
text-transform: capitalize;
font-weight: bold;
margin-left: 10px;
&:before {
content: "{";
}
&:after {
content: "}";
}
}
&__description {
color: #6b6b6b;
font-size: 12px;
}
&__format {
@include text_code();
margin-left: 10px;
line-height: 1.5;
padding: 1px;
color: white;
background-color: #D69E2E;
border-radius: 4px;
&:before {
content: "format: ";
}
}
&__limit {
@include text_code();
margin-left: 10px;
line-height: 1.5;
padding: 1px;
color: white;
background-color: #805AD5;
border-radius: 4px;
}
&-note {
@include text_headline($section-models-model-title-font-color);
padding: 10px 0 0 20px;
font-size: 11px;
color: #6b6b6b;
}
}

1
src/core/plugins/json-schema-2020-12/components/_all.scss
View File

@@ -1,2 +1,3 @@
@import './BooleanJSONSchema/boolean-json-schema';
@import './JSONSchema/json-schema';
@import './Accordion/accordion';

17
src/core/plugins/json-schema-2020-12/components/icons/ChevronRight.jsx Normal file
View File

@@ -0,0 +1,17 @@
/**
* @prettier
*/
import React from "react"
const ChevronRight = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
)
export default ChevronRight

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

@@ -5,6 +5,8 @@ import React from "react"
import JSONSchema from "./components/JSONSchema/JSONSchema"
import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
import Accordion from "./components/Accordion/Accordion"
import ChevronRightIcon from "./components/icons/ChevronRight"
import JSONSchemaContext from "./context"
import { getTitle, isBooleanJSONSchema, upperFirst } from "./fn"
@@ -13,6 +15,8 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
components: {
JSONSchema,
BooleanJSONSchema,
Accordion,
ChevronRightIcon,
...overrides.components,
},
config: {

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

@@ -3,6 +3,8 @@
*/
import JSONSchema from "./components/JSONSchema/JSONSchema"
import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
import Accordion from "./components/Accordion/Accordion"
import ChevronRightIcon from "./components/icons/ChevronRight"
import { upperFirst } from "./fn"
import { withJSONSchemaContext } from "./hoc"
@@ -10,6 +12,8 @@ const JSONSchema202012Plugin = () => ({
components: {
JSONSchema202012: JSONSchema,
BooleanJSONSchema202012: BooleanJSONSchema,
JSONSchema202012Accordion: Accordion,
JSONSchema202012ChevronRightIcon: ChevronRightIcon,
withJSONSchema202012Context: withJSONSchemaContext,
},
fn: {

4
src/core/plugins/oas31/wrap-components/models.jsx
View File

@@ -10,6 +10,8 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
const Models = getComponent("OAS31Models", true)
const JSONSchema = getComponent("JSONSchema202012")
const BooleanJSONSchema = getComponent("BooleanJSONSchema202012")
const Accordion = getComponent("JSONSchema202012Accordion")
const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
const withSchemaContext = getComponent("withJSONSchema202012Context")
const ModelsWithJSONContext = withSchemaContext(Models, {
config: {
@@ -18,6 +20,8 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
components: {
JSONSchema,
BooleanJSONSchema,
Accordion,
ChevronRightIcon,
},
fn: {
upperFirst: fn.upperFirst,

2
src/style/main.scss
View File

@@ -15,8 +15,8 @@
@import 'information';
@import 'authorize';
@import 'errors';
@import '../core/plugins/json-schema-2020-12/components/all';
@include text_body();
@import 'split-pane-mode';
@import 'markdown';
@import '../core/plugins/json-schema-2020-12/components/all';
}