@gitbook/react-openapi 1.4.3 → 1.5.1

package/src/OpenAPICodeSample.tsx

@@ -1,330 +0,0 @@
-import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import {
-    OpenAPIMediaTypeExamplesBody,
-    OpenAPIMediaTypeExamplesSelector,
-} from './OpenAPICodeSampleInteractive';
-import { OpenAPICodeSampleBody } from './OpenAPICodeSampleSelector';
-import { ScalarApiButton } from './ScalarApiButton';
-import { type CodeSampleGenerator, codeSampleGenerators } from './code-samples';
-import { type OpenAPIContext, getOpenAPIClientContext } from './context';
-import { generateMediaTypeExamples, generateSchemaExample } from './generateSchemaExample';
-import { stringifyOpenAPI } from './stringifyOpenAPI';
-import type { OpenAPIOperationData } from './types';
-import { getDefaultServerURL } from './util/server';
-import { checkIsReference } from './utils';
-
-const CUSTOM_CODE_SAMPLES_KEYS = ['x-custom-examples', 'x-code-samples', 'x-codeSamples'] as const;
-
-/**
- * Display code samples to execute the operation.
- * It supports the Redocly custom syntax as well (https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/)
- */
-export function OpenAPICodeSample(props: {
-    data: OpenAPIOperationData;
-    context: OpenAPIContext;
-}) {
-    const { data, context } = props;
-
-    // If code samples are disabled at operation level, we don't display the code samples.
-    if (data.operation['x-codeSamples'] === false) {
-        return null;
-    }
-
-    const customCodeSamples = getCustomCodeSamples(props);
-
-    // If code samples are disabled at the top-level and not custom code samples are defined,
-    // we don't display the code samples.
-    if (data['x-codeSamples'] === false && !customCodeSamples) {
-        return null;
-    }
-
-    const samples = customCodeSamples ?? generateCodeSamples(props);
-
-    if (samples.length === 0) {
-        return null;
-    }
-
-    return (
-        <OpenAPICodeSampleBody
-            context={getOpenAPIClientContext(context)}
-            data={data}
-            items={samples}
-            selectIcon={context.icons.chevronDown}
-        />
-    );
-}
-
-/**
- * Generate code samples for the operation.
- */
-function generateCodeSamples(props: {
-    data: OpenAPIOperationData;
-    context: OpenAPIContext;
-}) {
-    const { data, context } = props;
-
-    const searchParams = new URLSearchParams();
-    const headersObject: { [k: string]: string } = {};
-
-    // The parser can sometimes returns invalid parameters (an object instead of an array).
-    // It should get fixed in scalar, but in the meantime we just ignore the parameters in that case.
-    const params = Array.isArray(data.operation.parameters) ? data.operation.parameters : [];
-
-    params.forEach((param) => {
-        if (!param) {
-            return;
-        }
-
-        if (param.in === 'header' && param.required) {
-            const example = param.schema
-                ? generateSchemaExample(param.schema, { mode: 'write' })
-                : undefined;
-            if (example !== undefined && param.name) {
-                headersObject[param.name] =
-                    typeof example !== 'string' ? stringifyOpenAPI(example) : example;
-            }
-        } else if (param.in === 'query' && param.required) {
-            const example = param.schema
-                ? generateSchemaExample(param.schema, { mode: 'write' })
-                : undefined;
-            if (example !== undefined && param.name) {
-                searchParams.append(
-                    param.name,
-                    String(Array.isArray(example) ? example[0] : example)
-                );
-            }
-        }
-    });
-
-    const requestBody = !checkIsReference(data.operation.requestBody)
-        ? data.operation.requestBody
-        : undefined;
-
-    const url =
-        getDefaultServerURL(data.servers) +
-        data.path +
-        (searchParams.size ? `?${searchParams.toString()}` : '');
-
-    const genericHeaders = {
-        ...getSecurityHeaders(data.securities),
-        ...headersObject,
-    };
-
-    const mediaTypeRendererFactories = Object.entries(requestBody?.content ?? {}).map(
-        ([mediaType, mediaTypeObject]) => {
-            return (generator: CodeSampleGenerator) => {
-                const mediaTypeHeaders = {
-                    ...genericHeaders,
-                    'Content-Type': mediaType,
-                };
-                return {
-                    mediaType,
-                    element: context.renderCodeBlock({
-                        code: generator.generate({
-                            url,
-                            method: data.method,
-                            body: undefined,
-                            headers: mediaTypeHeaders,
-                        }),
-                        syntax: generator.syntax,
-                    }),
-                    examples: generateMediaTypeExamples(mediaTypeObject, {
-                        mode: 'write',
-                    }).map((example) => ({
-                        example,
-                        element: context.renderCodeBlock({
-                            code: generator.generate({
-                                url,
-                                method: data.method,
-                                body: example.value,
-                                headers: mediaTypeHeaders,
-                            }),
-                            syntax: generator.syntax,
-                        }),
-                    })),
-                } satisfies MediaTypeRenderer;
-            };
-        }
-    );
-
-    return codeSampleGenerators.map((generator) => {
-        if (mediaTypeRendererFactories.length > 0) {
-            const renderers = mediaTypeRendererFactories.map((generate) => generate(generator));
-            return {
-                key: `default-${generator.id}`,
-                label: generator.label,
-                body: (
-                    <OpenAPIMediaTypeExamplesBody
-                        method={data.method}
-                        path={data.path}
-                        renderers={renderers}
-                        blockKey={context.blockKey}
-                    />
-                ),
-                footer: (
-                    <OpenAPICodeSampleFooter renderers={renderers} data={data} context={context} />
-                ),
-            };
-        }
-        return {
-            key: `default-${generator.id}`,
-            label: generator.label,
-            body: context.renderCodeBlock({
-                code: generator.generate({
-                    url,
-                    method: data.method,
-                    body: undefined,
-                    headers: genericHeaders,
-                }),
-                syntax: generator.syntax,
-            }),
-            footer: <OpenAPICodeSampleFooter data={data} renderers={[]} context={context} />,
-        };
-    });
-}
-
-export interface MediaTypeRenderer {
-    mediaType: string;
-    element: React.ReactNode;
-    examples: Array<{
-        example: OpenAPIV3.ExampleObject;
-        element: React.ReactNode;
-    }>;
-}
-
-function OpenAPICodeSampleFooter(props: {
-    data: OpenAPIOperationData;
-    renderers: MediaTypeRenderer[];
-    context: OpenAPIContext;
-}) {
-    const { data, context, renderers } = props;
-    const { method, path, securities, servers } = data;
-    const { specUrl } = context;
-    const hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
-    const hasMultipleMediaTypes =
-        renderers.length > 1 || renderers.some((renderer) => renderer.examples.length > 0);
-
-    if (hideTryItPanel && !hasMultipleMediaTypes) {
-        return null;
-    }
-
-    if (!validateHttpMethod(method)) {
-        return null;
-    }
-
-    return (
-        <div className="openapi-codesample-footer">
-            {hasMultipleMediaTypes ? (
-                <OpenAPIMediaTypeExamplesSelector
-                    method={data.method}
-                    path={data.path}
-                    renderers={renderers}
-                    selectIcon={context.icons.chevronDown}
-                    blockKey={context.blockKey}
-                />
-            ) : (
-                <span />
-            )}
-            {!hideTryItPanel && (
-                <ScalarApiButton
-                    context={getOpenAPIClientContext(context)}
-                    method={method}
-                    path={path}
-                    securities={securities}
-                    servers={servers}
-                    specUrl={specUrl}
-                />
-            )}
-        </div>
-    );
-}
-
-/**
- * Get custom code samples for the operation.
- */
-function getCustomCodeSamples(props: {
-    data: OpenAPIOperationData;
-    context: OpenAPIContext;
-}) {
-    const { data, context } = props;
-
-    let customCodeSamples: null | Array<{
-        key: string;
-        label: string;
-        body: React.ReactNode;
-    }> = null;
-
-    CUSTOM_CODE_SAMPLES_KEYS.forEach((key) => {
-        const customSamples = data.operation[key];
-        if (customSamples && Array.isArray(customSamples)) {
-            customCodeSamples = customSamples
-                .filter((sample) => {
-                    return typeof sample.source === 'string' && typeof sample.lang === 'string';
-                })
-                .map((sample, index) => ({
-                    key: `custom-sample-${sample.lang}-${index}`,
-                    label: sample.label || sample.lang,
-                    body: context.renderCodeBlock({
-                        code: sample.source,
-                        syntax: sample.lang,
-                    }),
-                    footer: (
-                        <OpenAPICodeSampleFooter renderers={[]} data={data} context={context} />
-                    ),
-                }));
-        }
-    });
-
-    return customCodeSamples;
-}
-
-function getSecurityHeaders(securities: OpenAPIOperationData['securities']): {
-    [key: string]: string;
-} {
-    const security = securities[0];
-
-    if (!security) {
-        return {};
-    }
-
-    switch (security[1].type) {
-        case 'http': {
-            let scheme = security[1].scheme;
-            let format = security[1].bearerFormat ?? 'YOUR_SECRET_TOKEN';
-
-            if (scheme?.includes('bearer')) {
-                scheme = 'Bearer';
-            } else if (scheme?.includes('basic')) {
-                scheme = 'Basic';
-                format = 'username:password';
-            } else if (scheme?.includes('token')) {
-                scheme = 'Token';
-            }
-
-            return {
-                Authorization: `${scheme} ${format}`,
-            };
-        }
-        case 'apiKey': {
-            if (security[1].in !== 'header') return {};
-
-            const name = security[1].name ?? 'Authorization';
-
-            return {
-                [name]: 'YOUR_API_KEY',
-            };
-        }
-        case 'oauth2': {
-            return {
-                Authorization: 'Bearer YOUR_OAUTH2_TOKEN',
-            };
-        }
-        default: {
-            return {};
-        }
-    }
-}
-
-function validateHttpMethod(method: string): method is OpenAPIV3.HttpMethods {
-    return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
-}

