@gitbook/react-openapi 1.4.3 → 1.5.1

package/src/OpenAPIDisclosureGroup.tsx

@@ -1,158 +0,0 @@
-'use client';
-
-import { createContext, useContext, useRef } from 'react';
-import { mergeProps, useButton, useDisclosure, useFocusRing, useId } from 'react-aria';
-import {
-    type DisclosureGroupProps,
-    type DisclosureGroupState,
-    useDisclosureGroupState,
-    useDisclosureState,
-} from 'react-stately';
-import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
-
-interface Props {
-    groups: TDisclosureGroup[];
-    icon?: React.ReactNode;
-    /** State key to use with a store */
-    selectStateKey?: string;
-    /** Icon to display for the select */
-    selectIcon?: React.ReactNode;
-}
-
-type TDisclosureGroup = {
-    key: string;
-    label: string | React.ReactNode;
-    tabs?: {
-        key: string;
-        label: string | React.ReactNode;
-        body?: React.ReactNode;
-    }[];
-};
-
-const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
-
-/**
- * Display an interactive OpenAPI disclosure group.
- */
-export function OpenAPIDisclosureGroup(props: DisclosureGroupProps & Props) {
-    const { icon, groups, selectStateKey, selectIcon } = props;
-
-    const state = useDisclosureGroupState(props);
-
-    return (
-        <DisclosureGroupStateContext.Provider value={state}>
-            {groups.map((group) => (
-                <DisclosureItem
-                    selectStateKey={selectStateKey}
-                    selectIcon={selectIcon}
-                    icon={icon}
-                    key={group.key}
-                    group={group}
-                />
-            ))}
-        </DisclosureGroupStateContext.Provider>
-    );
-}
-
-function DisclosureItem(props: {
-    group: TDisclosureGroup;
-    icon?: React.ReactNode;
-    selectStateKey?: string;
-    selectIcon?: React.ReactNode;
-}) {
-    const { icon, group, selectStateKey, selectIcon } = props;
-
-    const defaultId = useId();
-    const id = group.key || defaultId;
-    const groupState = useContext(DisclosureGroupStateContext);
-    const isExpanded = groupState?.expandedKeys.has(id) || false;
-    const state = useDisclosureState({
-        isExpanded,
-        onExpandedChange() {
-            if (groupState) {
-                groupState.toggleKey(id);
-            }
-        },
-    });
-
-    const panelRef = useRef<HTMLDivElement | null>(null);
-    const triggerRef = useRef<HTMLDivElement | null>(null);
-    const isDisabled = groupState?.isDisabled || !group.tabs?.length || false;
-    const { buttonProps: triggerProps, panelProps } = useDisclosure(
-        {
-            ...props,
-            isExpanded,
-            isDisabled,
-        },
-        state,
-        panelRef
-    );
-    const { buttonProps } = useButton(triggerProps, triggerRef);
-    const { isFocusVisible, focusProps } = useFocusRing();
-
-    const defaultTab = group.tabs?.[0]?.key || '';
-    const store = useSelectState(selectStateKey, defaultTab);
-    const selectedTab = group.tabs?.find((tab) => tab.key === store.key) || group.tabs?.[0];
-
-    return (
-        <div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
-            <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}
-
-                    {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 && (
-                <div className="openapi-disclosure-group-panel" ref={panelRef} {...panelProps}>
-                    {selectedTab.body}
-                </div>
-            )}
-        </div>
-    );
-}

package/src/OpenAPIExample.tsx

@@ -1,55 +0,0 @@
-import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import type { OpenAPIContext, OpenAPIUniversalContext } from './context';
-import { json2xml } from './json2xml';
-import { stringifyOpenAPI } from './stringifyOpenAPI';
-import { t } from './translate';
-
-/**
- * Display an example.
- */
-export function OpenAPIExample(props: {
-    example: OpenAPIV3.ExampleObject;
-    context: OpenAPIContext;
-    syntax: string;
-}) {
-    const { example, context, syntax } = props;
-    const code = stringifyExample({ example, xml: syntax === 'xml' });
-
-    if (code === null) {
-        return <OpenAPIEmptyExample context={context} />;
-    }
-
-    return context.renderCodeBlock({ code, syntax });
-}
-
-function stringifyExample(args: { example: OpenAPIV3.ExampleObject; xml: boolean }): string | null {
-    const { example, xml } = args;
-
-    if (!example.value) {
-        return null;
-    }
-
-    if (typeof example.value === 'string') {
-        return example.value;
-    }
-
-    if (xml) {
-        return json2xml(example.value);
-    }
-
-    return stringifyOpenAPI(example.value, null, 2);
-}
-
-/**
- * Empty response example.
- */
-export function OpenAPIEmptyExample(props: {
-    context: OpenAPIUniversalContext;
-}) {
-    const { context } = props;
-    return (
-        <pre className="openapi-example-empty">
-            <p>{t(context.translation, 'no_content')}</p>
-        </pre>
-    );
-}

