zudoku 0.3.0-dev.30 → 0.3.0-dev.32

package/src/lib/components/ErrorPage.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { CategoryHeading } from "./CategoryHeading.js";
+import { Heading } from "./Heading.js";
+import { ProseClasses } from "./Markdown.js";
+
+export const ErrorPage = ({
+  title = "An error occurred",
+  message,
+  category,
+}: {
+  title?: ReactNode;
+  message?: ReactNode;
+  category?: ReactNode;
+}) => {
+  return (
+    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+      {category && <CategoryHeading>{category}</CategoryHeading>}
+      {title && (
+        <Heading level={1} className="flex gap-3.5 items-center">
+          {title}
+        </Heading>
+      )}
+      <p>{message}</p>
+      <Link to="/">Go back home</Link>
+    </div>
+  );
+};

package/src/lib/components/InlineCode.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { cn } from "../util/cn.js";
+
+export const InlineCode = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) => (
+  <code
+    className={cn(
+      className,
+      "font-mono border border-border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
+    )}
+  >
+    {children}
+  </code>
+);

package/src/lib/components/Layout.tsx

@@ -1,6 +1,7 @@
 import { Suspense, useEffect, useRef, type ReactNode } from "react";
 import { Helmet } from "react-helmet-async";
 import { Outlet, useLocation } from "react-router-dom";
+import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
@@ -47,10 +48,12 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         >
           <SideNavigation />
           <main
-            className="dark:border-white/10 translate-x-0 h-full
-          lg:overflow-visible
-          lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]
-          lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] peer-data-[navigation=true]:pl-12"
+            className={cn(
+              "dark:border-white/10 translate-x-0 h-full",
+              "lg:overflow-visible",
+              "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
+              "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] peer-data-[navigation=true]:pl-12",
+            )}
           >
             {children ?? <Outlet />}
           </main>

package/src/lib/components/NotFoundPage.tsx

@@ -0,0 +1,39 @@
+import { UnlinkIcon } from "lucide-react";
+import { Link, useParams } from "react-router-dom";
+import { Callout } from "../ui/Callout.js";
+import { CategoryHeading } from "./CategoryHeading.js";
+import { Heading } from "./Heading.js";
+import { ProseClasses } from "./Markdown.js";
+
+export const NotFoundPage = () => {
+  const params = useParams();
+
+  return (
+    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+      <CategoryHeading>404</CategoryHeading>
+      <Heading level={1} className="flex gap-3.5 items-center">
+        Page not found
+        <UnlinkIcon size={24} />
+      </Heading>
+      {import.meta.env.DEV && (
+        <Callout type="caution" title="Developer hint">
+          Start by adding a file at{" "}
+          <code>
+            {"{PROJECT_ROOT}"}/{params["*"]}.mdx
+          </code>{" "}
+          and add some content to make this error go away.
+          <br />
+          <small className="italic">
+            Note: This hint is only shown in development mode.
+          </small>
+        </Callout>
+      )}
+      <p>
+        It seems that the page you are looking for does not exist or may have
+        been moved. Please check the URL for any typos or use the navigation
+        menu to find the correct page.
+      </p>
+      <Link to="/">Go back home</Link>
+    </div>
+  );
+};

package/src/lib/components/SyntaxHighlight.tsx

