@gitbook/react-openapi 1.1.4 → 1.1.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gitbook/react-openapi
 
+## 1.1.5
+
+### Patch Changes
+
+- 886e204: Update OpenAPI operation path design
+
 ## 1.1.4
 
 ### Patch Changes

package/dist/OpenAPICodeSample.jsx

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
+import { ScalarApiButton } from './ScalarApiButton';
 import { StaticSection } from './StaticSection';
 import { codeSampleGenerators } from './code-samples';
 import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
@@ -73,6 +74,7 @@ export function OpenAPICodeSample(props) {
             code: generator.generate(input),
             syntax: generator.syntax,
         }),
+        footer: <OpenAPICodeSampleFooter data={data} context={context}/>,
     }); });
     // Use custom samples if defined
     var customCodeSamples = null;
@@ -92,6 +94,7 @@ export function OpenAPICodeSample(props) {
                     code: sample.source,
                     syntax: sample.lang,
                 }),
+                footer: <OpenAPICodeSampleFooter data={data} context={context}/>,
             }); });
         }
     });
@@ -108,6 +111,21 @@ export function OpenAPICodeSample(props) {
             </StaticSection>
         </OpenAPITabs>);
 }
+function OpenAPICodeSampleFooter(props) {
+    var data = props.data, context = props.context;
+    var method = data.method, path = data.path;
+    var specUrl = context.specUrl;
+    var hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
+    if (hideTryItPanel) {
+        return null;
+    }
+    if (!validateHttpMethod(method)) {
+        return null;
+    }
+    return (<div className="openapi-codesample-footer">
+            <ScalarApiButton method={method} path={path} specUrl={specUrl}/>
+        </div>);
+}
 function getSecurityHeaders(securities) {
     var _a;
     var _b, _c;
@@ -146,3 +164,6 @@ function getSecurityHeaders(securities) {
         }
     }
 }
+function validateHttpMethod(method) {
+    return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
+}

package/dist/OpenAPICopyButton.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonProps } from 'react-aria-components';
+export declare function OpenAPICopyButton(props: ButtonProps & {
+    value: string;
+}): import("react").JSX.Element;

package/dist/OpenAPICopyButton.jsx

@@ -0,0 +1,32 @@
+'use client';
+import { useState } from 'react';
+import { Button, Tooltip, TooltipTrigger } from 'react-aria-components';
+export function OpenAPICopyButton(props) {
+    var value = props.value;
+    var children = props.children, onPress = props.onPress, className = props.className;
+    var _a = useState(false), copied = _a[0], setCopied = _a[1];
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var handleCopy = function () {
+        if (!value)
+            return;
+        navigator.clipboard.writeText(value).then(function () {
+            setIsOpen(true);
+            setCopied(true);
+            setTimeout(function () {
+                setCopied(false);
+            }, 2000);
+        });
+    };
+    return (<TooltipTrigger isOpen={isOpen} onOpenChange={setIsOpen} closeDelay={200} delay={200}>
+            <Button type="button" preventFocusOnPress onPress={function (e) {
+            handleCopy();
+            onPress === null || onPress === void 0 ? void 0 : onPress(e);
+        }} className={"openapi-copy-button ".concat(className)} {...props}>
+                {children}
+            </Button>
+
+            <Tooltip isOpen={isOpen} onOpenChange={setIsOpen} placement="top" offset={4} className="openapi-tooltip">
+                {copied ? 'Copied' : 'Copy to clipboard'}{' '}
+            </Tooltip>
+        </TooltipTrigger>);
+}

package/dist/OpenAPIOperation.jsx

@@ -25,6 +25,7 @@ export function OpenAPIOperation(props) {
                 title: operation.summary,
             })
             : null}
+                <OpenAPIPath data={data} context={context}/>
                 {operation.deprecated && <div className="openapi-deprecated">Deprecated</div>}
             </div>
             <div className="openapi-columns">
@@ -37,7 +38,6 @@ export function OpenAPIOperation(props) {
                             {'.'}
                         </div>) : null}
                     <OpenAPIOperationDescription operation={operation} context={context}/>
-                    <OpenAPIPath data={data} context={context}/>
                     <OpenAPISpec data={data} context={clientContext}/>
                 </div>
                 <div className="openapi-column-preview">

package/dist/OpenAPIPath.d.ts

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 /**
  * Display the path of an operation.
@@ -6,4 +5,4 @@ import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 export declare function OpenAPIPath(props: {
     data: OpenAPIOperationData;
     context: OpenAPIContextProps;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/OpenAPIPath.jsx

@@ -1,47 +1,49 @@
-import { ScalarApiButton } from './ScalarApiButton';
+import { OpenAPICopyButton } from './OpenAPICopyButton';
+import { getDefaultServerURL } from './util/server';
 /**
  * Display the path of an operation.
  */
 export function OpenAPIPath(props) {
-    var data = props.data, context = props.context;
-    var method = data.method, path = data.path;
-    var specUrl = context.specUrl;
-    var hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
+    var data = props.data;
+    var method = data.method, path = data.path, operation = data.operation;
+    var server = getDefaultServerURL(data.servers);
+    var formattedPath = formatPath(path);
     return (<div className="openapi-path">
             <div className={"openapi-method openapi-method-".concat(method)}>{method}</div>
-            <div className="openapi-path-title" data-deprecated={data.operation.deprecated}>
-                <p>{formatPath(path)}</p>
-            </div>
-            {!hideTryItPanel && validateHttpMethod(method) && (<ScalarApiButton method={method} path={path} specUrl={specUrl}/>)}
+
+            <OpenAPICopyButton value={server + path} className="openapi-path-title" data-deprecated={operation.deprecated}>
+                <span className="openapi-path-server">{server}</span>
+                {formattedPath}
+            </OpenAPICopyButton>
         </div>);
 }
