zudoku 0.18.8 → 0.19.0

package/lib/zudoku.openapi-worker.js

@@ -2,7 +2,7 @@ const o = () => {
   const r = new SharedWorker(
     new URL(
       /* @vite-ignore */
-      "./assets/worker-CyxLedqF.js",
+      "./assets/worker-C_2va8B8.js",
       import.meta.url
     ),
     { type: "module" }

package/lib/zudoku.plugin-api-catalog.js

@@ -0,0 +1,121 @@
+import { j as e } from "./jsx-runtime-B6kdoens.js";
+import { s as n } from "./index-LNp6rxyU.js";
+import { Fragment as x } from "react";
+import { Head as f, Link as h } from "./zudoku.components.js";
+import { M as u } from "./Markdown-ievDDhFT.js";
+import { u as j } from "./useExposedProps-CTPtylCV.js";
+const b = ({
+  items: l,
+  categories: i,
+  label: o = "API Library"
+}) => {
+  const { searchParams: c, setSearchParams: m } = j(), t = c.get("category");
+  return /* @__PURE__ */ e.jsxs("section", { className: "pt-[--padding-content-top] pb-[--padding-content-bottom]", children: [
+    /* @__PURE__ */ e.jsx(f, { children: /* @__PURE__ */ e.jsx("title", { children: o }) }),
+    /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-12 gap-12", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-4 col-span-3 px-4 not-prose sticky top-48", children: /* @__PURE__ */ e.jsx("div", { className: "justify-between", children: i.map((s, a) => /* @__PURE__ */ e.jsxs(x, { children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between mb-2.5", children: [
+          /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: s.label }),
+          a === 0 && t && /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-end text-sm mr-8 text-foreground/60 hover:text-foreground",
+              onClick: () => m({}),
+              children: "Clear"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsx("ul", { className: "space-y-1 [&>li]:py-2", children: Array.from(
+          new Set(
+            s.tags.map((r) => ({
+              tag: r,
+              count: l.filter(
+                (d) => d.categories.find((p) => p.tags.includes(r))
+              ).length
+            })).map(({ tag: r, count: d }) => /* @__PURE__ */ e.jsxs(
+              "li",
+              {
+                className: `flex px-4 rounded-lg -translate-x-4 justify-between text-sm cursor-pointer hover:text-primary transition ${n(r) === t ? "font-medium bg-border/30 rounded" : ""}`,
+                onClick: () => m({
+                  category: n(s.label + " " + r)
+                }),
+                children: [
+                  /* @__PURE__ */ e.jsx("span", { children: r }),
+                  /* @__PURE__ */ e.jsx(
+                    "span",
+                    {
+                      className: `flex items-center justify-center border rounded-md w-8 text-xs font-semibold ${n(r) === t ? "bg-primary border-primary text-primary-foreground" : ""}`,
+                      children: d
+                    }
+                  )
+                ]
+              },
+              n(s.label + " " + r)
+            ))
+          )
+        ) })
+      ] }, s.label)) }) }),
+      /* @__PURE__ */ e.jsxs("div", { className: "col-span-9", children: [
+        /* @__PURE__ */ e.jsx("h3", { className: "mt-0 text-2xl font-bold mb-4", children: o }),
+        /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-2 gap-4", children: l.filter(
+          (s) => !t || s.categories.find(
+            (a) => a.tags.find(
+              (r) => n(a.label + " " + r) === t
+            )
+          )
+        ).map((s, a) => /* @__PURE__ */ e.jsx(
+          h,
+          {
+            to: {
+              pathname: `/${s.path}`,
+              search: t ? `category=${t}` : ""
+            },
+            className: "no-underline hover:!text-foreground",
+            children: /* @__PURE__ */ e.jsxs(
+              "div",
+              {
+                className: "border h-full rounded p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal",
+                children: [
+                  /* @__PURE__ */ e.jsx("span", { className: "font-semibold", children: s.label }),
+                  /* @__PURE__ */ e.jsx(
+                    u,
+                    {
+                      className: "text-sm whitespace-pre-wrap mb-6 line-clamp-2",
+                      content: s.description
+                    }
+                  )
+                ]
+              },
+              a
+            )
+          },
+          s.path
+        )) })
+      ] })
+    ] })
+  ] });
+}, k = ({
+  navigationId: l,
+  items: i,
+  label: o,
+  categories: c
+}) => ({
+  getRoutes: () => [
+    {
+      path: l,
+      element: /* @__PURE__ */ e.jsx(
+        b,
+        {
+          label: o,
+          items: i,
+          categories: c ?? []
+        }
+      )
+    }
+  ]
+});
+export {
+  k as apiCatalogPlugin
+};
+//# sourceMappingURL=zudoku.plugin-api-catalog.js.map

