zudoku 0.3.0-dev.13 → 0.3.0-dev.131

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,16 @@
 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 { 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";
 
@@ -91,6 +96,29 @@ 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 (
@@ -119,12 +147,14 @@ export const OperationList = () => {
               />
             )}
             <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,12 +1,14 @@
+import { useState } from "react";
 import { Heading } from "../../components/Heading.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 { SchemaView } from "./schema/SchemaView.js";
 import { SchemaProseClasses } from "./util/prose.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
@@ -18,15 +20,18 @@ 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.at(0);
+  const [selectedResponse, setSelectedResponse] = useState(first?.statusCode);
+
   return (
     <div
       key={operation.operationId}
-      className="grid grid-cols-[4fr_3fr] 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="flex flex-col gap-4">
         <Heading level={2} id={operation.slug} registerSidebarAnchor>
@@ -59,47 +64,43 @@ export const OperationListItem = ({
             <Heading level={3} className="capitalize">
               Request Body
             </Heading>
-            <SchemaListView schema={schema} />
+            <SchemaView schema={schema} />
           </div>
         ))}
         {operation.responses.length > 0 && (
           <>
-            <Heading
-              level={3}
-              className="capitalize mt-8 pt-8 border-border border-t"
-            >
+            <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>
+            <Tabs
+              onValueChange={(value) => setSelectedResponse(value)}
+              value={selectedResponse}
+            >
+              {operation.responses.length > 1 && (
+                <TabsList>
+                  {operation.responses.map((response) => (
+                    <TabsTrigger
+                      value={response.statusCode}
+                      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}
+                    value={response.statusCode}
                     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>
-                    )}
+                    <SchemaView
+                      schema={
+                        response.content?.find((content) => content.schema)
+                          ?.schema
+                      }
+                    />
                   </TabsContent>
                 ))}
               </ul>
@@ -108,7 +109,11 @@ export const OperationListItem = ({
         )}
       </div>
 
-      <Sidecar operation={operation} />
+      <Sidecar
+        selectedResponse={selectedResponse}
+        onSelectResponse={setSelectedResponse}
+        operation={operation}
+      />
     </div>
   );
 };

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,19 @@ 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 border border-border divide-y divide-border rounded">
-      {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
+          .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
+          .map((parameter) => (
+            <ParameterListItem
+              key={`${parameter.name}-${parameter.in}`}
+              parameter={parameter}
+              id={id}
+              group={group}
+            />
+          ))}
+      </ul>
+    </Card>
   </>
 );

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

@@ -25,7 +25,9 @@ export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
             copyable
             className="text-xs"
             code={JSON.stringify(
-              generateSchemaExample(content[0].schema as SchemaObject),
+              content.at(0)?.schema
+                ? generateSchemaExample(content[0].schema as SchemaObject)
+                : "",
               null,
               2,
             )}

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import * as Tabs from "@radix-ui/react-tabs";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import { cn } from "../../util/cn.js";
@@ -9,53 +9,64 @@ import { generateSchemaExample } from "./util/generateSchemaExample.js";
 type Responses = OperationListItemResult["responses"];
 export const ResponsesSidecarBox = ({
   responses,
+  selectedResponse,
+  onSelectResponse,
 }: {
   responses: Responses;
-}) => {
-  const [tabIndex, setTabIndex] = useState(0);
-
-  const activeTab = responses[tabIndex];
-  const schema = activeTab.content?.[0]?.schema as SchemaObject | undefined;
-
-  return (
-    <SidecarBox.Root>
-      <SidecarBox.Head className="text-xs grid grid-rows-2 pb-0">
+  selectedResponse?: string;
+  onSelectResponse: (response: string) => void;
+}) => (
+  <SidecarBox.Root>
+    <Tabs.Root
+      defaultValue={responses[0]?.statusCode}
+      value={selectedResponse}
+      onValueChange={(value) => onSelectResponse(value)}
+    >
+      <SidecarBox.Head className="text-xs flex flex-col gap-2 pb-0">
         <span className="font-mono">Example Responses</span>
-        <div className="flex gap-2">
-          {responses.map((response, index) => (
-            <div
+        <Tabs.List className="flex gap-2">
+          {responses.map((response) => (
+            <Tabs.Trigger
               key={response.statusCode}
-              onClick={() => setTabIndex(index)}
+              value={response.statusCode}
               className={cn(
                 "text-xs font-mono px-1.5 py-1 pb-px translate-y-px border-b-2 border-transparent rounded-t cursor-pointer",
-                tabIndex === index
-                  ? "text-primary dark:text-inherit border-primary"
-                  : "hover:border-accent-foreground/25",
+                "data-[state=active]:text-primary data-[state=active]:dark:text-inherit data-[state=active]:border-primary",
+                "hover:border-accent-foreground/25",
               )}
             >
               {response.statusCode}
-            </div>
+            </Tabs.Trigger>
           ))}
-        </div>
+        </Tabs.List>
       </SidecarBox.Head>
-      <SidecarBox.Body>
-        {schema ? (
-          <SyntaxHighlight
-            language="json"
-            noBackground
-            className="text-xs"
-            code={JSON.stringify(generateSchemaExample(schema), null, 2)}
-          />
-        ) : (
-          <span className="text-muted-foreground font-mono italic text-xs">
-            Empty Response
-          </span>
-        )}
-        <hr className="border-border my-1" />
-        <div className="text-xs  text-muted-foreground">
-          {responses[tabIndex].description}
-        </div>
-      </SidecarBox.Body>
-    </SidecarBox.Root>
-  );
-};
+      {responses.map((response) => {
+        const schema = response.content?.[0]?.schema as
+          | SchemaObject
+          | undefined;
+
+        return (
+          <Tabs.Content key={response.statusCode} value={response.statusCode}>
+            <SidecarBox.Body>
+              {schema ? (
+                <SyntaxHighlight
+                  language="json"
+                  noBackground
+                  className="text-xs"
+                  code={JSON.stringify(generateSchemaExample(schema), null, 2)}
+                />
+              ) : (
+                <span className="text-muted-foreground font-mono italic text-xs">
+                  Empty Response
+                </span>
+              )}
+            </SidecarBox.Body>
+            <SidecarBox.Footer className="flex justify-end text-xs">
+              {response.description}
+            </SidecarBox.Footer>
+          </Tabs.Content>
+        );
+      })}
+    </Tabs.Root>
+  </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>
+  );
+}