@gitbook/react-openapi 1.2.1 → 1.3.1

package/dist/utils.d.ts

@@ -47,3 +47,4 @@ export declare function getStatusCodeClassName(statusCode: number | string): str
  * 4xx, 5xx: Error
  */
 export declare function getStatusCodeDefaultLabel(statusCode: number | string, context: OpenAPIUniversalContext): string;
+export declare function getSchemaTitle(schema: OpenAPIV3.SchemaObject): string;

package/dist/utils.js

@@ -184,3 +184,41 @@ function getStatusCodeCategory(statusCode) {
     var category = Math.floor(code / 100);
     return category;
 }
+export function getSchemaTitle(schema) {
+    var _a;
+    // Otherwise try to infer a nice title
+    var type = 'any';
+    if (schema.enum || schema['x-enumDescriptions'] || schema['x-gitbook-enum']) {
+        type = "".concat(schema.type, " \u00B7 enum");
+        // check array AND schema.items as this is sometimes null despite what the type indicates
+    }
+    else if (schema.type === 'array' && !!schema.items) {
+        type = "".concat(getSchemaTitle(schema.items), "[]");
+    }
+    else if (Array.isArray(schema.type)) {
+        type = schema.type.join(' | ');
+    }
+    else if (schema.type || schema.properties) {
+        type = (_a = schema.type) !== null && _a !== void 0 ? _a : 'object';
+        if (schema.format) {
+            type += " \u00B7 ".concat(schema.format);
+        }
+        // Only add the title if it's an object (no need for the title of a string, number, etc.)
+        if (type === 'object' && schema.title) {
+            type += " \u00B7 ".concat(schema.title.replaceAll(' ', ''));
+        }
+    }
+    if ('anyOf' in schema) {
+        type = 'any of';
+    }
+    else if ('oneOf' in schema) {
+        type = 'one of';
+    }
+    else if ('allOf' in schema) {
+        type = 'all of';
+    }
+    else if ('not' in schema) {
+        type = 'not';
+    }
+    return type;
+}

package/package.json

@@ -8,11 +8,11 @@
             "default": "./dist/index.js"
         }
     },
