OpenAPI: Support disablePlayground option

.changeset/wild-steaks-lay.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Support `disablePlayground` option

package.json

@@ -25,7 +25,7 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "5.1.0",
     "eslint-plugin-tailwindcss": "^3.18.0",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.0",
     "rimraf": "^6.0.1",
     "tsup": "8.3.6",
     "turbo": "2.4.0",

packages/create-app/src/index.ts

@@ -8,7 +8,6 @@ import {
   group,
   intro,
   isCancel,
-  log,
   outro,
   select,
   spinner,

packages/openapi/package.json

@@ -20,6 +20,10 @@
       "import": "./dist/ui/index.js",
       "types": "./dist/ui/index.d.ts"
     },
+    "./ui/client": {
+      "import": "./dist/ui/client.js",
+      "types": "./dist/ui/client.d.ts"
+    },
     "./scalar": {
       "import": "./dist/scalar/index.js",
       "types": "./dist/scalar/index.d.ts"

packages/openapi/src/render/operation.tsx

@@ -16,6 +16,7 @@ import { Schema } from './schema';
 import { createMethod } from '@/server/create-method';
 import { methodKeys } from '@/build-routes';
 import { APIExample } from '@/render/operation/api-example';
+import { MethodLabel } from '@/ui/components/method-label';
 
 export interface CodeSample {
   lang: string;
@@ -189,7 +190,16 @@ export function Operation({
   const info = (
     <ctx.renderer.APIInfo head={headNode} method={method.method} route={path}>
       {type === 'operation' ? (
-        <ctx.renderer.APIPlayground path={path} method={method} ctx={ctx} />
+        ctx.disablePlayground ? (
+          <div className="flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose">
+            <MethodLabel className="text-xs">{method.method}</MethodLabel>
+            <code className="flex-1 overflow-auto text-nowrap text-[13px] text-fd-muted-foreground">
+              {path}
+            </code>
+          </div>
+        ) : (
+          <ctx.renderer.APIPlayground path={path} method={method} ctx={ctx} />
+        )
       ) : null}
       {security && Object.keys(security).length > 0 ? (
         <>

packages/openapi/src/render/operation/playground.tsx

@@ -10,7 +10,7 @@ import {
   type ParsedSchema,
 } from '@/utils/schema';
 import { getSecurities, type Security } from '@/utils/get-security';
-import { APIPlayground } from '@/ui';
+import { APIPlayground } from '@/ui/client';
 
 interface BaseRequestField {
   name: string;

packages/openapi/src/render/renderer.tsx

@@ -11,7 +11,7 @@ import {
   ObjectCollapsible,
 } from '@/ui';
 import type { MethodInformation, RenderContext, ServerObject } from '@/types';
-import { Playground } from '@/render/playground';
+import { Playground } from '@/render/operation/playground';
 import { Sample, Samples } from '@/ui/client';
 
 export interface ResponsesProps {
@@ -112,7 +112,7 @@ export type {
   RequestSchema,
   PrimitiveRequestField,
   ReferenceSchema,
-} from '@/render/playground';
+} from '@/render/operation/playground';
 
 export function createRenders(
   shikiOptions: RenderContext['shikiOptions'],

packages/openapi/src/server/api-page.tsx

@@ -18,6 +18,7 @@ type ApiPageContextProps = Pick<
   | 'generateCodeSamples'
   | 'proxyUrl'
   | 'showResponseSchema'
+  | 'disablePlayground'
 >;
 
 export interface ApiPageProps extends ApiPageContextProps {
@@ -125,6 +126,7 @@ export async function getContext(
   return {
     schema,
     proxyUrl: options.proxyUrl,
+    disablePlayground: options.disablePlayground,
     showResponseSchema: options.showResponseSchema,
     renderer: {
       ...createRenders(options.shikiOptions),

packages/openapi/src/types.ts

@@ -41,6 +41,11 @@ export interface RenderContext {
 
   renderer: Renderer;
 
+  /**
+   * Disable API Playground
+   */
+  disablePlayground?: boolean;
+
   baseUrl: string;
   servers: ServerObject[];
 

packages/openapi/src/ui/components/method-label.tsx

@@ -14,7 +14,7 @@ export const badgeVariants = cva('font-mono font-medium', {
   },
 });
 
-export function getBadgeColor(
+function getMethodColor(
   method: string,
 ): VariantProps<typeof badgeVariants>['color'] {
   switch (method.toUpperCase()) {
@@ -59,7 +59,7 @@ export function MethodLabel({
   children: string;
 }) {
   return (
-    <Badge {...props} color={getBadgeColor(children)}>
+    <Badge {...props} color={getMethodColor(children)}>
       {children.toUpperCase()}
     </Badge>
   );

packages/openapi/src/ui/contexts/schema.tsx

@@ -1,5 +1,8 @@
 import { createContext, type RefObject, useContext } from 'react';
-import { type ReferenceSchema, type RequestSchema } from '@/render/playground';
+import {
+  type ReferenceSchema,
+  type RequestSchema,
+} from '@/render/operation/playground';
 
 interface SchemaContextType {
   references: Record<string, RequestSchema>;

packages/openapi/src/ui/index.tsx

@@ -10,8 +10,6 @@ import {
 import { ChevronDown } from 'lucide-react';
 import { ApiProvider } from '@/ui/contexts/api';
 
-export { useSchemaContext, APIPlayground } from './client';
-
 export function Root({
   children,
   baseUrl,

packages/openapi/src/ui/playground/fetcher.ts

@@ -1,5 +1,8 @@
 import { resolve } from '@/ui/playground/resolve';
-import { type ReferenceSchema, type RequestSchema } from '@/render/playground';
+import {
+  type ReferenceSchema,
+  type RequestSchema,
+} from '@/render/operation/playground';
 import { type DynamicField } from '@/ui/contexts/schema';
 
 export interface FetchOptions {

packages/openapi/src/ui/playground/get-default-values.ts

@@ -1,4 +1,7 @@
-import type { PrimitiveRequestField, RequestSchema } from '@/render/playground';
+import type {
+  PrimitiveRequestField,
+  RequestSchema,
+} from '@/render/operation/playground';
 import { resolve } from '@/ui/playground/resolve';
 
 export function getDefaultValue(

packages/openapi/src/ui/playground/index.tsx

@@ -28,7 +28,7 @@ import type {
   APIPlaygroundProps,
   PrimitiveRequestField,
   RequestSchema,
-} from '@/render/playground';
+} from '@/render/operation/playground';
 import { type DynamicField, SchemaContext } from '../contexts/schema';
 import { getStatusInfo } from '@/ui/playground/status-info';
 import { getUrl } from '@/utils/server-url';

packages/openapi/src/ui/playground/inputs.tsx

@@ -14,7 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/ui/components/select';
-import type { RequestSchema } from '@/render/playground';
+import type { RequestSchema } from '@/render/operation/playground';
 import { resolve } from '@/ui/playground/resolve';
 import { Input, labelVariants } from '@/ui/components/input';
 import { getDefaultValue } from '@/ui/playground/get-default-values';

packages/openapi/src/ui/playground/resolve.ts

@@ -1,4 +1,7 @@
-import { type ReferenceSchema, type RequestSchema } from '@/render/playground';
+import {
+  type ReferenceSchema,
+  type RequestSchema,
+} from '@/render/operation/playground';
 
 /**
  * Resolve reference

pnpm-lock.yaml

@@ -33,8 +33,8 @@ importers:
         specifier: ^3.18.0
         version: 3.18.0([email protected])
       prettier:
-        specifier: ^3.4.2
-        version: 3.4.2
+        specifier: ^3.5.0
+        version: 3.5.0
       rimraf:
         specifier: ^6.0.1
         version: 6.0.1
@@ -5904,8 +5904,8 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.4.2:
-    resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
+  prettier@3.5.0:
+    resolution: {integrity: sha512-quyMrVt6svPS7CjQ9gKb3GLEX/rl3BCL2oa/QkNcXv4YNVBC9olt3s+H7ukto06q7B1Qz46PbrKLO34PR6vXcA==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -7788,7 +7788,7 @@ snapshots:
     dependencies:
       '@apidevtools/json-schema-ref-parser': 11.7.3
       js-yaml: 4.1.0
-      prettier: 3.4.2
+      prettier: 3.5.0
 
   '@headlessui/[email protected]([email protected])':
     dependencies:
@@ -12481,7 +12481,7 @@ snapshots:
 
   [email protected]: {}
 
-  prettier@3.4.2: {}
+  prettier@3.5.0: {}
 
   [email protected]: {}