zudoku 0.25.0 → 0.25.1

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

@@ -1,13 +1,25 @@
 import * as Tabs from "@radix-ui/react-tabs";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
-import { type SchemaObject } from "../../oas/graphql/index.js";
 import { cn } from "../../util/cn.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
+import { useSidecarExamples } from "./ExampleDisplay.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { generateSchemaExample } from "./util/generateSchemaExample.js";
 
 type Responses = OperationListItemResult["responses"];
+
+const ResponseContent = ({ response }: { response: Responses[number] }) => {
+  const { SidecarBody, SidebarFooter, hasContent } = useSidecarExamples({
+    content: response.content ?? [],
+    description: response.description ?? undefined,
+  });
+
+  return (
+    <Tabs.Content value={response.statusCode}>
+      <SidecarBody />
+      {hasContent && <SidebarFooter />}
+    </Tabs.Content>
+  );
+};
+
 export const ResponsesSidecarBox = ({
   responses,
   selectedResponse,
@@ -16,62 +28,36 @@ export const ResponsesSidecarBox = ({
   responses: Responses;
   selectedResponse?: string;
   onSelectResponse: (response: string) => void;
-}) => (
-  <SidecarBox.Root>
-    <Tabs.Root
-      defaultValue={responses[0]?.statusCode}
-      value={selectedResponse}
-      onValueChange={(value) => onSelectResponse(value)}
-    >
-      <SidecarBox.Head className="text-xs flex flex-col gap-2 pb-0">
-        <span className="font-mono">Example Responses</span>
-        <Tabs.List className="flex gap-2">
-          {responses.map((response) => (
-            <Tabs.Trigger
-              key={response.statusCode}
-              value={response.statusCode}
-              className={cn(
-                "text-xs font-mono px-1.5 py-1 pb-px translate-y-px border-b-2 border-transparent rounded-t cursor-pointer",
-                "data-[state=active]:text-primary data-[state=active]:dark:text-inherit data-[state=active]:border-primary",
-                "hover:border-accent-foreground/25",
-              )}
-            >
-              {response.statusCode}
-            </Tabs.Trigger>
-          ))}
-        </Tabs.List>
-      </SidecarBox.Head>
-      {responses.map((response) => {
-        const firstContent = response.content?.at(0);
-
-        const example =
-          firstContent?.examples?.at(0)?.value ??
-          (firstContent?.schema
-            ? generateSchemaExample(firstContent.schema as SchemaObject)
-            : "");
-
-        return (
-          <Tabs.Content key={response.statusCode} value={response.statusCode}>
-            <SidecarBox.Body className="p-0">
-              <CollapsibleCode>
-                <SyntaxHighlight
-                  language={example ? "json" : "plain"}
-                  noBackground
-                  className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
-                  code={
-                    example
-                      ? JSON.stringify(example, null, 2)
-                      : "Empty response"
-                  }
-                />
-              </CollapsibleCode>
-            </SidecarBox.Body>
-            <SidecarBox.Footer className="flex justify-end text-xs">
-              {response.description}
-            </SidecarBox.Footer>
-          </Tabs.Content>
-        );
-      })}
-    </Tabs.Root>
-  </SidecarBox.Root>
-);
+}) => {
+  return (
+    <SidecarBox.Root>
+      <Tabs.Root
+        defaultValue={responses[0]?.statusCode}
+        value={selectedResponse}
+        onValueChange={(value) => onSelectResponse(value)}
+      >
+        <SidecarBox.Head className="text-xs flex flex-col gap-2 pb-0">
+          <span className="font-mono">Example Responses</span>
+          <Tabs.List className="flex gap-2">
+            {responses.map((response) => (
+              <Tabs.Trigger
+                key={response.statusCode}
+                value={response.statusCode}
+                className={cn(
+                  "text-xs font-mono px-1.5 py-1 pb-px translate-y-px border-b-2 border-transparent rounded-t cursor-pointer",
+                  "data-[state=active]:text-primary data-[state=active]:dark:text-inherit data-[state=active]:border-primary",
+                  "hover:border-accent-foreground/25",
+                )}
+              >
+                {response.statusCode}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+        </SidecarBox.Head>
+        {responses.map((response) => (
+          <ResponseContent key={response.statusCode} response={response} />
+        ))}
+      </Tabs.Root>
+    </SidecarBox.Root>
+  );
+};

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

@@ -191,10 +191,8 @@ export const Sidecar = ({
           </span>
           {isOnScreen && (
             <PlaygroundDialogWrapper
-              server={result.data.schema.url ?? ""}
-              servers={
-                result.data.schema.servers.map((server) => server.url) ?? []
-              }
+              server={result.data.schema.url}
+              servers={result.data.schema.servers.map((server) => server.url)}
               operation={operation}
             />
           )}

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

@@ -151,6 +151,7 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
               badge: {
                 label: operation.method,
                 color: MethodColorMap[operation.method.toLowerCase()]!,
+                invert: true,
               },
             })),
           }));

