@wikex/admin-kit 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikex/admin-kit",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Reusable Payload CMS admin shell, visual editor and typography tools for Wikex projects",
   "license": "UNLICENSED",
   "private": false,
@@ -9,7 +9,8 @@
     "**/*.scss"
   ],
   "files": [
-    "src",
+    "dist",
+    "src/styles",
     "CHANGELOG.md",
     "README.md",
     "RELEASING.md"
@@ -19,26 +20,27 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@wikex/content-kit": "^0.1.0"
+    "@wikex/content-kit": "^0.1.1"
   },
   "exports": {
-    ".": "./src/index.ts",
-    "./admin/before-login": "./src/admin/BeforeLogin.tsx",
-    "./admin/brand": "./src/admin/Brand.tsx",
-    "./admin/header": "./src/admin/Header.tsx",
-    "./admin/logout-button": "./src/admin/LogoutButton.tsx",
-    "./admin/nav": "./src/admin/Nav.tsx",
-    "./admin/theme-toggle": "./src/admin/ThemeToggle.tsx",
-    "./admin/view-site": "./src/admin/ViewSite.tsx",
-    "./live-preview": "./src/live-preview/index.ts",
-    "./project": "./src/project.ts",
-    "./rich-text": "./src/rich-text/index.ts",
-    "./rich-text/client": "./src/rich-text/client.tsx",
-    "./starter": "./src/starter.ts",
-    "./starter/client": "./src/starter/client.tsx",
+    ".": "./dist/index.js",
+    "./admin/before-login": "./dist/admin/before-login.js",
+    "./admin/brand": "./dist/admin/brand.js",
+    "./admin/header": "./dist/admin/header.js",
+    "./admin/logout-button": "./dist/admin/logout-button.js",
+    "./admin/nav": "./dist/admin/nav.js",
+    "./admin/nav-client": "./dist/admin/nav-client.js",
+    "./admin/theme-toggle": "./dist/admin/theme-toggle.js",
+    "./admin/view-site": "./dist/admin/view-site.js",
+    "./live-preview": "./dist/live-preview.js",
+    "./project": "./dist/project.js",
+    "./rich-text": "./dist/rich-text.js",
+    "./rich-text/client": "./dist/rich-text-client.js",
+    "./starter": "./dist/starter.js",
+    "./starter/client": "./dist/starter-client.js",
     "./styles": "./src/styles/admin.scss",
-    "./text-style-runtime": "./src/TextStyleRuntime.tsx",
-    "./text-styles": "./src/textStyles.ts"
+    "./text-style-runtime": "./dist/text-style-runtime.js",
+    "./text-styles": "./dist/text-styles.js"
   },
   "peerDependencies": {
     "@lexical/react": ">=0.41.0",
@@ -51,5 +53,8 @@
     "payload": ">=3.88.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
+  },
+  "scripts": {
+    "build": "tsup"
   }
 }

package/src/TextStyleRuntime.tsx

