@gitbook/react-openapi 0.7.0 → 1.0.0

package/dist/OpenAPITabs.jsx

@@ -0,0 +1,67 @@
+'use client';
+import { createContext, useContext, useMemo, useState } from 'react';
+import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';
+import { Markdown } from './Markdown';
+var OpenAPITabsContext = createContext(null);
+function useOpenAPITabsContext() {
+    var context = useContext(OpenAPITabsContext);
+    if (!context) {
+        throw new Error('OpenAPITabsContext is missing');
+    }
+    return context;
+}
+/**
+ * The OpenAPI Tabs wrapper component.
+ */
+export function OpenAPITabs(props) {
+    var children = props.children, items = props.items;
+    var _a = useState(function () {
+        var firstItem = items[0];
+        if (!firstItem) {
+            throw new Error('OpenAPITabs: at least one tab is required');
+        }
+        return firstItem.key;
+    }), selectedKey = _a[0], setSelectedKey = _a[1];
+    var contextValue = { items: items, selectedKey: selectedKey, setSelectedKey: setSelectedKey };
+    return (<OpenAPITabsContext.Provider value={contextValue}>
+            <Tabs className="openapi-tabs" onSelectionChange={setSelectedKey} selectedKey={selectedKey}>
+                {children}
+            </Tabs>
+        </OpenAPITabsContext.Provider>);
+}
+/**
+ * The OpenAPI Tabs list component.
+ * This component should be used as a child of the OpenAPITabs component.
+ * It renders the list of tabs.
+ */
+export function OpenAPITabsList() {
+    var items = useOpenAPITabsContext().items;
+    return (<TabList className="openapi-tabs-list">
+            {items.map(function (tab) { return (<Tab style={function (_a) {
+                var isFocusVisible = _a.isFocusVisible;
+                return ({
+                    outline: isFocusVisible
+                        ? '2px solid rgb(var(--primary-color-500)/0.4)'
+                        : 'none',
+                });
+            }} className="openapi-tabs-tab" key={"Tab-".concat(tab.key)} id={tab.key}>
+                    {tab.label}
+                </Tab>); })}
+        </TabList>);
+}
+/**
+ * The OpenAPI Tabs panels component.
+ * This component should be used as a child of the OpenAPITabs component.
+ * It renders the content of the selected tab.
+ */
+export function OpenAPITabsPanels() {
+    var _a = useOpenAPITabsContext(), selectedKey = _a.selectedKey, items = _a.items;
+    var tab = useMemo(function () { return items.find(function (tab) { return tab.key === selectedKey; }); }, [items, selectedKey]);
+    if (!tab) {
+        return null;
+    }
+    return (<TabPanel key={"TabPanel-".concat(tab.key)} id={tab.key.toString()} className="openapi-tabs-panel">
+            {tab.body}
+            {tab.description ? (<Markdown source={tab.description} className="openapi-tabs-footer"/>) : null}
+        </TabPanel>);
+}

package/dist/ScalarApiButton.d.ts

@@ -1,5 +1,8 @@
-import React from 'react';
 /**
  * Button which launches the Scalar API Client
  */
-export declare function ScalarApiButton(): React.JSX.Element;
+export declare function ScalarApiButton({ method, path, specUrl, }: {
+    method: string;
+    path: string;
+    specUrl: string;
+}): import("react").JSX.Element;

package/dist/ScalarApiButton.jsx

