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

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

@@ -0,0 +1,331 @@
+import { useMutation } from "@tanstack/react-query";
+import { Fragment } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../components/Select.js";
+import { Spinner } from "../../../components/Spinner.js";
+import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
+import { Button } from "../../../ui/Button.js";
+import { Card } from "../../../ui/Card.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { ColorizedParam } from "../ColorizedParam.js";
+import { createUrl } from "./createUrl.js";
+import { Headers } from "./Headers.js";
+import { PathParams } from "./PathParams.js";
+import { QueryParams } from "./QueryParams.js";
+
+export const NO_IDENTITY = "__none";
+
+function mimeTypeToLanguage(mimeType: string) {
+  const mimeTypeMapping = {
+    "application/json": "json",
+    "text/json": "json",
+    "text/html": "html",
+    "text/css": "css",
+    "text/javascript": "javascript",
+    "application/xml": "xml",
+    "application/xhtml+xml": "xhtml",
+    "text/plain": "plain",
+  } as const;
+
+  return Object.entries(mimeTypeMapping).find(([mime]) =>
+    mimeType.includes(mime),
+  )?.[0][1];
+}
+
+const statusCodeMap: Record<number, string> = {
+  200: "OK",
+  201: "Created",
+  202: "Accepted",
+  204: "No Content",
+  400: "Bad Request",
+  401: "Unauthorized",
+  403: "Forbidden",
+  404: "Not Found",
+  405: "Method Not Allowed",
+  500: "Internal Server Error",
+};
+
+export type Header = {
+  name: string;
+  value: string;
+};
+export type QueryParam = {
+  name: string;
+  value: string;
+  active: boolean;
+  isRequired: boolean;
+};
+export type PathParam = {
+  name: string;
+  value: string;
+};
+
+export type PlaygroundForm = {
+  body: string;
+  queryParams: QueryParam[];
+  pathParams: PathParam[];
+  headers: Header[];
+  identity?: string;
+};
+
+export type PlaygroundContentProps = {
+  host: string;
+  url: string;
+  method: string;
+  headers?: Header[];
+  queryParams?: QueryParam[];
+  pathParams?: PathParam[];
+  hasParams: boolean;
+};
+
+export const Playground = ({
+  host,
+  url,
+  method,
+  headers = [{ name: "", value: "" }],
+  queryParams = [],
+  pathParams = [],
+  hasParams,
+}: PlaygroundContentProps) => {
+  const { register, control, handleSubmit, watch, ...form } =
+    useForm<PlaygroundForm>({
+      defaultValues: {
+        body: "",
+        queryParams,
+        headers,
+        pathParams,
+        identity: NO_IDENTITY,
+      },
+    });
+  const formState = watch();
+  const identities = useApiIdentities();
+
+  const queryMutation = useMutation({
+    mutationFn: async (data: PlaygroundForm) => {
+      const requestUrl = createUrl(host, url, data);
+      const start = performance.now();
+
+      const request = new Request(requestUrl, {
+        method: method.toUpperCase(),
+        headers: Object.fromEntries(
+          data.headers
+            .filter((h) => h.name)
+            .map((header) => [header.name, header.value]),
+        ),
+      });
+
+      if (data.identity !== NO_IDENTITY) {
+        identities.data
+          ?.find((i) => i.id === data.identity)
+          ?.authorizeRequest(request);
+      }
+      const response = await fetch(request);
+
+      const body = await response.text();
+
+      return {
+        status: response.status,
+        headers: response.headers,
+        size: body.length,
+        body,
+        time: performance.now() - start,
+      };
+    },
+  });
+
+  const path = url.split("/").map((part, i, arr) => (
+    <Fragment key={part}>
+      {part.startsWith("{") && part.endsWith("}") ? (
+        <ColorizedParam
+          name={part}
+          backgroundOpacity="0"
+          slug={part.slice(1, -1)}
+        >
+          {
+            formState.pathParams.find((p) => p.name === part.slice(1, -1))
+              ?.value
+          }
+        </ColorizedParam>
+      ) : (
+        part
+      )}
+      {i < arr.length - 1 && "/"}
+      <wbr />
+    </Fragment>
+  ));
+
+  const lang = mimeTypeToLanguage(
+    queryMutation.data?.headers.get("Content-Type") ?? "",
+  );
+
+  const headerEntries = Array.from(queryMutation.data?.headers.entries() ?? []);
+
+  const urlQueryParams = formState.queryParams
+    .filter((p) => p.active)
+    .map((p) => (
+      <Fragment key={p.name}>
+        {p.name}={p.value}
+        <wbr />
+      </Fragment>
+    ));
+  return (
+    <FormProvider {...{ register, control, handleSubmit, watch, ...form }}>
+      <form onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}>
+        <div className="grid grid-cols-2 text-sm h-full">
+          <div className="flex flex-col gap-4 p-8 bg-muted/50 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
+            <div className="flex gap-2 items-stretch">
+              <div className="flex flex-1 items-center w-full border rounded-md border-border">
+                <div className="border-r border-border p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
+                  {method.toUpperCase()}
+                </div>
+                <div className="p-2 font-mono text-xs">
+                  {path}
+                  {urlQueryParams.length > 0 ? "?" : ""}
+                  {urlQueryParams}
+                </div>
+              </div>
+              <Button type="submit" className="h-auto flex gap-1">
+                Send
+              </Button>
+            </div>
+            <Tabs defaultValue={hasParams ? "parameters" : "headers"}>
+              <div className="flex justify-between">
+                <TabsList>
+                  {hasParams && (
+                    <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                  )}
+                  <TabsTrigger value="headers">
+                    Headers{" "}
+                    {formState.headers.length > 0 &&
+                      `(${formState.headers.length})`}
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="body"
+                    disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
+                      method.toUpperCase(),
+                    )}
+                  >
+                    Body
+                  </TabsTrigger>
+                </TabsList>
+                <div className="flex gap-2 items-center">
+                  Auth:
+                  <Select
+                    onValueChange={(value) => form.setValue("identity", value)}
+                    defaultValue={formState.identity}
+                  >
+                    <SelectTrigger className="w-[180px] flex">
+                      {identities.isPending ? <Spinner /> : <SelectValue />}
+                    </SelectTrigger>
+                    <SelectContent align="center">
+                      <SelectItem value={NO_IDENTITY}>None</SelectItem>
+                      {identities.data?.map((identity) => (
+                        <SelectItem key={identity.id} value={identity.id}>
+                          {identity.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <TabsContent value="headers">
+                <Headers control={control} register={register} />
+              </TabsContent>
+              <TabsContent value="parameters">
+                <div className="grid grid-cols-[min-content_1fr_1fr_auto]">
+                  {pathParams.length > 0 && (
+                    <div className="font-semibold my-3 col-span-3">
+                      Path Parameters
+                    </div>
+                  )}
+                  <PathParams control={control} register={register} />
+                  {queryParams.length > 0 && (
+                    <span className="font-semibold my-3 col-span-3">
+                      Query Parameters
+                    </span>
+                  )}
+                  <QueryParams control={control} />
+                </div>
+              </TabsContent>
+              <TabsContent value="body">
+                <textarea
+                  {...register("body")}
+                  className="border border-border w-full rounded p-2 bg-muted h-40"
+                />
+              </TabsContent>
+            </Tabs>
+          </div>
+          <div className="flex flex-col gap-4 p-8 bg-muted/70">
+            {queryMutation.error ? (
+              <div>{queryMutation.error.message}</div>
+            ) : queryMutation.data ? (
+              <div className="flex flex-col gap-2">
+                <div className="flex gap-2">
+                  <div className="flex text-xs gap-6">
+                    <div>
+                      Status: {queryMutation.data.status}{" "}
+                      {statusCodeMap[queryMutation.data.status] ?? ""}
+                    </div>
+                    <div>Time: {queryMutation.data.time.toFixed(0)}ms</div>
+                    <div>Size: {queryMutation.data.size} B</div>
+                  </div>
+                </div>
+                {/*<UrlDisplay host={host} path={url} />*/}
+                <Tabs defaultValue="response">
+                  <TabsList>
+                    <TabsTrigger value="response">Response</TabsTrigger>
+                    <TabsTrigger value="headers">
+                      {headerEntries.length
+                        ? `Headers (${headerEntries.length})`
+                        : "No headers"}
+                    </TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value="response">
+                    <Card className="shadow-none p-4">
+                      <SyntaxHighlight
+                        language={lang ?? "json"}
+                        noBackground
+                        className="overflow-x-auto "
+                        code={queryMutation.data.body ?? JSON.stringify("")}
+                      />
+                    </Card>
+                  </TabsContent>
+                  <TabsContent value="headers">
+                    <Card className="grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4">
+                      <div className="font-semibold">Key</div>
+                      <div className="font-semibold">Value</div>
+                      {headerEntries.map(([key, value]) => (
+                        <Fragment key={key}>
+                          <div>{key}</div>
+                          <div>{value}</div>
+                        </Fragment>
+                      ))}
+                    </Card>
+                  </TabsContent>
+                </Tabs>
+              </div>
+            ) : (
+              <div className="grid place-items-center h-full">
+                <span className="text-[16px] font-semibold text-muted-foreground">
+                  {queryMutation.isPending ? (
+                    <Spinner />
+                  ) : (
+                    "Send a request first to see the response here"
+                  )}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { CirclePlayIcon } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/Dialog.js";
+import { Playground, type PlaygroundContentProps } from "./Playground.js";
+
+const PlaygroundDialog = (props: PlaygroundContentProps) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <CirclePlayIcon
+          className="cursor-pointer text-primary hover:text-primary/80"
+          size={16}
+        />
+      </DialogTrigger>
+
+      <DialogContent
+        className="max-w-screen-xl w-full h-5/6 overflow-auto p-0"
+        aria-describedby={undefined}
+      >
+        <VisuallyHidden>
+          <DialogTitle>Playground</DialogTitle>
+        </VisuallyHidden>
+        <Playground {...props} />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { PlaygroundDialog };

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

@@ -0,0 +1,89 @@
+import { XIcon } from "lucide-react";
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  useFormContext,
+} from "react-hook-form";
+import { InlineInput } from "./InlineInput.js";
+import { PlaygroundForm } from "./Playground.js";
+
+export const QueryParams = ({
+  control,
+}: {
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "queryParams",
+  });
+  const form = useFormContext<PlaygroundForm>();
+
+  const requiredFields = form
+    .getValues(`queryParams`)
+    .map((param) => param.isRequired);
+
+  return fields.map((field, i) => (
+    <div
+      key={field.id}
+      className="px-2 grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-accent rounded overflow-hidden group"
+    >
+      <Controller
+        control={control}
+        name={`queryParams.${i}.active`}
+        render={({ field }) => (
+          <input
+            type="checkbox"
+            id={`queryParams.${i}.active`}
+            checked={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
+
+      <Controller
+        control={control}
+        render={({ field }) => {
+          return (
+            <InlineInput asChild>
+              <label
+                className="flex items-center"
+                htmlFor={`queryParams.${i}.active`}
+                title={requiredFields[i] ? "Required field" : undefined}
+              >
+                {field.value}
+                {requiredFields[i] && <sup className="text-destructive">*</sup>}
+              </label>
+            </InlineInput>
+          );
+        }}
+        name={`queryParams.${i}.name`}
+      />
+      <Controller
+        control={control}
+        render={({ field }) => {
+          return (
+            <InlineInput {...field} placeholder="Value" className="peer" />
+          );
+        }}
+        name={`queryParams.${i}.value`}
+      />
+      <Controller
+        control={control}
+        render={({ field }) => {
+          return (
+            <button
+              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+              onClick={() => field.onChange("")}
+            >
+              <XIcon size={16} />
+            </button>
+          );
+        }}
+        name={`queryParams.${i}.value`}
+      />
+
+      <div className="-mx-2 col-span-full border-b border-border"></div>
+    </div>
+  ));
+};

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

@@ -0,0 +1,32 @@
+import { useFormContext } from "react-hook-form";
+import type { PlaygroundForm } from "./Playground.js";
+
+export const UrlDisplay = ({ host, path }: { host: string; path: string }) => {
+  const { watch } = useFormContext<PlaygroundForm>();
+  const data = watch();
+  const url = new URL(
+    host +
+      path
+        .split("/")
+        .map((v) =>
+          v.startsWith("{") && v.endsWith("}")
+            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
+                ?.value ?? v
+            : v,
+        )
+        .join("/"),
+  );
+
+  data.queryParams.forEach((param) => {
+    if (!param.value) {
+      return;
+    }
+    url.searchParams.set(param.name, param.value);
+  });
+
+  return (
+    <div className="overflow-auto font-mono whitespace-nowrap">
+      {url.toString()}
+    </div>
+  );
+};

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -0,0 +1,22 @@
+import { PlaygroundForm } from "./Playground.js";
+
+export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
+  const url = new URL(
+    host +
+      path
+        .split("/")
+        .map((v) =>
+          v.startsWith("{") && v.endsWith("}")
+            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
+                ?.value ?? v
+            : v,
+        )
+        .join("/"),
+  );
+
+  data.queryParams.forEach((param) => {
+    url.searchParams.set(param.name, param.value);
+  });
+
+  return url;
+};

package/src/{app → lib}/plugins/openapi/util/generateSchemaExample.ts

@@ -4,7 +4,10 @@ import { type SchemaObject } from "../../../oas/graphql/index.js";
 export const isObject = (value: unknown): boolean =>
   typeof value === "object" && value !== null && !Array.isArray(value);
 
-export const generateSchemaExample = (schema: SchemaObject): any => {
+export const generateSchemaExample = (
+  schema: SchemaObject,
+  name?: string,
+): any => {
   // Directly return the example or default if they exist
   if (schema.example !== undefined) {
     return schema.example;
@@ -18,21 +21,31 @@ export const generateSchemaExample = (schema: SchemaObject): any => {
   }
 
   // Recursively process objects and arrays
-  return processComplexTypes(schema);
+  return processComplexTypes(schema, name);
 };
 
-function processComplexTypes(schema: SchemaObject): any {
-  if (schema.type === "object" && schema.properties) {
+function processComplexTypes(schema: SchemaObject, name?: string): any {
+  const properties = Object.entries(schema.properties ?? {}).concat(
+    Object.entries(schema.additionalProperties ?? {}),
+  );
+  if (schema.type === "object" && properties.length > 0) {
     const obj: { [key: string]: any } = {};
-    Object.keys(schema.properties!).forEach((key) => {
-      obj[key] = generateSchemaExample(schema.properties![key]);
+    properties.forEach(([key, propSchema]) => {
+      const value = generateSchemaExample(propSchema, key);
+      if (value !== undefined) {
+        obj[key] = value;
+      }
     });
     return obj;
   } else if (schema.type === "array" && schema.items) {
-    return [generateSchemaExample(schema.items)];
+    const value = generateSchemaExample(schema.items, name);
+    if (value !== undefined) {
+      return [value];
+    }
+    return [];
   }
   // Fallback for missing or undefined types
-  return getDefaultForType(schema.type);
+  return undefined; //getDefaultForType(schema.type);
 }
 
 function getDefaultForType(type?: string | string[]): any {
@@ -54,6 +67,6 @@ function getDefaultForSingleType(type?: string): any {
     case "null":
       return null;
     default:
-      return undefined;
+      return "undefined";
   }
 }

package/src/{app → lib}/plugins/openapi/worker/createSharedWorkerClient.ts

@@ -1,4 +1,5 @@
-import { monotonicFactory } from "ulid";
+/* eslint-disable no-console */
+import { monotonicFactory } from "ulidx";
 import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
 import {
   cacheExchange,

package/src/lib/plugins/openapi/worker/shared-worker.ts

@@ -0,0 +1,5 @@
+export function createSharedWorker() {
+  return new SharedWorker(new URL("./worker.ts", import.meta.url), {
+    type: "module",
+  });
+}

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

@@ -0,0 +1,56 @@
+import { useLogger } from "@envelop/core";
+import { createGraphQLServer } from "../../../oas/graphql/index.js";
+import { type WorkerGraphQLMessage } from "./createSharedWorkerClient.js";
+
+const map = new Map<string, number>();
+
+const localServer = createGraphQLServer({
+  plugins: [
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLogger({
+      logFn: (eventName, { args }) => {
+        if (import.meta.env.PROD) return;
+
+        if (eventName.endsWith("-start")) {
+          map.set(`${eventName}-${args.operationName}`, performance.now());
+        } else if (eventName.endsWith("-end")) {
+          const startEvent = eventName.replace("-end", "-start");
+          const start = map.get(`${startEvent}-${args.operationName}`);
+          if (start) {
+            // eslint-disable-next-line no-console
+            console.log(
+              `${args.operationName} query took ${performance.now() - start}ms`,
+            );
+            map.delete(`${startEvent}-${args.operationName}`);
+          }
+        }
+      },
+    }),
+  ],
+});
+
+const worker = self as unknown as SharedWorkerGlobalScope;
+
+worker.addEventListener(
+  "connect",
+  function (event: MessageEvent<{ id: string; body: string }>) {
+    const port = event.ports[0];
+
+    port.onmessage = async function (e) {
+      const response = await localServer.fetch(
+        new Request("/__z/graphql", {
+          method: "POST",
+          body: e.data.body,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }),
+      );
+
+      port.postMessage({
+        id: e.data.id,
+        body: await response.text(),
+      } satisfies WorkerGraphQLMessage);
+    };
+  },
+);

package/src/lib/plugins/openapi-worker.ts

@@ -0,0 +1 @@
+export { createSharedWorkerClient } from "./openapi/worker/createSharedWorkerClient.js";

package/src/{app → 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/ui/Button.tsx

@@ -0,0 +1,25 @@
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+import { buttonVariants } from "./button-variants.js";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";