package/lib/zudoku.plugin-api-catalog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zudoku.plugin-api-catalog.js","sources":["../src/lib/plugins/api-catalog/Catalog.tsx","../src/lib/plugins/api-catalog/index.tsx"],"sourcesContent":["import slugify from \"@sindresorhus/slugify\";\nimport { Fragment } from \"react\";\nimport { Head, Link } from \"zudoku/components\";\nimport { Markdown } from \"../../components/Markdown.js\";\nimport { useExposedProps } from \"../../util/useExposedProps.js\";\nimport type { ApiCatalogItem, CatalogCategory } from \"./index.js\";\n\nexport const Catalog = ({\n  items,\n  categories,\n  label = \"API Library\",\n}: {\n  label: string;\n  items: ApiCatalogItem[];\n  categories: CatalogCategory[];\n}) => {\n  const { searchParams, setSearchParams } = useExposedProps();\n  const activeCategory = searchParams.get(\"category\");\n  return (\n    <section className=\"pt-[--padding-content-top] pb-[--padding-content-bottom]\">\n      <Head>\n        <title>{label}</title>\n      </Head>\n      <div className=\"grid grid-cols-12 gap-12\">\n        <div className=\"flex flex-col gap-4 col-span-3 px-4 not-prose sticky top-48\">\n          <div className=\"justify-between\">\n            {categories.map((category, idx) => (\n              <Fragment key={category.label}>\n                <div className=\"flex justify-between mb-2.5\">\n                  <span className=\"font-medium text-sm\">{category.label}</span>\n                  {idx === 0 && activeCategory && (\n                    <button\n                      type=\"button\"\n                      className=\"text-end text-sm mr-8 text-foreground/60 hover:text-foreground\"\n                      onClick={() => setSearchParams({})}\n                    >\n                      Clear\n                    </button>\n                  )}\n                </div>\n                <ul className=\"space-y-1 [&>li]:py-2\">\n                  {Array.from(\n                    new Set(\n                      category.tags\n                        .map((tag) => ({\n                          tag,\n                          count: items.filter((api) =>\n                            api.categories.find((c) => c.tags.includes(tag)),\n                          ).length,\n                        }))\n                        .map(({ tag, count }) => (\n                          <li\n                            key={slugify(category.label + \" \" + tag)}\n                            className={`flex px-4 rounded-lg -translate-x-4 justify-between text-sm cursor-pointer hover:text-primary transition ${\n                              slugify(tag) === activeCategory\n                                ? \"font-medium bg-border/30 rounded\"\n                                : \"\"\n                            }`}\n                            onClick={() =>\n                              setSearchParams({\n                                category: slugify(category.label + \" \" + tag),\n                              })\n                            }\n                          >\n                            <span>{tag}</span>\n                            <span\n                              className={`flex items-center justify-center border rounded-md w-8 text-xs font-semibold ${\n                                slugify(tag) === activeCategory\n                                  ? \"bg-primary border-primary text-primary-foreground\"\n                                  : \"\"\n                              }`}\n                            >\n                              {count}\n                            </span>\n                          </li>\n                        )),\n                    ),\n                  )}\n                </ul>\n              </Fragment>\n            ))}\n          </div>\n        </div>\n        <div className=\"col-span-9\">\n          <h3 className=\"mt-0 text-2xl font-bold mb-4\">{label}</h3>\n\n          <div className=\"grid grid-cols-2 gap-4\">\n            {items\n              .filter(\n                (api) =>\n                  !activeCategory ||\n                  api.categories.find((c) =>\n                    c.tags.find(\n                      (t) => slugify(c.label + \" \" + t) === activeCategory,\n                    ),\n                  ),\n              )\n              .map((api, i) => (\n                <Link\n                  to={{\n                    pathname: `/${api.path}`,\n                    search: activeCategory ? `category=${activeCategory}` : \"\",\n                  }}\n                  className=\"no-underline hover:!text-foreground\"\n                  key={api.path}\n                >\n                  <div\n                    className=\"border h-full rounded p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal\"\n                    key={i}\n                  >\n                    <span className=\"font-semibold\">{api.label}</span>\n                    <Markdown\n                      className=\"text-sm whitespace-pre-wrap mb-6 line-clamp-2\"\n                      content={api.description}\n                    />\n                  </div>\n                </Link>\n              ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n","import type { ZudokuPlugin } from \"../../core/plugins.js\";\nimport { Catalog } from \"./Catalog.js\";\n\nexport type ApiCatalogItem = {\n  path: string;\n  label: string;\n  description: string;\n  categories: CatalogCategory[];\n};\n\nexport type CatalogCategory = {\n  label: string;\n  tags: string[];\n};\n\nexport type ApiCatalogPluginOptions = {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n};\n\nexport const apiCatalogPlugin = ({\n  navigationId,\n  items,\n  label,\n  categories,\n}: {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n}): ZudokuPlugin => {\n  return {\n    getRoutes: () => {\n      return [\n        {\n          path: navigationId,\n          element: (\n            <Catalog\n              label={label}\n              items={items}\n              categories={categories ?? []}\n            />\n          ),\n        },\n      ];\n    },\n  };\n};\n"],"names":["Catalog","items","categories","label","searchParams","setSearchParams","useExposedProps","activeCategory","jsxs","jsx","Head","category","idx","Fragment","tag","api","c","count","slugify","t","i","Link","Markdown","apiCatalogPlugin","navigationId"],"mappings":"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"}

