zudoku 0.3.0-dev.6 → 0.3.0-dev.61

package/src/lib/plugins/{api-key → api-keys}/index.tsx

@@ -1,26 +1,25 @@
-import logger from "loglevel";
-import { Outlet, useRouteError } from "react-router-dom";
+import { type RouteObject } from "react-router-dom";
 import invariant from "tiny-invariant";
-import { useAuth } from "../../authentication/hook.js";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
 import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
+  ProfileMenuPlugin,
 } from "../../core/plugins.js";
-import { Button } from "../../ui/Button.js";
+import { RouterError } from "../../errors/RouterError.js";
 import { CreateApiKey } from "./CreateApiKey.js";
+import { ProtectedRoute } from "./ProtectedRoute.js";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
 
-export type ApiKeyResults = Promise<ApiKey[]>;
 const DEFAULT_API_KEY_ENDPOINT =
   "https://zudoku-rewiringamerica-main-ef9c9c0.d2.zuplo.dev";
 
 export type ApiKeyService = {
-  getKeys: (context: DevPortalContext) => ApiKeyResults;
+  getKeys: (context: DevPortalContext) => Promise<ApiKey[]>;
   rollKey?: (id: string, context: DevPortalContext) => Promise<void>;
   deleteKey?: (id: string, context: DevPortalContext) => Promise<void>;
   updateKeyDescription?: (
-    apiKey: { jd: string; description: string },
+    apiKey: { id: string; description: string },
     context: DevPortalContext,
   ) => Promise<void>;
   getUsage?: (apiKeys: string[], context: DevPortalContext) => Promise<void>;
@@ -82,39 +81,9 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
   };
 };
 
