zudoku 0.1.1-dev.18 → 0.1.1-dev.19

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

@@ -0,0 +1,2 @@
+export * from "./fragment-masking.js";
+export * from "./gql.js";

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

@@ -0,0 +1,142 @@
+import { createContext, useContext } from "react";
+import {
+  type DevPortalPlugin,
+  type PluginNavigationCategory,
+} from "../../core/plugins.js";
+import { Outlet, matchPath, type RouteObject } from "../../core/router.js";
+import { MethodBadge } from "./MethodBadge.js";
+import { OperationList } from "./OperationList.js";
+import { graphql } from "./graphql/index.js";
+import {
+  Provider,
+  Client as UrqlClient,
+  cacheExchange,
+  fetchExchange,
+} from "./util/urql.js";
+import { createSharedWorkerClient } from "./worker/createSharedWorkerClient.js";
+
+const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
+  undefined,
+);
+
+export const OasConfigProvider = OasContext.Provider;
+
+export const useOasConfig = () => {
+  const ctx = useContext(OasContext);
+  if (!ctx) {
+    throw new Error("useOasConfig must be used within a OasConfigProvider");
+  }
+  return ctx.config;
+};
+
+type OasSource =
+  | { type: "url"; input: string }
+  | { type: "yaml"; input: string }
+  | { type: "json"; input: object };
+
+export type OasPluginConfig = {
+  server?: string;
+  path?: string;
+} & OasSource;
+
+const OasContextProvider = ({
+  config,
+  client,
+}: {
+  config: OasPluginConfig;
+  client: typeof UrqlClient;
+}) => {
+  return (
+    <Provider value={client}>
+      <OasConfigProvider value={{ config }}>
+        <Outlet />
+      </OasConfigProvider>
+    </Provider>
+  );
+};
+
+const GetCategoriesQuery = graphql(`
+  query GetCategories($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      tags {
+        __typename
+        name
+        operations {
+          __typename
+          slug
+          method
+          summary
+          operationId
+          path
+        }
+      }
+    }
+  }
+`);
+
+export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
+  const basePath = config.path ?? "/reference";
+
+  const client = config.server
+    ? new UrqlClient({
+        url: config.server,
+        exchanges: [cacheExchange, fetchExchange],
+      })
+    : createSharedWorkerClient();
+
+  return {
+    getNavigation: async (path: string) => {
+      if (!matchPath({ path: basePath, end: false }, path)) {
+        return [];
+      }
+
+      const { data } = await client.query(GetCategoriesQuery, {
+        input: config.input,
+        type: config.type,
+      });
+
+      if (!data) return [];
+
+      const categories = data.schema.tags
+        .filter((tag) => tag.operations.length > 0)
+        .map<PluginNavigationCategory>((tag) => ({
+          path,
+          label: tag.name ?? "",
+          collapsible: false,
+          children: tag.operations.map((operation) => ({
+            path: `#${operation.slug}`,
+            title: operation.summary ?? operation.path,
+            label: (
+              <div className="flex flex-1 min-w-0 justify-between gap-2">
+                <span className="truncate">
+                  {operation.summary ?? operation.path}
+                </span>
+                <MethodBadge method={operation.method} />
+              </div>
+            ),
+          })),
+        }));
+
+      categories.unshift({
+        path,
+        label: "Overview",
+        collapsible: false,
+        children: [{ path: "#description", label: "Description" }],
+      });
+
+      return categories;
+    },
+    getRoutes: () =>
+      [
+        {
+          element: <OasContextProvider config={config} client={client} />,
+          children: [
+            {
+              path: basePath,
+              children: [{ index: true, element: <OperationList /> }],
+            },
+          ],
+        },
+      ] satisfies RouteObject[],
+  };
+};

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

