diff --git a/.changeset/ninety-sloths-think.md b/.changeset/ninety-sloths-think.md new file mode 100644 index 0000000000..3ea4284266 --- /dev/null +++ b/.changeset/ninety-sloths-think.md @@ -0,0 +1,6 @@ +--- +'@gitbook/react-openapi': patch +'gitbook': patch +--- + +Improve OpenAPI schema style diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index 4f76998b14..e942e98c55 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -155,6 +155,10 @@ /* unstyled */ } +.openapi-schema-root-description.openapi-markdown { + @apply prose-sm text-balance mt-1.5 !text-[0.813rem] text-tint overflow-hidden !font-normal select-text prose-strong:font-semibold prose-strong:text-inherit; +} + .openapi-schema-properties { @apply flex flex-col; } @@ -203,7 +207,7 @@ .openapi-schema-name { /* To make double click on the property name select only the name, we disable selection on the parent and re-enable it on the children. */ - @apply select-none flex gap-x-2.5 items-baseline text-sm flex-wrap; + @apply select-none text-sm text-balance *:whitespace-nowrap flex flex-wrap gap-y-1.5 gap-x-2.5; } .openapi-schema-name .openapi-deprecated { @@ -282,7 +286,7 @@ /* Schema Description */ .openapi-schema-description.openapi-markdown { - @apply prose-sm text-tint overflow-hidden !font-normal select-text prose-strong:font-semibold prose-strong:text-inherit; + @apply prose-sm text-tint overflow-hidden text-pretty !font-normal select-text prose-strong:font-semibold prose-strong:text-inherit; } .openapi-schema-description.openapi-markdown pre:has(code) { @@ -302,13 +306,15 @@ /* Schema Examples */ .openapi-schema-example, -.openapi-schema-pattern { +.openapi-schema-pattern, +.openapi-schema-default { @apply prose-sm text-tint; } .openapi-schema-example code, .openapi-schema-pattern code, -.openapi-schema-enum-value code { +.openapi-schema-enum-value code, +.openapi-schema-default code { @apply py-px px-1 min-w-[1.625rem] text-tint-strong font-normal w-fit justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded text-xs leading-[calc(max(1.20em,1.25rem))] before:!content-none after:!content-none; } @@ -322,7 +328,7 @@ } .openapi-securities-description.openapi-markdown { - @apply prose-sm text-tint !font-normal select-text prose-strong:font-semibold prose-strong:text-inherit; + @apply prose-sm text-tint !font-normal select-text text-pretty prose-strong:font-semibold prose-strong:text-inherit; } .openapi-securities-label { @@ -348,7 +354,7 @@ } .openapi-requestbody-description.openapi-markdown { - @apply prose-sm text-tint !font-normal select-text prose-strong:font-semibold prose-strong:text-inherit; + @apply prose-sm text-tint !font-normal text-pretty select-text prose-strong:font-semibold prose-strong:text-inherit; } /* Responses */ @@ -365,7 +371,7 @@ } .openapi-response-description.openapi-markdown { - @apply text-left prose-sm text-[0.813rem] h-auto relative leading-[1.125rem] text-tint !font-normal truncate select-text prose-strong:font-semibold prose-strong:text-inherit; + @apply text-left prose-sm text-[0.813rem] text-pretty h-auto relative leading-[1.125rem] text-tint !font-normal truncate select-text prose-strong:font-semibold prose-strong:text-inherit; } .openapi-response-description.openapi-markdown::-webkit-scrollbar { diff --git a/packages/react-openapi/src/OpenAPISchema.tsx b/packages/react-openapi/src/OpenAPISchema.tsx index 435a2508bb..89fe401998 100644 --- a/packages/react-openapi/src/OpenAPISchema.tsx +++ b/packages/react-openapi/src/OpenAPISchema.tsx @@ -11,6 +11,7 @@ import { OpenAPICopyButton } from './OpenAPICopyButton'; import { OpenAPIDisclosure } from './OpenAPIDisclosure'; import { OpenAPISchemaName } from './OpenAPISchemaName'; import { retrocycle } from './decycle'; +import { stringifyOpenAPI } from './stringifyOpenAPI'; import type { OpenAPIClientContext } from './types'; import { checkIsReference, resolveDescription, resolveFirstExample } from './utils'; @@ -145,17 +146,23 @@ function OpenAPIRootSchema(props: { const id = useId(); const properties = getSchemaProperties(schema); + const description = resolveDescription(schema); if (properties?.length) { const circularRefs = new Map(parentCircularRefs); circularRefs.set(schema, id); return ( - + <> + {description ? ( + + ) : null} + + ); } @@ -322,15 +329,25 @@ function OpenAPISchemaPresentation(props: { property: OpenAPISchemaPropertyEntry {description ? ( ) : null} + {schema.default !== undefined ? ( + + Default:{' '} + + {typeof schema.default === 'string' && schema.default + ? schema.default + : stringifyOpenAPI(schema.default)} + + + ) : null} {typeof example === 'string' ? ( -
+ Example: {example} -
+ ) : null} {schema.pattern ? ( -
+ Pattern: {schema.pattern} -
+ ) : null} diff --git a/packages/react-openapi/src/OpenAPISchemaName.tsx b/packages/react-openapi/src/OpenAPISchemaName.tsx index 1c66cd3522..62934cb843 100644 --- a/packages/react-openapi/src/OpenAPISchemaName.tsx +++ b/packages/react-openapi/src/OpenAPISchemaName.tsx @@ -1,6 +1,5 @@ import type { OpenAPIV3 } from '@gitbook/openapi-parser'; import type React from 'react'; -import { stringifyOpenAPI } from './stringifyOpenAPI'; interface OpenAPISchemaNameProps { schema?: OpenAPIV3.SchemaObject; @@ -19,7 +18,7 @@ export function OpenAPISchemaName(props: OpenAPISchemaNameProps) { const additionalItems = schema && getAdditionalItems(schema); return ( -
+ {propertyName ? ( {propertyName} @@ -41,7 +40,7 @@ export function OpenAPISchemaName(props: OpenAPISchemaNameProps) { optional )} {schema?.deprecated ? Deprecated : null} -
+ ); } @@ -56,11 +55,6 @@ function getAdditionalItems(schema: OpenAPIV3.SchemaObject): string { additionalItems += ` · max: ${schema.maximum || schema.maxLength || schema.maxItems}`; } - // If the schema has a default value, we display it - if (typeof schema.default !== 'undefined') { - additionalItems += ` · default: ${stringifyOpenAPI(schema.default)}`; - } - if (schema.nullable) { additionalItems = ' | nullable'; }