zudoku 0.1.1-dev.3 → 0.1.1-dev.31

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

@@ -1,4 +1,4 @@
-import { Heading } from "../../Heading.js";
+import { Heading } from "../../components/Heading.js";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
 import { Navigate, type RouteObject } from "../../core/router.js";

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;

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

@@ -27,7 +27,7 @@ export const MakeRequest = ({
         host={server.data?.schema.url}
         method={operation.method}
         url={operation.path}
-        defaultHeaders={[]}
+        // defaultHeaders={}
       />
       {identities.data.map((identity) => (
         <button

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

@@ -1,13 +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 { SchemaType } from "./graphql/graphql.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 {
@@ -78,7 +77,7 @@ export const OperationList = () => {
 
   const [result] = useQuery({
     query: AllOperationsQuery,
-    variables: { type: SchemaType.Url, input },
+    variables: { type, input },
   });
 
   if (!result.data) return null;

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

@@ -1,4 +1,4 @@
-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 { OperationsFragment } from "./OperationList.js";

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

@@ -1,4 +1,4 @@
-import { Heading } from "../../Heading.js";
+import { Heading } from "../../components/Heading.js";
 import type { ParameterGroup } from "./OperationListItem.js";
 import {
   ParameterListItem,

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

@@ -54,7 +54,10 @@ export const ParameterListItem = ({
       )}
     </div>
     {parameter.description && (
-      <Markdown content={parameter.description} className="prose-p:my-1" />
+      <Markdown
+        content={parameter.description}
+        className="text-sm prose-p:my-1"
+      />
     )}
   </li>
 );

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

@@ -76,12 +76,7 @@ export type OperationItem = {
   tags?: Maybe<Array<TagItem>>;
 };
 
-export enum ParameterIn {
-  Cookie = "cookie",
-  Header = "header",
-  Path = "path",
-  Query = "query",
-}
+export type ParameterIn = "cookie" | "header" | "path" | "query";
 
 export type ParameterItem = {
   __typename?: "ParameterItem";
@@ -160,11 +155,7 @@ export type SchemaTag = {
   operations: Array<OperationItem>;
 };
 
-export enum SchemaType {
-  Json = "json",
-  Url = "url",
-  Yaml = "yaml",
-}
+export type SchemaType = "json" | "url" | "yaml";
 
 export type TagItem = {
   __typename?: "TagItem";

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

@@ -13,8 +13,9 @@ import {
   cacheExchange,
   fetchExchange,
 } from "./util/urql.js";
-import { createSharedWorkerClient } from "./worker/createSharedWorkerClient.js";
-import { SchemaType } from "./graphql/graphql.js";
+
+import { createSharedWorkerClient } from "virtual:zudoku-openapi-worker";
+import type { createSharedWorkerClient as createSharedWorkerClientType } from "./worker/createSharedWorkerClient.js";
 
 const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
   undefined,
@@ -83,7 +84,9 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
         url: config.server,
         exchanges: [cacheExchange, fetchExchange],
       })
-    : createSharedWorkerClient();
+    : (createSharedWorkerClient() as ReturnType<
+        typeof createSharedWorkerClientType
+      >);
 
   return {
     getNavigation: async (path: string) => {
@@ -93,7 +96,7 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
 
       const { data } = await client.query(GetCategoriesQuery, {
         input: config.input,
-        type: SchemaType.Url, //config.type
+        type: config.type,
       });
 
       if (!data) return [];

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

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

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

@@ -0,0 +1,66 @@
+import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { TrashIcon } from "lucide-react";
+import { InlineInput } from "./InlineInput.js";
+import type { PlaygroundForm, Header } from "./Playground.js";
+import { useEffect } from "react";
+
+export const Headers = ({
+  control,
+  register,
+  headers,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+  headers: Header[];
+}) => {
+  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "headers",
+  });
+
+  const headersCount = headers.length;
+  const headersLastName = headers.at(-1)?.name;
+  const headersValue = headers.at(-1)?.value;
+
+  useEffect(() => {
+    if (headersCount === 0) {
+      append({ name: "", value: "" });
+    }
+    if (headersLastName !== "" || headersValue !== "") {
+      append({ name: "", value: "" });
+    }
+  }, [append, headersCount, headersLastName, headersValue]);
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto]">
+      {fields.map((header, i) => (
+        <div
+          key={header.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"
+        >
+          {/*<input type="checkbox" />*/}
+          <InlineInput
+            {...register(`headers.${i}.name`)}
+            placeholder="Name"
+            className="peer"
+          />
+          <InlineInput
+            placeholder={"Value"}
+            className="peer"
+            {...register(`headers.${i}.value`)}
+          />
+          <button
+            className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+            onClick={() => {
+              remove(i);
+            }}
+            disabled={fields.length === 1}
+          >
+            <TrashIcon size={16} />
+          </button>
+          <div className="col-span-full border-b  border-border"></div>
+        </div>
+      ))}
+    </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-8 font-mono text-xs m-2",
+);

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

@@ -0,0 +1,274 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/Dialog.js";
+import { Card, CardContent } from "../../../ui/Card.js";
+import { Button } from "../../../ui/Button.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { Fragment } from "react";
+import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
+import { ColorizedParam } from "../ColorizedParam.js";
+import { useMutation } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { Headers } from "./Headers.js";
+import { QueryParams } from "./QueryParams.js";
+import { UrlParts } from "./UrlParts.js";
+import { LoaderCircle } from "lucide-react";
+
+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];
+}
+
+export type Header = {
+  name: string;
+  value: string;
+};
+export type QueryParam = {
+  name: string;
+  value: string;
+};
+export type UrlPart = {
+  name: string;
+  value: string;
+};
+
+export type PlaygroundForm = {
+  body: string;
+  queryParams: QueryParam[];
+  urlParts: UrlPart[];
+  headers: Header[];
+};
+
+const Playground = ({
+  url,
+  host,
+  method,
+  defaultHeaders,
+}: {
+  host: string;
+  url: string;
+  method: string;
+  defaultHeaders?: Header[];
+}) => {
+  const { register, control, handleSubmit, watch } = useForm<PlaygroundForm>({
+    defaultValues: {
+      body: "",
+      queryParams: [{ name: "", value: "" }],
+      headers: defaultHeaders ?? [{ name: "", value: "" }],
+      urlParts: url
+        .split("/")
+        .filter((part) => part.startsWith("{") && part.endsWith("}"))
+        .map((part) => ({ name: part.slice(1, -1), value: "" })),
+    },
+  });
+
+  const formState = watch();
+
+  const x = useMutation({
+    mutationFn: async (data: PlaygroundForm) => {
+      const fullUrl =
+        host +
+        url
+          .split("/")
+          .map((v) =>
+            v.startsWith("{") && v.endsWith("}")
+              ? data.urlParts.find((part) => part.name === v.slice(1, -1))
+                  ?.value ?? v
+              : v,
+          )
+          .join("/");
+
+      const response = await fetch(fullUrl, {
+        method: method.toUpperCase(),
+        headers: Object.fromEntries(
+          data.urlParts
+            .filter((h) => h.name)
+            .map((header) => [header.name, header.value]),
+        ),
+      });
+
+      return {
+        status: response.status,
+        headers: response.headers,
+        body: await response.text(),
+      };
+    },
+  });
+
+  const path = url.split("/").map((part) => (
+    <Fragment key={part}>
+      {part.startsWith("{") && part.endsWith("}") ? (
+        <ColorizedParam
+          name={part.slice(1, -1)}
+          backgroundOpacity="0"
+          onClick={() => {
+            console.log("asd");
+          }}
+          slug={part.slice(1, -1)}
+        >
+          {
+            formState.urlParts.find((p) => {
+              console.log(
+                p.name,
+                part.slice(1, -1),
+                p.name === part.slice(1, -1),
+                p.value,
+              );
+              return p.name === part.slice(1, -1);
+            })?.value
+          }
+        </ColorizedParam>
+      ) : (
+        part
+      )}
+      {"/"}
+      <wbr />
+    </Fragment>
+  ));
+
+  const lang = mimeTypeToLanguage(x.data?.headers.get("Content-Type") ?? "");
+
+  return (
+    <Dialog>
+      <DialogTrigger>Open</DialogTrigger>
+
+      <DialogContent className="max-w-screen-xl w-full h-5/6">
+        <form
+          onSubmit={handleSubmit((data) => {
+            x.mutateAsync(data);
+          })}
+        >
+          <DialogHeader>
+            <DialogTitle className="mb-4">API Playground</DialogTitle>
+            <DialogDescription>
+              <div className="grid grid-cols-2 gap-2">
+                <Card>
+                  <CardContent className="border-b border-border pt-4">
+                    <div className="font-bold mb-1">URL</div>
+                    <div className="flex gap-2 items-center">
+                      <div className="border rounded border-border flex justify-stretch w-full">
+                        <div className="border-r border-border p-2 bg-muted font-mono">
+                          {method.toUpperCase()}
+                        </div>
+                        <div className="p-2 whitespace-nowrap overflow-scroll flex-1">
+                          {path}
+                        </div>
+                      </div>
+                      <Button type="submit">Send</Button>
+                    </div>
+                  </CardContent>
+                  <Tabs defaultValue="parameters">
+                    <CardContent className="border-b border-border py-4">
+                      <TabsList>
+                        <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                        <TabsTrigger value="headers">
+                          Headers ({formState.headers.length - 1})
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="body"
+                          disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
+                            method.toUpperCase(),
+                          )}
+                        >
+                          Body
+                        </TabsTrigger>
+                      </TabsList>
+                    </CardContent>
+                    <CardContent className="overflow-auto h-full">
+                      <TabsContent value="headers">
+                        <Headers
+                          control={control}
+                          register={register}
+                          headers={formState.headers}
+                        />
+                      </TabsContent>
+                      <TabsContent value="parameters">
+                        <UrlParts control={control} register={register} />
+                        Query Parameters
+                        <QueryParams
+                          control={control}
+                          queryParams={formState.queryParams}
+                          register={register}
+                        />
+                      </TabsContent>
+                      <TabsContent value="auth">
+                        <CardContent>
+                          {url
+                            .split("/")
+                            .map((part, i) =>
+                              part.startsWith("{") && part.endsWith("}")
+                                ? formState.urlParts[i]
+                                : part,
+                            )
+                            .join("/")}
+                        </CardContent>
+                        Change your password here.
+                      </TabsContent>
+                      <TabsContent value="body">
+                        <textarea
+                          {...register("body")}
+                          className="border border-border w-full rounded p-2 bg-muted h-40"
+                        />
+                      </TabsContent>
+                    </CardContent>
+                  </Tabs>
+                </Card>
+                <Card>
+                  <CardContent>
+                    <div className="mt-2 font-mono gap-2 flex">
+                      {method.toUpperCase()} {x.data?.status}{" "}
+                      {url
+                        .split("/")
+                        .map((v) =>
+                          v.startsWith("{") && v.endsWith("}")
+                            ? formState.urlParts.find((part) => part.name === v)
+                                ?.value ?? v
+                            : v,
+                        )
+                        .join("/")}
+                    </div>
+
+                    <div className="w-full overflow-auto max-h-80 rounded-xl border border-border p-4 dark:!bg-foreground/10 dark:border-transparent">
+                      {x.isPending && (
+                        <>
+                          <LoaderCircle size={18} className="animate-spins" /> a
+                          request to see the response."
+                        </>
+                      )}
+                      <SyntaxHighlight
+                        language={lang ?? "json"}
+                        noBackground
+                        copyable={false}
+                        className="overflow-x-auto "
+                        code={x.data?.body ?? JSON.stringify("")}
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { Playground };

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

@@ -0,0 +1,79 @@
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  UseFormRegister,
+} from "react-hook-form";
+import { TrashIcon } from "lucide-react";
+import { InlineInput } from "./InlineInput.js";
+import { PlaygroundForm, QueryParam } from "./Playground.js";
+import { useEffect } from "react";
+
+export const QueryParams = ({
+  control,
+  register,
+  queryParams,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+  queryParams: QueryParam[];
+}) => {
+  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "queryParams",
+  });
+
+  const queryCount = queryParams?.length;
+  const queryLastName = queryParams.at(-1)?.name;
+  const queryLastValue = queryParams.at(-1)?.value;
+
+  useEffect(() => {
+    // if (queryCount === 0) {
+    //   append({ name: "", value: "" });
+    // }
+    console.log(queryLastName, queryLastValue, queryCount);
+    if (queryLastName !== "" || queryLastValue !== "") {
+      console.log("appending");
+      append({ name: "", value: "" });
+    }
+  }, [append, queryLastValue, queryLastName, queryCount]);
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto]">
+      {fields.map((field, i) => (
+        <div
+          key={field.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"
+        >
+          {field.id}
+          <Controller
+            control={control}
+            render={({ field }) => {
+              return (
+                <InlineInput {...field} placeholder="Name" className="peer" />
+              );
+            }}
+            name={`queryParams.${i}.name`}
+          />
+          <Controller
+            control={control}
+            render={({ field }) => {
+              return (
+                <InlineInput {...field} placeholder="Value" className="peer" />
+              );
+            }}
+            name={`queryParams.${i}.value`}
+          />
+
+          <button
+            className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+            onClick={() => remove(i)}
+          >
+            <TrashIcon size={16} />
+          </button>
+          <div className="col-span-full border-b  border-border"></div>
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { InlineInput } from "./InlineInput.js";
+import { PlaygroundForm } from "./Playground.js";
+import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
+import { forwardRef, InputHTMLAttributes } from "react";
+import { cn } from "../../../util/cn.js";
+
+type ParameterValueProps = {
+  part: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
+  ({ 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 UrlParts = ({
+  control,
+  register,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "urlParts",
+  });
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto]">
+      {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(`urlParts.${i}.name`)}
+            disabled
+            placeholder="Name"
+            className="peer"
+          />
+          <ParameterValue
+            {...register(`urlParts.${i}.value`)}
+            part={part.name}
+            {...{ [DATA_ATTR]: part.name }}
+            placeholder="Value"
+            className="peer"
+          />
+
+          <div className="col-span-full border-b border-border"></div>
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -1,4 +1,4 @@
-import { monotonicFactory } from "ulid";
+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.ts

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

package/src/{app → lib}/util/MdxComponents.tsx

@@ -2,7 +2,7 @@ import { MDXProvider } from "@mdx-js/react";
 import type { ComponentProps } from "react";
 
 import { Link } from "react-router-dom";
-import { Heading } from "../Heading.js";
+import { Heading } from "../components/Heading.js";
 import { SyntaxHighlight } from "../components/SyntaxHighlight.js";
 import { Callout } from "../ui/Callout.js";
 import { cn } from "./cn.js";