zudoku 0.9.0 → 0.11.0

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

@@ -7,6 +7,7 @@ export const SimpleSelect = ({
   onChange,
   className,
   options,
+  showChevrons = true,
 }: {
   value: string;
   onChange: ChangeEventHandler<HTMLSelectElement>;
@@ -15,12 +16,14 @@ export const SimpleSelect = ({
     value: string;
     label: string;
   }[];
+  showChevrons?: boolean;
 }) => (
-  <div className={cn("grid", className)}>
+  <div className="grid">
     <select
       className={cn(
         "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",
+        className,
       )}
       value={value}
       onChange={onChange}
@@ -31,7 +34,12 @@ export const SimpleSelect = ({
         </option>
       ))}
     </select>
-    <div className="row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none">
+    <div
+      className={cn(
+        !showChevrons && "hidden",
+        "row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none",
+      )}
+    >
       <ChevronsUpDownIcon size={14} />
     </div>
   </div>

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -13,11 +13,13 @@ import * as types from "./graphql.js";
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
+  "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
+    types.ServersQueryDocument,
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
-  "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n":
+  "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.GetServerQueryDocument,
   "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
     types.GetCategoriesDocument,
@@ -37,6 +39,12 @@ const documents = {
  */
 export function graphql(source: string): unknown;
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -53,8 +61,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n",
-): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n"];
+  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -119,7 +119,7 @@ export type RequestBodyObject = {
 export type ResponseItem = {
   __typename?: "ResponseItem";
   content?: Maybe<Array<MediaTypeObject>>;
-  description: Scalars["String"]["output"];
+  description?: Maybe<Scalars["String"]["output"]>;
   headers?: Maybe<Scalars["JSON"]["output"]>;
   links?: Maybe<Scalars["JSON"]["output"]>;
   statusCode: Scalars["String"]["output"];
@@ -131,6 +131,7 @@ export type Schema = {
   openapi: Scalars["String"]["output"];
   operations: Array<OperationItem>;
   paths: Array<PathItem>;
+  servers: Array<Server>;
   tags: Array<SchemaTag>;
   title: Scalars["String"]["output"];
   url: Scalars["String"]["output"];
@@ -155,7 +156,13 @@ export type SchemaTag = {
   operations: Array<OperationItem>;
 };
 
-export type SchemaType = "file" | "url";
+export type SchemaType = "file" | "raw" | "url";
+
+export type Server = {
+  __typename?: "Server";
+  description?: Maybe<Scalars["String"]["output"]>;
+  url: Scalars["String"]["output"];
+};
 
 export type TagItem = {
   __typename?: "TagItem";
@@ -163,6 +170,20 @@ export type TagItem = {
   name: Scalars["String"]["output"];
 };
 
+export type ServersQueryQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type ServersQueryQuery = {
+  __typename?: "Query";
+  schema: {
+    __typename?: "Schema";
+    url: string;
+    servers: Array<{ __typename?: "Server"; url: string }>;
+  };
+};
+
 export type OperationsFragmentFragment = {
   __typename?: "OperationItem";
   slug: string;
@@ -204,7 +225,7 @@ export type OperationsFragmentFragment = {
     __typename?: "ResponseItem";
     statusCode: string;
     links?: any | null;
-    description: string;
+    description?: string | null;
     content?: Array<{
       __typename?: "MediaTypeObject";
       mediaType: string;
@@ -249,7 +270,11 @@ export type GetServerQueryQueryVariables = Exact<{
 
 export type GetServerQueryQuery = {
   __typename?: "Query";
-  schema: { __typename?: "Schema"; url: string };
+  schema: {
+    __typename?: "Schema";
+    url: string;
+    servers: Array<{ __typename?: "Server"; url: string }>;
+  };
 };
 
 export type GetCategoriesQueryVariables = Exact<{
@@ -423,6 +448,83 @@ export const OperationsFragmentFragmentDoc = {
     },
   ],
 } as unknown as DocumentNode<OperationsFragmentFragment, unknown>;
+export const ServersQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "ServersQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "input" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "JSON" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "type" } },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "SchemaType" },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "schema" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "input" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "input" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "type" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "type" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "url" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "servers" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "url" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<ServersQueryQuery, ServersQueryQueryVariables>;
 export const AllOperationsDocument = {
   kind: "Document",
   definitions: [
@@ -727,6 +829,16 @@ export const GetServerQueryDocument = {
               kind: "SelectionSet",
               selections: [
                 { kind: "Field", name: { kind: "Name", value: "url" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "servers" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "url" } },
+                    ],
+                  },
+                },
               ],
             },
           },

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,4 +1,7 @@
-type OasSource = { type: "url"; input: string } | { type: "file"; input: any };
+type OasSource =
+  | { type: "url"; input: string }
+  | { type: "file"; input: any }
+  | { type: "raw"; input: string };
 
 export type OasPluginConfig = {
   server?: string;

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

@@ -1,6 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
-import { Fragment, useEffect, useRef } from "react";
+import { Fragment, useEffect, useRef, useTransition } from "react";
 import { FormProvider, useForm } from "react-hook-form";
+import { useSelectedServerStore } from "../../../authentication/state.js";
 import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
 import {
   Select,
@@ -62,6 +63,7 @@ export type PlaygroundForm = {
 
 export type PlaygroundContentProps = {
   server: string;
+  servers?: string[];
   url: string;
   method: string;
   headers?: Header[];
@@ -72,6 +74,7 @@ export type PlaygroundContentProps = {
 
 export const Playground = ({
   server,
+  servers,
   url,
   method,
   headers = [],
@@ -79,6 +82,8 @@ export const Playground = ({
   pathParams = [],
   defaultBody = "",
 }: PlaygroundContentProps) => {
+  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+  const [, startTransition] = useTransition();
   const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
@@ -114,7 +119,7 @@ export const Playground = ({
 
   const queryMutation = useMutation({
     mutationFn: async (data: PlaygroundForm) => {
-      const requestUrl = createUrl(server, url, data);
+      const requestUrl = createUrl(selectedServer ?? server, url, data);
       const start = performance.now();
 
       const request = new Request(requestUrl, {
@@ -200,19 +205,48 @@ export const Playground = ({
       </Fragment>
     ));
 
+  const serverSelect = (
+    <div className="inline-block opacity-50 hover:opacity-100 transition">
+      {servers && servers.length > 1 ? (
+        <Select
+          onValueChange={(value) => {
+            startTransition(() => {
+              setSelectedServer(value);
+            });
+          }}
+          value={selectedServer}
+        >
+          <SelectTrigger className="p-0 border-none flex-row-reverse bg-transparent text-xs gap-0.5 h-auto">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {servers.map((s) => (
+              <SelectItem key={s} value={s}>
+                {s.replace(/^https?:\/\//, "")}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ) : (
+        <span>{server.replace(/^https?:\/\//, "")}</span>
+      )}
+    </div>
+  );
+
   return (
     <FormProvider
       {...{ register, control, handleSubmit, watch, setValue, ...form }}
     >
       <form onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}>
-        <div className="grid grid-cols-2 text-sm h-full">
+        <div className="grid grid-cols-[8fr_7fr] text-sm h-full">
           <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">
             <div className="flex gap-2 items-stretch">
               <div className="flex flex-1 items-center w-full border rounded-md">
                 <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
                   {method.toUpperCase()}
                 </div>
-                <div className="p-2 font-mono text-xs">
+                <div className="flex items-center flex-wrap p-2 font-mono text-xs">
+                  {serverSelect}
                   {path}
                   {urlQueryParams.length > 0 ? "?" : ""}
                   {urlQueryParams}

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -8,7 +8,12 @@ export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
     return value ?? match;
   });
 
-  const url = new URL(filledPath, host);
+  // Ensure host ends with a slash and path doesn't start with one,
+  // so they form a correct URL, without overriding the host's path.
+  const url = new URL(
+    filledPath.replace(/^\//, ""),
+    host.endsWith("/") ? host : `${host}/`,
+  );
 
   data.queryParams
     .filter((param) => param.active)

package/dist/lib/util/slugify.d.ts

@@ -1,2 +0,0 @@
-import slugify from "slugify";
-export default slugify;

package/dist/lib/util/slugify.js

@@ -1,3 +0,0 @@
-import slugify from "slugify";
-export default slugify;
-//# sourceMappingURL=slugify.js.map

package/dist/lib/util/slugify.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slugify.js","sourceRoot":"","sources":["../../../src/lib/util/slugify.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,eAAe,OAAO,CAAC"}

package/dist/vite/plugin-icons.d.ts

@@ -1,3 +0,0 @@
-import type { Plugin } from "vite";
-export declare const replaceSidebarIcons: (code: string) => string;
-export declare const viteIconsPlugin: () => Plugin;

package/dist/vite/plugin-icons.js

@@ -1,47 +0,0 @@
-import matter from "gray-matter";
-import { readFile } from "node:fs/promises";
-const matchIconAnnotation = /"icon":\s*"(.*?)"/g;
-const toPascalCase = (str) => str.replace(/(^\w|-\w)/g, (match) => match.replace("-", "").toUpperCase());
-export const replaceSidebarIcons = (code) => {
-    const collectedIcons = new Set();
-    let match;
-    while ((match = matchIconAnnotation.exec(code)) !== null) {
-        collectedIcons.add(match[1]);
-    }
-    const importStatement = `import { ${[...collectedIcons].map(toPascalCase).join(", ")} } from "zudoku/icons";`;
-    const replacedString = code.replaceAll(matchIconAnnotation, 
-    // The element will be created by the implementers side
-    (_, iconName) => `"icon": ${toPascalCase(iconName)}`);
-    return `${importStatement}export const configuredSidebar = ${replacedString};`;
-};
-// This plugin is responsible to restart the dev server when a sidebar icon is changed inside a markdown file.
-export const viteIconsPlugin = () => {
-    const iconMap = new Map();
-    return {
-        enforce: "pre",
-        name: "zudoku-icons-plugin",
-        configureServer: ({ watcher, restart }) => {
-            watcher.on("change", async (filePath) => {
-                if (/\.mdx?$/.test(filePath)) {
-                    const code = await readFile(filePath, "utf-8");
-                    const { sidebar_icon: sidebarIcon } = matter(code).data;
-                    const previousIcon = iconMap.get(filePath);
-                    if ((!previousIcon && sidebarIcon) ||
-                        (previousIcon && !sidebarIcon) ||
-                        previousIcon !== sidebarIcon) {
-                        await restart();
-                    }
-                    iconMap.set(filePath, sidebarIcon);
-                }
-            });
-        },
-        async load(id) {
-            if (/\.mdx?$/.test(id)) {
-                const code = await readFile(id, "utf-8");
-                const { sidebar_icon: sidebarIcon } = matter(code).data;
-                iconMap.set(id, sidebarIcon);
-            }
-        },
-    };
-};
-//# sourceMappingURL=plugin-icons.js.map

package/dist/vite/plugin-icons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"plugin-icons.js","sourceRoot":"","sources":["../../src/vite/plugin-icons.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEjD,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE,CACnC,GAAG,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,EAAE;IAClD,MAAM,cAAc,GAAG,IAAI,GAAG,EAAU,CAAC;IAEzC,IAAI,KAAK,CAAC;IACV,OAAO,CAAC,KAAK,GAAG,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;QACzD,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM,eAAe,GAAG,YAAY,CAAC,GAAG,cAAc,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC;IAC9G,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CACpC,mBAAmB;IACnB,uDAAuD;IACvD,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,WAAW,YAAY,CAAC,QAAQ,CAAC,EAAE,CACrD,CAAC;IAEF,OAAO,GAAG,eAAe,oCAAoC,cAAc,GAAG,CAAC;AACjF,CAAC,CAAC;AAEF,8GAA8G;AAC9G,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE;IAC1C,MAAM,OAAO,GAAG,IAAI,GAAG,EAAyB,CAAC;IAEjD,OAAO;QACL,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,qBAAqB;QAC3B,eAAe,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE;YACxC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBACtC,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC7B,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;oBAC/C,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;oBACxD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;oBAE3C,IACE,CAAC,CAAC,YAAY,IAAI,WAAW,CAAC;wBAC9B,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC;wBAC9B,YAAY,KAAK,WAAW,EAC5B,CAAC;wBACD,MAAM,OAAO,EAAE,CAAC;oBAClB,CAAC;oBAED,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;gBACrC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QACD,KAAK,CAAC,IAAI,CAAC,EAAE;YACX,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACvB,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;gBACzC,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;gBACxD,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC,CAAC"}