zudoku 0.1.1-dev.3 → 0.1.1-dev.30

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

@@ -1,309 +0,0 @@
-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 { Header } from "har-format";
-import {
-  Fragment,
-  InputHTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { TrashIcon } from "lucide-react";
-import createVariantComponent from "../../../util/createVariantComponent.js";
-import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
-import {
-  ColorizedParam,
-  DATA_ATTR,
-  usePastellizedColor,
-} from "../ColorizedParam.js";
-import { cn } from "../../../util/cn.js";
-import { useMutation } from "@tanstack/react-query";
-
-const InlineInput = createVariantComponent(
-  "input",
-  "px-2 bg-transparent h-8 font-mono text-xs m-2",
-);
-
-const ParameterValue = ({
-  part,
-  className,
-  ...props
-}: {
-  part: string;
-} & InputHTMLAttributes<HTMLInputElement>) => {
-  const color = usePastellizedColor(part);
-  return (
-    <InlineInput
-      {...props}
-      className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
-      style={{ color: `hsl(${color})` }}
-    />
-  );
-};
-
-const Playground = ({
-  url,
-  host,
-  method,
-  defaultHeaders,
-}: {
-  host: string;
-  url: string;
-  method: string;
-  defaultHeaders?: Header[];
-}) => {
-  const [headers, setHeaders] = useState<Header[]>(
-    defaultHeaders ?? [{ name: "", value: "" }],
-  );
-  const [urlParts, setUrlParts] = useState<Header[]>(
-    url
-      .split("/")
-      .filter((part) => part.startsWith("{") && part.endsWith("}"))
-      .map((part) => ({ name: part, value: "" })),
-  );
-
-  useEffect(() => {
-    const lastHeader = headers.at(-1);
-    if (lastHeader?.value !== "" || lastHeader?.name !== "") {
-      setHeaders([...headers, { name: "", value: "" }]);
-    }
-  }, [headers]);
-
-  const x = useMutation({
-    mutationFn: async () => {
-      const fullUrl =
-        host +
-        url
-          .split("/")
-          .map((v) => urlParts.find((part) => part.name === v)?.value ?? v)
-          .join("/");
-      console.log(
-        fullUrl,
-        Object.fromEntries(
-          headers.map((header) => [header.name, header.value]),
-        ),
-      );
-      const response = await fetch(fullUrl, {
-        // method,
-        headers: Object.fromEntries(
-          headers
-            .filter((h) => h.name)
-            .map((header) => [header.name, header.value]),
-        ),
-      });
-
-      return {
-        status: response.status,
-        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)}
-        >
-          {urlParts.find((p) => p.name === part)?.value}
-        </ColorizedParam>
-      ) : (
-        part
-      )}
-      /
-      <wbr />
-    </Fragment>
-  ));
-
-  return (
-    <Dialog>
-      <DialogTrigger>Open</DialogTrigger>
-      <DialogContent className="max-w-screen-xl">
-        <DialogHeader>
-          <DialogTitle>API Playground</DialogTitle>
-          <DialogDescription>
-            <div className="grid grid-cols-2 gap-2">
-              <Card>
-                <CardContent className="border-b border-border pt-4">
-                  <div>URL</div>
-                  <div className="flex gap-2">
-                    <div className="border rounded border-border p-1.5 w-full">
-                      {path}
-                    </div>
-                    <Button onClick={() => x.mutateAsync()}>Send</Button>
-                  </div>
-                </CardContent>
-                <Tabs defaultValue="headers">
-                  <CardContent className="border-b border-border py-4">
-                    <TabsList>
-                      <TabsTrigger value="headers">
-                        Headers ({headers.length})
-                      </TabsTrigger>
-                      <TabsTrigger value="parameters">Parameters</TabsTrigger>
-                      <TabsTrigger value="auth">Auth</TabsTrigger>
-                    </TabsList>
-                  </CardContent>
-                  <CardContent>
-                    <TabsContent value="headers">
-                      <div className="grid grid-cols-[1fr_1fr_auto]">
-                        {headers.map((header, i) => (
-                          <div
-                            key={i}
-                            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
-                              onChange={(e) =>
-                                setHeaders((headers) => {
-                                  const newHeaders = [...headers];
-                                  newHeaders[i] = {
-                                    ...headers[i],
-                                    name: e.target.value,
-                                  };
-                                  return newHeaders;
-                                })
-                              }
-                              value={header.name}
-                              placeholder={"Name"}
-                              className="peer"
-                            />
-                            <InlineInput
-                              onChange={(e) =>
-                                setHeaders((headers) => {
-                                  const newHeaders = [...headers];
-                                  newHeaders[i] = {
-                                    name: "",
-                                    ...headers.at(i),
-                                    value: e.target.value,
-                                  };
-                                  return newHeaders;
-                                })
-                              }
-                              value={header.value}
-                              placeholder={"Value"}
-                              className="peer"
-                            />
-                            <button
-                              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
-                              onClick={() => {
-                                setHeaders((headers) =>
-                                  [...headers].toSpliced(i, 1),
-                                );
-                              }}
-                            >
-                              <TrashIcon size={16} />
-                            </button>
-                            <div className="col-span-full border-b  border-border"></div>
-                          </div>
-                        ))}
-                      </div>
-                    </TabsContent>
-                    <TabsContent value="parameters">
-                      Parameters
-                      <div className="grid grid-cols-[1fr_1fr_auto]">
-                        {urlParts.map(({ name, value }, i) => (
-                          <div
-                            key={i}
-                            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
-                              onChange={(e) =>
-                                setHeaders((headers) => {
-                                  const newHeaders = [...headers];
-                                  newHeaders[i] = {
-                                    ...headers[i],
-                                    name: e.target.value,
-                                  };
-                                  return newHeaders;
-                                })
-                              }
-                              value={name.slice(1, -1)}
-                              disabled
-                              placeholder={"Name"}
-                              className="peer"
-                            />
-                            <ParameterValue
-                              part={name.slice(1, -1)}
-                              onChange={(e) =>
-                                setUrlParts((parts) => {
-                                  const newParts = [...parts];
-                                  newParts[i] = {
-                                    name: "",
-                                    ...parts.at(i),
-                                    value: e.target.value,
-                                  };
-                                  return newParts;
-                                })
-                              }
-                              {...{ [DATA_ATTR]: name.slice(1, -1) }}
-                              value={value}
-                              placeholder={"Value"}
-                              className="peer"
-                            />
-
-                            <div className="col-span-full border-b border-border"></div>
-                          </div>
-                        ))}
-                      </div>
-                    </TabsContent>
-                    <TabsContent value="auth">
-                      <CardContent>
-                        {url
-                          .split("/")
-                          .map((part, i) =>
-                            part.startsWith("{") && part.endsWith("}")
-                              ? urlParts[i]
-                              : part,
-                          )
-                          .join("/")}
-                      </CardContent>
-                      Change your password here.
-                    </TabsContent>
-                  </CardContent>
-                </Tabs>
-              </Card>
-              <Card>
-                <CardContent>
-                  {method.toUpperCase()}
-                  {url
-                    .split("/")
-                    .map((v) =>
-                      v.startsWith("{") && v.endsWith("}")
-                        ? urlParts.find((part) => part.name === v)?.value ?? v
-                        : v,
-                    )
-                    .join("/")}
-                  <SyntaxHighlight
-                    language="json"
-                    noBackground
-                    copyable={false}
-                    className="text-xs"
-                    code={x.data?.body ?? JSON.stringify("")}
-                  />
-                </CardContent>
-                {x.data?.status}
-              </Card>
-            </div>
-          </DialogDescription>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export { Playground };