zudoku 0.0.0-ff3bc72 → 0.0.0-zuplo-api-keys.95df9e9

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

@@ -7,10 +7,7 @@ type BaseComponentProps<T = unknown> = PropsWithChildren<
 
 export const Root = ({ children, className }: BaseComponentProps) => (
   <div
-    className={cn(
-      "rounded-lg overflow-hidden border dark:border-transparent",
-      className,
-    )}
+    className={cn("rounded-xl overflow-hidden border border-border", className)}
   >
     {children}
   </div>
@@ -19,7 +16,7 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "border-b dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      "border-b bg-muted dark:bg-transparent text-card-foreground p-3 py-2.5",
       className,
     )}
   >
@@ -28,20 +25,11 @@ export const Head = ({ children, className }: BaseComponentProps) => (
 );
 
 export const Body = ({ children, className }: BaseComponentProps) => (
-  <div
-    className={cn("bg-zinc-50 dark:bg-zinc-800 overflow-auto p-2", className)}
-  >
-    {children}
-  </div>
+  <div className={cn("bg-card overflow-auto p-2", className)}>{children}</div>
 );
 
 export const Footer = ({ children, className }: BaseComponentProps) => (
-  <div
-    className={cn(
-      "border-t dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
-      className,
-    )}
-  >
+  <div className={cn("border-t bg-muted dark:bg-transparent p-3", className)}>
     {children}
   </div>
 );

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