@@ -0,0 +1,309 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/Dialog.js";
+import { Card, CardContent } from "../../../ui/Card.js";
+import { Button } from "../../../ui/Button.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { Header } from "har-format";
+import {
+  Fragment,
+  InputHTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { TrashIcon } from "lucide-react";
+import createVariantComponent from "../../../util/createVariantComponent.js";
+import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
+import {
+  ColorizedParam,
+  DATA_ATTR,
+  usePastellizedColor,
+} from "../ColorizedParam.js";
+import { cn } from "../../../util/cn.js";
+import { useMutation } from "@tanstack/react-query";
+
+const InlineInput = createVariantComponent(
+  "input",
+  "px-2 bg-transparent h-8 font-mono text-xs m-2",
+);
+
+const ParameterValue = ({
+  part,
+  className,
+  ...props
+}: {
+  part: string;
+} & InputHTMLAttributes<HTMLInputElement>) => {
+  const color = usePastellizedColor(part);
+  return (
+    <InlineInput
+      {...props}
+      className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
+      style={{ color: `hsl(${color})` }}
+    />
+  );
+};
+
+const Playground = ({
+  url,
+  host,
+  method,
+  defaultHeaders,
+}: {
+  host: string;
+  url: string;
+  method: string;
+  defaultHeaders?: Header[];
+}) => {
+  const [headers, setHeaders] = useState<Header[]>(
+    defaultHeaders ?? [{ name: "", value: "" }],
+  );
+  const [urlParts, setUrlParts] = useState<Header[]>(
+    url
+      .split("/")
+      .filter((part) => part.startsWith("{") && part.endsWith("}"))
+      .map((part) => ({ name: part, value: "" })),
+  );
+
+  useEffect(() => {
+    const lastHeader = headers.at(-1);
+    if (lastHeader?.value !== "" || lastHeader?.name !== "") {
+      setHeaders([...headers, { name: "", value: "" }]);
+    }
+  }, [headers]);
+
+  const x = useMutation({
+    mutationFn: async () => {
+      const fullUrl =
+        host +
+        url
+          .split("/")
+          .map((v) => urlParts.find((part) => part.name === v)?.value ?? v)
+          .join("/");
+      console.log(
+        fullUrl,
+        Object.fromEntries(
+          headers.map((header) => [header.name, header.value]),
+        ),
+      );
+      const response = await fetch(fullUrl, {
+        // method,
+        headers: Object.fromEntries(
+          headers
+            .filter((h) => h.name)
+            .map((header) => [header.name, header.value]),
+        ),
+      });
+
+      return {
+        status: response.status,
+        body: await response.text(),
+      };
+    },
+  });
+
+  const path = url.split("/").map((part) => (
+    <Fragment key={part}>
+      {part.startsWith("{") && part.endsWith("}") ? (
+        <ColorizedParam
+          name={part.slice(1, -1)}
+          backgroundOpacity="0"
+          onClick={() => {
+            console.log("asd");
+          }}
+          slug={part.slice(1, -1)}
+        >
+          {urlParts.find((p) => p.name === part)?.value}
+        </ColorizedParam>
+      ) : (
+        part
+      )}
+      /
+      <wbr />
+    </Fragment>
+  ));
+
+  return (
+    <Dialog>
+      <DialogTrigger>Open</DialogTrigger>
+      <DialogContent className="max-w-screen-xl">
+        <DialogHeader>
+          <DialogTitle>API Playground</DialogTitle>
+          <DialogDescription>
+            <div className="grid grid-cols-2 gap-2">
+              <Card>
+                <CardContent className="border-b border-border pt-4">
+                  <div>URL</div>
+                  <div className="flex gap-2">
+                    <div className="border rounded border-border p-1.5 w-full">
+                      {path}
+                    </div>
+                    <Button onClick={() => x.mutateAsync()}>Send</Button>
+                  </div>
+                </CardContent>
+                <Tabs defaultValue="headers">
+                  <CardContent className="border-b border-border py-4">
+                    <TabsList>
+                      <TabsTrigger value="headers">
+                        Headers ({headers.length})
+                      </TabsTrigger>
+                      <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                      <TabsTrigger value="auth">Auth</TabsTrigger>
+                    </TabsList>
+                  </CardContent>
+                  <CardContent>
+                    <TabsContent value="headers">
+                      <div className="grid grid-cols-[1fr_1fr_auto]">
+                        {headers.map((header, i) => (
+                          <div
+                            key={i}
+                            className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
+                          >
+                            {/*<input type="checkbox" />*/}
+                            <InlineInput
+                              onChange={(e) =>
+                                setHeaders((headers) => {
+                                  const newHeaders = [...headers];
+                                  newHeaders[i] = {
+                                    ...headers[i],
+                                    name: e.target.value,
+                                  };
+                                  return newHeaders;
+                                })
+                              }
+                              value={header.name}
+                              placeholder={"Name"}
+                              className="peer"
+                            />
+                            <InlineInput
+                              onChange={(e) =>
+                                setHeaders((headers) => {
+                                  const newHeaders = [...headers];
+                                  newHeaders[i] = {
+                                    name: "",
+                                    ...headers.at(i),
+                                    value: e.target.value,
+                                  };
+                                  return newHeaders;
+                                })
+                              }
+                              value={header.value}
+                              placeholder={"Value"}
+                              className="peer"
+                            />
+                            <button
+                              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+                              onClick={() => {
+                                setHeaders((headers) =>
+                                  [...headers].toSpliced(i, 1),
+                                );
+                              }}
+                            >
+                              <TrashIcon size={16} />
+                            </button>
+                            <div className="col-span-full border-b  border-border"></div>
+                          </div>
+                        ))}
+                      </div>
+                    </TabsContent>
+                    <TabsContent value="parameters">
+                      Parameters
+                      <div className="grid grid-cols-[1fr_1fr_auto]">
+                        {urlParts.map(({ name, value }, i) => (
+                          <div
+                            key={i}
+                            className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
+                          >
+                            {/*<input type="checkbox" />*/}
+                            <InlineInput
+                              onChange={(e) =>
+                                setHeaders((headers) => {
+                                  const newHeaders = [...headers];
+                                  newHeaders[i] = {
+                                    ...headers[i],
+                                    name: e.target.value,
+                                  };
+                                  return newHeaders;
+                                })
+                              }
+                              value={name.slice(1, -1)}
+                              disabled
+                              placeholder={"Name"}
+                              className="peer"
+                            />
+                            <ParameterValue
+                              part={name.slice(1, -1)}
+                              onChange={(e) =>
+                                setUrlParts((parts) => {
+                                  const newParts = [...parts];
+                                  newParts[i] = {
+                                    name: "",
+                                    ...parts.at(i),
+                                    value: e.target.value,
+                                  };
+                                  return newParts;
+                                })
+                              }
+                              {...{ [DATA_ATTR]: name.slice(1, -1) }}
+                              value={value}
+                              placeholder={"Value"}
+                              className="peer"
+                            />
+
+                            <div className="col-span-full border-b border-border"></div>
+                          </div>
+                        ))}
+                      </div>
+                    </TabsContent>
+                    <TabsContent value="auth">
+                      <CardContent>
+                        {url
+                          .split("/")
+                          .map((part, i) =>
+                            part.startsWith("{") && part.endsWith("}")
+                              ? urlParts[i]
+                              : part,
+                          )
+                          .join("/")}
+                      </CardContent>
+                      Change your password here.
+                    </TabsContent>
+                  </CardContent>
+                </Tabs>
+              </Card>
+              <Card>
+                <CardContent>
+                  {method.toUpperCase()}
+                  {url
+                    .split("/")
+                    .map((v) =>
+                      v.startsWith("{") && v.endsWith("}")
+                        ? urlParts.find((part) => part.name === v)?.value ?? v
+                        : v,
+                    )
+                    .join("/")}
+                  <SyntaxHighlight
+                    language="json"
+                    noBackground
+                    copyable={false}
+                    className="text-xs"
+                    code={x.data?.body ?? JSON.stringify("")}
+                  />
+                </CardContent>
+                {x.data?.status}
+              </Card>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { Playground };

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

@@ -0,0 +1,6 @@
+query getServerUrl($userId: ID!) {
+  schema(input: {userId: $userId}) {
+    serverUrl
+  }
+}
+

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type SchemaObject } from "../../../oas/graphql/index.js";
+
+export const isObject = (value: unknown): boolean =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+export const generateSchemaExample = (schema: SchemaObject): any => {
+  // Directly return the example or default if they exist
+  if (schema.example !== undefined) {
+    return schema.example;
+  } else if (schema.default !== undefined) {
+    return schema.default;
+  }
+
+  // Process examples object
+  if (schema.examples && isObject(schema.examples)) {
+    return Object.values(schema.examples)[0];
+  }
+
+  // Recursively process objects and arrays
+  return processComplexTypes(schema);
+};
+
+function processComplexTypes(schema: SchemaObject): any {
+  if (schema.type === "object" && schema.properties) {
+    const obj: { [key: string]: any } = {};
+    Object.keys(schema.properties!).forEach((key) => {
+      obj[key] = generateSchemaExample(schema.properties![key]);
+    });
+    return obj;
+  } else if (schema.type === "array" && schema.items) {
+    return [generateSchemaExample(schema.items)];
+  }
+  // Fallback for missing or undefined types
+  return getDefaultForType(schema.type);
+}
+
+function getDefaultForType(type?: string | string[]): any {
+  if (Array.isArray(type)) {
+    return getDefaultForSingleType(type[0]);
+  }
+  return getDefaultForSingleType(type);
+}
+
+function getDefaultForSingleType(type?: string): any {
+  switch (type) {
+    case "string":
+      return "";
+    case "number":
+    case "integer":
+      return 0;
+    case "boolean":
+      return false;
+    case "null":
+      return null;
+    default:
+      return undefined;
+  }
+}

package/src/lib/plugins/openapi/util/urql.ts

@@ -0,0 +1,8 @@
+import * as urql from "urql";
+
+export const useQuery = urql.useQuery;
+export const Provider = urql.Provider;
+export const cacheExchange = urql.cacheExchange;
+export const fetchExchange = urql.fetchExchange;
+export const mapExchange = urql.mapExchange;
+export const Client = urql.Client;

package/src/lib/plugins/openapi/worker/createSharedWorkerClient.ts

@@ -0,0 +1,60 @@
+import { monotonicFactory } from "ulid";
+import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
+import {
+  cacheExchange,
+  Client,
+  fetchExchange,
+  mapExchange,
+} from "../util/urql.js";
+
+import { createSharedWorker } from "zudoku/open-api-worker";
+
+export type WorkerGraphQLMessage = { id: string; body: string };
+
+const ulid = monotonicFactory();
+export const createSharedWorkerClient = () => {
+  const worker = createSharedWorker();
+
+  worker.port.start();
+
+  const [waitFor, notify] = createWaitForNotify<string>();
+
+  worker.port.onmessage = (e: MessageEvent<WorkerGraphQLMessage>) => {
+    notify(e.data.id, e.data.body);
+  };
+
+  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 id = ulid();
+      worker.port.postMessage({
+        id,
+        body: init.body as string,
+      } satisfies WorkerGraphQLMessage);
+
+      const body = await waitFor(id);
+
+      return new Response(body, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    },
+    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/worker/shared-worker.ts

@@ -0,0 +1,5 @@
+export function createSharedWorker() {
+  return new SharedWorker(new URL("./worker.ts", import.meta.url), {
+    type: "module",
+  });
+}

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

@@ -0,0 +1,30 @@
+import { createGraphQLServer } from "../../../oas/graphql/index.js";
+import { type WorkerGraphQLMessage } from "./createSharedWorkerClient.js";
+
+const localServer = createGraphQLServer();
+
+const worker = self as unknown as SharedWorkerGlobalScope;
+
+worker.addEventListener(
+  "connect",
+  function (event: MessageEvent<{ id: string; body: string }>) {
+    const port = event.ports[0];
+
+    port.onmessage = async function (e) {
+      const response = await localServer.fetch(
+        new Request("/__z/graphql", {
+          method: "POST",
+          body: e.data.body,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }),
+      );
+
+      port.postMessage({
+        id: e.data.id,
+        body: await response.text(),
+      } satisfies WorkerGraphQLMessage);
+    };
+  },
+);

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

@@ -0,0 +1,20 @@
+import { Navigate } from "react-router-dom";
+import type { DevPortalPlugin } from "../../core/plugins.js";
+
+type Redirect = {
+  from: string;
+  to: string;
+  replace?: boolean;
+};
+
+export const redirectPlugin = (options: {
+  redirects: Redirect[];
+}): DevPortalPlugin => {
+  return {
+    getRoutes: () =>
+      options.redirects.map(({ from, to, replace }) => ({
+        path: from,
+        element: <Navigate to={to} replace={replace} />,
+      })),
+  };
+};

package/src/lib/plugins.ts

@@ -0,0 +1,5 @@
+// Plugins
+export { apiKeyPlugin } from "./plugins/api-key/index.js";
+export { markdownPlugin } from "./plugins/markdown/index.js";
+export { openApiPlugin } from "./plugins/openapi/index.js";
+export { redirectPlugin } from "./plugins/redirect/index.js";