zudoku 0.1.1-dev.8 → 0.3.0-dev.10

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

@@ -190,6 +190,14 @@ export type OperationsFragmentFragment = {
     required?: boolean | null;
     schema?: any | null;
     style?: string | null;
+    examples?: Array<{
+      __typename?: "ExampleItem";
+      name: string;
+      description?: string | null;
+      externalValue?: string | null;
+      value?: string | null;
+      summary?: string | null;
+    }> | null;
   }> | null;
   requestBody?: {
     __typename?: "RequestBodyObject";
@@ -259,6 +267,7 @@ export type GetCategoriesQuery = {
       operations: Array<{
         __typename: "OperationItem";
         slug: string;
+        deprecated?: boolean | null;
         method: string;
         summary?: string | null;
         operationId?: string | null;
@@ -300,6 +309,29 @@ export const OperationsFragmentFragmentDoc = {
                 { kind: "Field", name: { kind: "Name", value: "required" } },
                 { kind: "Field", name: { kind: "Name", value: "schema" } },
                 { kind: "Field", name: { kind: "Name", value: "style" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "examples" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "name" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "description" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "externalValue" },
+                      },
+                      { kind: "Field", name: { kind: "Name", value: "value" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "summary" },
+                      },
+                    ],
+                  },
+                },
               ],
             },
           },
@@ -589,6 +621,29 @@ export const AllOperationsDocument = {
                 { kind: "Field", name: { kind: "Name", value: "required" } },
                 { kind: "Field", name: { kind: "Name", value: "schema" } },
                 { kind: "Field", name: { kind: "Name", value: "style" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "examples" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "name" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "description" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "externalValue" },
+                      },
+                      { kind: "Field", name: { kind: "Name", value: "value" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "summary" },
+                      },
+                    ],
+                  },
+                },
               ],
             },
           },