package/lib/zudoku.plugin-openapi.js

@@ -1,5 +1,5 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as a } from "./index-NNCc1BSK.js";
+import { o as a } from "./index-CBctPUfP.js";
 import "./utils-DcpDOncX.js";
 import "lucide-react";
 import "./hook-hEqe7fPB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.18.8",
+  "version": "0.19.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -54,6 +54,10 @@
       "import": "./lib/zudoku.plugin-api-keys.js",
       "types": "./dist/lib/plugins/api-keys/index.d.ts"
     },
+    "./plugins/api-catalog": {
+      "import": "./lib/zudoku.plugin-api-catalog.js",
+      "types": "./dist/lib/plugins/api-catalog/index.d.ts"
+    },
     "./plugins/markdown": {
       "import": "./lib/zudoku.plugin-markdown.js",
       "types": "./dist/lib/plugins/markdown/index.d.ts"
@@ -149,7 +153,7 @@
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.3.4",
-    "@zudoku/config": "0.18.8",
+    "@zudoku/config": "0.19.0",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.4",
     "autoprefixer": "10.4.20",

package/src/app/main.tsx

@@ -1,6 +1,9 @@
 import { type RouteObject } from "react-router-dom";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
-import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
+import {
+  configuredApiCatalogPlugins,
+  configuredApiPlugins,
+} from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
@@ -57,6 +60,7 @@ export const convertZudokuConfigToOptions = (
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
       ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
+      ...configuredApiCatalogPlugins,
       ...(configuredAuthProvider?.getAuthenticationPlugin
         ? [configuredAuthProvider.getAuthenticationPlugin()]
         : []),

package/src/lib/authentication/providers/openid.tsx

@@ -203,9 +203,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
     const tokenState = providerData as TokenState;
 
-    if (tokenState.expiresOn < new Date()) {
+    if (new Date(tokenState.expiresOn) < new Date()) {
       if (!tokenState.refreshToken) {
-        await this.signIn();
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
         return "";
       }
 

package/src/lib/oas/graphql/index.ts

@@ -443,7 +443,6 @@ const SchemaSource = builder.enumType("SchemaType", {
 
 builder.queryType({
   fields: (t) => ({
-    // https://tan-cow-main-bce8a06.d2.zuplo.dev/openapi
     schema: t.field({
       type: Schema,
       args: {

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -0,0 +1,124 @@
+import slugify from "@sindresorhus/slugify";
+import { Fragment } from "react";
+import { Head, Link } from "zudoku/components";
+import { Markdown } from "../../components/Markdown.js";
+import { useExposedProps } from "../../util/useExposedProps.js";
+import type { ApiCatalogItem, CatalogCategory } from "./index.js";
+
+export const Catalog = ({
+  items,
+  categories,
+  label = "API Library",
+}: {
+  label: string;
+  items: ApiCatalogItem[];
+  categories: CatalogCategory[];
+}) => {
+  const { searchParams, setSearchParams } = useExposedProps();
+  const activeCategory = searchParams.get("category");
+  return (
+    <section className="pt-[--padding-content-top] pb-[--padding-content-bottom]">
+      <Head>
+        <title>{label}</title>
+      </Head>
+      <div className="grid grid-cols-12 gap-12">
+        <div className="flex flex-col gap-4 col-span-3 px-4 not-prose sticky top-48">
+          <div className="justify-between">
+            {categories.map((category, idx) => (
+              <Fragment key={category.label}>
+                <div className="flex justify-between mb-2.5">
+                  <span className="font-medium text-sm">{category.label}</span>
+                  {idx === 0 && activeCategory && (
+                    <button
+                      type="button"
+                      className="text-end text-sm mr-8 text-foreground/60 hover:text-foreground"
+                      onClick={() => setSearchParams({})}
+                    >
+                      Clear
+                    </button>
+                  )}
+                </div>
+                <ul className="space-y-1 [&>li]:py-2">
+                  {Array.from(
+                    new Set(
+                      category.tags
+                        .map((tag) => ({
+                          tag,
+                          count: items.filter((api) =>
+                            api.categories.find((c) => c.tags.includes(tag)),
+                          ).length,
+                        }))
+                        .map(({ tag, count }) => (
+                          <li
+                            key={slugify(category.label + " " + tag)}
+                            className={`flex px-4 rounded-lg -translate-x-4 justify-between text-sm cursor-pointer hover:text-primary transition ${
+                              slugify(tag) === activeCategory
+                                ? "font-medium bg-border/30 rounded"
+                                : ""
+                            }`}
+                            onClick={() =>
+                              setSearchParams({
+                                category: slugify(category.label + " " + tag),
+                              })
+                            }
+                          >
+                            <span>{tag}</span>
+                            <span
+                              className={`flex items-center justify-center border rounded-md w-8 text-xs font-semibold ${
+                                slugify(tag) === activeCategory
+                                  ? "bg-primary border-primary text-primary-foreground"
+                                  : ""
+                              }`}
+                            >
+                              {count}
+                            </span>
+                          </li>
+                        )),
+                    ),
+                  )}
+                </ul>
+              </Fragment>
+            ))}
+          </div>
+        </div>
+        <div className="col-span-9">
+          <h3 className="mt-0 text-2xl font-bold mb-4">{label}</h3>
+
+          <div className="grid grid-cols-2 gap-4">
+            {items
+              .filter(
+                (api) =>
+                  !activeCategory ||
+                  api.categories.find((c) =>
+                    c.tags.find(
+                      (t) => slugify(c.label + " " + t) === activeCategory,
+                    ),
+                  ),
+              )
+              .map((api, i) => (
+                <Link
+                  to={{
+                    pathname: `/${api.path}`,
+                    search: activeCategory ? `category=${activeCategory}` : "",
+                  }}
+                  className="no-underline hover:!text-foreground"
+                  key={api.path}
+                >
+                  <div
+                    className="border h-full rounded p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal"
+                    key={i}
+                  >
+                    <span className="font-semibold">{api.label}</span>
+                    <Markdown
+                      className="text-sm whitespace-pre-wrap mb-6 line-clamp-2"
+                      content={api.description}
+                    />
+                  </div>
+                </Link>
+              ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};

package/src/lib/plugins/api-catalog/index.tsx

@@ -0,0 +1,50 @@
+import type { ZudokuPlugin } from "../../core/plugins.js";
+import { Catalog } from "./Catalog.js";
+
+export type ApiCatalogItem = {
+  path: string;
+  label: string;
+  description: string;
+  categories: CatalogCategory[];
+};
+
+export type CatalogCategory = {
+  label: string;
+  tags: string[];
+};
+
+export type ApiCatalogPluginOptions = {
+  navigationId: string;
+  label: string;
+  categories?: CatalogCategory[];
+  items: ApiCatalogItem[];
+};
+
+export const apiCatalogPlugin = ({
+  navigationId,
+  items,
+  label,
+  categories,
+}: {
+  navigationId: string;
+  label: string;
+  categories?: CatalogCategory[];
+  items: ApiCatalogItem[];
+}): ZudokuPlugin => {
+  return {
+    getRoutes: () => {
+      return [
+        {
+          path: navigationId,
+          element: (
+            <Catalog
+              label={label}
+              items={items}
+              categories={categories ?? []}
+            />
+          ),
+        },
+      ];
+    },
+  };
+};

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

@@ -50,6 +50,7 @@ export const PathParams = ({
                   render={({ field }) => (
                     <Input
                       {...field}
+                      required
                       placeholder="Enter value"
                       className="border-0 shadow-none ring-0 font-mono text-xs"
                     />