-const ProtectedRoute = () => {
-  const auth = useAuth();
-
-  // TODO: should we suspend here somehow?
-  if (auth.isPending) {
-    return null;
-  }
-
-  return auth.isAuthenticated ? (
-    <Outlet />
-  ) : (
-    <div className="flex flex-col justify-center gap-2 items-center h-1/2 my-12">
-      Please login first to view this page
-      <Button onClick={() => auth.login()}>Login</Button>
-    </div>
-  );
-};
-
-const SettingsErrorBoundary = () => {
-  const error = useRouteError();
-  logger.error(String(error));
-
-  return (
-    <div className="flex flex-col justify-center gap-2 items-center h-1/2 my-12">
-      <h1>Something went wrong</h1>
-      {error instanceof Error && <p>{error.message}</p>}
-    </div>
-  );
-};
-
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
-): DevPortalPlugin & ApiIdentityPlugin => {
+): DevPortalPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {
   const endpoint =
     "endpoint" in options ? options.endpoint : DEFAULT_API_KEY_ENDPOINT;
 
@@ -122,6 +91,12 @@ export const apiKeyPlugin = (
     "getKeys" in options ? options : createDefaultHandler(endpoint);
 
   return {
+    getProfileMenuItems: () => [
+      {
+        label: "API Keys",
+        path: "/settings/api-keys",
+      },
+    ],
     getIdentities: async (context) => {
       try {
         const keys = await service.getKeys(context);
@@ -138,11 +113,12 @@ export const apiKeyPlugin = (
         return [];
       }
     },
-    getRoutes: () => {
+    getRoutes: (): RouteObject[] => {
+      // TODO: Make lazy
       return [
         {
           element: <ProtectedRoute />,
-          errorElement: <SettingsErrorBoundary />,
+          errorElement: <RouterError />,
           children: [
             {
               path: "/settings/api-keys",

package/src/lib/plugins/custom-page/index.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { RouteObject } from "react-router-dom";
+import { ProseClasses } from "../../components/Markdown.js";
+import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
+
+type CustomPageConfig = Array<{
+  path: string;
+  element: ReactNode;
+}>;
+
+export const customPagePlugin = (
+  config: CustomPageConfig,
+): DevPortalPlugin & NavigationPlugin => {
+  return {
+    getRoutes: (): RouteObject[] =>
+      config.map(({ path, element }) => ({
+        path,
+        // TODO: we should componentize prose pages
+        element: <div className={ProseClasses + " max-w-full"}>{element}</div>,
+      })),
+  };
+};

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -1,18 +1,18 @@
 import { useMDXComponents } from "@mdx-js/react";
+import { Helmet } from "@zudoku/react-helmet-async";
 import { useMemo, type PropsWithChildren, type ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
-import { Helmet } from "../../core/helmet.js";
-import { Link, useLocation } from "../../core/router.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
 import slugify from "../../util/slugify.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { Toc } from "./Toc.js";
-import type { MDXImport } from "./index.js";
+import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
 const MarkdownHeadings = {
   h2: ({ children, id }) => (
@@ -31,10 +31,12 @@ const MarkdownHeadings = {
 export const MdxPage = ({
   mdxComponent: MdxComponent,
   frontmatter = {},
+  defaultOptions,
   tableOfContents,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
     mdxComponent: MDXImport["default"];
+    defaultOptions?: MarkdownPluginDefaultOptions;
   }
 >) => {
   const navItem = useTopNavigationItem();
@@ -50,10 +52,11 @@ export const MdxPage = ({
 
   const title = frontmatter.title;
   const category = frontmatter.category ?? categoryTitle;
-  const hideToc = frontmatter.toc === false;
-
+  const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
   const pageTitle =
     tableOfContents.find((item) => item.depth === 1)?.value ?? title;
+  const hidePager =
+    frontmatter.disablePager ?? defaultOptions?.disablePager ?? false;
 
   const tocEntries =
     tableOfContents.find((item) => item.depth === 1)?.children ??
@@ -112,35 +115,49 @@ export const MdxPage = ({
         <MdxComponent
           components={{ ...useMDXComponents(), ...MarkdownHeadings }}
         />
-        <hr />
-        <div className="not-prose flex items-center justify-between gap-8">
-          {prev.path ? (
-            <Link
-              to={prev.path}
-              className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
-              title={typeof prev.label === "string" ? prev.label : undefined}
-            >
-              <div className="text-sm text-muted-foreground">
-                ← Previous page
-              </div>
-              <div className="text-lg text-primary truncate">{prev.label}</div>
-            </Link>
-          ) : (
-            <div className="flex-1" />
-          )}
-          {next.path ? (
-            <Link
-              to={next.path}
-              className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
-              title={typeof next.label === "string" ? next.label : undefined}
-            >
-              <div className="text-sm text-muted-foreground">Next page →</div>
-              <div className="text-lg text-primary truncate">{next.label}</div>
-            </Link>
-          ) : (
-            <div className="flex-1" />
-          )}
-        </div>
+        {!hidePager && (
+          <>
+            <hr />
+            <div className="not-prose flex items-center justify-between gap-8">
+              {prev.path ? (
+                <Link
+                  to={prev.path}
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  title={
+                    typeof prev.label === "string" ? prev.label : undefined
+                  }
+                >
+                  <div className="text-sm text-muted-foreground">
+                    ← Previous page
+                  </div>
+                  <div className="text-lg text-primary truncate">
+                    {prev.label}
+                  </div>
+                </Link>
+              ) : (
+                <div className="flex-1" />
+              )}
+              {next.path ? (
+                <Link
+                  to={next.path}
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  title={
+                    typeof next.label === "string" ? next.label : undefined
+                  }
+                >
+                  <div className="text-sm text-muted-foreground">
+                    Next page →
+                  </div>
+                  <div className="text-lg text-primary truncate">
+                    {next.label}
+                  </div>
+                </Link>
+              ) : (
+                <div className="flex-1" />
+              )}
+            </div>
+          </>
+        )}
       </div>
       <div className="hidden xl:block">
         {showToc && <Toc entries={tocEntries} />}

package/src/lib/plugins/markdown/Toc.tsx

@@ -1,4 +1,5 @@
 import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
+import { ListTreeIcon } from "lucide-react";
 import {
   useEffect,
   useRef,
@@ -8,7 +9,6 @@ import {
 } from "react";
 import { AnchorLink } from "../../components/AnchorLink.js";
 import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
-import { ListTreeIcon } from "../../core/icons.js";
 import { cn } from "../../util/cn.js";
 
 const DATA_ANCHOR_ATTR = "data-active";

package/src/lib/plugins/markdown/generateRoutes.tsx

@@ -1,12 +1,16 @@
+import { Navigate, type RouteObject } from "react-router-dom";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
-import { Navigate, type RouteObject } from "../../core/router.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
-import { MdxPage } from "./MdxPage.js";
-import type { MarkdownPluginOptions } from "./index.js";
+
+import {
+  MarkdownPluginDefaultOptions,
+  MarkdownPluginOptions,
+} from "./index.js";
 
 export const generateRoutes = (
   markdownFiles: MarkdownPluginOptions["markdownFiles"],
+  defaultOptions?: MarkdownPluginDefaultOptions,
 ): RouteObject[] => {
   const routes = Object.entries(markdownFiles).flatMap(
     ([file, importPromise]) => {
@@ -25,17 +29,23 @@ export const generateRoutes = (
       return {
         path: routePath,
         lazy: async () => {
+          const { MdxPage } = await import("./MdxPage.js");
           const { default: Component, ...props } = await importPromise();
-
           return {
-            element: <MdxPage mdxComponent={Component} {...props} />,
+            element: (
+              <MdxPage
+                mdxComponent={Component}
+                {...props}
+                defaultOptions={defaultOptions}
+              />
+            ),
           };
         },
       } satisfies RouteObject;
     },
   );
 
-  const rootRoutes = Array.from(
+  const rootRoutes: RouteObject[] = Array.from(
     new Set(routes.map((route) => route.path.split("/").at(0))),
   ).map((dir) => ({
     path: `/${dir}`,

package/src/lib/plugins/markdown/index.tsx

@@ -5,13 +5,19 @@ import { generateRoutes } from "./generateRoutes.js";
 
 export type MarkdownPluginOptions = {
   markdownFiles: Record<string, () => Promise<MDXImport>>;
+  defaultOptions?: MarkdownPluginDefaultOptions;
 };
+export type MarkdownPluginDefaultOptions = Pick<
+  Frontmatter,
+  "toc" | "disablePager"
+>;
 
 export type Frontmatter = {
   title?: string;
   description?: string;
   category?: string;
   toc?: boolean;
+  disablePager?: boolean;
 };
 
 export type MDXImport = {
@@ -22,10 +28,7 @@ export type MDXImport = {
 
 export const markdownPlugin = ({
   markdownFiles,
-}: MarkdownPluginOptions): DevPortalPlugin => {
-  return {
-    getRoutes() {
-      return generateRoutes(markdownFiles);
-    },
-  };
-};
+  defaultOptions,
+}: MarkdownPluginOptions): DevPortalPlugin => ({
+  getRoutes: () => generateRoutes(markdownFiles, defaultOptions),
+});

package/src/lib/plugins/openapi/OperationList.tsx

@@ -1,11 +1,17 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { DeveloperHint } from "../../components/DeveloperHint.js";
+import { ErrorPage } from "../../components/ErrorPage.js";
 import { Heading } from "../../components/Heading.js";
-import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { InlineCode } from "../../components/InlineCode.js";
+import { Markdown } from "../../components/Markdown.js";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
+import StaggeredRender from "./StaggeredRender.js";
+import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
-import { useOasConfig } from "./index.js";
+import { SchemaProseClasses } from "./util/prose.js";
 import { useQuery } from "./util/urql.js";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
@@ -90,11 +96,39 @@ export const OperationList = () => {
     context: suspenseContext,
   });
 
+  const error = result.error?.graphQLErrors.at(0);
+
+  // Looks like there is no Suspense level error handling (yet)?
+  // So we handle the error case in the component directly
+  if (error) {
+    return (
+      <ErrorPage
+        category="Error"
+        title="Schema cannot be displayed"
+        message={
+          <>
+            <DeveloperHint className="mb-4">
+              Check your configuration value <InlineCode>apis.type</InlineCode>{" "}
+              and <InlineCode>apis.input</InlineCode> in the Zudoku config.
+            </DeveloperHint>
+            An error occurred while trying to fetch the API reference:
+            <SyntaxHighlight code={error.toString()} language="plain" />
+          </>
+        }
+      />
+    );
+  }
+
   if (!result.data) return null;
 
   return (
     <div className="pt-[--padding-content-top]">
-      <div className={cn(ProseClasses, "mb-16")}>
+      <div
+        className={cn(
+          SchemaProseClasses,
+          "mb-16 max-w-full prose-img:max-w-prose",
+        )}
+      >
         <CategoryHeading>Overview</CategoryHeading>
         <Heading level={1} id="description" registerSidebarAnchor>
           {result.data.schema.title}
@@ -108,17 +142,19 @@ export const OperationList = () => {
             {tag.name && <CategoryHeading>{tag.name}</CategoryHeading>}
             {tag.description && (
               <Markdown
-                className={`${ProseClasses} mt-2 mb-12`}
+                className={`${SchemaProseClasses} mt-2 mb-12`}
                 content={tag.description}
               />
             )}
             <div className="operation mb-12">
-              {tag.operations.map((fragment) => (
-                <OperationListItem
-                  key={fragment.slug}
-                  operationFragment={fragment}
-                />
-              ))}
+              <StaggeredRender>
+                {tag.operations.map((fragment) => (
+                  <OperationListItem
+                    key={fragment.slug}
+                    operationFragment={fragment}
+                  />
+                ))}
+              </StaggeredRender>
             </div>
           </div>
         ))}

package/src/lib/plugins/openapi/OperationListItem.tsx

@@ -1,11 +1,14 @@
 import { Heading } from "../../components/Heading.js";
-import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { Markdown } from "../../components/Markdown.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
+import { groupBy } from "../../util/groupBy.js";
+import { renderIf } from "../../util/renderIf.js";
 import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
 import { SchemaListView } from "./SchemaListView.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
+import { SchemaProseClasses } from "./util/prose.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
 export type ParameterGroup = (typeof PARAM_GROUPS)[number];
@@ -16,28 +19,29 @@ export const OperationListItem = ({
   operationFragment: FragmentType<typeof OperationsFragment>;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
-  const groupedParameters = Object.groupBy(
+  const groupedParameters = groupBy(
     operation.parameters ?? [],
     (param) => param.in,
   );
-  const first = operation.responses.find((re) => re.statusCode === "200");
+
+  const first = operation.responses.at(0);
   return (
     <div
       key={operation.operationId}
-      className="grid grid-cols-2 gap-8 items-start border-b-2 mb-16 pb-16 border-border"
+      className="grid grid-cols-1 lg:grid-cols-[4fr_3fr] gap-8 items-start border-b-2 mb-16 pb-16 border-border"
     >
-      <div className={ProseClasses}>
-        <Heading
-          level={2}
-          className="mt-0"
-          id={operation.slug}
-          registerSidebarAnchor
-        >
+      <div className="flex flex-col gap-4">
+        <Heading level={2} id={operation.slug} registerSidebarAnchor>
           {operation.summary}
         </Heading>
-        {operation.description && <Markdown content={operation.description} />}
+        {operation.description && (
+          <Markdown
+            className={SchemaProseClasses}
+            content={operation.description}
+          />
+        )}
         {operation.parameters && operation.parameters.length > 0 && (
-          <div className="mt-4">
+          <>
             {PARAM_GROUPS.flatMap((group) =>
               groupedParameters[group]?.length ? (
                 <ParameterList
@@ -50,37 +54,59 @@ export const OperationListItem = ({
                 []
               ),
             )}
+          </>
+        )}
+        {renderIf(operation.requestBody?.content?.at(0)?.schema, (schema) => (
+          <div className="mt-4 flex flex-col gap-4">
+            <Heading level={3} className="capitalize">
+              Request Body
+            </Heading>
+            <SchemaListView schema={schema} />
           </div>
+        ))}
+        {operation.responses.length > 0 && (
+          <>
+            <Heading level={3} className="capitalize mt-8 pt-8 border-t">
+              Responses
+            </Heading>
+            <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>
+              {operation.responses.length > 1 && (
+                <TabsList>
+                  {operation.responses.map((response) => (
+                    <TabsTrigger
+                      value={response.statusCode + response.description}
+                      key={response.statusCode}
+                      title={response.description}
+                    >
+                      {response.statusCode}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              )}
+              <ul className="list-none m-0 px-0 overflow-hidden">
+                {operation.responses.map((response) => (
+                  <TabsContent
+                    value={response.statusCode + response.description}
+                    key={response.statusCode}
+                  >
+                    {renderIf(
+                      response.content?.find((content) => content.schema),
+                      (content) => {
+                        return (
+                          <SchemaListView schema={content.schema} name="" />
+                        );
+                      },
+                    ) ?? (
+                      <div className="border-border font-mono text-sm border rounded p-4">
+                        No response body
+                      </div>
+                    )}
+                  </TabsContent>
+                ))}
+              </ul>
+            </Tabs>
+          </>
         )}
-        <Heading level={3} className="capitalize">
-          Responses
-        </Heading>
-        <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>
-          <TabsList>
-            {operation.responses.map((response) => (
-              <TabsTrigger
-                value={response.statusCode + response.description}
-                key={response.statusCode}
-                title={response.description}
-              >
-                {response.statusCode}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-          <ul className="list-none m-0 px-0 overflow-hidden">
-            {operation.responses.map((response) => (
-              <TabsContent
-                value={response.statusCode + response.description}
-                key={response.statusCode}
-              >
-                <SchemaListView
-                  schema={response.content?.at(0)?.schema}
-                  name=""
-                />
-              </TabsContent>
-            ))}
-          </ul>
-        </Tabs>
       </div>
 
       <Sidecar operation={operation} />

package/src/lib/plugins/openapi/ParameterList.tsx

@@ -18,7 +18,7 @@ export const ParameterList = ({
     <Heading level={3} id={`${id}/${group}-parameters`} className="capitalize">
       {group === "header" ? "Headers" : `${group} Parameters`}
     </Heading>
-    <ul className="list-none m-0 px-0 overflow-hidden">
+    <ul className="list-none m-0 px-0 overflow-hidden border divide-y divide-border rounded">
       {parameters.map((parameter) => (
         <ParameterListItem
           key={`${parameter.name}-${parameter.in}`}

package/src/lib/plugins/openapi/ParameterListItem.tsx

@@ -28,14 +28,13 @@ export const ParameterListItem = ({
   group: ParameterGroup;
   id: string;
 }) => (
-  <li className="not-prose px-2 py-4 border-t border-border bg-border/20 text-sm flex flex-col gap-1">
+  <li className="p-4 bg-border/20 text-sm flex flex-col gap-1">
     <div className="flex items-center gap-2">
       <code>
         {group === "path" ? (
           <ColorizedParam
             name={parameter.name}
             backgroundOpacity="15%"
-            className="px-1"
             slug={id + "-" + parameter.name.toLocaleLowerCase()}
           />
         ) : (
@@ -43,12 +42,12 @@ export const ParameterListItem = ({
         )}
       </code>
       {parameter.required && (
-        <span className="py-px px-1.5 font-medium text-xs bg-primary/75 text-muted rounded-lg">
+        <span className="py-px px-1.5 font-medium bg-primary/75 text-muted rounded-lg">
           required
         </span>
       )}
       {getParameterSchema(parameter).type && (
-        <span className="text-xs text-muted-foreground">
+        <span className="text-muted-foreground">
           {getParameterSchema(parameter).type}
         </span>
       )}

package/src/lib/plugins/openapi/{MakeRequest.tsx → PlaygroundDialogWrapper.tsx}

@@ -1,26 +1,11 @@
-import { graphql } from "./graphql/index.js";
-import { useOasConfig } from "./index.js";
 import type { OperationListItemResult } from "./OperationList.js";
-import { Playground } from "./playground/Playground.js";
+import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 
-import { useQuery } from "urql";
-
-const GetServerQuery = graphql(/* GraphQL */ `
-  query getServerQuery($input: JSON!, $type: SchemaType!) {
-    schema(input: $input, type: $type) {
-      url
-    }
-  }
-`);
-
-export const MakeRequest = ({
+export const PlaygroundDialogWrapper = ({
   operation,
 }: {
   operation: OperationListItemResult;
 }) => {
-  const variables = useOasConfig();
-  const [server] = useQuery({ query: GetServerQuery, variables });
-
   const headers = operation.parameters
     ?.filter((p) => p.in === "header")
     .map((p) => ({
@@ -50,8 +35,7 @@ export const MakeRequest = ({
     false;
 
   return (
-    <Playground
-      host={server.data?.schema.url ?? ""}
+    <PlaygroundDialog
       method={operation.method}
       url={operation.path}
       headers={headers}