@gitbook/react-openapi 1.4.2 → 1.5.1

package/src/OpenAPISchemaName.tsx

@@ -1,80 +0,0 @@
-import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import type React from 'react';
-import type { OpenAPIClientContext } from './context';
-import { t, tString } from './translate';
-
-interface OpenAPISchemaNameProps {
-    schema?: OpenAPIV3.SchemaObject;
-    propertyName?: string | React.JSX.Element;
-    required?: boolean | null;
-    type?: string;
-    context: OpenAPIClientContext;
-}
-
-/**
- * Display the schema name row.
- * It includes the property name, type, required and deprecated status.
- */
-export function OpenAPISchemaName(props: OpenAPISchemaNameProps) {
-    const { schema, type, propertyName, required, context } = props;
-
-    const additionalItems = schema && getAdditionalItems(schema, context);
-
-    return (
-        <span className="openapi-schema-name">
-            {propertyName ? (
-                <span data-deprecated={schema?.deprecated} className="openapi-schema-propertyname">
-                    {propertyName}
-                </span>
-            ) : null}
-            {type || additionalItems ? (
-                <span>
-                    {type ? <span className="openapi-schema-type">{type}</span> : null}
-                    {additionalItems ? (
-                        <span className="openapi-schema-type">{additionalItems}</span>
-                    ) : null}
-                </span>
-            ) : null}
-            {schema?.readOnly ? (
-                <span className="openapi-schema-readonly">
-                    {t(context.translation, 'read_only')}
-                </span>
-            ) : null}
-            {schema?.writeOnly ? (
-                <span className="openapi-schema-writeonly">
-                    {t(context.translation, 'write_only')}
-                </span>
-            ) : null}
-            {required === null ? null : required ? (
-                <span className="openapi-schema-required">
-                    {t(context.translation, 'required')}
-                </span>
-            ) : (
-                <span className="openapi-schema-optional">
-                    {t(context.translation, 'optional')}
-                </span>
-            )}
-            {schema?.deprecated ? (
-                <span className="openapi-deprecated">{t(context.translation, 'deprecated')}</span>
-            ) : null}
-        </span>
-    );
-}
-
-function getAdditionalItems(schema: OpenAPIV3.SchemaObject, context: OpenAPIClientContext): string {
-    let additionalItems = '';
-
-    if (schema.minimum || schema.minLength || schema.minItems) {
-        additionalItems += ` · ${tString(context.translation, 'min').toLowerCase()}: ${schema.minimum || schema.minLength || schema.minItems}`;
-    }
-
-    if (schema.maximum || schema.maxLength || schema.maxItems) {
-        additionalItems += ` · ${tString(context.translation, 'max').toLowerCase()}: ${schema.maximum || schema.maxLength || schema.maxItems}`;
-    }
-
-    if (schema.nullable) {
-        additionalItems = ` | ${tString(context.translation, 'nullable').toLowerCase()}`;
-    }
-
-    return additionalItems;
-}

package/src/OpenAPISchemaServer.tsx

@@ -1,34 +0,0 @@
-import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import {
-    OpenAPIRootSchemaFromServer,
-    OpenAPISchemaPropertiesFromServer,
-    type OpenAPISchemaPropertyEntry,
-} from './OpenAPISchema';
-import type { OpenAPIClientContext } from './context';
-import { decycle } from './decycle';
-
-export function OpenAPISchemaProperties(props: {
-    id?: string;
-    properties: OpenAPISchemaPropertyEntry[];
-    context: OpenAPIClientContext;
-}) {
-    return (
-        <OpenAPISchemaPropertiesFromServer
-            id={props.id}
-            properties={JSON.stringify(props.properties, decycle())}
-            context={props.context}
-        />
-    );
-}
-
-export function OpenAPIRootSchema(props: {
-    schema: OpenAPIV3.SchemaObject;
-    context: OpenAPIClientContext;
-}) {
-    return (
-        <OpenAPIRootSchemaFromServer
-            schema={JSON.stringify(props.schema, decycle())}
-            context={props.context}
-        />
-    );
-}

package/src/OpenAPISecurities.tsx

