@gitbook/react-openapi 1.1.6 → 1.1.7

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { OpenAPICustomOperationProperties, OpenAPICustomSpecProperties, OpenAPIV3 } from '@gitbook/openapi-parser';
+import type { OpenAPICustomOperationProperties, OpenAPICustomSpecProperties, OpenAPISchema, OpenAPIV3 } from '@gitbook/openapi-parser';
 export interface OpenAPIContextProps extends OpenAPIClientContext {
     /**
      * Render a code block.
@@ -13,6 +13,7 @@ export interface OpenAPIContextProps extends OpenAPIClientContext {
     renderHeading: (props: {
         deprecated: boolean;
         title: string;
+        stability?: string;
     }) => React.ReactNode;
     /**
      * Render the document of the operation.
@@ -51,10 +52,6 @@ export interface OpenAPIOperationData extends OpenAPICustomSpecProperties {
     /** Securities that should be used for this operation */
     securities: [string, OpenAPIV3.SecuritySchemeObject][];
 }
-export type OpenAPISchema = {
-    name: string;
-    schema: OpenAPIV3.SchemaObject;
-};
 export interface OpenAPISchemasData {
     /** Components schemas to be used for schemas */
     schemas: OpenAPISchema[];

package/package.json

@@ -8,7 +8,7 @@
             "default": "./dist/index.js"
         }
     },
