@gitbook/react-openapi 1.5.1 → 1.5.2

package/dist/OpenAPIOperation.d.ts

@@ -0,0 +1,15 @@
+import { OpenAPIContextInput } from "./context.js";
+import { OpenAPIOperationData } from "./types.js";
+import * as react0 from "react";
+
+//#region src/OpenAPIOperation.d.ts
+/**
+ * Display an interactive OpenAPI operation.
+ */
+declare function OpenAPIOperation(props: {
+  className?: string;
+  data: OpenAPIOperationData;
+  context: OpenAPIContextInput;
+}): react0.JSX.Element;
+//#endregion
+export { OpenAPIOperation };

package/dist/OpenAPIOperation.js

@@ -0,0 +1,30 @@
+import { resolveOpenAPIContext } from "./context.js";
+import { OpenAPICodeSample } from "./OpenAPICodeSample.js";
+import { OpenAPIResponseExample } from "./OpenAPIResponseExample.js";
+import { OpenAPIColumnSpec } from "./common/OpenAPIColumnSpec.js";
+import { OpenAPISummary } from "./common/OpenAPISummary.js";
+import clsx from "classnames";
+
+//#region src/OpenAPIOperation.tsx
+/**
+* Display an interactive OpenAPI operation.
+*/
+function OpenAPIOperation(props) {
+	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>;
+}
+
+//#endregion
+export { OpenAPIOperation };

package/dist/OpenAPIOperationContext.d.ts

@@ -0,0 +1,20 @@
+import * as react1 from "react";
+
+//#region src/OpenAPIOperationContext.d.ts
+interface OpenAPIOperationPointer {
+  path: string;
+  method: string;
+}
+interface OpenAPIOperationContextValue {
+  onOpenClient: (pointer: OpenAPIOperationPointer) => void;
+}
+/**
+ * Provider for the OpenAPIOperationContext.
+ */
+declare function OpenAPIOperationContextProvider(props: React.PropsWithChildren<Partial<OpenAPIOperationContextValue>>): react1.JSX.Element;
+/**
+ * Hook to access the OpenAPIOperationContext.
+ */
+declare function useOpenAPIOperationContext(): OpenAPIOperationContextValue;
+//#endregion
+export { OpenAPIOperationContextProvider, useOpenAPIOperationContext };

package/dist/OpenAPIOperationContext.js

@@ -0,0 +1,30 @@
+'use client';
+
+
+import { createContext, useContext, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+
+//#region src/OpenAPIOperationContext.tsx
+const OpenAPIOperationContext = createContext({ onOpenClient: () => {} });
+/**
+* Provider for the OpenAPIOperationContext.
+*/
+function OpenAPIOperationContextProvider(props) {
+	const { children } = props;
+	const onOpenClient = useEventCallback((pointer) => {
+		props.onOpenClient?.(pointer);
+	});
+	const value = useMemo(() => ({ onOpenClient }), [onOpenClient]);
+	return <OpenAPIOperationContext.Provider value={value}>
+            {children}
+        </OpenAPIOperationContext.Provider>;
+}
+/**
+* Hook to access the OpenAPIOperationContext.
+*/
+function useOpenAPIOperationContext() {
+	return useContext(OpenAPIOperationContext);
+}
+
+//#endregion
+export { OpenAPIOperationContextProvider, useOpenAPIOperationContext };

package/dist/OpenAPIPath.js

@@ -0,0 +1,51 @@
+import { OpenAPICopyButton } from "./OpenAPICopyButton.js";
+import { getOpenAPIClientContext } from "./context.js";
+import { getDefaultServerURL } from "./util/server.js";
+
+//#region src/OpenAPIPath.tsx
+/**
+* Display the path of an operation.
+*/
+function OpenAPIPath(props) {
+	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) {
+	const regex = /\{\s*(\w+)\s*\}|:\w+/g;
+	const parts = [];
+	let lastIndex = 0;
+	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));
+	return parts.map((part, index) => {
+		if (typeof part === "string") return <span key={`part-${index}`}>{part}</span>;
+		return part;
+	});
+}
+
+//#endregion
+export { OpenAPIPath };

package/dist/OpenAPIPrefillContextProvider.d.ts

