Skip to content

Commit f89b31c

Browse files
amritkSamyPesse
andauthored
Upgrade to the new scalar client (#2539)
Co-authored-by: Samy Pessé <samypesse@gmail.com>
1 parent 630c3e8 commit f89b31c

File tree

11 files changed

+60
-182
lines changed

11 files changed

+60
-182
lines changed

.changeset/cool-falcons-push.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@gitbook/react-openapi': patch
3+
'gitbook': patch
4+
---
5+
6+
Upgrade the scalar api client package

bun.lockb

-15.8 KB
Binary file not shown.

packages/gitbook/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
"devDependencies": {
7070
"@argos-ci/playwright": "^2.0.0",
7171
"@playwright/test": "^1.42.1",
72-
"@cloudflare/next-on-pages": "^1.13.3",
72+
"@cloudflare/next-on-pages": "^1.13.5",
7373
"@cloudflare/workers-types": "^4.20240725.0",
7474
"@types/js-cookie": "^3.0.6",
7575
"@types/jsontoxml": "^1.0.5",

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export async function OpenAPI(props: BlockProps<DocumentBlockSwagger>) {
2929

3030
async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
3131
const { block, context } = props;
32-
const { data, error } = await fetchOpenAPIBlock(block, context.resolveContentRef);
32+
const { data, specUrl, error } = await fetchOpenAPIBlock(block, context.resolveContentRef);
3333

3434
if (error) {
3535
return (
@@ -41,14 +41,15 @@ async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
4141
);
4242
}
4343

44-
if (!data) {
44+
if (!data || !specUrl) {
4545
return null;
4646
}
4747

4848
return (
4949
<OpenAPIOperation
5050
data={data}
5151
context={{
52+
specUrl,
5253
icons: {
5354
chevronDown: <Icon icon="chevron-down" />,
5455
chevronRight: <Icon icon="chevron-right" />,

packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
@import '@scalar/api-client-react/style.css';
2+
13
.light .scalar-modal-layout,
4+
.light .scalar-app,
25
.light .scalar {
36
--scalar-color-1: color-mix(
47
in srgb,
@@ -50,8 +53,13 @@
5053
--scalar-button-1: rgb(49 53 56);
5154
--scalar-button-1-color: #fff;
5255
--scalar-button-1-hover: rgb(28 31 33);
56+
57+
--scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);
58+
--scalar-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px, rgba(0, 0, 0, 0.08) 0px 3px 8px 0px,
59+
#eeeeed 0px 0 0 1px;
5360
}
5461
.dark .scalar-modal-layout,
62+
.dark .scalar-app,
5563
.dark .scalar {
5664
--scalar-color-1: color-mix(
5765
in srgb,
@@ -102,8 +110,13 @@
102110
--scalar-button-1: #f6f6f6;
103111
--scalar-button-1-color: #000;
104112
--scalar-button-1-hover: #e7e7e7;
113+
114+
--scalar-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);
115+
--scalar-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px,
116+
0 0 0 1px rgba(255, 255, 255, 0.1);
105117
}
106118
.scalar-modal-layout,
119+
.scalar-app,
107120
.scalar {
108121
--scalar-font: initial;
109122
--scalar-font-code: var(--font-mono);
@@ -165,7 +178,7 @@
165178
.scalar-api-client__close:hover {
166179
cursor: pointer;
167180
}
168-
.scalar .scalar-app {
181+
.scalar .scalar-app-layout {
169182
background: var(--scalar-background-3);
170183
height: calc(100dvh - 100px);
171184
max-width: 1280px;
@@ -202,23 +215,6 @@
202215
cursor: pointer;
203216
animation: scalardrawerexitfadein 0.35s forwards;
204217
}
205-
.scalar .scalar-app-exit:before {
206-
content: '\00d7';
207-
font-family: sans-serif;
208-
position: absolute;
209-
top: 0;
210-
right: 0;
211-
font-size: 30px;
212-
font-weight: 100;
213-
line-height: 50px;
214-
right: 12px;
215-
text-align: center;
216-
color: white;
217-
opacity: 0.6;
218-
}
219-
.scalar .scalar-app-exit:hover:before {
220-
opacity: 1;
221-
}
222218
@keyframes scalardrawerexitfadein {
223219
from {
224220
opacity: 0;
@@ -305,11 +301,6 @@
305301
scrollbar-width: thin;
306302
-webkit-overflow-scrolling: touch;
307303
}
308-
@supports (-moz-appearance: none) {
309-
.scalar .custom-scroll {
310-
padding-right: 12px;
311-
}
312-
}
313304
.scalar .custom-scroll:hover {
314305
scrollbar-color: rgba(0, 0, 0, 0.24) transparent;
315306
}
@@ -347,3 +338,18 @@
347338
padding-right: 12px;
348339
}
349340
}
341+
.dark .scalar .client-wrapper-bg-color {
342+
background: linear-gradient(
343+
color-mix(in srgb, var(--tw-bg-base) 6%, transparent) 1%,
344+
color-mix(in srgb, var(--scalar-background-1) 30%, black) 9%
345+
);
346+
}
347+
.light .scalar .client-wrapper-bg-color {
348+
background-color: var(--scalar-background-2) !important;
349+
}
350+
.scalar .gitbook-show {
351+
display: block !important;
352+
}
353+
.scalar .gitbook-hidden {
354+
display: none !important;
355+
}

packages/gitbook/src/lib/openapi.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ export async function fetchOpenAPIBlock(
1919
block: DocumentBlockSwagger,
2020
resolveContentRef: (ref: ContentRef) => Promise<ResolvedContentRef | null>,
2121
): Promise<
22-
| { data: OpenAPIOperationData | null; error?: undefined }
23-
| { error: OpenAPIFetchError; data?: undefined }
22+
| { data: OpenAPIOperationData | null; specUrl: string | null; error?: undefined }
23+
| { error: OpenAPIFetchError; data?: undefined; specUrl?: undefined }
2424
> {
2525
const resolved = block.data.ref ? await resolveContentRef(block.data.ref) : null;
2626
if (!resolved || !block.data.path || !block.data.method) {
27-
return { data: null };
27+
return { data: null, specUrl: null };
2828
}
2929

3030
try {
@@ -37,7 +37,7 @@ export async function fetchOpenAPIBlock(
3737
fetcher,
3838
);
3939

40-
return { data };
40+
return { data, specUrl: resolved.href };
4141
} catch (error) {
4242
if (error instanceof OpenAPIFetchError) {
4343
return { error };

packages/react-openapi/package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
},
1111
"version": "0.6.0",
1212
"dependencies": {
13-
"@scalar/api-client-react": "0.3.7",
14-
"@scalar/oas-utils": "0.1.6",
13+
"@scalar/api-client-react": "1.0.65",
1514
"classnames": "^2.5.1",
1615
"flatted": "^3.2.9",
1716
"openapi-types": "^12.1.3",

packages/react-openapi/src/OpenAPICodeSample.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22

33
import { CodeSampleInput, codeSampleGenerators } from './code-samples';
4-
import { OpenAPIOperationData, toJSON } from './fetchOpenAPIOperation';
4+
import { OpenAPIOperationData } from './fetchOpenAPIOperation';
55
import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
66
import { InteractiveSection } from './InteractiveSection';
77
import { getServersURL } from './OpenAPIServerURL';
@@ -112,19 +112,14 @@ export function OpenAPICodeSample(props: {
112112
return null;
113113
}
114114

115-
async function fetchOperationData() {
116-
'use server';
117-
return toJSON(data);
118-
}
119-
120115
return (
121116
<InteractiveSection
122117
header="Request"
123118
className="openapi-codesample"
124119
tabs={samples}
125120
overlay={
126121
data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'] ? null : (
127-
<ScalarApiButton fetchOperationData={fetchOperationData} />
122+
<ScalarApiButton />
128123
)
129124
}
130125
/>

packages/react-openapi/src/OpenAPIOperation.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import classNames from 'classnames';
3+
import { ApiClientModalProvider } from '@scalar/api-client-react';
34

45
import { OpenAPIOperationData, toJSON } from './fetchOpenAPIOperation';
56
import { Markdown } from './Markdown';
@@ -8,7 +9,6 @@ import { OpenAPIResponseExample } from './OpenAPIResponseExample';
89
import { OpenAPIServerURL } from './OpenAPIServerURL';
910
import { OpenAPISpec } from './OpenAPISpec';
1011
import { OpenAPIClientContext, OpenAPIContextProps } from './types';
11-
import { ScalarApiClient } from './ScalarApiButton';
1212

1313
/**
1414
* Display an interactive OpenAPI operation.
@@ -28,7 +28,10 @@ export function OpenAPIOperation(props: {
2828
};
2929

3030
return (
31-
<ScalarApiClient>
31+
<ApiClientModalProvider
32+
configuration={{ spec: { url: context.specUrl } }}
33+
initialRequest={{ path: data.path, method: data.method }}
34+
>
3235
<div className={classNames('openapi-operation', className)}>
3336
<div className="openapi-intro">
3437
<h2 className="openapi-summary" id={context.id}>
@@ -64,6 +67,6 @@ export function OpenAPIOperation(props: {
6467
</div>
6568
</div>
6669
</div>
67-
</ScalarApiClient>
70+
</ApiClientModalProvider>
6871
);
6972
}

0 commit comments

Comments
 (0)