@@ -1,231 +0,0 @@
-import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import { InteractiveSection } from './InteractiveSection';
-import { Markdown } from './Markdown';
-import { OpenAPICopyButton } from './OpenAPICopyButton';
-import { OpenAPISchemaName } from './OpenAPISchemaName';
-import type { OpenAPIClientContext } from './context';
-import { t } from './translate';
-import type { OpenAPIOperationData, OpenAPISecurityWithRequired } from './types';
-import { createStateKey, resolveDescription } from './utils';
-
-/**
- * Present securities authorization that can be used for this operation.
- */
-export function OpenAPISecurities(props: {
-    securities: OpenAPIOperationData['securities'];
-    context: OpenAPIClientContext;
-}) {
-    const { securities, context } = props;
-
-    if (securities.length === 0) {
-        return null;
-    }
-
-    return (
-        <InteractiveSection
-            header={t(context.translation, 'authorizations')}
-            stateKey={createStateKey('securities', context.blockKey)}
-            toggeable
-            defaultOpened={false}
-            toggleIcon={context.icons.chevronRight}
-            selectIcon={context.icons.chevronDown}
-            className="openapi-securities"
-            tabs={securities.map(([key, security]) => {
-                const description = resolveDescription(security);
-                return {
-                    key: key,
-                    label: key,
-                    body: (
-                        <div className="openapi-schema">
-                            <div className="openapi-schema-presentation">
-                                {getLabelForType(security, context)}
-
-                                {description ? (
-                                    <Markdown
-                                        source={description}
-                                        className="openapi-securities-description"
-                                    />
-                                ) : null}
-                            </div>
-                        </div>
-                    ),
-                };
-            })}
-        />
-    );
-}
-
-function getLabelForType(security: OpenAPISecurityWithRequired, context: OpenAPIClientContext) {
-    switch (security.type) {
-        case 'apiKey':
-            return (
-                <OpenAPISchemaName
-                    context={context}
-                    propertyName={security.name ?? 'apiKey'}
-                    type="string"
-                    required={security.required}
-                />
-            );
-        case 'http':
-            if (security.scheme === 'basic') {
-                return (
-                    <OpenAPISchemaName
-                        context={context}
-                        propertyName="Authorization"
-                        type="string"
-                        required={security.required}
-                    />
-                );
-            }
-
-            if (security.scheme === 'bearer') {
-                const description = resolveDescription(security);
-                return (
-                    <>
-                        <OpenAPISchemaName
-                            context={context}
-                            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 ${'&lt;token&gt;'}.`}
-                                className="openapi-securities-description"
-                            />
-                        ) : null}
-                    </>
-                );
-            }
-
-            return (
-                <OpenAPISchemaName
-                    context={context}
-                    propertyName="HTTP"
-                    required={security.required}
-                />
-            );
-        case 'oauth2':
-            return <OpenAPISchemaOAuth2Flows context={context} security={security} />;
-        case 'openIdConnect':
-            return (
-                <OpenAPISchemaName
-                    context={context}
-                    propertyName="OpenID Connect"
-                    required={security.required}
-                />
-            );
-        default:
-            // @ts-ignore
-            return security.type;
-    }
-}
-
-function OpenAPISchemaOAuth2Flows(props: {
-    context: OpenAPIClientContext;
-    security: OpenAPIV3.OAuth2SecurityScheme & { required?: boolean };
-}) {
-    const { context, security } = props;
-
-    const flows = Object.entries(security.flows ?? {});
-
-    return (
-        <div className="openapi-securities-oauth-flows">
-            {flows.map(([name, flow], index) => (
-                <OpenAPISchemaOAuth2Item
-                    key={index}
-                    flow={flow}
-                    name={name}
-                    context={context}
-                    security={security}
-                />
-            ))}
-        </div>
-    );
-}
-
-function OpenAPISchemaOAuth2Item(props: {
-    flow: NonNullable<OpenAPIV3.OAuth2SecurityScheme['flows']>[keyof NonNullable<
-        OpenAPIV3.OAuth2SecurityScheme['flows']
-    >];
-    name: string;
-    context: OpenAPIClientContext;
-    security: OpenAPIV3.OAuth2SecurityScheme & { required?: boolean };
-}) {
-    const { flow, context, security, name } = props;
-
-    if (!flow) {
-        return null;
-    }
-
-    const scopes = Object.entries(flow?.scopes ?? {});
-
-    return (
-        <div>
-            <OpenAPISchemaName
-                context={context}
-                propertyName="OAuth2"
-                type={name}
-                required={security.required}
-            />
-            <div className="openapi-securities-oauth-content openapi-markdown">
-                {security.description ? <Markdown source={security.description} /> : null}
-                {'authorizationUrl' in flow && flow.authorizationUrl ? (
-                    <span>
-                        Authorization URL:{' '}
-                        <OpenAPICopyButton
-                            value={flow.authorizationUrl}
-                            context={context}
-                            className="openapi-securities-url"
-                            withTooltip
-                        >
-                            {flow.authorizationUrl}
-                        </OpenAPICopyButton>
-                    </span>
-                ) : null}
-                {'tokenUrl' in flow && flow.tokenUrl ? (
-                    <span>
-                        Token URL:{' '}
-                        <OpenAPICopyButton
-                            value={flow.tokenUrl}
-                            context={context}
-                            className="openapi-securities-url"
-                            withTooltip
-                        >
-                            {flow.tokenUrl}
-                        </OpenAPICopyButton>
-                    </span>
-                ) : null}
-                {'refreshUrl' in flow && flow.refreshUrl ? (
-                    <span>
-                        Refresh URL:{' '}
-                        <OpenAPICopyButton
-                            value={flow.refreshUrl}
-                            context={context}
-                            className="openapi-securities-url"
-                            withTooltip
-                        >
-                            {flow.refreshUrl}
-                        </OpenAPICopyButton>
-                    </span>
-                ) : null}
-                {scopes.length ? (
-                    <div>
-                        {t(context.translation, 'available_scopes')}:{' '}
-                        <ul>
-                            {scopes.map(([key, value]) => (
-                                <li key={key}>
-                                    <OpenAPICopyButton value={key} context={context} withTooltip>
-                                        <code>{key}</code>
-                                    </OpenAPICopyButton>
-                                    : {value}
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                ) : null}
-            </div>
-        </div>
-    );
-}

package/src/OpenAPISelect.tsx

@@ -1,96 +0,0 @@
-'use client';
-
-import clsx from 'clsx';
-import { useCallback } from 'react';
-import {
-    Button,
-    type Key,
-    ListBox,
-    ListBoxItem,
-    type ListBoxItemProps,
-    Popover,
-    type PopoverProps,
-    Select,
-    type SelectProps,
-    SelectValue,
-} from 'react-aria-components';
-import { useStore } from 'zustand';
-import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
-
-export type OpenAPISelectItem = {
-    key: Key;
-    label: string | React.ReactNode;
-};
-
-interface OpenAPISelectProps<T extends OpenAPISelectItem> extends Omit<SelectProps<T>, 'children'> {
-    items: T[];
-    children: React.ReactNode | ((item: T) => React.ReactNode);
-    placement?: PopoverProps['placement'];
-    stateKey?: string;
-    /**
-     * Icon to display in the select button.
-     */
-    icon?: React.ReactNode;
-}
-
-export function useSelectState(stateKey = 'select-state', initialKey: Key = 'default') {
-    const store = useStore(getOrCreateStoreByKey(stateKey, initialKey));
-    return {
-        key: store.key,
-        setKey: useCallback((key: Key | null) => store.setKey(key), [store.setKey]),
-    };
-}
-
-export function OpenAPISelect<T extends OpenAPISelectItem>(props: OpenAPISelectProps<T>) {
-    const {
-        icon = '▼',
-        items,
-        children,
-        className,
-        placement,
-        stateKey,
-        selectedKey,
-        onSelectionChange,
-    } = props;
-
-    const state = useSelectState(stateKey, items[0]?.key);
-
-    const selected = items.find((item) => item.key === state.key) || items[0];
-
-    return (
-        <Select
-            aria-label="OpenAPI Select"
-            {...props}
-            selectedKey={selectedKey || selected?.key}
-            onSelectionChange={(key) => {
-                onSelectionChange?.(key);
-                state.setKey(key);
-            }}
-            className={clsx('openapi-select', className)}
-        >
-            <Button>
-                <SelectValue />
-                {icon}
-            </Button>
-            <Popover placement={placement} className="openapi-select-popover">
-                <ListBox className="openapi-select-listbox" items={items}>
-                    {children}
-                </ListBox>
-            </Popover>
-        </Select>
-    );
-}
-
-export function OpenAPISelectItem(props: ListBoxItemProps) {
-    return (
-        <ListBoxItem
-            {...props}
-            className={({ isFocused, isSelected }) =>
-                clsx('openapi-select-item', {
-                    'openapi-select-item-focused': isFocused,
-                    'openapi-select-item-selected': isSelected,
-                })
-            }
-        />
-    );
-}

package/src/OpenAPISpec.tsx

@@ -1,138 +0,0 @@
-import type { OpenAPI } from '@gitbook/openapi-parser';
-
-import { OpenAPIRequestBody } from './OpenAPIRequestBody';
-import { OpenAPIResponses } from './OpenAPIResponses';
-import { OpenAPISchemaProperties } from './OpenAPISchemaServer';
-import { OpenAPISecurities } from './OpenAPISecurities';
-import { StaticSection } from './StaticSection';
-import type { OpenAPIClientContext } from './context';
-import { tString } from './translate';
-import type { OpenAPIOperationData, OpenAPIWebhookData } from './types';
-import { parameterToProperty } from './utils';
-
-export function OpenAPISpec(props: {
-    data: OpenAPIOperationData | OpenAPIWebhookData;
-    context: OpenAPIClientContext;
-}) {
-    const { data, context } = props;
-
-    const { operation } = data;
-
-    const parameters = deduplicateParameters(operation.parameters ?? []);
-    const parameterGroups = groupParameters(parameters, context);
-
-    const securities = 'securities' in data ? data.securities : [];
-
-    return (
-        <>
-            {securities.length > 0 ? (
-                <OpenAPISecurities key="securities" securities={securities} context={context} />
-            ) : null}
-
-            {parameterGroups.map((group) => {
-                return (
-                    <StaticSection
-                        key={`parameter-${group.key}`}
-                        className="openapi-parameters"
-                        header={group.label}
-                    >
-                        <OpenAPISchemaProperties
-                            properties={group.parameters.map(parameterToProperty)}
-                            context={context}
-                        />
-                    </StaticSection>
-                );
-            })}
-
-            {operation.requestBody ? (
-                <OpenAPIRequestBody
-                    key="body"
-                    requestBody={operation.requestBody}
-                    context={context}
-                    data={data}
-                />
-            ) : null}
-            {operation.responses ? (
-                <OpenAPIResponses
-                    key="responses"
-                    responses={operation.responses}
-                    context={context}
-                />
-            ) : null}
-        </>
-    );
-}
-
-function groupParameters(
-    parameters: OpenAPI.Parameters,
-    context: OpenAPIClientContext
-): Array<{
-    key: string;
-    label: string;
-    parameters: OpenAPI.Parameters;
-}> {
-    const sorted = ['path', 'query', 'header'];
-
-    const groups: Array<{
-        key: string;
-        label: string;
-        parameters: OpenAPI.Parameters;
-    }> = [];
-
-    parameters
-        .filter((parameter) => parameter.in)
-        .forEach((parameter) => {
-            const key = parameter.in;
-            const label = getParameterGroupName(parameter.in, context);
-            const group = groups.find((group) => group.key === key);
-            if (group) {
-                group.parameters.push(parameter);
-            } else {
-                groups.push({
-                    key,
-                    label,
-                    parameters: [parameter],
-                });
-            }
-        });
-
-    groups.sort((a, b) => sorted.indexOf(a.key) - sorted.indexOf(b.key));
-
-    return groups;
-}
-
-function getParameterGroupName(paramIn: string, context: OpenAPIClientContext): string {
-    switch (paramIn) {
-        case 'path':
-            return tString(context.translation, 'path_parameters');
-        case 'query':
-            return tString(context.translation, 'query_parameters');
-        case 'header':
-            return tString(context.translation, 'header_parameters');
-        default:
-            return paramIn;
-    }
-}
-
-/** Deduplicate parameters by name and in.
- * Some specs have both parameters define at path and operation level.
- * We only want to display one of them.
- * Parameters can have the wrong type (object instead of array) sometimes, we just return an empty array in that case.
- */
-function deduplicateParameters(parameters: OpenAPI.Parameters): OpenAPI.Parameters {
-    const seen = new Set();
-
-    return Array.isArray(parameters)
-        ? parameters.filter((param) => {
-              const key = `${param.name}:${param.in}`;
-
-              if (seen.has(key)) {
-                  return false;
-              }
-
-              seen.add(key);
-
-              return true;
-          })
-        : [];
-}