@@ -0,0 +1,26 @@
+import * as React$1 from "react";
+
+//#region src/OpenAPIPrefillContextProvider.d.ts
+
+/**
+ * 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.
+ */
+type PrefillInputContextData = Record<string, unknown>;
+/**
+ * Context value is function that returns prefill data.
+ */
+type PrefillContextValue = () => PrefillInputContextData | null;
+/**
+ * Provide context to help prefill dynamic info like visitor data in OpenAPI blocks.
+ */
+declare function OpenAPIPrefillContextProvider(props: React$1.PropsWithChildren<{
+  getPrefillInputContextData: () => PrefillInputContextData | null;
+}>): React$1.JSX.Element;
+/**
+ * Hook to access the prefill context function.
+ */
+declare function useOpenAPIPrefillContext(): PrefillContextValue;
+//#endregion
+export { OpenAPIPrefillContextProvider, PrefillInputContextData, useOpenAPIPrefillContext };

package/dist/OpenAPIPrefillContextProvider.js

@@ -0,0 +1,25 @@
+'use client';
+
+
+import * as React$1 from "react";
+
+//#region src/OpenAPIPrefillContextProvider.tsx
+const OpenAPIPrefillContext = React$1.createContext(null);
+/**
+* Provide context to help prefill dynamic info like visitor data in OpenAPI blocks.
+*/
+function OpenAPIPrefillContextProvider(props) {
+	const { getPrefillInputContextData, children } = props;
+	return <OpenAPIPrefillContext.Provider value={getPrefillInputContextData}>
+            {children}
+        </OpenAPIPrefillContext.Provider>;
+}
+/**
+* Hook to access the prefill context function.
+*/
+function useOpenAPIPrefillContext() {
+	return React$1.useContext(OpenAPIPrefillContext) ?? (() => null);
+}
+
+//#endregion
+export { OpenAPIPrefillContextProvider, useOpenAPIPrefillContext };

package/dist/OpenAPIRequestBody.js

@@ -0,0 +1,28 @@
+import { t } from "./translate.js";
+import { checkIsReference, createStateKey } from "./utils.js";
+import { OpenAPIRootSchema } from "./OpenAPISchemaServer.js";
+import { InteractiveSection } from "./InteractiveSection.js";
+import { OpenAPIRequestBodyHeaderType } from "./OpenAPIRequestBodyHeaderType.js";
+
+//#region src/OpenAPIRequestBody.tsx
+/**
+* Display an interactive request body.
+*/
+function OpenAPIRequestBody(props) {
+	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} />
+		};
+	})} />;
+}
+
+//#endregion
+export { OpenAPIRequestBody };

package/dist/OpenAPIRequestBodyHeaderType.js

@@ -0,0 +1,23 @@
+'use client';
+
+
+import { getSchemaTitle } from "./utils.js";
+import { useSelectState } from "./OpenAPISelect.js";
+
+//#region src/OpenAPIRequestBodyHeaderType.tsx
+/**
+* Display the type of a request body. It only displays the type if the selected content is an array.
+*/
+function OpenAPIRequestBodyHeaderType(props) {
+	const { requestBody, stateKey } = props;
+	const content = requestBody.content ?? {};
+	const state = useSelectState(stateKey, Object.keys(content)[0]);
+	const selectedContentMediaType = Object.entries(content).find(([contentType]) => contentType === state.key)?.[1];
+	if (!selectedContentMediaType || !selectedContentMediaType.schema?.type || selectedContentMediaType.schema.type !== "array") return null;
+	return <span className="openapi-requestbody-header-type">
+            {`${getSchemaTitle(selectedContentMediaType.schema)}`}
+        </span>;
+}
+
+//#endregion
+export { OpenAPIRequestBodyHeaderType };

package/dist/OpenAPIResponse.js

@@ -0,0 +1,39 @@
+import { tString } from "./translate.js";
+import { OpenAPIDisclosure } from "./OpenAPIDisclosure.js";
+import { parameterToProperty, resolveDescription } from "./utils.js";
+import { OpenAPISchemaPresentation } from "./OpenAPISchema.js";
+import { OpenAPISchemaProperties } from "./OpenAPISchemaServer.js";
+
+//#region src/OpenAPIResponse.tsx
+/**
+* Display an interactive response body.
+*/
+function OpenAPIResponse(props) {
+	const { response, context, mediaType } = props;
+	const headers = Object.entries(response.headers ?? {}).map(([name, header]) => [name, header ?? {}]);
+	const content = Object.entries(mediaType?.schema ?? {});
+	const description = resolveDescription(response);
+	if (content.length === 0 && !description && headers.length === 0) return null;
+	return <div className="openapi-response-body">
+            {headers.length > 0 ? <OpenAPIDisclosure header={<OpenAPISchemaPresentation context={context} property={{
+		propertyName: tString(context.translation, "headers"),
+		schema: { type: "object" },
+		required: null
+	}} />} icon={context.icons.plus} label={(isExpanded) => tString(context.translation, isExpanded ? "hide" : "show", tString(context.translation, headers.length === 1 ? "header" : "headers"))}>
+                    <OpenAPISchemaProperties properties={headers.map(([name, header]) => parameterToProperty({
+		name,
+		...header
+	}))} context={context} />
+                </OpenAPIDisclosure> : null}
+            {mediaType?.schema && <div className="openapi-responsebody">
+                    <OpenAPISchemaProperties id={`response-${context.blockKey}`} properties={[{
+		schema: mediaType.schema,
+		propertyName: tString(context.translation, "response"),
+		required: null
+	}]} context={context} />
+                </div>}
+        </div>;
+}
+
+//#endregion
+export { OpenAPIResponse };

