zudoku 0.3.0-dev.11 → 0.3.0-dev.110

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/ColorizedParam.tsx

@@ -9,7 +9,7 @@ export const usePastellizedColor = (name: string) => {
   const [isDark] = useTheme();
   return pastellize(
     name,
-    !isDark ? { saturation: 100, lightness: 70 } : undefined,
+    !isDark ? { saturation: 85, lightness: 50 } : undefined,
   );
 };
 
@@ -17,6 +17,7 @@ export const ColorizedParam = ({
   name,
   className,
   backgroundOpacity = "100%",
+  borderOpacity = "100%",
   slug,
   children,
   onClick,
@@ -24,34 +25,40 @@ export const ColorizedParam = ({
   name: string;
   className?: string;
   backgroundOpacity?: string;
+  borderOpacity?: string;
   slug?: string;
   children?: ReactNode;
   onClick?: () => void;
 }) => {
   const ref = useRef<HTMLSpanElement>(null);
-  const normalized = name.replace("{", "").replace("}", "");
+  const normalized = name.replace(/[{}]/g, "");
+  const normalizedSlug = slug?.replace(/[{}]/g, "");
   const color = usePastellizedColor(normalized);
 
-  const borderColor = `hsl(${color})`;
+  const borderColor = `hsl(${color} / ${borderOpacity})`;
   const backgroundColor = `hsl(${color} / ${backgroundOpacity})`;
 
   useEffect(() => {
-    if (!slug) return;
+    if (!normalizedSlug) return;
     if (!ref.current) return;
 
     const onMouseEnter = () => {
-      document.querySelectorAll(`[${DATA_ATTR}="${slug}"]`).forEach((el) => {
-        if (el instanceof HTMLElement) {
-          el.dataset.active = "true";
-        }
-      });
+      document
+        .querySelectorAll(`[${DATA_ATTR}="${normalizedSlug}"]`)
+        .forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.dataset.active = "true";
+          }
+        });
     };
     const onMouseLeave = () => {
-      document.querySelectorAll(`[${DATA_ATTR}="${slug}"]`).forEach((el) => {
-        if (el instanceof HTMLElement) {
-          el.dataset.active = "false";
-        }
-      });
+      document
+        .querySelectorAll(`[${DATA_ATTR}="${normalizedSlug}"]`)
+        .forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.dataset.active = "false";
+          }
+        });
     };
 
     ref.current.addEventListener("mouseenter", onMouseEnter);
@@ -61,12 +68,12 @@ export const ColorizedParam = ({
       ref.current?.removeEventListener("mouseenter", onMouseEnter);
       ref.current?.removeEventListener("mouseleave", onMouseLeave);
     };
-  }, [slug]);
+  }, [normalizedSlug]);
 
   return (
     <span
       className={cn("inline-flex relative rounded group", className)}
-      {...{ [DATA_ATTR]: slug }}
+      {...{ [DATA_ATTR]: normalizedSlug }}
       ref={ref}
       onClick={onClick}
     >

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,15 @@
 import { Heading } from "../../components/Heading.js";
-import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { Markdown } from "../../components/Markdown.js";
+import { Card } from "../../ui/Card.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 +20,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"
     >
-      <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,35 +55,51 @@ export const OperationListItem = ({
                 []
               ),
             )}
-          </div>
+          </>
         )}
+        {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">
+            <Heading level={3} className="capitalize mt-8 pt-8 border-t">
               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>
+              {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}
                   >
-                    <SchemaListView
-                      schema={response.content?.at(0)?.schema}
-                      name=""
-                    />
+                    {renderIf(
+                      response.content?.find((content) => content.schema),
+                      (content) => {
+                        return <SchemaListView schema={content.schema} />;
+                      },
+                    ) ?? (
+                      <Card className="font-mono text-sm p-4">
+                        No response body
+                      </Card>
+                    )}
                   </TabsContent>
                 ))}
               </ul>

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

@@ -1,4 +1,5 @@
 import { Heading } from "../../components/Heading.js";
+import { Card } from "../../ui/Card.js";
 import type { ParameterGroup } from "./OperationListItem.js";
 import {
   ParameterListItem,
@@ -18,15 +19,17 @@ 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">
-      {parameters.map((parameter) => (
-        <ParameterListItem
-          key={`${parameter.name}-${parameter.in}`}
-          parameter={parameter}
-          id={id}
-          group={group}
-        />
-      ))}
-    </ul>
+    <Card>
+      <ul className="list-none m-0 px-0 divide-y ">
+        {parameters.map((parameter) => (
+          <ParameterListItem
+            key={`${parameter.name}-${parameter.in}`}
+            parameter={parameter}
+            id={id}
+            group={group}
+          />
+        ))}
+      </ul>
+    </Card>
   </>
 );

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/PlaygroundDialogWrapper.tsx