package/src/OpenAPICodeSampleInteractive.tsx

@@ -1,136 +0,0 @@
-'use client';
-import clsx from 'clsx';
-import type { MediaTypeRenderer } from './OpenAPICodeSample';
-import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
-import { createStateKey } from './utils';
-
-export function OpenAPIMediaTypeExamplesSelector(props: {
-    method: string;
-    path: string;
-    renderers: MediaTypeRenderer[];
-    selectIcon?: React.ReactNode;
-    blockKey?: string;
-}) {
-    const { method, path, renderers, selectIcon, blockKey } = props;
-    if (!renderers[0]) {
-        throw new Error('No renderers provided');
-    }
-    const stateKey = createStateKey('request-body-media-type', blockKey);
-    const state = useSelectState(stateKey, renderers[0].mediaType);
-    const selected = renderers.find((r) => r.mediaType === state.key) || renderers[0];
-
-    return (
-        <div className="openapi-codesample-selectors">
-            <MediaTypeSelector selectIcon={selectIcon} stateKey={stateKey} renderers={renderers} />
-            <ExamplesSelector
-                selectIcon={selectIcon}
-                method={method}
-                path={path}
-                renderer={selected}
-            />
-        </div>
-    );
-}
-
-function MediaTypeSelector(props: {
-    stateKey: string;
-    renderers: MediaTypeRenderer[];
-    selectIcon?: React.ReactNode;
-}) {
-    const { renderers, stateKey, selectIcon } = props;
-
-    if (renderers.length < 2) {
-        return null;
-    }
-
-    const items = renderers.map((renderer) => ({
-        key: renderer.mediaType,
-        label: renderer.mediaType,
-    }));
-
-    return (
-        <OpenAPISelect
-            className={clsx('openapi-select')}
-            items={renderers.map((renderer) => ({
-                key: renderer.mediaType,
-                label: renderer.mediaType,
-            }))}
-            icon={selectIcon}
-            stateKey={stateKey}
-            placement="bottom start"
-        >
-            {items.map((item) => (
-                <OpenAPISelectItem key={item.key} id={item.key} value={item}>
-                    {item.label}
-                </OpenAPISelectItem>
-            ))}
-        </OpenAPISelect>
-    );
-}
-
-function ExamplesSelector(props: {
-    method: string;
-    path: string;
-    renderer: MediaTypeRenderer;
-    selectIcon?: React.ReactNode;
-}) {
-    const { method, path, renderer, selectIcon } = props;
-    if (renderer.examples.length < 2) {
-        return null;
-    }
-
-    const items = renderer.examples.map((example, index) => ({
-        key: index,
-        label: example.example.summary || `Example ${index + 1}`,
-    }));
-
-    return (
-        <OpenAPISelect
-            items={items}
-            icon={selectIcon}
-            stateKey={`media-type-sample-${renderer.mediaType}-${method}-${path}`}
-            placement="bottom start"
-        >
-            {items.map((item) => (
-                <OpenAPISelectItem key={item.key} id={item.key} value={item}>
-                    {item.label}
-                </OpenAPISelectItem>
-            ))}
-        </OpenAPISelect>
-    );
-}
-
-export function OpenAPIMediaTypeExamplesBody(props: {
-    method: string;
-    path: string;
-    renderers: MediaTypeRenderer[];
-    blockKey?: string;
-}) {
-    const { renderers, method, path, blockKey } = props;
-    if (!renderers[0]) {
-        throw new Error('No renderers provided');
-    }
-
-    const mediaTypeState = useSelectState(
-        createStateKey('request-body-media-type', blockKey),
-        renderers[0].mediaType
-    );
-    const selected = renderers.find((r) => r.mediaType === mediaTypeState.key) ?? renderers[0];
-    if (selected.examples.length === 0) {
-        return selected.element;
-    }
-    return <ExamplesBody method={method} path={path} renderer={selected} />;
-}
-
-function ExamplesBody(props: { method: string; path: string; renderer: MediaTypeRenderer }) {
-    const { method, path, renderer } = props;
-    const exampleState = useSelectState(
-        `media-type-sample-${renderer.mediaType}-${method}-${path}`,
-        renderer.mediaType
-    );
-    const example = renderer.examples[Number(exampleState.key)] ?? renderer.examples[0];
-    if (!example) {
-        throw new Error(`No example found for key ${exampleState.key}`);
-    }
-    return example.element;
-}