package/src/OpenAPIMediaType.tsx

@@ -1,139 +0,0 @@
-'use client';
-
-import type { Key } from 'react-aria';
-import { OpenAPIEmptyExample } from './OpenAPIExample';
-import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
-import { StaticSection } from './StaticSection';
-import type { OpenAPIClientContext } from './context';
-
-type OpenAPIMediaTypeItem = OpenAPISelectItem & {
-    body: React.ReactNode;
-    examples?: OpenAPIMediaTypeItem[];
-};
-
-/**
- * Get the state of the response examples select.
- */
-export function useMediaTypesState(stateKey: string | undefined, initialKey: Key = 'default') {
-    return useSelectState(stateKey, initialKey);
-}
-
-function useMediaTypeExamplesState(stateKey: string | undefined, initialKey: Key = 'default') {
-    return useSelectState(stateKey, initialKey);
-}
-
-export function OpenAPIMediaTypeContent(props: {
-    items: OpenAPIMediaTypeItem[];
-    selectIcon?: React.ReactNode;
-    stateKey: string;
-    context: OpenAPIClientContext;
-}) {
-    const { stateKey, items, selectIcon, context } = props;
-    const state = useMediaTypesState(stateKey, items[0]?.key);
-
-    const examples = items.find((item) => item.key === state.key)?.examples ?? [];
-
-    if (!items.length && !examples.length) {
-        return null;
-    }
-
-    return (
-        <StaticSection
-            footer={
-                items.length > 1 || examples.length > 1 ? (
-                    <OpenAPIMediaTypeFooter
-                        items={items}
-                        examples={examples}
-                        selectIcon={selectIcon}
-                        stateKey={stateKey}
-                    />
-                ) : null
-            }
-            className="openapi-response-media-types-examples"
-        >
-            <OpenAPIMediaTypeBody
-                context={context}
-                stateKey={stateKey}
-                items={items}
-                examples={examples}
-            />
-        </StaticSection>
-    );
-}
-
-function OpenAPIMediaTypeFooter(props: {
-    items: OpenAPIMediaTypeItem[];
-    examples?: OpenAPIMediaTypeItem[];
-    selectIcon?: React.ReactNode;
-    stateKey: string;
-}) {
-    const { items, examples, stateKey, selectIcon } = props;
-
-    return (
-        <>
-            {items.length > 1 && (
-                <OpenAPISelect
-                    icon={selectIcon}
-                    items={items}
-                    stateKey={stateKey}
-                    placement="bottom start"
-                >
-                    {items.map((item) => (
-                        <OpenAPISelectItem key={item.key} id={item.key} value={item}>
-                            <span>{item.label}</span>
-                        </OpenAPISelectItem>
-                    ))}
-                </OpenAPISelect>
-            )}
-
-            {examples && examples.length > 1 ? (
-                <OpenAPISelect
-                    icon={selectIcon}
-                    items={examples}
-                    stateKey={`${stateKey}-examples`}
-                    placement="bottom start"
-                >
-                    {examples.map((example) => (
-                        <OpenAPISelectItem key={example.key} id={example.key} value={example}>
-                            <span>{example.label}</span>
-                        </OpenAPISelectItem>
-                    ))}
-                </OpenAPISelect>
-            ) : null}
-        </>
-    );
-}
-
-function OpenAPIMediaTypeBody(props: {
-    items: OpenAPIMediaTypeItem[];
-    examples?: OpenAPIMediaTypeItem[];
-    stateKey: string;
-    context: OpenAPIClientContext;
-}) {
-    const { stateKey, items, examples, context } = props;
-    const state = useMediaTypesState(stateKey, items[0]?.key);
-
-    const selectedItem = items.find((item) => item.key === state.key) ?? items[0];
-
-    const exampleState = useMediaTypeExamplesState(
-        `${stateKey}-examples`,
-        selectedItem?.examples?.[0]?.key
-    );
-
-    if (!selectedItem) {
-        return null;
-    }
-
-    if (examples) {
-        const selectedExample =
-            examples.find((example) => example.key === exampleState.key) ?? examples[0];
-
-        if (!selectedExample) {
-            return <OpenAPIEmptyExample context={context} />;
-        }
-
-        return selectedExample.body;
-    }
-
-    return selectedItem.body;
-}

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}
-                            />
-                        ),
-                    };
-                }
-            )}
-        />
-    );
-}