package/lib/AuthenticationPlugin-DVLEc6cm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AuthenticationPlugin-DVLEc6cm.js","sources":["../src/lib/authentication/components/SignIn.tsx","../src/lib/authentication/components/SignOut.tsx","../src/lib/authentication/components/SignUp.tsx","../src/lib/authentication/AuthenticationPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useSearchParams } from \"react-router\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignIn = () => {\n  const context = useZudoku();\n  const [search] = useSearchParams();\n  useEffect(() => {\n    void context.authentication?.signIn({\n      redirectTo: search.get(\"redirect\") ?? undefined,\n    });\n  }, [context.authentication, search]);\n\n  return null;\n};\n","import { useEffect } from \"react\";\nimport { useNavigate } from \"react-router\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignOut = () => {\n  const context = useZudoku();\n  const navigate = useNavigate();\n  useEffect(() => {\n    void context.authentication?.signOut().then(() => navigate(\"/\"));\n  }, [navigate, context.authentication]);\n\n  return null;\n};\n","import { useEffect } from \"react\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignUp = () => {\n  const context = useZudoku();\n  useEffect(() => {\n    void (context.authentication?.signUp() ?? context.authentication?.signIn());\n  }, [context.authentication]);\n\n  return null;\n};\n","import { LogOutIcon } from \"lucide-react\";\nimport {\n  CommonPlugin,\n  NavigationPlugin,\n  ProfileMenuPlugin,\n} from \"../core/plugins.js\";\nimport { SignIn } from \"./components/SignIn.js\";\nimport { SignOut } from \"./components/SignOut.js\";\nimport { SignUp } from \"./components/SignUp.js\";\n\ntype PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;\n\nexport class AuthenticationPlugin implements PluginInterface {\n  getRoutes() {\n    return [\n      {\n        path: \"/signout\",\n        element: <SignOut />,\n      },\n      {\n        path: \"/signin\",\n        element: <SignIn />,\n      },\n      {\n        path: \"/signup\",\n        element: <SignUp />,\n      },\n    ];\n  }\n\n  getProfileMenuItems() {\n    return [\n      {\n        label: \"Logout\",\n        path: \"/signout\",\n        category: \"bottom\",\n        icon: LogOutIcon,\n      } as const,\n    ];\n  }\n}\n"],"names":["SignIn","context","useZudoku","search","useSearchParams","useEffect","_a","SignOut","navigate","useNavigate","SignUp","_b","AuthenticationPlugin","LogOutIcon"],"mappings":";;;;;AAIO,MAAMA,IAAS,MAAM;AAC1B,QAAMC,IAAUC,EAAU,GACpB,CAACC,CAAM,IAAIC,EAAgB;AACjC,SAAAC,EAAU,MAAM;;AACT,KAAAC,IAAAL,EAAQ,mBAAR,QAAAK,EAAwB,OAAO;AAAA,MAClC,YAAYH,EAAO,IAAI,UAAU,KAAK;AAAA,IAAA;AAAA,EAEvC,GAAA,CAACF,EAAQ,gBAAgBE,CAAM,CAAC,GAE5B;AACT,GCVaI,IAAU,MAAM;AAC3B,QAAMN,IAAUC,EAAU,GACpBM,IAAWC,EAAY;AAC7B,SAAAJ,EAAU,MAAM;;AACT,KAAAC,IAAAL,EAAQ,mBAAR,QAAAK,EAAwB,UAAU,KAAK,MAAME,EAAS,GAAG;AAAA,EAC7D,GAAA,CAACA,GAAUP,EAAQ,cAAc,CAAC,GAE9B;AACT,GCTaS,IAAS,MAAM;AAC1B,QAAMT,IAAUC,EAAU;AAC1B,SAAAG,EAAU,MAAM;;AACd,MAAMC,IAAAL,EAAQ,mBAAR,gBAAAK,EAAwB,eAAYK,IAAAV,EAAQ,mBAAR,QAAAU,EAAwB;AAAA,EAAO,GACxE,CAACV,EAAQ,cAAc,CAAC,GAEpB;AACT;ACEO,MAAMW,EAAgD;AAAA,EAC3D,YAAY;AACH,WAAA;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,+BAAUL,GAAQ,CAAA,CAAA;AAAA,MACpB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,+BAAUP,GAAO,CAAA,CAAA;AAAA,MACnB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,+BAAUU,GAAO,CAAA,CAAA;AAAA,MAAA;AAAA,IAErB;AAAA,EAAA;AAAA,EAGF,sBAAsB;AACb,WAAA;AAAA,MACL;AAAA,QACE,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,MAAMG;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA;AAEJ;"}