package/src/OpenAPICodeSampleSelector.tsx

@@ -1,94 +0,0 @@
-'use client';
-
-import { useCallback } from 'react';
-import type { Key } from 'react-aria';
-import { useStore } from 'zustand';
-import { OpenAPIPath } from './OpenAPIPath';
-import { OpenAPISelect, OpenAPISelectItem } from './OpenAPISelect';
-import { StaticSection } from './StaticSection';
-import type { OpenAPIClientContext } from './context';
-import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
-import type { OpenAPIOperationData } from './types';
-
-function useCodeSampleState(initialKey: Key = 'default') {
-    const store = useStore(getOrCreateStoreByKey('codesample', initialKey));
-    return {
-        key: store.key,
-        setKey: useCallback((key: Key) => store.setKey(key), [store.setKey]),
-    };
-}
-
-type CodeSampleItem = OpenAPISelectItem & {
-    body: React.ReactNode;
-    footer?: React.ReactNode;
-};
-
-function OpenAPICodeSampleHeader(props: {
-    items: CodeSampleItem[];
-    data: OpenAPIOperationData;
-    selectIcon?: React.ReactNode;
-    context: OpenAPIClientContext;
-}) {
-    const { data, items, selectIcon, context } = props;
-
-    return (
-        <>
-            <OpenAPIPath context={context} canCopy={false} withServer={false} data={data} />
-            {items.length > 1 ? (
-                <OpenAPISelect
-                    icon={selectIcon}
-                    items={items}
-                    stateKey="codesample"
-                    placement="bottom end"
-                >
-                    {items.map((item) => (
-                        <OpenAPISelectItem key={item.key} id={item.key} value={item}>
-                            {item.label}
-                        </OpenAPISelectItem>
-                    ))}
-                </OpenAPISelect>
-            ) : items[0] ? (
-                <span className="openapi-codesample-label">{items[0].label}</span>
-            ) : null}
-        </>
-    );
-}
-
-export function OpenAPICodeSampleBody(props: {
-    items: CodeSampleItem[];
-    data: OpenAPIOperationData;
-    selectIcon?: React.ReactNode;
-    context: OpenAPIClientContext;
-}) {
-    const { items, data, selectIcon, context } = props;
-    if (!items[0]) {
-        throw new Error('No items provided');
-    }
-
-    const state = useCodeSampleState(items[0]?.key);
-
-    const selected = items.find((item) => item.key === state.key) || items[0];
-
-    if (!selected) {
-        return null;
-    }
-
-    return (
-        <StaticSection
-            header={
-                <OpenAPICodeSampleHeader
-                    context={context}
-                    selectIcon={selectIcon}
-                    data={data}
-                    items={items}
-                />
-            }
-            className="openapi-codesample"
-        >
-            <div id={selected.key as string} className="openapi-codesample-panel">
-                {selected.body ? selected.body : null}
-                {selected.footer ? selected.footer : null}
-            </div>
-        </StaticSection>
-    );
-}

