zudoku 0.64.1 → 0.65.0

package/src/lib/authentication/ui/icons/Google.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const GoogleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>{"Google"}</title>
+    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
+  </svg>
+);
+
+export default GoogleIcon;

package/src/lib/authentication/ui/icons/Microsoft.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const MicrosoftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path fill="#f25022" d="M1 1h9v9H1z" />
+    <path fill="#00a4ef" d="M1 11h9v9H1z" />
+    <path fill="#7fba00" d="M11 1h9v9h-9z" />
+    <path fill="#ffb900" d="M11 11h9v9h-9z" />
+  </svg>
+);
+
+export default MicrosoftIcon;

package/src/lib/authentication/ui/icons/X.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from "react";
+
+const XIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <title>{"X"}</title>
+    <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" />
+  </svg>
+);
+
+export default XIcon;

package/src/lib/components/Autocomplete.tsx

@@ -11,12 +11,14 @@ import { Popover, PopoverContent } from "zudoku/ui/Popover.js";
 import { cn } from "../util/cn.js";
 
 type AutocompleteProps = {
-  value: string;
+  value?: string | number | readonly string[] | undefined;
   options: readonly string[];
   onChange: (e: string) => void;
+  onSelect?: (e: string) => void;
   className?: string;
   placeholder?: string;
   onEnterPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   ref?: Ref<HTMLInputElement>;
   shouldFilter?: boolean;
 };
@@ -28,7 +30,9 @@ const AutocompletePopover = ({
   className,
   placeholder = "Value",
   onEnterPress,
+  onKeyDown,
   ref,
+  onSelect,
 }: AutocompleteProps) => {
   const [open, setOpen] = useState(false);
   const [dontClose, setDontClose] = useState(false);
@@ -48,7 +52,7 @@ const AutocompletePopover = ({
               ref.current = el;
             }
           }}
-          value={value}
+          value={value ? String(value) : undefined}
           placeholder={placeholder}
           className={cn("h-9 bg-transparent", className)}
           onFocus={() => setOpen(true)}
