@wikex/admin-kit 0.2.0

package/src/admin/NavClient.tsx

@@ -0,0 +1,288 @@
+'use client'
+
+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 type { LucideIcon } from 'lucide-react'
+import { usePathname } from 'next/navigation'
+import { formatAdminURL } from 'payload/shared'
+import React, { useEffect, useMemo, useState } from 'react'
+
+import { AdminIcon, AdminLogo } from './Brand'
+import { useAdminBrand } from './useAdminBrand'
+import AdminLogoutButton from './LogoutButton'
+
+export type AdminNavGroup = {
+  items: Array<{
+    label: string
+    slug: string
+    type: 'collections' | 'globals'
+  }>
+  label: string
+}
+
+type AdminNavClientProps = {
+  groups: AdminNavGroup[]
+}
+
+type AdminUser = {
+  email?: string
+  name?: string
+}
+
+const iconBySlug: Record<string, LucideIcon> = {
+  categories: Tags,
+  footer: PanelBottom,
+  header: PanelTop,
+  homepage: Home,
+  media: Image,
+  pages: FileText,
+  posts: BookOpenText,
+  projects: FolderKanban,
+  services: BriefcaseBusiness,
+  settings: Settings2,
+  users: Users,
+}
+
+const translateGroupLabel = (label: string) =>
+  label === 'Collections' ? 'Bộ sưu tập' : label === 'Globals' ? 'Thiết lập chung' : label
+
+const getInitials = (name?: string, email?: string) => {
+  const source = name?.trim() || email?.split('@')[0] || 'AD'
+
+  return source
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join('')
+}
+
+export const AdminNavClient = ({ groups }: AdminNavClientProps) => {
+  const pathname = usePathname()
+  const brand = useAdminBrand()
+  const { user } = useAuth<AdminUser>()
+  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ản trị viên'
+  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: string) =>
+    pathname === href || (href !== adminRoute && pathname.startsWith(`${href}/`))
+
+  return (
+    <aside
+      aria-label="Điều hướng quản trị"
+      className={classes}
+      inert={(isMobile && !navOpen) || undefined}
+    >
+      <div className="minimal-nav__scroll" ref={navRef}>
+        <div className="minimal-nav__brand-row">
+          <Link
+            aria-label={`Về dashboard ${brand.siteName}`}
+            className="minimal-nav__brand"
+            href={adminRoute}
+            onClick={closeMobileNav}
+            prefetch={false}
+          >
+            <span className="minimal-nav__brand-full">
+              <AdminLogo />
+            </span>
+            <span className="minimal-nav__brand-icon">
+              <AdminIcon />
+            </span>
+          </Link>
+          <button
+            aria-label="Đóng menu"
+            className="minimal-nav__mobile-close"
+            onClick={() => setNavOpen(false)}
+            type="button"
+          >
+            <X aria-hidden="true" />
+          </button>
+        </div>
+
+        <Link
+          className="minimal-nav__workspace"
+          href={adminRoute}
+          onClick={closeMobileNav}
+          prefetch={false}
+          title={brand.siteName}
+        >
+          <span className="minimal-nav__workspace-icon">
+            <GalleryVerticalEnd aria-hidden="true" />
+          </span>
+          <span className="minimal-nav__workspace-copy">
+            <small>Không gian làm việc</small>
+            <strong>{brand.siteName}</strong>
+          </span>
+          <Menu aria-hidden="true" className="minimal-nav__workspace-menu" />
+        </Link>
+
+        <nav className="minimal-nav__menu">
+          <div className="minimal-nav__group">
+            <span className="minimal-nav__group-label">Tổng quan</span>
+            <Link
+              aria-current={pathname === adminRoute ? 'page' : undefined}
+              className={`minimal-nav__item ${pathname === adminRoute ? 'minimal-nav__item--active' : ''}`}
+              href={adminRoute}
+              onClick={closeMobileNav}
+              prefetch={false}
+              title="Dashboard"
+            >
+              <LayoutDashboard aria-hidden="true" />
+              <span>Tổng quan</span>
+            </Link>
+          </div>
+
+          {groups.map((group) => (
+            <div className="minimal-nav__group" key={group.label}>
+              <span className="minimal-nav__group-label">{translateGroupLabel(group.label)}</span>
+              {group.items.map((item) => {
+                const href = formatAdminURL({
+                  adminRoute,
+                  path: `/${item.type}/${item.slug}`,
+                })
+                const Icon = iconBySlug[item.slug] || FileText
+                const active = isActive(href)
+
+                return (
+                  <Link
+                    aria-current={active ? 'page' : undefined}
+                    className={`minimal-nav__item ${active ? 'minimal-nav__item--active' : ''}`}
+                    href={href}
+                    key={`${item.type}-${item.slug}`}
+                    onClick={closeMobileNav}
+                    prefetch={false}
+                    title={item.label}
+                  >
+                    <Icon aria-hidden="true" />
+                    <span>{item.label}</span>
+                  </Link>
+                )
+              })}
+            </div>
+          ))}
+
+          {folders && folders.browseByFolder && (
+            <div className="minimal-nav__group">
+              <span className="minimal-nav__group-label">Thư viện</span>
+              <Link
+                aria-current={
+                  isActive(formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder }))
+                    ? 'page'
+                    : undefined
+                }
+                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ệt theo thư mục"
+              >
+                <Library aria-hidden="true" />
+                <span>Duyệt theo thư mục</span>
+              </Link>
+            </div>
+          )}
+        </nav>
+
+        <div className="minimal-nav__footer">
+          <Link
+            className="minimal-nav__account"
+            href={formatAdminURL({ adminRoute, path: adminRoutes.account })}
+            onClick={closeMobileNav}
+            prefetch={false}
+            title={userLabel}
+          >
+            <span className="minimal-nav__avatar">{initials}</span>
+            <span className="minimal-nav__account-copy">
+              <strong>{userLabel}</strong>
+              <small>{user?.email || 'Tài khoản quản trị'}</small>
+            </span>
+          </Link>
+          <div className="minimal-nav__logout">
+            <AdminLogoutButton />
+          </div>
+        </div>
+      </div>
+
+      <button
+        aria-label={isMini ? 'Mở rộng menu' : 'Thu gọn menu'}
+        className="minimal-nav__collapse"
+        onClick={() => setIsMini((current) => !current)}
+        title={isMini ? 'Mở rộng menu' : 'Thu gọn menu'}
+        type="button"
+      >
+        {isMini ? <ChevronRight aria-hidden="true" /> : <ChevronLeft aria-hidden="true" />}
+      </button>
+    </aside>
+  )
+}