@@ -1,90 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-
-import {
-  EDITABLE_PREVIEW_SELECTOR,
-  getEditableElementStyleKey,
-  getTextStyleCSS,
-  normalizeTextStyleMap,
-} from './textStyles'
-
-type OriginalStyle = {
-  boxSizing: string
-  fontFamily: string
-  lineHeight: string
-  marginLeft: string
-  marginRight: string
-  maxWidth: string
-  width: string
-}
-
-export const TextStyleRuntime = ({ styles }: { styles?: unknown }) => {
-  useEffect(() => {
-    const normalizedStyles = normalizeTextStyleMap(styles)
-    const originals = new Map<HTMLElement, OriginalStyle>()
-    let applyFrame = 0
-
-    const applyStyles = () => {
-      const fields = new Set(
-        document.querySelectorAll<HTMLElement>(`[data-wikex-field],${EDITABLE_PREVIEW_SELECTOR}`),
-      )
-
-      for (const element of fields) {
-        const fieldPath = element.dataset.wikexField || getEditableElementStyleKey(element)
-        if (!fieldPath || !normalizedStyles[fieldPath]) continue
-
-        if (!originals.has(element)) {
-          originals.set(element, {
-            boxSizing: element.style.boxSizing,
-            fontFamily: element.style.fontFamily,
-            lineHeight: element.style.lineHeight,
-            marginLeft: element.style.marginLeft,
-            marginRight: element.style.marginRight,
-            maxWidth: element.style.maxWidth,
-            width: element.style.width,
-          })
-        }
-
-        const style = getTextStyleCSS(normalizedStyles[fieldPath])
-        element.style.boxSizing = style.boxSizing || ''
-        element.style.fontFamily = style.fontFamily || ''
-        element.style.lineHeight = style.lineHeight || ''
-        element.style.marginLeft = style.marginLeft || ''
-        element.style.marginRight = style.marginRight || ''
-        element.style.maxWidth = style.maxWidth || ''
-        element.style.width = style.width || ''
-      }
-    }
-
-    const scheduleApplyStyles = () => {
-      if (applyFrame) return
-
-      applyFrame = window.requestAnimationFrame(() => {
-        applyFrame = 0
-        applyStyles()
-      })
-    }
-
-    applyStyles()
-    const observer = new MutationObserver(scheduleApplyStyles)
-    observer.observe(document.body, { childList: true, subtree: true })
-
-    return () => {
-      observer.disconnect()
-      window.cancelAnimationFrame(applyFrame)
-      for (const [element, original] of originals) {
-        if (!element.isConnected) continue
-        element.style.boxSizing = original.boxSizing
-        element.style.fontFamily = original.fontFamily
-        element.style.lineHeight = original.lineHeight
-        element.style.marginLeft = original.marginLeft
-        element.style.marginRight = original.marginRight
-        element.style.maxWidth = original.maxWidth
-        element.style.width = original.width
-      }
-    }
-  }, [styles])
-
-  return null
-}

package/src/admin/BeforeLogin.tsx

@@ -1,19 +0,0 @@
-'use client'
-
-import React from 'react'
-
-import { useAdminBrand } from './useAdminBrand'
-
-const BeforeLogin: React.FC = () => {
-  const { siteName } = useAdminBrand()
-
-  return (
-    <div className="admin-login-intro">
-      <span className="admin-login-intro__eyebrow">{siteName} · Trung tâm nội dung</span>
-      <h1>Chào mừng trở lại.</h1>
-      <p>Đăng nhập để quản lý nội dung, hình ảnh và xuất bản của {siteName}.</p>
-    </div>
-  )
-}
-
-export default BeforeLogin

package/src/admin/Brand.tsx

@@ -1,74 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import React from 'react'
-
-import { useAdminBrand } from './useAdminBrand'
-
-export type AdminBrandAsset = {
-  alt: string
-  height: number
-  url: string
-  width: number
-}
-
-const BrandLogo = ({
-  asset,
-  className,
-  height,
-  maxWidth,
-}: {
-  asset: AdminBrandAsset
-  className?: string
-  height: number
-  maxWidth: number
-  siteName: string
-}) => (
-  <span
-    className={['brand-logo', className].filter(Boolean).join(' ')}
-    style={{ alignItems: 'center', display: 'inline-flex', height, maxWidth }}
-  >
-    <Image
-      alt=""
-      height={asset.height}
-      src={asset.url}
-      style={{ height: '100%', maxWidth: '100%', objectFit: 'contain', width: 'auto' }}
-      unoptimized
-      width={asset.width}
-    />
-  </span>
-)
-
-export const AdminIcon: React.FC = () => {
-  const brand = useAdminBrand()
-
-  return (
-    <span className="aurea-brand aurea-brand--icon">
-      <BrandLogo
-        asset={brand.logo}
-        className="aurea-brand__image"
-        height={32}
-        maxWidth={32}
-        siteName={brand.siteName}
-      />
-    </span>
-  )
-}
-
-export const AdminLogo: React.FC = () => {
-  const brand = useAdminBrand()
-
-  return (
-    <span aria-label={brand.siteName} className="aurea-brand aurea-brand--logo" role="img">
-      <BrandLogo
-        asset={brand.logo}
-        className="aurea-brand__image"
-        height={42}
-        maxWidth={190}
-        siteName={brand.siteName}
-      />
-    </span>
-  )
-}
-
-export { configureAdminBrand, useAdminBrand, type AdminBrandSettings } from './useAdminBrand'

package/src/admin/Header.tsx