@@ -59,6 +63,10 @@ const AutocompletePopover = ({
             setOpen(false);
           }}
           onKeyDown={(e) => {
+            onKeyDown?.(e);
+
+            if (e.defaultPrevented) return;
+
             if (e.key === "Enter") {
               setOpen(false);
               inputRef.current?.blur();
@@ -91,6 +99,7 @@ const AutocompletePopover = ({
               key={enumValue}
               value={enumValue}
               onSelect={(selected) => {
+                onSelect?.(selected);
                 onChange(selected);
                 setOpen(false);
               }}

package/src/lib/components/Layout.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, Suspense, useEffect } from "react";
 import { Outlet } from "react-router";
+import { TooltipProvider } from "zudoku/ui/Tooltip.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
@@ -28,7 +29,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
   }, [authentication]);
 
   return (
-    <>
+    <TooltipProvider>
       <Slot.Target name="layout-before-head" />
       <Header />
       <Slot.Target name="layout-after-head" />
@@ -45,6 +46,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         </Suspense>
       </div>
       <Footer />
-    </>
+    </TooltipProvider>
   );
 };

package/src/lib/components/navigation/NavigationItem.tsx

@@ -1,13 +1,7 @@
 import { ExternalLinkIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { NavLink, useLocation } from "react-router";
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "zudoku/ui/Tooltip.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "zudoku/ui/Tooltip.js";
 import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
 import { cn } from "../../util/cn.js";
@@ -47,19 +41,12 @@ const TruncatedLabel = ({
         {label}
       </span>
       {isTruncated && (
-        <TooltipProvider delayDuration={500}>
-          <Tooltip disableHoverableContent>
-            <TooltipTrigger className="absolute inset-0 z-10" />
-            <TooltipContent
-              className="max-w-64 rounded-lg"
-              side="bottom"
-              align="center"
-            >
-              <TooltipArrow />
-              {label}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <Tooltip disableHoverableContent>
+          <TooltipTrigger className="absolute inset-0 z-10" />
+          <TooltipContent className="max-w-64" side="bottom" align="center">
+            {label}
+          </TooltipContent>
+        </Tooltip>
       )}
     </>
   );

package/src/lib/core/RouteGuard.tsx

@@ -38,6 +38,14 @@ export const RouteGuard = () => {
   const needsToSignIn =
     isProtectedRoute && !authCheckFn({ auth, context: zudoku });
 
+  if (isProtectedRoute && !auth.isAuthEnabled) {
+    throw new ZudokuError("Authentication is not enabled", {
+      title: "Authentication is not enabled",
+      developerHint:
+        "To use protectedRoutes you need authentication to be enabled",
+    });
+  }
+
   if (needsToSignIn && auth.isPending && typeof window !== "undefined") {
     return null;
   }
@@ -91,14 +99,6 @@ export const RouteGuard = () => {
     );
   }
 
-  if (isProtectedRoute && !auth.isAuthEnabled) {
-    throw new ZudokuError("Authentication is not enabled", {
-      title: "Authentication is not enabled",
-      developerHint:
-        "To use protectedRoutes you need authentication to be enabled",
-    });
-  }
-
   return (
     <>
       {shouldBypass && (

package/src/lib/errors/ErrorAlert.tsx

@@ -17,7 +17,7 @@ export function ErrorAlert({ error }: { error: unknown }) {
   const stringError = cause instanceof Error ? String(cause.stack) : stack;
 
   return (
-    <Typography className="grid grid-cols-1 !max-w-none pt-(--padding-content-top)">
+    <Typography className="grid grid-cols-1 max-w-none! pt-(--padding-content-top)">
       <Heading level={1}>{title}</Heading>
       Error: {message}
       {hint && <DeveloperHint className="mb-4">{hint}</DeveloperHint>}

package/src/lib/errors/RouterError.tsx

@@ -1,13 +1,18 @@
 import { isRouteErrorResponse, useRouteError } from "react-router";
 import { NotFoundPage } from "../components/NotFoundPage.js";
+import { cn } from "../util/cn.js";
 import { ErrorAlert } from "./ErrorAlert.js";
 
-export function RouterError() {
+export function RouterError({ className }: { className?: string }) {
   const error = useRouteError();
 
   if (isRouteErrorResponse(error) && error.status === 404) {
     return <NotFoundPage />;
   }
 
-  return <ErrorAlert error={error} />;
+  return (
+    <div className={cn("mx-4 max-w-2xl", className)}>
+      <ErrorAlert error={error} />
+    </div>
+  );
 }

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

@@ -1,6 +1,6 @@
-import { merge as mergeAllOf } from "allof-merge";
 import { GraphQLError } from "graphql/error/index.js";
 import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
+import { flattenAllOfProcessor } from "../../util/flattenAllOf.js";
 import { dereference, type JSONSchema } from "./dereference/index.js";
 import { upgradeSchema } from "./upgrade/index.js";
 
@@ -101,7 +101,12 @@ export const validate = async (schemaInput: unknown) => {
 
   const dereferenced = await dereference(schema);
   const upgraded = upgradeSchema(dereferenced);
-  const merged = mergeAllOf(upgraded) as OpenAPIDocument;
 
-  return merged;
+  const flattened = await flattenAllOfProcessor({
+    schema: upgraded,
+    file: "schema.json",
+    dereference: async (schema) => schema,
+  });
+
+  return flattened;
 };

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

@@ -11,15 +11,19 @@ export const ProtectedRoute = () => {
     return null;
   }
 
+  if (!auth.isAuthEnabled) {
+    return (
+      <div className="flex flex-col justify-center gap-2 items-center h-1/2">
+        <DeveloperHint className="max-w-[600px]">
+          Authentication needs to be enabled for API keys to work. Enable it in
+          your Zudoku configuration under <code>authentication</code>.
+        </DeveloperHint>
+      </div>
+    );
+  }
+
   return auth.isAuthenticated ? (
     <Outlet />
-  ) : !auth.isAuthEnabled ? (
-    <div className="flex flex-col justify-center gap-2 items-center h-1/2">
-      <DeveloperHint className="max-w-[600px]">
-        Authentication needs to be enabled for API keys to work. Enable it in
-        your Zudoku configuration under <code>authentication</code>.
-      </DeveloperHint>
-    </div>
   ) : (
     <div className="flex flex-col justify-center gap-2 items-center h-1/2">
       Please login first to view this page

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

@@ -9,6 +9,10 @@ import {
 import { cn } from "../../util/cn.js";
 import useIsomorphicLayoutEffect from "../../util/useIsomorphicLayoutEffect.js";
 
+export const OverflowOverlay = () => (
+  <div className="absolute inset-0 bg-linear-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 transition-all group-hover:to-transparent" />
+);
+
 export const CollapsibleCode = ({
   children,
   maxHeight = 250,
@@ -48,9 +52,7 @@ export const CollapsibleCode = ({
           !open && isOverflowing && "max-h-(--max-height)",
         )}
       >
-        {!open && isOverflowing && (
-          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 transition-all group-hover:to-transparent"></div>
-        )}
+        {!open && isOverflowing && <OverflowOverlay />}
         <div ref={contentRef}>{children}</div>
         {!open && isOverflowing && (
           <CollapsibleTrigger

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

@@ -0,0 +1,52 @@
+import { InfoIcon } from "lucide-react";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "zudoku/ui/Tooltip.js";
+import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
+import * as SidecarBox from "./SidecarBox.js";
+
+export const GeneratedExampleSidecarBox = ({
+  code,
+  isOnScreen,
+  shouldLazyHighlight,
+}: {
+  code: string;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
+}) => {
+  return (
+    <SidecarBox.Root>
+      <SidecarBox.Head className="text-xs flex justify-between items-center">
+        <div className="flex items-center gap-1.5">
+          <span className="font-medium">Request Body Example</span>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <InfoIcon size={13} />
+              </TooltipTrigger>
+              <TooltipContent>
+                This example is auto-generated from the schema.
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </SidecarBox.Head>
+      <SidecarBox.Body className="p-0">
+        {shouldLazyHighlight && !isOnScreen ? (
+          <NonHighlightedCode code={code} />
+        ) : (
+          <SyntaxHighlight
+            embedded
+            language="json"
+            code={code}
+            className="[--scrollbar-color:gray] rounded-none text-xs max-h-[200px]"
+          />
+        )}
+      </SidecarBox.Body>
+    </SidecarBox.Root>
+  );
+};

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

@@ -146,6 +146,8 @@ const OperationsForTagQuery = graphql(/* GraphQL */ `
   }
 `);
 
+const LAZY_OPERATION_LIST_THRESHOLD = 30;
+
 export const OperationList = ({
   tag,
   untagged,
@@ -200,6 +202,10 @@ export const OperationList = ({
 
   const { operations, next, prev, description: tagDescription } = schema.tag;
 
+  // Simple heuristic to determine if we should lazy highlight the code
+  // This is to avoid the performance issues when there are a lot of operations
+  const shouldLazyHighlight = operations.length > LAZY_OPERATION_LIST_THRESHOLD;
+
   // The summary property is preferable here as it is a short description of
   // the API, whereas the description property is typically longer and supports
   // commonmark formatting, making it ill-suited for use in the meta description
@@ -337,6 +343,7 @@ export const OperationList = ({
             <OperationListItem
               operationFragment={fragment}
               globalSelectedServer={globalSelectedServer}
+              shouldLazyHighlight={shouldLazyHighlight}
             />
             <hr className="my-10" />
           </div>

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

@@ -1,6 +1,7 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useState } from "react";
 import { Badge } from "zudoku/ui/Badge.js";
+import { Separator } from "zudoku/ui/Separator.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
 import { cn } from "../../util/cn.js";
@@ -23,9 +24,11 @@ export type ParameterGroup = (typeof PARAM_GROUPS)[number];
 export const OperationListItem = ({
   operationFragment,
   globalSelectedServer,
+  shouldLazyHighlight,
 }: {
   operationFragment: FragmentType<typeof OperationsFragment>;
   globalSelectedServer?: string;
+  shouldLazyHighlight?: boolean;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
   const groupedParameters = groupBy(
@@ -118,10 +121,13 @@ export const OperationListItem = ({
                   []
                 ),
               )}
+            {renderIf(operation.requestBody?.content?.at(0)?.schema, () => (
+              <Separator className="my-4" />
+            ))}
             {renderIf(
               operation.requestBody?.content?.at(0)?.schema,
               (schema) => (
-                <div className="mt-4 flex flex-col gap-4">
+                <div className="flex flex-col gap-4">
                   <Heading
                     level={3}
                     className="capitalize flex items-center gap-2"
@@ -143,13 +149,10 @@ export const OperationListItem = ({
                 </div>
               ),
             )}
+            <Separator className="my-4" />
             {operation.responses.length > 0 && (
               <>
-                <Heading
-                  level={3}
-                  className="capitalize mt-8 pt-8 border-t"
-                  id={`${operation.slug}/responses`}
-                >
+                <Heading level={3} id={`${operation.slug}/responses`}>
                   {operation.summary && (
                     <VisuallyHidden>
                       {operation.summary} &rsaquo;{" "}
@@ -170,9 +173,9 @@ export const OperationListItem = ({
         {renderIf(!options?.disableSidecar && !isMCPEndpoint, () => (
           <Sidecar
             selectedResponse={selectedResponse}
-            onSelectResponse={setSelectedResponse}
             operation={operation}
             globalSelectedServer={globalSelectedServer}
+            shouldLazyHighlight={shouldLazyHighlight}
           />
         ))}
       </div>

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

@@ -1,6 +1,8 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { Fragment } from "react";
 import { Heading } from "../../components/Heading.js";
-import { Card } from "../../ui/Card.js";
+import { Frame, FramePanel } from "../../ui/Frame.js";
+import { ItemGroup, ItemSeparator } from "../../ui/Item.js";
 import type { ParameterItem } from "./graphql/graphql.js";
 import type { ParameterGroup } from "./OperationListItem.js";
 import { ParameterListItem } from "./ParameterListItem.js";
@@ -15,25 +17,37 @@ export const ParameterList = ({
   group: ParameterGroup;
   parameters: ParameterItem[];
   id: string;
-}) => (
-  <>
-    <Heading level={3} id={`${id}/${group}-parameters`} className="capitalize">
-      {summary && <VisuallyHidden>{summary} &rsaquo; </VisuallyHidden>}
-      {group === "header" ? "Headers" : `${group} Parameters`}
-    </Heading>
-    <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>
-  </>
-);
+}) => {
+  const sortedParameters = parameters.sort((a, b) =>
+    a.required === b.required ? 0 : a.required ? -1 : 1,
+  );
+
+  return (
+    <>
+      <Heading
+        level={3}
+        id={`${id}/${group}-parameters`}
+        className="capitalize"
+      >
+        {summary && <VisuallyHidden>{summary} &rsaquo; </VisuallyHidden>}
+        {group === "header" ? "Headers" : `${group} Parameters`}
+      </Heading>
+      <Frame>
+        <FramePanel className="p-0!">
+          <ItemGroup className="overflow-clip">
+            {sortedParameters.map((parameter) => (
+              <Fragment key={`${parameter.name}-${parameter.in}`}>
+                <ParameterListItem
+                  parameter={parameter}
+                  id={id}
+                  group={group}
+                />
+                <ItemSeparator />
+              </Fragment>
+            ))}
+          </ItemGroup>
+        </FramePanel>
+      </Frame>
+    </>
+  );
+};