-    "version": "1.2.1",
+    "version": "1.3.1",
     "sideEffects": false,
     "dependencies": {
         "@gitbook/openapi-parser": "workspace:*",
-        "@scalar/api-client-react": "^1.2.19",
+        "@scalar/api-client-react": "^1.3.16",
         "@scalar/oas-utils": "^0.2.130",
         "clsx": "^2.1.1",
         "flatted": "^3.2.9",

package/src/OpenAPICodeSample.tsx

@@ -253,15 +253,11 @@ function getCustomCodeSamples(props: {
         if (customSamples && Array.isArray(customSamples)) {
             customCodeSamples = customSamples
                 .filter((sample) => {
-                    return (
-                        typeof sample.label === 'string' &&
-                        typeof sample.source === 'string' &&
-                        typeof sample.lang === 'string'
-                    );
+                    return typeof sample.source === 'string' && typeof sample.lang === 'string';
                 })
                 .map((sample, index) => ({
                     key: `custom-sample-${sample.lang}-${index}`,
-                    label: sample.label,
+                    label: sample.label || sample.lang,
                     body: context.renderCodeBlock({
                         code: sample.source,
                         syntax: sample.lang,
@@ -312,6 +308,11 @@ function getSecurityHeaders(securities: OpenAPIOperationData['securities']): {
                 [name]: 'YOUR_API_KEY',
             };
         }
+        case 'oauth2': {
+            return {
+                Authorization: 'Bearer YOUR_OAUTH2_TOKEN',
+            };
+        }
         default: {
             return {};
         }

package/src/OpenAPIDisclosure.tsx

@@ -9,11 +9,12 @@ import { Button, Disclosure, DisclosurePanel } from 'react-aria-components';
  */
 export function OpenAPIDisclosure(props: {
     icon: React.ReactNode;
+    header: React.ReactNode;
     children: React.ReactNode;
     label: string | ((isExpanded: boolean) => string);
     className?: string;
 }): React.JSX.Element {
-    const { icon, children, label, className } = props;
+    const { icon, header, label, children, className } = props;
     const [isExpanded, setIsExpanded] = useState(false);
 
     return (
@@ -31,8 +32,11 @@ export function OpenAPIDisclosure(props: {
                         : 'none',
                 })}
             >
-                {icon}
-                <span>{typeof label === 'function' ? label(isExpanded) : label}</span>
+                {header}
+                <div className="openapi-disclosure-trigger-label">
+                    <span>{typeof label === 'function' ? label(isExpanded) : label}</span>
+                    {icon}
+                </div>
             </Button>
             <DisclosurePanel className="openapi-disclosure-panel">
                 {isExpanded ? children : null}

package/src/OpenAPIDisclosureGroup.tsx

@@ -76,7 +76,7 @@ function DisclosureItem(props: {
     });
 
     const panelRef = useRef<HTMLDivElement | null>(null);
-    const triggerRef = useRef<HTMLButtonElement | null>(null);
+    const triggerRef = useRef<HTMLDivElement | null>(null);
     const isDisabled = groupState?.isDisabled || !group.tabs?.length || false;
     const { buttonProps: triggerProps, panelProps } = useDisclosure(
         {
@@ -96,55 +96,56 @@ function DisclosureItem(props: {
 
     return (
         <div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
-            <div className="openapi-disclosure-group-header">
-                <button
-                    slot="trigger"
-                    ref={triggerRef}
-                    {...mergeProps(buttonProps, focusProps)}
-                    disabled={isDisabled}
-                    style={{
-                        outline: isFocusVisible
-                            ? '2px solid rgb(var(--primary-color-500)/0.4)'
-                            : 'none',
-                    }}
-                    className="openapi-disclosure-group-trigger"
-                >
-                    <div className="openapi-disclosure-group-icon">
-                        {icon || (
-                            <svg viewBox="0 0 24 24" className="openapi-disclosure-group-icon">
-                                <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-                            </svg>
-                        )}
-                    </div>
+            <div
+                slot="trigger"
+                ref={triggerRef}
+                {...mergeProps(buttonProps, focusProps)}
+                aria-disabled={isDisabled}
+                style={{
+                    outline: isFocusVisible
+                        ? '2px solid rgb(var(--primary-color-500)/0.4)'
+                        : 'none',
+                }}
+                className="openapi-disclosure-group-trigger"
+            >
+                <div className="openapi-disclosure-group-icon">
+                    {icon || (
+                        <svg viewBox="0 0 24 24" className="openapi-disclosure-group-icon">
+                            <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                        </svg>
+                    )}
+                </div>
 
+                <div className="openapi-disclosure-group-label">
                     {group.label}
-                </button>
-                {group.tabs ? (
-                    <div
-                        className="openapi-disclosure-group-mediatype"
-                        onClick={(e) => e.stopPropagation()}
-                    >
-                        {group.tabs?.length > 1 ? (
-                            <OpenAPISelect
-                                icon={selectIcon}
-                                stateKey={selectStateKey}
-                                onSelectionChange={() => {
-                                    state.expand();
-                                }}
-                                items={group.tabs}
-                                placement="bottom end"
-                            >
-                                {group.tabs.map((tab) => (
-                                    <OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
-                                        {tab.label}
-                                    </OpenAPISelectItem>
-                                ))}
-                            </OpenAPISelect>
-                        ) : group.tabs[0]?.label ? (
-                            <span>{group.tabs[0].label}</span>
-                        ) : null}
-                    </div>
-                ) : null}
+
+                    {group.tabs ? (
+                        <div
+                            className="openapi-disclosure-group-mediatype"
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            {group.tabs?.length > 1 ? (
+                                <OpenAPISelect
+                                    icon={selectIcon}
+                                    stateKey={selectStateKey}
+                                    onSelectionChange={() => {
+                                        state.expand();
+                                    }}
+                                    items={group.tabs}
+                                    placement="bottom end"
+                                >
+                                    {group.tabs.map((tab) => (
+                                        <OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
+                                            {tab.label}
+                                        </OpenAPISelectItem>
+                                    ))}
+                                </OpenAPISelect>
+                            ) : group.tabs[0]?.label ? (
+                                <span>{group.tabs[0].label}</span>
+                            ) : null}
+                        </div>
+                    ) : null}
+                </div>
             </div>
 
             {state.isExpanded && selectedTab && (

package/src/OpenAPIRequestBody.tsx

@@ -1,5 +1,6 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import { InteractiveSection } from './InteractiveSection';
+import { OpenAPIRequestBodyHeaderType } from './OpenAPIRequestBodyHeaderType';
 import { OpenAPIRootSchema } from './OpenAPISchemaServer';
 import type { OpenAPIClientContext } from './context';
 import { t } from './translate';
@@ -20,11 +21,18 @@ export function OpenAPIRequestBody(props: {
         return null;
     }
 
+    const stateKey = createStateKey('request-body-media-type', context.blockKey);
+
     return (
         <InteractiveSection
-            header={t(context.translation, 'name' in data ? 'payload' : 'body')}
+            header={
+                <>
+                    <span>{t(context.translation, 'name' in data ? 'payload' : 'body')}</span>
+                    <OpenAPIRequestBodyHeaderType requestBody={requestBody} stateKey={stateKey} />
+                </>
+            }
             className="openapi-requestbody"
-            stateKey={createStateKey('request-body-media-type', context.blockKey)}
+            stateKey={stateKey}
             selectIcon={context.icons.chevronDown}
             tabs={Object.entries(requestBody.content ?? {}).map(
                 ([contentType, mediaTypeObject]) => {
@@ -35,6 +43,7 @@ export function OpenAPIRequestBody(props: {
                             <OpenAPIRootSchema
                                 schema={mediaTypeObject.schema ?? {}}
                                 context={context}
+                                key={contentType}
                             />
                         ),
                     };

package/src/OpenAPIRequestBodyHeaderType.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+import { useSelectState } from './OpenAPISelect';
+import { getSchemaTitle } from './utils';
+
+/**
+ * Display the type of a request body. It only displays the type if the selected content is an array.
+ */
+export function OpenAPIRequestBodyHeaderType(props: {
+    requestBody: OpenAPIV3.RequestBodyObject;
+    stateKey: string;
+}) {
+    const { requestBody, stateKey } = props;
+    const content = requestBody.content ?? {};
+    const state = useSelectState(stateKey, Object.keys(content)[0]);
+
+    const selectedContentMediaType = Object.entries(content).find(
+        ([contentType]) => contentType === state.key
+    )?.[1];
+
+    // If the selected content is not an array, we don't display the type
+    if (
+        !selectedContentMediaType ||
+        !selectedContentMediaType.schema?.type ||
+        selectedContentMediaType.schema.type !== 'array'
+    ) {
+        return null;
+    }
+
+    return (
+        <span className="openapi-requestbody-header-type">
+            {`${getSchemaTitle(selectedContentMediaType.schema)}`}
+        </span>
+    );
+}

package/src/OpenAPIResponse.tsx

@@ -1,7 +1,9 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
+import { OpenAPISchemaPresentation } from './OpenAPISchema';
 import { OpenAPISchemaProperties } from './OpenAPISchemaServer';
 import type { OpenAPIClientContext } from './context';
+import { tString } from './translate';
 import { parameterToProperty, resolveDescription } from './utils';
 
 /**
@@ -9,14 +11,14 @@ import { parameterToProperty, resolveDescription } from './utils';
  */
 export function OpenAPIResponse(props: {
     response: OpenAPIV3.ResponseObject;
-    mediaType: OpenAPIV3.MediaTypeObject;
+    mediaType: OpenAPIV3.MediaTypeObject | null;
     context: OpenAPIClientContext;
 }) {
     const { response, context, mediaType } = props;
     const headers = Object.entries(response.headers ?? {}).map(
         ([name, header]) => [name, header ?? {}] as const
     );
-    const content = Object.entries(mediaType.schema ?? {});
+    const content = Object.entries(mediaType?.schema ?? {});
 
     const description = resolveDescription(response);
 
@@ -27,7 +29,31 @@ export function OpenAPIResponse(props: {
     return (
         <div className="openapi-response-body">
             {headers.length > 0 ? (
-                <OpenAPIDisclosure icon={context.icons.plus} label="Headers">
+                <OpenAPIDisclosure
+                    header={
+                        <OpenAPISchemaPresentation
+                            context={context}
+                            property={{
+                                propertyName: tString(context.translation, 'headers'),
+                                schema: {
+                                    type: 'object',
+                                },
+                                required: null,
+                            }}
+                        />
+                    }
+                    icon={context.icons.plus}
+                    label={(isExpanded) =>
+                        tString(
+                            context.translation,
+                            isExpanded ? 'hide' : 'show',
+                            tString(
+                                context.translation,
+                                headers.length === 1 ? 'header' : 'headers'
+                            )
+                        )
+                    }
+                >
                     <OpenAPISchemaProperties
                         properties={headers.map(([name, header]) =>
                             parameterToProperty({ name, ...header })
@@ -36,11 +62,17 @@ export function OpenAPIResponse(props: {
                     />
                 </OpenAPIDisclosure>
             ) : null}
-            {mediaType.schema && (
+            {mediaType?.schema && (
                 <div className="openapi-responsebody">
                     <OpenAPISchemaProperties
                         id={`response-${context.blockKey}`}
-                        properties={[{ schema: mediaType.schema }]}
+                        properties={[
+                            {
+                                schema: mediaType.schema,
+                                propertyName: tString(context.translation, 'response'),
+                                required: null,
+                            },
+                        ]}
                         context={context}
                     />
                 </div>

package/src/OpenAPIResponseExample.tsx

@@ -6,8 +6,8 @@ import { OpenAPIResponseExampleContent } from './OpenAPIResponseExampleContent';
 import { type OpenAPIContext, getOpenAPIClientContext } from './context';
 import type { OpenAPIOperationData, OpenAPIWebhookData } from './types';
 import { getExampleFromReference, getExamples } from './util/example';
-import { createStateKey, getStatusCodeDefaultLabel } from './utils';
-import { checkIsReference, resolveDescription } from './utils';
+import { createStateKey, getStatusCodeDefaultLabel, resolveDescription } from './utils';
+import { checkIsReference } from './utils';
 
 /**
  * Display an example of the response content.
@@ -41,45 +41,47 @@ export function OpenAPIResponseExample(props: {
         return Number(a) - Number(b);
     });
 
-    const tabs = responses.map(([key, responseObject]) => {
-        const description = resolveDescription(responseObject);
-        const label = description ? (
-            <Markdown source={description} />
-        ) : (
-            getStatusCodeDefaultLabel(key, context)
-        );
+    const tabs = responses
+        .filter(([_, responseObject]) => responseObject && typeof responseObject === 'object')
+        .map(([key, responseObject]) => {
+            const description = resolveDescription(responseObject);
+            const label = description ? (
+                <Markdown source={description} />
+            ) : (
+                getStatusCodeDefaultLabel(key, context)
+            );
 
-        if (checkIsReference(responseObject)) {
-            return {
-                key: key,
-                label,
-                statusCode: key,
-                body: (
-                    <OpenAPIExample
-                        example={getExampleFromReference(responseObject, context)}
-                        context={context}
-                        syntax="json"
-                    />
-                ),
-            };
-        }
+            if (checkIsReference(responseObject)) {
+                return {
+                    key: key,
+                    label,
+                    statusCode: key,
+                    body: (
+                        <OpenAPIExample
+                            example={getExampleFromReference(responseObject, context)}
+                            context={context}
+                            syntax="json"
+                        />
+                    ),
+                };
+            }
+
+            if (!responseObject.content || Object.keys(responseObject.content).length === 0) {
+                return {
+                    key: key,
+                    label,
+                    statusCode: key,
+                    body: <OpenAPIEmptyExample context={context} />,
+                };
+            }
 
-        if (!responseObject.content || Object.keys(responseObject.content).length === 0) {
             return {
                 key: key,
                 label,
                 statusCode: key,
-                body: <OpenAPIEmptyExample context={context} />,
+                body: <OpenAPIResponse context={context} content={responseObject.content} />,
             };
-        }
-
-        return {
-            key: key,
-            label,
-            statusCode: key,
-            body: <OpenAPIResponse context={context} content={responseObject.content} />,
-        };
-    });
+        });
 
     if (tabs.length === 0) {
         return null;
@@ -97,7 +99,7 @@ export function OpenAPIResponseExample(props: {
 function OpenAPIResponse(props: {
     context: OpenAPIContext;
     content: {
-        [media: string]: OpenAPIV3.MediaTypeObject;
+        [media: string]: OpenAPIV3.MediaTypeObject | null;
     };
 }) {
     const { context, content } = props;
@@ -111,6 +113,15 @@ function OpenAPIResponse(props: {
 
     const tabs = entries.map((entry) => {
         const [mediaType, mediaTypeObject] = entry;
+
+        if (!mediaTypeObject) {
+            return {
+                key: mediaType,
+                label: mediaType,
+                body: <OpenAPIEmptyExample context={context} />,
+            };
+        }
+
         return {
             key: mediaType,
             label: mediaType,

package/src/OpenAPIResponses.tsx

@@ -20,8 +20,9 @@ export function OpenAPIResponses(props: {
 }) {
     const { responses, context } = props;
 
-    const groups = Object.entries(responses).map(
-        ([statusCode, response]: [string, OpenAPIV3.ResponseObject]) => {
+    const groups = Object.entries(responses)
+        .filter(([_, response]) => response && typeof response === 'object')
+        .map(([statusCode, response]: [string, OpenAPIV3.ResponseObject]) => {
             const tabs = (() => {
                 // If there is no content, but there are headers, we need to show the headers
                 if (
@@ -83,8 +84,7 @@ export function OpenAPIResponses(props: {
                 ),
                 tabs,
             };
-        }
-    );
+        });
 
     const state = useResponseExamplesState(context.blockKey, groups[0]?.key);