@gitbook/react-openapi 1.4.3 → 1.5.2

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

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;
-}