@@ -763,6 +818,10 @@ export const GetCategoriesDocument = {
                               kind: "Field",
                               name: { kind: "Name", value: "slug" },
                             },
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "deprecated" },
+                            },
                             {
                               kind: "Field",
                               name: { kind: "Name", value: "method" },

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

@@ -13,7 +13,9 @@ import {
   cacheExchange,
   fetchExchange,
 } from "./util/urql.js";
-import { createSharedWorkerClient } from "./worker/createSharedWorkerClient.js";
+
+import { createSharedWorkerClient } from "virtual:zudoku-openapi-worker";
+import type { createSharedWorkerClient as createSharedWorkerClientType } from "./worker/createSharedWorkerClient.js";
 
 const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
   undefined,
@@ -64,6 +66,7 @@ const GetCategoriesQuery = graphql(`
         operations {
           __typename
           slug
+          deprecated
           method
           summary
           operationId
@@ -82,7 +85,9 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
         url: config.server,
         exchanges: [cacheExchange, fetchExchange],
       })
-    : createSharedWorkerClient();
+    : (createSharedWorkerClient() as ReturnType<
+        typeof createSharedWorkerClientType
+      >);
 
   return {
     getNavigation: async (path: string) => {
@@ -105,6 +110,7 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
           collapsible: false,
           children: tag.operations.map((operation) => ({
             path: `#${operation.slug}`,
+            muted: !!operation.deprecated,
             title: operation.summary ?? operation.path,
             label: (
               <div className="flex flex-1 min-w-0 justify-between gap-2">

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

@@ -0,0 +1,4 @@
+export const Editor = () => {
+  // const XoXo = lazy(() => import("@monaco-editor/react"));
+  // return <XoXo />;
+};

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

@@ -0,0 +1,87 @@
+import { TriangleAlertIcon, XIcon } from "lucide-react";
+import {
+  Control,
+  useFieldArray,
+  UseFormRegister,
+  useWatch,
+} from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { cn } from "../../../util/cn.js";
+import { InlineInput } from "./InlineInput.js";
+import { NO_IDENTITY, type PlaygroundForm } from "./Playground.js";
+
+export const Headers = ({
+  control,
+  register,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "headers",
+  });
+  const selectedIdentity = useWatch({ name: "identity", control });
+  const liveHeaders = useWatch({ name: "headers", control });
+
+  const disableAuth = selectedIdentity !== NO_IDENTITY;
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto]">
+      {fields.map((header, i) => {
+        const isDisabledByAuth =
+          disableAuth && liveHeaders.at(i)?.name === "Authorization";
+
+        return (
+          <div
+            key={header.id}
+            className={cn(
+              "grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group",
+              isDisabledByAuth && "line-through",
+            )}
+            title={
+              isDisabledByAuth
+                ? "This header is disabled because authentication was selected"
+                : undefined
+            }
+          >
+            <div className="flex gap-2 items-center">
+              <InlineInput
+                {...register(`headers.${i}.name`)}
+                placeholder="Name"
+                className="peer"
+                autoComplete="off"
+              />
+              {isDisabledByAuth && (
+                <TriangleAlertIcon size={16} className="text-amber-500" />
+              )}
+            </div>
+            <InlineInput
+              placeholder={"Value"}
+              className="peer"
+              {...register(`headers.${i}.value`)}
+              autoComplete="off"
+            />
+            <button
+              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+              onClick={() => {
+                remove(i);
+              }}
+              type="button"
+            >
+              <XIcon size={16} />
+            </button>
+            <div className="col-span-full border-b border-border"></div>
+          </div>
+        );
+      })}
+      <Button
+        className="col-span-full mt-4"
+        onClick={() => append({ name: "", value: "" })}
+        type="button"
+      >
+        Add header
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,6 @@
+import createVariantComponent from "../../../util/createVariantComponent.js";
+
+export const InlineInput = createVariantComponent(
+  "input",
+  "px-2 bg-transparent h-6 font-mono text-xs m-2",
+);

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

@@ -0,0 +1,63 @@
+import { forwardRef, InputHTMLAttributes } from "react";
+import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { cn } from "../../../util/cn.js";
+import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
+import { InlineInput } from "./InlineInput.js";
+import { PlaygroundForm } from "./Playground.js";
+
+type ParameterValueProps = {
+  part: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
+  function ParameterValue({ part, className, ...props }, ref) {
+    const color = usePastellizedColor(part);
+    return (
+      <InlineInput
+        {...props}
+        ref={ref}
+        className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
+        style={{
+          // color: `hsl(${color})`,
+          outlineColor: `hsl(${color})`,
+        }}
+      />
+    );
+  },
+);
+
+export const PathParams = ({
+  control,
+  register,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "pathParams",
+  });
+
+  return fields.map((part, i) => (
+    <div
+      key={part.id}
+      className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
+    >
+      <InlineInput
+        {...register(`pathParams.${i}.name`)}
+        disabled
+        placeholder="Name"
+        className="peer"
+      />
+      <ParameterValue
+        {...register(`pathParams.${i}.value`)}
+        part={part.name}
+        {...{ [DATA_ATTR]: part.name }}
+        placeholder="Value"
+        className="peer"
+      />
+
+      <div className="col-span-full border-b border-border"></div>
+    </div>
+  ));
+};

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

@@ -0,0 +1,361 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { useMutation } from "@tanstack/react-query";
+import { CirclePlayIcon } from "lucide-react";
+import { Fragment } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/Dialog.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";
+
+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 const NO_IDENTITY = "__none";
+
+const Playground = ({
+  url,
+  host,
+  method,
+  headers = [{ name: "", value: "" }],
+  queryParams = [],
+  pathParams = [],
+  hasParams,
+}: {
+  host: string;
+  url: string;
+  method: string;
+  headers?: Header[];
+  queryParams?: QueryParam[];
+  pathParams?: PathParam[];
+  hasParams: boolean;
+}) => {
+  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 (
+    <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>
+        <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]">
+                          <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>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { Playground };