@gitbook/react-openapi 0.6.0 → 0.7.1

package/src/OpenAPICodeSample.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { CodeSampleInput, codeSampleGenerators } from './code-samples';
 import { OpenAPIOperationData } from './fetchOpenAPIOperation';
-import { generateMediaTypeExample } from './generateSchemaExample';
+import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
 import { InteractiveSection } from './InteractiveSection';
 import { getServersURL } from './OpenAPIServerURL';
 import { ScalarApiButton } from './ScalarApiButton';
@@ -19,17 +19,51 @@ export function OpenAPICodeSample(props: {
 }) {
     const { data, context } = props;
 
+    const searchParams = new URLSearchParams();
+    const headersObject: { [k: string]: string } = {};
+
+    data.operation.parameters?.forEach((rawParam) => {
+        const param = noReference(rawParam);
+        if (!param) {
+            return;
+        }
+
+        if (param.in === 'header' && param.required) {
+            const example = param.schema
+                ? generateSchemaExample(noReference(param.schema))
+                : undefined;
+            if (example !== undefined) {
+                headersObject[param.name] =
+                    typeof example !== 'string' ? JSON.stringify(example) : example;
+            }
+        } else if (param.in === 'query' && param.required) {
+            const example = param.schema
+                ? generateSchemaExample(noReference(param.schema))
+                : undefined;
+            if (example !== undefined) {
+                searchParams.append(
+                    param.name,
+                    String(Array.isArray(example) ? example[0] : example),
+                );
+            }
+        }
+    });
+
     const requestBody = noReference(data.operation.requestBody);
     const requestBodyContent = requestBody ? Object.entries(requestBody.content)[0] : undefined;
 
     const input: CodeSampleInput = {
-        url: getServersURL(data.servers) + data.path,
+        url:
+            getServersURL(data.servers) +
+            data.path +
+            (searchParams.size ? `?${searchParams.toString()}` : ''),
         method: data.method,
         body: requestBodyContent
             ? generateMediaTypeExample(requestBodyContent[1], { onlyRequired: true })
             : undefined,
         headers: {
             ...getSecurityHeaders(data.securities),
+            ...headersObject,
             ...(requestBodyContent
                 ? {
                       'Content-Type': requestBodyContent[0],
@@ -53,11 +87,19 @@ export function OpenAPICodeSample(props: {
     (['x-custom-examples', 'x-code-samples', 'x-codeSamples'] as const).forEach((key) => {
         const customSamples = data.operation[key];
         if (customSamples && Array.isArray(customSamples)) {
-            customCodeSamples = customSamples.map((sample) => ({
-                key: `redocly-${sample.lang}`,
-                label: sample.label,
-                body: <context.CodeBlock code={sample.source} syntax={sample.lang} />,
-            }));
+            customCodeSamples = customSamples
+                .filter((sample) => {
+                    return (
+                        typeof sample.label === 'string' &&
+                        typeof sample.source === 'string' &&
+                        typeof sample.lang === 'string'
+                    );
+                })
+                .map((sample) => ({
+                    key: `redocly-${sample.lang}`,
+                    label: sample.label,
+                    body: <context.CodeBlock code={sample.source} syntax={sample.lang} />,
+                }));
         }
     });
 
@@ -77,7 +119,7 @@ export function OpenAPICodeSample(props: {
             tabs={samples}
             overlay={
                 data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'] ? null : (
-                    <ScalarApiButton />
+                    <ScalarApiButton method={data.method} path={data.path} />
                 )
             }
         />

package/src/OpenAPIOperation.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { ApiClientModalProvider } from '@scalar/api-client-react';
 
 import { OpenAPIOperationData, toJSON } from './fetchOpenAPIOperation';
 import { Markdown } from './Markdown';
@@ -8,7 +9,6 @@ import { OpenAPIResponseExample } from './OpenAPIResponseExample';
 import { OpenAPIServerURL } from './OpenAPIServerURL';
 import { OpenAPISpec } from './OpenAPISpec';
 import { OpenAPIClientContext, OpenAPIContextProps } from './types';
-import { ApiClientModalProvider } from '@scalar/api-client-react';
 
 /**
  * Display an interactive OpenAPI operation.
@@ -23,8 +23,8 @@ export function OpenAPIOperation(props: {
 
     const clientContext: OpenAPIClientContext = {
         defaultInteractiveOpened: context.defaultInteractiveOpened,
-        specUrl: context.specUrl,
         icons: context.icons,
+        blockKey: context.blockKey,
     };
 
     return (
@@ -34,7 +34,9 @@ export function OpenAPIOperation(props: {
         >
             <div className={classNames('openapi-operation', className)}>
                 <div className="openapi-intro">
-                    <h2 className="openapi-summary">{operation.summary}</h2>
+                    <h2 className="openapi-summary" id={context.id}>
+                        {operation.summary}
+                    </h2>
                     {operation.description ? (
                         <Markdown className="openapi-description" source={operation.description} />
                     ) : null}

package/src/OpenAPIResponseExample.tsx

@@ -3,7 +3,7 @@ import { InteractiveSection } from './InteractiveSection';
 import { OpenAPIOperationData } from './fetchOpenAPIOperation';
 import { generateSchemaExample } from './generateSchemaExample';
 import { OpenAPIContextProps } from './types';
-import { noReference } from './utils';
+import { createStateKey, noReference } from './utils';
 
 /**
  * Display an example of the response content.
@@ -36,37 +36,52 @@ export function OpenAPIResponseExample(props: {
         }
         return Number(a) - Number(b);
     });
-    // Take the first one
-    const response = responses[0];
 
-    if (!response) {
-        return null;
-    }
+    const examples = responses
+        .map((response) => {
+            const responseObject = noReference(response[1]);
 
-    const responseObject = noReference(response[1]);
+            const schema = noReference(
+                (
+                    responseObject.content?.['application/json'] ??
+                    responseObject.content?.[Object.keys(responseObject.content)[0]]
+                )?.schema,
+            );
 
-    const schema = noReference(
-        (
-            responseObject.content?.['application/json'] ??
-            responseObject.content?.[Object.keys(responseObject.content)[0]]
-        )?.schema,
-    );
+            if (!schema) {
+                return null;
+            }
 
-    if (!schema) {
-        return null;
-    }
+            const example = generateSchemaExample(schema);
+            if (example === undefined) {
+                return null;
+            }
+
+            return {
+                key: `${response[0]}`,
+                label: `${response[0]}`,
+                body: (
+                    <context.CodeBlock
+                        code={
+                            typeof example === 'string' ? example : JSON.stringify(example, null, 2)
+                        }
+                        syntax="json"
+                    />
+                ),
+            };
+        })
+        .filter((val): val is { key: string; label: string; body: any } => Boolean(val));
 
-    const example = generateSchemaExample(schema);
-    if (example === undefined) {
+    if (examples.length === 0) {
         return null;
     }
 
     return (
-        <InteractiveSection header="Response" className="openapi-response-example">
-            <context.CodeBlock
-                code={typeof example === 'string' ? example : JSON.stringify(example, null, 2)}
-                syntax="json"
-            />
-        </InteractiveSection>
+        <InteractiveSection
+            stateKey={createStateKey('response', context.blockKey)}
+            header="Response"
+            className="openapi-response-example"
+            tabs={examples}
+        />
     );
 }

package/src/OpenAPIResponses.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { OpenAPIV3 } from 'openapi-types';
-import { noReference } from './utils';
+import { createStateKey, noReference } from './utils';
 import { OpenAPIResponse } from './OpenAPIResponse';
 import { OpenAPIClientContext } from './types';
 import { InteractiveSection } from './InteractiveSection';
@@ -17,6 +17,7 @@ export function OpenAPIResponses(props: {
 
     return (
         <InteractiveSection
+            stateKey={createStateKey('response', context.blockKey)}
             header="Response"
             className={classNames('openapi-responses')}
             tabs={Object.entries(responses).map(([statusCode, response]) => {

package/src/OpenAPISchema.tsx

@@ -104,6 +104,11 @@ export function OpenAPISchemaProperty(
                             Example: <code>{JSON.stringify(schema.example)}</code>
                         </span>
                     ) : null}
+                    {schema.pattern ? (
+                        <div className="openapi-schema-pattern">
+                            Pattern: <code>{schema.pattern}</code>
+                        </div>
+                    ) : null}
                 </div>
             }
         >

package/src/ScalarApiButton.tsx

@@ -6,12 +6,15 @@ import React from 'react';
 /**
  * Button which launches the Scalar API Client
  */
-export function ScalarApiButton() {
+export function ScalarApiButton({ method, path }: { method: string; path: string }) {
     const client = useApiClientModal();
 
     return (
         <div className="scalar scalar-activate">
-            <button className="scalar-activate-button" onClick={() => client?.open()}>
+            <button
+                className="scalar-activate-button"
+                onClick={() => client?.open({ method, path })}
+            >
                 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" fill="none">
                     <path
                         stroke="currentColor"

package/src/code-samples.ts

@@ -65,6 +65,25 @@ export const codeSampleGenerators: CodeSampleGenerator[] = [
             return lines.map((line, index) => (index > 0 ? indent(line, 2) : line)).join(separator);
         },
     },
+    {
+        id: 'python',
+        label: 'Python',
+        syntax: 'python',
+        generate: ({ method, url, headers, body }) => {
+            let code = 'import requests\n\n';
+            code += `response = requests.${method.toLowerCase()}(\n`;
+            code += indent(`"${url}",\n`, 4);
+            if (headers) {
+                code += indent(`headers=${JSON.stringify(headers)},\n`, 4);
+            }
+            if (body) {
+                code += indent(`json=${JSON.stringify(body)}\n`, 4);
+            }
+            code += ')\n';
+            code += `data = response.json()`;
+            return code;
+        },
+    },
 ];
 
 function indent(code: string, spaces: number) {

package/src/generateSchemaExample.ts

@@ -79,7 +79,7 @@ export function generateSchemaExample(
         return 'text';
     }
 
-    if (schema.type === 'number') {
+    if (schema.type === 'number' || schema.type === 'integer') {
         return schema.default || 0;
     }
 
@@ -104,7 +104,7 @@ export function generateSchemaExample(
 
     if (schema.properties) {
         const example: { [key: string]: JSONValue } = {};
-        const props = onlyRequired ? schema.required ?? [] : Object.keys(schema.properties);
+        const props = onlyRequired ? (schema.required ?? []) : Object.keys(schema.properties);
 
         for (const key of props) {
             const property = noReference(schema.properties[key]);

package/src/types.ts

@@ -2,6 +2,9 @@ export type IconComponent = React.ComponentType<{ className?: string }>;
 
 export interface OpenAPIContextProps extends OpenAPIClientContext {
     CodeBlock: React.ComponentType<{ code: string; syntax: string }>;
+
+    /** Spec url for the Scalar Api Client */
+    specUrl: string;
 }
 
 export interface OpenAPIClientContext {
@@ -10,14 +13,17 @@ export interface OpenAPIClientContext {
         chevronRight: React.ReactNode;
     };
 
-    /** Spec url foor the Scalar Api Client */
-    specUrl: string;
-
     /**
      * Force all sections to be opened by default.
      * @default false
      */
     defaultInteractiveOpened?: boolean;
+    /**
+     * The key of the block
+     */
+    blockKey?: string;
+    /** Optional id attached to the OpenAPI Operation heading and used as an anchor */
+    id?: string;
 }
 
 export interface OpenAPIFetcher {

package/src/utils.ts

@@ -7,3 +7,7 @@ export function noReference<T>(input: T | OpenAPIV3.ReferenceObject): T {
 
     return input;
 }
+
+export function createStateKey(key: string, scope?: string) {
+    return scope ? `${scope}_${key}` : key;
+}