@@ -7,25 +7,23 @@ import {
 
 import { CheckIcon, CopyIcon } from "lucide-react";
 
-if (!import.meta.env.SSR) {
-  globalThis.Prism = Prism;
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-bash.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-ruby.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-markup-templating.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-php.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-json.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-java.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-csharp.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-objectivec.min.js");
-}
+globalThis.Prism = Prism;
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-bash.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-ruby.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-markup-templating.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-php.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-json.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-java.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-csharp.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-objectivec.min.js");
 
 import { useState } from "react";
 import { cn } from "../util/cn.js";
@@ -37,10 +35,12 @@ type SyntaxHighlightProps = {
   wrapLines?: boolean;
   copyable?: boolean;
   showLanguageIndicator?: boolean;
-} & Omit<HighlightProps, "children">;
+  language?: string;
+} & Omit<HighlightProps, "children" | "language">;
 
 export const SyntaxHighlight = ({
   copyable = true,
+  language = "plain",
   ...props
 }: SyntaxHighlightProps) => {
   const [isDark] = useTheme();
@@ -51,7 +51,11 @@ export const SyntaxHighlight = ({
   }
 
   return (
-    <Highlight theme={isDark ? themes.vsDark : themes.github} {...props}>
+    <Highlight
+      theme={isDark ? themes.vsDark : themes.github}
+      language={language}
+      {...props}
+    >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre
           className={cn(
@@ -88,7 +92,7 @@ export const SyntaxHighlight = ({
           )}
           {props.showLanguageIndicator && (
             <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-              {props.language}
+              {language}
             </span>
           )}
           {tokens.map((line, i) => (

package/src/lib/errors/ErrorAlert.tsx

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function ErrorAlert({ error }: { error: any }) {
+  const message = error?.message ?? "Something went wrong";
+  const stack = error?.stack;
+
+  return (
+    <div className="flex h-screen max-h-screen min-h-full items-center justify-center bg-primary-background px-4 py-16 lg:px-8">
+      <div className="mx-auto max-w-[85%] sm:max-w-[50%]">
+        <h1 className="text-4xl font-bold tracking-tight text-h1-text sm:text-5xl">
+          Something went wrong
+        </h1>
+        <p className="mt-5 text-h1-text">{message}</p>
+        {stack ? (
+          <pre className="mt-5 max-h-[400px] w-full overflow-scroll rounded-md border border-input-border bg-input-background p-3 text-property-name-text text-red-700">
+            {stack}
+          </pre>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/lib/errors/RouterError.tsx

@@ -0,0 +1,13 @@
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import { NotFoundPage } from "../components/NotFoundPage.js";
+import { ErrorAlert } from "./ErrorAlert.js";
+
+export function RouterError() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error) && error.status === 404) {
+    return <NotFoundPage />;
+  }
+
+  return <ErrorAlert error={error} />;
+}

package/src/lib/errors/ServerError.tsx

@@ -0,0 +1,5 @@
+import { ErrorAlert } from "./ErrorAlert.js";
+
+export function ServerError({ error }: { error: unknown }) {
+  return <ErrorAlert error={error} />;
+}

package/src/lib/errors/TopLevelError.tsx

@@ -0,0 +1,8 @@
+import { FallbackProps } from "react-error-boundary";
+import { ErrorAlert } from "./ErrorAlert.js";
+
+export function TopLevelError({ error, resetErrorBoundary }: FallbackProps) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+
+  return <ErrorAlert error={error} />;
+}

package/src/lib/oas/parser/index.ts

@@ -1,3 +1,4 @@
+import { GraphQLError } from "graphql/error/index.js";
 import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
 import { dereference, type JSONSchema } from "./dereference/index.js";
 import { upgradeSchema } from "./upgrade/index.js";
@@ -9,10 +10,6 @@ type DeepOmitReference<T> = T extends ReferenceObject
     ? { [K in keyof T]: DeepOmitReference<T[K]> }
     : T;
 
-// type Prettify<T> = {
-//   [K in keyof T]: T[K];
-// } & {};
-
 export type OpenAPIDocument = DeepOmitReference<OpenAPIV3_1.Document>;
 export type ResponseObject = DeepOmitReference<OpenAPIV3_1.ResponseObject>;
 export type OperationObject = DeepOmitReference<OpenAPIV3_1.OperationObject>;
@@ -46,37 +43,63 @@ export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
 // };
 
 const parseSchemaInput = async (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  schemaInput: any,
+  schemaInput: unknown,
 ): Promise<JSONSchema & { openapi?: string }> => {
   if (typeof schemaInput === "string") {
     if (schemaInput.trim().startsWith("{")) {
-      return JSON.parse(schemaInput);
+      try {
+        return JSON.parse(schemaInput);
+      } catch (err) {
+        throw new GraphQLError("Invalid JSON schema", {
+          originalError: err,
+        });
+      }
     }
     if (schemaInput.includes("://")) {
-      const response = await fetch(schemaInput, {
-        cache: "force-cache",
-      });
-      return (await response.json()) as JSONSchema;
+      let response;
+      try {
+        response = await fetch(schemaInput, {
+          cache: "force-cache",
+        });
+      } catch (err) {
+        throw new GraphQLError("Failed to fetch schema", {
+          originalError: err,
+        });
+      }
+
+      if (!response.ok) {
+        throw new GraphQLError(
+          `Failed to fetch schema: ${response.statusText}`,
+        );
+      }
+
+      try {
+        return (await response.json()) as JSONSchema;
+      } catch (err) {
+        throw new GraphQLError("Fetched invalid JSON schema", {
+          originalError: err,
+        });
+      }
     }
     const yaml = await import("yaml");
-    return yaml.parse(schemaInput);
+    const parsed = yaml.parse(schemaInput);
+
+    if (typeof parsed === "object") return parsed;
   }
 
-  if (typeof schemaInput === "object") return schemaInput;
+  if (typeof schemaInput === "object") return schemaInput as JSONSchema;
 
-  throw new Error("Unsupported schema input");
+  throw new GraphQLError("Unsupported schema input: " + schemaInput);
 };
 
 /**
  * Validates, dereferences and upgrades the OpenAPI schema (to v3.1) if necessary.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const validate = async (schemaInput: any) => {
+export const validate = async (schemaInput: unknown) => {
   const schema = await parseSchemaInput(schemaInput);
 
   if (!schema.openapi) {
-    throw new Error("OpenAPI version is not defined");
+    throw new GraphQLError("OpenAPI version is not defined");
   }
 
   // const validator = await getValidator(schema.openapi);
@@ -88,9 +111,5 @@ export const validate = async (schemaInput: any) => {
 
   const dereferenced = await dereference(schema);
 
-  const upgraded = upgradeSchema(
-    dereferenced as OpenAPIV3_1.Document | OpenAPIV3.Document,
-  );
-
-  return upgraded;
+  return upgradeSchema(dereferenced);
 };

package/src/lib/plugins/api-keys/index.tsx

@@ -1,5 +1,4 @@
-import logger from "loglevel";
-import { Outlet, useRouteError } from "react-router-dom";
+import { Outlet, type RouteObject } from "react-router-dom";
 import invariant from "tiny-invariant";
 import { useAuth } from "../../authentication/hook.js";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
@@ -7,6 +6,7 @@ import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
 } from "../../core/plugins.js";
+import { RouterError } from "../../errors/RouterError.js";
 import { Button } from "../../ui/Button.js";
 import { CreateApiKey } from "./CreateApiKey.js";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
@@ -100,18 +100,6 @@ const ProtectedRoute = () => {
   );
 };
 
-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 => {
@@ -138,12 +126,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/markdown/generateRoutes.tsx

@@ -45,7 +45,7 @@ export const generateRoutes = (
     },
   );
 
-  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

@@ -29,10 +29,6 @@ export type MDXImport = {
 export const markdownPlugin = ({
   markdownFiles,
   defaultOptions,
-}: MarkdownPluginOptions): DevPortalPlugin => {
-  return {
-    getRoutes() {
-      return generateRoutes(markdownFiles, defaultOptions);
-    },
-  };
-};
+}: MarkdownPluginOptions): DevPortalPlugin => ({
+  getRoutes: () => generateRoutes(markdownFiles, defaultOptions),
+});

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

@@ -1,7 +1,11 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { CategoryHeading } from "../../components/CategoryHeading.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 { Callout } from "../../ui/Callout.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
 import { useOasConfig } from "./context.js";
@@ -91,6 +95,32 @@ 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={
+          <>
+            {import.meta.env.DEV && (
+              <Callout type="danger" title="Developer hint" className="mb-4">
+                Check your configuration value{" "}
+                <InlineCode>apis.type</InlineCode> and{" "}
+                <InlineCode>apis.input</InlineCode> in the Zudoku config.
+              </Callout>
+            )}
+            An error occurred while trying to fetch the API reference:
+            <SyntaxHighlight code={error.toString()} language="plain" />
+          </>
+        }
+      />
+    );
+  }
+
   if (!result.data) return null;
 
   return (

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

@@ -1,6 +1,7 @@
 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";
@@ -18,10 +19,11 @@ 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);
   return (
     <div

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

@@ -1,5 +1,6 @@
 import { Markdown } from "../../components/Markdown.js";
 import { SchemaObject } from "../../oas/parser/index.js";
+import { groupBy } from "../../util/groupBy.js";
 import { objectEntries } from "../../util/objectEntries.js";
 import { SchemaListViewItemGroup } from "./SchemaListViewItemGroup.js";
 import { SchemaProseClasses } from "./util/prose.js";
@@ -25,16 +26,13 @@ export const SchemaListView = ({
     Array.isArray(additionalProperties) ? additionalProperties : [],
   );
 
-  const groups = Object.groupBy(
-    combinedProperties,
-    ([propertyName, property]) => {
-      return property.deprecated
-        ? "deprecated"
-        : schema.required?.includes(propertyName)
-          ? "required"
-          : "optional";
-    },
-  );
+  const groups = groupBy(combinedProperties, ([propertyName, property]) => {
+    return property.deprecated
+      ? "deprecated"
+      : schema.required?.includes(propertyName)
+        ? "required"
+        : "optional";
+  });
 
   return (
     <div className="flex flex-col gap-2.5">

package/src/lib/plugins/openapi/client/createMemoryClient.ts

@@ -25,7 +25,7 @@ export const createClient: CreateClientFunction = () => {
     fetch: async (req, init) => {
       if (!init?.body) throw new Error("No body");
       const response = await localServer.fetch(
-        new Request("/__z/graphql", {
+        new Request("http://localhost/__z/graphql", {
           method: "POST",
           body: init.body,
           headers: {

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

@@ -1,4 +1,4 @@
-import { matchPath, type RouteObject } from "react-router-dom";
+import { matchPath, useRouteError, type RouteObject } from "react-router-dom";
 import {
   type DevPortalPlugin,
   type PluginNavigationCategory,
@@ -12,6 +12,8 @@ import {
 } from "./util/urql.js";
 
 import { createClient } from "virtual:zudoku-openapi-worker";
+import { ErrorPage } from "../../components/ErrorPage.js";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { OasPluginConfig } from "./interfaces.js";
 
 const GetCategoriesQuery = graphql(`
@@ -34,6 +36,20 @@ const GetCategoriesQuery = graphql(`
   }
 `);
 
+const OpenApiErrorPage = () => {
+  const error = useRouteError();
+  const message =
+    error instanceof Error ? (
+      <SyntaxHighlight code={error.message} />
+    ) : (
+      "An unknown error occurred"
+    );
+
+  return (
+    <ErrorPage category="Error" title="An error occurred" message={message} />
+  );
+};
+
 export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
   const basePath = config.path ?? "/reference";
 
@@ -112,6 +128,7 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
               element: <OpenApiRoute client={client} config={config} />,
             };
           },
+          errorElement: <OpenApiErrorPage />,
           children: [
             {
               path: basePath,

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

@@ -1,4 +1,4 @@
-import { Navigate } from "react-router-dom";
+import { redirect } from "react-router-dom";
 import type { DevPortalPlugin } from "../../core/plugins.js";
 
 export type Redirect = {
@@ -14,7 +14,7 @@ export const redirectPlugin = (options: {
     getRoutes: () =>
       options.redirects.map(({ from, to, replace }) => ({
         path: from,
-        element: <Navigate to={to} replace={replace} />,
+        loader: () => redirect(to),
       })),
   };
 };

package/src/lib/ui/Callout.tsx

@@ -64,9 +64,9 @@ export const Callout = ({ type, children, title, className }: CalloutProps) => {
   return (
     <div
       className={cn(
-        "not-prose grid grid-cols-[fit-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-transparent [&_code]:!border-none",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
         title && "items-center",
         border,
         bg,

package/src/lib/util/MdxComponents.tsx

@@ -2,9 +2,9 @@ import { MDXProvider } from "@mdx-js/react";
 import type { ComponentProps } from "react";
 import { Link } from "react-router-dom";
 import { Heading } from "../components/Heading.js";
+import { InlineCode } from "../components/InlineCode.js";
 import { SyntaxHighlight } from "../components/SyntaxHighlight.js";
 import { Callout } from "../ui/Callout.js";
-import { cn } from "./cn.js";
 
 export type MdxComponentsType = ComponentProps<
   typeof MDXProvider
@@ -80,15 +80,6 @@ export const MdxComponents = {
       );
     }
 
-    return (
-      <code
-        className={cn(
-          className,
-          "font-mono border border-border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
-        )}
-      >
-        {children}
-      </code>
-    );
+    return <InlineCode className={className}>{children}</InlineCode>;
   },
 } satisfies MdxComponentsType;