package/dist/OpenAPIResponseExample.js

@@ -0,0 +1,75 @@
+import { OpenAPIEmptyExample, OpenAPIExample } from "./OpenAPIExample.js";
+import { Markdown } from "./Markdown.js";
+import { checkIsReference, createStateKey, getStatusCodeDefaultLabel, resolveDescription } from "./utils.js";
+import { getOpenAPIClientContext } from "./context.js";
+import { getExampleFromReference, getExamples } from "./util/example.js";
+import { OpenAPIMediaTypeContent } from "./OpenAPIMediaType.js";
+import { OpenAPIResponseExampleContent } from "./OpenAPIResponseExampleContent.js";
+
+//#region src/OpenAPIResponseExample.tsx
+/**
+* Display an example of the response content.
+*/
+function OpenAPIResponseExample(props) {
+	const { data, context } = props;
+	if (!data.operation.responses) return null;
+	const responses = Object.entries(data.operation.responses);
+	responses.sort(([a], [b]) => {
+		if (a === "default") return 1;
+		if (b === "default") return -1;
+		if (a === "200") return -1;
+		if (b === "200") return 1;
+		return Number(a) - Number(b);
+	});
+	const tabs = responses.filter(([_, responseObject]) => responseObject && typeof responseObject === "object" && !responseObject["x-hideSample"]).map(([key, responseObject]) => {
+		const description = resolveDescription(responseObject);
+		const label = description ? <Markdown key={`response-description-${key}`} source={description} /> : getStatusCodeDefaultLabel(key, context);
+		if (checkIsReference(responseObject)) return {
+			key,
+			label,
+			statusCode: key,
+			body: <OpenAPIExample example={getExampleFromReference(responseObject, context)} context={context} syntax="json" />
+		};
+		if (!responseObject.content || Object.keys(responseObject.content).length === 0) return {
+			key,
+			label,
+			statusCode: key,
+			body: <OpenAPIEmptyExample context={context} />
+		};
+		return {
+			key,
+			label,
+			statusCode: key,
+			body: <OpenAPIResponse context={context} content={responseObject.content} />
+		};
+	});
+	if (tabs.length === 0) return null;
+	return <OpenAPIResponseExampleContent selectIcon={context.icons.chevronDown} blockKey={context.blockKey} items={tabs} />;
+}
+function OpenAPIResponse(props) {
+	const { context, content } = props;
+	const entries = Object.entries(content);
+	if (!entries[0]) throw new Error("One media type is required");
+	const tabs = entries.map((entry) => {
+		const [mediaType, mediaTypeObject] = entry;
+		if (!mediaTypeObject) return {
+			key: mediaType,
+			label: mediaType,
+			body: <OpenAPIEmptyExample context={context} />
+		};
+		return {
+			key: mediaType,
+			label: mediaType,
+			body: <></>,
+			examples: getExamples({
+				mediaTypeObject,
+				mediaType,
+				context
+			})
+		};
+	});
+	return <OpenAPIMediaTypeContent selectIcon={context.icons.chevronDown} stateKey={createStateKey("response-media-types", context.blockKey)} items={tabs} context={getOpenAPIClientContext(context)} />;
+}
+
+//#endregion
+export { OpenAPIResponseExample };

package/dist/OpenAPIResponseExampleContent.js

