Skip to content

Commit

Permalink
feat: api playground in mobile (#581)
Browse files Browse the repository at this point in the history
  • Loading branch information
@abvthecity
abvthecity authored Mar 26, 2024
1 parent f3a844c commit 636bfcb
Show file tree
Hide file tree
Showing 10 changed files with 379 additions and 284 deletions.
2 changes: 1 addition & 1 deletion packages/commons/fdr-utils/src/getNavigationRoot.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,5 +164,5 @@ function findSiblings<T extends SidebarNodeRaw.ParentNode>(
return { items: [], node: undefined };
}

return { items: parent.items as T[], node: parents[navigationDepth] as T | undefined };
return { items: parent.items.filter(match) as T[], node: parents[navigationDepth] as T | undefined };
}
4 changes: 2 additions & 2 deletions packages/ui/app/src/api-playground/PlaygroundContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@ export const PlaygroundContextProvider: FC<PropsWithChildren> = ({ children }) =
const expandPlayground = useCallback(() => {
capturePosthogEvent("api_playground_opened");
setPlaygroundHeight((currentHeight) => {
const halfWindowHeight: number = window.innerHeight / 2;
return currentHeight < halfWindowHeight ? halfWindowHeight : currentHeight;
const windowHeight: number = window.innerHeight;
return currentHeight < windowHeight ? windowHeight : currentHeight;
});
setPlaygroundOpen(true);
}, [setPlaygroundHeight, setPlaygroundOpen]);
Expand Down
156 changes: 103 additions & 53 deletions packages/ui/app/src/api-playground/PlaygroundDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { EMPTY_OBJECT, visitDiscriminatedUnion } from "@fern-ui/core-utils";
import { Portal, Transition } from "@headlessui/react";
import { Cross1Icon } from "@radix-ui/react-icons";
import { TooltipProvider } from "@radix-ui/react-tooltip";
import clsx from "clsx";
import { atom, useAtom } from "jotai";
import { mapValues } from "lodash-es";
import { Dispatch, FC, SetStateAction, useCallback, useEffect, useMemo } from "react";
Expand All @@ -11,6 +12,7 @@ import { FernButton, FernButtonGroup } from "../components/FernButton";
import { FernErrorBoundary } from "../components/FernErrorBoundary";
import { FernTooltip, FernTooltipProvider } from "../components/FernTooltip";
import { useDocsContext } from "../contexts/docs-context/useDocsContext";
import { useViewportContext } from "../contexts/viewport-context/useViewportContext";
import {
FlattenedRootPackage,
ResolvedApiDefinition,
Expand Down Expand Up @@ -103,6 +105,7 @@ export const PlaygroundDrawer: FC<PlaygroundDrawerProps> = ({ apis }) => {

const types = matchedSection?.types ?? EMPTY_OBJECT;

const { layoutBreakpoint } = useViewportContext();
const [height, setHeight] = usePlaygroundHeight();

const setOffset = useCallback(
Expand Down Expand Up @@ -250,72 +253,119 @@ export const PlaygroundDrawer: FC<PlaygroundDrawerProps> = ({ apis }) => {
return null;
}

const mobileHeader = (
<div className="grid h-10 grid-cols-2 gap-2 px-4">
<div className="flex items-center">
<div className="-ml-3">
{selectionState != null ? (
<PlaygroundEndpointSelector apiGroups={apiGroups} />
) : (
<h6 className="t-accent">Select an endpoint to get started</h6>
)}
</div>
</div>

<div className="flex items-center justify-end">
<FernTooltipProvider>
<FernButtonGroup>
<FernTooltip
content={
<span className="space-x-4">
<span>Close API Playground</span>
<span className="text-faded font-mono">CTRL + `</span>
</span>
}
>
<FernButton
variant="minimal"
className="-mr-3"
icon={<Cross1Icon />}
onClick={collapsePlayground}
rounded
/>
</FernTooltip>
</FernButtonGroup>
</FernTooltipProvider>
</div>
</div>
);

const desktopHeader = (
<div className="grid h-10 grid-cols-3 gap-2 px-4">
<div className="flex items-center">
<span className="inline-flex items-baseline gap-2">
<span className="t-accent text-sm font-semibold">API Playground</span>
<span className="bg-tag-primary t-accent flex h-5 items-center rounded-md px-1.5 py-1 font-mono text-xs uppercase">
BETA
</span>
</span>
</div>

<div className="flex items-center justify-center">
{selectionState != null ? (
<PlaygroundEndpointSelector apiGroups={apiGroups} />
) : (
<h6 className="t-accent">Select an endpoint to get started</h6>
)}
</div>

<div className="flex items-center justify-end">
<FernTooltipProvider>
<FernButtonGroup>
<FernTooltip
content={
<span className="space-x-4">
<span>Close API Playground</span>
<span className="text-faded font-mono">CTRL + `</span>
</span>
}
>
<FernButton
variant="minimal"
className="-mr-2"
icon={<Cross1Icon />}
onClick={collapsePlayground}
rounded
/>
</FernTooltip>
</FernButtonGroup>
</FernTooltipProvider>
</div>
</div>
);

return (
<Portal>
<Transition
show={isPlaygroundOpen}
className="bg-background-translucent border-default max-h-vh-minus-header fixed inset-x-0 bottom-0 border-t backdrop-blur-xl"
style={{ height }}
className={clsx(
"bg-background-translucent border-default fixed inset-x-0 bottom-0 z-50 border-t backdrop-blur-xl",
{
"max-h-vh-minus-header": layoutBreakpoint !== "mobile",
"h-screen": layoutBreakpoint === "mobile",
},
)}
style={{ height: layoutBreakpoint !== "mobile" ? height : undefined }}
enter="ease-out transition-transform duration-300 transform"
enterFrom="translate-y-full"
enterTo="translate-y-0"
leave="ease-in transition-transform duration-200 transform"
leaveFrom="translate-y-0"
leaveTo="translate-y-full"
>
<div
className="group absolute inset-x-0 -top-0.5 h-0.5 cursor-row-resize after:absolute after:inset-x-0 after:-top-3 after:h-4 after:content-['']"
onMouseDown={handleVerticalResize}
>
<div className="bg-accent absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100 group-active:opacity-100" />
<div className="relative -top-6 z-30 mx-auto w-fit p-4 pb-0">
<div className="bg-accent h-1 w-10 rounded-full" />
</div>
</div>
<div className="flex h-full flex-col rounded-lg">
<div>
<div className="grid h-10 grid-cols-3 gap-2 px-4">
<div className="flex items-center">
<span className="inline-flex items-baseline gap-2">
<span className="t-accent text-sm font-semibold">API Playground</span>
<span className="bg-tag-primary t-accent flex h-5 items-center rounded-md px-1.5 py-1 font-mono text-xs uppercase">
BETA
</span>
</span>
</div>

<div className="flex items-center justify-center">
{selectionState != null ? (
<PlaygroundEndpointSelector apiGroups={apiGroups} />
) : (
<h6 className="t-accent">Select an endpoint to get started</h6>
)}
</div>

<div className="flex items-center justify-end">
<FernTooltipProvider>
<FernButtonGroup>
<FernTooltip
content={
<span className="space-x-4">
<span>Close API Playground</span>
<span className="text-faded font-mono">CTRL + `</span>
</span>
}
>
<FernButton
variant="minimal"
className="-mr-2"
icon={<Cross1Icon />}
onClick={collapsePlayground}
rounded
/>
</FernTooltip>
</FernButtonGroup>
</FernTooltipProvider>
</div>
{layoutBreakpoint !== "mobile" && (
<div
className="group absolute inset-x-0 -top-0.5 h-0.5 cursor-row-resize after:absolute after:inset-x-0 after:-top-3 after:h-4 after:content-['']"
onMouseDown={handleVerticalResize}
>
<div className="bg-accent absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100 group-active:opacity-100" />
<div className="relative -top-6 z-30 mx-auto w-fit p-4 pb-0">
<div className="bg-accent h-1 w-10 rounded-full" />
</div>
</div>
)}
<div className="flex h-full flex-col rounded-lg">
<div>{layoutBreakpoint === "mobile" ? mobileHeader : desktopHeader}</div>
<FernErrorBoundary component="PlaygroundDrawer" className="flex h-full items-center justify-center">
{selectionState?.type === "endpoint" && matchedEndpoint != null ? (
<PlaygroundEndpoint
Expand Down
14 changes: 4 additions & 10 deletions packages/ui/app/src/api-playground/PlaygroundEndpoint.css
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,19 @@
.playground-endpoint {
@apply flex min-w-0 flex-1 shrink items-start gap-2;
@apply px-2 w-full;
/* @apply hover:overflow-visible; */
}

.playground-endpoint-url {
@apply truncate break-all font-mono text-xs;
/* @apply hover:whitespace-normal; */
@apply py-1;
}

.playground-endpoint:hover .playground-endpoint-url {
/* .playground-endpoint:hover .playground-endpoint-url {
@apply whitespace-normal;
}
} */

.playground-endpoint-copy-button {
@apply hidden -mt-1;
}

.playground-endpoint:hover .playground-endpoint-copy-button {
@apply inline-block;
@apply -mt-1 ml-auto -mr-3;
}

.playground-endpoint-baseurl {
Expand All @@ -31,7 +25,7 @@
}

.mask-grad-top {
mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 24px);
mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 100%) 24px);
}

/* .mask-grad-bottom {
Expand Down
Loading

0 comments on commit 636bfcb

Please sign in to comment.