zudoku 0.1.1-dev.9 → 0.3.0-dev.100

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

@@ -0,0 +1,75 @@
+import { Markdown } from "../../components/Markdown.js";
+import { SchemaObject } from "../../oas/parser/index.js";
+import { Card } from "../../ui/Card.js";
+import { groupBy } from "../../util/groupBy.js";
+import { objectEntries } from "../../util/objectEntries.js";
+import { SchemaListViewItem } from "./SchemaListViewItem.js";
+import { SchemaListViewItemGroup } from "./SchemaListViewItemGroup.js";
+import { SchemaProseClasses } from "./util/prose.js";
+
+export const SchemaListView = ({
+  name,
+  schema,
+  level = 0,
+  defaultOpen = false,
+}: {
+  level?: number;
+  defaultOpen?: boolean;
+  name?: string;
+  schema: SchemaObject;
+}) => {
+  const properties = Object.entries(schema.properties ?? {});
+  const additionalProperties =
+    typeof schema.additionalProperties === "object"
+      ? Object.entries(schema.additionalProperties)
+      : [];
+
+  const combinedProperties = properties.concat(
+    Array.isArray(additionalProperties) ? additionalProperties : [],
+  );
+
+  const groups = groupBy(combinedProperties, ([propertyName, property]) => {
+    return property.deprecated
+      ? "deprecated"
+      : schema.required?.includes(propertyName)
+        ? "required"
+        : "optional";
+  });
+
+  if (schema.type === "array") {
+    return (
+      <Card className="overflow-hidden">
+        <SchemaListViewItem
+          propertyName={schema.title ?? name}
+          isRequired={true}
+          property={schema}
+          defaultOpen={level === 0}
+          nestingLevel={level}
+        />
+      </Card>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2.5">
+      {(schema.title ?? name) && (
+        <div className="ml-2 my-1 font-bold">{schema.title ?? name}</div>
+      )}
+      {level === 0 && schema.description && (
+        <Markdown className={SchemaProseClasses} content={schema.description} />
+      )}
+      <Card className="overflow-hidden">
+        {objectEntries(groups).map(([group, properties]) => (
+          <SchemaListViewItemGroup
+            key={group}
+            defaultOpen={defaultOpen}
+            group={group}
+            nestingLevel={level}
+            properties={properties ?? []}
+            required={schema.required ?? []}
+          />
+        ))}
+      </Card>
+    </div>
+  );
+};

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

@@ -0,0 +1,125 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ListPlusIcon } from "lucide-react";
+import { Markdown } from "../../components/Markdown.js";
+import { SchemaObject } from "../../oas/parser/index.js";
+import { Button } from "../../ui/Button.js";
+import { cn } from "../../util/cn.js";
+import { SchemaListView } from "./SchemaListView.js";
+
+export const SchemaListViewItem = ({
+  propertyName,
+  property,
+  nestingLevel,
+  isRequired,
+  defaultOpen = false,
+}: {
+  propertyName?: string;
+  isRequired: boolean;
+  property: SchemaObject;
+  nestingLevel: number;
+  defaultOpen?: boolean;
+}) => {
+  if (!property) {
+    return <div>no property</div>;
+  }
+
+  const title =
+    propertyName || property.title
+      ? [propertyName, property.title].filter(Boolean).join(" ")
+      : null;
+
+  return (
+    <div
+      className={cn(
+        "p-4 bg-border/20 hover:bg-border/30 flex gap-1 flex-col text-sm",
+        property.deprecated && "opacity-50",
+      )}
+    >
+      <div className="flex items-center gap-2 relative">
+        {title && <code>{title}</code>}
+
+        {property.type && (
+          <span className="text-muted-foreground">{property.type}</span>
+        )}
+        {property.deprecated && (
+          <span className="text-muted-foreground">Deprecated</span>
+        )}
+        {!isRequired && (
+          <span className="py-px px-1.5 font-medium border rounded-lg">
+            optional {property.required}
+          </span>
+        )}
+      </div>
+      {property.description && (
+        <Markdown
+          content={property.description}
+          className="text-sm leading-normal line-clamp-4 "
+        />
+      )}
+
+      {property.enum && (
+        <span className="text-sm text-muted-foreground flex gap-1 flex-wrap items-center">
+          <span>Possible values</span>
+          {/* Make values unique, some schemas have duplicates */}
+          {[...new Set(property.enum.filter((value) => value))]
+            .map((value) => (
+              <span
+                key={value}
+                className="font-mono text-xs border bg-muted rounded px-1"
+              >
+                {value}
+              </span>
+            ))
+            .slice(0, 4)}
+          {property.enum.length > 4 && (
+            <span className="font-mono text-xs border bg-muted rounded px-1">
+              ...
+            </span>
+          )}
+        </span>
+      )}
+
+      {(property.type === "object" &&
+        (property.properties?.length ??
+          Object.entries(property.additionalProperties ?? {}).length > 0)) ||
+      (property.type === "array" &&
+        // this check is needed because the `items` can be undefined despite the type being defined
+        typeof property.items !== "undefined" &&
+        property.items.type === "object") ? (
+        <Collapsible.Root className="CollapsibleRoot" defaultOpen={defaultOpen}>
+          <Collapsible.Trigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(defaultOpen && "hidden")}
+            >
+              Show nested fields
+              <ListPlusIcon size={18} className="ml-1.5" />
+            </Button>
+          </Collapsible.Trigger>
+
+          <Collapsible.Content>
+            {property.type === "object" && (
+              <div className="mt-2.5">
+                <SchemaListView
+                  schema={property}
+                  level={nestingLevel + 1}
+                  defaultOpen
+                />
+              </div>
+            )}
+            {property.type === "array" && property.items.type === "object" && (
+              <div className="mt-2.5">
+                <SchemaListView
+                  schema={property.items}
+                  defaultOpen
+                  level={nestingLevel + 1}
+                />
+              </div>
+            )}
+          </Collapsible.Content>
+        </Collapsible.Root>
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,63 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { useState } from "react";
+import { SchemaObject } from "../../oas/parser/index.js";
+import { cn } from "../../util/cn.js";
+import { SchemaListViewItem } from "./SchemaListViewItem.js";
+
+export const SchemaListViewItemGroup = ({
+  group,
+  properties,
+  nestingLevel,
+  required,
+  defaultOpen = false,
+}: {
+  group: "optional" | "required" | "deprecated";
+  defaultOpen?: boolean;
+  properties: [string, SchemaObject][];
+  nestingLevel: number;
+  required: string[];
+}) => {
+  const notCollapsible =
+    defaultOpen ||
+    group === "required" ||
+    properties.length === 1 ||
+    nestingLevel === 0;
+
+  const [open, setOpen] = useState(notCollapsible);
+
+  if (properties.length === 0) {
+    return;
+  }
+
+  return (
+    <Collapsible.Root
+      className="CollapsibleRoot"
+      open={open}
+      onOpenChange={setOpen}
+    >
+      {!open && (
+        <Collapsible.Trigger
+          className={cn(
+            "py-2 hover:bg-muted w-full",
+            group === "optional" && "font-semibold",
+            group === "deprecated" && "text-muted-foreground",
+          )}
+        >
+          {properties.length} {group} fields
+        </Collapsible.Trigger>
+      )}
+
+      <Collapsible.Content className="divide-y divide-border">
+        {properties.map(([propertyName, property]) => (
+          <SchemaListViewItem
+            key={propertyName}
+            property={property}
+            propertyName={propertyName}
+            nestingLevel={nestingLevel}
+            isRequired={required.includes(propertyName)}
+          />
+        ))}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

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

@@ -0,0 +1,207 @@
+import { HTTPSnippet } from "@zudoku/httpsnippet";
+import { Fragment, useMemo, useTransition } from "react";
+import { useSearchParams } from "react-router-dom";
+import { TextColorMap } from "../../components/navigation/SidebarBadge.js";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import type { SchemaObject } from "../../oas/parser/index.js";
+import { cn } from "../../util/cn.js";
+import { ColorizedParam } from "./ColorizedParam.js";
+import { useOasConfig } from "./context.js";
+import { graphql } from "./graphql/index.js";
+import type { OperationListItemResult } from "./OperationList.js";
+import { PlaygroundDialogWrapper } from "./PlaygroundDialogWrapper.js";
+import { RequestBodySidecarBox } from "./RequestBodySidecarBox.js";
+import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
+import * as SidecarBox from "./SidecarBox.js";
+import { SimpleSelect } from "./SimpleSelect.js";
+import { generateSchemaExample } from "./util/generateSchemaExample.js";
+import { useQuery } from "./util/urql.js";
+
+const getConverted = (snippet: HTTPSnippet, option: string) => {
+  let converted;
+  switch (option) {
+    case "shell":
+      converted = snippet.convert("shell", "curl");
+      break;
+    case "js":
+      converted = snippet.convert("javascript", "fetch");
+      break;
+    case "python":
+      converted = snippet.convert("python", "requests");
+      break;
+    case "java":
+      converted = snippet.convert("java", "okhttp");
+      break;
+    case "go":
+      converted = snippet.convert("go", "native");
+      break;
+    case "csharp":
+      converted = snippet.convert("csharp", "httpclient");
+      break;
+    case "kotlin":
+      converted = snippet.convert("kotlin", "okhttp");
+      break;
+    case "objc":
+      converted = snippet.convert("objc", "nsurlsession");
+      break;
+    case "php":
+      converted = snippet.convert("php", "http2");
+      break;
+    case "ruby":
+      converted = snippet.convert("ruby");
+      break;
+    case "swift":
+      converted = snippet.convert("swift");
+      break;
+    default:
+      converted = snippet.convert("shell");
+      break;
+  }
+
+  return converted ? converted[0] : "";
+};
+
+export const GetServerQuery = graphql(/* GraphQL */ `
+  query getServerQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+    }
+  }
+`);
+
+const context = { suspense: true };
+
+const methodToColor = {
+  get: TextColorMap.green,
+  post: TextColorMap.blue,
+  put: TextColorMap.yellow,
+  delete: TextColorMap.red,
+  patch: TextColorMap.purple,
+  options: TextColorMap.indigo,
+  head: TextColorMap.gray,
+  trace: TextColorMap.gray,
+};
+
+export const Sidecar = ({
+  operation,
+}: {
+  operation: OperationListItemResult;
+}) => {
+  const oasConfig = useOasConfig();
+  const [result] = useQuery({
+    query: GetServerQuery,
+    variables: oasConfig,
+    context,
+  });
+  const methodTextColor =
+    methodToColor[
+      operation.method.toLocaleLowerCase() as keyof typeof methodToColor
+    ] ?? TextColorMap.gray;
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [, startTransition] = useTransition();
+
+  const selectedLang = searchParams.get("lang") ?? "shell";
+
+  const requestBodyContent = operation.requestBody?.content;
+
+  const path = operation.path.split("/").map((part) => (
+    <Fragment key={part}>
+      {part.startsWith("{") && part.endsWith("}") ? (
+        <ColorizedParam
+          name={part.slice(1, -1)}
+          backgroundOpacity="0"
+          // same as in `ParameterListItem`
+          slug={operation.slug + "-" + part.slice(1, -1).toLocaleLowerCase()}
+        >
+          {part}
+        </ColorizedParam>
+      ) : (
+        part
+      )}
+      /
+      <wbr />
+    </Fragment>
+  ));
+
+  const code = useMemo(() => {
+    const example = requestBodyContent?.[0]?.schema
+      ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
+      : undefined;
+
+    const snippet = new HTTPSnippet(
+      {
+        method: operation.method.toLocaleUpperCase(),
+        url: operation.path.replaceAll("{", ":").replaceAll("}", ""),
+        headers: [{ name: "Authorization", value: "Bearer <token>" }],
+        postData: example
+          ? {
+              text: JSON.stringify(example, null, 2),
+              mimeType: "application/json",
+            }
+          : {},
+      } as never, // 👈 never touch this
+    );
+
+    return getConverted(snippet, selectedLang);
+  }, [selectedLang, operation.method, operation.path, requestBodyContent]);
+
+  return (
+    <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
+      <SidecarBox.Root>
+        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-3 gap-2 text-xs">
+          <span className="font-mono break-words">
+            <span className={cn("font-semibold", methodTextColor)}>
+              {operation.method.toLocaleUpperCase()}
+            </span>
+            &nbsp;
+            {path}
+          </span>
+          <PlaygroundDialogWrapper
+            server={result.data?.schema.url ?? ""}
+            operation={operation}
+          />
+        </SidecarBox.Head>
+        <SidecarBox.Body>
+          <SyntaxHighlight
+            language={selectedLang}
+            noBackground
+            className="text-xs"
+            code={code}
+          />
+        </SidecarBox.Body>
+        <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-1">
+          <span>Show example in</span>
+          <SimpleSelect
+            className="self-start max-w-[150px]"
+            value={selectedLang}
+            onChange={(e) => {
+              startTransition(() => {
+                setSearchParams({ lang: e.target.value });
+              });
+            }}
+            options={[
+              { value: "shell", label: "cURL" },
+              { value: "js", label: "Javascript" },
+              { value: "python", label: "Python" },
+              { value: "java", label: "Java" },
+              { value: "go", label: "Go" },
+              { value: "csharp", label: "C#" },
+              { value: "kotlin", label: "Kotlin" },
+              { value: "objc", label: "Objective C" },
+              { value: "php", label: "PHP" },
+              { value: "ruby", label: "Ruby" },
+              { value: "swift", label: "Swift" },
+            ]}
+          />
+        </SidecarBox.Footer>
+      </SidecarBox.Root>
+      {requestBodyContent && (
+        <RequestBodySidecarBox content={requestBodyContent} />
+      )}
+      {operation.responses.length > 0 && (
+        <ResponsesSidecarBox responses={operation.responses} />
+      )}
+    </aside>
+  );
+};

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

@@ -0,0 +1,47 @@
+import type { PropsWithChildren } from "react";
+import { cn } from "../../util/cn.js";
+
+type BaseComponentProps<T = unknown> = PropsWithChildren<
+  T & { className?: string }
+>;
+
+export const Root = ({ children, className }: BaseComponentProps) => (
+  <div
+    className={cn(
+      "rounded-lg overflow-hidden border dark:border-transparent",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+export const Head = ({ children, className }: BaseComponentProps) => (
+  <div
+    className={cn(
+      "border-b dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+export const Body = ({ children, className }: BaseComponentProps) => (
+  <div
+    className={cn("bg-zinc-50 dark:bg-zinc-800 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,
+    )}
+  >
+    {children}
+  </div>
+);

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

@@ -0,0 +1,38 @@
+import { ChevronsUpDownIcon } from "lucide-react";
+import type { ChangeEventHandler } from "react";
+import { cn } from "../../util/cn.js";
+
+export const SimpleSelect = ({
+  value,
+  onChange,
+  className,
+  options,
+}: {
+  value: string;
+  onChange: ChangeEventHandler<HTMLSelectElement>;
+  className?: string;
+  options: {
+    value: string;
+    label: string;
+  }[];
+}) => (
+  <div className={cn("grid", className)}>
+    <select
+      className={cn(
+        "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",
+      )}
+      value={value}
+      onChange={onChange}
+    >
+      {options.map((option) => (
+        <option value={option.value} key={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+    <div className="row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none">
+      <ChevronsUpDownIcon size={14} />
+    </div>
+  </div>
+);

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

@@ -0,0 +1,31 @@
+import {
+  Children,
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+export const StaggeredRenderContext = createContext({ stagger: false });
+
+const StaggeredRender = ({ children }: { children: ReactNode[] }) => {
+  const { stagger } = useContext(StaggeredRenderContext);
+  const [renderAll, setRenderAll] = useState(!stagger);
+
+  useEffect(() => {
+    if (renderAll) {
+      return;
+    }
+
+    const idle = requestIdleCallback(() => {
+      setRenderAll(true);
+    });
+
+    return () => cancelIdleCallback(idle);
+  }, [renderAll]);
+
+  return !renderAll ? Children.toArray(children).slice(0, 3) : children;
+};
+
+export default StaggeredRender;

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

@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+import {
+  cacheExchange,
+  Client,
+  fetchExchange,
+  mapExchange,
+} from "../util/urql.js";
+import { createServer } from "./createServer.js";
+import { CreateClientFunction } from "./interfaces.js";
+
+export type WorkerGraphQLMessage = { id: string; body: string };
+
+const localServer = createServer();
+
+/**
+ * Creates an in memory Client that does not use Workers. This allows
+ * developers to run the simple standalone version of zudoku using the CDN
+ * hosted scripts. Worker's cannot be loaded cross domain so in this case
+ * we sacrifice performance for making it work cross domain.
+ */
+export const createClient: CreateClientFunction = () => {
+  return new Client({
+    url: "/__z/graphql",
+    // Custom fetch to send the GraphQL request to the worker and convert the response back to a `Response` object
+    fetch: async (req, init) => {
+      if (!init?.body) throw new Error("No body");
+      const response = await localServer.fetch(
+        new Request("http://localhost/__z/graphql", {
+          method: "POST",
+          body: init.body,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }),
+      );
+      return response;
+      // port.postMessage({
+      //   id: e.data.id,
+      //   body: await response.text(),
+      // } satisfies WorkerGraphQLMessage);
+    },
+    exchanges: [
+      cacheExchange,
+      mapExchange({
+        onError(error, operation) {
+          console.error(error);
+          console.groupCollapsed("Operation info");
+          console.log("body", operation.query.loc?.source.body.trim());
+          console.log("variables", operation.variables);
+          console.groupEnd();
+        },
+      }),
+      fetchExchange,
+    ],
+  });
+};

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

@@ -0,0 +1,33 @@
+import { useLogger } from "@envelop/core";
+import { createGraphQLServer } from "../../../oas/graphql/index.js";
+
+const map = new Map<string, number>();
+
+/**
+ * Creates the GraphQL server
+ */
+export const createServer = () =>
+  createGraphQLServer({
+    plugins: [
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useLogger({
+        logFn: (eventName, { args }) => {
+          if (import.meta.env.PROD) return;
+
+          if (eventName.endsWith("-start")) {
+            map.set(`${eventName}-${args.operationName}`, performance.now());
+          } else if (eventName.endsWith("-end")) {
+            const startEvent = eventName.replace("-end", "-start");
+            const start = map.get(`${startEvent}-${args.operationName}`);
+            if (start) {
+              // eslint-disable-next-line no-console
+              console.log(
+                `${args.operationName} query took ${performance.now() - start}ms`,
+              );
+              map.delete(`${startEvent}-${args.operationName}`);
+            }
+          }
+        },
+      }),
+    ],
+  });