@@ -0,0 +1,51 @@
+'use client';
+import { ApiClientModalProvider, useApiClientModal } from '@scalar/api-client-react';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useOpenAPIOperationContext } from './OpenAPIOperationContext';
+import { useEventCallback } from 'usehooks-ts';
+/**
+ * Button which launches the Scalar API Client
+ */
+export function ScalarApiButton(_a) {
+    var method = _a.method, path = _a.path, specUrl = _a.specUrl;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var controllerRef = useRef(null);
+    return (<div className="scalar scalar-activate">
+            <button className="scalar-activate-button button" onClick={function () {
+            var _a, _b;
+            (_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">
+                    <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 &&
+            createPortal(<ScalarModal controllerRef={controllerRef} method={method} path={path} specUrl={specUrl}/>, document.body)}
+        </div>);
+}
+function ScalarModal(props) {
+    return (<ApiClientModalProvider configuration={{ spec: { url: props.specUrl } }} initialRequest={{ path: props.path, method: props.method }}>
+            <ScalarModalController method={props.method} path={props.path} controllerRef={props.controllerRef}/>
+        </ApiClientModalProvider>);
+}
+function ScalarModalController(props) {
+    var client = useApiClientModal();
+    var openClient = client === null || client === void 0 ? void 0 : client.open;
+    useImperativeHandle(props.controllerRef, function () { return ({ openClient: openClient ? function () { return openClient(); } : undefined }); }, [openClient]);
+    // Open the client when the component is mounted.
+    var onOpenClient = useOpenAPIOperationContext().onOpenClient;
+    var trackOpening = useEventCallback(function () {
+        onOpenClient({ method: props.method, path: props.path });
+    });
+    useEffect(function () {
+        if (openClient) {
+            openClient();
+            trackOpening();
+        }
+    }, [openClient]);
+    return null;
+}

package/dist/code-samples.d.ts

@@ -11,4 +11,8 @@ interface CodeSampleGenerator {
     generate: (operation: CodeSampleInput) => string;
 }
 export declare const codeSampleGenerators: CodeSampleGenerator[];
+export declare function parseHostAndPath(url: string): {
+    host: string | undefined;
+    path: string;
+};
 export {};

package/dist/code-samples.js

@@ -1,69 +1,134 @@
-export const codeSampleGenerators = [
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { stringifyOpenAPI } from './stringifyOpenAPI';
+export var codeSampleGenerators = [
     {
-        id: 'javascript',
-        label: 'JavaScript',
-        syntax: 'javascript',
-        generate: ({ method, url, headers, body }) => {
-            let code = '';
-            code += `const response = await fetch('${url}', {
-    method: '${method.toUpperCase()}',\n`;
+        id: 'curl',
+        label: 'cURL',
+        syntax: 'bash',
+        generate: function (_a) {
+            var method = _a.method, url = _a.url, headers = _a.headers, body = _a.body;
+            var separator = ' \\\n';
+            var lines = ['curl -L'];
+            if (method.toUpperCase() !== 'GET') {
+                lines.push("--request ".concat(method.toUpperCase()));
+            }
+            lines.push("--url '".concat(url, "'"));
             if (headers) {
-                code += indent(`headers: ${JSON.stringify(headers, null, 2)},\n`, 4);
+                Object.entries(headers).forEach(function (_a) {
+                    var key = _a[0], value = _a[1];
+                    lines.push("--header '".concat(key, ": ").concat(value, "'"));
+                });
             }
-            if (body) {
-                code += indent(`body: JSON.stringify(${JSON.stringify(body, null, 2)}),\n`, 4);
+            if (body && Object.keys(body).length > 0) {
+                lines.push("--data '".concat(stringifyOpenAPI(body), "'"));
             }
-            code += `});\n`;
-            code += `const data = await response.json();`;
-            return code;
+            return lines.map(function (line, index) { return (index > 0 ? indent(line, 2) : line); }).join(separator);
         },
     },
     {
-        id: 'curl',
-        label: 'Curl',
-        syntax: 'bash',
-        generate: ({ method, url, headers, body }) => {
-            const separator = ' \\\n';
-            const lines = ['curl -L'];
-            if (method.toUpperCase() !== 'GET') {
-                lines.push(`-X ${method.toUpperCase()}`);
-            }
+        id: 'javascript',
+        label: 'JavaScript',
+        syntax: 'javascript',
+        generate: function (_a) {
+            var method = _a.method, url = _a.url, headers = _a.headers, body = _a.body;
+            var code = '';
+            code += "const response = await fetch('".concat(url, "', {\n    method: '").concat(method.toUpperCase(), "',\n");
             if (headers) {
-                Object.entries(headers).forEach(([key, value]) => {
-                    lines.push(`-H '${key}: ${value}'`);
-                });
+                code += indent("headers: ".concat(stringifyOpenAPI(headers, null, 2), ",\n"), 4);
             }
-            lines.push(`'${url}'`);
             if (body) {
-                lines.push(`-d '${JSON.stringify(body)}'`);
+                code += indent("body: JSON.stringify(".concat(stringifyOpenAPI(body, null, 2), "),\n"), 4);
             }
-            return lines.map((line, index) => (index > 0 ? indent(line, 2) : line)).join(separator);
+            code += "});\n";
+            code += "const data = await response.json();";
+            return code;
         },
     },
     {
         id: 'python',
         label: 'Python',
         syntax: 'python',
-        generate: ({ method, url, headers, body }) => {
-            let code = 'import requests\n\n';
-            code += `response = requests.${method.toLowerCase()}(\n`;
-            code += indent(`"${url}",\n`, 4);
+        generate: function (_a) {
+            var method = _a.method, url = _a.url, headers = _a.headers, body = _a.body;
+            var code = 'import requests\n\n';
+            code += "response = requests.".concat(method.toLowerCase(), "(\n");
+            code += indent("\"".concat(url, "\",\n"), 4);
             if (headers) {
-                code += indent(`headers=${JSON.stringify(headers)},\n`, 4);
+                code += indent("headers=".concat(stringifyOpenAPI(headers), ",\n"), 4);
             }
             if (body) {
-                code += indent(`json=${JSON.stringify(body)}\n`, 4);
+                code += indent("json=".concat(stringifyOpenAPI(body), "\n"), 4);
             }
             code += ')\n';
-            code += `data = response.json()`;
+            code += "data = response.json()";
             return code;
         },
     },
+    {
+        id: 'http',
+        label: 'HTTP',
+        syntax: 'bash',
+        generate: function (_a) {
+            var method = _a.method, url = _a.url, _b = _a.headers, headers = _b === void 0 ? {} : _b, body = _a.body;
+            var _c = parseHostAndPath(url), host = _c.host, path = _c.path;
+            if (body) {
+                // if we had a body add a content length header
+                var bodyContent = body ? stringifyOpenAPI(body) : '';
+                // handle unicode chars with a text encoder
+                var encoder = new TextEncoder();
+                headers = __assign(__assign({}, headers), { 'Content-Length': encoder.encode(bodyContent).length.toString() });
+            }
+            if (!headers.hasOwnProperty('Accept')) {
+                headers.Accept = '*/*';
+            }
+            var headerString = headers
+                ? Object.entries(headers)
+                    .map(function (_a) {
+                    var key = _a[0], value = _a[1];
+                    return key.toLowerCase() !== 'host' ? "".concat(key, ": ").concat(value) : "";
+                })
+                    .join('\n') + '\n'
+                : '';
+            var bodyString = body ? "\n".concat(stringifyOpenAPI(body, null, 2)) : '';
+            var httpRequest = "".concat(method.toUpperCase(), " ").concat(decodeURI(path), " HTTP/1.1\nHost: ").concat(host, "\n").concat(headerString).concat(bodyString);
+            return httpRequest;
+        },
+    },
 ];
 function indent(code, spaces) {
-    const indent = ' '.repeat(spaces);
+    var indent = ' '.repeat(spaces);
     return code
         .split('\n')
-        .map((line) => (line ? indent + line : ''))
+        .map(function (line) { return (line ? indent + line : ''); })
         .join('\n');
 }
+export function parseHostAndPath(url) {
+    try {
+        var urlObj = new URL(url);
+        var path = urlObj.pathname || '/';
+        return { host: urlObj.host, path: path };
+    }
+    catch (e) {
+        // If the URL was invalid do our best to parse the URL.
+        // Check for the protocol part and pull it off to grab the host
+        var splitted = url.split('//');
+        var fullUrl = splitted[1] ? splitted[1] : url;
+        // separate paths from the first element (host)
+        var parts = fullUrl.split('/');
+        // pull off the host (mutates)
+        var host = parts.shift();
+        // add a leading slash and join the paths again
+        var path = '/' + parts.join('/');
+        return { host: host, path: path };
+    }
+}

package/dist/fetchOpenAPIOperation.d.ts

@@ -1,55 +1,21 @@
 import { toJSON, fromJSON } from 'flatted';
-import { OpenAPIV3 } from 'openapi-types';
-import { OpenAPIFetcher } from './types';
+import { type OpenAPICustomOperationProperties, type OpenAPICustomSpecProperties, type OpenAPIV3xDocument, type Filesystem, type OpenAPIV3 } from '@gitbook/openapi-parser';
+export interface OpenAPIFetcher {
+    /**
+     * Fetch an OpenAPI file by its URL. It should return a fully parsed OpenAPI v3 document.
+     */
+    fetch: (url: string) => Promise<Filesystem<OpenAPIV3xDocument>>;
+}
 export interface OpenAPIOperationData extends OpenAPICustomSpecProperties {
     path: string;
     method: string;
     /** Servers to be used for this operation */
     servers: OpenAPIV3.ServerObject[];
     /** Spec of the operation */
-    operation: OpenAPIV3.OperationObject & OpenAPICustomOperationProperties;
+    operation: OpenAPIV3.OperationObject<OpenAPICustomOperationProperties>;
     /** Securities that should be used for this operation */
     securities: [string, OpenAPIV3.SecuritySchemeObject][];
 }
-/**
- * Custom properties that can be defined at the entire spec level.
- */
-export interface OpenAPICustomSpecProperties {
-    /**
-     * If `true`, code samples will not be displayed.
-     * This option can be used to hide code samples for the entire spec.
-     */
-    'x-codeSamples'?: boolean;
-    /**
-     * If `true`, the "Try it" button will not be displayed.
-     * This option can be used to hide code samples for the entire spec.
-     */
-    'x-hideTryItPanel'?: boolean;
-}
-/**
- * Custom properties that can be defined at the operation level.
- * These properties are not part of the OpenAPI spec.
- */
-export interface OpenAPICustomOperationProperties {
-    'x-code-samples'?: OpenAPICustomCodeSample[];
-    'x-codeSamples'?: OpenAPICustomCodeSample[] | false;
-    'x-custom-examples'?: OpenAPICustomCodeSample[];
-    /**
-     * If `true`, the "Try it" button will not be displayed.
-     * https://redocly.com/docs/api-reference-docs/specification-extensions/x-hidetryitpanel/
-     */
-    'x-hideTryItPanel'?: boolean;
-}
-/**
- * Custom code samples that can be defined at the operation level.
- * It follows the spec defined by Redocly.
- * https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/
- */
-export interface OpenAPICustomCodeSample {
-    lang: string;
-    label: string;
-    source: string;
-}
 export { toJSON, fromJSON };
 /**
  * Resolve an OpenAPI operation in a file and compile it to a more usable format.
@@ -58,15 +24,4 @@ export declare function fetchOpenAPIOperation(input: {
     url: string;
     path: string;
     method: string;
-}, rawFetcher: OpenAPIFetcher): Promise<OpenAPIOperationData | null>;
-/**
- * Parse a raw string into an OpenAPI document.
- * It will also convert Swagger 2.0 to OpenAPI 3.0.
- * It can throw an `OpenAPIFetchError` if the document is invalid.
- */
-export declare function parseOpenAPIV3(url: string, text: string): Promise<OpenAPIV3.Document>;
-export declare class OpenAPIFetchError extends Error {
-    readonly url: string;
-    name: string;
-    constructor(message: string, url: string);
-}
+}, fetcher: OpenAPIFetcher): Promise<OpenAPIOperationData | null>;