@@ -0,0 +1,61 @@
+'use client';
+
+
+import { createStateKey, getStatusCodeClassName } from "./utils.js";
+import { StaticSection } from "./StaticSection.js";
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+import clsx from "classnames";
+
+//#region src/OpenAPIResponseExampleContent.tsx
+/**
+* Get the state of the response examples select.
+*/
+function useResponseExamplesState(blockKey, initialKey = "default") {
+	return useSelectState(getResponseExampleStateKey(blockKey), initialKey);
+}
+function OpenAPIResponseExampleContent(props) {
+	const { blockKey, items, selectIcon } = props;
+	return <StaticSection header={<OpenAPIResponseExampleHeader selectIcon={selectIcon} blockKey={blockKey} items={items} />} className="openapi-response-examples">
+            <OpenAPIResponseExampleBody blockKey={blockKey} items={items} />
+        </StaticSection>;
+}
+function OpenAPIResponseExampleHeader(props) {
+	const { items, blockKey, selectIcon } = props;
+	if (items.length === 1) {
+		const item = items[0];
+		if (!item) return null;
+		return <span className="openapi-response-examples-statuscode-title">
+                <OpenAPIResponseExampleItem item={item} />
+            </span>;
+	}
+	return <OpenAPISelect items={items} icon={selectIcon} stateKey={getResponseExampleStateKey(blockKey)} placement="bottom start">
+            {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                    <OpenAPIResponseExampleItem item={item} />
+                </OpenAPISelectItem>)}
+        </OpenAPISelect>;
+}
+function OpenAPIResponseExampleItem(props) {
+	const { item } = props;
+	return <>
+            <span className={clsx("openapi-statuscode", `openapi-statuscode-${getStatusCodeClassName(item.statusCode)}`, "openapi-response-examples-statuscode")}>
+                {item.statusCode}
+            </span>
+            <span className="openapi-response-examples-statuscode-label">{item.label}</span>
+        </>;
+}
+function OpenAPIResponseExampleBody(props) {
+	const { blockKey, items } = props;
+	const state = useResponseExamplesState(blockKey, items[0]?.key);
+	const selectedItem = items.find((item) => item.key === state.key) ?? items[0];
+	if (!selectedItem) return null;
+	return <div className="openapi-response-examples-panel">{selectedItem.body}</div>;
+}
+/**
+* Return the state key for the response examples.
+*/
+function getResponseExampleStateKey(blockKey) {
+	return createStateKey("openapi-responses", blockKey);
+}
+
+//#endregion
+export { OpenAPIResponseExampleContent, useResponseExamplesState };

package/dist/OpenAPIResponses.js

@@ -0,0 +1,61 @@
+'use client';
+
+
+import { t } from "./translate.js";
+import { Markdown } from "./Markdown.js";
+import { createStateKey, getStatusCodeClassName, getStatusCodeDefaultLabel, resolveDescription } from "./utils.js";
+import { StaticSection } from "./StaticSection.js";
+import { useResponseExamplesState } from "./OpenAPIResponseExampleContent.js";
+import { OpenAPIDisclosureGroup } from "./OpenAPIDisclosureGroup.js";
+import { OpenAPIResponse } from "./OpenAPIResponse.js";
+import clsx from "classnames";
+
+//#region src/OpenAPIResponses.tsx
+/**
+* Display an interactive response body.
+*/
+function OpenAPIResponses(props) {
+	const { responses, context } = props;
+	const groups = Object.entries(responses).filter(([_, response]) => response && typeof response === "object").map(([statusCode, response]) => {
+		const tabs = (() => {
+			if ((!response.content || !Object.keys(response.content).length) && response.headers && Object.keys(response.headers).length) return [{
+				key: "default",
+				label: "",
+				body: <OpenAPIResponse response={response} mediaType={{}} context={context} />
+			}];
+			if (!response.content) return [{
+				key: "default",
+				label: "",
+				body: <pre className="openapi-example-empty">
+                                    <p>{t(context.translation, "no_content")}</p>
+                                </pre>
+			}];
+			return Object.entries(response.content ?? {}).map(([contentType, mediaType]) => ({
+				key: contentType,
+				label: contentType,
+				body: <OpenAPIResponse response={response} mediaType={mediaType} context={context} />
+			}));
+		})();
+		const description = resolveDescription(response);
+		return {
+			key: statusCode,
+			label: <div className="openapi-response-tab-content">
+                        <span className={clsx("openapi-statuscode", `openapi-statuscode-${getStatusCodeClassName(statusCode)}`)}>
+                            {statusCode}
+                        </span>
+                        {description ? <Markdown source={description} className="openapi-response-description" /> : getStatusCodeDefaultLabel(statusCode, context)}
+                    </div>,
+			tabs
+		};
+	});
+	const state = useResponseExamplesState(context.blockKey, groups[0]?.key);
+	return <StaticSection header={t(context.translation, "responses")} className="openapi-responses">
+            <OpenAPIDisclosureGroup icon={context.icons.chevronRight} expandedKeys={state.key ? new Set([state.key]) : /* @__PURE__ */ new Set()} onExpandedChange={(keys) => {
+		const key = keys.values().next().value ?? null;
+		state.setKey(key);
+	}} groups={groups} selectIcon={context.icons.chevronDown} selectStateKey={createStateKey("response-media-types", context.blockKey)} />
+        </StaticSection>;
+}
+
+//#endregion
+export { OpenAPIResponses };