zudoku 0.3.0-dev.11 → 0.3.0-dev.110

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

@@ -1,60 +1,26 @@
-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 { matchPath, useRouteError, type RouteObject } from "react-router-dom";
+import { type DevPortalPlugin } from "../../core/plugins.js";
 import { graphql } from "./graphql/index.js";
 import {
-  Provider,
   Client as UrqlClient,
   cacheExchange,
   fetchExchange,
 } from "./util/urql.js";
 
-import { createSharedWorkerClient } from "virtual:zudoku-openapi-worker";
-
-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>
-  );
-};
+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!) {
@@ -76,19 +42,47 @@ const GetCategoriesQuery = graphql(`
   }
 `);
 
-export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
-  const basePath = config.path ?? "/reference";
+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],
       })
-    : createSharedWorkerClient();
+    : createClient({ useMemoryClient: config.inMemory ?? false });
 
   return {
     getHead: () => {
-      if (config.type === "url") {
+      if (config.type === "url" && !config.skipPreload) {
         return (
           <link
             rel="preload"
@@ -103,7 +97,57 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
         return <link rel="preconnect" href={config.server} />;
       }
     },
-    getNavigation: async (path: string) => {
+    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 [];
       }
@@ -117,30 +161,26 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
 
       const categories = data.schema.tags
         .filter((tag) => tag.operations.length > 0)
-        .map<PluginNavigationCategory>((tag) => ({
-          path,
+        .map<SidebarItem>((tag) => ({
+          type: "category",
           label: tag.name ?? "",
           collapsible: false,
-          children: tag.operations.map((operation) => ({
-            path: `#${operation.slug}`,
-            muted: !!operation.deprecated,
-            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>
-            ),
+          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({
-        path,
+        type: "link",
         label: "Overview",
-        collapsible: false,
-        children: [{ path: "#description", label: "Description" }],
+        href: "#description",
       });
 
       return categories;
@@ -148,11 +188,27 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
     getRoutes: () =>
       [
         {
-          element: <OasContextProvider config={config} client={client} />,
+          async lazy() {
+            const { OpenApiRoute } = await import("./Route.js");
+            return {
+              element: <OpenApiRoute client={client} config={config} />,
+            };
+          },
+          errorElement: <OpenApiErrorPage />,
           children: [
             {
               path: basePath,
-              children: [{ index: true, element: <OperationList /> }],
+              children: [
+                {
+                  index: true,
+                  async lazy() {
+                    const { OperationList } = await import(
+                      "./OperationList.js"
+                    );
+                    return { element: <OperationList /> };
+                  },
+                },
+              ],
             },
           ],
         },

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/Headers.tsx

@@ -71,7 +71,7 @@ export const Headers = ({
             >
               <XIcon size={16} />
             </button>
-            <div className="col-span-full border-b border-border"></div>
+            <div className="col-span-full border-b"></div>
           </div>
         );
       })}

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

@@ -1,36 +1,14 @@
-import { forwardRef, InputHTMLAttributes } from "react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+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 { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
-import { InlineInput } from "./InlineInput.js";
-import { PlaygroundForm } from "./Playground.js";
-
-type ParameterValueProps = {
-  part: string;
-} & InputHTMLAttributes<HTMLInputElement>;
-
-const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
-  function ParameterValue({ part, className, ...props }, ref) {
-    const color = usePastellizedColor(part);
-    return (
-      <InlineInput
-        {...props}
-        ref={ref}
-        className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
-        style={{
-          // color: `hsl(${color})`,
-          outlineColor: `hsl(${color})`,
-        }}
-      />
-    );
-  },
-);
+import { ColorizedParam } from "../ColorizedParam.js";
+import type { PlaygroundForm } from "./Playground.js";
 
 export const PathParams = ({
   control,
-  register,
 }: {
-  register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
 }) => {
   const { fields } = useFieldArray<PlaygroundForm>({
@@ -38,26 +16,74 @@ export const PathParams = ({
     name: "pathParams",
   });
 
-  return fields.map((part, i) => (
-    <div
-      key={part.id}
-      className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
-    >
-      <InlineInput
-        {...register(`pathParams.${i}.name`)}
-        disabled
-        placeholder="Name"
-        className="peer"
-      />
-      <ParameterValue
-        {...register(`pathParams.${i}.value`)}
-        part={part.name}
-        {...{ [DATA_ATTR]: part.name }}
-        placeholder="Value"
-        className="peer"
-      />
-
-      <div className="col-span-full border-b border-border"></div>
-    </div>
-  ));
+  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>
+  );
 };