@gitbook/react-openapi 1.1.9 → 1.1.10

package/dist/OpenAPISchema.jsx

@@ -6,6 +6,7 @@ import { OpenAPICopyButton } from './OpenAPICopyButton';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 import { OpenAPISchemaName } from './OpenAPISchemaName';
 import { retrocycle } from './decycle';
+import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { checkIsReference, resolveDescription, resolveFirstExample } from './utils';
 /**
  * Render a property of an OpenAPI schema.
@@ -60,10 +61,14 @@ function OpenAPIRootSchema(props) {
     var schema = props.schema, context = props.context, _a = props.circularRefs, parentCircularRefs = _a === void 0 ? new Map() : _a;
     var id = useId();
     var properties = getSchemaProperties(schema);
+    var description = resolveDescription(schema);
     if (properties === null || properties === void 0 ? void 0 : properties.length) {
         var circularRefs = new Map(parentCircularRefs);
         circularRefs.set(schema, id);
-        return (<OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>);
+        return (<>
+                {description ? (<Markdown source={description} className="openapi-schema-root-description"/>) : null}
+                <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>
+            </>);
     }
     return (<OpenAPISchemaProperty className="openapi-schema-root" property={{ schema: schema }} context={context} circularRefs={parentCircularRefs}/>);
 }
@@ -157,12 +162,20 @@ function OpenAPISchemaPresentation(props) {
                     </span>
                 </div>) : null}
             {description ? (<Markdown source={description} className="openapi-schema-description"/>) : null}
-            {typeof example === 'string' ? (<div className="openapi-schema-example">
+            {schema.default !== undefined ? (<span className="openapi-schema-default">
+                    Default:{' '}
+                    <code>
+                        {typeof schema.default === 'string' && schema.default
+                ? schema.default
+                : stringifyOpenAPI(schema.default)}
+                    </code>
+                </span>) : null}
+            {typeof example === 'string' ? (<span className="openapi-schema-example">
                     Example: <code>{example}</code>
-                </div>) : null}
-            {schema.pattern ? (<div className="openapi-schema-pattern">
+                </span>) : null}
+            {schema.pattern ? (<span className="openapi-schema-pattern">
                     Pattern: <code>{schema.pattern}</code>
-                </div>) : null}
+                </span>) : null}
             <OpenAPISchemaEnum schema={schema}/>
         </div>);
 }

package/dist/OpenAPISchemaName.jsx

@@ -1,4 +1,3 @@
-import { stringifyOpenAPI } from './stringifyOpenAPI';
 /**
  * Display the schema name row.
  * It includes the property name, type, required and deprecated status.
@@ -6,7 +5,7 @@ import { stringifyOpenAPI } from './stringifyOpenAPI';
 export function OpenAPISchemaName(props) {
     var schema = props.schema, type = props.type, propertyName = props.propertyName, required = props.required;
     var additionalItems = schema && getAdditionalItems(schema);
-    return (<div className="openapi-schema-name">
+    return (<span className="openapi-schema-name">
             {propertyName ? (<span data-deprecated={schema === null || schema === void 0 ? void 0 : schema.deprecated} className="openapi-schema-propertyname">
                     {propertyName}
                 </span>) : null}
@@ -18,7 +17,7 @@ export function OpenAPISchemaName(props) {
             {(schema === null || schema === void 0 ? void 0 : schema.writeOnly) ? (<span className="openapi-schema-writeonly">write-only</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>);
+        </span>);
 }
 function getAdditionalItems(schema) {
     var additionalItems = '';
@@ -28,10 +27,6 @@ function getAdditionalItems(schema) {
     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(stringifyOpenAPI(schema.default));
-    }
     if (schema.nullable) {
         additionalItems = ' | nullable';
     }

package/dist/OpenAPISecurities.jsx

@@ -30,24 +30,24 @@ function getLabelForType(security) {
     var _a;
     switch (security.type) {
         case 'apiKey':
-            return (<OpenAPISchemaName propertyName={(_a = security.name) !== null && _a !== void 0 ? _a : 'apiKey'} type="string" required/>);
+            return (<OpenAPISchemaName propertyName={(_a = security.name) !== null && _a !== void 0 ? _a : 'apiKey'} type="string" required={security.required}/>);
         case 'http':
             if (security.scheme === 'basic') {
-                return <OpenAPISchemaName propertyName="Authorization" type="string" required/>;
+                return (<OpenAPISchemaName propertyName="Authorization" type="string" required={security.required}/>);
             }
             if (security.scheme === 'bearer') {
                 var description = resolveDescription(security);
                 return (<>
-                        <OpenAPISchemaName propertyName="Authorization" type="string" required/>
+                        <OpenAPISchemaName propertyName="Authorization" type="string" required={security.required}/>
                         {/** Show a default description if none is provided */}
                         {!description ? (<Markdown source={"Bearer authentication header of the form Bearer ".concat('&lt;token&gt;', ".")} className="openapi-securities-description"/>) : null}
                     </>);
             }
