asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: redesign API runner (#8688)

Browse Source 
* fix up block style + plain theme color

* initial redesign

* docs: redesign API Runner

* revert yarn.lock changes
This commit is contained in:
Shahed Nasser
2024-08-21 17:48:16 +03:00
committed by GitHub
parent 539266559c
commit 64283d0e83
10 changed files with 194 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/packages/docs-ui/src/components/ApiRunner/FooterBackground/index.tsx
+47
View File
@@ -0,0 +1,47 @@
import React from "react"
export const ApiRunnerFooterBackground = () => {
return (
<svg
width="100%"
height="100%"
viewBox="0 0 641 44"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute top-0 left-0"
>
<rect
width="640"
height="44"
transform="translate(0.5)"
fill="var(--docs-bg-component)"
/>
<rect
width="640"
height="44"
transform="translate(0.5)"
fill="url(#pattern0_10459_12087)"
fillOpacity="0.04"
/>
<defs>
<pattern
id="pattern0_10459_12087"
patternContentUnits="objectBoundingBox"
width="0.009375"
height="0.136364"
>
<use
xlinkHref="#image0_10459_12087"
transform="scale(0.0015625 0.0227273)"
/>
</pattern>
<image
id="image0_10459_12087"
width="6"
height="6"
xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAZSURBVHgBxcghAQAAAIMw+pf+C+CZHLilebfsBfsvTewEAAAAAElFTkSuQmCC"
/>
</defs>
</svg>
)
}
www/packages/docs-ui/src/components/ApiRunner/ParamInputs/Default/index.tsx
+1
View File
@@ -97,6 +97,7 @@ export const ApiRunnerParamInput = ({
? (paramValue as number)
: `${paramValue}`
}
className="w-full"
/>
)
}
www/packages/docs-ui/src/components/ApiRunner/ParamInputs/index.tsx
+3 -5
View File
@@ -15,11 +15,9 @@ export const ApiRunnerParamInputs = ({
setValue,
}: ApiRunnerParamInputsProps) => {
return (
<div className="flex flex-col gap-docs_0.5">
<span className="text-compact-medium-plus text-medusa-fg-base">
{title}
</span>
<div className="flex gap-docs_0.5">
<div className="flex flex-col gap-docs_0.25 w-full">
<span className="txt-small-plus text-medusa-fg-subtle">{title}</span>
<div className="flex flex-col gap-docs_0.5">
{Object.keys(data).map((pathParam, index) => (
<ApiRunnerParamInput
paramName={pathParam}
www/packages/docs-ui/src/components/ApiRunner/index.tsx
+79 -49
View File
@@ -4,10 +4,13 @@ import React from "react"
import { useEffect, useMemo, useState } from "react"
import { useRequestRunner } from "../../hooks"
import { CodeBlock } from "../CodeBlock"
import { Card } from "../Card"
import { Button } from "../.."
import { ApiMethod, ApiTestingOptions } from "types"
import { ApiRunnerParamInputs } from "./ParamInputs"
import clsx from "clsx"
import { ArrowDownRightMini } from "@medusajs/icons"
import { ArrowRightDownIcon } from "../Icons/ArrowRightDown"
import { ApiRunnerFooterBackground } from "./FooterBackground"
type ApiRunnerProps = {
apiMethod: ApiMethod
@@ -71,54 +74,82 @@ export const ApiRunner = React.forwardRef<HTMLDivElement, ApiRunnerProps>(
}, [isRunning, ran])
return (
<div ref={ref}>
<div className="mb-docs_1" ref={ref}>
{manualTestTrigger && (
<Card className="font-base mb-docs_1" contentClassName="gap-docs_0.5">
{apiTestingOptions.pathData && (
<ApiRunnerParamInputs
data={apiTestingOptions.pathData}
title="Path Parameters"
baseObjPath="pathData"
setValue={
setApiTestingOptions as React.Dispatch<
React.SetStateAction<unknown>
>
}
/>
<div
className={clsx(
"bg-medusa-bg-component rounded-docs_DEFAULT",
"shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
"mb-docs_0.75"
)}
{apiTestingOptions.bodyData && (
<ApiRunnerParamInputs
data={apiTestingOptions.bodyData}
title="Request Body Parameters"
baseObjPath="bodyData"
setValue={
setApiTestingOptions as React.Dispatch<
React.SetStateAction<unknown>
>
}
/>
)}
{apiTestingOptions.queryData && (
<ApiRunnerParamInputs
data={apiTestingOptions.queryData}
title="Request Query Parameters"
baseObjPath="queryData"
setValue={
setApiTestingOptions as React.Dispatch<
React.SetStateAction<unknown>
>
}
/>
)}
<Button
onClick={() => {
setIsRunning(true)
setRan(false)
}}
>
<div
className={clsx(
"flex items-center gap-docs_0.75",
"px-docs_0.75 pb-docs_0.75 pt-docs_0.5"
)}
>
Send Request
</Button>
</Card>
<ArrowDownRightMini className="text-medusa-fg-muted" />
<div className="flex-1 flex items-center gap-docs_0.75">
{apiTestingOptions.pathData && (
<ApiRunnerParamInputs
data={apiTestingOptions.pathData}
title="Path Parameters"
baseObjPath="pathData"
setValue={
setApiTestingOptions as React.Dispatch<
React.SetStateAction<unknown>
>
}
/>
)}
{apiTestingOptions.bodyData && (
<ApiRunnerParamInputs
data={apiTestingOptions.bodyData}
title="Request Body Parameters"
baseObjPath="bodyData"
setValue={
setApiTestingOptions as React.Dispatch<
React.SetStateAction<unknown>
>
}
/>
)}
{apiTestingOptions.queryData && (
<ApiRunnerParamInputs
data={apiTestingOptions.queryData}
title="Request Query Parameters"
baseObjPath="queryData"
setValue={
setApiTestingOptions as React.Dispatch<
React.SetStateAction<unknown>
>
}
/>
)}
</div>
<ArrowRightDownIcon className="text-medusa-fg-muted" />
</div>
<div
className={clsx(
"border-t border-medusa-border-base",
"py-docs_0.5 px-docs_0.75 relative",
"flex justify-end items-center gap-docs_0.5"
)}
>
<ApiRunnerFooterBackground />
<Button
onClick={() => {
setIsRunning(true)
setRan(false)
}}
className="relative"
variant="secondary"
>
Send Request
</Button>
</div>
</div>
)}
{(isRunning || ran) && (
<CodeBlock
@@ -126,12 +157,11 @@ export const ApiRunner = React.forwardRef<HTMLDivElement, ApiRunnerProps>(
lang="json"
title="Testing Result"
collapsed={true}
blockStyle="subtle"
noReport={true}
badgeLabel={responseCode}
badgeLabel={responseCode || "Failed"}
badgeColor={
!responseCode
? undefined
? "red"
: responseCode.startsWith("2")
? "green"
: "red"