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

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

@@ -0,0 +1,100 @@
+import { useMutation } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { Link, useNavigate } from "react-router-dom";
+import { useDevPortal } from "../../components/context/DevPortalProvider.js";
+import { Input } from "../../components/Input.js";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/Select.js";
+import { Button } from "../../ui/Button.js";
+import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+
+type CreateApiKey = { description: string; expiresOn?: string };
+
+export const CreateApiKey = ({
+  options,
+  service,
+}: {
+  options: ApiKeyPluginOptions;
+  service: ApiKeyService;
+}) => {
+  const context = useDevPortal();
+  const navigate = useNavigate();
+  const form = useForm<CreateApiKey>({
+    defaultValues: {
+      expiresOn: "30",
+    },
+  });
+  const createKeyMutation = useMutation({
+    mutationFn: ({ description, expiresOn }: CreateApiKey) => {
+      if (!service.createKey) {
+        throw new Error("deleteKey not implemented");
+      }
+
+      const expiresOnDate =
+        expiresOn !== "never" ? addDaysToDate(Number(expiresOn)) : undefined;
+
+      return service.createKey(
+        { description: description, expiresOn: expiresOnDate },
+        context,
+      );
+    },
+    onSuccess: () => navigate("/settings/api-keys/"),
+  });
+
+  if (!service.createKey) {
+    return null;
+  }
+
+  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">
+        <h1 className="font-medium text-2xl">New API Key</h1>
+      </div>
+      <form
+        onSubmit={form.handleSubmit((data) => createKeyMutation.mutate(data))}
+      >
+        <div className="flex gap-2 flex-col">
+          Note
+          <Input {...form.register("description")} />
+          Expiration
+          <Select
+            onValueChange={(value) => form.setValue("expiresOn", value)}
+            defaultValue={form.getValues("expiresOn")}
+          >
+            <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>
+              <Link to="/settings/api-keys/">Cancel</Link>
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+const addDaysToDate = (days: number): string => {
+  const date = new Date();
+  date.setDate(date.getDate() + days);
+  return date.toISOString();
+};

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

@@ -0,0 +1,125 @@
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import { EyeIcon, EyeOffIcon, RotateCwIcon, TrashIcon } from "lucide-react";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { useDevPortal } from "../../components/context/DevPortalProvider.js";
+import { Button } from "../../ui/Button.js";
+import { Card } from "../../ui/Card.js";
+import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+
+export const SettingsApiKeys = ({
+  options,
+  service,
+}: {
+  options: ApiKeyPluginOptions;
+  service: ApiKeyService;
+}) => {
+  const context = useDevPortal();
+  const queryClient = useQueryClient();
+  const { data } = useSuspenseQuery({
+    queryFn: () => service.getKeys(context),
+    queryKey: ["api-keys"],
+  });
+
+  const deleteKeyMutation = useMutation({
+    mutationFn: (id: string) => {
+      if (!service.deleteKey) {
+        throw new Error("deleteKey not implemented");
+      }
+
+      return service.deleteKey(id, context);
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+    },
+  });
+
+  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-3">
+        <h1 className="font-medium text-2xl">API Keys</h1>
+        {service.createKey && (
+          <Button asChild>
+            <Link to="/settings/api-keys/new">Create API Key</Link>
+          </Button>
+        )}
+      </div>
+
+      <Card>
+        <ul className="grid grid-cols-[min-content_1fr_min-content] ">
+          {data.map((key) => (
+            <li
+              className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
+              key={key.id}
+            >
+              <div className="flex flex-col gap-1 text-sm">
+                {key.description ?? key.id}
+                <div className="text-muted-foreground text-xs">
+                  {key.createdOn && (
+                    <div>
+                      Created on {new Date(key.createdOn).toLocaleDateString()}
+                    </div>
+                  )}
+                  {key.expiresOn && (
+                    <div>
+                      Expires on {new Date(key.expiresOn).toLocaleDateString()}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="items-center flex justify-center">
+                <RevealApiKey apiKey={key.key} />
+              </div>
+              <div className="flex gap-2">
+                {service.rollKey && (
+                  <Button size="icon">
+                    <RotateCwIcon size={16} />
+                  </Button>
+                )}
+                {service.deleteKey && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => {
+                      if (!confirm("Do you want to delete this key?")) {
+                        return;
+                      }
+
+                      deleteKeyMutation.mutate(key.id);
+                    }}
+                    disabled={deleteKeyMutation.isPending}
+                  >
+                    <TrashIcon size={16} />
+                  </Button>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </Card>
+    </div>
+  );
+};
+
+const RevealApiKey = ({ apiKey }: { apiKey: string }) => {
+  const [revealed, setRevealed] = useState(false);
+
+  return (
+    <div className="flex gap-2 items-center text-sm">
+      <code className="border border-border rounded bg-gray-100 dark:bg-gray-950 p-1 font-mono">
+        {revealed ? apiKey : "•".repeat(apiKey.length)}
+      </code>
+      <Button
+        variant="outline"
+        onClick={() => setRevealed((prev) => !prev)}
+        size="icon"
+      >
+        {revealed ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,115 @@
+import { DevPortalContext } from "../../core/DevPortalContext.js";
+import {
+  type ApiIdentityPlugin,
+  type DevPortalPlugin,
+} from "../../core/plugins.js";
+import { CreateApiKey } from "./CreateApiKey.js";
+import { SettingsApiKeys } from "./SettingsApiKeys.js";
+
+export type ApiKeyResults = Promise<ApiKey[]>;
+const DEFAULT_API_KEY_ENDPOINT =
+  "https://zudoku-rewiringamerica-main-ef9c9c0.d2.zuplo.dev";
+
+export type ApiKeyService = {
+  getKeys: (context: DevPortalContext) => ApiKeyResults;
+  rollKey?: (id: string, context: DevPortalContext) => Promise<void>;
+  deleteKey?: (id: string, context: DevPortalContext) => Promise<void>;
+  updateKeyDescription?: (
+    apiKey: { jd: string; description: string },
+    context: DevPortalContext,
+  ) => Promise<void>;
+  getUsage?: (apiKeys: string[], context: DevPortalContext) => Promise<void>;
+  createKey?: (
+    apiKey: { description: string; expiresOn?: string },
+    context: DevPortalContext,
+  ) => Promise<void>;
+};
+
+export type GetApiKeysOptions = ApiKeyService | { endpoint: string } | object;
+
+export type ApiKeyPluginOptions = object & GetApiKeysOptions;
+
+export interface ApiKey {
+  id: string;
+  description?: string;
+  createdOn?: string;
+  updatedOn?: string;
+  expiresOn?: string;
+  key: string;
+}
+
+const createDefaultHandler = (endpoint: string): ApiKeyService => {
+  return {
+    deleteKey: async (id, context) => {
+      const request = new Request(endpoint + `/v1/developer/api-keys/${id}`, {
+        method: "DELETE",
+      });
+
+      await context.signRequest(request);
+
+      await fetch(request);
+    },
+    createKey: async (apiKey, context) => {
+      const request = new Request(endpoint + `/v1/developer/api-keys`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(apiKey),
+      });
+
+      await context.signRequest(request);
+      await fetch(request);
+    },
+    getKeys: async (context) => {
+      const request = new Request(endpoint + `/v1/developer/api-keys`);
+
+      await context.signRequest(request);
+
+      const keys = await fetch(request);
+
+      return await keys.json();
+    },
+  };
+};
+
+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);
+
+  return {
+    getIdentities: async (context) => {
+      try {
+        const keys = await service.getKeys(context);
+
+        return keys.map((key) => ({
+          authorizeRequest: (request) => {
+            request.headers.set("Authorization", `Bearer ${key.key}`);
+            return request;
+          },
+          id: key.id,
+          label: key.description ?? key.id,
+        }));
+      } catch {
+        return [];
+      }
+    },
+    getRoutes: () => {
+      return [
+        {
+          path: "/settings/api-keys",
+          element: <SettingsApiKeys options={options} service={service} />,
+        },
+        {
+          path: "/settings/api-keys/new",
+          element: <CreateApiKey options={options} service={service} />,
+        },
+      ];
+    },
+  };
+};

package/src/lib/plugins/index.ts

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

package/src/{app → lib}/plugins/markdown/MdxPage.tsx

@@ -1,22 +1,42 @@
+import { useMDXComponents } from "@mdx-js/react";
 import { useMemo, type PropsWithChildren, type ReactNode } from "react";
-import { Heading } from "../../Heading.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
 import { Helmet } from "../../core/helmet.js";
 import { Link, useLocation } from "../../core/router.js";
+import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
 import slugify from "../../util/slugify.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { Toc } from "./Toc.js";
 import type { MDXImport } from "./index.js";
 
+const MarkdownHeadings = {
+  h2: ({ children, id }) => (
+    <Heading level={2} id={id} registerSidebarAnchor>
+      {children}
+    </Heading>
+  ),
+  h3: ({ children, id }) => (
+    <Heading level={3} id={id} registerSidebarAnchor>
+      {" "}
+      {children}
+    </Heading>
+  ),
+} satisfies MdxComponentsType;
+
 export const MdxPage = ({
-  children,
+  mdxComponent: MdxComponent,
   frontmatter,
   tableOfContents,
-}: PropsWithChildren<Omit<MDXImport, "default">>) => {
+}: PropsWithChildren<
+  Omit<MDXImport, "default"> & {
+    mdxComponent: MDXImport["default"];
+  }
+>) => {
   const navItem = useTopNavigationItem();
   const location = useLocation();
 
@@ -28,9 +48,9 @@ export const MdxPage = ({
       })
     : undefined;
 
-  const title = frontmatter?.title;
-  const category = frontmatter?.category ?? categoryTitle;
-  const hideToc = frontmatter?.toc === false;
+  const title = frontmatter.title;
+  const category = frontmatter.category ?? categoryTitle;
+  const hideToc = frontmatter.toc === false;
 
   const pageTitle =
     tableOfContents.find((item) => item.depth === 1)?.value ?? title;
@@ -75,21 +95,23 @@ export const MdxPage = ({
       <div
         className={cn(
           ProseClasses,
-          "mx-auto max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
+          "max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
         )}
       >
-        <header className="-translate-y-1">
+        <header>
           {category && <CategoryHeading>{category}</CategoryHeading>}
           {title && (
             <Heading level={1} id={slugify(title, { lower: true })}>
               {title}
             </Heading>
           )}
-          {frontmatter?.description && (
+          {frontmatter.description && (
             <p className="prose-lg">{frontmatter.description}</p>
           )}
         </header>
-        {children}
+        <MdxComponent
+          components={{ ...useMDXComponents(), ...MarkdownHeadings }}
+        />
         <hr />
         <div className="not-prose flex items-center justify-between gap-8">
           {prev.path ? (

package/src/{app → lib}/plugins/markdown/generateRoutes.tsx

@@ -1,21 +1,10 @@
-import { Heading } from "../../Heading.js";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
 import { Navigate, type RouteObject } from "../../core/router.js";
-import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { MdxPage } from "./MdxPage.js";
 import type { MarkdownPluginOptions } from "./index.js";
 
-const MarkdownHeadings = {
-  h2: ({ children, id }) => (
-    <Heading level={2} id={id} children={children} registerSidebarAnchor />
-  ),
-  h3: ({ children, id }) => (
-    <Heading level={3} id={id} children={children} registerSidebarAnchor />
-  ),
-} satisfies MdxComponentsType;
-
 export const generateRoutes = (
   markdownFiles: MarkdownPluginOptions["markdownFiles"],
 ): RouteObject[] => {
@@ -39,11 +28,7 @@ export const generateRoutes = (
           const { default: Component, ...props } = await importPromise();
 
           return {
-            element: (
-              <MdxPage {...props}>
-                <Component components={MarkdownHeadings} />
-              </MdxPage>
-            ),
+            element: <MdxPage mdxComponent={Component} {...props} />,
           };
         },
       } satisfies RouteObject;

package/src/{app → lib}/plugins/openapi/ColorizedParam.tsx

@@ -15,7 +15,6 @@ export const usePastellizedColor = (name: string) => {
 
 export const ColorizedParam = ({
   name,
-  value,
   className,
   backgroundOpacity = "100%",
   slug,
@@ -23,7 +22,6 @@ export const ColorizedParam = ({
   onClick,
 }: {
   name: string;
-  value?: string;
   className?: string;
   backgroundOpacity?: string;
   slug?: string;
@@ -76,7 +74,7 @@ export const ColorizedParam = ({
         className="absolute inset-0 border-b-2 transition-opacity duration-200 opacity-30 group-data-[active=true]:opacity-100"
         style={{ borderColor, backgroundColor }}
       />
-      <span className="relative">{children || name}</span>
+      <span className="relative">{children ?? name}</span>
     </span>
   );
 };

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

@@ -0,0 +1,63 @@
+import { graphql } from "./graphql/index.js";
+import { useOasConfig } from "./index.js";
+import type { OperationListItemResult } from "./OperationList.js";
+import { Playground } from "./playground/Playground.js";
+
+import { useQuery } from "urql";
+
+const GetServerQuery = graphql(/* GraphQL */ `
+  query getServerQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+    }
+  }
+`);
+
+export const MakeRequest = ({
+  operation,
+}: {
+  operation: OperationListItemResult;
+}) => {
+  const variables = useOasConfig();
+  const [server] = useQuery({ query: GetServerQuery, variables });
+
+  const headers = operation.parameters
+    ?.filter((p) => p.in === "header")
+    .map((p) => ({
+      name: p.name,
+      value: p.examples?.find((x) => x.value)?.value ?? "",
+    }));
+  const queryParams = operation.parameters
+    ?.filter((p) => p.in === "query")
+    .sort((a, b) => (a.required && !b.required ? -1 : 1))
+    .map((p) => {
+      return {
+        name: p.name,
+        value: "",
+        active: p.required ?? false,
+        isRequired: p.required ?? false,
+      };
+    });
+  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 (
+    <Playground
+      host={server.data?.schema.url ?? ""}
+      method={operation.method}
+      url={operation.path}
+      headers={headers}
+      queryParams={queryParams}
+      pathParams={pathParams}
+      hasParams={hasParams}
+    />
+  );
+};

package/src/{app → lib}/plugins/openapi/OperationList.tsx

@@ -1,12 +1,12 @@
-import { Heading } from "../../Heading.js";
+import { ResultOf } from "@graphql-typed-document-node/core";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
-import { useOasConfig } from "./index.js";
 import { graphql } from "./graphql/index.js";
+import { useOasConfig } from "./index.js";
 import { useQuery } from "./util/urql.js";
-import { ResultOf } from "@graphql-typed-document-node/core";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
   fragment OperationsFragment on OperationItem {
@@ -24,6 +24,13 @@ export const OperationsFragment = graphql(/* GraphQL */ `
       required
       schema
       style
+      examples {
+        name
+        description
+        externalValue
+        value
+        summary
+      }
     }
     requestBody {
       content {
@@ -72,12 +79,15 @@ const AllOperationsQuery = graphql(/* GraphQL */ `
   }
 `);
 
+const suspenseContext = { suspense: true };
+
 export const OperationList = () => {
   const { type, input } = useOasConfig();
 
   const [result] = useQuery({
     query: AllOperationsQuery,
     variables: { type, input },
+    context: suspenseContext,
   });
 
   if (!result.data) return null;
@@ -91,7 +101,7 @@ export const OperationList = () => {
         </Heading>
         <Markdown content={result.data.schema.description ?? ""} />
       </div>
-      {result.data?.schema.tags
+      {result.data.schema.tags
         .filter((tag) => tag.operations.length > 0)
         .map((tag) => (
           <div key={tag.name}>

package/src/{app → lib}/plugins/openapi/OperationListItem.tsx

@@ -1,8 +1,9 @@
-import { Heading } from "../../Heading.js";
+import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
-import { groupBy } from "../../util/groupBy.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
 import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
+import { SchemaListView } from "./SchemaListView.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
 
@@ -15,8 +16,11 @@ export const OperationListItem = ({
   operationFragment: FragmentType<typeof OperationsFragment>;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
-  const groupedParameters = groupBy(operation?.parameters ?? [], "in");
-
+  const groupedParameters = Object.groupBy(
+    operation.parameters ?? [],
+    (param) => param.in,
+  );
+  const first = operation.responses.find((re) => re.statusCode === "200");
   return (
     <div
       key={operation.operationId}
@@ -35,11 +39,11 @@ export const OperationListItem = ({
         {operation.parameters && operation.parameters.length > 0 && (
           <div className="mt-4">
             {PARAM_GROUPS.flatMap((group) =>
-              groupedParameters?.[group]?.length ? (
+              groupedParameters[group]?.length ? (
                 <ParameterList
                   key={group}
                   id={operation.slug}
-                  groupedParameters={groupedParameters}
+                  parameters={groupedParameters[group]}
                   group={group}
                 />
               ) : (
@@ -48,7 +52,37 @@ export const OperationListItem = ({
             )}
           </div>
         )}
+        <Heading level={3} className="capitalize">
+          Responses
+        </Heading>
+        <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>
+          <TabsList>
+            {operation.responses.map((response) => (
+              <TabsTrigger
+                value={response.statusCode + response.description}
+                key={response.statusCode}
+                title={response.description}
+              >
+                {response.statusCode}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          <ul className="list-none m-0 px-0 overflow-hidden">
+            {operation.responses.map((response) => (
+              <TabsContent
+                value={response.statusCode + response.description}
+                key={response.statusCode}
+              >
+                <SchemaListView
+                  schema={response.content?.at(0)?.schema}
+                  name=""
+                />
+              </TabsContent>
+            ))}
+          </ul>
+        </Tabs>
       </div>
+
       <Sidecar operation={operation} />
     </div>
   );