zudoku 0.3.0-dev.54 → 0.3.0-dev.55

package/lib/Playground-DOHxca0P.js

@@ -0,0 +1,539 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-DvZ6OKMM.js";
+import { g as useFieldArray, h as useWatch, i as useFormContext, C as Controller, u as useForm, a as useMutation, F as FormProvider, S as Select, b as SelectTrigger, c as SelectValue, d as SelectContent, f as SelectItem } from "./Select-Boi_pe3L.js";
+import * as React from "react";
+import { forwardRef, Fragment } from "react";
+import { a as useQuery } from "./urql-DtVKPBx_.js";
+import { v as useApiIdentities } from "./DevPortalProvider-GjdO0Xr-.js";
+import { S as Spinner } from "./Spinner-oU0QJmi_.js";
+import { e as cn, j as TriangleAlert, S as SyntaxHighlight } from "./Markdown-B8nPVql1.js";
+import { B as Button } from "./Combination-BfufJFkX.js";
+import { X, u as usePastellizedColor, D as DATA_ATTR, C as ColorizedParam, T as Tabs, a as TabsList, b as TabsTrigger, c as TabsContent } from "./OperationList-krPgt6sE.js";
+import { u as useOasConfig } from "./context-BoN_3uxi.js";
+import { g as graphql } from "./index-Dih8IAqw.js";
+import { S as Slot } from "./index-BL1P4Gqq.js";
+const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border border-border bg-card text-card-foreground shadow",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "h3",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+const createUrl = (host, path, data) => {
+  const url = new URL(
+    host + path.split("/").map(
+      (v) => {
+        var _a;
+        return v.startsWith("{") && v.endsWith("}") ? ((_a = data.pathParams.find((part) => part.name === v.slice(1, -1))) == null ? void 0 : _a.value) ?? v : v;
+      }
+    ).join("/")
+  );
+  data.queryParams.forEach((param) => {
+    url.searchParams.set(param.name, param.value);
+  });
+  return url;
+};
+const createVariantComponent = (tag, cvx) => {
+  const MyVariant = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : tag;
+    return React.createElement(Comp, {
+      ...props,
+      ref,
+      className: cn(cvx, className)
+    });
+  });
+  MyVariant.displayName = `VariantComponent(${tag})`;
+  return MyVariant;
+};
+const InlineInput = createVariantComponent(
+  "input",
+  "px-2 bg-transparent h-6 font-mono text-xs m-2"
+);
+const Headers = ({
+  control,
+  register
+}) => {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "headers"
+  });
+  const selectedIdentity = useWatch({ name: "identity", control });
+  const liveHeaders = useWatch({ name: "headers", control });
+  const disableAuth = selectedIdentity !== NO_IDENTITY;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto]", children: [
+    fields.map((header, i) => {
+      var _a;
+      const isDisabledByAuth = disableAuth && ((_a = liveHeaders.at(i)) == null ? void 0 : _a.name) === "Authorization";
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          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" : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-center", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                InlineInput,
+                {
+                  ...register(`headers.${i}.name`),
+                  placeholder: "Name",
+                  className: "peer",
+                  autoComplete: "off"
+                }
+              ),
+              isDisabledByAuth && /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { size: 16, className: "text-amber-500" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InlineInput,
+              {
+                placeholder: "Value",
+                className: "peer",
+                ...register(`headers.${i}.value`),
+                autoComplete: "off"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "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",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "col-span-full border-b border-border" })
+          ]
+        },
+        header.id
+      );
+    }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        className: "col-span-full mt-4",
+        onClick: () => append({ name: "", value: "" }),
+        type: "button",
+        children: "Add header"
+      }
+    )
+  ] });
+};
+const ParameterValue = forwardRef(
+  function ParameterValue2({ part, className, ...props }, ref) {
+    const color = usePastellizedColor(part);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      InlineInput,
+      {
+        ...props,
+        ref,
+        className: cn(className, "opacity-80 data-[active=true]:opacity-100"),
+        style: {
+          // color: `hsl(${color})`,
+          outlineColor: `hsl(${color})`
+        }
+      }
+    );
+  }
+);
+const PathParams = ({
+  control,
+  register
+}) => {
+  const { fields } = useFieldArray({
+    control,
+    name: "pathParams"
+  });
+  return fields.map((part, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          InlineInput,
+          {
+            ...register(`pathParams.${i}.name`),
+            disabled: true,
+            placeholder: "Name",
+            className: "peer"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ParameterValue,
+          {
+            ...register(`pathParams.${i}.value`),
+            part: part.name,
+            ...{ [DATA_ATTR]: part.name },
+            placeholder: "Value",
+            className: "peer"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "col-span-full border-b border-border" })
+      ]
+    },
+    part.id
+  ));
+};
+const QueryParams = ({
+  control
+}) => {
+  const { fields } = useFieldArray({
+    control,
+    name: "queryParams"
+  });
+  const form = useFormContext();
+  const requiredFields = form.getValues(`queryParams`).map((param) => param.isRequired);
+  return fields.map((field, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      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",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Controller,
+          {
+            control,
+            name: `queryParams.${i}.active`,
+            render: ({ field: field2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                type: "checkbox",
+                id: `queryParams.${i}.active`,
+                checked: field2.value,
+                onChange: field2.onChange
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Controller,
+          {
+            control,
+            render: ({ field: field2 }) => {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(InlineInput, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "label",
+                {
+                  className: "flex items-center",
+                  htmlFor: `queryParams.${i}.active`,
+                  title: requiredFields[i] ? "Required field" : void 0,
+                  children: [
+                    field2.value,
+                    requiredFields[i] && /* @__PURE__ */ jsxRuntimeExports.jsx("sup", { className: "text-destructive", children: "*" })
+                  ]
+                }
+              ) });
+            },
+            name: `queryParams.${i}.name`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Controller,
+          {
+            control,
+            render: ({ field: field2 }) => {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(InlineInput, { ...field2, placeholder: "Value", className: "peer" });
+            },
+            name: `queryParams.${i}.value`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Controller,
+          {
+            control,
+            render: ({ field: field2 }) => {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible",
+                    field2.value.length === 0 && "opacity-0 pointer-events-none"
+                  ),
+                  onClick: () => field2.onChange(""),
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { size: 16 })
+                }
+              );
+            },
+            name: `queryParams.${i}.value`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mx-2 col-span-full border-b border-border" })
+      ]
+    },
+    field.id
+  ));
+};
+const NO_IDENTITY = "__none";
+const GetServerQuery = graphql(
+  /* GraphQL */
+  `
+  query getServerQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+    }
+  }
+`
+);
+function mimeTypeToLanguage(mimeType) {
+  var _a;
+  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"
+  };
+  return (_a = Object.entries(mimeTypeMapping).find(
+    ([mime]) => mimeType.includes(mime)
+  )) == null ? void 0 : _a[0][1];
+}
+const statusCodeMap = {
+  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"
+};
+const Playground = ({
+  url,
+  method,
+  headers = [{ name: "", value: "" }],
+  queryParams = [],
+  pathParams = [],
+  hasParams
+}) => {
+  var _a, _b, _c;
+  const variables = useOasConfig();
+  const [server] = useQuery({ query: GetServerQuery, variables });
+  const { register, control, handleSubmit, watch, ...form } = useForm({
+    defaultValues: {
+      body: "",
+      queryParams,
+      headers,
+      pathParams,
+      identity: NO_IDENTITY
+    }
+  });
+  const formState = watch();
+  const identities = useApiIdentities();
+  const queryMutation = useMutation({
+    mutationFn: async (data) => {
+      var _a2, _b2, _c2;
+      const requestUrl = createUrl(((_a2 = server.data) == null ? void 0 : _a2.schema.url) ?? "", 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) {
+        (_c2 = (_b2 = identities.data) == null ? void 0 : _b2.find((i) => i.id === data.identity)) == null ? void 0 : _c2.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) => {
+    var _a2;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
+      part.startsWith("{") && part.endsWith("}") ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ColorizedParam,
+        {
+          name: part,
+          backgroundOpacity: "0",
+          slug: part.slice(1, -1),
+          children: (_a2 = formState.pathParams.find((p) => p.name === part.slice(1, -1))) == null ? void 0 : _a2.value
+        }
+      ) : part,
+      i < arr.length - 1 && "/",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("wbr", {})
+    ] }, part);
+  });
+  const lang = mimeTypeToLanguage(
+    ((_a = queryMutation.data) == null ? void 0 : _a.headers.get("Content-Type")) ?? ""
+  );
+  const headerEntries = Array.from(((_b = queryMutation.data) == null ? void 0 : _b.headers.entries()) ?? []);
+  const urlQueryParams = formState.queryParams.filter((p) => p.active).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
+    p.name,
+    "=",
+    p.value,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("wbr", {})
+  ] }, p.name));
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormProvider, { ...{ register, control, handleSubmit, watch, ...form }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit((data) => queryMutation.mutateAsync(data)), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 text-sm h-full", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("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", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-stretch", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-1 items-center w-full border rounded-md border-border", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-r border-border p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono", children: method.toUpperCase() }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2 font-mono text-xs", children: [
+            path,
+            urlQueryParams.length > 0 ? "?" : "",
+            urlQueryParams
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", className: "h-auto flex gap-1", children: "Send" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: hasParams ? "parameters" : "headers", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
+            hasParams && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parameters", children: "Parameters" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "headers", children: [
+              "Headers",
+              " ",
+              formState.headers.length > 0 && `(${formState.headers.length})`
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              TabsTrigger,
+              {
+                value: "body",
+                disabled: ["POST", "PUT", "PATCH", "DELETE"].includes(
+                  method.toUpperCase()
+                ),
+                children: "Body"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-center", children: [
+            "Auth:",
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Select,
+              {
+                onValueChange: (value) => form.setValue("identity", value),
+                defaultValue: formState.identity,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-[180px] flex", children: identities.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { align: "center", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: NO_IDENTITY, children: "None" }),
+                    (_c = identities.data) == null ? void 0 : _c.map((identity) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: identity.id, children: identity.label }, identity.id))
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Headers, { control, register }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parameters", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[min-content_1fr_1fr_auto]", children: [
+          pathParams.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold my-3 col-span-3", children: "Path Parameters" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(PathParams, { control, register }),
+          queryParams.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold my-3 col-span-3", children: "Query Parameters" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(QueryParams, { control })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "textarea",
+          {
+            ...register("body"),
+            className: "border border-border w-full rounded p-2 bg-muted h-40"
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4 p-8 bg-muted/70", children: queryMutation.error ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: queryMutation.error.message }) : queryMutation.data ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex text-xs gap-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Status: ",
+          queryMutation.data.status,
+          " ",
+          statusCodeMap[queryMutation.data.status] ?? ""
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Time: ",
+          queryMutation.data.time.toFixed(0),
+          "ms"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Size: ",
+          queryMutation.data.size,
+          " B"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "response", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "response", children: "Response" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "headers", children: headerEntries.length ? `Headers (${headerEntries.length})` : "No headers" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "response", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "shadow-none p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SyntaxHighlight,
+          {
+            language: lang ?? "json",
+            noBackground: true,
+            className: "overflow-x-auto ",
+            code: queryMutation.data.body ?? JSON.stringify("")
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Key" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Value" }),
+          headerEntries.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: key }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: value })
+          ] }, key))
+        ] }) })
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid place-items-center h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[16px] font-semibold text-muted-foreground", children: queryMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, {}) : "Send a request first to see the response here" }) }) })
+  ] }) }) });
+};
+export {
+  NO_IDENTITY,
+  Playground,
+  Playground as default
+};
+//# sourceMappingURL=Playground-DOHxca0P.js.map