[WIP] API sandbox

package.json

@@ -37,12 +37,14 @@
     "remark-mdx-frontmatter": "^5.0.0"
   },
   "devDependencies": {
+    "@ariakit/react": "^0.4.21",
     "@csstools/postcss-global-data": "^3.0.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.6.2",
     "@lehoczky/postcss-fluid": "^1.0.3",
     "@next/env": "15.1.7",
-    "@radix-ui/react-dialog": "^1.1.5",
+    "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-select": "2.1.4",
     "@radix-ui/react-visually-hidden": "^1.1.2",
     "@shikijs/transformers": "^2.3.2",
     "@svgr/webpack": "^8.1.0",

src/app/(api)/api/[...slug]/page.tsx

@@ -139,7 +139,7 @@ const Page = async ({ params }: PageProps) => {
           <Heading size="h2" className={styles.fullWidth}>
             Request
           </Heading>
-          <ApiRequest {...operation} />
+          <ApiRequest operation={operation} operations={operations} />
           <Heading size="h2" className={styles.fullWidth}>
             Response
           </Heading>

src/app/_styles/variables.css

@@ -287,6 +287,7 @@
     --layer-navigation-mobile: 12;
     --layer-navigation: 10;
     --layer-overlay: 200;
+    --layer-select: 300;
 
     /* Specific measurements */
     --navbar-banner-height: 0px; /* Will be set by LegacySiteBanner. Remove when banner is removed.*/
@@ -296,7 +297,6 @@
       var(--navbar-banner-height) + var(--navbar-top-height) + var(--navbar-bottom-height)
     );
 
-
     @media (--phablet-up) {
       --navbar-top-height: 80px;
       --container-margin-home: var(--space-l);

src/components/ApiRequest/ApiRequest.module.css

@@ -1,10 +1,25 @@
 .request {
   grid-column: 1 / -1;
+  margin-block-end: var(--column-block-padding);
 }
 
-.url {
-  display: flex;
+.sandbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.urlCopy {
+  display: inline-flex;
   column-gap: var(--space-xs);
-  margin-block-end: var(--column-block-padding);
+
   word-break: break-all;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-m);
+  padding: var(--space-3xs) var(--space-2xs);
+}
+
+.url {
+  text-align: start;
+  padding-top: var(--space-5xs);
 }

src/components/ApiRequest/ApiRequest.tsx

@@ -1,21 +1,37 @@
+import { cx } from 'class-variance-authority';
+
 import { Tag } from '@/components';
+import { getParametersByParam, operationUrl } from '@/lib/operations/util';
 import { ApiOperation } from '@/lib/swagger/types';
 
 import { ApiGrid, ApiGridColumn, ApiGridRow } from '../ApiGrid';
 import { ApiMediaResponse } from '../ApiMedia';
+import { ApiSandboxDialog } from '../ApiSandbox';
+import { ClipboardCopy } from '../ClipboardCopy/ClipboardCopy';
 import styles from './ApiRequest.module.css';
 
-export const ApiRequest = (operation: ApiOperation) => {
-  const getParametersByParam = (param: string) => operation.parameters?.filter((p) => p.in === param);
-  const pathsParameters = getParametersByParam('path');
-  const queryParameters = getParametersByParam('query');
+export const ApiRequest = ({
+  operation,
+  operations,
+}: {
+  operation: ApiOperation;
+  operations: ApiOperation[];
+}) => {
+  const pathsParameters = getParametersByParam(operation, 'path');
+  const queryParameters = getParametersByParam(operation, 'query');
+
+  const url = operationUrl(operation);
 
   return (
     <>
       <div className={styles.request}>
-        <div className={styles.url}>
-          <Tag method={operation.method} />
-          {`${process.env.NEXT_PUBLIC_CLOUDSMITH_API_URL}/${operation.version}${operation.path}`}
+        <div className={styles.sandbox}>
+          <ClipboardCopy textToCopy={url} className={styles.urlCopy}>
+            <Tag className={styles.method} method={operation.method} />
+            <span className={cx('bodyS', styles.url)}>{url}</span>
+          </ClipboardCopy>
+
+          <ApiSandboxDialog operation={operation} operations={operations} />
         </div>
       </div>
 

src/components/ApiSandbox/ApiSandboxDialog.module.css

@@ -0,0 +1,62 @@
+.overlay {
+  display: grid;
+  position: fixed;
+  z-index: var(--layer-overlay);
+  inset: 0;
+  overflow-y: auto;
+  animation: overlayShow 500ms ease-in-out;
+  background-color: var(--color-overlay-dark);
+  place-items: start center;
+}
+
+.content {
+  --padding-block: var(--space-m);
+  --padding-inline: var(--space-l);
+
+  background-color: var(--base-color-white);
+  position: relative;
+  width: 100%;
+  max-width: 1274px;
+  overflow: hidden;
+  animation: contentShow 500ms ease-in-out;
+  border-radius: var(--border-radius-l);
+  box-shadow: 0 0 2px 1px var(--color-dialog-box-shadow);
+}
+
+.main {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.main > * {
+  flex: 50%;
+}
+
+@media (--phablet-up) {
+  .content {
+    margin-block: var(--space-l);
+  }
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    transform: translate(0, -3%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}

src/components/ApiSandbox/ApiSandboxDialog.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+
+import { Button } from '@/components/Button';
+import { ApiOperation } from '@/lib/swagger/types';
+
+import styles from './ApiSandboxDialog.module.css';
+import { Sandbox } from './Sandbox';
+
+type ApiSandboxDialogProps = {
+  operation: ApiOperation;
+  operations: ApiOperation[];
+};
+
+export const ApiSandboxDialog = ({ operation, operations }: ApiSandboxDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const [currentOperation, setCurrentOperation] = useState<ApiOperation>(operation);
+
+  useEffect(() => {
+    if (open) {
+      setCurrentOperation(operation);
+    }
+  }, [open]);
+
+  return (
+    <RadixDialog.Root open={open} onOpenChange={setOpen}>
+      <RadixDialog.Trigger asChild>
+        <Button withArrow size="medium" width="large">
+          Try it out
+        </Button>
+      </RadixDialog.Trigger>
+
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className={styles.overlay}>
+          <RadixDialog.Content className={styles.content}>
+            <VisuallyHidden>
+              <RadixDialog.Title>Try API</RadixDialog.Title>
+              <RadixDialog.Description>API Sandbox</RadixDialog.Description>
+              <RadixDialog.Close></RadixDialog.Close>
+            </VisuallyHidden>
+
+            <div className={styles.main}>
+              <Sandbox
+                currentOperation={currentOperation}
+                operations={operations}
+                onChangeOperation={(o) => setCurrentOperation(o)}
+              />
+            </div>
+          </RadixDialog.Content>
+        </RadixDialog.Overlay>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+};

src/components/ApiSandbox/Sandbox.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { getParametersByParam } from '@/lib/operations/util';
+import { ApiOperation } from '@/lib/swagger/types';
+
+import SandboxInput from './SandboxInput';
+import SandboxOutput from './SandboxOutput';
+
+type SandboxProps = {
+  currentOperation: ApiOperation;
+  operations: ApiOperation[];
+  onChangeOperation: (op: ApiOperation) => void;
+};
+
+export const Sandbox = ({ currentOperation, operations, onChangeOperation }: SandboxProps) => {
+  const pathsParameters = useMemo(
+    () => getParametersByParam(currentOperation, 'path') ?? [],
+    [currentOperation],
+  );
+  const queryParameters = useMemo(
+    () => getParametersByParam(currentOperation, 'query') ?? [],
+    [currentOperation],
+  );
+  const bodyParameters = currentOperation.requestBody;
+
+  const [pathParamState, setPathParamState] = useState<Record<string, string>>({});
+
+  const paramState = useMemo(() => ({ path: pathParamState }), [[pathParamState]]);
+
+  const updatePathParam = (name: string, value: string) => {
+    setPathParamState((v) => ({ ...v, [name]: value }));
+  };
+
+  useEffect(() => {
+    setPathParamState(Object.fromEntries(pathsParameters.map((p) => [p.name, ''])));
+  }, [pathsParameters]);
+
+  return (
+    <>
+      <SandboxInput
+        operation={currentOperation}
+        operations={operations}
+        paramState={paramState}
+        parameters={{
+          path: pathsParameters,
+          query: queryParameters,
+          body: bodyParameters,
+        }}
+        onChangeOperation={onChangeOperation}
+        onUpdateState={(type, name, value) => {
+          if (type === 'param') updatePathParam(name, value);
+        }}
+      />
+      <SandboxOutput operation={currentOperation} paramState={paramState} />
+    </>
+  );
+};

src/components/ApiSandbox/SandboxInput/SandboxInput.module.css

@@ -0,0 +1,39 @@
+.root {
+  min-width: 400px;
+  padding: var(--space-m);
+  max-height: calc(100vh - var(--space-l) * 2);
+  overflow-y: auto;
+}
+
+@media (--phablet-up) {
+  .root {
+    max-height: calc(100vh - var(--space-l) * 2);
+  }
+}
+
+.urlCopy {
+  width: 100%;
+  display: inline-flex;
+  column-gap: var(--space-xs);
+
+  word-break: break-all;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-m);
+  padding: var(--space-3xs) var(--space-2xs);
+}
+
+.url {
+  text-align: start;
+  padding-top: var(--space-5xs);
+  margin-right: auto;
+}
+
+.params {
+  --column-inline-padding: var(--space-m);
+  --column-block-padding: var(--space-m);
+
+  width: 100%;
+
+  /* display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr; */
+}