zudoku 0.1.1-dev.32 → 0.1.1-dev.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.32",
+  "version": "0.1.1-dev.34",
   "type": "module",
   "files": [
     "dist",

package/src/app/App.tsx

@@ -8,6 +8,7 @@ import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
+import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 
 // Base React Component
 import { DevPortal } from "zudoku/components";
@@ -32,6 +33,7 @@ export default function App() {
         ...configuredDocsPlugins,
         ...configuredApiPlugins,
         configuredApiKeysPlugin,
+        configuredRedirectPlugin,
       ]}
     />
   );

package/src/lib/components/Layout.tsx

@@ -41,20 +41,19 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         {meta?.favicon && <link rel="icon" href={meta.favicon} />}
       </Helmet>
       <Header />
+
       <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12">
-        <Suspense
-          fallback={<SideNavigationWrapper>Loading...</SideNavigationWrapper>}
-        >
+        <Suspense fallback={<div className="top-48">Warte kurz...</div>}>
           <SideNavigation />
-        </Suspense>
-        <main
-          className="dark:border-white/10 translate-x-0
+          <main
+            className="dark:border-white/10 translate-x-0
           lg:overflow-visible
           lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]
           lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] peer-data-[navigation=true]:pl-12"
-        >
-          {children ?? <Outlet />}
-        </main>
+          >
+            {children ?? <Outlet />}
+          </main>
+        </Suspense>
       </div>
     </>
   );

package/src/lib/components/navigation/SideNavigationItem.tsx

@@ -15,7 +15,7 @@ import { DynamicIcon, isValidIcon } from "../DynamicIcon.js";
 import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
 import { checkHasActiveItem, isLinkItem, isPathItem } from "./util.js";
 