-    "version": "1.1.6",
+    "version": "1.1.7",
     "sideEffects": false,
     "dependencies": {
         "@gitbook/openapi-parser": "workspace:*",

package/src/InteractiveSection.tsx

@@ -32,8 +32,6 @@ export function InteractiveSection(props: {
     defaultTab?: string;
     /** Content of the header */
     header?: React.ReactNode;
-    /** Body of the section */
-    children?: React.ReactNode;
     /** Children to display within the container */
     overlay?: React.ReactNode;
 }) {
@@ -45,7 +43,6 @@ export function InteractiveSection(props: {
         tabs = [],
         defaultTab = tabs[0]?.key,
         header,
-        children,
         overlay,
         toggleIcon = '▶',
     } = props;
@@ -83,7 +80,7 @@ export function InteractiveSection(props: {
                     className={className}
                 >
                     <SectionHeaderContent className={className}>
-                        {(children || selectedTab?.body) && toggeable ? (
+                        {selectedTab?.body && toggeable ? (
                             <button
                                 {...mergeProps(buttonProps, focusProps)}
                                 ref={triggerRef}
@@ -131,9 +128,8 @@ export function InteractiveSection(props: {
                     </div>
                 </SectionHeader>
             ) : null}
-            {(!toggeable || state.isExpanded) && (children || selectedTab?.body) ? (
+            {(!toggeable || state.isExpanded) && selectedTab?.body ? (
                 <SectionBody ref={panelRef} {...panelProps} className={className}>
-                    {children}
                     {selectedTab?.body}
                 </SectionBody>
             ) : null}

package/src/OpenAPICodeSample.tsx

@@ -148,7 +148,13 @@ function generateCodeSamples(props: {
             return {
                 key: `default-${generator.id}`,
                 label: generator.label,
-                body: <OpenAPIMediaTypeExamplesBody data={data} renderers={renderers} />,
+                body: (
+                    <OpenAPIMediaTypeExamplesBody
+                        method={data.method}
+                        path={data.path}
+                        renderers={renderers}
+                    />
+                ),
                 footer: (
                     <OpenAPICodeSampleFooter renderers={renderers} data={data} context={context} />
                 ),
@@ -189,9 +195,10 @@ function OpenAPICodeSampleFooter(props: {
     const { method, path } = data;
     const { specUrl } = context;
     const hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
-    const hasMediaTypes = renderers.length > 0;
+    const hasMultipleMediaTypes =
+        renderers.length > 1 || renderers.some((renderer) => renderer.examples.length > 0);
 
-    if (hideTryItPanel && !hasMediaTypes) {
+    if (hideTryItPanel && !hasMultipleMediaTypes) {
         return null;
     }
 
@@ -201,8 +208,12 @@ function OpenAPICodeSampleFooter(props: {
 
     return (
         <div className="openapi-codesample-footer">
-            {hasMediaTypes ? (
-                <OpenAPIMediaTypeExamplesSelector data={data} renderers={renderers} />
+            {hasMultipleMediaTypes ? (
+                <OpenAPIMediaTypeExamplesSelector
+                    method={data.method}
+                    path={data.path}
+                    renderers={renderers}
+                />
             ) : (
                 <span />
             )}

package/src/OpenAPICodeSampleInteractive.tsx

@@ -3,10 +3,17 @@ import clsx from 'clsx';
 import { useCallback } from 'react';
 import { useStore } from 'zustand';
 import type { MediaTypeRenderer } from './OpenAPICodeSample';
-import type { OpenAPIOperationData } from './types';
 import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
 
-function useMediaTypeState(data: OpenAPIOperationData, defaultKey: string) {
+type MediaTypeState = {
+    mediaType: string;
+    setMediaType: (mediaType: string) => void;
+};
+
+function useMediaTypeState(
+    data: { method: string; path: string },
+    defaultKey: string
+): MediaTypeState {
     const { method, path } = data;
     const store = useStore(getOrCreateTabStoreByKey(`media-type-${method}-${path}`, defaultKey));
     if (typeof store.tabKey !== 'string') {
@@ -18,7 +25,7 @@ function useMediaTypeState(data: OpenAPIOperationData, defaultKey: string) {
     };
 }
 
-function useMediaTypeSampleIndexState(data: OpenAPIOperationData, mediaType: string) {
+function useMediaTypeSampleIndexState(data: { method: string; path: string }, mediaType: string) {
     const { method, path } = data;
     const store = useStore(
         getOrCreateTabStoreByKey(`media-type-sample-${mediaType}-${method}-${path}`, 0)
@@ -33,40 +40,57 @@ function useMediaTypeSampleIndexState(data: OpenAPIOperationData, mediaType: str
 }
 
 export function OpenAPIMediaTypeExamplesSelector(props: {
-    data: OpenAPIOperationData;
+    method: string;
+    path: string;
     renderers: MediaTypeRenderer[];
 }) {
-    const { data, renderers } = props;
+    const { method, path, renderers } = props;
     if (!renderers[0]) {
         throw new Error('No renderers provided');
     }
-    const state = useMediaTypeState(data, renderers[0].mediaType);
+    const state = useMediaTypeState({ method, path }, renderers[0].mediaType);
     const selected = renderers.find((r) => r.mediaType === state.mediaType) || renderers[0];
 
     return (
         <div className="openapi-codesample-selectors">
-            <select
-                className={clsx('openapi-select')}
-                value={state.mediaType}
-                onChange={(e) => state.setMediaType(e.target.value)}
-            >
-                {renderers.map((renderer) => (
-                    <option key={renderer.mediaType} value={renderer.mediaType}>
-                        {renderer.mediaType}
-                    </option>
-                ))}
-            </select>
-            <ExamplesSelector data={data} renderer={selected} />
+            <MediaTypeSelector state={state} renderers={renderers} />
+            <ExamplesSelector method={method} path={path} renderer={selected} />
         </div>
     );
 }
 
+function MediaTypeSelector(props: {
+    state: MediaTypeState;
+    renderers: MediaTypeRenderer[];
+}) {
+    const { renderers, state } = props;
+
+    if (renderers.length < 2) {
+        return null;
+    }
+
+    return (
+        <select
+            className={clsx('openapi-select')}
+            value={state.mediaType}
+            onChange={(e) => state.setMediaType(e.target.value)}
+        >
+            {renderers.map((renderer) => (
+                <option key={renderer.mediaType} value={renderer.mediaType}>
+                    {renderer.mediaType}
+                </option>
+            ))}
+        </select>
+    );
+}
+
 function ExamplesSelector(props: {
-    data: OpenAPIOperationData;
+    method: string;
+    path: string;
     renderer: MediaTypeRenderer;
 }) {
-    const { data, renderer } = props;
-    const state = useMediaTypeSampleIndexState(data, renderer.mediaType);
+    const { method, path, renderer } = props;
+    const state = useMediaTypeSampleIndexState({ method, path }, renderer.mediaType);
     if (renderer.examples.length < 2) {
         return null;
     }
@@ -87,25 +111,26 @@ function ExamplesSelector(props: {
 }
 
 export function OpenAPIMediaTypeExamplesBody(props: {
-    data: OpenAPIOperationData;
+    method: string;
+    path: string;
     renderers: MediaTypeRenderer[];
 }) {
-    const { renderers, data } = props;
+    const { renderers, method, path } = props;
     if (!renderers[0]) {
         throw new Error('No renderers provided');
     }
-    const mediaTypeState = useMediaTypeState(data, renderers[0].mediaType);
+    const mediaTypeState = useMediaTypeState({ method, path }, renderers[0].mediaType);
     const selected =
         renderers.find((r) => r.mediaType === mediaTypeState.mediaType) ?? renderers[0];
     if (selected.examples.length === 0) {
         return selected.element;
     }
-    return <ExamplesBody data={data} renderer={selected} />;
+    return <ExamplesBody method={method} path={path} renderer={selected} />;
 }
 
-function ExamplesBody(props: { data: OpenAPIOperationData; renderer: MediaTypeRenderer }) {
-    const { data, renderer } = props;
-    const exampleState = useMediaTypeSampleIndexState(data, renderer.mediaType);
+function ExamplesBody(props: { method: string; path: string; renderer: MediaTypeRenderer }) {
+    const { method, path, renderer } = props;
+    const exampleState = useMediaTypeSampleIndexState({ method, path }, renderer.mediaType);
     const example = renderer.examples[exampleState.index] ?? renderer.examples[0];
     if (!example) {
         throw new Error(`No example found for index ${exampleState.index}`);

package/src/OpenAPICopyButton.tsx

@@ -6,10 +6,16 @@ import { Button, type ButtonProps, Tooltip, TooltipTrigger } from 'react-aria-co
 export function OpenAPICopyButton(
     props: ButtonProps & {
         value: string;
+        children: React.ReactNode;
+        label?: string;
+        /**
+         * Whether to show a tooltip.
+         * @default true
+         */
+        withTooltip?: boolean;
     }
 ) {
-    const { value } = props;
-    const { children, onPress, className } = props;
+    const { value, label, children, onPress, className, withTooltip = true } = props;
     const [copied, setCopied] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
 
@@ -21,12 +27,19 @@ export function OpenAPICopyButton(
 
             setTimeout(() => {
                 setCopied(false);
+                setIsOpen(false);
             }, 2000);
         });
     };
 
     return (
-        <TooltipTrigger isOpen={isOpen} onOpenChange={setIsOpen} closeDelay={200} delay={200}>
+        <TooltipTrigger
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            isDisabled={!withTooltip}
+            closeDelay={200}
+            delay={200}
+        >
             <Button
                 type="button"
                 preventFocusOnPress
@@ -47,7 +60,7 @@ export function OpenAPICopyButton(
                 offset={4}
                 className="openapi-tooltip"
             >
-                {copied ? 'Copied' : 'Copy to clipboard'}{' '}
+                {copied ? 'Copied' : label || 'Copy to clipboard'}
             </Tooltip>
         </TooltipTrigger>
     );

package/src/OpenAPIOperation.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx';
 
-import type { OpenAPICustomOperationProperties, OpenAPIV3 } from '@gitbook/openapi-parser';
+import type {
+    OpenAPICustomOperationProperties,
+    OpenAPIStability,
+    OpenAPIV3,
+} from '@gitbook/openapi-parser';
 import { Markdown } from './Markdown';
 import { OpenAPICodeSample } from './OpenAPICodeSample';
 import { OpenAPIPath } from './OpenAPIPath';
@@ -29,14 +33,24 @@ export function OpenAPIOperation(props: {
     return (
         <div className={clsx('openapi-operation', className)}>
             <div className="openapi-summary" id={operation.summary ? undefined : context.id}>
+                {(operation.deprecated || operation['x-stability']) && (
+                    <div className="openapi-summary-tags">
+                        {operation.deprecated && (
+                            <div className="openapi-deprecated">Deprecated</div>
+                        )}
+                        {operation['x-stability'] && (
+                            <OpenAPIOperationStability stability={operation['x-stability']} />
+                        )}
+                    </div>
+                )}
                 {operation.summary
                     ? context.renderHeading({
                           deprecated: operation.deprecated ?? false,
+                          stability: operation['x-stability'],
                           title: operation.summary,
                       })
                     : null}
                 <OpenAPIPath data={data} context={context} />
-                {operation.deprecated && <div className="openapi-deprecated">Deprecated</div>}
             </div>
             <div className="openapi-columns">
                 <div className="openapi-column-spec">
@@ -89,3 +103,26 @@ function OpenAPIOperationDescription(props: {
         </div>
     );
 }
+
+const stabilityEnum = {
+    experimental: 'Experimental',
+    alpha: 'Alpha',
+    beta: 'Beta',
+    stable: 'Stable',
+} as const;
+
+function OpenAPIOperationStability(props: { stability: OpenAPIStability }) {
+    const { stability } = props;
+
+    const foundStability = stabilityEnum[stability];
+
+    if (!foundStability) {
+        return null;
+    }
+
+    return (
+        <div className={`openapi-stability openapi-stability-${foundStability.toLowerCase()}`}>
+            {foundStability}
+        </div>
+    );
+}

package/src/OpenAPIPath.tsx

@@ -47,7 +47,7 @@ function formatPath(path: string) {
             parts.push(path.slice(lastIndex, offset));
         }
         parts.push(
-            <span key={offset} className="openapi-path-variable">
+            <span key={`offset-${offset}`} className="openapi-path-variable">
                 {match}
             </span>
         );
@@ -61,7 +61,7 @@ function formatPath(path: string) {
 
     const formattedPath = parts.map((part, index) => {
         if (typeof part === 'string') {
-            return <span key={index}>{part}</span>;
+            return <span key={`part-${index}`}>{part}</span>;
         }
         return part;
     });

package/src/OpenAPIRequestBody.tsx

@@ -1,6 +1,6 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import { InteractiveSection } from './InteractiveSection';
-import { OpenAPIRootSchema } from './OpenAPISchema';
+import { OpenAPIRootSchema } from './OpenAPISchemaServer';
 import type { OpenAPIClientContext } from './types';
 import { checkIsReference } from './utils';
 

package/src/OpenAPIResponse.tsx

@@ -1,6 +1,6 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
-import { OpenAPISchemaProperties } from './OpenAPISchema';
+import { OpenAPISchemaProperties } from './OpenAPISchemaServer';
 import type { OpenAPIClientContext } from './types';
 import { parameterToProperty, resolveDescription } from './utils';
 
@@ -29,9 +29,9 @@ export function OpenAPIResponse(props: {
             {headers.length > 0 ? (
                 <OpenAPIDisclosure context={context} label="Headers">
                     <OpenAPISchemaProperties
-                        properties={headers.map(([name, header]) => {
-                            return parameterToProperty({ name, ...header });
-                        })}
+                        properties={headers.map(([name, header]) =>
+                            parameterToProperty({ name, ...header })
+                        )}
                         context={context}
                     />
                 </OpenAPIDisclosure>

package/src/OpenAPIResponses.tsx

@@ -27,10 +27,7 @@ export function OpenAPIResponses(props: {
                         return {
                             id: statusCode,
                             label: (
-                                <div
-                                    className="openapi-response-tab-content"
-                                    key={`response-${statusCode}`}
-                                >
+                                <div className="openapi-response-tab-content">
                                     <span className="openapi-response-statuscode">
                                         {statusCode}
                                     </span>
@@ -47,7 +44,6 @@ export function OpenAPIResponses(props: {
                                 label: contentType,
                                 body: (
                                     <OpenAPIResponse
-                                        key={`$response-${statusCode}-${contentType}`}
                                         response={response}
                                         mediaType={mediaType}
                                         context={context}