@@ -1,87 +0,0 @@
-'use client'
-
-import { Link, useAuth, useConfig, useNav } from '@payloadcms/ui'
-import { Menu, Settings2 } from 'lucide-react'
-import { formatAdminURL } from 'payload/shared'
-import React from 'react'
-
-import { AdminIcon } from './Brand'
-import AdminThemeToggle from './ThemeToggle'
-import AdminViewSite from './ViewSite'
-
-type AdminUser = {
-  email?: string
-  name?: string
-}
-
-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('')
-}
-
-const AdminHeader = () => {
-  const { user } = useAuth<AdminUser>()
-  const { setNavOpen } = useNav()
-  const {
-    config: {
-      admin: { routes: adminRoutes },
-      routes: { admin: adminRoute },
-    },
-  } = useConfig()
-
-  const userLabel = user?.name?.trim() || user?.email?.split('@')[0] || 'Quản trị viên'
-  const initials = getInitials(user?.name, user?.email)
-
-  return (
-    <header className="minimal-admin-header">
-      <div className="minimal-admin-header__left">
-        <button
-          aria-label="Mở menu quản trị"
-          className="minimal-admin-header__menu"
-          onClick={() => setNavOpen(true)}
-          type="button"
-        >
-          <Menu aria-hidden="true" />
-        </button>
-        <Link
-          aria-label="Về dashboard"
-          className="minimal-admin-header__mobile-brand"
-          href={adminRoute}
-          prefetch={false}
-        >
-          <AdminIcon />
-        </Link>
-      </div>
-
-      <div className="minimal-admin-header__actions">
-        <AdminViewSite />
-        <AdminThemeToggle />
-        <Link
-          aria-label={`Mở tài khoản ${userLabel}`}
-          className="minimal-admin-header__settings"
-          href={formatAdminURL({ adminRoute, path: adminRoutes.account })}
-          prefetch={false}
-          title="Cài đặt tài khoản"
-        >
-          <Settings2 aria-hidden="true" />
-        </Link>
-        <Link
-          aria-label={`Mở tài khoản ${userLabel}`}
-          className="minimal-admin-header__account"
-          href={formatAdminURL({ adminRoute, path: adminRoutes.account })}
-          prefetch={false}
-          title={userLabel}
-        >
-          <span>{initials}</span>
-        </Link>
-      </div>
-    </header>
-  )
-}
-
-export default AdminHeader

package/src/admin/LogoutButton.tsx

@@ -1,41 +0,0 @@
-'use client'
-
-import { Link, useConfig, useTranslation } from '@payloadcms/ui'
-import { LogOut } from 'lucide-react'
-import { formatAdminURL } from 'payload/shared'
-import React from 'react'
-
-type AdminLogoutButtonProps = {
-  tabIndex?: number
-}
-
-const AdminLogoutButton: React.FC<AdminLogoutButtonProps> = ({ tabIndex = 0 }) => {
-  const {
-    config: {
-      admin: {
-        routes: { logout: logoutRoute },
-      },
-      routes: { admin: adminRoute },
-    },
-  } = useConfig()
-  const { t } = useTranslation()
-  const label = t('authentication:logOut')
-
-  return (
-    <Link
-      aria-label={label}
-      className="admin-sign-out"
-      href={formatAdminURL({ adminRoute, path: logoutRoute })}
-      prefetch={false}
-      tabIndex={tabIndex}
-      title={label}
-    >
-      <span aria-hidden="true" className="admin-sign-out__icon">
-        <LogOut strokeWidth={2} />
-      </span>
-      <span className="admin-sign-out__label">{label}</span>
-    </Link>
-  )
-}
-
-export default AdminLogoutButton

package/src/admin/Nav.tsx

@@ -1,35 +0,0 @@
-import { getNavGroups } from '@payloadcms/ui/shared'
-import type { ServerProps, StaticLabel } from 'payload'
-import React from 'react'
-
-import { AdminNavClient, type AdminNavGroup } from './NavClient'
-
-const localizeLabel = (label: StaticLabel, language: string): string => {
-  if (typeof label === 'string') return label
-
-  return label[language] || Object.values(label)[0] || ''
-}
-
-const AdminNav = ({ i18n, payload, permissions, visibleEntities }: ServerProps) => {
-  if (!permissions || !visibleEntities) return null
-
-  const groups: AdminNavGroup[] = 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 <AdminNavClient groups={groups} />
-}
-
-export default AdminNav
-
-export { AdminNavClient, type AdminNavGroup } from './NavClient'