zudoku 0.1.1-dev.44 → 0.1.1-dev.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.44",
+  "version": "0.1.1-dev.46",
   "type": "module",
   "files": [
     "dist",
@@ -53,6 +53,7 @@
     "@mdx-js/rollup": "3.0.1",
     "@monaco-editor/react": "^4.6.0",
     "@pothos/core": "3.41.0",
+    "@radix-ui/react-select": "2.1.1",
     "@sentry/node": "8.11.0",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
     "@tailwindcss/typography": "0.5.13",
@@ -122,8 +123,8 @@
     "prism-react-renderer": "2.3.1",
     "prismjs": "1.29.0",
     "react-helmet-async": "2.0.5",
-    "react-router-dom": "6.24.1",
     "react-markdown": "9.0.1",
+    "react-router-dom": "6.24.1",
     "tailwind-merge": "2.3.0",
     "typescript": "5.5.3",
     "zustand": "4.5.4"

package/src/app/main.css

@@ -23,6 +23,7 @@
 
   html {
     scroll-padding-block: var(--scroll-padding);
+    scrollbar-gutter: stable;
   }
 
   body {

package/src/lib/components/Select.tsx

@@ -0,0 +1,157 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "../util/cn.js";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/src/lib/plugins/api-key/{CreateApiKeys.tsx → CreateApiKey.tsx}

@@ -3,11 +3,18 @@ import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
 import { useMutation } from "@tanstack/react-query";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../components/Input.js";
-import { cn } from "../../util/cn.js";
 import { Link, useNavigate } from "react-router-dom";
 import { useForm } from "react-hook-form";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/Select.js";
 
-type CreateApiKeys = { description: string; expiresAt?: string };
+type CreateApiKey = { description: string; expiresOn?: string };
 
 export const CreateApiKey = ({
   options,
@@ -18,14 +25,24 @@ export const CreateApiKey = ({
 }) => {
   const context = useDevPortal();
   const navigate = useNavigate();
-  const form = useForm<CreateApiKeys>();
+  const form = useForm<CreateApiKey>({
+    defaultValues: {
+      expiresOn: "30",
+    },
+  });
   const createKeyMutation = useMutation({
-    mutationFn: ({ description, expiresAt }: CreateApiKeys) => {
+    mutationFn: ({ description, expiresOn }: CreateApiKey) => {
       if (!service.createKey) {
         throw new Error("deleteKey not implemented");
       }
 
-      return service.createKey({ description }, context);
+      const expiresOnDate =
+        expiresOn !== "never" ? addDaysToDate(Number(expiresOn)) : undefined;
+
+      return service.createKey(
+        { description: description, expiresOn: expiresOnDate },
+        context,
+      );
     },
     onSuccess: () => navigate("/settings/api-keys/"),
   });
@@ -36,35 +53,34 @@ export const CreateApiKey = ({
 
   return (
     <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
-      <div className="flex justify-between mb-4 border-b pb-1">
-        <h1 className="font-medium text-2xl">New API Keys</h1>
+      <div className="flex justify-between mb-4 border-b border-border pb-1">
+        <h1 className="font-medium text-2xl">New API Key</h1>
       </div>
       <form
-        onSubmit={form.handleSubmit((data) => {
-          if (data.expiresAt === "never") {
-            delete data.expiresAt;
-          }
-          createKeyMutation.mutate(data);
-        })}
+        onSubmit={form.handleSubmit((data) => createKeyMutation.mutate(data))}
       >
         <div className="flex gap-2 flex-col">
           Note
           <Input {...form.register("description")} />
           Expiration
-          <select
-            className={cn(
-              "row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
-              "rounded-md appearance-none bg-zinc-50 hover:bg-white dark:bg-zinc-800 hover:dark:bg-zinc-800/75",
-            )}
-            {...form.register("expiresAt")}
+          <Select
+            onValueChange={(value) => form.setValue("expiresOn", value)}
+            defaultValue={form.getValues("expiresOn")}
           >
-            <option value="never">Never</option>
-            {[7, 30, 60, 90].map((option) => (
-              <option value={addDaysToDate(option)} key={option}>
-                {option} Days
-              </option>
-            ))}
-          </select>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                {[7, 30, 60, 90].map((option) => (
+                  <SelectItem value={String(option)} key={option}>
+                    {option} days
+                  </SelectItem>
+                ))}
+                <SelectItem value="never">Never</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
           <div className="flex gap-2">
             <Button>Generate Key</Button>
             <Button variant="outline" asChild>
@@ -80,5 +96,5 @@ export const CreateApiKey = ({
 const addDaysToDate = (days: number): string => {
   const date = new Date();
   date.setDate(date.getDate() + days);
-  return date.toISOString().split("T")[0];
+  return date.toISOString();
 };

package/src/lib/plugins/api-key/SettingsApiKeys.tsx

@@ -40,7 +40,7 @@ export const SettingsApiKeys = ({
 
   return (
     <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
-      <div className="flex justify-between mb-4 border-b border-border pb-1">
+      <div className="flex justify-between mb-4 border-b border-border pb-3">
         <h1 className="font-medium text-2xl">API Keys</h1>
         {service.createKey && (
           <Button asChild>
@@ -58,14 +58,15 @@ export const SettingsApiKeys = ({
             >
               <div className="flex flex-col gap-1 text-sm">
                 {key.description ?? key.id}
-                {key.expiresOn ? (
-                  <div>Expires on {key.expiresOn}</div>
-                ) : (
-                  key.createdOn && (
-                    <div className="text-gray-500 whitespace-pre">
-                      Created on {new Date(key.createdOn).toLocaleDateString()}
-                    </div>
-                  )
+                {key.createdOn && (
+                  <div className="text-muted-foreground">
+                    Created on {new Date(key.createdOn).toLocaleString()}
+                  </div>
+                )}
+                {key.expiresOn && (
+                  <div className="text-muted-foreground">
+                    Expires on {new Date(key.expiresOn).toLocaleString()}
+                  </div>
                 )}
               </div>
               <div className="items-center flex justify-center">

package/src/lib/plugins/api-key/index.tsx

@@ -4,7 +4,7 @@ import {
   type DevPortalPlugin,
 } from "../../core/plugins.js";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
-import { CreateApiKey } from "./CreateApiKeys.js";
+import { CreateApiKey } from "./CreateApiKey.js";
 
 export type ApiKeyResults = Promise<ApiKey[]>;
 const DEFAULT_API_KEY_ENDPOINT =
@@ -20,7 +20,7 @@ export type ApiKeyService = {
   ) => Promise<void>;
   getUsage?: (apiKeys: string[], context: DevPortalContext) => Promise<void>;
   createKey?: (
-    apiKey: { description: string; expiresAt?: string },
+    apiKey: { description: string; expiresOn?: string },
     context: DevPortalContext,
   ) => Promise<void>;
 };

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

@@ -5,10 +5,8 @@ import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
-import { SchemaObject } from "../../oas/parser/index.js";
-import { useState } from "react";
-import { cn } from "../../util/cn.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
+import { SchemaListView } from "./SchemaListView.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
 export type ParameterGroup = (typeof PARAM_GROUPS)[number];
@@ -61,8 +59,9 @@ export const OperationListItem = ({
               <TabsTrigger
                 value={response.statusCode + response.description}
                 key={response.statusCode}
+                title={response.description}
               >
-                {response.description} ({response.statusCode})
+                {response.statusCode}
               </TabsTrigger>
             ))}
           </TabsList>
@@ -72,7 +71,10 @@ export const OperationListItem = ({
                 value={response.statusCode + response.description}
                 key={response.statusCode}
               >
-                <ViewSchema schema={response.content?.at(0)?.schema} name="" />
+                <SchemaListView
+                  schema={response.content?.at(0)?.schema}
+                  name=""
+                />
               </TabsContent>
             ))}
           </ul>
@@ -83,119 +85,3 @@ export const OperationListItem = ({
     </div>
   );
 };
-
-const ViewSchema = ({
-  name,
-  schema,
-  level = 0,
-  collapsible = false,
-}: {
-  level?: number;
-  collapsible?: boolean;
-  name?: string;
-  schema: SchemaObject;
-}) => {
-  const [open, setOpen] = useState(!collapsible);
-
-  const properties = Object.entries(schema.properties ?? {});
-  const additionalProperties =
-    typeof schema.additionalProperties === "object"
-      ? Object.entries(schema.additionalProperties)
-      : [];
-
-  return (
-    <div
-      className={cn(
-        "not-prose",
-        level > 0 && "border border-border rounded text-sm",
-      )}
-      onClick={
-        collapsible
-          ? () => {
-              setOpen((open) => !open);
-            }
-          : undefined
-      }
-    >
-      {(schema.title ?? name) && (
-        <div className="ml-2 my-1 font-bold">{schema.title ?? name}</div>
-      )}
-      {level === 0 && <p>schema.description</p>}
-      <ul>
-        {open &&
-          properties
-            .concat(additionalProperties)
-            .map(([propertyName, property]) => (
-              <div
-                key={propertyName}
-                className={cn(
-                  level > 0 ? "py-2" : "py-4",
-                  "px-2 border-t border-border bg-border/20 hover:bg-border/30 flex gap-1 flex-col",
-                  property.deprecated && "opacity-50",
-                )}
-              >
-                <div className="flex items-center gap-2 relative">
-                  <code>
-                    {propertyName} {property.title}
-                  </code>
-
-                  {property.type && (
-                    <span className="text-sm text-muted-foreground">
-                      {property.type}
-                    </span>
-                  )}
-                  {property.deprecated && (
-                    <span className="text-sm text-muted-foreground">
-                      Deprecated
-                    </span>
-                  )}
-
-                  {!schema.required?.includes(propertyName) &&
-                    !property.required && (
-                      <span className="py-px px-1.5 font-medium text-xs border border-border rounded-lg">
-                        optional
-                      </span>
-                    )}
-                  {/*{property.type === "object" && (*/}
-                  {/*  <div className="absolute right-3">+</div>*/}
-                  {/*)}*/}
-                </div>
-                {property.description && (
-                  <Markdown
-                    content={property.description}
-                    className="prose text-sm prose-p:my-1 leading-normal line-clamp-4"
-                  />
-                )}
-
-                {property.enum && (
-                  <span className="text-sm text-muted-foreground flex gap-1 flex-wrap items-center">
-                    <span>Possible values</span>
-                    {property.enum
-                      .filter((value) => value)
-                      .map((value) => (
-                        <span
-                          key={value}
-                          className="font-mono text-xs border-border border bg-muted rounded px-1"
-                        >
-                          {value}
-                        </span>
-                      ))}
-                  </span>
-                )}
-                {property.type === "object" && (
-                  <div className="mt-2.5">
-                    <ViewSchema schema={property} level={level + 1} />
-                  </div>
-                )}
-                {property.type === "array" &&
-                  property.items.type === "object" && (
-                    <div className="mt-2.5">
-                      <ViewSchema schema={property.items} level={level + 1} />
-                    </div>
-                  )}
-              </div>
-            ))}
-      </ul>
-    </div>
-  );
-};

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

@@ -28,7 +28,7 @@ export const ParameterListItem = ({
   group: ParameterGroup;
   id: string;
 }) => (
-  <li className="not-prose px-2 py-4 border-t border-border bg-border/20">
+  <li className="not-prose px-2 py-4 border-t border-border bg-border/20 text-sm flex flex-col gap-1">
     <div className="flex items-center gap-2">
       <code>
         {group === "path" ? (