@@ -0,0 +1,168 @@
+import { useEffect, useMemo, useState } from "react";
+import { type SchemaObject } from "../../oas/parser/index.js";
+import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
+import { CollapsibleCode } from "./CollapsibleCode.js";
+import type { OperationListItemResult } from "./OperationList.js";
+import * as SidecarBox from "./SidecarBox.js";
+import { SimpleSelect } from "./SimpleSelect.js";
+import { generateSchemaExample } from "./util/generateSchemaExample.js";
+
+export type Content = NonNullable<
+  NonNullable<OperationListItemResult["requestBody"]>["content"]
+>;
+export type Example = NonNullable<
+  NonNullable<Content[number]["examples"]>
+>[number];
+
+const formatForDisplay = (value: unknown): string => {
+  if (value == null) return "No example";
+  if (typeof value === "string") return value.trim();
+  return JSON.stringify(value, null, 2);
+};
+
+const getLanguage = (mediaType?: string): string => {
+  if (!mediaType) return "plain";
+  if (mediaType.endsWith("+json")) return "json";
+  if (mediaType.endsWith("+xml")) return "xml";
+  if (mediaType.endsWith("+yaml")) return "yaml";
+
+  const languages: Record<string, string> = {
+    "text/html": "html",
+    "application/x-ndjson": "json",
+    "application/json": "json",
+    "application/xml": "xml",
+    "application/x-yaml": "yaml",
+    "text/csv": "csv",
+    "application/javascript": "javascript",
+    "application/graphql": "graphql",
+  };
+  return languages[mediaType] ?? "plain";
+};
+
+export type SidecarExamplesProps = {
+  content: Content;
+  description?: string;
+  onExampleChange?: (example: unknown) => void;
+};
+
+export const SidecarExamples = ({
+  content,
+  description,
+  onExampleChange,
+}: SidecarExamplesProps) => {
+  const [selectedContentTypeIndex, setSelectedContentTypeIndex] = useState(0);
+  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
+
+  // Get the effective content (handle single item array case)
+  const effectiveContent =
+    Array.isArray(content) && content.length === 1
+      ? content[0]
+      : content[selectedContentTypeIndex];
+
+  // Get example value, with fallback to schema-generated example
+  const examples = effectiveContent?.examples ?? [];
+  const selectedExample = examples[selectedExampleIndex];
+
+  const exampleValue = useMemo(() => {
+    if (selectedExample) {
+      // If it's a wrapped example with a value field, use that
+      return "value" in selectedExample
+        ? selectedExample.value
+        : selectedExample;
+    } else if (effectiveContent?.schema) {
+      // No example provided, generate one from schema
+      return generateSchemaExample(effectiveContent.schema as SchemaObject);
+    }
+  }, [selectedExample, effectiveContent?.schema]);
+
+  useEffect(() => {
+    if (!exampleValue) return;
+
+    onExampleChange?.(exampleValue);
+  }, [exampleValue, onExampleChange]);
+
+  const formattedExample = formatForDisplay(exampleValue);
+  const language = getLanguage(effectiveContent?.mediaType);
+
+  return (
+    <>
+      <SidecarBox.Body className="p-0">
+        {selectedExample?.externalValue ? (
+          <div className="p-2">
+            <a
+              href={selectedExample.externalValue}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-primary hover:underline"
+            >
+              View External Example →
+            </a>
+          </div>
+        ) : (
+          <CollapsibleCode>
+            <SyntaxHighlight
+              language={language}
+              noBackground
+              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
+              code={formattedExample}
+            />
+          </CollapsibleCode>
+        )}
+        {selectedExample?.description && (
+          <div className="border-t text-xs px-3 py-1.5 text-muted-foreground">
+            {selectedExample.description}
+          </div>
+        )}
+      </SidecarBox.Body>
+      <SidecarBox.Footer className="text-xs p-0 divide-y divide-border">
+        {description && (
+          <div className="text-muted-foreground text-xs px-3 py-2">
+            {description}
+          </div>
+        )}
+        {(examples.length !== 0 || content.length !== 0) && (
+          <div className="flex items-center gap-2 justify-between min-w-0 px-3 py-2">
+            <div className="flex items-center gap-2 min-w-0">
+              {content.length > 1 ? (
+                <SimpleSelect
+                  className="max-w-[200px]"
+                  value={selectedContentTypeIndex.toString()}
+                  onChange={(e) =>
+                    setSelectedContentTypeIndex(Number(e.target.value))
+                  }
+                  options={content.map((c, index) => ({
+                    value: index.toString(),
+                    label: c.mediaType,
+                  }))}
+                />
+              ) : (
+                <span className="font-mono text-[11px]">
+                  {content[0]?.mediaType}
+                </span>
+              )}
+            </div>
+            {examples.length > 1 && (
+              <div className="flex items-center gap-1">
+                <SimpleSelect
+                  className="max-w-[180px]"
+                  value={selectedExampleIndex.toString()}
+                  onChange={(e) =>
+                    setSelectedExampleIndex(Number(e.target.value))
+                  }
+                  options={examples.map((example, index) => ({
+                    value: index.toString(),
+                    label:
+                      example.summary ||
+                      example.name ||
+                      example.description ||
+                      `Example ${index + 1}`,
+                  }))}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </SidecarBox.Footer>
+    </>
+  );
+};

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

@@ -21,7 +21,7 @@ export const SimpleSelect = ({
   <div className="grid">
     <select
       className={cn(
-        "row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
+        "w-full row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
         "rounded-md appearance-none bg-zinc-50 hover:bg-white dark:bg-zinc-800 hover:dark:bg-zinc-800/75",
         className,
       )}

package/src/lib/plugins/openapi/client/GraphQLClient.tsx

@@ -0,0 +1,65 @@
+import type { GraphQLError } from "graphql/error/index.js";
+import { ZudokuError } from "../../../util/invariant.js";
+import type { TypedDocumentString } from "../graphql/graphql.js";
+import type { OpenApiPluginOptions } from "../index.js";
+import type { LocalServer } from "./createServer.js";
+
+let localServerPromise: Promise<LocalServer> | undefined;
+
+type GraphQLResponse<TResult> = {
+  errors?: GraphQLError[];
+  data: TResult;
+};
+
+const throwIfError = (response: GraphQLResponse<unknown>) => {
+  if (!response.errors?.[0]) return;
+
+  throw new ZudokuError(response.errors[0].message, {
+    developerHint:
+      "Check your configuration value `apis.type` and `apis.input` in the Zudoku config.",
+  });
+};
+
+export class GraphQLClient {
+  constructor(private readonly config: OpenApiPluginOptions) {}
+
+  #getLocalServer = async () => {
+    if (!localServerPromise) {
+      localServerPromise = import("./createServer.js").then((m) =>
+        m.createServer(this.config),
+      );
+    }
+    return localServerPromise;
+  };
+
+  #executeFetch = async (init: RequestInit): Promise<Response> => {
+    if (this.config.server) {
+      return fetch(this.config.server, init);
+    }
+
+    const localServer = await this.#getLocalServer();
+    return localServer.fetch("http://localhost/graphql", init);
+  };
+
+  fetch = async <TResult, TVariables>(
+    query: TypedDocumentString<TResult, TVariables>,
+    variables?: TVariables,
+  ): Promise<TResult> => {
+    const operationName = query.match(/query (\w+)/)?.[1];
+
+    const response = await this.#executeFetch({
+      method: "POST",
+      body: JSON.stringify({ query, variables, operationName }),
+      headers: { "Content-Type": "application/json" },
+    });
+
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    const result = (await response.json()) as GraphQLResponse<TResult>;
+    throwIfError(result);
+
+    return result.data;
+  };
+}

package/src/lib/plugins/openapi/client/GraphQLContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, type ReactNode } from "react";
+import { GraphQLClient } from "./GraphQLClient.js";
+
+export const GraphQLContext = createContext<GraphQLClient | undefined>(
+  undefined,
+);
+
+export const GraphQLProvider = ({
+  children,
+  client,
+}: {
+  children: ReactNode;
+  client: GraphQLClient;
+}) => (
+  <GraphQLContext.Provider value={client}>{children}</GraphQLContext.Provider>
+);

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

@@ -1,13 +1,17 @@
 import { useLogger } from "@envelop/core";
 import { createGraphQLServer } from "../../../oas/graphql/index.js";
+import type { OpenApiPluginOptions } from "../index.js";
 
 const map = new Map<string, number>();
 
 /**
  * Creates the GraphQL server
  */
-export const createServer = () =>
+export const createServer = (config: OpenApiPluginOptions) =>
   createGraphQLServer({
+    context: {
+      schemaImports: config.schemaImports,
+    },
     plugins: [
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useLogger({
@@ -22,7 +26,7 @@ export const createServer = () =>
             if (start) {
               // eslint-disable-next-line no-console
               console.log(
-                `${args.operationName} query took ${performance.now() - start}ms`,
+                `[zudoku:debug] ${args.operationName} query took ${performance.now() - start}ms`,
               );
               map.delete(`${startEvent}-${args.operationName}`);
             }
@@ -31,3 +35,5 @@ export const createServer = () =>
       }),
     ],
   });
+
+export type LocalServer = ReturnType<typeof createServer>;

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

@@ -0,0 +1,45 @@
+import { stripIgnoredCharacters } from "graphql";
+import { use } from "react";
+import type { TypedDocumentString } from "../graphql/graphql.js";
+import type { GraphQLClient } from "./GraphQLClient.js";
+import { GraphQLContext } from "./GraphQLContext.js";
+
+type NoExtraProps<T, U extends T = T> = U & {
+  [K in Exclude<keyof U, keyof T>]?: never;
+};
+
+type VarArgs<TVariables> =
+  TVariables extends Record<string, never> ? [] : [NoExtraProps<TVariables>];
+
+export const createQuery = <TResult, TVariables>(
+  client: GraphQLClient,
+  query: TypedDocumentString<TResult, TVariables>,
+  ...[variables]: TVariables extends Record<string, never>
+    ? []
+    : [NoExtraProps<TVariables>]
+) => {
+  return {
+    queryFn: () => client.fetch(query, variables),
+    queryKey: [stripIgnoredCharacters(query.toString()), variables],
+  } as const;
+};
+
+export const useCreateQuery = <TResult, TVariables>(
+  query: TypedDocumentString<TResult, TVariables>,
+  ...[variables]: TVariables extends Record<string, never>
+    ? []
+    : [NoExtraProps<TVariables>]
+) => {
+  const graphQLClient = use(GraphQLContext);
+
+  if (graphQLClient === undefined) {
+    throw new Error("useGraphQL must be used within a GraphQLProvider");
+  }
+
+  const args =
+    variables === undefined
+      ? ([] as VarArgs<TVariables>)
+      : ([variables] as VarArgs<TVariables>);
+
+  return createQuery(graphQLClient, query, ...args);
+};

package/src/lib/plugins/openapi/components/ConstValue.tsx

@@ -0,0 +1,24 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { SelectOnClick } from "./SelectOnClick.js";
+
+export const ConstValue = ({
+  schema,
+  hideDescription = false,
+}: {
+  schema: SchemaObject;
+  hideDescription?: boolean;
+}) => {
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      <div>
+        <span className="text-muted-foreground">Const value: </span>
+        <SelectOnClick className="border rounded px-1 font-mono">
+          {schema.const}
+        </SelectOnClick>
+        {!hideDescription && schema.description && (
+          <div className="text-muted-foreground">{schema.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/lib/plugins/openapi/components/EnumValues.tsx

@@ -0,0 +1,58 @@
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
+import { cn } from "../../../util/cn.js";
+import { SelectOnClick } from "./SelectOnClick.js";
+
+export const EnumValues = ({
+  values,
+  className,
+  maxVisibleValues = 8,
+}: {
+  values: Array<string | number>;
+  className?: string;
+  maxVisibleValues?: number;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (!values.length) return null;
+
+  const shouldCollapse = values.length > maxVisibleValues;
+  const visibleValues =
+    shouldCollapse && !isOpen ? values.slice(0, maxVisibleValues) : values;
+
+  return (
+    <div className={cn("flex flex-wrap gap-1.5 text-xs", className)}>
+      <span className="text-muted-foreground">Enum values: </span>
+      {visibleValues.map((value) => (
+        <div key={value}>
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
+            {value}
+          </SelectOnClick>
+        </div>
+      ))}
+      {shouldCollapse && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-fit px-0"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {isOpen ? (
+            <div className="flex items-center gap-1">
+              <ChevronUpIcon size={12} />
+              <span className="text-muted-foreground">show less</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1">
+              <ChevronDownIcon size={12} />
+              <span className="text-muted-foreground">
+                show {values.length - maxVisibleValues} more
+              </span>
+            </div>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/lib/plugins/openapi/components/ResponseContent.tsx

@@ -0,0 +1,104 @@
+import * as Tabs from "@radix-ui/react-tabs";
+import { useState } from "react";
+import { Markdown } from "zudoku/components";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "zudoku/ui/Select.js";
+import { cn } from "zudoku/ui/util.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
+import { SchemaView } from "../schema/SchemaView.js";
+
+type Response = {
+  statusCode: string;
+  description?: string | null;
+  content?: MediaTypeObject[] | null;
+};
+
+export const ResponseContent = ({
+  responses,
+  selectedResponse,
+  onSelectResponse,
+}: {
+  responses: Response[];
+  selectedResponse?: string;
+  onSelectResponse?: (value: string) => void;
+}) => {
+  const [selectedMediaType, setSelectedMediaType] = useState(
+    responses[0]?.content?.[0]?.mediaType ?? "",
+  );
+  const currentResponse =
+    responses.find((r) => r.statusCode === selectedResponse) ?? responses[0];
+
+  const cardHeader = (
+    <div className="flex flex-col bg-muted text-muted-foreground">
+      <div className="flex flex-row items-center gap-2 justify-between px-4 py-2">
+        <Tabs.List className="flex flex-row font-medium text-sm gap-4">
+          {responses.map((response) => (
+            <Tabs.Trigger
+              key={response.statusCode}
+              value={response.statusCode}
+              className={cn(
+                "py-1 -mx-2 px-2 rounded-md",
+                "data-[state=active]:dark:ring-1 data-[state=active]:dark:ring-border data-[state=active]:bg-background data-[state=active]:drop-shadow",
+                "data-[state=active]:font-semibold data-[state=active]:text-foreground",
+              )}
+            >
+              {response.statusCode}
+            </Tabs.Trigger>
+          ))}
+        </Tabs.List>
+        {currentResponse?.content && currentResponse.content.length > 1 && (
+          <Select
+            value={selectedMediaType}
+            onValueChange={setSelectedMediaType}
+          >
+            <SelectTrigger className="h-8 mt-0 max-w-48 text-xs truncate">
+              <SelectValue placeholder="Select a type" />
+            </SelectTrigger>
+            <SelectContent>
+              {currentResponse.content.map((c) => (
+                <SelectItem key={c.mediaType} value={c.mediaType}>
+                  {c.mediaType}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+      {currentResponse?.description && (
+        <Markdown
+          className="text-sm border-t px-4 py-2 text-muted-foreground"
+          content={currentResponse.description}
+        />
+      )}
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Tabs.Root
+        value={selectedResponse}
+        onValueChange={(value) => {
+          onSelectResponse?.(value);
+          const newResponse = responses.find((r) => r.statusCode === value);
+          setSelectedMediaType(newResponse?.content?.[0]?.mediaType ?? "");
+        }}
+      >
+        {responses.map((response) => {
+          const content = response.content?.find(
+            (c) => c.mediaType === selectedMediaType,
+          );
+          return (
+            <Tabs.Content key={response.statusCode} value={response.statusCode}>
+              <SchemaView schema={content?.schema} cardHeader={cardHeader} />
+            </Tabs.Content>
+          );
+        })}
+      </Tabs.Root>
+    </div>
+  );
+};

package/src/lib/plugins/openapi/components/SelectOnClick.tsx

@@ -0,0 +1,29 @@
+import { Slot, type SlotProps } from "@radix-ui/react-slot";
+
+export const SelectOnClick = ({
+  asChild,
+  onClick,
+  enabled = true,
+  ...props
+}: {
+  asChild?: boolean;
+  enabled?: boolean;
+} & SlotProps) => {
+  const Component = asChild ? Slot : "span";
+
+  return (
+    <Component
+      onClick={(e) => {
+        if (enabled) {
+          const range = document.createRange();
+          range.selectNodeContents(e.currentTarget);
+          const selection = window.getSelection();
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+        }
+        onClick?.(e);
+      }}
+      {...props}
+    />
+  );
+};

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

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "react";
-import { OasPluginConfig } from "./interfaces.js";
+import { type OasPluginContext } from "./interfaces.js";
 
-const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
+const OasContext = createContext<{ config: OasPluginContext } | undefined>(
   undefined,
 );
 

package/src/lib/plugins/openapi/graphql/fragment-masking.ts

@@ -2,10 +2,8 @@
 import type {
   DocumentTypeDecoration,
   ResultOf,
-  TypedDocumentNode,
 } from "@graphql-typed-document-node/core";
-import type { FragmentDefinitionNode } from "graphql";
-import type { Incremental } from "./graphql.js";
+import type { Incremental, TypedDocumentString } from "./graphql.js";
 
 export type FragmentType<
   TDocumentType extends DocumentTypeDecoration<any, any>,
@@ -86,26 +84,21 @@ export function makeFragmentData<
   return data as FragmentType<F>;
 }
 export function isFragmentReady<TQuery, TFrag>(
-  queryNode: DocumentTypeDecoration<TQuery, any>,
-  fragmentNode: TypedDocumentNode<TFrag>,
+  queryNode: TypedDocumentString<TQuery, any>,
+  fragmentNode: TypedDocumentString<TFrag, any>,
   data:
-    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>
+    | FragmentType<TypedDocumentString<Incremental<TFrag>, any>>
     | null
     | undefined,
 ): data is FragmentType<typeof fragmentNode> {
-  const deferredFields = (
-    queryNode as {
-      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };
-    }
-  ).__meta__?.deferredFields;
+  const deferredFields = queryNode.__meta__?.deferredFields as Record<
+    string,
+    (keyof TFrag)[]
+  >;
+  const fragName = fragmentNode.__meta__?.fragmentName as string | undefined;
 
-  if (!deferredFields) return true;
+  if (!deferredFields || !fragName) return true;
 
-  const fragDef = fragmentNode.definitions[0] as
-    | FragmentDefinitionNode
-    | undefined;
-  const fragName = fragDef?.name?.value;
-
-  const fields = (fragName && deferredFields[fragName]) || [];
+  const fields = deferredFields[fragName] ?? [];
   return fields.length > 0 && fields.every((field) => data && field in data);
 }