@@ -1,63 +1,39 @@
-import { graphql } from "./graphql/index.js";
-import { useOasConfig } from "./index.js";
 import type { OperationListItemResult } from "./OperationList.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 PlaygroundDialogWrapper = ({
+  server,
   operation,
 }: {
+  server: string;
   operation: OperationListItemResult;
 }) => {
-  const variables = useOasConfig();
-  const [server] = useQuery({ query: GetServerQuery, variables });
-
   const headers = operation.parameters
     ?.filter((p) => p.in === "header")
     .map((p) => ({
       name: p.name,
-      value: p.examples?.find((x) => x.value)?.value ?? "",
+      defaultValue: p.examples?.find((x) => x.value)?.value ?? "",
     }));
   const queryParams = operation.parameters
     ?.filter((p) => p.in === "query")
     .sort((a, b) => (a.required && !b.required ? -1 : 1))
-    .map((p) => {
-      return {
-        name: p.name,
-        value: "",
-        active: p.required ?? false,
-        isRequired: p.required ?? false,
-      };
-    });
-  const pathParams = operation.parameters
-    ?.filter((p) => p.in === "path")
     .map((p) => ({
       name: p.name,
-      value: "",
+      defaultActive: p.required ?? false,
+      isRequired: p.required ?? false,
     }));
-
-  const hasParams =
-    operation.parameters?.some((p) => p.in === "query" || p.in === "path") ??
-    false;
+  const pathParams = operation.parameters
+    ?.filter((p) => p.in === "path")
+    .map((p) => ({ name: p.name }));
 
   return (
     <PlaygroundDialog
-      host={server.data?.schema.url ?? ""}
+      server={server}
       method={operation.method}
       url={operation.path}
       headers={headers}
       queryParams={queryParams}
       pathParams={pathParams}
-      hasParams={hasParams}
     />
   );
 };

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

@@ -1,9 +1,7 @@
-import { useState } from "react";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { SimpleSelect } from "./SimpleSelect.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 
 type Content = NonNullable<
@@ -12,24 +10,13 @@ type Content = NonNullable<
 
 // @todo should we handle multiple content types?
 export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
-  const [selected, setSelected] = useState("example");
-
   if (!content.length) return null;
 
   return (
     <>
-      <div>lol</div>
       <SidecarBox.Root>
         <SidecarBox.Head className="text-xs flex justify-between items-center">
-          <span className="font-mono">Request Body</span>
-          <SimpleSelect
-            value={selected}
-            onChange={(e) => setSelected(e.target.value)}
-            options={[
-              { value: "example", label: "Example" },
-              { value: "schema", label: "Schema" },
-            ]}
-          />
+          <span className="font-mono">Request Body Example</span>
         </SidecarBox.Head>
         <SidecarBox.Body>
           <SyntaxHighlight
@@ -38,9 +25,9 @@ export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
             copyable
             className="text-xs"
             code={JSON.stringify(
-              selected === "example"
+              content.at(0)?.schema
                 ? generateSchemaExample(content[0].schema as SchemaObject)
-                : content[0].schema,
+                : "",
               null,
               2,
             )}

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

@@ -51,9 +51,10 @@ export const ResponsesSidecarBox = ({
             Empty Response
           </span>
         )}
-        <hr className="border-border my-1" />
-        <div className="text-xs">{responses[tabIndex].description}</div>
       </SidecarBox.Body>
+      <SidecarBox.Footer className="flex justify-end text-xs">
+        {responses[tabIndex].description}
+      </SidecarBox.Footer>
     </SidecarBox.Root>
   );
 };

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

@@ -0,0 +1,21 @@
+import { Outlet } from "react-router-dom";
+import { OasConfigProvider } from "./context.js";
+import { OasPluginConfig } from "./interfaces.js";
+
+import { Provider, Client as UrqlClient } from "./util/urql.js";
+
+export function OpenApiRoute({
+  config,
+  client,
+}: {
+  config: OasPluginConfig;
+  client: typeof UrqlClient;
+}) {
+  return (
+    <Provider value={client}>
+      <OasConfigProvider value={{ config }}>
+        <Outlet />
+      </OasConfigProvider>
+    </Provider>
+  );
+}