add stf

.changeset/fancy-sides-watch.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Use internal implementation for form in OpenAPI playground

examples/openapi/app/docs/[[...slug]]/page.tsx

@@ -1,8 +1,9 @@
 import { source } from '@/lib/source';
-import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/notebook/page';
 import { notFound } from 'next/navigation';
 import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';
+import { APIPage } from '@/components/api-page';
 
 export default async function Page(props: { params: Promise<{ slug?: string[] }> }) {
   const params = await props.params;
@@ -12,6 +13,18 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
     notFound();
   }
 
+  if (page.data.type === 'openapi') {
+    return (
+      <DocsPage toc={page.data.toc} full>
+        <DocsTitle>{page.data.title}</DocsTitle>
+        <DocsDescription>{page.data.description}</DocsDescription>
+        <DocsBody>
+          <APIPage {...page.data.getAPIPageProps()} />
+        </DocsBody>
+      </DocsPage>
+    );
+  }
+
   const MDX = page.data.body;
 
   return (

examples/openapi/app/global.css

@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/solar.css';
 @import 'fumadocs-ui/css/preset.css';
 @import 'fumadocs-openapi/css/preset.css';
 

examples/openapi/lib/layout.shared.tsx

@@ -1,10 +1,9 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
-import { Logo } from '@/app/logo';
 
 export function baseOptions(): BaseLayoutProps {
   return {
     nav: {
-      title: <Logo />,
+      title: 'OpenAPI Playground',
     },
   };
 }

examples/openapi/lib/source.ts

@@ -1,9 +1,17 @@
-import { loader } from 'fumadocs-core/source';
-import { openapiPlugin } from 'fumadocs-openapi/server';
+import { loader, multiple } from 'fumadocs-core/source';
+import { openapiPlugin, openapiSource } from 'fumadocs-openapi/server';
 import { docs } from 'fumadocs-mdx:collections/server';
+import { openapi } from './openapi';
 
-export const source = loader({
-  baseUrl: '/docs',
-  source: docs.toFumadocsSource(),
-  plugins: [openapiPlugin()],
-});
+export const source = loader(
+  multiple({
+    docs: docs.toFumadocsSource(),
+    openapi: await openapiSource(openapi, {
+      groupBy: 'tag',
+    }),
+  }),
+  {
+    baseUrl: '/docs',
+    plugins: [openapiPlugin()],
+  },
+);

packages/openapi/package.json

@@ -60,6 +60,7 @@
   },
   "dependencies": {
     "@fumari/json-schema-to-typescript": "^2.0.0",
+    "@fumari/stf": "workspace:^",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",