@wikex/admin-kit 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 Các thay đổi đáng chú ý của `@wikex/admin-kit` được ghi tại đây theo Semantic Versioning.
 
+## 0.3.0 - 2026-09-13
+
+- Thêm project scanner để phát hiện route Next.js và component React ở build-time.
+- Component có metadata `defineWikexBlock()` hoặc hậu tố `.wikex` được đánh dấu có thể cấu hình trong CMS.
+
 ## 0.2.1 - 2026-09-12
 
 - Publish JavaScript build và type declarations để Payload CLI chạy được trong project độc lập.

package/dist/admin/before-login.js

@@ -1,7 +1,8 @@
+'use client';
 "use client";
 import {
   useAdminBrand
-} from "../chunk-XGKGKCQ6.js";
+} from "../chunk-X7VETFVD.js";
 
 // src/admin/BeforeLogin.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/admin/brand.js

@@ -1,12 +1,13 @@
+'use client';
 "use client";
 import {
   AdminIcon,
   AdminLogo
-} from "../chunk-LP22Y3NO.js";
+} from "../chunk-SM6CCKQQ.js";
 import {
   configureAdminBrand,
   useAdminBrand
-} from "../chunk-XGKGKCQ6.js";
+} from "../chunk-X7VETFVD.js";
 export {
   AdminIcon,
   AdminLogo,

package/dist/admin/header.js

@@ -1,20 +1,29 @@
+'use client';
 "use client";
-import {
-  ThemeToggle_default
-} from "../chunk-GGSOO4FQ.js";
-import {
-  ViewSite_default
-} from "../chunk-MDMKKWPU.js";
 import {
   AdminIcon
-} from "../chunk-LP22Y3NO.js";
-import "../chunk-XGKGKCQ6.js";
+} from "../chunk-SM6CCKQQ.js";
+import "../chunk-X7VETFVD.js";
+import {
+  ThemeToggle_default
+} from "../chunk-SAI5SWZA.js";
 
 // src/admin/Header.tsx
 import { Link, useAuth, useConfig, useNav } from "@payloadcms/ui";
 import { Menu, Settings2 } from "lucide-react";
 import { formatAdminURL } from "payload/shared";
