From 9b78692124e08e2f68e4ee532f4d8ea6b5029fca Mon Sep 17 00:00:00 2001 From: Brett Jephson Date: Fri, 20 Sep 2024 11:41:38 +0100 Subject: [PATCH] Formatting --- .../DocumentView/OpenAPI/OpenAPI.tsx | 6 +- .../DocumentView/OpenAPI/OpenAPIContext.tsx | 41 +++++++---- .../components/DocumentView/OpenAPI/style.css | 4 +- .../src/OpenAPIContextProvider.tsx | 68 ++++++++++++------- .../react-openapi/src/OpenAPIServerURL.tsx | 4 +- .../src/OpenAPIServerURLForm.tsx | 46 +++++++++---- .../src/OpenAPIServerURLVariable.tsx | 8 ++- .../react-openapi/src/ScalarApiButton.tsx | 2 +- packages/react-openapi/src/client.ts | 2 +- packages/react-openapi/src/utils.ts | 6 +- 10 files changed, 127 insertions(+), 60 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx index 1c907c928..bf18e3be5 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx @@ -55,16 +55,16 @@ async function OpenAPIBody(props: BlockProps) { chevronDown: , chevronRight: , edit: , - clear: + clear: , }, CodeBlock: PlainCodeBlock, defaultInteractiveOpened: context.mode === 'print', id: block.meta?.id, - blockKey: block.key + blockKey: block.key, }} className="openapi-block" /> - + ); } diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIContext.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIContext.tsx index 16a48beca..de4b2d840 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIContext.tsx +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIContext.tsx @@ -1,21 +1,38 @@ -'use client' +'use client'; -import { DocumentBlock } from "@gitbook/api"; -import { OpenAPIOperationData } from "@gitbook/react-openapi"; -import {OpenAPIContextProvider} from "@gitbook/react-openapi/client"; +import { DocumentBlock } from '@gitbook/api'; +import { OpenAPIOperationData } from '@gitbook/react-openapi'; +import { OpenAPIContextProvider } from '@gitbook/react-openapi/client'; import { useRouter, useSearchParams } from 'next/navigation'; import * as React from 'react'; -export default function OpenAPIContext(props: { children: React.ReactNode; block: DocumentBlock; data: OpenAPIOperationData }) { +export default function OpenAPIContext(props: { + children: React.ReactNode; + block: DocumentBlock; + data: OpenAPIOperationData; +}) { const { block, children, data } = props; const [isPending, startTransition] = React.useTransition(); const router = useRouter(); const searchParams = useSearchParams(); - return { - startTransition(() => { - const queryParams = new URLSearchParams(params ?? ''); - router.replace(`?${queryParams}`, { scroll: false }); - }) - }}>{children} -} \ No newline at end of file + return ( + { + startTransition(() => { + const queryParams = new URLSearchParams(params ?? ''); + router.replace(`?${queryParams}`, { scroll: false }); + }); + }} + > + {children} + + ); +} diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index cd2c8b5ca..54ef1adaf 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -370,7 +370,9 @@ @apply p-0.5 inline-flex text-dark/6 dark:text-light/6 hover:opacity-8; } -.openapi-edit-button { @apply p-0.5 ml-4 size-4; } +.openapi-edit-button { + @apply p-0.5 ml-4 size-4; +} .openapi-edit-button > * { @apply size-full; diff --git a/packages/react-openapi/src/OpenAPIContextProvider.tsx b/packages/react-openapi/src/OpenAPIContextProvider.tsx index 3ee32c4f4..b09ee2933 100644 --- a/packages/react-openapi/src/OpenAPIContextProvider.tsx +++ b/packages/react-openapi/src/OpenAPIContextProvider.tsx @@ -1,34 +1,52 @@ -'use client' +'use client'; import * as React from 'react'; import { OpenAPIOperationData } from './fetchOpenAPIOperation'; import { getServersURL } from './utils'; -type OpenAPIContextProps = { isPending?: boolean; serverUrl?: string; state?: Record | null, onUpdate: (params: Record | null) => void; } +type OpenAPIContextProps = { + isPending?: boolean; + serverUrl?: string; + state?: Record | null; + onUpdate: (params: Record | null) => void; +}; const OpenAPIContext = React.createContext(null); export function useOpenAPIContext() { return React.useContext(OpenAPIContext); } -export function OpenAPIContextProvider(props: { children: React.ReactNode; data: OpenAPIOperationData; isPending?: boolean; params?: Record; onUpdate: OpenAPIContextProps['onUpdate']; }) { +export function OpenAPIContextProvider(props: { + children: React.ReactNode; + data: OpenAPIOperationData; + isPending?: boolean; + params?: Record; + onUpdate: OpenAPIContextProps['onUpdate']; +}) { const { children, data, isPending, params, onUpdate } = props; - + const clientState = React.useMemo(() => { - if (!params) { return null; } + if (!params) { + return null; + } return parseClientStateModifiers(data, params); }, [data, params]); - const serverUrl = getServersURL(data.servers, clientState ?? undefined) + const serverUrl = getServersURL(data.servers, clientState ?? undefined); - return {children} + return ( + + {children} + + ); } - function parseClientStateModifiers(data: OpenAPIOperationData, params: Record) { if (!data) { return null; @@ -39,14 +57,16 @@ function parseClientStateModifiers(data: OpenAPIOperationData, params: Record>( - (result, key) => { - const selection = params[key]; - if (!isNaN(Number(selection))) { - result[key] = selection; - } - return result; - }, - { server: `${serverIndex}`, edit: params['edit'] }, - ) : null; -} \ No newline at end of file + return server + ? Object.keys(server.variables ?? {}).reduce>( + (result, key) => { + const selection = params[key]; + if (!isNaN(Number(selection))) { + result[key] = selection; + } + return result; + }, + { server: `${serverIndex}`, edit: params['edit'] }, + ) + : null; +} diff --git a/packages/react-openapi/src/OpenAPIServerURL.tsx b/packages/react-openapi/src/OpenAPIServerURL.tsx index 6b90a5c86..ec225c430 100644 --- a/packages/react-openapi/src/OpenAPIServerURL.tsx +++ b/packages/react-openapi/src/OpenAPIServerURL.tsx @@ -18,11 +18,11 @@ export function OpenAPIServerURL(props: { }) { const { path, servers, context } = props; const ctx = useOpenAPIContext(); - + const serverIndex = !isNaN(Number(ctx?.state?.server)) ? Number(ctx?.state?.server) : 0; const server = servers[serverIndex]; const parts = parseServerURL(server?.url ?? ''); - console.log({ ctxState: ctx?.state }) + console.log({ ctxState: ctx?.state }); return ( diff --git a/packages/react-openapi/src/OpenAPIServerURLForm.tsx b/packages/react-openapi/src/OpenAPIServerURLForm.tsx index 957d8d566..98aa20534 100644 --- a/packages/react-openapi/src/OpenAPIServerURLForm.tsx +++ b/packages/react-openapi/src/OpenAPIServerURLForm.tsx @@ -21,7 +21,7 @@ export function ServerURLForm(props: { if (index !== serverIndex) { update({ server: `${index}` ?? '0', - ...(ctx?.state?.edit ? { edit: 'true' } : undefined) + ...(ctx?.state?.edit ? { edit: 'true' } : undefined), }); } } @@ -37,12 +37,14 @@ export function ServerURLForm(props: { update({ server: `${formData.get('server')}` ?? '0', ...variables, - ...(ctx?.state?.edit ? { edit: 'true' } : undefined) + ...(ctx?.state?.edit ? { edit: 'true' } : undefined), }); } function update(variables?: Record) { - if (!context.blockKey) { return; } + if (!context.blockKey) { + return; + } ctx?.onUpdate({ block: context.blockKey, ...variables, @@ -51,22 +53,42 @@ export function ServerURLForm(props: { const isEditable = servers.length > 1 || server.variables; return ( -
{ e.preventDefault(); updateServerVariables(new FormData(e.currentTarget)); }} className="contents"> + { + e.preventDefault(); + updateServerVariables(new FormData(e.currentTarget)); + }} + className="contents" + >
{children} {ctx?.state?.edit && servers.length > 1 ? ( ) : null} - { isEditable ? : null} + {isEditable ? ( + + ) : null}
); diff --git a/packages/react-openapi/src/OpenAPIServerURLVariable.tsx b/packages/react-openapi/src/OpenAPIServerURLVariable.tsx index 83a316269..27e82a00c 100644 --- a/packages/react-openapi/src/OpenAPIServerURLVariable.tsx +++ b/packages/react-openapi/src/OpenAPIServerURLVariable.tsx @@ -16,7 +16,13 @@ export function OpenAPIServerURLVariable(props: { if (variable.enum && variable.enum.length > 0) { if (!selectable) { - return {!isNaN(Number(selectionIndex)) ? variable.enum[Number(selectionIndex)] : variable.default}; + return ( + + {!isNaN(Number(selectionIndex)) + ? variable.enum[Number(selectionIndex)] + : variable.default} + + ); } return ( diff --git a/packages/react-openapi/src/ScalarApiButton.tsx b/packages/react-openapi/src/ScalarApiButton.tsx index dcf1d7a70..af6257fca 100644 --- a/packages/react-openapi/src/ScalarApiButton.tsx +++ b/packages/react-openapi/src/ScalarApiButton.tsx @@ -57,7 +57,7 @@ export function ScalarApiButton(props: { /** * Wrap the rendering with a context to open the scalar modal. */ -export function ScalarApiClient(props: { children: React.ReactNode; }) { +export function ScalarApiClient(props: { children: React.ReactNode }) { const { children } = props; const ctx = useOpenAPIContext(); diff --git a/packages/react-openapi/src/client.ts b/packages/react-openapi/src/client.ts index 923168320..17e54c128 100644 --- a/packages/react-openapi/src/client.ts +++ b/packages/react-openapi/src/client.ts @@ -1,2 +1,2 @@ 'use client'; -export {OpenAPIContextProvider} from './OpenAPIContextProvider'; \ No newline at end of file +export { OpenAPIContextProvider } from './OpenAPIContextProvider'; diff --git a/packages/react-openapi/src/utils.ts b/packages/react-openapi/src/utils.ts index c94d11df2..d2d66e2be 100644 --- a/packages/react-openapi/src/utils.ts +++ b/packages/react-openapi/src/utils.ts @@ -12,7 +12,6 @@ export function createStateKey(key: string, scope?: string) { return scope ? `${scope}_${key}` : key; } - /** * Get the default URL for the server. */ @@ -20,7 +19,8 @@ export function getServersURL( servers: OpenAPIV3.ServerObject[], selectors?: Record, ): string { - const serverIndex = selectors && !isNaN(Number(selectors.server)) ? Number(selectors.server) : 0; + const serverIndex = + selectors && !isNaN(Number(selectors.server)) ? Number(selectors.server) : 0; const server = servers[serverIndex]; const parts = parseServerURL(server?.url ?? ''); @@ -48,4 +48,4 @@ export function parseServerURL(url: string) { } } return result; -} \ No newline at end of file +}