-function validateHttpMethod(method) {
-    return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
-}
-// Format the path to highlight placeholders
+/**
+ * Format the path by wrapping placeholders in <span> tags.
+ */
 function formatPath(path) {
     // Matches placeholders like {id}, {userId}, etc.
-    var regex = /\{(\w+)\}/g;
+    var regex = /\{\s*(\w+)\s*\}|:\w+/g;
     var parts = [];
     var lastIndex = 0;
-    // Replace placeholders with <em> tags
-    path.replace(regex, function (match, key, offset) {
-        parts.push(path.slice(lastIndex, offset));
-        parts.push(<em key={key}>{"{".concat(key, "}")}</em>);
+    //Wrap the variables in <span> tags and maintain either {variable} or :variable
+    path.replace(regex, function (match, _, offset) {
+        if (offset > lastIndex) {
+            parts.push(path.slice(lastIndex, offset));
+        }
+        parts.push(<span key={offset} className="openapi-path-variable">
+                {match}
+            </span>);
         lastIndex = offset + match.length;
         return match;
     });
-    // Push remaining text after the last placeholder
-    parts.push(path.slice(lastIndex));
-    // Join parts with separators wrapped in <span>
-    var formattedPath = parts.reduce(function (acc, part, index) {
-        if (typeof part === 'string' && index > 0 && part === '/') {
-            acc.push(<span className="openapi-path-separator" key={"sep-".concat(index)}>
-                        /
-                    </span>);
+    if (lastIndex < path.length) {
+        parts.push(path.slice(lastIndex));
+    }
+    var formattedPath = parts.map(function (part, index) {
+        if (typeof part === 'string') {
+            return <span key={index}>{part}</span>;
         }
-        acc.push(part);
-        return acc;
-    }, []);
-    return <span>{formattedPath}</span>;
+        return part;
+    });
+    return formattedPath;
 }

package/dist/OpenAPIResponseExample.jsx

@@ -1,3 +1,4 @@
+import { Markdown } from './Markdown';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
 import { StaticSection } from './StaticSection';
 import { generateSchemaExample } from './generateSchemaExample';
@@ -32,35 +33,31 @@ export function OpenAPIResponseExample(props) {
         }
         return Number(a) - Number(b);
     });
-    var tabs = responses
-        .map(function (_a) {
+    var tabs = responses.map(function (_a) {
         var key = _a[0], responseObject = _a[1];
         var description = resolveDescription(responseObject);
         if (checkIsReference(responseObject)) {
             return {
                 key: key,
                 label: key,
-                description: description,
                 body: (<OpenAPIExample example={getExampleFromReference(responseObject)} context={context} syntax="json"/>),
+                footer: description ? <Markdown source={description}/> : undefined,
             };
         }
         if (!responseObject.content || Object.keys(responseObject.content).length === 0) {
             return {
                 key: key,
                 label: key,
-                description: description,
                 body: <OpenAPIEmptyResponseExample />,
+                footer: description ? <Markdown source={description}/> : undefined,
             };
         }
         return {
             key: key,
             label: key,
-            description: resolveDescription(responseObject),
             body: <OpenAPIResponse context={context} content={responseObject.content}/>,
+            footer: description ? <Markdown source={description}/> : undefined,
         };
-    })
-        .filter(function (val) {
-        return Boolean(val);
     });
     if (tabs.length === 0) {
         return null;

package/dist/OpenAPITabs.d.ts

@@ -3,7 +3,7 @@ export type TabItem = {
     key: Key;
     label: string;
     body: React.ReactNode;
-    description?: string;
+    footer?: React.ReactNode;
 };
 /**
  * The OpenAPI Tabs wrapper component.

package/dist/OpenAPITabs.jsx

@@ -2,7 +2,6 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';
 import { useEventCallback } from 'usehooks-ts';
-import { Markdown } from './Markdown';
 import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
 var OpenAPITabsContext = createContext(null);
 function useOpenAPITabsContext() {
@@ -105,6 +104,14 @@ export function OpenAPITabsPanels() {
     var key = selectedTab.key.toString();
     return (<TabPanel key={key} id={key} className="openapi-tabs-panel">
             {selectedTab.body}
-            {selectedTab.description ? (<Markdown source={selectedTab.description} className="openapi-tabs-footer"/>) : null}
+            {selectedTab.footer ? (<OpenAPITabsPanelFooter>{selectedTab.footer}</OpenAPITabsPanelFooter>) : null}
         </TabPanel>);
 }
+/**
+ * The OpenAPI Tabs panel footer component.
+ * This component should be used as a child of the OpenAPITabs component.
+ */
+function OpenAPITabsPanelFooter(props) {
+    var children = props.children;
+    return <div className="openapi-tabs-footer">{children}</div>;
+}

package/dist/ScalarApiButton.jsx

@@ -16,10 +16,10 @@ export function ScalarApiButton(props) {
             (_b = (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.openClient) === null || _b === void 0 ? void 0 : _b.call(_a);
             setIsOpen(true);
         }}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" fill="none">
+                Test it
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 12" fill="currentColor">
                     <path stroke="currentColor" strokeWidth="1.5" d="M1 10.05V1.43c0-.2.2-.31.37-.22l7.26 4.08c.17.1.17.33.01.43l-7.26 4.54a.25.25 0 0 1-.38-.21Z"/>
                 </svg>
-                Test it
             </button>
 
             {isOpen &&