+
+// src/admin/ViewSite.tsx
+import { ArrowUpRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var AdminViewSite = () => /* @__PURE__ */ jsxs("a", { className: "admin-view-site", "data-slot": "button", href: "/", rel: "noreferrer", target: "_blank", children: [
+  "Xem website",
+  /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
+] });
+var ViewSite_default = AdminViewSite;
+
+// src/admin/Header.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var getInitials = (name, email) => {
   const source = name?.trim() || email?.split("@")[0] || "AD";
   return source.split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
@@ -30,33 +39,33 @@ var AdminHeader = () => {
   } = useConfig();
   const userLabel = user?.name?.trim() || user?.email?.split("@")[0] || "Qu\u1EA3n tr\u1ECB vi\xEAn";
   const initials = getInitials(user?.name, user?.email);
-  return /* @__PURE__ */ jsxs("header", { className: "minimal-admin-header", children: [
-    /* @__PURE__ */ jsxs("div", { className: "minimal-admin-header__left", children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("header", { className: "minimal-admin-header", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "minimal-admin-header__left", children: [
+      /* @__PURE__ */ jsx2(
         "button",
         {
           "aria-label": "M\u1EDF menu qu\u1EA3n tr\u1ECB",
           className: "minimal-admin-header__menu",
           onClick: () => setNavOpen(true),
           type: "button",
-          children: /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx2(Menu, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         Link,
         {
           "aria-label": "V\u1EC1 dashboard",
           className: "minimal-admin-header__mobile-brand",
           href: adminRoute,
           prefetch: false,
-          children: /* @__PURE__ */ jsx(AdminIcon, {})
+          children: /* @__PURE__ */ jsx2(AdminIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "minimal-admin-header__actions", children: [
-      /* @__PURE__ */ jsx(ViewSite_default, {}),
-      /* @__PURE__ */ jsx(ThemeToggle_default, {}),
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs2("div", { className: "minimal-admin-header__actions", children: [
+      /* @__PURE__ */ jsx2(ViewSite_default, {}),
+      /* @__PURE__ */ jsx2(ThemeToggle_default, {}),
+      /* @__PURE__ */ jsx2(
         Link,
         {
           "aria-label": `M\u1EDF t\xE0i kho\u1EA3n ${userLabel}`,
@@ -64,10 +73,10 @@ var AdminHeader = () => {
           href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
           prefetch: false,
           title: "C\xE0i \u0111\u1EB7t t\xE0i kho\u1EA3n",
-          children: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx2(Settings2, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         Link,
         {
           "aria-label": `M\u1EDF t\xE0i kho\u1EA3n ${userLabel}`,
@@ -75,7 +84,7 @@ var AdminHeader = () => {
           href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
           prefetch: false,
           title: userLabel,
-          children: /* @__PURE__ */ jsx("span", { children: initials })
+          children: /* @__PURE__ */ jsx2("span", { children: initials })
         }
       )
     ] })

package/dist/admin/logout-button.js

@@ -1,7 +1,8 @@
+'use client';
 "use client";
 import {
   LogoutButton_default
-} from "../chunk-W4ZKDOWJ.js";
+} from "../chunk-GZ2B5BTH.js";
 export {
   LogoutButton_default as default
 };

package/dist/admin/nav-client.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type AdminNavGroup = {
+    items: Array<{
+        label: string;
+        slug: string;
+        type: 'collections' | 'globals';
+    }>;
+    label: string;
+};
+type AdminNavClientProps = {
+    groups: AdminNavGroup[];
+};
+declare const AdminNavClient: ({ groups }: AdminNavClientProps) => react_jsx_runtime.JSX.Element;
+
+export { AdminNavClient, type AdminNavGroup };

package/dist/admin/nav-client.js

@@ -0,0 +1,258 @@
+'use client';
+"use client";
+import {
+  AdminIcon,
+  AdminLogo
+} from "../chunk-SM6CCKQQ.js";
+import {
+  useAdminBrand
+} from "../chunk-X7VETFVD.js";
+import {
+  LogoutButton_default
+} from "../chunk-GZ2B5BTH.js";
+
+// src/admin/NavClient.tsx
+import { Link, useAuth, useConfig, useNav } from "@payloadcms/ui";
+import {
+  BookOpenText,
+  BriefcaseBusiness,
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  FolderKanban,
+  GalleryVerticalEnd,
+  Home,
+  Image,
+  LayoutDashboard,
+  Library,
+  Menu,
+  PanelBottom,
+  PanelTop,
+  Settings2,
+  Tags,
+  Users,
+  X
+} from "lucide-react";
+import { usePathname } from "next/navigation";
+import { formatAdminURL } from "payload/shared";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var iconBySlug = {
+  categories: Tags,
+  footer: PanelBottom,
+  header: PanelTop,
+  homepage: Home,
+  media: Image,
+  pages: FileText,
+  posts: BookOpenText,
+  projects: FolderKanban,
+  services: BriefcaseBusiness,
+  settings: Settings2,
+  users: Users
+};
+var translateGroupLabel = (label) => label === "Collections" ? "B\u1ED9 s\u01B0u t\u1EADp" : label === "Globals" ? "Thi\u1EBFt l\u1EADp chung" : label;
+var getInitials = (name, email) => {
+  const source = name?.trim() || email?.split("@")[0] || "AD";
+  return source.split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+};
+var AdminNavClient = ({ groups }) => {
+  const pathname = usePathname();
+  const brand = useAdminBrand();
+  const { user } = useAuth();
+  const { hydrated, navOpen, navRef, setNavOpen, shouldAnimate } = useNav();
+  const {
+    config: {
+      admin: { routes: adminRoutes },
+      folders,
+      routes: { admin: adminRoute }
+    }
+  } = useConfig();
+  const [isMini, setIsMini] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const storedValue = window.localStorage.getItem("minimal-admin-nav-mini");
+    setIsMini(storedValue === "true");
+  }, []);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 768px)");
+    const syncViewport = () => setIsMobile(mediaQuery.matches);
+    syncViewport();
+    mediaQuery.addEventListener("change", syncViewport);
+    return () => mediaQuery.removeEventListener("change", syncViewport);
+  }, []);
+  useEffect(() => {
+    document.documentElement.style.setProperty("--nav-width", isMini ? "88px" : "280px");
+    window.localStorage.setItem("minimal-admin-nav-mini", String(isMini));
+    return () => {
+      document.documentElement.style.removeProperty("--nav-width");
+    };
+  }, [isMini]);
+  const userLabel = user?.name?.trim() || user?.email?.split("@")[0] || "Qu\u1EA3n tr\u1ECB vi\xEAn";
+  const initials = useMemo(() => getInitials(user?.name, user?.email), [user?.email, user?.name]);
+  const closeMobileNav = () => {
+    if (window.matchMedia("(max-width: 768px)").matches) setNavOpen(false);
+  };
+  const classes = [
+    "minimal-nav",
+    navOpen && "minimal-nav--open",
+    isMini && "minimal-nav--mini",
+    shouldAnimate && "minimal-nav--animate",
+    hydrated && "minimal-nav--hydrated"
+  ].filter(Boolean).join(" ");
+  const isActive = (href) => pathname === href || href !== adminRoute && pathname.startsWith(`${href}/`);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "aria-label": "\u0110i\u1EC1u h\u01B0\u1EDBng qu\u1EA3n tr\u1ECB",
+      className: classes,
+      inert: isMobile && !navOpen || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "minimal-nav__scroll", ref: navRef, children: [
+          /* @__PURE__ */ jsxs("div", { className: "minimal-nav__brand-row", children: [
+            /* @__PURE__ */ jsxs(
+              Link,
+              {
+                "aria-label": `V\u1EC1 dashboard ${brand.siteName}`,
+                className: "minimal-nav__brand",
+                href: adminRoute,
+                onClick: closeMobileNav,
+                prefetch: false,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "minimal-nav__brand-full", children: /* @__PURE__ */ jsx(AdminLogo, {}) }),
+                  /* @__PURE__ */ jsx("span", { className: "minimal-nav__brand-icon", children: /* @__PURE__ */ jsx(AdminIcon, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": "\u0110\xF3ng menu",
+                className: "minimal-nav__mobile-close",
+                onClick: () => setNavOpen(false),
+                type: "button",
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Link,
+            {
+              className: "minimal-nav__workspace",
+              href: adminRoute,
+              onClick: closeMobileNav,
+              prefetch: false,
+              title: brand.siteName,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "minimal-nav__workspace-icon", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { "aria-hidden": "true" }) }),
+                /* @__PURE__ */ jsxs("span", { className: "minimal-nav__workspace-copy", children: [
+                  /* @__PURE__ */ jsx("small", { children: "Kh\xF4ng gian l\xE0m vi\u1EC7c" }),
+                  /* @__PURE__ */ jsx("strong", { children: brand.siteName })
+                ] }),
+                /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", className: "minimal-nav__workspace-menu" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("nav", { className: "minimal-nav__menu", children: [
+            /* @__PURE__ */ jsxs("div", { className: "minimal-nav__group", children: [
+              /* @__PURE__ */ jsx("span", { className: "minimal-nav__group-label", children: "T\u1ED5ng quan" }),
+              /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  "aria-current": pathname === adminRoute ? "page" : void 0,
+                  className: `minimal-nav__item ${pathname === adminRoute ? "minimal-nav__item--active" : ""}`,
+                  href: adminRoute,
+                  onClick: closeMobileNav,
+                  prefetch: false,
+                  title: "Dashboard",
+                  children: [
+                    /* @__PURE__ */ jsx(LayoutDashboard, { "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { children: "T\u1ED5ng quan" })
+                  ]
+                }
+              )
+            ] }),
+            groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "minimal-nav__group", children: [
+              /* @__PURE__ */ jsx("span", { className: "minimal-nav__group-label", children: translateGroupLabel(group.label) }),
+              group.items.map((item) => {
+                const href = formatAdminURL({
+                  adminRoute,
+                  path: `/${item.type}/${item.slug}`
+                });
+                const Icon = iconBySlug[item.slug] || FileText;
+                const active = isActive(href);
+                return /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    "aria-current": active ? "page" : void 0,
+                    className: `minimal-nav__item ${active ? "minimal-nav__item--active" : ""}`,
+                    href,
+                    onClick: closeMobileNav,
+                    prefetch: false,
+                    title: item.label,
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx("span", { children: item.label })
+                    ]
+                  },
+                  `${item.type}-${item.slug}`
+                );
+              })
+            ] }, group.label)),
+            folders && folders.browseByFolder && /* @__PURE__ */ jsxs("div", { className: "minimal-nav__group", children: [
+              /* @__PURE__ */ jsx("span", { className: "minimal-nav__group-label", children: "Th\u01B0 vi\u1EC7n" }),
+              /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  "aria-current": isActive(formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder })) ? "page" : void 0,
+                  className: `minimal-nav__item ${isActive(formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder })) ? "minimal-nav__item--active" : ""}`,
+                  href: formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder }),
+                  onClick: closeMobileNav,
+                  prefetch: false,
+                  title: "Duy\u1EC7t theo th\u01B0 m\u1EE5c",
+                  children: [
+                    /* @__PURE__ */ jsx(Library, { "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { children: "Duy\u1EC7t theo th\u01B0 m\u1EE5c" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "minimal-nav__footer", children: [
+            /* @__PURE__ */ jsxs(
+              Link,
+              {
+                className: "minimal-nav__account",
+                href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
+                onClick: closeMobileNav,
+                prefetch: false,
+                title: userLabel,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "minimal-nav__avatar", children: initials }),
+                  /* @__PURE__ */ jsxs("span", { className: "minimal-nav__account-copy", children: [
+                    /* @__PURE__ */ jsx("strong", { children: userLabel }),
+                    /* @__PURE__ */ jsx("small", { children: user?.email || "T\xE0i kho\u1EA3n qu\u1EA3n tr\u1ECB" })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "minimal-nav__logout", children: /* @__PURE__ */ jsx(LogoutButton_default, {}) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": isMini ? "M\u1EDF r\u1ED9ng menu" : "Thu g\u1ECDn menu",
+            className: "minimal-nav__collapse",
+            onClick: () => setIsMini((current) => !current),
+            title: isMini ? "M\u1EDF r\u1ED9ng menu" : "Thu g\u1ECDn menu",
+            type: "button",
+            children: isMini ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  AdminNavClient
+};

package/dist/admin/nav.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ServerProps } from 'payload';
+export { AdminNavClient } from '@wikex/admin-kit/admin/nav-client';
 
 type AdminNavGroup = {
     items: Array<{
@@ -9,11 +10,7 @@ type AdminNavGroup = {
     }>;
     label: string;
 };
-type AdminNavClientProps = {
-    groups: AdminNavGroup[];
-};
-declare const AdminNavClient: ({ groups }: AdminNavClientProps) => react_jsx_runtime.JSX.Element;
 
 declare const AdminNav: ({ i18n, payload, permissions, visibleEntities }: ServerProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AdminNavClient, type AdminNavGroup, AdminNav as default };
+export { type AdminNavGroup, AdminNav as default };