zudoku 0.3.0-dev.2 → 0.3.0-dev.21

package/src/lib/plugins/openapi/ResponsesSidecarBox.tsx

@@ -52,7 +52,9 @@ export const ResponsesSidecarBox = ({
           </span>
         )}
         <hr className="border-border my-1" />
-        <div className="text-xs">{responses[tabIndex].description}</div>
+        <div className="text-xs  text-muted-foreground">
+          {responses[tabIndex].description}
+        </div>
       </SidecarBox.Body>
     </SidecarBox.Root>
   );

package/src/lib/plugins/openapi/SchemaListView.tsx

@@ -1,10 +1,8 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { ListPlusIcon } from "lucide-react";
-import { useState } from "react";
 import { Markdown } from "../../components/Markdown.js";
 import { SchemaObject } from "../../oas/parser/index.js";
-import { Button } from "../../ui/Button.js";
-import { cn } from "../../util/cn.js";
+import { objectEntries } from "../../util/objectEntries.js";
+import { SchemaListViewItemGroup } from "./SchemaListViewItemGroup.js";
+import { SchemaProseClasses } from "./util/prose.js";
 
 export const SchemaListView = ({
   name,
@@ -39,190 +37,25 @@ export const SchemaListView = ({
   );
 
   return (
-    <div
-      className={cn(
-        "not-prose",
-        level > 0 && "border border-border rounded text-sm",
-      )}
-    >
+    <div className="flex flex-col gap-2.5">
       {(schema.title ?? name) && (
         <div className="ml-2 my-1 font-bold">{schema.title ?? name}</div>
       )}
       {level === 0 && schema.description && (
-        <p className="prose">{schema.description}</p>
-      )}
-      <ul>
-        {Object.entries(groups).map(([group, properties]) => {
-          return (
-            <SchemaListViewItemGroup
-              key={group}
-              defaultOpen={defaultOpen}
-              group={group as any}
-              nestingLevel={level}
-              properties={properties}
-              required={schema.required ?? []}
-            />
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-const SchemaListViewItemGroup = ({
-  group,
-  properties,
-  nestingLevel,
-  required,
-  defaultOpen = false,
-}: {
-  group: "optional" | "required" | "deprecated";
-  defaultOpen?: boolean;
-  properties: [string, SchemaObject][];
-  nestingLevel: number;
-  required: string[];
-}) => {
-  const notCollapsible =
-    defaultOpen ||
-    group === "required" ||
-    properties.length === 1 ||
-    nestingLevel === 0;
-  const [open, setOpen] = useState(notCollapsible);
-  if (properties.length === 0) {
-    return;
-  }
-
-  return (
-    <Collapsible.Root
-      className="CollapsibleRoot"
-      open={open}
-      onOpenChange={setOpen}
-    >
-      {!open && (
-        <Collapsible.Trigger
-          className={cn(
-            "py-2 hover:bg-muted w-full",
-            group === "optional" && "font-semibold",
-            group === "deprecated" && "text-muted-foreground",
-          )}
-        >
-          {properties.length} {group} fields
-        </Collapsible.Trigger>
+        <Markdown className={SchemaProseClasses} content={schema.description} />
       )}
-
-      <Collapsible.Content>
-        {properties.map(([propertyName, property]) => (
-          <SchemaListViewItem
-            key={propertyName}
-            property={property}
-            propertyName={propertyName}
-            nestingLevel={nestingLevel}
-            isRequired={required.includes(propertyName)}
+      <ul className="border-border border rounded overflow-hidden">
+        {objectEntries(groups).map(([group, properties]) => (
+          <SchemaListViewItemGroup
+            key={group}
+            defaultOpen={defaultOpen}
+            group={group}
+            nestingLevel={level}
+            properties={properties ?? []}
+            required={schema.required ?? []}
           />
         ))}
-      </Collapsible.Content>
-    </Collapsible.Root>
-  );
-};
-
-const SchemaListViewItem = ({
-  propertyName,
-  property,
-  nestingLevel,
-  isRequired,
-}: {
-  propertyName: string;
-  isRequired: boolean;
-  property: SchemaObject;
-  nestingLevel: number;
-}) => {
-  return (
-    <div
-      key={propertyName}
-      className={cn(
-        nestingLevel > 0 ? "py-2" : "py-4",
-        "px-2 border-t border-border bg-border/20 hover:bg-border/30 flex gap-1 flex-col text-sm",
-        property.deprecated && "opacity-50",
-      )}
-    >
-      <div className="flex items-center gap-2 relative">
-        <code>
-          {propertyName} {property.title}
-        </code>
-
-        {property.type && (
-          <span className="text-xs text-muted-foreground">{property.type}</span>
-        )}
-        {property.deprecated && (
-          <span className="text-xs text-muted-foreground">Deprecated</span>
-        )}
-        {!isRequired && (
-          <span className="py-px px-1.5 font-medium text-xs border border-border rounded-lg">
-            optional {property.required}
-          </span>
-        )}
-      </div>
-      {property.description && (
-        <Markdown
-          content={property.description}
-          className="text-sm leading-normal line-clamp-4 "
-        />
-      )}
-
-      {property.enum && (
-        <span className="text-sm text-muted-foreground flex gap-1 flex-wrap items-center">
-          <span>Possible values</span>
-          {property.enum
-            .filter((value) => value)
-            .map((value) => (
-              <span
-                key={value}
-                className="font-mono text-xs border-border border bg-muted rounded px-1"
-              >
-                {value}
-              </span>
-            ))
-            .slice(0, 4)}
-          {property.enum.length > 4 && (
-            <span className="font-mono text-xs border-border border bg-muted rounded px-1">
-              ...
-            </span>
-          )}
-        </span>
-      )}
-
-      <Collapsible.Root className="CollapsibleRoot" defaultOpen={false}>
-        {property.type === "object" ||
-        (property.type === "array" && property.items.type === "object") ? (
-          <Collapsible.Trigger asChild>
-            <Button variant="ghost" size="sm">
-              Show nested fields
-              <ListPlusIcon size={18} className="ml-1.5" />
-            </Button>
-          </Collapsible.Trigger>
-        ) : null}
-
-        <Collapsible.Content>
-          {property.type === "object" && (
-            <div className="mt-2.5">
-              <SchemaListView
-                schema={property}
-                level={nestingLevel + 1}
-                defaultOpen
-              />
-            </div>
-          )}
-          {property.type === "array" && property.items.type === "object" && (
-            <div className="mt-2.5">
-              <SchemaListView
-                schema={property.items}
-                defaultOpen
-                level={nestingLevel + 1}
-              />
-            </div>
-          )}
-        </Collapsible.Content>
-      </Collapsible.Root>
+      </ul>
     </div>
   );
 };

package/src/lib/plugins/openapi/SchemaListViewItem.tsx

@@ -0,0 +1,110 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ListPlusIcon } from "lucide-react";
+import { Markdown } from "../../components/Markdown.js";
+import { SchemaObject } from "../../oas/parser/index.js";
+import { Button } from "../../ui/Button.js";
+import { cn } from "../../util/cn.js";
+import { SchemaListView } from "./SchemaListView.js";
+
+export const SchemaListViewItem = ({
+  propertyName,
+  property,
+  nestingLevel,
+  isRequired,
+}: {
+  propertyName: string;
+  isRequired: boolean;
+  property: SchemaObject;
+  nestingLevel: number;
+}) => {
+  return (
+    <div
+      key={propertyName}
+      className={cn(
+        "p-4 bg-border/20 hover:bg-border/30 flex gap-1 flex-col text-sm",
+        property.deprecated && "opacity-50",
+      )}
+    >
+      <div className="flex items-center gap-2 relative">
+        <code>
+          {propertyName} {property.title}
+        </code>
+
+        {property.type && (
+          <span className="text-muted-foreground">{property.type}</span>
+        )}
+        {property.deprecated && (
+          <span className="text-muted-foreground">Deprecated</span>
+        )}
+        {!isRequired && (
+          <span className="py-px px-1.5 font-medium border border-border rounded-lg">
+            optional {property.required}
+          </span>
+        )}
+      </div>
+      {property.description && (
+        <Markdown
+          content={property.description}
+          className="text-sm leading-normal line-clamp-4 "
+        />
+      )}
+
+      {property.enum && (
+        <span className="text-sm text-muted-foreground flex gap-1 flex-wrap items-center">
+          <span>Possible values</span>
+          {/* Make values unique, some schemas have duplicates */}
+          {[...new Set(property.enum.filter((value) => value))]
+            .map((value) => (
+              <span
+                key={value}
+                className="font-mono text-xs border-border border bg-muted rounded px-1"
+              >
+                {value}
+              </span>
+            ))
+            .slice(0, 4)}
+          {property.enum.length > 4 && (
+            <span className="font-mono text-xs border-border border bg-muted rounded px-1">
+              ...
+            </span>
+          )}
+        </span>
+      )}
+
+      {(property.type === "object" &&
+        (property.properties?.length ??
+          Object.entries(property.additionalProperties ?? {}).length > 0)) ||
+      (property.type === "array" && property.items.type === "object") ? (
+        <Collapsible.Root className="CollapsibleRoot" defaultOpen={false}>
+          <Collapsible.Trigger asChild>
+            <Button variant="ghost" size="sm">
+              Show nested fields
+              <ListPlusIcon size={18} className="ml-1.5" />
+            </Button>
+          </Collapsible.Trigger>
+
+          <Collapsible.Content>
+            {property.type === "object" && (
+              <div className="mt-2.5">
+                <SchemaListView
+                  schema={property}
+                  level={nestingLevel + 1}
+                  defaultOpen
+                />
+              </div>
+            )}
+            {property.type === "array" && property.items.type === "object" && (
+              <div className="mt-2.5">
+                <SchemaListView
+                  schema={property.items}
+                  defaultOpen
+                  level={nestingLevel + 1}
+                />
+              </div>
+            )}
+          </Collapsible.Content>
+        </Collapsible.Root>
+      ) : null}
+    </div>
+  );
+};

package/src/lib/plugins/openapi/SchemaListViewItemGroup.tsx

@@ -0,0 +1,63 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { useState } from "react";
+import { SchemaObject } from "../../oas/parser/index.js";
+import { cn } from "../../util/cn.js";
+import { SchemaListViewItem } from "./SchemaListViewItem.js";
+
+export const SchemaListViewItemGroup = ({
+  group,
+  properties,
+  nestingLevel,
+  required,
+  defaultOpen = false,
+}: {
+  group: "optional" | "required" | "deprecated";
+  defaultOpen?: boolean;
+  properties: [string, SchemaObject][];
+  nestingLevel: number;
+  required: string[];
+}) => {
+  const notCollapsible =
+    defaultOpen ||
+    group === "required" ||
+    properties.length === 1 ||
+    nestingLevel === 0;
+
+  const [open, setOpen] = useState(notCollapsible);
+
+  if (properties.length === 0) {
+    return;
+  }
+
+  return (
+    <Collapsible.Root
+      className="CollapsibleRoot"
+      open={open}
+      onOpenChange={setOpen}
+    >
+      {!open && (
+        <Collapsible.Trigger
+          className={cn(
+            "py-2 hover:bg-muted w-full",
+            group === "optional" && "font-semibold",
+            group === "deprecated" && "text-muted-foreground",
+          )}
+        >
+          {properties.length} {group} fields
+        </Collapsible.Trigger>
+      )}
+
+      <Collapsible.Content className="divide-y divide-border">
+        {properties.map(([propertyName, property]) => (
+          <SchemaListViewItem
+            key={propertyName}
+            property={property}
+            propertyName={propertyName}
+            nestingLevel={nestingLevel}
+            isRequired={required.includes(propertyName)}
+          />
+        ))}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

package/src/lib/plugins/openapi/Sidecar.tsx

@@ -1,16 +1,17 @@
 import { HTTPSnippet } from "@zudoku/httpsnippet";
-import { Fragment, useMemo, useState } from "react";
+import { Fragment, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
 import { ColorizedParam } from "./ColorizedParam.js";
-import { MakeRequest } from "./MakeRequest.js";
 import { MethodTextColorMap } from "./MethodBadge.js";
 import type { OperationListItemResult } from "./OperationList.js";
+import { PlaygroundDialogWrapper } from "./PlaygroundDialogWrapper.js";
 import { RequestBodySidecarBox } from "./RequestBodySidecarBox.js";
 import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
-import { Select } from "./Select.js";
 import * as SidecarBox from "./SidecarBox.js";
+import { SimpleSelect } from "./SimpleSelect.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 
 const getConverted = (snippet: HTTPSnippet, option: string) => {
@@ -64,7 +65,10 @@ export const Sidecar = ({
 }) => {
   const methodTextColor =
     MethodTextColorMap[operation.method as keyof typeof MethodTextColorMap];
-  const [option, setOption] = useState("curl");
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedLang = searchParams.get("lang") ?? "shell";
+
   const requestBodyContent = operation.requestBody?.content;
 
   const path = operation.path.split("/").map((part) => (
@@ -105,8 +109,8 @@ export const Sidecar = ({
       } as never, // 👈 never touch this
     );
 
-    return getConverted(snippet, option);
-  }, [option, operation.method, operation.path, requestBodyContent]);
+    return getConverted(snippet, selectedLang);
+  }, [selectedLang, operation.method, operation.path, requestBodyContent]);
 
   return (
     <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
@@ -120,9 +124,10 @@ export const Sidecar = ({
             {path}
           </span>
           <div className="flex gap-2 items-center">
-            <Select
+            <SimpleSelect
               className="self-start"
-              onChange={(e) => setOption(e.target.value)}
+              value={selectedLang}
+              onChange={(e) => setSearchParams({ lang: e.target.value })}
               options={[
                 { value: "shell", label: "cURL" },
                 { value: "js", label: "Javascript" },
@@ -137,12 +142,12 @@ export const Sidecar = ({
                 { value: "swift", label: "Swift" },
               ]}
             />
-            <MakeRequest operation={operation} />
+            <PlaygroundDialogWrapper operation={operation} />
           </div>
         </SidecarBox.Head>
         <SidecarBox.Body>
           <SyntaxHighlight
-            language={option}
+            language={selectedLang}
             noBackground
             className="text-xs"
             code={code}

package/src/lib/plugins/openapi/{Select.tsx → SimpleSelect.tsx}

@@ -2,12 +2,14 @@ import type { ChangeEventHandler } from "react";
 import { ChevronsUpDownIcon } from "../../core/icons.js";
 import { cn } from "../../util/cn.js";
 
-export const Select = ({
+export const SimpleSelect = ({
+  value,
   onChange,
   className,
   options,
 }: {
-  onChange?: ChangeEventHandler<HTMLSelectElement>;
+  value: string;
+  onChange: ChangeEventHandler<HTMLSelectElement>;
   className?: string;
   options: {
     value: string;
@@ -20,6 +22,7 @@ export const Select = ({
         "row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
         "rounded-md appearance-none bg-zinc-50 hover:bg-white dark:bg-zinc-800 hover:dark:bg-zinc-800/75",
       )}
+      value={value}
       onChange={onChange}
     >
       {options.map((option) => (

package/src/lib/plugins/openapi/index.tsx

@@ -15,7 +15,6 @@ import {
 } from "./util/urql.js";
 
 import { createSharedWorkerClient } from "virtual:zudoku-openapi-worker";
-import type { createSharedWorkerClient as createSharedWorkerClientType } from "./worker/createSharedWorkerClient.js";
 
 const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
   undefined,
@@ -85,11 +84,25 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
         url: config.server,
         exchanges: [cacheExchange, fetchExchange],
       })
-    : (createSharedWorkerClient() as ReturnType<
-        typeof createSharedWorkerClientType
-      >);
+    : createSharedWorkerClient();
 
   return {
+    getHead: () => {
+      if (config.type === "url") {
+        return (
+          <link
+            rel="preload"
+            href={config.input}
+            as="fetch"
+            crossOrigin="anonymous"
+          />
+        );
+      }
+
+      if (config.server) {
+        return <link rel="preconnect" href={config.server} />;
+      }
+    },
     getNavigation: async (path: string) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];

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

@@ -1,53 +1,80 @@
-import { XIcon } from "lucide-react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+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 type { Header, PlaygroundForm } from "./Playground.js";
+import { NO_IDENTITY, type PlaygroundForm } from "./Playground.js";
 
 export const Headers = ({
   control,
   register,
-  headers,
 }: {
   register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
-  headers: Header[];
 }) => {
   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) => (
-        <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"
-        >
-          <InlineInput
-            {...register(`headers.${i}.name`)}
-            placeholder="Name"
-            className="peer"
-            autoComplete="off"
-          />
-          <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"
+      {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
+            }
           >
-            <XIcon size={16} />
-          </button>
-          <div className="col-span-full border-b border-border"></div>
-        </div>
-      ))}
+            <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: "" })}