zudoku 0.0.0-f3786a4 → 0.0.0-f3f6db5

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

@@ -1,15 +1,15 @@
-import { matchPath } from "react-router";
-import { type ZudokuPlugin } from "../../core/plugins.js";
-import { graphql } from "./graphql/index.js";
-
+import slugify from "@sindresorhus/slugify";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
+import { matchPath, redirect, RouteObject } from "react-router";
 import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
 import { useAuth } from "../../authentication/hook.js";
 import { ColorMap } from "../../components/navigation/SidebarBadge.js";
+import { type ZudokuPlugin } from "../../core/plugins.js";
 import type { SchemaImports } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
+import { graphql } from "./graphql/index.js";
 import { OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
@@ -19,17 +19,27 @@ const GetCategoriesQuery = graphql(`
     schema(input: $input, type: $type) {
       url
       tags {
-        __typename
         name
-        operations {
-          __typename
-          slug
-          deprecated
-          method
-          summary
-          operationId
-          path
-        }
+      }
+    }
+  }
+`);
+
+const GetOperationsQuery = graphql(`
+  query GetOperations(
+    $input: JSON!
+    $type: SchemaType!
+    $tag: String
+    $untagged: Boolean
+  ) {
+    schema(input: $input, type: $type) {
+      operations(tag: $tag, untagged: $untagged) {
+        slug
+        deprecated
+        method
+        summary
+        operationId
+        path
       }
     }
   }
@@ -49,9 +59,10 @@ const MethodColorMap: Record<string, keyof typeof ColorMap> = {
 
 export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
 
-export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
-  const basePath = joinPath(config.navigationId ?? "/reference");
+const UNTAGGED_PATH = "~endpoints";
 
+export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
+  const basePath = joinUrl(config.navigationId ?? "/reference");
   const versions = config.type === "file" ? Object.keys(config.input) : [];
 
   const client = new GraphQLClient(config);
@@ -122,41 +133,60 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
       }
 
       try {
-        const version =
-          versions.find((v) => path === joinPath(basePath, v)) ??
-          Object.keys(config.input).at(0);
+        const urlVersion = versions.find((v) =>
+          path.startsWith(joinUrl(basePath, v)),
+        );
+        const version = urlVersion ?? Object.keys(config.input).at(0);
 
         const data = await client.fetch(GetCategoriesQuery, {
           type: config.type,
           input: config.type === "file" ? config.input[version!] : config.input,
-          version,
         });
 
-        const categories = data.schema.tags
-          .filter((tag) => tag.operations.length > 0)
-          .map<SidebarItem>((tag) => ({
-            type: "category",
-            label: tag.name || "Other endpoints",
-            collapsible: true,
-            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()]!,
-                invert: true,
-              },
-            })),
-          }));
+        const tag = config.tagPages?.find(
+          (tag) => path.split("/").at(-1) === slugify(tag),
+        );
 
-        categories.unshift({
-          type: "link",
-          label: "Overview",
-          href: "#description",
+        const operationsData = await client.fetch(GetOperationsQuery, {
+          type: config.type,
+          input: config.type === "file" ? config.input[version!] : config.input,
+          tag,
+          untagged: tag === undefined,
         });
 
+        const items = operationsData.schema.operations.map((operation) => ({
+          type: "link" as const,
+          label: operation.summary ?? operation.path,
+          href: `#${operation.slug}`,
+          badge: {
+            label: operation.method,
+            color: MethodColorMap[operation.method.toLowerCase()]!,
+            invert: true,
+          } as const,
+        }));
+
+        const categories = data.schema.tags
+          // .filter((tag) => tag.operations.length > 0)
+          .map<SidebarItem>((tag) => {
+            const categoryLink = joinUrl(
+              basePath,
+              urlVersion,
+              tag.name ? slugify(tag.name) : UNTAGGED_PATH,
+            );
+            return {
+              type: "category",
+              label: tag.name || "Other endpoints",
+              link: {
+                type: "doc" as const,
+                id: categoryLink,
+                label: tag.name!,
+              },
+              collapsible: false,
+              collapsed: true,
+              items: path === categoryLink ? items : [],
+            };
+          });
+
         return categories;
       } catch {
         return [];
@@ -165,31 +195,59 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
     getRoutes: () => {
       const versionsInPath = [null, ...versions];
 
-      return versionsInPath.map((version) => ({
-        path: basePath + (version ? `/${version}` : ""),
-        async lazy() {
-          const { OpenApiRoute } = await import("./Route.js");
-          return {
-            element: (
-              <OpenApiRoute
-                basePath={basePath}
-                versions={versions}
-                client={client}
-                config={config}
-              />
-            ),
-          };
-        },
-        children: [
-          {
-            index: true,
-            async lazy() {
-              const { OperationList } = await import("./OperationList.js");
-              return { element: <OperationList /> };
-            },
-          },
-        ],
+      const tagPages = (config.tagPages ?? []).map((tag) => ({
+        tag,
+        path: slugify(tag),
       }));
+
+      return versionsInPath.map((version) => {
+        const versionPath = joinUrl(basePath, version ? `/${version}` : "");
+
+        return {
+          path: versionPath,
+          async lazy() {
+            const { OpenApiRoute } = await import("./OpenApiRoute.js");
+            return {
+              element: (
+                <OpenApiRoute
+                  version={version ?? undefined}
+                  basePath={basePath}
+                  versions={versions}
+                  client={client}
+                  config={config}
+                />
+              ),
+            };
+          },
+          children: [
+            {
+              index: true,
+              loader: () =>
+                redirect(
+                  joinUrl(versionPath, tagPages.at(0)?.path ?? UNTAGGED_PATH),
+                ),
+            },
+            {
+              path: joinUrl(versionPath, UNTAGGED_PATH),
+              async lazy() {
+                const { OperationList } = await import("./OperationList.js");
+                return { element: <OperationList untagged={true} /> };
+              },
+            },
+            ...tagPages.map<RouteObject>((tag) => {
+              return {
+                path: joinUrl(versionPath, tag.path),
+                async lazy() {
+                  const { OperationList } = await import("./OperationList.js");
+                  return {
+                    element: <OperationList tag={tag.tag} />,
+                  };
+                },
+              };
+            }),
+          ],
+        };
+      });
     },
   };
 };

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

@@ -20,6 +20,7 @@ export type OasPluginConfig = {
   server?: string;
   navigationId?: string;
   skipPreload?: boolean;
+  tagPages?: Array<string>;
 } & OasPluginConfigOptions &
   OasSource;
 

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

@@ -18,33 +18,36 @@ const ExamplesDropdown = ({
   onSelect: (example: Example) => void;
 }) => {
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Use Example</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        {examples.map((example) => {
-          return (
-            <div key={example.mediaType}>
-              <DropdownMenuLabel>{example.mediaType}</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                {example.examples?.map((example) => {
-                  return (
-                    <DropdownMenuItem
-                      key={example.name}
-                      onSelect={() => onSelect(example)}
-                    >
-                      {example.name}
-                    </DropdownMenuItem>
-                  );
-                })}
-              </DropdownMenuGroup>
-            </div>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <div className="flex flex-col gap-2 mt-2 items-end">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Use Example</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          {examples.map((example) => {
+            return (
+              <div key={example.mediaType}>
+                <DropdownMenuLabel>{example.mediaType}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  {example.examples?.map((example) => {
+                    return (
+                      <DropdownMenuItem
+                        key={example.name}
+                        onSelect={() => onSelect(example)}
+                        className="line-clamp-1"
+                      >
+                        {example.summary ?? example.name}
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuGroup>
+              </div>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
   );
 };
 

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

@@ -12,6 +12,7 @@ import { Checkbox } from "zudoku/ui/Checkbox.js";
 import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
+import ParamsGrid from "./ParamsGrid.js";
 import { type PlaygroundForm } from "./Playground.js";
 
 const headerOptions = Object.freeze([
@@ -77,56 +78,55 @@ export const Headers = ({
 
   return (
     <div className="flex flex-col gap-2">
-      <Card className="flex flex-col gap-2 overflow-hidden">
-        <table className="w-full">
-          <tbody>
-            {fields.map((header, i) => (
-              <tr
-                key={header.id}
-                className="group has-[:focus]:bg-muted/50 hover:bg-muted/50"
-              >
-                <td className="flex gap-2 items-center pl-3">
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.active`}
-                    render={({ field }) => (
-                      <Checkbox
-                        variant="outline"
-                        id={`headers.${i}.active`}
-                        checked={field.value}
-                        onCheckedChange={(checked) => {
-                          field.onChange(checked);
-                        }}
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.name`}
-                    render={({ field }) => (
-                      <Autocomplete
-                        {...field}
-                        placeholder="Name"
-                        className="border-0 shadow-none bg-transparent text-xs font-mono"
-                        options={headerOptions}
-                        onEnterPress={() => handleHeaderEnter(i)}
-                        onChange={(e) => {
-                          field.onChange(e);
-                          setValue(`headers.${i}.active`, true);
-                        }}
-                        ref={(el) => {
-                          nameRefs.current[i] = el;
-                        }}
-                      />
-                    )}
-                  />
-                </td>
-                <td>
-                  <div className="flex items-center gap-2">
+      <Card className="overflow-hidden">
+        <ParamsGrid>
+          {fields.map((header, i) => (
+            <div key={i} className="group grid col-span-full grid-cols-subgrid">
+              <div className="flex items-center gap-2 ">
+                <Controller
+                  control={control}
+                  name={`headers.${i}.active`}
+                  render={({ field }) => (
+                    <Checkbox
+                      variant="outline"
+                      id={`headers.${i}.active`}
+                      checked={field.value}
+                      onCheckedChange={(checked) => {
+                        field.onChange(checked);
+                      }}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`headers.${i}.name`}
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...field}
+                      placeholder="Name"
+                      className="border-0 shadow-none bg-transparent text-xs font-mono"
+                      options={headerOptions}
+                      onEnterPress={() => handleHeaderEnter(i)}
+                      onChange={(e) => {
+                        field.onChange(e);
+                        setValue(`headers.${i}.active`, true);
+                      }}
+                      ref={(el) => {
+                        nameRefs.current[i] = el;
+                      }}
+                    />
+                  )}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Controller
+                  control={control}
+                  name={`headers.${i}.value`}
+                  render={({ field }) => (
                     <Input
                       placeholder="Value"
-                      className="w-full border-0 shadow-none text-xs font-mono"
-                      {...register(`headers.${i}.value`)}
+                      className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                      {...field}
                       ref={(el) => {
                         valueRefs.current[i] = el;
                       }}
@@ -137,23 +137,23 @@ export const Headers = ({
                       }}
                       autoComplete="off"
                     />
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="text-muted-foreground opacity-0 group-hover:opacity-100"
-                      onClick={() => {
-                        remove(i);
-                      }}
-                      type="button"
-                    >
-                      <XIcon size={16} />
-                    </Button>
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+                  )}
+                />
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
+                  onClick={() => {
+                    remove(i);
+                  }}
+                  type="button"
+                >
+                  <XIcon size={16} />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </ParamsGrid>
       </Card>
       <div className="text-end">
         <Button

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

@@ -0,0 +1,8 @@
+import createVariantComponent from "../../../util/createVariantComponent.js";
+
+const ParamsGrid = createVariantComponent(
+  "div",
+  "hover:bg-accent/40 grid grid-cols-[2fr_3fr] gap-2 items-center px-3",
+);
+
+export default ParamsGrid;

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

@@ -1,31 +1,10 @@
-import { EraserIcon } from "lucide-react";
 import { Control, Controller, useFieldArray } from "react-hook-form";
 import { Card } from "zudoku/ui/Card.js";
-import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
-import { cn } from "../../../util/cn.js";
-import { ColorizedParam, useParamColor } from "../ColorizedParam.js";
+import { ColorizedParam } from "../ColorizedParam.js";
+import ParamsGrid from "./ParamsGrid.js";
 import type { PlaygroundForm } from "./Playground.js";
 
-const PathParamLabel = ({ name }: { name: string }) => {
-  const color = useParamColor(name);
-
-  return (
-    <div className="flex items-center">
-      <div
-        className="w-2 h-2 rounded-full"
-        style={{ backgroundColor: `hsl(${color})` }}
-      />
-
-      <ColorizedParam
-        slug={name}
-        name={name}
-        className="font-mono text-xs m-2 px-1"
-      />
-    </div>
-  );
-};
-
 export const PathParams = ({
   control,
 }: {
@@ -38,59 +17,40 @@ export const PathParams = ({
 
   return (
     <Card className="rounded-lg">
-      <table className="w-full">
-        <tbody>
-          {fields.map((part, i) => (
-            <tr key={part.id} className="hover:bg-accent/40">
-              <td className="w-5/12">
-                <Controller
-                  control={control}
-                  name={`pathParams.${i}.value`}
-                  render={() => <PathParamLabel name={part.name} />}
-                />
-              </td>
-              <td className="w-7/12">
-                <div className="flex justify-between items-center">
-                  <Controller
-                    control={control}
-                    name={`pathParams.${i}.value`}
-                    render={({ field }) => (
-                      <Input
-                        {...field}
-                        required
-                        placeholder="Enter value"
-                        className="w-full border-0 shadow-none text-xs font-mono hover:bg-accent"
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name={`pathParams.${i}.value`}
-                    render={({ field }) => (
-                      <Button
-                        size="icon"
-                        type="button"
-                        variant="ghost"
-                        aria-label="Clear value"
-                        className={cn(
-                          "ms-2 mr-1",
-                          field.value.length === 0
-                            ? "opacity-0 pointer-events-none"
-                            : "opacity-100",
-                        )}
-                        title="Clear value"
-                        onClick={() => field.onChange("")}
-                      >
-                        <EraserIcon size={16} />
-                      </Button>
-                    )}
+      <ParamsGrid>
+        {fields.map((part, i) => (
+          <>
+            <Controller
+              control={control}
+              name={`pathParams.${i}.name`}
+              render={() => (
+                <div>
+                  <ColorizedParam
+                    slug={part.name}
+                    name={part.name}
+                    className="font-mono text-xs px-2"
                   />
                 </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+              )}
+            />
+
+            <div className="flex justify-between items-center">
+              <Controller
+                control={control}
+                name={`pathParams.${i}.value`}
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    required
+                    placeholder="Enter value"
+                    className="w-full border-0 shadow-none text-xs font-mono hover:bg-accent"
+                  />
+                )}
+              />
+            </div>
+          </>
+        ))}
+      </ParamsGrid>
     </Card>
   );
 };