package/src/OpenAPICopyButton.tsx

@@ -1,72 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Button, type ButtonProps, Tooltip, TooltipTrigger } from 'react-aria-components';
-import type { OpenAPIClientContext } from './context';
-import { t } from './translate';
-
-export function OpenAPICopyButton(
-    props: ButtonProps & {
-        value: string;
-        children: React.ReactNode;
-        context: OpenAPIClientContext;
-        label?: string;
-        /**
-         * Whether to show a tooltip.
-         * @default true
-         */
-        withTooltip?: boolean;
-    }
-) {
-    const { value, label, children, onPress, className, context, withTooltip = true } = props;
-    const [copied, setCopied] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleCopy = () => {
-        if (!value) return;
-        navigator.clipboard.writeText(value).then(() => {
-            setIsOpen(true);
-            setCopied(true);
-
-            setTimeout(() => {
-                setCopied(false);
-                setIsOpen(false);
-            }, 2000);
-        });
-    };
-
-    return (
-        <TooltipTrigger
-            isOpen={isOpen}
-            onOpenChange={setIsOpen}
-            isDisabled={!withTooltip}
-            closeDelay={200}
-            delay={200}
-        >
-            <Button
-                type="button"
-                preventFocusOnPress
-                onPress={(e) => {
-                    handleCopy();
-                    onPress?.(e);
-                }}
-                className={`openapi-copy-button ${className}`}
-                {...props}
-            >
-                {children}
-            </Button>
-
-            <Tooltip
-                isOpen={isOpen}
-                onOpenChange={setIsOpen}
-                placement="top"
-                offset={4}
-                className="openapi-tooltip"
-            >
-                {copied
-                    ? t(context.translation, 'copied')
-                    : label || t(context.translation, 'copy_to_clipboard')}
-            </Tooltip>
-        </TooltipTrigger>
-    );
-}

package/src/OpenAPIDisclosure.tsx

@@ -1,46 +0,0 @@
-'use client';
-import clsx from 'clsx';
-import type React from 'react';
-import { useState } from 'react';
-import { Button, Disclosure, DisclosurePanel } from 'react-aria-components';
-
-/**
- * Display an interactive OpenAPI disclosure.
- */
-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, header, label, children, className } = props;
-    const [isExpanded, setIsExpanded] = useState(false);
-
-    return (
-        <Disclosure
-            className={clsx('openapi-disclosure', className)}
-            isExpanded={isExpanded}
-            onExpandedChange={setIsExpanded}
-        >
-            <Button
-                slot="trigger"
-                className="openapi-disclosure-trigger"
-                style={({ isFocusVisible }) => ({
-                    outline: isFocusVisible
-                        ? '2px solid rgb(var(--primary-color-500) / 0.4)'
-                        : 'none',
-                })}
-            >
-                {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}
-            </DisclosurePanel>
-        </Disclosure>
-    );
-}