Skip to content

Commit e83724e

Browse files
devjscJoshua Croft
devjsc
and
Joshua Croft
authored
fix(docs): removing incomplete component (#1156)
Co-authored-by: Joshua Croft <[email protected]>
1 parent d36484a commit e83724e

File tree

8 files changed

+464
-435
lines changed

8 files changed

+464
-435
lines changed

‎components/api-endpoint.tsx

+172-136
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Code, Pre } from "nextra/components";
22
import { CodeBlock } from "./code";
33

44
import React, { useState } from "react";
5-
import { ApiIntro, Properties, Property, Row } from "./mdx";
5+
import { ApiIntro, Col, Properties, Property, Row } from "./mdx";
66
import Tooltip from "./tooltip";
77
import Link from "next/link";
88

@@ -179,7 +179,60 @@ const JsonCodeTab: React.FC<{
179179
return <Pre>{formattedJson}</Pre>;
180180
};
181181

182-
export const ApiRequestResponseCombined: React.FC<{
182+
export const ApiResponses: React.FC<{
183+
description?: string;
184+
samplePayload: unknown;
185+
properties?: PropertyType[];
186+
}> = (properties) => {
187+
return (
188+
<>
189+
<Row>
190+
<h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-mt-8 nx-text-2xl">
191+
Responses
192+
</h1>
193+
</Row>
194+
<Row>
195+
<Col>
196+
{properties.description ? (
197+
<ApiIntro>{properties.description}</ApiIntro>
198+
) : undefined}
199+
200+
{properties.properties && properties.properties.length > 0 ? (
201+
<Properties>
202+
{properties.properties.map((property) => {
203+
return (
204+
<Property
205+
key={property.name}
206+
name={property.name}
207+
required={property?.required}
208+
type={property.type}
209+
>
210+
{property.description}
211+
</Property>
212+
);
213+
})}
214+
</Properties>
215+
) : undefined}
216+
</Col>
217+
<Col>
218+
<CodeBlock
219+
hasCopy={true}
220+
codeBlocks={[
221+
{
222+
filename: "HTTP 200",
223+
component: (
224+
<JsonCodeTab samplePayload={properties.samplePayload} />
225+
),
226+
},
227+
]}
228+
/>
229+
</Col>
230+
</Row>
231+
</>
232+
);
233+
};
234+
235+
export const ApiRequest: React.FC<{
183236
apiUrl: string;
184237
method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
185238
path: string;
@@ -188,136 +241,78 @@ export const ApiRequestResponseCombined: React.FC<{
188241
properties?: PropertyType[];
189242
pathParameters?: Record<string, string>;
190243
isBearerTokenRequired?: boolean;
191-
responseDescription?: string;
192-
responses: unknown;
193-
responseProperties?: PropertyType[];
194244
}> = (properties) => {
195245
return (
196-
<div className="nx-flex nx-col-container nx-justify-between nx-gap-6 nx-height-adjust">
197-
<div className="nx-flex-grow">
198-
<Row>
199-
<div className="nx-endpoint nx-flex nx-text-base">
200-
<div className="nx-flex nx-items-center">
201-
<span className="nextra-content nx-text-sm nx-font-medium dark:nx-text-white-60">
202-
Endpoint:
203-
</span>
204-
<span className="nx-endpoint-method nx-ml-2 nx-text-sm nx-text-fetch-main dark:nx-text-white-90 dark:nx-bg-green-700">
205-
{properties.method}
206-
</span>
207-
</div>
208-
<span className="nx-text-purple nx-text-path nx-font-normal nx-text-sm dark:nx-text-indigo-250">
209-
{properties.path}
210-
</span>
211-
</div>
212-
</Row>
213-
214-
<div className="nx-flex nx-flex-col nx-gap-12">
215-
<div>
216-
<h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-text-2xl">
217-
Request
218-
</h1>
219-
220-
{properties.description ? (
221-
<ApiIntro>{properties.description}</ApiIntro>
222-
) : undefined}
223-
{properties.properties && properties.properties.length > 0 ? (
224-
<Properties>
225-
{properties.properties.map((property) => {
226-
return (
227-
<Property
228-
key={property.name}
229-
name={property.name}
230-
required={property?.required}
231-
type={property.type}
232-
>
233-
{property.description}
234-
</Property>
235-
);
236-
})}
237-
</Properties>
238-
) : undefined}
239-
</div>
240-
<div>
241-
<h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-text-2xl">
242-
Responses
243-
</h1>
244-
<div className="nx-pt-4 nx-gap-8">
245-
{properties.responseDescription ? (
246-
<ApiIntro>{properties.responseDescription}</ApiIntro>
247-
) : undefined}
248-
249-
{properties.responseProperties &&
250-
properties.responseProperties.length > 0 ? (
251-
<Properties>
252-
{properties.responseProperties.map((property) => {
253-
return (
254-
<Property
255-
key={property.name}
256-
name={property.name}
257-
required={property?.required}
258-
type={property.type}
259-
>
260-
{property.description}
261-
</Property>
262-
);
263-
})}
264-
</Properties>
265-
) : undefined}
266-
</div>
267-
</div>
268-
</div>
269-
</div>
270-
271-
<div className="nx-flex nx-flex-col nx-gap-12 nx-blocks-margin nx-sticky nx-top-24 nx-self-start">
272-
<CodeBlock
273-
hasCopy={true}
274-
codeBlocks={[
275-
{
276-
filename: "Curl",
277-
component: (
278-
<CurlCodeTab
279-
method={properties.method}
280-
url={properties.apiUrl + properties.path}
281-
samplePayload={properties.samplePayload}
282-
isBearerTokenRequired={properties.isBearerTokenRequired}
283-
/>
284-
),
285-
},
286-
{
287-
filename: "Python",
288-
component: (
289-
<PythonCodeTab
290-
method={properties.method}
291-
url={properties.apiUrl + properties.path}
292-
samplePayload={properties.samplePayload}
293-
pathParameters={properties.pathParameters}
294-
/>
295-
),
296-
},
297-
{
298-
filename: "JavaScript",
299-
component: (
300-
<JavascriptCodeTab
301-
method={properties.method}
302-
url={properties.apiUrl + properties.path}
303-
samplePayload={properties.samplePayload}
304-
pathParameters={properties.pathParameters}
305-
/>
306-
),
307-
},
308-
]}
309-
/>
310-
<CodeBlock
311-
hasCopy={true}
312-
codeBlocks={[
313-
{
314-
filename: "HTTP 200",
315-
component: <JsonCodeTab samplePayload={properties.responses} />,
316-
},
317-
]}
318-
/>
319-
</div>
320-
</div>
246+
<>
247+
<Row>
248+
<h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-mt-8 nx-text-2xl">
249+
Request
250+
</h1>
251+
</Row>
252+
<Row>
253+
<Col>
254+
{properties.description ? (
255+
<ApiIntro>{properties.description}</ApiIntro>
256+
) : undefined}
257+
{properties.properties && properties.properties.length > 0 ? (
258+
<Properties>
259+
{properties.properties.map((property) => {
260+
return (
261+
<Property
262+
key={property.name}
263+
name={property.name}
264+
required={property?.required}
265+
type={property.type}
266+
>
267+
{property.description}
268+
</Property>
269+
);
270+
})}
271+
</Properties>
272+
) : undefined}
273+
</Col>
274+
<Col>
275+
<CodeBlock
276+
hasCopy={true}
277+
codeBlocks={[
278+
{
279+
filename: "Curl",
280+
component: (
281+
<CurlCodeTab
282+
method={properties.method}
283+
url={properties.apiUrl + properties.path}
284+
samplePayload={properties.samplePayload}
285+
isBearerTokenRequired={properties.isBearerTokenRequired}
286+
/>
287+
),
288+
},
289+
{
290+
filename: "Python",
291+
component: (
292+
<PythonCodeTab
293+
method={properties.method}
294+
url={properties.apiUrl + properties.path}
295+
samplePayload={properties.samplePayload}
296+
pathParameters={properties.pathParameters}
297+
/>
298+
),
299+
},
300+
{
301+
filename: "JavaScript",
302+
component: (
303+
<JavascriptCodeTab
304+
method={properties.method}
305+
url={properties.apiUrl + properties.path}
306+
samplePayload={properties.samplePayload}
307+
pathParameters={properties.pathParameters}
308+
/>
309+
),
310+
},
311+
]}
312+
/>
313+
</Col>
314+
</Row>
315+
</>
321316
);
322317
};
323318

@@ -339,7 +334,7 @@ export const ApiEndpointRequestResponse: React.FC<{
339334
pathParameters?: Record<string, string>;
340335
isBearerTokenRequired?: boolean;
341336
}> = ({ isBearerTokenRequired = true, ...properties }) => {
342-
const isModalOpen = false;
337+
const [isModalOpen, setIsModalOpen] = useState(false);
343338
const [requestPayload, setRequestPayload] = useState<string | null>(
344339
properties.samplePayload
345340
? JSON.stringify(properties.samplePayload, null, 2)
@@ -354,11 +349,19 @@ export const ApiEndpointRequestResponse: React.FC<{
354349
properties.pathParameters || {},
355350
);
356351

352+
const openModal = () => {
353+
setIsModalOpen(true);
354+
};
355+
356+
const closeModal = () => {
357+
setIsModalOpen(false);
358+
};
359+
357360
const hitRequestWithoutLogin = async () => {
358361
try {
359362
setLoading(true);
360363
setError("");
361-
const requestPayloadJSON = JSON.parse(requestPayload || "{ }");
364+
const requestPayloadJSON = JSON.parse(requestPayload || "{}");
362365
const bodyPayload = properties.samplePayload?.code
363366
? JSON.stringify({
364367
code: JSON.stringify(properties.samplePayload.code),
@@ -385,6 +388,35 @@ export const ApiEndpointRequestResponse: React.FC<{
385388
};
386389
return (
387390
<>
391+
<Row>
392+
<p className="nx-endpoint nx-text-base">
393+
<span className="nextra-content nx-font-medium dark:nx-text-white-60">
394+
Endpoint:
395+
</span>
396+
<span className="nx-endpoint-method nx-text-fetch-main dark:nx-text-white-90 dark:nx-bg-green-700">
397+
{properties.method}
398+
</span>
399+
<span className="nx-text-purple nx-font-normal dark:nx-text-indigo-250">
400+
{properties.path}
401+
</span>
402+
{isModalOpen ? (
403+
<button
404+
className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl dark:nx-text-white dark:nx-bg-indigo-500"
405+
onClick={closeModal}
406+
>
407+
Cancel
408+
</button>
409+
) : (
410+
<button
411+
className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl dark:nx-text-white dark:nx-bg-indigo-500"
412+
onClick={openModal}
413+
>
414+
Run Code
415+
</button>
416+
)}
417+
</p>
418+
</Row>
419+
388420
{isModalOpen && (
389421
<div className="nx-bg-grey nx-px-6 nx-py-8 nx-rounded nx-mt-12 dark:nx-bg-dark-mode-white-2">
390422
<div className="nx-bg-white nextra-content nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
@@ -548,7 +580,7 @@ export const ApiEndpointRequestResponse: React.FC<{
548580
</div>
549581
</div>
550582
)}
551-
<ApiRequestResponseCombined
583+
<ApiRequest
552584
apiUrl={properties.apiUrl}
553585
method={properties.method}
554586
path={properties.path}
@@ -557,10 +589,14 @@ export const ApiEndpointRequestResponse: React.FC<{
557589
properties={properties.properties ?? undefined}
558590
pathParameters={properties.pathParameters ?? undefined}
559591
isBearerTokenRequired={isBearerTokenRequired}
560-
responses={properties.responses ?? undefined}
561-
responseProperties={properties.responseProperties ?? undefined}
562-
responseDescription={properties.responseDescription ?? undefined}
563592
/>
593+
{properties.responses ? (
594+
<ApiResponses
595+
samplePayload={properties.responses ?? undefined}
596+
properties={properties.responseProperties ?? undefined}
597+
description={properties.responseDescription ?? undefined}
598+
/>
599+
) : undefined}
564600
</>
565601
);
566602
};

‎components/mdx.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function Properties({ children }: { children: ReactNode }) {
5757
<div className="nx-my-6">
5858
<ul
5959
role="list"
60-
className="nx-m-0 nx-list-none nx-divide-y nx-divide-zinc-900/5 nx-p-0 nx-dark:divide-white/5"
60+
className="nx-m-0 nx-max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] nx-list-none nx-divide-y nx-divide-zinc-900/5 nx-p-0 nx-dark:divide-white/5"
6161
>
6262
{children}
6363
</ul>
@@ -247,9 +247,7 @@ export function Tab(properties) {
247247

248248
export function Row({ children }: { children: ReactNode }) {
249249
return (
250-
<div className="nx-pt-6 nx-mb-12 nx-gap-8 row-width nx-flex-mdx">
251-
{children}
252-
</div>
250+
<div className="nx-pt-4 nx-gap-8 row-width nx-flex-mdx">{children}</div>
253251
);
254252
}
255253

0 commit comments

Comments
 (0)