-            return <OpenAPISchemaName propertyName="HTTP" required/>;
+            return <OpenAPISchemaName propertyName="HTTP" required={security.required}/>;
         case 'oauth2':
-            return <OpenAPISchemaName propertyName="OAuth2" required/>;
+            return <OpenAPISchemaName propertyName="OAuth2" required={security.required}/>;
         case 'openIdConnect':
-            return <OpenAPISchemaName propertyName="OpenID Connect" required/>;
+            return <OpenAPISchemaName propertyName="OpenID Connect" required={security.required}/>;
         default:
             // @ts-ignore
             return security.type;

package/dist/OpenAPISelect.d.ts

@@ -0,0 +1,15 @@
+import { type Key, type ListBoxItemProps, type PopoverProps, type SelectProps } from 'react-aria-components';
+export type OpenAPISelectItem = {
+    key: Key;
+    label: string;
+};
+interface OpenAPISelectProps<T extends OpenAPISelectItem> extends Omit<SelectProps<T>, 'children'> {
+    items: T[];
+    children: React.ReactNode | ((item: T) => React.ReactNode);
+    selectedKey?: Key;
+    onChange?: (key: string | number) => void;
+    placement?: PopoverProps['placement'];
+}
+export declare function OpenAPISelect<T extends OpenAPISelectItem>(props: OpenAPISelectProps<T>): import("react").JSX.Element;
+export declare function OpenAPISelectItem(props: ListBoxItemProps): import("react").JSX.Element;
+export {};

package/dist/OpenAPISelect.jsx

@@ -0,0 +1,32 @@
+'use client';
+import clsx from 'clsx';
+import { Button, ListBox, ListBoxItem, Popover, Select, SelectValue, } from 'react-aria-components';
+export function OpenAPISelect(props) {
+    var items = props.items, children = props.children, className = props.className, placement = props.placement;
+    return (<Select {...props} className={clsx('openapi-select', className)}>
+            <Button>
+                <SelectValue />
+                <span aria-hidden="true">
+                    <svg className="gb-icon" style={{
+            maskImage: "url('https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-down.svg?v=2&token=a463935e93')",
+            maskRepeat: 'no-repeat',
+            maskPosition: 'center center',
+        }}/>
+                </span>
+            </Button>
+            <Popover placement={placement} className="openapi-select-popover">
+                <ListBox className="openapi-select-listbox" items={items}>
+                    {children}
+                </ListBox>
+            </Popover>
+        </Select>);
+}
+export function OpenAPISelectItem(props) {
+    return (<ListBoxItem {...props} className={function (_a) {
+            var isFocused = _a.isFocused, isSelected = _a.isSelected;
+            return clsx('openapi-select-item', {
+                'openapi-select-item-focused': isFocused,
+                'openapi-select-item-selected': isSelected,
+            });
+        }}/>);
+}

package/dist/OpenAPITabs.jsx

