zudoku 0.0.0-fix-create-zudoku-run-build.fefccf58 → 0.0.0-fix-downgrade-openapi-parser.aac00796

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -1,6 +1,7 @@
+/* eslint-disable */
 import type { DocumentTypeDecoration } from "@graphql-typed-document-node/core";
 export type Maybe<T> = T | null;
-export type InputMaybe<T> = Maybe<T>;
+export type InputMaybe<T> = T | null | undefined;
 export type Exact<T extends { [key: string]: unknown }> = {
   [K in keyof T]: T[K];
 };
@@ -78,6 +79,7 @@ export type OperationItem = {
   path: Scalars["String"]["output"];
   requestBody?: Maybe<RequestBodyObject>;
   responses: Array<ResponseItem>;
+  servers: Array<Server>;
   slug: Scalars["String"]["output"];
   summary?: Maybe<Scalars["String"]["output"]>;
   tags?: Maybe<Array<TagItem>>;
@@ -224,6 +226,11 @@ export type OperationsFragmentFragment = {
   path: string;
   deprecated?: boolean | null;
   extensions?: any | null;
+  servers: Array<{
+    __typename?: "Server";
+    url: string;
+    description?: string | null;
+  }>;
   parameters?: Array<{
     __typename?: "ParameterItem";
     name: string;
@@ -314,6 +321,7 @@ export type OperationsForTagQuery = {
       __typename?: "SchemaTag";
       name?: string | null;
       description?: string | null;
+      extensions?: any | null;
       operations: Array<
         { __typename?: "OperationItem"; slug: string } & {
           " $fragmentRefs"?: {
@@ -325,11 +333,13 @@ export type OperationsForTagQuery = {
         __typename?: "SchemaTag";
         name?: string | null;
         slug?: string | null;
+        extensions?: any | null;
       } | null;
       prev?: {
         __typename?: "SchemaTag";
         name?: string | null;
         slug?: string | null;
+        extensions?: any | null;
       } | null;
     } | null;
   };
@@ -408,7 +418,9 @@ export class TypedDocumentString<TResult, TVariables>
   extends String
   implements DocumentTypeDecoration<TResult, TVariables>
 {
-  __apiType?: DocumentTypeDecoration<TResult, TVariables>["__apiType"];
+  __apiType?: NonNullable<
+    DocumentTypeDecoration<TResult, TVariables>["__apiType"]
+  >;
   private value: string;
   public __meta__?: Record<string, any> | undefined;
 
@@ -418,7 +430,7 @@ export class TypedDocumentString<TResult, TVariables>
     this.__meta__ = __meta__;
   }
 
-  toString(): string & DocumentTypeDecoration<TResult, TVariables> {
+  override toString(): string & DocumentTypeDecoration<TResult, TVariables> {
     return this.value;
   }
 }
@@ -434,6 +446,10 @@ export const OperationsFragmentFragmentDoc = new TypedDocumentString(
   path
   deprecated
   extensions
+  servers {
+    url
+    description
+  }
   parameters {
     name
     in
@@ -532,13 +548,16 @@ export const OperationsForTagDocument = new TypedDocumentString(`
         slug
         ...OperationsFragment
       }
+      extensions
       next {
         name
         slug
+        extensions
       }
       prev {
         name
         slug
+        extensions
       }
     }
   }
@@ -553,6 +572,10 @@ export const OperationsForTagDocument = new TypedDocumentString(`
   path
   deprecated
   extensions
+  servers {
+    url
+    description
+  }
   parameters {
     name
     in

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

@@ -1,8 +1,7 @@
-import { CirclePlayIcon, LogInIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { CirclePlayIcon } from "lucide-react";
+import type { PropsWithChildren } from "react";
 import { matchPath } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
-import { useAuth } from "../../authentication/hook.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
@@ -71,47 +70,28 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
     },
     getMdxComponents: () => ({
       OpenPlaygroundButton: ({
-        requireAuth,
         server,
-        method,
-        url,
+        method = "get",
+        url = "/",
         children,
         ...props
-      }: Partial<PlaygroundContentProps> & { children: ReactNode } & Pick<
-          PlaygroundContentProps,
-          "server"
-        > & {
-          requireAuth: boolean;
-        }) => {
-        const auth = useAuth();
-
+      }: PropsWithChildren<Partial<PlaygroundContentProps>>) => {
         if (!server) {
           throw new Error("Server is required");
         }
 
-        if (requireAuth && !auth.isAuthenticated) {
-          return (
-            <Button
-              className="gap-2 items-center"
-              variant="outline"
-              onClick={auth.login}
-            >
-              Login to open in Playground <LogInIcon size={16} />
-            </Button>
-          );
-        }
-
         return (
           <PlaygroundDialog
-            url={url ?? "/"}
-            method={method ?? "get"}
+            url={url}
+            method={method}
             server={server}
             {...props}
           >
             <Button className="gap-2 items-center" variant="outline">
               {children ?? (
                 <>
-                  Open in Playground <CirclePlayIcon size={16} />
+                  Open in Playground
+                  <CirclePlayIcon size={16} />
                 </>
               )}
             </Button>
@@ -214,7 +194,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
           (tag) => !tag.name,
         )?.operations;
 
-        if (untaggedOperations) {
+        if (untaggedOperations && untaggedOperations.length > 0) {
           categories.push(
             createNavigationCategory({
               label: categories.length === 0 ? "Endpoints" : "Other endpoints",

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,7 +1,7 @@
 import type { AuthState } from "../../authentication/state.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import type { SchemaImports } from "../../oas/graphql/index.js";
-import type { OperationListItemResult } from "./OperationList.js";
+import type { OperationsFragmentFragment } from "./graphql/graphql.js";
 
 type DynamicInput = () => Promise<unknown>;
 
@@ -38,7 +38,7 @@ export type TransformExamplesFn = (options: {
   content: Content[];
   context: ZudokuContext;
   auth: AuthState;
-  operation: OperationListItemResult;
+  operation: OperationsFragmentFragment;
   type: "request" | "response";
 }) => Content[];
 
@@ -54,6 +54,7 @@ type BaseOasConfig = {
     disableSidecar?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
     expandAllTags?: boolean;
+    expandApiInformation?: boolean;
     transformExamples?: TransformExamplesFn;
   };
 };

package/src/lib/plugins/openapi/playground/BodyPanel.tsx

@@ -3,7 +3,7 @@ import { useFormContext } from "react-hook-form";
 import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
 import { Textarea } from "zudoku/ui/Textarea.js";
 import { cn } from "../../../util/cn.js";
-import type { Content } from "../SidecarExamples.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
 import {
   CollapsibleHeader,
   CollapsibleHeaderTrigger,
@@ -11,7 +11,7 @@ import {
 import ExamplesDropdown from "./ExamplesDropdown.js";
 import type { PlaygroundForm } from "./Playground.js";
 
-export const BodyPanel = ({ content }: { content?: Content }) => {
+export const BodyPanel = ({ content }: { content?: MediaTypeObject[] }) => {
   const { register, setValue, watch } = useFormContext<PlaygroundForm>();
   const examples = (content ?? []).flatMap((e) => e.examples);
   const headers = watch("headers");

package/src/lib/plugins/openapi/playground/CollapsibleHeader.tsx

@@ -12,7 +12,7 @@ export const CollapsibleHeaderTrigger = ({
   return (
     <div
       className={cn(
-        "grid grid-cols-[max-content_1fr_min-content_max-content] items-center gap-4 group bg-muted w-full h-10 ps-4 pe-2 border-b",
+        "grid grid-cols-[max-content_1fr_min-content_max-content] items-center gap-2 group bg-muted w-full h-10 ps-4 pe-2 border-b",
         className,
       )}
     >
@@ -24,7 +24,7 @@ export const CollapsibleHeaderTrigger = ({
         )}
       >
         <ChevronUpIcon
-          className="group-data-[state=open]:rotate-180 transition-transform flex-shrink-0"
+          className="group-data-[state=open]:rotate-180 transition-transform shrink-0"
           size={16}
         />
       </CollapsibleTrigger>

package/src/lib/plugins/openapi/playground/ExamplesDropdown.tsx

@@ -9,14 +9,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "zudoku/ui/DropdownMenu.js";
-import type { Content, Example } from "../SidecarExamples.js";
+import type { ExampleItem, MediaTypeObject } from "../graphql/graphql.js";
 
 const ExamplesDropdown = ({
   examples,
   onSelect,
 }: {
-  examples: Content;
-  onSelect: (example: Example, mediaType: string) => void;
+  examples: MediaTypeObject[];
+  onSelect: (example: ExampleItem, mediaType: string) => void;
 }) => {
   return (
     <DropdownMenu>

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -23,7 +23,7 @@ import { useHotkey } from "../../../hooks/useHotkey.js";
 import { cn } from "../../../util/cn.js";
 import { useCopyToClipboard } from "../../../util/useCopyToClipboard.js";
 import { useLatest } from "../../../util/useLatest.js";
-import type { Content } from "../SidecarExamples.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
 import { useSelectedServer } from "../state.js";
 import BodyPanel from "./BodyPanel.js";
 import {
@@ -117,7 +117,7 @@ export type PlaygroundContentProps = {
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
   defaultBody?: string;
-  examples?: Content;
+  examples?: MediaTypeObject[];
   requiresLogin?: boolean;
   onLogin?: () => void;
   onSignUp?: () => void;
@@ -145,6 +145,7 @@ export const Playground = ({
   const { setRememberedIdentity, getRememberedIdentity } = useIdentityStore();
   const [, startTransition] = useTransition();
   const { skipLogin, setSkipLogin } = useRememberSkipLoginDialog();
+  const [isLoginDialogDismissed, setIsLoginDialogDismissed] = useState(false);
   const [showLongRunningWarning, setShowLongRunningWarning] = useState(false);
   const abortControllerRef = useRef<AbortController | undefined>(undefined);
   const latestSetRememberedIdentity = useLatest(setRememberedIdentity);
@@ -285,7 +286,7 @@ export const Playground = ({
         return {
           status: response.status,
           headers: responseHeaders,
-          size: responseSize ? parseInt(responseSize) : body.length,
+          size: responseSize ? Number(responseSize) : body.length,
           body,
           time,
           isBinary,
@@ -361,7 +362,7 @@ export const Playground = ({
     </div>
   );
 
-  const showLogin = requiresLogin && !skipLogin;
+  const showLogin = requiresLogin && !skipLogin && !isLoginDialogDismissed;
   const isBodySupported = ["POST", "PUT", "PATCH", "DELETE"].includes(
     method.toUpperCase(),
   );
@@ -397,7 +398,17 @@ export const Playground = ({
           />
           <RequestLoginDialog
             open={showLogin}
-            setOpen={(open) => setSkipLogin(!open)}
+            setOpen={(open) => {
+              if (!open) {
+                setIsLoginDialogDismissed(true);
+              }
+            }}
+            onSkip={(rememberSkip) => {
+              setIsLoginDialogDismissed(true);
+              if (rememberSkip) {
+                setSkipLogin(true);
+              }
+            }}
             onSignUp={onSignUp}
             onLogin={onLogin}
           />

package/src/lib/plugins/openapi/playground/PlaygroundDialog.tsx

@@ -1,5 +1,6 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { type PropsWithChildren, useState } from "react";
+import { useAuth } from "zudoku/hooks";
 import {
   Dialog,
   DialogContent,
@@ -35,6 +36,9 @@ const HeroPlayIcon = ({
 
 const PlaygroundDialog = (props: PlaygroundDialogProps) => {
   const [open, setOpen] = useState(false);
+  const { isAuthEnabled, login, signup, isPending, isAuthenticated } =
+    useAuth();
+
   return (
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
@@ -50,14 +54,21 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
       </DialogTrigger>
 
       <DialogContent
-        className="max-w-screen-xl w-full overflow-hidden p-0"
+        className="max-w-screen-xl! w-full overflow-hidden p-0"
         aria-describedby={undefined}
         showCloseButton={true}
       >
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>
         </VisuallyHidden>
-        {open && <Playground {...props} />}
+        {open && (
+          <Playground
+            requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
+            onLogin={() => login()}
+            onSignUp={() => signup()}
+            {...props}
+          />
+        )}
       </DialogContent>
     </Dialog>
   );

package/src/lib/plugins/openapi/playground/RequestLoginDialog.tsx

@@ -1,4 +1,6 @@
+import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
 import {
   Dialog,
   DialogContent,
@@ -6,18 +8,28 @@ import {
   DialogFooter,
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
+import { Label } from "zudoku/ui/Label.js";
 
 const RequestLoginDialog = ({
   open,
   setOpen,
   onSignUp,
   onLogin,
+  onSkip,
 }: {
   open: boolean;
   onSignUp?: () => void;
   onLogin?: () => void;
   setOpen: (open: boolean) => void;
+  onSkip?: (rememberSkip: boolean) => void;
 }) => {
+  const [rememberSkip, setRememberSkip] = useState(false);
+
+  const handleSkip = () => {
+    onSkip?.(rememberSkip);
+    setOpen(false);
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
@@ -26,8 +38,15 @@ const RequestLoginDialog = ({
           The Playground is a tool for developers to test and explore our APIs.
           To use the Playground, you need to login.
         </DialogDescription>
+        <Label className="flex items-center gap-2 font-normal">
+          <Checkbox
+            checked={rememberSkip}
+            onCheckedChange={(checked) => setRememberSkip(checked === true)}
+          />
+          Don't show this again
+        </Label>
         <DialogFooter className="flex gap-2 sm:justify-between">
-          <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+          <Button type="button" variant="outline" onClick={handleSkip}>
             Skip
           </Button>
           <div className="flex gap-2">

package/src/lib/plugins/openapi/playground/result-panel/ResponseStatusBar.tsx

@@ -84,7 +84,7 @@ export const ResponseStatusBar = ({
   };
 
   return (
-    <div className="relative flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
+    <div className="relative shrink-0 flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
       <div className="flex items-center gap-2">
         <ResponseCodeCircle status={status} /> {status ?? "Sending Request..."}
         {status ? ` ${statusCodeMap[status]}` : ""}
@@ -104,7 +104,7 @@ export const ResponseStatusBar = ({
         </div>
       </div>
       <div
-        className="h-full bg-neutral-500/10 absolute left-0 -bottom-0 z-10 transition-all duration-200 ease-in-out"
+        className="h-full bg-neutral-500/10 absolute left-0 bottom-0 z-10 transition-all duration-200 ease-in-out"
         style={{
           opacity: isFinished ? 0 : 1,
           width: isFinished ? 0 : `${progress * 100}%`,