@gitbook/react-openapi 1.4.3 → 1.5.2

package/src/OpenAPIOperation.tsx

@@ -1,35 +0,0 @@
-import clsx from 'clsx';
-import { OpenAPICodeSample } from './OpenAPICodeSample';
-import { OpenAPIResponseExample } from './OpenAPIResponseExample';
-import { OpenAPIColumnSpec } from './common/OpenAPIColumnSpec';
-import { OpenAPISummary } from './common/OpenAPISummary';
-import { type OpenAPIContextInput, resolveOpenAPIContext } from './context';
-import type { OpenAPIOperationData } from './types';
-
-/**
- * Display an interactive OpenAPI operation.
- */
-export function OpenAPIOperation(props: {
-    className?: string;
-    data: OpenAPIOperationData;
-    context: OpenAPIContextInput;
-}) {
-    const { className, data, context: contextInput } = props;
-
-    const context = resolveOpenAPIContext(contextInput);
-
-    return (
-        <div className={clsx('openapi-operation', className)}>
-            <OpenAPISummary data={data} context={context} />
-            <div className="openapi-columns">
-                <OpenAPIColumnSpec data={data} context={context} />
-                <div className="openapi-column-preview">
-                    <div className="openapi-column-preview-body">
-                        <OpenAPICodeSample data={data} context={context} />
-                        <OpenAPIResponseExample data={data} context={context} />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/OpenAPIOperationContext.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { createContext, useContext, useMemo } from 'react';
-import { useEventCallback } from 'usehooks-ts';
-
-interface OpenAPIOperationPointer {
-    path: string;
-    method: string;
-}
-
-interface OpenAPIOperationContextValue {
-    onOpenClient: (pointer: OpenAPIOperationPointer) => void;
-}
-
-const OpenAPIOperationContext = createContext<OpenAPIOperationContextValue>({
-    onOpenClient: () => {},
-});
-
-/**
- * Provider for the OpenAPIOperationContext.
- */
-export function OpenAPIOperationContextProvider(
-    props: React.PropsWithChildren<Partial<OpenAPIOperationContextValue>>
-) {
-    const { children } = props;
-
-    const onOpenClient = useEventCallback((pointer: OpenAPIOperationPointer) => {
-        props.onOpenClient?.(pointer);
-    });
-
-    const value = useMemo(() => ({ onOpenClient }), [onOpenClient]);
-
-    return (
-        <OpenAPIOperationContext.Provider value={value}>
-            {children}
-        </OpenAPIOperationContext.Provider>
-    );
-}
-
-/**
- * Hook to access the OpenAPIOperationContext.
- */
-export function useOpenAPIOperationContext() {
-    return useContext(OpenAPIOperationContext);
-}

package/src/OpenAPIOperationDescription.tsx

@@ -1,34 +0,0 @@
-import type { OpenAPICustomOperationProperties, OpenAPIV3 } from '@gitbook/openapi-parser';
-import { Markdown } from './Markdown';
-import type { OpenAPIContext } from './context';
-import { resolveDescription } from './utils';
-
-/**
- * Display the description of an OpenAPI operation.
- */
-export function OpenAPIOperationDescription(props: {
-    operation: OpenAPIV3.OperationObject<OpenAPICustomOperationProperties>;
-    context: OpenAPIContext;
-}) {
-    const { operation } = props;
-    if (operation['x-gitbook-description-document']) {
-        return (
-            <div className="openapi-intro">
-                {props.context.renderDocument({
-                    document: operation['x-gitbook-description-document'],
-                })}
-            </div>
-        );
-    }
-
-    const description = resolveDescription(operation);
-    if (!description) {
-        return null;
-    }
-
-    return (
-        <div className="openapi-intro">
-            <Markdown className="openapi-description" source={description} />
-        </div>
-    );
-}

package/src/OpenAPIOperationStability.tsx

@@ -1,39 +0,0 @@
-import type { OpenAPIStability } from '@gitbook/openapi-parser';
-import type { OpenAPIContext } from './context';
-import { t } from './translate';
-
-/**
- * Display the stability of an OpenAPI operation.
- */
-export function OpenAPIOperationStability(props: {
-    stability: OpenAPIStability;
-    context: OpenAPIContext;
-}) {
-    const { stability, context } = props;
-
-    const stabilityLabel = getStabilityLabel(stability, context);
-
-    if (!stabilityLabel) {
-        return null;
-    }
-
-    return (
-        <div className={`openapi-stability openapi-stability-${stability}`}>{stabilityLabel}</div>
-    );
-}
-
-/**
- * Get the stability label for the given stability level.
- */
-function getStabilityLabel(stability: OpenAPIStability, context: OpenAPIContext) {
-    switch (stability) {
-        case 'experimental':
-            return t(context.translation, 'stability_experimental');
-        case 'alpha':
-            return t(context.translation, 'stability_alpha');
-        case 'beta':
-            return t(context.translation, 'stability_beta');
-        default:
-            return null;
-    }
-}

package/src/OpenAPIPath.tsx

@@ -1,90 +0,0 @@
-import { OpenAPICopyButton } from './OpenAPICopyButton';
-import { type OpenAPIUniversalContext, getOpenAPIClientContext } from './context';
-import type { OpenAPIOperationData } from './types';
-import { getDefaultServerURL } from './util/server';
-
-/**
- * Display the path of an operation.
- */
-export function OpenAPIPath(props: {
-    data: OpenAPIOperationData;
-    context: OpenAPIUniversalContext;
-    /** Whether to show the server URL.
-     * @default true
-     */
-    withServer?: boolean;
-    /**
-     * Whether the path is copyable.
-     * @default true
-     */
-    canCopy?: boolean;
-}) {
-    const { data, context, withServer = true, canCopy = true } = props;
-    const { method, path, operation } = data;
-
-    const server = getDefaultServerURL(data.servers);
-    const formattedPath = formatPath(path);
-
-    const element = (() => {
-        return (
-            <>
-                {withServer ? <span className="openapi-path-server">{server}</span> : null}
-                {formattedPath}
-            </>
-        );
-    })();
-
-    return (
-        <div className="openapi-path">
-            <div className={`openapi-method openapi-method-${method}`}>{method}</div>
-
-            <OpenAPICopyButton
-                value={`${withServer ? server : ''}${path}`}
-                className="openapi-path-title"
-                data-deprecated={operation.deprecated}
-                isDisabled={!canCopy}
-                context={getOpenAPIClientContext(context)}
-            >
-                {element}
-            </OpenAPICopyButton>
-        </div>
-    );
-}
-
-/**
- * Format the path by wrapping placeholders in <span> tags.
- */
-function formatPath(path: string) {
-    // Matches placeholders like {id}, {userId}, etc.
-    const regex = /\{\s*(\w+)\s*\}|:\w+/g;
-
-    const parts: (string | React.JSX.Element)[] = [];
-    let lastIndex = 0;
-
-    //Wrap the variables in <span> tags and maintain either {variable} or :variable
-    path.replace(regex, (match, _, offset) => {
-        if (offset > lastIndex) {
-            parts.push(path.slice(lastIndex, offset));
-        }
-        parts.push(
-            <span key={`offset-${offset}`} className="openapi-path-variable">
-                {match}
-            </span>
-        );
-        lastIndex = offset + match.length;
-        return match;
-    });
-
-    if (lastIndex < path.length) {
-        parts.push(path.slice(lastIndex));
-    }
-
-    const formattedPath = parts.map((part, index) => {
-        if (typeof part === 'string') {
-            return <span key={`part-${index}`}>{part}</span>;
-        }
-        return part;
-    });
-
-    return formattedPath;
-}

package/src/OpenAPIPrefillContextProvider.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-/**
- * Prefill data that can be used to dynamically inject info into OpenAPI operation blocks.
- *
- * This is typically dynamic input context, such as visitor data or environment info.
- */
-export type PrefillInputContextData = Record<string, unknown>;
-
-/**
- * Context value is function that returns prefill data.
- */
-type PrefillContextValue = () => PrefillInputContextData | null;
-
-const OpenAPIPrefillContext = React.createContext<PrefillContextValue | null>(null);
-
-/**
- * Provide context to help prefill dynamic info like visitor data in OpenAPI blocks.
- */
-export function OpenAPIPrefillContextProvider(
-    props: React.PropsWithChildren<{
-        getPrefillInputContextData: () => PrefillInputContextData | null;
-    }>
-) {
-    const { getPrefillInputContextData, children } = props;
-    return (
-        <OpenAPIPrefillContext.Provider value={getPrefillInputContextData}>
-            {children}
-        </OpenAPIPrefillContext.Provider>
-    );
-}
-
-/**
- * Hook to access the prefill context function.
- */
-export function useOpenAPIPrefillContext(): PrefillContextValue {
-    return React.useContext(OpenAPIPrefillContext) ?? (() => null);
-}

package/src/OpenAPIRequestBody.tsx

@@ -1,54 +0,0 @@
-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';
-import type { OpenAPIOperationData, OpenAPIWebhookData } from './types';
-import { checkIsReference, createStateKey } from './utils';
-
-/**
- * Display an interactive request body.
- */
-export function OpenAPIRequestBody(props: {
-    requestBody: OpenAPIV3.RequestBodyObject | OpenAPIV3.ReferenceObject;
-    context: OpenAPIClientContext;
-    data: OpenAPIOperationData | OpenAPIWebhookData;
-}) {
-    const { requestBody, context, data } = props;
-
-    if (checkIsReference(requestBody)) {
-        return null;
-    }
-
-    const stateKey = createStateKey('request-body-media-type', context.blockKey);
-
-    return (
-        <InteractiveSection
-            header={
-                <>
-                    <span>{t(context.translation, 'name' in data ? 'payload' : 'body')}</span>
-                    <OpenAPIRequestBodyHeaderType requestBody={requestBody} stateKey={stateKey} />
-                </>
-            }
-            className="openapi-requestbody"
-            stateKey={stateKey}
-            selectIcon={context.icons.chevronDown}
-            tabs={Object.entries(requestBody.content ?? {}).map(
-                ([contentType, mediaTypeObject]) => {
-                    return {
-                        key: contentType,
-                        label: contentType,
-                        body: (
-                            <OpenAPIRootSchema
-                                schema={mediaTypeObject.schema ?? {}}
-                                context={context}
-                                key={contentType}
-                            />
-                        ),
-                    };
-                }
-            )}
-        />
-    );
-}

package/src/OpenAPIRequestBodyHeaderType.tsx

@@ -1,36 +0,0 @@
-'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,82 +0,0 @@
-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';
-
-/**
- * Display an interactive response body.
- */
-export function OpenAPIResponse(props: {
-    response: OpenAPIV3.ResponseObject;
-    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 description = resolveDescription(response);
-
-    if (content.length === 0 && !description && headers.length === 0) {
-        return null;
-    }
-
-    return (
-        <div className="openapi-response-body">
-            {headers.length > 0 ? (
-                <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 })
-                        )}
-                        context={context}
-                    />
-                </OpenAPIDisclosure>
-            ) : null}
-            {mediaType?.schema && (
-                <div className="openapi-responsebody">
-                    <OpenAPISchemaProperties
-                        id={`response-${context.blockKey}`}
-                        properties={[
-                            {
-                                schema: mediaType.schema,
-                                propertyName: tString(context.translation, 'response'),
-                                required: null,
-                            },
-                        ]}
-                        context={context}
-                    />
-                </div>
-            )}
-        </div>
-    );
-}