-export const linkItem = cva(
+export const navigationListItem = cva(
   "flex px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
   {
     variants: {
@@ -24,7 +24,7 @@ export const linkItem = cva(
         false: "text-foreground/80",
       },
       isMuted: {
-        true: "opacity-60",
+        true: "text-foreground/30",
         false: "",
       },
     },
@@ -58,9 +58,8 @@ export const SideNavigationItem = ({
   if (isLinkItem(item)) {
     const classes = cn(
       "flex items-center gap-2",
-      linkItem({
+      navigationListItem({
         isActive: item.href === location.pathname,
-        isMuted: true,
       }),
     );
     return item.href.startsWith("http") ? (
@@ -108,7 +107,10 @@ export const SideNavigationItem = ({
           className="flex flex-col"
         >
           <Collapsible.Trigger
-            className={cn("group text-start", linkItem({ isActive: false }))}
+            className={cn(
+              "group text-start",
+              navigationListItem({ isActive: false }),
+            )}
           >
             {linkContent}
           </Collapsible.Trigger>
@@ -131,15 +133,16 @@ export const SideNavigationItem = ({
         <AnchorLink
           to={item.path}
           {...{ [DATA_ANCHOR_ATTR]: item.path }}
-          className={linkItem({
+          className={navigationListItem({
             isActive: item.path.slice(1) === activeAnchor,
+            isMuted: item.muted,
           })}
         >
           {linkContent}
         </AnchorLink>
       ) : (
         <NavLink
-          className={({ isActive }) => linkItem({ isActive })}
+          className={({ isActive }) => navigationListItem({ isActive })}
           to={currentPath}
         >
           {linkContent}

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

@@ -62,7 +62,7 @@ export const SettingsApiKeys = ({
                   <div>Expires on {key.expiresOn}</div>
                 ) : (
                   key.createdOn && (
-                    <div className="text-gray-500">
+                    <div className="text-gray-500 whitespace-pre">
                       Created on {new Date(key.createdOn).toLocaleDateString()}
                     </div>
                   )
@@ -79,9 +79,15 @@ export const SettingsApiKeys = ({
                 )}
                 {service.deleteKey && (
                   <Button
-                    variant="destructive"
+                    variant="ghost"
                     size="icon"
-                    onClick={() => deleteKeyMutation.mutate(key.id)}
+                    onClick={() => {
+                      if (!confirm("Do you want to delete this key?")) {
+                        return;
+                      }
+
+                      deleteKeyMutation.mutate(key.id);
+                    }}
                     disabled={deleteKeyMutation.isPending}
                   >
                     <TrashIcon size={16} />

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

@@ -18,6 +18,7 @@ export type ApiKeyService = {
     apiKey: { jd: string; description: string },
     context: DevPortalContext,
   ) => Promise<void>;
+  getUsage?: (apiKeys: string[], context: DevPortalContext) => Promise<void>;
   createKey?: (
     apiKey: { description: string; expiresAt?: string },
     context: DevPortalContext,
@@ -76,13 +77,13 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
         return [];
       }
 
-      const consumers = await fetch(endpoint + `/v1/developer/api-keys`, {
+      const keys = await fetch(endpoint + `/v1/developer/api-keys`, {
         headers: {
           Authorization: `Bearer ${accessToken}`,
         },
       });
 
-      return await consumers.json();
+      return await keys.json();
     },
   };
 };
@@ -90,27 +91,24 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
 ): DevPortalPlugin & ApiIdentityPlugin => {
+  const endpoint =
+    "endpoint" in options ? options.endpoint : DEFAULT_API_KEY_ENDPOINT;
+
   const service =
-    "getKeys" in options
-      ? options
-      : createDefaultHandler(
-          "endpoint" in options ? options.endpoint : DEFAULT_API_KEY_ENDPOINT,
-        );
+    "getKeys" in options ? options : createDefaultHandler(endpoint);
 
   return {
     getIdentities: async (context) => {
-      return [];
-      // throw new Error("Not implemented");
-      // const keys = await getConsumers(context);
-      // return (keys ?? { consumers: [] }).consumers
-      //   .flatMap((consumer) => consumer.apiKeys)
-      //   .map((key) => ({
-      //     authorizeRequest: (request: Request) => {
-      //       request.headers.set("Authorization", `Bearer ${key.key}`);
-      //     },
-      //     id: key.id,
-      //     name: key.id,
-      //   }));
+      const keys = await service.getKeys(context);
+
+      return keys.map((key) => ({
+        authorizeRequest: (request) => {
+          request.headers.set("Authorization", `Bearer ${key.key}`);
+          return request;
+        },
+        id: key.id,
+        name: key.id,
+      }));
     },
     getRoutes: () => {
       return [

package/src/lib/plugins/index.ts

@@ -1,4 +1,3 @@
-// Plugins
 export { apiKeyPlugin } from "./api-key/index.js";
 export { markdownPlugin } from "./markdown/index.js";
 export { openApiPlugin } from "./openapi/index.js";

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

@@ -21,31 +21,38 @@ export const MakeRequest = ({
   const variables = useOasConfig();
   const [server] = useQuery({ query: GetServerQuery, variables });
 
+  const headers = operation.parameters
+    ?.filter((p) => p.in === "header")
+    ?.map((p) => ({
+      name: p.name,
+      value: "",
+    }));
+  const queryParams = operation.parameters
+    ?.filter((p) => p.in === "query")
+    ?.map((p) => ({
+      name: p.name,
+      value: "",
+    }));
+  const pathParams = operation.parameters
+    ?.filter((p) => p.in === "path")
+    ?.map((p) => ({
+      name: p.name,
+      value: "",
+    }));
+
+  const hasParams =
+    operation.parameters?.some((p) => p.in === "query" || p.in === "path") ??
+    false;
+
   return (
-    <div>
-      <Playground
-        host={server.data?.schema.url ?? ""}
-        method={operation.method}
-        url={operation.path}
-        headers={operation.parameters
-          ?.filter((p) => p.in === "header")
-          .map((param) => ({
-            name: param.name,
-            value: "",
-          }))}
-        queryParams={operation.parameters
-          ?.filter((p) => p.in === "query")
-          .map((param) => ({
-            name: param.name,
-            value: "",
-          }))}
-        pathParams={operation.parameters
-          ?.filter((p) => p.in === "path")
-          .map((param) => ({
-            name: param.name,
-            value: "",
-          }))}
-      />
-    </div>
+    <Playground
+      host={server.data?.schema.url ?? ""}
+      method={operation.method}
+      url={operation.path}
+      headers={headers}
+      queryParams={queryParams}
+      pathParams={pathParams}
+      hasParams={hasParams}
+    />
   );
 };

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

@@ -20,6 +20,7 @@ import { PathParams } from "./PathParams.js";
 import { CirclePlayIcon, LoaderCircle, MonitorCheckIcon } from "lucide-react";
 import { createUrl } from "./createUrl.js";
 import { UrlDisplay } from "./UrlDisplay.js";
+import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
 
 function mimeTypeToLanguage(mimeType: string) {
   const mimeTypeMapping = {
@@ -79,6 +80,7 @@ const Playground = ({
   headers = [{ name: "", value: "" }],
   queryParams = [],
   pathParams = [],
+  hasParams,
 }: {
   host: string;
   url: string;
@@ -86,6 +88,7 @@ const Playground = ({
   headers?: Header[];
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
+  hasParams: boolean;
 }) => {
   const { register, control, handleSubmit, watch, ...form } =
     useForm<PlaygroundForm>({
@@ -97,6 +100,7 @@ const Playground = ({
       },
     });
   const formState = watch();
+  const identities = useApiIdentities();
 
   const queryMutation = useMutation({
     mutationFn: async (data: PlaygroundForm) => {
@@ -153,12 +157,6 @@ const Playground = ({
 
   const headerEntries = Array.from(queryMutation.data?.headers.entries() ?? []);
 
-  console.log(
-    "QP lol",
-    formState.queryParams,
-    formState.queryParams.filter((p) => p.active),
-  );
-
   const urlQueryParams = formState.queryParams
     .filter((p) => p.active)
     .map((p) => (
@@ -201,9 +199,11 @@ const Playground = ({
                     Send
                   </Button>
                 </div>
-                <Tabs defaultValue="parameters">
+                <Tabs defaultValue={hasParams ? "parameters" : "headers"}>
                   <TabsList>
-                    <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                    {hasParams && (
+                      <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                    )}
                     <TabsTrigger value="headers">
                       Headers{" "}
                       {formState.headers.length > 0 &&

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

@@ -69,9 +69,14 @@ export const QueryParams = ({
         control={control}
         render={({ field }) => {
           return (
-            <div className="flex items-center px-2 bg-transparent h-6 font-mono text-xs m-2">
-              {field.value}
-            </div>
+            <InlineInput asChild>
+              <label
+                className="flex items-center"
+                htmlFor={`queryParams.${i}.active`}
+              >
+                {field.value}
+              </label>
+            </InlineInput>
           );
         }}
         name={`queryParams.${i}.name`}

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

@@ -1,7 +1,7 @@
 import { Navigate } from "react-router-dom";
 import type { DevPortalPlugin } from "../../core/plugins.js";
 
-type Redirect = {
+export type Redirect = {
   from: string;
   to: string;
   replace?: boolean;

package/src/lib/util/createVariantComponent.tsx

@@ -1,7 +1,8 @@
-import { cva } from "class-variance-authority";
-import { ClassValue } from "clsx";
 import * as React from "react";
-import { JSX } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import type { ClassValue } from "clsx";
+import type { JSX } from "react/jsx-runtime";
 import { cn } from "./cn.js";
 
 const createVariantComponent = <
@@ -14,15 +15,17 @@ const createVariantComponent = <
 ) => {
   const MyVariant = React.forwardRef<
     HTMLElement,
-    JSX.IntrinsicElements[E] & { className?: ClassValue }
-  >(({ className, ...props }, ref) =>
-    React.createElement(tag, {
+    JSX.IntrinsicElements[E] & { className?: ClassValue; asChild?: boolean }
+  >(({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : tag;
+
+    return React.createElement(Comp, {
       ...props,
       ref,
       className:
         typeof cvx === "function" ? cvx({ className }) : cn(cvx, className),
-    }),
-  );
+    });
+  });
 
   MyVariant.displayName = `VariantComponent(${tag})`;