@@ -2,7 +2,7 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';
 import { useEventCallback } from 'usehooks-ts';
-import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
+import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
 var OpenAPITabsContext = createContext(null);
 function useOpenAPITabsContext() {
     var context = useContext(OpenAPITabsContext);
@@ -20,8 +20,8 @@ export function OpenAPITabs(props) {
     var _c = useState(function () {
         var _a, _b;
         if (stateKey && typeof window !== 'undefined') {
-            var store = getOrCreateTabStoreByKey(stateKey);
-            var tabKey_1 = store.getState().tabKey;
+            var store = getOrCreateStoreByKey(stateKey);
+            var tabKey_1 = store.getState().key;
             if (tabKey_1) {
                 return tabKey_1;
             }
@@ -44,11 +44,11 @@ export function OpenAPITabs(props) {
         if (!stateKey) {
             return undefined;
         }
-        var store = getOrCreateTabStoreByKey(stateKey);
+        var store = getOrCreateStoreByKey(stateKey);
         return store.subscribe(function (state) {
             var _a;
             (_a = cancelDeferRef.current) === null || _a === void 0 ? void 0 : _a.call(cancelDeferRef);
-            cancelDeferRef.current = defer(function () { return selectTab(state.tabKey); });
+            cancelDeferRef.current = defer(function () { return selectTab(state.key); });
         });
     }, [stateKey, selectTab]);
     useEffect(function () {
@@ -59,8 +59,8 @@ export function OpenAPITabs(props) {
             <Tabs className="openapi-tabs" onSelectionChange={function (tabKey) {
             selectTab(tabKey);
             if (stateKey) {
-                var store = getOrCreateTabStoreByKey(stateKey);
-                store.setState({ tabKey: tabKey });
+                var store = getOrCreateStoreByKey(stateKey);
+                store.setState({ key: tabKey });
             }
         }} selectedKey={tabKey}>
                 {children}
@@ -103,7 +103,7 @@ export function OpenAPITabsPanels() {
     }
     var key = selectedTab.key.toString();
     return (<TabPanel id={key} className="openapi-tabs-panel">
-            <div className="openapi-tabs-body">{selectedTab.body}</div>
-            {selectedTab.footer ? (<div className="openapi-tabs-footer">{selectedTab.footer}</div>) : null}
+            <div className="openapi-panel-body">{selectedTab.body}</div>
+            {selectedTab.footer ? (<div className="openapi-panel-footer">{selectedTab.footer}</div>) : null}
         </TabPanel>);
 }

package/dist/context.d.ts

@@ -0,0 +1,54 @@
+export interface OpenAPIClientContext {
+    /**
+     * Icons used in the block.
+     */
+    icons: {
+        chevronDown: React.ReactNode;
+        chevronRight: React.ReactNode;
+        plus: React.ReactNode;
+    };
+    /**
+     * Force all sections to be opened by default.
+     * @default false
+     */
+    defaultInteractiveOpened?: boolean;
+    /**
+     * The key of the block
+     */
+    blockKey?: string;
+    /**
+     * Optional id attached to the heading and used as an anchor.
+     */
+    id?: string;
+}
+export interface OpenAPIContext extends OpenAPIClientContext {
+    /**
+     * Render a code block.
+     */
+    renderCodeBlock: (props: {
+        code: string;
+        syntax: string;
+    }) => React.ReactNode;
+    /**
+     * Render the heading of the operation.
+     */
+    renderHeading: (props: {
+        deprecated: boolean;
+        title: string;
+        stability?: string;
+    }) => React.ReactNode;
+    /**
+     * Render the document of the operation.
+     */
+    renderDocument: (props: {
+        document: object;
+    }) => React.ReactNode;
+    /**
+     * Specification URL.
+     */
+    specUrl: string;
+}
+/**
+ * Get the client context from the OpenAPI context.
+ */
+export declare function getOpenAPIClientContext(context: OpenAPIContext): OpenAPIClientContext;

package/dist/context.js

@@ -0,0 +1,11 @@
+/**
+ * Get the client context from the OpenAPI context.
+ */
+export function getOpenAPIClientContext(context) {
+    return {
+        icons: context.icons,
+        defaultInteractiveOpened: context.defaultInteractiveOpened,
+        blockKey: context.blockKey,
+        id: context.id,
+    };
+}

package/dist/generateSchemaExample.js

@@ -130,6 +130,10 @@ var getExampleFromSchema = function (schema, options, level, parentSchema, name,
     // Sometimes, we just want the structure and no values.
     // But if `emptyString` is  set, we do want to see some values.
     var makeUpRandomData = !!(options === null || options === void 0 ? void 0 : options.emptyString);
+    // If the property is deprecated we don't show it in examples.
+    if (schema.deprecated) {
+        return undefined;
+    }
     // Check if the property is read-only/write-only
     if (((options === null || options === void 0 ? void 0 : options.mode) === 'write' && schema.readOnly) ||
         ((options === null || options === void 0 ? void 0 : options.mode) === 'read' && schema.writeOnly)) {

package/dist/getOrCreateStoreByKey.d.ts

@@ -0,0 +1,10 @@
+type Key = string | number;
+type State = {
+    key: Key | null;
+};
+type Actions = {
+    setKey: (key: Key | null) => void;
+};
+type Store = State & Actions;
+export declare const getOrCreateStoreByKey: (storeKey: string, initialKey?: Key) => import("zustand").StoreApi<Store>;
+export {};

package/dist/getOrCreateStoreByKey.js

@@ -0,0 +1,20 @@
+'use client';
+import { createStore } from 'zustand';
+var createStateStore = function (initial) {
+    return createStore()(function (set) { return ({
+        key: initial !== null && initial !== void 0 ? initial : null,
+        setKey: function (key) {
+            set(function () { return ({ key: key }); });
+        },
+    }); });
+};
+var defaultStores = new Map();
+var createStateStoreFactory = function (stores) {
+    return function (storeKey, initialKey) {
+        if (!stores.has(storeKey)) {
+            stores.set(storeKey, createStateStore(initialKey));
+        }
+        return stores.get(storeKey);
+    };
+};
+export var getOrCreateStoreByKey = createStateStoreFactory(defaultStores);

package/dist/index.d.ts

@@ -2,4 +2,4 @@ export * from './schemas';
 export * from './OpenAPIOperation';
 export * from './OpenAPIOperationContext';
 export * from './resolveOpenAPIOperation';
-export type { OpenAPISchemasData, OpenAPIOperationData } from './types';
+export type { OpenAPIOperationData, OpenAPIContext } from './types';

package/dist/resolveOpenAPIOperation.js

@@ -63,7 +63,7 @@ export { fromJSON, toJSON };
  */
 export function resolveOpenAPIOperation(filesystem, operationDescriptor) {
     return __awaiter(this, void 0, void 0, function () {
-        var path, method, schema, operation, commonParameters, servers, security, securities, _i, security_1, entry, securityKey, securityScheme;
+        var path, method, schema, operation, commonParameters, servers, security, isOptionalSecurity, flatSecurities, securities, _i, flatSecurities_1, entry, securityKey, securityScheme;
         var _a, _b, _c, _d, _e, _f;
         return __generator(this, function (_g) {
             switch (_g.label) {
@@ -81,15 +81,20 @@ export function resolveOpenAPIOperation(filesystem, operationDescriptor) {
                         operation = __assign(__assign({}, operation), { parameters: __spreadArray(__spreadArray([], commonParameters, true), ((_a = operation.parameters) !== null && _a !== void 0 ? _a : []), true) });
                     }
                     servers = 'servers' in schema ? ((_b = schema.servers) !== null && _b !== void 0 ? _b : []) : [];
-                    security = flattenSecurities((_d = (_c = operation.security) !== null && _c !== void 0 ? _c : schema.security) !== null && _d !== void 0 ? _d : []);
+                    security = (_d = (_c = operation.security) !== null && _c !== void 0 ? _c : schema.security) !== null && _d !== void 0 ? _d : [];
+                    isOptionalSecurity = security.some(function (entry) { return Object.keys(entry).length === 0; });
+                    flatSecurities = flattenSecurities(security);
                     securities = [];
-                    for (_i = 0, security_1 = security; _i < security_1.length; _i++) {
-                        entry = security_1[_i];
+                    for (_i = 0, flatSecurities_1 = flatSecurities; _i < flatSecurities_1.length; _i++) {
+                        entry = flatSecurities_1[_i];
                         securityKey = Object.keys(entry)[0];
                         if (securityKey) {
                             securityScheme = (_f = (_e = schema.components) === null || _e === void 0 ? void 0 : _e.securitySchemes) === null || _f === void 0 ? void 0 : _f[securityKey];
                             if (securityScheme && !checkIsReference(securityScheme)) {
-                                securities.push([securityKey, securityScheme]);
+                                securities.push([
+                                    securityKey,
+                                    __assign(__assign({}, securityScheme), { required: !isOptionalSecurity }),
+                                ]);
                             }
                         }
                     }

package/dist/schemas/OpenAPISchemas.d.ts

@@ -1,15 +1,14 @@
-import type { OpenAPIContextProps, OpenAPISchemasData } from '../types';
-type OpenAPISchemasContextProps = Omit<OpenAPIContextProps, 'renderCodeBlock' | 'renderHeading' | 'renderDocument'>;
+import type { OpenAPISchema } from '@gitbook/openapi-parser';
+import type { OpenAPIContext } from '../types';
 /**
- * Display OpenAPI Schemas.
+ * OpenAPI Schemas component.
  */
 export declare function OpenAPISchemas(props: {
     className?: string;
-    data: OpenAPISchemasData;
-    context: OpenAPISchemasContextProps;
+    schemas: OpenAPISchema[];
+    context: OpenAPIContext;
     /**
      * Whether to show the schema directly if there is only one.
      */
     grouped?: boolean;
 }): import("react").JSX.Element | null;
-export {};

package/dist/schemas/OpenAPISchemas.jsx

@@ -1,62 +1,69 @@
 import clsx from 'clsx';
 import { OpenAPIDisclosureGroup } from '../OpenAPIDisclosureGroup';
+import { OpenAPIExample, getExampleFromSchema } from '../OpenAPIExample';
 import { OpenAPIRootSchema } from '../OpenAPISchemaServer';
-import { Section, SectionBody } from '../StaticSection';
+import { Section, SectionBody, StaticSection } from '../StaticSection';
+import { getOpenAPIClientContext } from '../context';
 /**
- * Display OpenAPI Schemas.
+ * OpenAPI Schemas component.
  */
 export function OpenAPISchemas(props) {
-    var className = props.className, data = props.data, context = props.context, grouped = props.grouped;
-    var schemas = data.schemas;
-    var clientContext = {
-        defaultInteractiveOpened: context.defaultInteractiveOpened,
-        icons: context.icons,
-        blockKey: context.blockKey,
-    };
-    if (!schemas.length) {
+    var schemas = props.schemas, context = props.context, grouped = props.grouped, className = props.className;
+    var firstSchema = schemas[0];
+    if (!firstSchema) {
         return null;
     }
-    return (<div className={clsx('openapi-schemas', className)}>
-            <OpenAPIRootSchemasSchema grouped={grouped} schemas={schemas} context={clientContext}/>
-        </div>);
-}
-/**
- * Root schema for OpenAPI schemas.
- * It displays a single model or a disclosure group for multiple schemas.
- */
-function OpenAPIRootSchemasSchema(props) {
-    var _a;
-    var schemas = props.schemas, context = props.context, grouped = props.grouped;
+    var clientContext = getOpenAPIClientContext(context);
     // If there is only one model and we are not grouping, we show it directly.
     if (schemas.length === 1 && !grouped) {
-        var schema = (_a = schemas === null || schemas === void 0 ? void 0 : schemas[0]) === null || _a === void 0 ? void 0 : _a.schema;
-        if (!schema) {
-            return null;
-        }
-        return (<Section>
-                <SectionBody>
-                    <OpenAPIRootSchema schema={schema} context={context}/>
-                </SectionBody>
-            </Section>);
+        var title = "The ".concat(firstSchema.name, " object");
+        return (<div className={clsx('openapi-schemas', className)}>
+                <div className="openapi-summary" id={context.id}>
+                    {context.renderHeading({
+                title: title,
+            })}
+                </div>
+                <div className="openapi-columns">
+                    <div className="openapi-column-spec">
+                        <StaticSection className="openapi-parameters" header="Attributes">
+                            <OpenAPIRootSchema schema={firstSchema.schema} context={clientContext}/>
+                        </StaticSection>
+                    </div>
+                    <div className="openapi-column-preview">
+                        <div className="openapi-column-preview-body">
+                            <div className="openapi-panel">
+                                <h4 className="openapi-panel-heading">{title}</h4>
+                                <div className="openapi-panel-body">
+                                    <OpenAPIExample example={getExampleFromSchema({
+                schema: firstSchema.schema,
+            })} context={context} syntax="json"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>);
     }
     // If there are multiple schemas, we use a disclosure group to show them all.
-    return (<OpenAPIDisclosureGroup allowsMultipleExpanded icon={context.icons.chevronRight} groups={schemas.map(function (_a) {
+    return (<div className={clsx('openapi-schemas', className)}>
+            <OpenAPIDisclosureGroup allowsMultipleExpanded icon={context.icons.chevronRight} groups={schemas.map(function (_a) {
             var name = _a.name, schema = _a.schema;
             return ({
                 id: name,
                 label: (<div className="openapi-response-tab-content" key={"model-".concat(name)}>
-                        <span className="openapi-response-statuscode">{name}</span>
-                    </div>),
+                            <span className="openapi-response-statuscode">{name}</span>
+                        </div>),
                 tabs: [
                     {
                         id: 'model',
                         body: (<Section className="openapi-section-schemas">
-                                <SectionBody>
-                                    <OpenAPIRootSchema schema={schema} context={context}/>
-                                </SectionBody>
-                            </Section>),
+                                    <SectionBody>
+                                        <OpenAPIRootSchema schema={schema} context={clientContext}/>
+                                    </SectionBody>
+                                </Section>),
                     },
                 ],
             });
-        })}/>);
+        })}/>
+        </div>);
 }

package/dist/schemas/resolveOpenAPISchemas.d.ts

@@ -1,9 +1,10 @@
-import type { Filesystem, OpenAPIV3xDocument } from '@gitbook/openapi-parser';
-import type { OpenAPISchemasData } from '../types';
+import type { Filesystem, OpenAPISchema, OpenAPIV3xDocument } from '@gitbook/openapi-parser';
 /**
  * Resolve an OpenAPI schemas from a file and compile it to a more usable format.
  * Schemas are extracted from the OpenAPI components.schemas
  */
 export declare function resolveOpenAPISchemas(filesystem: Filesystem<OpenAPIV3xDocument>, options: {
     schemas: string[];
-}): Promise<OpenAPISchemasData | null>;
+}): Promise<{
+    schemas: OpenAPISchema[];
+} | null>;

package/dist/schemas/resolveOpenAPISchemas.js

@@ -36,7 +36,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { filterSelectedOpenAPISchemas } from '@gitbook/openapi-parser';
 import { dereferenceFilesystem } from '../dereference';
-//!!TODO: We should return only the schemas that are used in the block. Still a WIP awaiting future work.
 /**
  * Resolve an OpenAPI schemas from a file and compile it to a more usable format.
  * Schemas are extracted from the OpenAPI components.schemas