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

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

@@ -0,0 +1,217 @@
+import { matchPath, useRouteError, type RouteObject } from "react-router-dom";
+import { type DevPortalPlugin } from "../../core/plugins.js";
+import { graphql } from "./graphql/index.js";
+import {
+  Client as UrqlClient,
+  cacheExchange,
+  fetchExchange,
+} from "./util/urql.js";
+
+import { useQuery } from "@tanstack/react-query";
+import { CirclePlayIcon, LogInIcon } from "lucide-react";
+import { createClient } from "zudoku/openapi-worker";
+import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
+import { useAuth } from "../../authentication/hook.js";
+import { ErrorPage } from "../../components/ErrorPage.js";
+import { ColorMap } from "../../components/navigation/SidebarBadge.js";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { Button } from "../../ui/Button.js";
+import { joinPath } from "../../util/joinPath.js";
+import { OasPluginConfig } from "./interfaces.js";
+import type { PlaygroundContentProps } from "./playground/Playground.js";
+import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
+import { GetServerQuery } from "./Sidecar.js";
+
+const GetCategoriesQuery = graphql(`
+  query GetCategories($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      tags {
+        __typename
+        name
+        operations {
+          __typename
+          slug
+          deprecated
+          method
+          summary
+          operationId
+          path
+        }
+      }
+    }
+  }
+`);
+
+const OpenApiErrorPage = () => {
+  const error = useRouteError();
+  const message =
+    error instanceof Error ? (
+      <SyntaxHighlight code={error.message} />
+    ) : (
+      "An unknown error occurred"
+    );
+
+  return (
+    <ErrorPage category="Error" title="An error occurred" message={message} />
+  );
+};
+
+type InternalOasPluginConfig = { inMemory?: boolean };
+
+const MethodColorMap: Record<string, keyof typeof ColorMap> = {
+  get: "green",
+  post: "blue",
+  put: "yellow",
+  delete: "red",
+  patch: "purple",
+  options: "gray",
+  head: "gray",
+};
+
+export const openApiPlugin = (
+  config: OasPluginConfig & InternalOasPluginConfig,
+): DevPortalPlugin => {
+  const basePath = joinPath(config.navigationId ?? "/reference");
+
+  const client = config.server
+    ? new UrqlClient({
+        url: config.server,
+        exchanges: [cacheExchange, fetchExchange],
+      })
+    : createClient({ useMemoryClient: config.inMemory ?? false });
+
+  return {
+    getHead: () => {
+      if (config.type === "url" && !config.skipPreload) {
+        return (
+          <link
+            rel="preload"
+            href={config.input}
+            as="fetch"
+            crossOrigin="anonymous"
+          />
+        );
+      }
+
+      if (config.server) {
+        return <link rel="preconnect" href={config.server} />;
+      }
+    },
+    getMdxComponents: () => ({
+      OpenPlaygroundButton: ({
+        requireAuth,
+        server,
+        method,
+        url,
+        ...props
+      }: Partial<PlaygroundContentProps> & { requireAuth: boolean }) => {
+        const auth = useAuth();
+        const serverQuery = useQuery({
+          queryFn: async () => {
+            const result = await client.query(GetServerQuery, {
+              type: config.type,
+              input: config.input,
+            });
+
+            return result.data;
+          },
+          enabled: !server,
+          queryKey: ["playground-server"],
+        });
+
+        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"}
+            server={
+              server ?? serverQuery.data?.schema.url ?? "https://example.com"
+            }
+            {...props}
+          >
+            <Button className="gap-2 items-center" variant="outline">
+              Open in Playground <CirclePlayIcon size={16} />
+            </Button>
+          </PlaygroundDialog>
+        );
+      },
+    }),
+    getSidebar: 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<SidebarItem>((tag) => ({
+          type: "category",
+          label: tag.name ?? "",
+          collapsible: false,
+          collapsed: false,
+          items: tag.operations.map((operation) => ({
+            type: "link",
+            label: operation.summary ?? operation.path,
+            href: `#${operation.slug}`,
+            badge: {
+              label: operation.method,
+              color: MethodColorMap[operation.method.toLowerCase()],
+            },
+          })),
+        }));
+
+      categories.unshift({
+        type: "link",
+        label: "Overview",
+        href: "#description",
+      });
+
+      return categories;
+    },
+    getRoutes: () =>
+      [
+        {
+          async lazy() {
+            const { OpenApiRoute } = await import("./Route.js");
+            return {
+              element: <OpenApiRoute client={client} config={config} />,
+            };
+          },
+          errorElement: <OpenApiErrorPage />,
+          children: [
+            {
+              path: basePath,
+              children: [
+                {
+                  index: true,
+                  async lazy() {
+                    const { OperationList } = await import(
+                      "./OperationList.js"
+                    );
+                    return { element: <OperationList /> };
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ] satisfies RouteObject[],
+  };
+};

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

@@ -0,0 +1,10 @@
+type OasSource =
+  | { type: "url"; input: string }
+  | { type: "yaml"; input: string }
+  | { type: "json"; input: object };
+
+export type OasPluginConfig = {
+  server?: string;
+  navigationId?: string;
+  skipPreload?: boolean;
+} & OasSource;

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

@@ -0,0 +1,4 @@
+export const Editor = () => {
+  // const XoXo = lazy(() => import("@monaco-editor/react"));
+  // return <XoXo />;
+};

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

@@ -0,0 +1,87 @@
+import { TriangleAlertIcon, XIcon } from "lucide-react";
+import {
+  Control,
+  useFieldArray,
+  UseFormRegister,
+  useWatch,
+} from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { cn } from "../../../util/cn.js";
+import { InlineInput } from "./InlineInput.js";
+import { NO_IDENTITY, type PlaygroundForm } from "./Playground.js";
+
+export const Headers = ({
+  control,
+  register,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "headers",
+  });
+  const selectedIdentity = useWatch({ name: "identity", control });
+  const liveHeaders = useWatch({ name: "headers", control });
+
+  const disableAuth = selectedIdentity !== NO_IDENTITY;
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto]">
+      {fields.map((header, i) => {
+        const isDisabledByAuth =
+          disableAuth && liveHeaders.at(i)?.name === "Authorization";
+
+        return (
+          <div
+            key={header.id}
+            className={cn(
+              "grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group",
+              isDisabledByAuth && "line-through",
+            )}
+            title={
+              isDisabledByAuth
+                ? "This header is disabled because authentication was selected"
+                : undefined
+            }
+          >
+            <div className="flex gap-2 items-center">
+              <InlineInput
+                {...register(`headers.${i}.name`)}
+                placeholder="Name"
+                className="peer"
+                autoComplete="off"
+              />
+              {isDisabledByAuth && (
+                <TriangleAlertIcon size={16} className="text-amber-500" />
+              )}
+            </div>
+            <InlineInput
+              placeholder={"Value"}
+              className="peer"
+              {...register(`headers.${i}.value`)}
+              autoComplete="off"
+            />
+            <button
+              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+              onClick={() => {
+                remove(i);
+              }}
+              type="button"
+            >
+              <XIcon size={16} />
+            </button>
+            <div className="col-span-full border-b"></div>
+          </div>
+        );
+      })}
+      <Button
+        className="col-span-full mt-4"
+        onClick={() => append({ name: "", value: "" })}
+        type="button"
+      >
+        Add header
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,6 @@
+import createVariantComponent from "../../../util/createVariantComponent.js";
+
+export const InlineInput = createVariantComponent(
+  "input",
+  "px-2 bg-transparent h-6 font-mono text-xs m-2",
+);

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

@@ -0,0 +1,89 @@
+import { EraserIcon } from "lucide-react";
+import { Control, Controller, useFieldArray } from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { Input } from "../../../ui/Input.js";
+import { cn } from "../../../util/cn.js";
+import { ColorizedParam } from "../ColorizedParam.js";
+import type { PlaygroundForm } from "./Playground.js";
+
+export const PathParams = ({
+  control,
+}: {
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "pathParams",
+  });
+
+  return (
+    <table className="w-full table-auto [&_td]:border [&_td]:py-1 [&_td]:px-2">
+      <tbody>
+        {fields.map((part, i) => (
+          <tr key={part.id} className="hover:bg-accent/40">
+            <td>
+              <Controller
+                control={control}
+                name={`pathParams.${i}.value`}
+                render={({ field }) => (
+                  <div>
+                    <ColorizedParam
+                      slug={part.name}
+                      name={part.name}
+                      backgroundOpacity="25%"
+                      borderOpacity={field.value ? "100%" : "0"}
+                      className={cn(
+                        "font-mono text-xs m-2",
+                        !field.value && "opacity-60",
+                      )}
+                    />
+                    *
+                  </div>
+                )}
+              />
+            </td>
+            <td>
+              <div className="flex justify-between items-center">
+                <Controller
+                  control={control}
+                  name={`pathParams.${i}.value`}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      placeholder="Enter value"
+                      className={cn(
+                        "border-0 shadow-none ring-0 font-mono text-xs",
+                      )}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`pathParams.${i}.value`}
+                  render={({ field }) => (
+                    <Button
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                      aria-label="Clear value"
+                      className={cn(
+                        "ms-2",
+                        field.value.length === 0
+                          ? "opacity-0 pointer-events-none"
+                          : "opacity-100",
+                      )}
+                      title="Clear value"
+                      onClick={() => field.onChange("")}
+                    >
+                      <EraserIcon size={16} />
+                    </Button>
+                  )}
+                />
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};