[WIP] API sandbox

package.json

@@ -22,6 +22,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "15.1.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@vercel/analytics": "^1.6.1",
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
@@ -37,11 +38,13 @@
     "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-select": "2.1.4",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-visually-hidden": "^1.1.2",
     "@shikijs/transformers": "^2.3.2",

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

@@ -62,6 +62,7 @@ export const generateStaticParams = async () => {
   // Generate swagger slugs
   const schemas = await parseSchemas();
   const operations = toOperations(schemas);
+
   const operationSlugs = operations.map((op) => ({ slug: toRouteSegments(op.slug) }));
 
   return mdxSlugs.concat(operationSlugs);
@@ -139,7 +140,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/ApiMedia/ApiMedia.tsx

@@ -6,6 +6,7 @@ import { cx } from 'class-variance-authority';
 
 import { Tag } from '@/components';
 import { ChevronIcon } from '@/icons/Chevron';
+import { textualSchemaRules } from '@/lib/operations/util';
 import { RequestBodyObject, ResponseObject, SchemaObject } from '@/lib/swagger/types';
 
 import styles from './ApiMedia.module.css';
@@ -150,121 +151,8 @@ const Property = ({
   );
 };
 
-/*
-  Based on:
-  https://spec.openapis.org/oas/v3.0.3.html#properties
-  https://datatracker.ietf.org/doc/html/draft-wright-json-schema-validation-00#section-5
-*/
 const ValidationRules = ({ schema }: { schema: SchemaObject }) => {
-  const rules = Object.entries(schema).reduce<string[]>((acc, [key, value]) => {
-    if (!value) {
-      return acc;
-    }
-
-    switch (key) {
-      // Validation keywords for numeric instances
-      case 'multipleOf':
-        acc.push(`multiple of ${value}`);
-        break;
-      case 'maximum':
-        if (!schema.minimum) {
-          acc.push(`length ≤ ${value}${schema.exclusiveMaximum ? ' (exclusive)' : ''}`);
-        }
-        break;
-      case 'minimum':
-        if (!schema.maximum) {
-          acc.push(`length ≥ ${value}${schema.exclusiveMinimum ? ' (exclusive)' : ''}`);
-        }
-        if (schema.maximum) {
-          acc.push(`length between ${value} and ${schema.maximum}`);
-        }
-        break;
-
-      // Validation keywords for strings
-      case 'maxLength':
-        if (!schema.minLength) {
-          acc.push(`length ≤ ${value}`);
-        }
-        break;
-      case 'minLength':
-        if (!schema.maxLength) {
-          acc.push(`length ≥ ${value}`);
-        }
-        if (schema.maxLength) {
-          acc.push(`length between ${value} and ${schema.maxLength}`);
-        }
-        break;
-      case 'pattern':
-        acc.push(`${value}`);
-        break;
-
-      // Validation keywords for arrays
-      case 'additionalItems':
-        if (value === false) {
-          acc.push('No additional items allowed');
-        }
-        break;
-      case 'maxItems':
-        if (!schema.minItems) {
-          acc.push(`items ≤ ${value}`);
-        }
-        break;
-      case 'minItems':
-        if (!schema.maxItems) {
-          acc.push(`items ≥ ${value}`);
-        }
-        if (schema.maxItems) {
-          const uniqueText = schema.uniqueItems ? ' (unique)' : '';
-          acc.push(`items between ${value} and ${schema.maxItems}${uniqueText}`);
-        }
-        break;
-      case 'uniqueItems':
-        if (value === true && !schema.minItems && !schema.maxItems) {
-          acc.push('Items must be unique');
-        }
-        break;
-
-      // Validation keywords for objects
-      case 'maxProperties':
-        acc.push(`length ≤ ${value}`);
-        break;
-      case 'minProperties':
-        acc.push(`length ≥ ${value}`);
-        break;
-      case 'additionalProperties':
-        if (value === false) {
-          acc.push('no additional properties allowed');
-        }
-        break;
-
-      // Validation keywords for any instance type
-      case 'enum':
-        acc.push(`Allowed values: ${value.join(', ')}`);
-        break;
-      case 'format':
-        // TODO: Decide what to do with format
-        // acc.push(`${value}`);
-        break;
-      case 'default':
-        acc.push(`Defaults to ${value}`);
-        break;
-
-      // TODO: What should we render here?
-      case 'allOf':
-        acc.push('Must match all schemas');
-        break;
-      case 'anyOf':
-        acc.push('Must match any schema');
-        break;
-      case 'oneOf':
-        acc.push('Must match exactly one schema');
-        break;
-      case 'not':
-        acc.push('Must not match schema');
-        break;
-    }
-    return acc;
-  }, []);
+  const rules = textualSchemaRules(schema);
 
   if (rules.length) {
     return rules.map((rule, index) => (

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, operation]);
+
+  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>
+  );
+};