@gitbook/react-openapi 1.4.3 → 1.5.1

package/src/OpenAPITabs.tsx

@@ -1,147 +0,0 @@
-'use client';
-
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { type Key, Tab, TabList, TabPanel, Tabs, type TabsProps } from 'react-aria-components';
-import { useEventCallback } from 'usehooks-ts';
-import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
-
-export type TabItem = {
-    key: Key;
-    label: string;
-    body: React.ReactNode;
-    footer?: React.ReactNode;
-};
-
-type OpenAPITabsContextData = {
-    items: TabItem[];
-    selectedTab: TabItem | null;
-};
-
-const OpenAPITabsContext = createContext<OpenAPITabsContextData | null>(null);
-
-function useOpenAPITabsContext() {
-    const context = useContext(OpenAPITabsContext);
-    if (!context) {
-        throw new Error('OpenAPITabsContext is missing');
-    }
-    return context;
-}
-
-/**
- * The OpenAPI Tabs wrapper component.
- */
-export function OpenAPITabs(
-    props: React.PropsWithChildren<TabsProps & { items: TabItem[]; stateKey?: string }>
-) {
-    const { children, items, stateKey } = props;
-    const [tabKey, setTabKey] = useState<Key | null>(() => {
-        if (stateKey && typeof window !== 'undefined') {
-            const store = getOrCreateStoreByKey(stateKey);
-            const tabKey = store.getState().key;
-            if (tabKey) {
-                return tabKey;
-            }
-        }
-        return items[0]?.key ?? null;
-    });
-    const selectTab = useEventCallback((key: Key | null) => {
-        if (!key || key === tabKey) {
-            return;
-        }
-        const tab = items.find((item) => item.key === key);
-        if (!tab) {
-            return;
-        }
-        setTabKey(key);
-    });
-    const selectedTab = items.find((item) => item.key === tabKey) ?? items[0] ?? null;
-    const cancelDeferRef = useRef<(() => void) | null>(null);
-    useEffect(() => {
-        if (!stateKey) {
-            return undefined;
-        }
-        const store = getOrCreateStoreByKey(stateKey);
-        return store.subscribe((state) => {
-            cancelDeferRef.current?.();
-            cancelDeferRef.current = defer(() => selectTab(state.key));
-        });
-    }, [stateKey, selectTab]);
-    useEffect(() => {
-        return () => cancelDeferRef.current?.();
-    }, []);
-    const contextValue = useMemo(() => ({ items, selectedTab }), [items, selectedTab]);
-    return (
-        <OpenAPITabsContext.Provider value={contextValue}>
-            <Tabs
-                className="openapi-tabs"
-                onSelectionChange={(tabKey) => {
-                    selectTab(tabKey);
-                    if (stateKey) {
-                        const store = getOrCreateStoreByKey(stateKey);
-                        store.setState({ key: tabKey });
-                    }
-                }}
-                selectedKey={tabKey}
-            >
-                {children}
-            </Tabs>
-        </OpenAPITabsContext.Provider>
-    );
-}
-
-const defer = (fn: () => void) => {
-    const id = setTimeout(fn, 0);
-    return () => clearTimeout(id);
-};
-
-/**
- * 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() {
-    const { items } = useOpenAPITabsContext();
-
-    return (
-        <TabList className="openapi-tabs-list">
-            {items.map((tab) => (
-                <Tab
-                    key={tab.key}
-                    id={tab.key}
-                    style={({ isFocusVisible }) => ({
-                        outline: isFocusVisible
-                            ? '2px solid rgb(var(--primary-color-500)/0.4)'
-                            : 'none',
-                    })}
-                    className="openapi-tabs-tab"
-                >
-                    {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() {
-    const { selectedTab } = useOpenAPITabsContext();
-
-    if (!selectedTab) {
-        return null;
-    }
-
-    const key = selectedTab.key.toString();
-
-    return (
-        <TabPanel id={key} className="openapi-tabs-panel">
-            <div className="openapi-panel-body">{selectedTab.body}</div>
-            {selectedTab.footer ? (
-                <div className="openapi-panel-footer">{selectedTab.footer}</div>
-            ) : null}
-        </TabPanel>
-    );
-}

package/src/OpenAPIWebhook.tsx

@@ -1,33 +0,0 @@
-import clsx from 'clsx';
-import { OpenAPIWebhookExample } from './OpenAPIWebhookExample';
-import { OpenAPIColumnSpec } from './common/OpenAPIColumnSpec';
-import { OpenAPISummary } from './common/OpenAPISummary';
-import { type OpenAPIContextInput, resolveOpenAPIContext } from './context';
-import type { OpenAPIWebhookData } from './types';
-
-/**
- * Display an interactive OpenAPI webhook.
- */
-export function OpenAPIWebhook(props: {
-    className?: string;
-    data: OpenAPIWebhookData;
-    context: OpenAPIContextInput;
-}) {
-    const { className, data, context: contextInput } = props;
-
-    const context = resolveOpenAPIContext(contextInput);
-
-    return (
-        <div className={clsx('openapi-webhook', 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">
-                        <OpenAPIWebhookExample data={data} context={context} />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/OpenAPIWebhookExample.tsx

@@ -1,60 +0,0 @@
-import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import { OpenAPIEmptyExample } from './OpenAPIExample';
-import { OpenAPIMediaTypeContent } from './OpenAPIMediaType';
-import { type OpenAPIContext, getOpenAPIClientContext } from './context';
-import type { OpenAPIWebhookData } from './types';
-import { getExamples } from './util/example';
-import { createStateKey } from './utils';
-
-export function OpenAPIWebhookExample(props: {
-    data: OpenAPIWebhookData;
-    context: OpenAPIContext;
-}) {
-    const { data, context } = props;
-    const { operation } = data;
-
-    const items = (() => {
-        if (!operation.requestBody) {
-            return [];
-        }
-
-        return Object.entries(
-            operation.requestBody.content as Record<string, OpenAPIV3.MediaTypeObject | null>
-        ).map(([key, value]) => {
-            const schema = value?.schema;
-
-            if (!schema) {
-                return {
-                    key,
-                    label: key,
-                    body: <OpenAPIEmptyExample context={context} />,
-                };
-            }
-
-            return {
-                key,
-                label: key,
-                body: <></>,
-                examples: getExamples({
-                    mediaTypeObject: value,
-                    mediaType: key,
-                    context,
-                }),
-            };
-        });
-    })();
-
-    return (
-        <div className="openapi-panel">
-            <h4 className="openapi-panel-heading">Payload</h4>
-            <div className="openapi-panel-body">
-                <OpenAPIMediaTypeContent
-                    selectIcon={context.icons.chevronDown}
-                    stateKey={createStateKey('request-body-media-type', context.blockKey)}
-                    items={items}
-                    context={getOpenAPIClientContext(context)}
-                />
-            </div>
-        </div>
-    );
-}

package/src/ScalarApiButton.tsx

@@ -1,132 +0,0 @@
-'use client';
-
-import { ApiClientModalProvider, useApiClientModal } from '@scalar/api-client-react';
-import { Suspense, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import type { OpenAPIV3_1 } from '@gitbook/openapi-parser';
-import { useOpenAPIOperationContext } from './OpenAPIOperationContext';
-import { useOpenAPIPrefillContext } from './OpenAPIPrefillContextProvider';
-import type { OpenAPIClientContext } from './context';
-import { t } from './translate';
-import type { OpenAPIOperationData } from './types';
-import { resolveTryItPrefillForOperation } from './util/tryit-prefill';
-
-/**
- * Button which launches the Scalar API Client
- */
-export function ScalarApiButton(props: {
-    method: OpenAPIV3_1.HttpMethods;
-    path: string;
-    securities: OpenAPIOperationData['securities'];
-    servers: OpenAPIOperationData['servers'];
-    specUrl: string;
-    context: OpenAPIClientContext;
-}) {
-    const { method, path, securities, servers, specUrl, context } = props;
-    const [isOpen, setIsOpen] = useState(false);
-    const controllerRef = useRef<ScalarModalControllerRef>(null);
-
-    return (
-        <div className="scalar scalar-activate">
-            <button
-                className="scalar-activate-button button"
-                onClick={() => {
-                    controllerRef.current?.openClient?.();
-                    setIsOpen(true);
-                }}
-            >
-                {t(context.translation, 'test_it')}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 12" fill="currentColor">
-                    <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>
-            </button>
-
-            {isOpen &&
-                createPortal(
-                    <Suspense fallback={null}>
-                        <ScalarModal
-                            controllerRef={controllerRef}
-                            method={method}
-                            path={path}
-                            securities={securities}
-                            servers={servers}
-                            specUrl={specUrl}
-                        />
-                    </Suspense>,
-                    document.body
-                )}
-        </div>
-    );
-}
-
-function ScalarModal(props: {
-    method: OpenAPIV3_1.HttpMethods;
-    path: string;
-    securities: OpenAPIOperationData['securities'];
-    servers: OpenAPIOperationData['servers'];
-    specUrl: string;
-    controllerRef: React.Ref<ScalarModalControllerRef>;
-}) {
-    const { method, path, securities, servers, specUrl, controllerRef } = props;
-
-    const getPrefillInputContextData = useOpenAPIPrefillContext();
-    const prefillInputContext = getPrefillInputContextData();
-
-    const prefillConfig = resolveTryItPrefillForOperation({
-        operation: { securities, servers },
-        prefillInputContext,
-    });
-
-    return (
-        <ApiClientModalProvider
-            configuration={{ url: specUrl, ...prefillConfig }}
-            initialRequest={{ method, path }}
-        >
-            <ScalarModalController method={method} path={path} controllerRef={controllerRef} />
-        </ApiClientModalProvider>
-    );
-}
-
-type ScalarModalControllerRef = {
-    openClient: (() => void) | undefined;
-};
-
-function ScalarModalController(props: {
-    method: OpenAPIV3_1.HttpMethods;
-    path: string;
-    controllerRef: React.Ref<ScalarModalControllerRef>;
-}) {
-    const { method, path, controllerRef } = props;
-    const client = useApiClientModal();
-    const openScalarClient = client?.open;
-    const { onOpenClient: trackClientOpening } = useOpenAPIOperationContext();
-    const openClient = useMemo(() => {
-        if (openScalarClient) {
-            return () => {
-                openScalarClient({
-                    method,
-                    path,
-                    _source: 'gitbook',
-                });
-                trackClientOpening({ method, path });
-            };
-        }
-        return null;
-    }, [openScalarClient, method, path, trackClientOpening]);
-    useImperativeHandle(
-        controllerRef,
-        () => ({ openClient: openClient ? () => openClient() : undefined }),
-        [openClient]
-    );
-
-    // Open at mount
-    useEffect(() => {
-        openClient?.();
-    }, [openClient]);
-    return null;
-}

package/src/StaticSection.tsx

@@ -1,91 +0,0 @@
-import clsx from 'clsx';
-import { type ComponentPropsWithoutRef, forwardRef } from 'react';
-
-export function Section(props: ComponentPropsWithoutRef<'div'>) {
-    return <div {...props} className={clsx('openapi-section', props.className)} />;
-}
-
-export function SectionHeader(props: ComponentPropsWithoutRef<'div'>) {
-    return (
-        <div
-            {...props}
-            className={clsx(
-                'openapi-section-header',
-                props.className ? `${props.className}-header` : undefined
-            )}
-        />
-    );
-}
-
-export function SectionHeaderContent(props: ComponentPropsWithoutRef<'div'>) {
-    return (
-        <div
-            {...props}
-            className={clsx(
-                'openapi-section-header-content',
-                props.className && `${props.className}-header-content`
-            )}
-        />
-    );
-}
-
-export const SectionBody = forwardRef(function SectionBody(
-    props: ComponentPropsWithoutRef<'div'>,
-    ref: React.ForwardedRef<HTMLDivElement>
-) {
-    return (
-        <div
-            ref={ref}
-            {...props}
-            className={clsx('openapi-section-body', props.className && `${props.className}-body`)}
-        />
-    );
-});
-
-export function SectionFooter(props: ComponentPropsWithoutRef<'div'>) {
-    return (
-        <div
-            {...props}
-            className={clsx(
-                'openapi-section-footer',
-                props.className && `${props.className}-footer`
-            )}
-        />
-    );
-}
-
-export function SectionFooterContent(props: ComponentPropsWithoutRef<'div'>) {
-    return (
-        <div
-            {...props}
-            className={clsx(
-                'openapi-section-footer-content',
-                props.className && `${props.className}-footer-content`
-            )}
-        />
-    );
-}
-
-export function StaticSection(props: {
-    className: string;
-    header?: React.ReactNode;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-}) {
-    const { className, header, children, footer } = props;
-    return (
-        <Section className={className}>
-            {header ? (
-                <SectionHeader className={className}>
-                    <SectionHeaderContent className={className}>{header}</SectionHeaderContent>
-                </SectionHeader>
-            ) : null}
-            <SectionBody className={className}>{children}</SectionBody>
-            {footer ? (
-                <SectionFooter className={className}>
-                    <SectionFooterContent className={className}>{footer}</SectionFooterContent>
-                </SectionFooter>
-            ) : null}
-        </Section>
-    );
-}

package/src/__snapshots__/json2xml.test.ts.snap

@@ -1,18 +0,0 @@
-// Bun Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`getUrlFromServerState indents correctly 1`] = `
-"<?xml version="1.0"?>
-<id>10</id>
-<name>doggie</name>
-<category>
-	<id>1</id>
-	<name>Dogs</name>
-</category>
-<photoUrls>string</photoUrls>
-<tags>
-	<id>0</id>
-	<name>string</name>
-</tags>
-<status>available</status>
-"
-`;