package/src/admin/ThemeToggle.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useTheme } from '@payloadcms/ui'
+import { Moon, Sun } from 'lucide-react'
+import React from 'react'
+
+const AdminThemeToggle: React.FC = () => {
+  const { setTheme, theme } = useTheme()
+  const isDark = theme === 'dark'
+  const label = isDark ? 'Chuyển sang giao diện sáng' : 'Chuyển sang giao diện tối'
+
+  return (
+    <button
+      aria-checked={isDark}
+      aria-label={label}
+      className="admin-theme-toggle"
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+      role="switch"
+      title={label}
+      type="button"
+    >
+      <span aria-hidden="true" className="admin-theme-toggle__track">
+        <span className="admin-theme-toggle__thumb">
+          {isDark ? <Moon strokeWidth={2.2} /> : <Sun strokeWidth={2.2} />}
+        </span>
+      </span>
+    </button>
+  )
+}
+
+export default AdminThemeToggle

package/src/admin/ViewSite.tsx

@@ -0,0 +1,11 @@
+import { ArrowUpRight } from 'lucide-react'
+import React from 'react'
+
+const AdminViewSite: React.FC = () => (
+  <a className="admin-view-site" data-slot="button" href="/" rel="noreferrer" target="_blank">
+    Xem website
+    <ArrowUpRight aria-hidden="true" />
+  </a>
+)
+
+export default AdminViewSite

