@wikex/admin-kit 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Các thay đổi đáng chú ý của `@wikex/admin-kit` được ghi tại đây theo Semantic Versioning.
 
+## 0.2.1 - 2026-09-12
+
+- Publish JavaScript build và type declarations để Payload CLI chạy được trong project độc lập.
+
 ## 0.2.0 - 2026-09-12
 
 - Thêm `createWikexStarter`: một factory cấu hình content schema, SEO, redirect, admin UI,

package/dist/admin/before-login.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+declare const BeforeLogin: React.FC;
+
+export { BeforeLogin as default };

package/dist/admin/before-login.js

@@ -0,0 +1,27 @@
+'use client';
+"use client";
+import {
+  useAdminBrand
+} from "../chunk-X7VETFVD.js";
+
+// src/admin/BeforeLogin.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var BeforeLogin = () => {
+  const { siteName } = useAdminBrand();
+  return /* @__PURE__ */ jsxs("div", { className: "admin-login-intro", children: [
+    /* @__PURE__ */ jsxs("span", { className: "admin-login-intro__eyebrow", children: [
+      siteName,
+      " \xB7 Trung t\xE2m n\u1ED9i dung"
+    ] }),
+    /* @__PURE__ */ jsx("h1", { children: "Ch\xE0o m\u1EEBng tr\u1EDF l\u1EA1i." }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      "\u0110\u0103ng nh\u1EADp \u0111\u1EC3 qu\u1EA3n l\xFD n\u1ED9i dung, h\xECnh \u1EA3nh v\xE0 xu\u1EA5t b\u1EA3n c\u1EE7a ",
+      siteName,
+      "."
+    ] })
+  ] });
+};
+var BeforeLogin_default = BeforeLogin;
+export {
+  BeforeLogin_default as default
+};

package/dist/admin/brand.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+type AdminBrandSettings = {
+    logo: AdminBrandAsset;
+    siteName: string;
+};
+declare const configureAdminBrand: (brand: AdminBrandSettings) => void;
+declare const useAdminBrand: () => AdminBrandSettings;
+
+type AdminBrandAsset = {
+    alt: string;
+    height: number;
+    url: string;
+    width: number;
+};
+declare const AdminIcon: React.FC;
+declare const AdminLogo: React.FC;
+
+export { type AdminBrandAsset, type AdminBrandSettings, AdminIcon, AdminLogo, configureAdminBrand, useAdminBrand };

package/dist/admin/brand.js

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

package/dist/admin/header.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const AdminHeader: () => react_jsx_runtime.JSX.Element;
+
+export { AdminHeader as default };

package/dist/admin/header.js

@@ -0,0 +1,96 @@
+'use client';
+"use client";
+import {
+  AdminIcon
+} 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("");
+};
+var AdminHeader = () => {
+  const { user } = useAuth();
+  const { setNavOpen } = useNav();
+  const {
+    config: {
+      admin: { routes: adminRoutes },
+      routes: { admin: adminRoute }
+    }
+  } = 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__ */ 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__ */ jsx2(Menu, { "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Link,
+        {
+          "aria-label": "V\u1EC1 dashboard",
+          className: "minimal-admin-header__mobile-brand",
+          href: adminRoute,
+          prefetch: false,
+          children: /* @__PURE__ */ jsx2(AdminIcon, {})
+        }
+      )
+    ] }),
+    /* @__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}`,
+          className: "minimal-admin-header__settings",
+          href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
+          prefetch: false,
+          title: "C\xE0i \u0111\u1EB7t t\xE0i kho\u1EA3n",
+          children: /* @__PURE__ */ jsx2(Settings2, { "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Link,
+        {
+          "aria-label": `M\u1EDF t\xE0i kho\u1EA3n ${userLabel}`,
+          className: "minimal-admin-header__account",
+          href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
+          prefetch: false,
+          title: userLabel,
+          children: /* @__PURE__ */ jsx2("span", { children: initials })
+        }
+      )
+    ] })
+  ] });
+};
+var Header_default = AdminHeader;
+export {
+  Header_default as default
+};

package/dist/admin/logout-button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+type AdminLogoutButtonProps = {
+    tabIndex?: number;
+};
+declare const AdminLogoutButton: React.FC<AdminLogoutButtonProps>;
+
+export { AdminLogoutButton as default };

package/dist/admin/logout-button.js

@@ -0,0 +1,8 @@
+'use client';
+"use client";
+import {
+  LogoutButton_default
+} 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

@@ -0,0 +1,16 @@
+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<{
+        label: string;
+        slug: string;
+        type: 'collections' | 'globals';
+    }>;
+    label: string;
+};
+
+declare const AdminNav: ({ i18n, payload, permissions, visibleEntities }: ServerProps) => react_jsx_runtime.JSX.Element | null;
+
+export { type AdminNavGroup, AdminNav as default };

package/dist/admin/nav.js

@@ -0,0 +1,31 @@
+// src/admin/Nav.tsx
+import { getNavGroups } from "@payloadcms/ui/shared";
+import { AdminNavClient } from "@wikex/admin-kit/admin/nav-client";
+import { AdminNavClient as AdminNavClient2 } from "@wikex/admin-kit/admin/nav-client";
+import { jsx } from "react/jsx-runtime";
+var localizeLabel = (label, language) => {
+  if (typeof label === "string") return label;
+  return label[language] || Object.values(label)[0] || "";
+};
+var AdminNav = ({ i18n, payload, permissions, visibleEntities }) => {
+  if (!permissions || !visibleEntities) return null;
+  const groups = getNavGroups(
+    permissions,
+    visibleEntities,
+    payload.config,
+    i18n
+  ).map((group) => ({
+    items: group.entities.map((entity) => ({
+      label: localizeLabel(entity.label, i18n.language),
+      slug: entity.slug,
+      type: entity.type
+    })),
+    label: group.label
+  }));
+  return /* @__PURE__ */ jsx(AdminNavClient, { groups });
+};
+var Nav_default = AdminNav;
+export {
+  AdminNavClient2 as AdminNavClient,
+  Nav_default as default
+};

package/dist/admin/theme-toggle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+declare const AdminThemeToggle: React.FC;
+
+export { AdminThemeToggle as default };

package/dist/admin/theme-toggle.js

@@ -0,0 +1,8 @@
+'use client';
+"use client";
+import {
+  ThemeToggle_default
+} from "../chunk-SAI5SWZA.js";
+export {
+  ThemeToggle_default as default
+};

package/dist/admin/view-site.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+declare const AdminViewSite: React.FC;
+
+export { AdminViewSite as default };

package/dist/admin/view-site.js

@@ -0,0 +1,11 @@
+// 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;
+export {
+  ViewSite_default as default
+};