zudoku 0.1.1-dev.15 → 0.1.1-dev.17

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

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

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

@@ -1,142 +0,0 @@
-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/app/plugins/openapi/playground/Playground.tsx

@@ -1,309 +0,0 @@
-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/app/plugins/openapi/queries.graphql

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

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

@@ -1,59 +0,0 @@
-/* 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/app/plugins/openapi/util/urql.ts

@@ -1,8 +0,0 @@
-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/app/plugins/openapi/worker/createSharedWorkerClient.ts

@@ -1,60 +0,0 @@
-import { monotonicFactory } from "ulid";
-import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
-import {
-  cacheExchange,
-  Client,
-  fetchExchange,
-  mapExchange,
-} from "../util/urql.js";
-
-export type WorkerGraphQLMessage = { id: string; body: string };
-
-const ulid = monotonicFactory();
-export const createSharedWorkerClient = () => {
-  const worker = new SharedWorker(new URL("./worker.ts", import.meta.url), {
-    type: "module",
-  });
-
-  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/app/plugins/openapi/worker/worker.ts

@@ -1,30 +0,0 @@
-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/app/plugins/redirect/index.tsx

@@ -1,20 +0,0 @@
-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} />,
-      })),
-  };
-};