package/src/admin/useAdminBrand.ts

@@ -0,0 +1,81 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import type { AdminBrandAsset } from './Brand'
+
+export type AdminBrandSettings = {
+  logo: AdminBrandAsset
+  siteName: string
+}
+
+type SettingsResponse = {
+  logo?:
+    | {
+        alt?: null | string
+        height?: null | number
+        updatedAt?: null | string
+        url?: null | string
+        width?: null | number
+      }
+    | number
+    | null
+  siteName?: null | string
+}
+
+let defaultBrand: AdminBrandSettings = {
+  logo: { alt: 'Wikex', height: 64, url: '/favicon.svg', width: 64 },
+  siteName: 'Wikex',
+}
+
+export const configureAdminBrand = (brand: AdminBrandSettings) => {
+  defaultBrand = brand
+}
+
+const normalizeBrand = (settings?: SettingsResponse | null): AdminBrandSettings => {
+  const logo = settings?.logo
+  const resolvedLogo =
+    logo && typeof logo !== 'number' && logo.url
+      ? {
+          alt: logo.alt || settings?.siteName || defaultBrand.siteName,
+          height: logo.height || 64,
+          url: logo.updatedAt ? `${logo.url}?${encodeURIComponent(logo.updatedAt)}` : logo.url,
+          width: logo.width || 240,
+        }
+      : defaultBrand.logo
+
+  return {
+    logo: resolvedLogo,
+    siteName: settings?.siteName?.trim() || defaultBrand.siteName,
+  }
+}
+
+export const useAdminBrand = (): AdminBrandSettings => {
+  const [brand, setBrand] = useState<AdminBrandSettings>(() => normalizeBrand())
+
+  useEffect(() => {
+    const controller = new AbortController()
+
+    const loadBrand = async () => {
+      try {
+        const response = await fetch('/api/globals/settings?depth=1', {
+          cache: 'no-store',
+          signal: controller.signal,
+        })
+
+        if (!response.ok) return
+        setBrand(normalizeBrand((await response.json()) as SettingsResponse))
+      } catch (error) {
+        if (!(error instanceof DOMException && error.name === 'AbortError')) {
+          console.error('Unable to load admin branding', error)
+        }
+      }
+    }
+
+    void loadBrand()
+
+    return () => controller.abort()
+  }, [])
+
+  return brand
+}

package/src/adminExperience.ts

