Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add/descriptionexample #225

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Add/descriptionexample #225

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
89a688d
Added Description and Example
dscervantes Sep 6, 2023
065a428
Leveled Text
dscervantes Sep 6, 2023
5c1c99e
took out levelitem
dscervantes Sep 6, 2023
bc18d4f
With prettify
dscervantes Sep 6, 2023
7d4e8eb
Text Input
dscervantes Sep 19, 2023
9a7b828
Woo Examples
dscervantes Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 109 additions & 41 deletions src/components/APIDoc/SchemaPropertyView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
import React, {ReactNode} from 'react';
import { Text, TextContent, TextVariants, Flex, FlexItem, Label, LabelGroup } from '@patternfly/react-core';
import { OpenAPIV3 } from 'openapi-types';

import React, { ReactNode } from "react";
import {
Text,
TextContent,
TextVariants,
Flex,
FlexItem,
Label,
LabelGroup,
Level,
ExpandableSection,
CodeBlock,
CodeBlockCode,
} from "@patternfly/react-core";
import { OpenAPIV3 } from "openapi-types";

interface PropertyViewComponentProps {
propSchema?: OpenAPIV3.ReferenceObject | OpenAPIV3.SchemaObject;
Expand All @@ -10,10 +21,17 @@ interface PropertyViewComponentProps {
required: boolean | undefined;
}

export const PropertyView:React.FunctionComponent<PropertyViewComponentProps> = ({propSchema, propName, propertyType, required}) => {
export const PropertyView: React.FunctionComponent<
PropertyViewComponentProps
> = ({ propSchema, propName, propertyType, required }) => {
let extraProps;
if (propSchema && !('$ref' in propSchema) ) {
extraProps = <ExtraPropertyView propSchema={propSchema}/>
let extraExample;
if (propSchema && !("$ref" in propSchema)) {
extraProps = <ExtraPropertyView propSchema={propSchema} />;
if(propSchema.example) {
extraExample = <ExtraExampleView propSchema={propSchema} />
}

}
return (
<Flex>
Expand All @@ -24,74 +42,124 @@ export const PropertyView:React.FunctionComponent<PropertyViewComponentProps> =
<Text component={TextVariants.h6}>{propName}</Text>
</FlexItem>
<FlexItem>
<Text component={TextVariants.p} className="pf-u-danger-color-100">{required && "*"}</Text>
<Text
component={TextVariants.p}
className="pf-u-danger-color-100"
>
{required && "*"}
</Text>
</FlexItem>
<FlexItem>
<Text
component={TextVariants.p}>
{propertyType}
</Text>
</FlexItem>
</Flex>
<Flex>
<FlexItem>
{extraExample}
</FlexItem>
</Flex>
</TextContent>
</FlexItem>
<FlexItem>
<TextContent>
<Text component={TextVariants.p}>
{propertyType}
</Text>
</TextContent>
</FlexItem>
<FlexItem>
{extraProps}
</FlexItem>
<FlexItem>{extraProps}</FlexItem>
</Flex>
)
);
};

interface ExtraExampleViewProps {
propSchema: OpenAPIV3.SchemaObject;
}

export const ExtraExampleView: React.FunctionComponent<
ExtraExampleViewProps
> = ({ propSchema }) => {
return (
<><Flex>
{propSchema.description && (
<Level>
<Text>{propSchema.description}</Text>
</Level>
)}
</Flex>
<ExpandableSection toggleText="Example">
<CodeBlock>
<CodeBlockCode id="code-content">{propSchema.example}</CodeBlockCode>
</CodeBlock>
</ExpandableSection>
</>
)
}


interface ExtraPropertyViewProps {
propSchema: OpenAPIV3.SchemaObject;
}
export const ExtraPropertyView:React.FunctionComponent<ExtraPropertyViewProps> = ({propSchema}) => {
export const ExtraPropertyView: React.FunctionComponent<
ExtraPropertyViewProps
> = ({ propSchema }) => {
let maxMin: string | undefined;
if (propSchema.maximum && propSchema.minimum) {
maxMin = (propSchema.exclusiveMinimum ? '>': '≥') + ` ${propSchema.minimum} and `
maxMin += (propSchema.exclusiveMaximum ? '<' : '≤') + ` ${propSchema.maximum}`
maxMin =
(propSchema.exclusiveMinimum ? ">" : "≥") + ` ${propSchema.minimum} and `;
maxMin +=
(propSchema.exclusiveMaximum ? "<" : "≤") + ` ${propSchema.maximum}`;
} else if (propSchema.maximum) {
maxMin = (propSchema.exclusiveMaximum ? '<' : '≤') + ` ${propSchema.maximum}`
maxMin =
(propSchema.exclusiveMaximum ? "<" : "≤") + ` ${propSchema.maximum}`;
} else if (propSchema.minimum) {
maxMin = (propSchema.exclusiveMinimum ? '>' : '≥') + ` ${propSchema.minimum}`
maxMin =
(propSchema.exclusiveMinimum ? ">" : "≥") + ` ${propSchema.minimum}`;
}

let maxMinChar: string | undefined;
if (propSchema.maxLength && propSchema.minLength) {
maxMinChar = `${propSchema.minLength} to ${propSchema.maxLength} chars`
maxMinChar = `${propSchema.minLength} to ${propSchema.maxLength} chars`;
} else if (propSchema.maxLength) {
maxMinChar = `max ${propSchema.maxLength} chars`
maxMinChar = `max ${propSchema.maxLength} chars`;
} else if (propSchema.minLength) {
maxMinChar = `min ${propSchema.minLength} chars`
maxMinChar = `min ${propSchema.minLength} chars`;
}

let maxMinItems: string | undefined;
if (propSchema.maxItems && propSchema.minItems) {
maxMinItems = `${propSchema.minItems} to ${propSchema.maxItems} items`
maxMinItems = `${propSchema.minItems} to ${propSchema.maxItems} items`;
} else if (propSchema.maxItems) {
maxMinItems = `max ${propSchema.maxItems} items`
maxMinItems = `max ${propSchema.maxItems} items`;
} else if (propSchema.minItems) {
maxMinItems = `min ${propSchema.minItems} items`
maxMinItems = `min ${propSchema.minItems} items`;
}

let maxMinProps: string | undefined;
if (propSchema.maxProperties && propSchema.minProperties) {
maxMinProps = `${propSchema.minProperties} to ${propSchema.maxProperties} properties`
maxMinProps = `${propSchema.minProperties} to ${propSchema.maxProperties} properties`;
} else if (propSchema.maxProperties) {
maxMinProps = `max ${propSchema.maxProperties} properties`
maxMinProps = `max ${propSchema.maxProperties} properties`;
} else if (propSchema.minItems) {
maxMinProps = `min ${propSchema.minProperties} properties`
maxMinProps = `min ${propSchema.minProperties} properties`;
}

return(
return (
<LabelGroup>
{propSchema.format && <Label isCompact>{propSchema.format}</Label>}
{propSchema.default && <Label isCompact>default: {propSchema.default}</Label>}
{propSchema.enum && <LabelGroup categoryName="Enums">{propSchema.enum.map(e => <Label key={e} isCompact>{e}</Label>)}</LabelGroup>}
{propSchema.pattern && <Label isCompact>pattern: {propSchema.pattern}</Label>}
{propSchema.multipleOf && <Label isCompact>multipleOf: {propSchema.multipleOf}</Label>}
{propSchema.default && (
<Label isCompact>default: {propSchema.default}</Label>
)}
{propSchema.enum && (
<LabelGroup categoryName="Enums">
{propSchema.enum.map((e) => (
<Label key={e} isCompact>
{e}
</Label>
))}
</LabelGroup>
)}
{propSchema.pattern && (
<Label isCompact>pattern: {propSchema.pattern}</Label>
)}
{propSchema.multipleOf && (
<Label isCompact>multipleOf: {propSchema.multipleOf}</Label>
)}
{maxMin && <Label isCompact>{maxMin}</Label>}
{maxMinChar && <Label isCompact>{maxMinChar}</Label>}
{maxMinItems && <Label isCompact>{maxMinItems}</Label>}
Expand All @@ -102,5 +170,5 @@ export const ExtraPropertyView:React.FunctionComponent<ExtraPropertyViewProps> =
{propSchema.writeOnly && <Label isCompact>write only</Label>}
{propSchema.deprecated && <Label isCompact>deprecated</Label>}
</LabelGroup>
)
}
);
};