package/src/OpenAPIResponseExample.tsx

@@ -1,151 +0,0 @@
-import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import { Markdown } from './Markdown';
-import { OpenAPIEmptyExample, OpenAPIExample } from './OpenAPIExample';
-import { OpenAPIMediaTypeContent } from './OpenAPIMediaType';
-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, resolveDescription } from './utils';
-import { checkIsReference } from './utils';
-
-/**
- * Display an example of the response content.
- */
-export function OpenAPIResponseExample(props: {
-    data: OpenAPIOperationData | OpenAPIWebhookData;
-    context: OpenAPIContext;
-}) {
-    const { data, context } = props;
-
-    // if there are no responses defined for the operation
-    if (!data.operation.responses) {
-        return null;
-    }
-
-    const responses = Object.entries(data.operation.responses);
-    // Sort response to get 200, and 2xx first
-    responses.sort(([a], [b]) => {
-        if (a === 'default') {
-            return 1;
-        }
-        if (b === 'default') {
-            return -1;
-        }
-        if (a === '200') {
-            return -1;
-        }
-        if (b === '200') {
-            return 1;
-        }
-        return Number(a) - Number(b);
-    });
-
-    const tabs = responses
-        .filter(
-            ([_, responseObject]) =>
-                responseObject &&
-                typeof responseObject === 'object' &&
-                // Make sure the response is not hidden
-                !responseObject['x-hideSample']
-        )
-        .map(([key, responseObject]) => {
-            const description = resolveDescription(responseObject);
-            const label = description ? (
-                <Markdown key={`response-description-${key}`} 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 (!responseObject.content || Object.keys(responseObject.content).length === 0) {
-                return {
-                    key: key,
-                    label,
-                    statusCode: key,
-                    body: <OpenAPIEmptyExample context={context} />,
-                };
-            }
-
-            return {
-                key: key,
-                label,
-                statusCode: key,
-                body: <OpenAPIResponse context={context} content={responseObject.content} />,
-            };
-        });
-
-    if (tabs.length === 0) {
-        return null;
-    }
-
-    return (
-        <OpenAPIResponseExampleContent
-            selectIcon={context.icons.chevronDown}
-            blockKey={context.blockKey}
-            items={tabs}
-        />
-    );
-}
-
-function OpenAPIResponse(props: {
-    context: OpenAPIContext;
-    content: {
-        [media: string]: OpenAPIV3.MediaTypeObject | null;
-    };
-}) {
-    const { context, content } = props;
-
-    const entries = Object.entries(content);
-    const firstEntry = entries[0];
-
-    if (!firstEntry) {
-        throw new Error('One media type is required');
-    }
-
-    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,
-            body: <></>,
-            examples: getExamples({
-                mediaTypeObject,
-                mediaType,
-                context,
-            }),
-        };
-    });
-
-    return (
-        <OpenAPIMediaTypeContent
-            selectIcon={context.icons.chevronDown}
-            stateKey={createStateKey('response-media-types', context.blockKey)}
-            items={tabs}
-            context={getOpenAPIClientContext(context)}
-        />
-    );
-}