zudoku 0.3.0-dev.77 → 0.3.0-dev.79

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

@@ -9,12 +9,18 @@ import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
 import { cn } from "../../../util/cn.js";
 import { InlineInput } from "./InlineInput.js";
-import type { PlaygroundForm } from "./Playground.js";
+import {
+  NO_IDENTITY,
+  type PlaygroundForm,
+  type QueryParam,
+} from "./Playground.js";
 
 export const QueryParams = ({
   control,
+  queryParams,
 }: {
   control: Control<PlaygroundForm>;
+  queryParams: QueryParam[];
 }) => {
   const { fields } = useFieldArray<PlaygroundForm>({
     control,
@@ -22,93 +28,101 @@ export const QueryParams = ({
   });
   const form = useFormContext<PlaygroundForm>();
 
-  const requiredFields = form
-    .getValues("queryParams")
-    .map((param) => param.isRequired);
+  const requiredFields = queryParams.map((param) => Boolean(param.isRequired));
+
+  const selectedIdentity = form.watch("identity");
+  const hasSelectedIdentity = selectedIdentity !== NO_IDENTITY;
 
   return (
     <div className="">
       <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
         <tbody>
-          {fields.map((field, i) => (
-            <tr key={field.id} className="hover:bg-accent/40">
-              <td className="text-center">
-                <Controller
-                  control={control}
-                  name={`queryParams.${i}.active`}
-                  render={({ field }) => (
-                    <input
-                      type="checkbox"
-                      id={`queryParams.${i}.active`}
-                      checked={field.value}
-                      onChange={field.onChange}
-                    />
-                  )}
-                />
-              </td>
-              <td>
-                <Controller
-                  control={control}
-                  render={({ field }) => (
-                    <InlineInput asChild>
-                      <label
-                        className="flex items-center cursor-pointer"
-                        htmlFor={`queryParams.${i}.active`}
-                        title={requiredFields[i] ? "Required field" : undefined}
-                      >
-                        {field.value}
-                        {requiredFields[i] && <sup>&nbsp;*</sup>}
-                      </label>
-                    </InlineInput>
-                  )}
-                  name={`queryParams.${i}.name`}
-                />
-              </td>
-              <td>
-                <div className="flex justify-between items-center">
+          {fields
+            .filter(
+              // TODO remove this hack for Accu or make it more generic
+              (field) => !(hasSelectedIdentity && field.name === "apikey"),
+            )
+            .map((field, i) => (
+              <tr key={field.id} className="hover:bg-accent/40">
+                <td className="text-center">
                   <Controller
                     control={control}
+                    name={`queryParams.${i}.active`}
                     render={({ field }) => (
-                      <Input
-                        {...field}
-                        onChange={(e) => {
-                          field.onChange(e.target.value);
-                          if (e.target.value.length > 0) {
-                            form.setValue(`queryParams.${i}.active`, true);
-                          }
-                        }}
-                        placeholder="Enter value"
-                        className="w-full border-0 shadow-none text-xs font-mono"
+                      <input
+                        type="checkbox"
+                        id={`queryParams.${i}.active`}
+                        checked={field.value}
+                        onChange={field.onChange}
                       />
                     )}
-                    name={`queryParams.${i}.value`}
                   />
+                </td>
+                <td>
                   <Controller
                     control={control}
                     render={({ field }) => (
-                      <Button
-                        size="icon"
-                        type="button"
-                        variant="ghost"
-                        aria-label="Clear value"
-                        className={cn(
-                          "ms-2",
-                          field.value.length === 0
-                            ? "opacity-0 pointer-events-none"
-                            : "opacity-100",
-                        )}
-                        title="Clear value"
-                        onClick={() => field.onChange("")}
-                      >
-                        <EraserIcon size={16} />
-                      </Button>
+                      <InlineInput asChild>
+                        <label
+                          className="flex items-center cursor-pointer"
+                          htmlFor={`queryParams.${i}.active`}
+                          title={
+                            requiredFields[i] ? "Required field" : undefined
+                          }
+                        >
+                          {field.value}
+                          {requiredFields[i] && <sup>&nbsp;*</sup>}
+                        </label>
+                      </InlineInput>
                     )}
-                    name={`queryParams.${i}.value`}
+                    name={`queryParams.${i}.name`}
                   />
-                </div>
-              </td>
-            </tr>
-          ))}
+                </td>
+                <td>
+                  <div className="flex justify-between items-center">
+                    <Controller
+                      control={control}
+                      render={({ field }) => (
+                        <Input
+                          {...field}
+                          onChange={(e) => {
+                            field.onChange(e.target.value);
+                            if (e.target.value.length > 0) {
+                              form.setValue(`queryParams.${i}.active`, true);
+                            }
+                          }}
+                          placeholder="Enter value"
+                          className="w-full border-0 shadow-none text-xs font-mono"
+                        />
+                      )}
+                      name={`queryParams.${i}.value`}
+                    />
+                    <Controller
+                      control={control}
+                      render={({ field }) => (
+                        <Button
+                          size="icon"
+                          type="button"
+                          variant="ghost"
+                          aria-label="Clear value"
+                          className={cn(
+                            "ms-2",
+                            field.value.length === 0
+                              ? "opacity-0 pointer-events-none"
+                              : "opacity-100",
+                          )}
+                          title="Clear value"
+                          onClick={() => field.onChange("")}
+                        >
+                          <EraserIcon size={16} />
+                        </Button>
+                      )}
+                      name={`queryParams.${i}.value`}
+                    />
+                  </div>
+                </td>
+              </tr>
+            ))}
         </tbody>
       </table>
     </div>

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

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
+import { Card } from "../../../ui/Card.js";
+import { SimpleSelect } from "../SimpleSelect.js";
+
+const 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",
+  };
+
+  return Object.entries(mimeTypeMapping).find(([mime]) =>
+    mimeType.includes(mime),
+  )?.[1];
+};
+
+const detectLanguage = (headers: Headers) => {
+  const contentType = headers.get("Content-Type") || "";
+  return mimeTypeToLanguage(contentType);
+};
+
+const tryParseJson = (body: string) => {
+  try {
+    return JSON.stringify(JSON.parse(body), null, 2);
+  } catch {
+    return null;
+  }
+};
+
+export const ResponseTab = ({
+  body = "",
+  headers,
+}: {
+  body?: string;
+  headers: Headers;
+}) => {
+  const detectedLanguage = detectLanguage(headers);
+  const jsonContent = tryParseJson(body);
+  const beautifiedBody = jsonContent || body;
+  const [view, setView] = useState<"formatted" | "raw">(
+    jsonContent ? "formatted" : "raw",
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Card className="shadow-none">
+        <SyntaxHighlight
+          language={
+            view === "raw" ? (jsonContent ? "plain" : detectedLanguage) : "json"
+          }
+          noBackground
+          showLanguageIndicator
+          className="overflow-x-auto p-4 text-xs"
+          code={view === "raw" ? body : beautifiedBody}
+        />
+      </Card>
+      {jsonContent && (
+        <div className="flex justify-end">
+          <SimpleSelect
+            value={view}
+            onChange={(e) => setView(e.target.value as "formatted" | "raw")}
+            options={[
+              { value: "formatted", label: "Formatted" },
+              { value: "raw", label: "Raw" },
+            ]}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/lib/ui/Button.tsx

@@ -1,8 +1,38 @@
 import { Slot } from "@radix-ui/react-slot";
-import { VariantProps } from "class-variance-authority";
+import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../util/cn.js";
-import { buttonVariants } from "./button-variants.js";
+
+const buttonVariants = cva(
+  "not-prose inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        xl: "h-14 rounded-lg px-10 text-lg",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,

package/src/lib/util/fetchTimeout.tsx

@@ -0,0 +1,21 @@
+export const fetchTimeout = async (
+  input: RequestInfo,
+  init?: RequestInit,
+  timeout = 5000,
+): Promise<Response> => {
+  const controller = new AbortController();
+  const signal = controller.signal;
+
+  const fetchPromise = fetch(input, { ...init, signal });
+
+  const timeoutPromise = new Promise<Response>((_, reject) => {
+    const timer = setTimeout(() => {
+      controller.abort("Request timed out");
+      reject(new Error("Request timed out"));
+    }, timeout);
+
+    void fetchPromise.finally(() => clearTimeout(timer));
+  });
+
+  return Promise.race([fetchPromise, timeoutPromise]);
+};

package/dist/lib/ui/button-variants.d.ts

@@ -1,4 +0,0 @@
-export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "xl" | "icon" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/lib/ui/button-variants.js

@@ -1,25 +0,0 @@
-import { cva } from "class-variance-authority";
-export const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
-    variants: {
-        variant: {
-            default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-            destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-            outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-            secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline",
-        },
-        size: {
-            default: "h-9 px-4 py-2",
-            sm: "h-8 rounded-md px-3 text-xs",
-            lg: "h-10 rounded-md px-8",
-            xl: "h-14 rounded-lg px-10 text-lg",
-            icon: "h-9 w-9",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default",
-    },
-});
-//# sourceMappingURL=button-variants.js.map

package/dist/lib/ui/button-variants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-variants.js","sourceRoot":"","sources":["../../../src/lib/ui/button-variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAC/B,qOAAqO,EACrO;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,+DAA+D;YACjE,WAAW,EACT,8EAA8E;YAChF,OAAO,EACL,0FAA0F;YAC5F,SAAS,EACP,wEAAwE;YAC1E,KAAK,EAAE,8CAA8C;YACrD,IAAI,EAAE,iDAAiD;SACxD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,eAAe;YACxB,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,+BAA+B;YACnC,IAAI,EAAE,SAAS;SAChB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC"}