@@ -0,0 +1,117 @@
+import type { Config, Field, Plugin } from 'payload'
+
+export const IMAGE_UPLOAD_GUIDANCE =
+  'Yêu cầu để ảnh hiển thị rõ: hero/banner nên từ 1920 × 1080 px; ảnh nội dung nên rộng tối thiểu 1200 px. Ưu tiên WebP hoặc JPEG, dung lượng dưới 500 KB.'
+
+const labelTranslations: Record<string, string> = {
+  'Archive Block': 'Khối lưu trữ',
+  Content: 'Nội dung',
+  Description: 'Mô tả',
+  Hero: 'Mở đầu',
+  'Hero Image': 'Ảnh đại diện',
+  Image: 'Hình ảnh',
+  Layout: 'Bố cục',
+  Link: 'Liên kết',
+  Media: 'Hình ảnh',
+  Meta: 'Thông tin bổ sung',
+  Title: 'Tiêu đề',
+}
+
+const fieldNameLabels: Record<string, string> = {
+  alt: 'Văn bản thay thế',
+  authors: 'Tác giả',
+  caption: 'Chú thích',
+  categories: 'Chuyên mục',
+  content: 'Nội dung',
+  coverImage: 'Ảnh bìa',
+  defaultOgImage: 'Ảnh chia sẻ mặc định',
+  description: 'Mô tả',
+  excerpt: 'Tóm tắt',
+  featuredImage: 'Ảnh nổi bật',
+  heroImage: 'Ảnh đại diện',
+  image: 'Hình ảnh',
+  logo: 'Logo',
+  media: 'Hình ảnh',
+  appearance: 'Kiểu hiển thị',
+  links: 'Liên kết',
+  newTab: 'Mở trong tab mới',
+  publishedAt: 'Ngày xuất bản',
+  relatedPosts: 'Bài viết liên quan',
+  slug: 'Đường dẫn',
+  summary: 'Mô tả ngắn',
+  title: 'Tiêu đề',
+  type: 'Loại',
+}
+
+const entityLabels: Record<string, { plural: string; singular: string }> = {
+  'form-submissions': { plural: 'Dữ liệu biểu mẫu', singular: 'Dữ liệu biểu mẫu' },
+  forms: { plural: 'Biểu mẫu', singular: 'Biểu mẫu' },
+  redirects: { plural: 'Chuyển hướng', singular: 'Chuyển hướng' },
+  search: { plural: 'Kết quả tìm kiếm', singular: 'Kết quả tìm kiếm' },
+}
+
+const translateLabel = <T>(label: T): T =>
+  (typeof label === 'string' ? labelTranslations[label] || label : label) as T
+
+const enhanceFields = (fields: Field[]) => {
+  for (const field of fields) {
+    if ('name' in field) {
+      field.label =
+        field.label === undefined ? fieldNameLabels[field.name] : translateLabel(field.label)
+    } else if ('label' in field) {
+      field.label = translateLabel(field.label)
+    }
+
+    if (field.type === 'upload' && field.relationTo === 'media') {
+      const currentDescription = field.admin?.description
+      field.admin = {
+        ...field.admin,
+        description:
+          typeof currentDescription === 'string' &&
+          !currentDescription.includes(IMAGE_UPLOAD_GUIDANCE)
+            ? `${currentDescription} ${IMAGE_UPLOAD_GUIDANCE}`
+            : IMAGE_UPLOAD_GUIDANCE,
+      }
+    }
+
+    if (field.type === 'tabs') {
+      for (const tab of field.tabs) {
+        tab.label = translateLabel(tab.label)
+        enhanceFields(tab.fields)
+      }
+    } else if ('fields' in field && Array.isArray(field.fields)) {
+      enhanceFields(field.fields)
+    }
+
+    if (field.type === 'blocks') {
+      for (const block of field.blocks ?? []) {
+        if (block.labels) {
+          block.labels = {
+            plural: translateLabel(block.labels.plural),
+            singular: translateLabel(block.labels.singular),
+          }
+        }
+        enhanceFields(block.fields)
+      }
+    }
+  }
+}
+
+export const adminExperiencePlugin: Plugin = (config: Config): Config => {
+  for (const collection of config.collections ?? []) {
+    const translatedLabels = entityLabels[collection.slug]
+    if (translatedLabels) collection.labels = translatedLabels
+    enhanceFields(collection.fields)
+
+    if (collection.slug === 'media') {
+      collection.admin = {
+        ...collection.admin,
+        description: IMAGE_UPLOAD_GUIDANCE,
+      }
+    }
+  }
+
+  for (const global of config.globals ?? []) enhanceFields(global.fields)
+
+  return config
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export { adminExperiencePlugin, IMAGE_UPLOAD_GUIDANCE } from './adminExperience'
+export { wikexAdminPlugin, type WikexAdminPluginOptions } from './plugin'
+export {
+  createVisualEditorRouteResolver,
+  defineWikexProject,
+  type VisualEditorRouteRegistry,
+  type WikexProjectDefinition,
+} from './project'
+export { RichTextTypographyFeature } from './rich-text'
+export { TextStyleRuntime } from './TextStyleRuntime'
+export * from './textStyles'