@gitbook/react-openapi 1.1.5 → 1.1.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @gitbook/react-openapi
 
+## 1.1.6
+
+### Patch Changes
+
+- 6eae764: Support body examples
+- 7212973: Update scalar
+- d2facb2: Mark properties as optional if not required
+- 73e2b47: Fix write only properties in request example
+- 70be2c6: Stringify default value
+- fc00b51: Remove default value in generateSchemaExample
+- a84b06b: Update resolveDescription and add minItems/maxItems
+- Updated dependencies [48c18c0]
+- Updated dependencies [7212973]
+  - @gitbook/openapi-parser@2.1.1
+
 ## 1.1.5
 
 ### Patch Changes

package/dist/OpenAPICodeSample.d.ts

@@ -1,3 +1,4 @@
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 /**
  * Display code samples to execute the operation.
@@ -7,3 +8,11 @@ export declare function OpenAPICodeSample(props: {
     data: OpenAPIOperationData;
     context: OpenAPIContextProps;
 }): import("react").JSX.Element | null;
+export interface MediaTypeRenderer {
+    mediaType: string;
+    element: React.ReactNode;
+    examples: Array<{
+        example: OpenAPIV3.ExampleObject;
+        element: React.ReactNode;
+    }>;
+}

package/dist/OpenAPICodeSample.jsx

@@ -9,20 +9,47 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { OpenAPIMediaTypeExamplesBody, OpenAPIMediaTypeExamplesSelector, } from './OpenAPICodeSampleInteractive';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
 import { ScalarApiButton } from './ScalarApiButton';
 import { StaticSection } from './StaticSection';
 import { codeSampleGenerators } from './code-samples';
-import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
+import { generateMediaTypeExamples, generateSchemaExample } from './generateSchemaExample';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { getDefaultServerURL } from './util/server';
 import { checkIsReference, createStateKey } from './utils';
+var CUSTOM_CODE_SAMPLES_KEYS = ['x-custom-examples', 'x-code-samples', 'x-codeSamples'];
 /**
  * Display code samples to execute the operation.
  * It supports the Redocly custom syntax as well (https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/)
  */
 export function OpenAPICodeSample(props) {
-    var _a;
+    var data = props.data;
+    // If code samples are disabled at operation level, we don't display the code samples.
+    if (data.operation['x-codeSamples'] === false) {
+        return null;
+    }
+    var customCodeSamples = getCustomCodeSamples(props);
+    // If code samples are disabled at the top-level and not custom code samples are defined,
+    // we don't display the code samples.
+    if (data['x-codeSamples'] === false && !customCodeSamples) {
+        return null;
+    }
+    var samples = customCodeSamples !== null && customCodeSamples !== void 0 ? customCodeSamples : generateCodeSamples(props);
+    if (samples.length === 0) {
+        return null;
+    }
+    return (<OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
+            <StaticSection header={<OpenAPITabsList />} className="openapi-codesample">
+                <OpenAPITabsPanels />
+            </StaticSection>
+        </OpenAPITabs>);
+}
+/**
+ * Generate code samples for the operation.
+ */
+function generateCodeSamples(props) {
+    var _a, _b;
     var data = props.data, context = props.context;
     var searchParams = new URLSearchParams();
     var headersObject = {};
@@ -51,34 +78,92 @@ export function OpenAPICodeSample(props) {
     var requestBody = !checkIsReference(data.operation.requestBody)
         ? data.operation.requestBody
         : undefined;
-    var requestBodyContentEntries = (requestBody === null || requestBody === void 0 ? void 0 : requestBody.content)
-        ? Object.entries(requestBody.content)
-        : undefined;
-    var requestBodyContent = requestBodyContentEntries === null || requestBodyContentEntries === void 0 ? void 0 : requestBodyContentEntries[0];
-    var input = {
-        url: getDefaultServerURL(data.servers) +
-            data.path +
-            (searchParams.size ? "?".concat(searchParams.toString()) : ''),
-        method: data.method,
-        body: requestBodyContent ? generateMediaTypeExample(requestBodyContent[1]) : undefined,
-        headers: __assign(__assign(__assign({}, getSecurityHeaders(data.securities)), headersObject), (requestBodyContent
-            ? {
-                'Content-Type': requestBodyContent[0],
-            }
-            : undefined)),
-    };
-    var autoCodeSamples = codeSampleGenerators.map(function (generator) { return ({
-        key: "default-".concat(generator.id),
-        label: generator.label,
-        body: context.renderCodeBlock({
-            code: generator.generate(input),
-            syntax: generator.syntax,
-        }),
-        footer: <OpenAPICodeSampleFooter data={data} context={context}/>,
-    }); });
-    // Use custom samples if defined
+    var url = getDefaultServerURL(data.servers) +
+        data.path +
+        (searchParams.size ? "?".concat(searchParams.toString()) : '');
+    var genericHeaders = __assign(__assign({}, getSecurityHeaders(data.securities)), headersObject);
+    var mediaTypeRendererFactories = Object.entries((_b = requestBody === null || requestBody === void 0 ? void 0 : requestBody.content) !== null && _b !== void 0 ? _b : {}).map(function (_a) {
+        var mediaType = _a[0], mediaTypeObject = _a[1];
+        return function (generator) {
+            var mediaTypeHeaders = __assign(__assign({}, genericHeaders), { 'Content-Type': mediaType });
+            return {
+                mediaType: mediaType,
+                element: context.renderCodeBlock({
+                    code: generator.generate({
+                        url: url,
+                        method: data.method,
+                        body: undefined,
+                        headers: mediaTypeHeaders,
+                    }),
+                    syntax: generator.syntax,
+                }),
+                examples: generateMediaTypeExamples(mediaTypeObject, {
+                    mode: 'write',
+                }).map(function (example) { return ({
+                    example: example,
+                    element: context.renderCodeBlock({
+                        code: generator.generate({
+                            url: url,
+                            method: data.method,
+                            body: example.value,
+                            headers: mediaTypeHeaders,
+                        }),
+                        syntax: generator.syntax,
+                    }),
+                }); }),
+            };
+        };
+    });
+    return codeSampleGenerators.map(function (generator) {
+        if (mediaTypeRendererFactories.length > 0) {
+            var renderers = mediaTypeRendererFactories.map(function (generate) { return generate(generator); });
+            return {
+                key: "default-".concat(generator.id),
+                label: generator.label,
+                body: <OpenAPIMediaTypeExamplesBody data={data} renderers={renderers}/>,
+                footer: (<OpenAPICodeSampleFooter renderers={renderers} data={data} context={context}/>),
+            };
+        }
+        return {
+            key: "default-".concat(generator.id),
+            label: generator.label,
+            body: context.renderCodeBlock({
+                code: generator.generate({
+                    url: url,
+                    method: data.method,
+                    body: undefined,
+                    headers: genericHeaders,
+                }),
+                syntax: generator.syntax,
+            }),
+            footer: <OpenAPICodeSampleFooter data={data} renderers={[]} context={context}/>,
+        };
+    });
+}
+function OpenAPICodeSampleFooter(props) {
+    var data = props.data, context = props.context, renderers = props.renderers;
+    var method = data.method, path = data.path;
+    var specUrl = context.specUrl;
+    var hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
+    var hasMediaTypes = renderers.length > 0;
+    if (hideTryItPanel && !hasMediaTypes) {
+        return null;
+    }
+    if (!validateHttpMethod(method)) {
+        return null;
+    }
+    return (<div className="openapi-codesample-footer">
+            {hasMediaTypes ? (<OpenAPIMediaTypeExamplesSelector data={data} renderers={renderers}/>) : (<span />)}
+            {!hideTryItPanel && <ScalarApiButton method={method} path={path} specUrl={specUrl}/>}
+        </div>);
+}
+/**
+ * Get custom code samples for the operation.
+ */
+function getCustomCodeSamples(props) {
+    var data = props.data, context = props.context;
     var customCodeSamples = null;
-    ['x-custom-examples', 'x-code-samples', 'x-codeSamples'].forEach(function (key) {
+    CUSTOM_CODE_SAMPLES_KEYS.forEach(function (key) {
         var customSamples = data.operation[key];
         if (customSamples && Array.isArray(customSamples)) {
             customCodeSamples = customSamples
@@ -88,43 +173,17 @@ export function OpenAPICodeSample(props) {
                     typeof sample.lang === 'string');
             })
                 .map(function (sample, index) { return ({
-                key: "redocly-".concat(sample.lang, "-").concat(index),
+                key: "custom-sample-".concat(sample.lang, "-").concat(index),
                 label: sample.label,
                 body: context.renderCodeBlock({
                     code: sample.source,
                     syntax: sample.lang,
                 }),
-                footer: <OpenAPICodeSampleFooter data={data} context={context}/>,
+                footer: (<OpenAPICodeSampleFooter renderers={[]} data={data} context={context}/>),
             }); });
         }
     });
-    // Code samples can be disabled at the top-level or at the operation level
-    // If code samples are defined at the operation level, it will override the top-level setting
-    var codeSamplesDisabled = data['x-codeSamples'] === false || data.operation['x-codeSamples'] === false;
-    var samples = customCodeSamples !== null && customCodeSamples !== void 0 ? customCodeSamples : (!codeSamplesDisabled ? autoCodeSamples : []);
-    if (samples.length === 0) {
-        return null;
-    }
-    return (<OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
-            <StaticSection header={<OpenAPITabsList />} className="openapi-codesample">
-                <OpenAPITabsPanels />
-            </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>);
+    return customCodeSamples;
 }
 function getSecurityHeaders(securities) {
     var _a;

package/dist/OpenAPICodeSampleInteractive.d.ts

@@ -0,0 +1,10 @@
+import type { MediaTypeRenderer } from './OpenAPICodeSample';
+import type { OpenAPIOperationData } from './types';
+export declare function OpenAPIMediaTypeExamplesSelector(props: {
+    data: OpenAPIOperationData;
+    renderers: MediaTypeRenderer[];
+}): import("react").JSX.Element;
+export declare function OpenAPIMediaTypeExamplesBody(props: {
+    data: OpenAPIOperationData;
+    renderers: MediaTypeRenderer[];
+}): string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;

package/dist/OpenAPICodeSampleInteractive.jsx

@@ -0,0 +1,78 @@
+'use client';
+import clsx from 'clsx';
+import { useCallback } from 'react';
+import { useStore } from 'zustand';
+import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
+function useMediaTypeState(data, defaultKey) {
+    var method = data.method, path = data.path;
+    var store = useStore(getOrCreateTabStoreByKey("media-type-".concat(method, "-").concat(path), defaultKey));
+    if (typeof store.tabKey !== 'string') {
+        throw new Error('Media type key is not a string');
+    }
+    return {
+        mediaType: store.tabKey,
+        setMediaType: useCallback(function (index) { return store.setTabKey(index); }, [store.setTabKey]),
+    };
+}
+function useMediaTypeSampleIndexState(data, mediaType) {
+    var method = data.method, path = data.path;
+    var store = useStore(getOrCreateTabStoreByKey("media-type-sample-".concat(mediaType, "-").concat(method, "-").concat(path), 0));
+    if (typeof store.tabKey !== 'number') {
+        throw new Error('Example key is not a number');
+    }
+    return {
+        index: store.tabKey,
+        setIndex: useCallback(function (index) { return store.setTabKey(index); }, [store.setTabKey]),
+    };
+}
+export function OpenAPIMediaTypeExamplesSelector(props) {
+    var data = props.data, renderers = props.renderers;
+    if (!renderers[0]) {
+        throw new Error('No renderers provided');
+    }
+    var state = useMediaTypeState(data, renderers[0].mediaType);
+    var selected = renderers.find(function (r) { return r.mediaType === state.mediaType; }) || renderers[0];
+    return (<div className="openapi-codesample-selectors">
+            <select className={clsx('openapi-select')} value={state.mediaType} onChange={function (e) { return state.setMediaType(e.target.value); }}>
+                {renderers.map(function (renderer) { return (<option key={renderer.mediaType} value={renderer.mediaType}>
+                        {renderer.mediaType}
+                    </option>); })}
+            </select>
+            <ExamplesSelector data={data} renderer={selected}/>
+        </div>);
+}
+function ExamplesSelector(props) {
+    var data = props.data, renderer = props.renderer;
+    var state = useMediaTypeSampleIndexState(data, renderer.mediaType);
+    if (renderer.examples.length < 2) {
+        return null;
+    }
+    return (<select className={clsx('openapi-select')} value={String(state.index)} onChange={function (e) { return state.setIndex(Number(e.target.value)); }}>
+            {renderer.examples.map(function (example, index) { return (<option key={index} value={index}>
+                    {example.example.summary || "Example ".concat(index + 1)}
+                </option>); })}
+        </select>);
+}
+export function OpenAPIMediaTypeExamplesBody(props) {
+    var _a;
+    var renderers = props.renderers, data = props.data;
+    if (!renderers[0]) {
+        throw new Error('No renderers provided');
+    }
+    var mediaTypeState = useMediaTypeState(data, renderers[0].mediaType);
+    var selected = (_a = renderers.find(function (r) { return r.mediaType === mediaTypeState.mediaType; })) !== null && _a !== void 0 ? _a : renderers[0];
+    if (selected.examples.length === 0) {
+        return selected.element;
+    }
+    return <ExamplesBody data={data} renderer={selected}/>;
+}
+function ExamplesBody(props) {
+    var _a;
+    var data = props.data, renderer = props.renderer;
+    var exampleState = useMediaTypeSampleIndexState(data, renderer.mediaType);
+    var example = (_a = renderer.examples[exampleState.index]) !== null && _a !== void 0 ? _a : renderer.examples[0];
+    if (!example) {
+        throw new Error("No example found for index ".concat(exampleState.index));
+    }
+    return example.element;
+}

package/dist/OpenAPISchemaName.jsx

@@ -1,3 +1,4 @@
+import { stringifyOpenAPI } from './stringifyOpenAPI';
 /**
  * Display the schema name row.
  * It includes the property name, type, required and deprecated status.
@@ -14,21 +15,21 @@ export function OpenAPISchemaName(props) {
                 {additionalItems ? (<span className="openapi-schema-type">{additionalItems}</span>) : null}
             </span>
             {(schema === null || schema === void 0 ? void 0 : schema.readOnly) ? <span className="openapi-schema-readonly">read-only</span> : null}
-            {required ? <span className="openapi-schema-required">required</span> : null}
+            {required ? (<span className="openapi-schema-required">required</span>) : (<span className="openapi-schema-optional">optional</span>)}
             {(schema === null || schema === void 0 ? void 0 : schema.deprecated) ? <span className="openapi-deprecated">Deprecated</span> : null}
         </div>);
 }
 function getAdditionalItems(schema) {
     var additionalItems = '';
-    if (schema.minimum || schema.minLength) {
-        additionalItems += " \u00B7 min: ".concat(schema.minimum || schema.minLength);
+    if (schema.minimum || schema.minLength || schema.minItems) {
+        additionalItems += " \u00B7 min: ".concat(schema.minimum || schema.minLength || schema.minItems);
     }
-    if (schema.maximum || schema.maxLength) {
-        additionalItems += " \u00B7 max: ".concat(schema.maximum || schema.maxLength);
+    if (schema.maximum || schema.maxLength || schema.maxItems) {
+        additionalItems += " \u00B7 max: ".concat(schema.maximum || schema.maxLength || schema.maxItems);
     }
     // If the schema has a default value, we display it
     if (typeof schema.default !== 'undefined') {
-        additionalItems += " \u00B7 default: ".concat(schema.default);
+        additionalItems += " \u00B7 default: ".concat(stringifyOpenAPI(schema.default));
     }
     if (schema.nullable) {
         additionalItems = ' | nullable';

package/dist/code-samples.d.ts

@@ -4,7 +4,7 @@ export interface CodeSampleInput {
     headers?: Record<string, string>;
     body?: any;
 }
-interface CodeSampleGenerator {
+export interface CodeSampleGenerator {
     id: string;
     label: string;
     syntax: string;
@@ -15,4 +15,3 @@ export declare function parseHostAndPath(url: string): {
     host: string | undefined;
     path: string;
 };
-export {};

package/dist/code-samples.js

@@ -203,7 +203,7 @@ var BodyGenerators = {
         }
         else if (isXML(contentType) || isCSV(contentType)) {
             // We use --data-binary to avoid cURL converting newlines to \r\n
-            body = "--data-binary $'".concat(stringifyOpenAPI(body).replace(/"/g, ''), "'");
+            body = "--data-binary $'".concat(stringifyOpenAPI(body).replace(/"/g, '').replace(/\\n/g, '\n'), "'");
         }
         else if (isGraphQL(contentType)) {
             body = "--data '".concat(stringifyOpenAPI(body), "'");
@@ -215,7 +215,7 @@ var BodyGenerators = {
             body = "--data-binary '@".concat(String(body), "'");
         }
         else {
-            body = "--data '".concat(stringifyOpenAPI(body, null, 2), "'");
+            body = "--data '".concat(stringifyOpenAPI(body, null, 2).replace(/\\n/g, '\n'), "'");
         }
         return {
             body: body,

package/dist/generateSchemaExample.d.ts

@@ -1,5 +1,4 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import { getExampleFromSchema } from '@scalar/oas-utils/spec-getters';
 type JSONValue = string | number | boolean | null | JSONValue[] | {
     [key: string]: JSONValue;
 };
@@ -12,5 +11,35 @@ export declare function generateSchemaExample(schema: OpenAPIV3.SchemaObject, op
 /**
  * Generate an example for a media type.
  */
-export declare function generateMediaTypeExample(mediaType: OpenAPIV3.MediaTypeObject, options?: GenerateSchemaExampleOptions): JSONValue | undefined;
+export declare function generateMediaTypeExamples(mediaType: OpenAPIV3.MediaTypeObject, options?: GenerateSchemaExampleOptions): OpenAPIV3.ExampleObject[];
+/**
+ * This function takes an OpenAPI schema and generates an example from it
+ * Forked from : https://github.com/scalar/scalar/blob/main/packages/oas-utils/src/spec-getters/getExampleFromSchema.ts
+ */
+declare const getExampleFromSchema: (schema: Record<string, any>, options?: {
+    /**
+     * The fallback string for empty string values.
+     * @default ''
+     */
+    emptyString?: string;
+    /**
+     * Whether to use the XML tag names as keys
+     * @default false
+     */
+    xml?: boolean;
+    /**
+     * Whether to show read-only/write-only properties. Otherwise all properties are shown.
+     * @default undefined
+     */
+    mode?: "read" | "write";
+    /**
+     * Dynamic values to add to the example.
+     */
+    variables?: Record<string, any>;
+    /**
+     * Whether to omit empty and optional properties.
+     * @default false
+     */
+    omitEmptyAndOptionalProperties?: boolean;
+}, level?: number, parentSchema?: Record<string, any>, name?: string) => any;
 export {};