@wikex/admin-kit 0.2.0

package/src/live-preview/TextStyleInspector.tsx

@@ -0,0 +1,289 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+import {
+  normalizeTextStyleMap,
+  normalizeTextStyleValue,
+  TEXT_FONT_OPTIONS,
+  TEXT_LINE_HEIGHT_OPTIONS,
+  type TextFontFamily,
+  type TextLineHeight,
+  type TextStyleValue,
+} from '../textStyles'
+import type { VisualEditorDocumentTarget } from './runtimeConfig'
+
+export type TextInspectorSelection = VisualEditorDocumentTarget & {
+  canEditText: boolean
+  fieldPath: string
+  multiline: boolean
+  tagName: string
+  text: string
+}
+
+type TextStyleFormValues = {
+  fontFamily: TextFontFamily
+  lineHeight: TextLineHeight
+}
+
+const getErrorMessage = async (response: Response) => {
+  try {
+    const body = (await response.json()) as { errors?: { message?: string }[]; message?: string }
+    return body.errors?.[0]?.message || body.message
+  } catch {
+    return undefined
+  }
+}
+
+const getDocumentURL = (selection: TextInspectorSelection) =>
+  selection.kind === 'collection'
+    ? `/api/${selection.collection}/${encodeURIComponent(selection.documentID)}?depth=0&draft=true`
+    : `/api/globals/${selection.global}?depth=0&draft=true`
+
+export const saveTextStylePatch = async (
+  selection: TextInspectorSelection,
+  patch: TextStyleValue,
+  signal?: AbortSignal,
+) => {
+  const currentResponse = await fetch(getDocumentURL(selection), {
+    credentials: 'include',
+    signal,
+  })
+  if (!currentResponse.ok) {
+    throw new Error((await getErrorMessage(currentResponse)) || 'Không thể đọc dữ liệu hiện tại.')
+  }
+
+  const currentDocument = (await currentResponse.json()) as { textStyles?: unknown }
+  const textStyles = normalizeTextStyleMap(currentDocument.textStyles)
+  const nextStyle = normalizeTextStyleValue({
+    ...textStyles[selection.fieldPath],
+    ...patch,
+  })
+  const persistedStyle: TextStyleValue = {}
+
+  if (nextStyle.fontFamily && nextStyle.fontFamily !== 'default') {
+    persistedStyle.fontFamily = nextStyle.fontFamily
+  }
+  if (nextStyle.lineHeight && nextStyle.lineHeight !== 'default') {
+    persistedStyle.lineHeight = nextStyle.lineHeight
+  }
+  if (nextStyle.width) {
+    persistedStyle.width = nextStyle.width
+    persistedStyle.widthOffset = nextStyle.widthOffset
+  }
+
+  if (Object.keys(persistedStyle).length) {
+    textStyles[selection.fieldPath] = persistedStyle
+  } else {
+    delete textStyles[selection.fieldPath]
+  }
+
+  const response = await fetch(`${getDocumentURL(selection)}&autosave=true`, {
+    body: JSON.stringify({ _status: 'draft', textStyles }),
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    method: selection.kind === 'collection' ? 'PATCH' : 'POST',
+    signal,
+  })
+
+  if (!response.ok) {
+    throw new Error((await getErrorMessage(response)) || 'Không thể lưu thuộc tính text.')
+  }
+
+  return persistedStyle
+}
+
+export const TextStyleInspector = ({
+  onApply,
+  onTextApply,
+  selection,
+}: {
+  onApply: (values: TextStyleValue) => void
+  onTextApply: (value: string) => void
+  selection: TextInspectorSelection
+}) => {
+  const initialValues: TextStyleFormValues = {
+    fontFamily: 'default',
+    lineHeight: 'default',
+  }
+  const [values, setValues] = useState<TextStyleFormValues>(initialValues)
+  const [status, setStatus] = useState<'error' | 'idle' | 'loading' | 'saving' | 'success'>(
+    'loading',
+  )
+  const [message, setMessage] = useState('Đang tải thuộc tính…')
+  const [text, setText] = useState(selection.text)
+  const saveController = useRef<AbortController | null>(null)
+  const saveSequence = useRef(0)
+  const valuesRef = useRef<TextStyleFormValues>(initialValues)
+
+  useEffect(() => {
+    const controller = new AbortController()
+    saveController.current?.abort()
+    saveSequence.current += 1
+    setText(selection.text)
+    setStatus('loading')
+    setMessage('Đang tải thuộc tính…')
+
+    void fetch(getDocumentURL(selection), {
+      credentials: 'include',
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error((await getErrorMessage(response)) || 'Không thể tải thuộc tính text.')
+        }
+
+        const document = (await response.json()) as { textStyles?: unknown }
+        const savedStyle = normalizeTextStyleValue(
+          normalizeTextStyleMap(document.textStyles)[selection.fieldPath],
+        )
+        const nextValues: TextStyleFormValues = {
+          fontFamily: savedStyle.fontFamily || 'default',
+          lineHeight: savedStyle.lineHeight || 'default',
+        }
+        valuesRef.current = nextValues
+        setValues(nextValues)
+        setStatus('idle')
+        setMessage('')
+      })
+      .catch((error: unknown) => {
+        if (controller.signal.aborted) return
+        setStatus('error')
+        setMessage(error instanceof Error ? error.message : 'Không thể tải thuộc tính text.')
+      })
+
+    return () => {
+      controller.abort()
+      saveController.current?.abort()
+    }
+  }, [selection])
+
+  const save = async (nextValues: TextStyleFormValues) => {
+    saveController.current?.abort()
+    const controller = new AbortController()
+    const sequence = ++saveSequence.current
+    saveController.current = controller
+    setStatus('saving')
+    setMessage('Đang tự động lưu…')
+
+    try {
+      await saveTextStylePatch(
+        selection,
+        {
+          fontFamily: nextValues.fontFamily,
+          lineHeight: nextValues.lineHeight,
+        },
+        controller.signal,
+      )
+
+      if (sequence !== saveSequence.current) return
+      setStatus('success')
+      setMessage('Đã tự động lưu vào bản nháp. Bấm “Xuất bản thay đổi” để xuất bản.')
+    } catch (error) {
+      if (controller.signal.aborted || sequence !== saveSequence.current) return
+      setStatus('error')
+      setMessage(error instanceof Error ? error.message : 'Không thể tự động lưu thuộc tính text.')
+    }
+  }
+
+  const applyAndSave = (nextValues: TextStyleFormValues) => {
+    valuesRef.current = nextValues
+    setValues(nextValues)
+    onApply(nextValues)
+    void save(nextValues)
+  }
+
+  const disabled = status === 'loading'
+
+  return (
+    <section aria-label="Thuộc tính text" className="wikex-global-inspector wikex-text-inspector">
+      <div className="wikex-global-inspector__eyebrow">Thuộc tính văn bản</div>
+      <h2>{selection.tagName.toUpperCase()}</h2>
+      <p className="wikex-global-inspector__path">{selection.fieldPath}</p>
+
+      <label className="wikex-global-inspector__field">
+        <span>Nội dung</span>
+        {selection.multiline ? (
+          <textarea
+            disabled={!selection.canEditText}
+            onChange={(event) => {
+              setText(event.target.value)
+              onTextApply(event.target.value)
+            }}
+            rows={3}
+            value={text}
+          />
+        ) : (
+          <input
+            disabled={!selection.canEditText}
+            onChange={(event) => {
+              setText(event.target.value)
+              onTextApply(event.target.value)
+            }}
+            type="text"
+            value={text}
+          />
+        )}
+        {!selection.canEditText && (
+          <small className="wikex-text-inspector__hint">
+            Nội dung này nằm trong component tĩnh; có thể chỉnh kiểu chữ nhưng không thể sửa văn bản
+            từ CMS.
+          </small>
+        )}
+      </label>
+
+      <label className="wikex-global-inspector__field">
+        <span>Phông chữ</span>
+        <select
+          disabled={disabled}
+          onChange={(event) =>
+            applyAndSave({
+              ...valuesRef.current,
+              fontFamily: event.target.value as TextFontFamily,
+            })
+          }
+          value={values.fontFamily}
+        >
+          {TEXT_FONT_OPTIONS.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label className="wikex-global-inspector__field">
+        <span>Chiều cao dòng</span>
+        <select
+          disabled={disabled}
+          onChange={(event) =>
+            applyAndSave({
+              ...valuesRef.current,
+              lineHeight: event.target.value as TextLineHeight,
+            })
+          }
+          value={values.lineHeight}
+        >
+          {TEXT_LINE_HEIGHT_OPTIONS.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <div className="wikex-global-inspector__actions">
+        <button
+          className="wikex-global-inspector__reset"
+          disabled={disabled}
+          onClick={() => applyAndSave({ fontFamily: 'default', lineHeight: 'default' })}
+          type="button"
+        >
+          Đặt lại mặc định
+        </button>
+      </div>
+
+      {message && <p className={`wikex-global-inspector__status is-${status}`}>{message}</p>}
+    </section>
+  )
+}

package/src/live-preview/index.ts

@@ -0,0 +1,23 @@
+export { default } from './LivePreviewEditor'
+export {
+  GlobalInlineInspector,
+  readGlobal,
+  updateGlobalFields,
+  type EditableGlobalScope,
+  type GlobalInspectorSelection,
+  type InspectorValues,
+} from './GlobalInlineInspector'
+export {
+  saveTextStylePatch,
+  TextStyleInspector,
+  type TextInspectorSelection,
+} from './TextStyleInspector'
+export {
+  configureLivePreview,
+  type BlockPickerOption,
+  type BlockPickerScope,
+  type LivePreviewRuntimeConfig,
+  type VisualEditorDocumentTarget,
+  type VisualEditorRoute,
+  type VisualEditorScope,
+} from './runtimeConfig'

package/src/live-preview/runtimeConfig.ts

@@ -0,0 +1,52 @@
+export type BlockPickerScope = 'page' | 'post'
+
+export type BlockPickerOption = {
+  description: string
+  image?: string
+  label: string
+  payloadLabel?: string
+  slug: string
+}
+
+export type VisualEditorDocumentTarget =
+  | {
+      collection: string
+      documentID: string
+      kind: 'collection'
+    }
+  | {
+      global: string
+      kind: 'global'
+    }
+
+export type VisualEditorScope = 'content' | 'footer' | 'header'
+
+export type VisualEditorRoute = {
+  documentTarget: VisualEditorDocumentTarget | null
+  scope: VisualEditorScope
+  type: 'collection' | 'global'
+}
+
+export type LivePreviewRuntimeConfig = {
+  getVisualEditorRoute: (pathname: string) => VisualEditorRoute | null
+  pageBlocks: readonly BlockPickerOption[]
+  postBlocks: readonly BlockPickerOption[]
+}
+
+let runtimeConfig: LivePreviewRuntimeConfig = {
+  getVisualEditorRoute: () => null,
+  pageBlocks: [],
+  postBlocks: [],
+}
+
+export const configureLivePreview = (config: LivePreviewRuntimeConfig) => {
+  runtimeConfig = config
+}
+
+export const getVisualEditorRoute = (pathname: string) =>
+  runtimeConfig.getVisualEditorRoute(pathname)
+
+export const isVisualEditorRoute = (pathname: string) => Boolean(getVisualEditorRoute(pathname))
+
+export const getBlockPickerOptions = (scope: BlockPickerScope) =>
+  scope === 'post' ? runtimeConfig.postBlocks : runtimeConfig.pageBlocks

package/src/plugin.ts

@@ -0,0 +1,70 @@
+import type { Config, Plugin } from 'payload'
+
+export type WikexAdminPluginOptions = {
+  components?: {
+    beforeDashboard?: false | string
+    provider?: false | string
+  }
+  enabled?: boolean
+}
+
+const appendUnique = <T>(current: T[] | undefined, additions: T[]) => [
+  ...new Set([...(current ?? []), ...additions]),
+]
+
+/**
+ * Reusable Payload admin shell. This plugin deliberately owns only generic admin
+ * behavior; project collections, globals and blocks are assembled separately by
+ * the project module registry.
+ */
+export const wikexAdminPlugin = (options: WikexAdminPluginOptions = {}): Plugin => {
+  return (config: Config): Config => {
+    if (options.enabled === false) return config
+
+    const admin = config.admin ?? {}
+    const components = admin.components ?? {}
+    const beforeDashboard = options.components?.beforeDashboard
+    const provider = options.components?.provider
+
+    return {
+      ...config,
+      admin: {
+        ...admin,
+        components: {
+          ...components,
+          Nav: components.Nav ?? '@wikex/admin-kit/admin/nav',
+          actions: appendUnique(components.actions, [
+            '@wikex/admin-kit/admin/theme-toggle',
+            '@wikex/admin-kit/admin/view-site',
+          ]),
+          beforeDashboard:
+            typeof beforeDashboard !== 'string'
+              ? components.beforeDashboard
+              : appendUnique(components.beforeDashboard, [beforeDashboard]),
+          beforeLogin: appendUnique(components.beforeLogin, [
+            '@wikex/admin-kit/admin/before-login',
+          ]),
+          graphics: {
+            Icon: components.graphics?.Icon ?? '@wikex/admin-kit/admin/brand#AdminIcon',
+            Logo: components.graphics?.Logo ?? '@wikex/admin-kit/admin/brand#AdminLogo',
+          },
+          header: appendUnique(components.header, ['@wikex/admin-kit/admin/header']),
+          logout: {
+            Button: components.logout?.Button ?? '@wikex/admin-kit/admin/logout-button',
+          },
+          providers:
+            typeof provider !== 'string'
+              ? components.providers
+              : appendUnique(components.providers, [provider]),
+        },
+        livePreview: admin.livePreview ?? {
+          breakpoints: [
+            { height: 667, label: 'Điện thoại', name: 'mobile', width: 375 },
+            { height: 1024, label: 'Máy tính bảng', name: 'tablet', width: 768 },
+            { height: 900, label: 'Máy tính', name: 'desktop', width: 1440 },
+          ],
+        },
+      },
+    }
+  }
+}

package/src/project.ts

@@ -0,0 +1,82 @@
+import type { VisualEditorRoute, VisualEditorScope } from './live-preview/runtimeConfig'
+
+export type WikexProjectDefinition<TModuleID extends string = string> = {
+  admin?: {
+    collectionOrder?: readonly string[]
+    globalOrder?: readonly string[]
+  }
+  brand: {
+    description: string
+    logo: {
+      height: number
+      url: string
+      width: number
+    }
+    name: string
+  }
+  homepage?: {
+    defaultMode: 'builder' | 'preset'
+  }
+  id: string
+  modules: readonly TModuleID[]
+}
+
+export const defineWikexProject = <
+  const TModuleID extends string,
+  const TProject extends WikexProjectDefinition<TModuleID>,
+>(
+  project: TProject,
+) => project
+
+export type VisualEditorRouteRegistry = {
+  collections?: readonly string[]
+  globals?: Readonly<Record<string, VisualEditorScope>> | readonly string[]
+}
+
+const normalizeGlobalScopes = (globals: VisualEditorRouteRegistry['globals']) => {
+  if (!globals) return new Map<string, VisualEditorScope>()
+  if (Array.isArray(globals)) {
+    return new Map(globals.map((slug) => [slug, 'content' as const]))
+  }
+  return new Map(Object.entries(globals) as [string, VisualEditorScope][])
+}
+
+/**
+ * Creates the route adapter consumed by Live Preview without coupling the admin
+ * kit to collection names from a specific website.
+ */
+export const createVisualEditorRouteResolver = (registry: VisualEditorRouteRegistry) => {
+  const collections = new Set(registry.collections ?? [])
+  const globals = normalizeGlobalScopes(registry.globals)
+
+  return (pathname: string): VisualEditorRoute | null => {
+    const collectionMatch = pathname.match(/\/collections\/([^/?#]+)\/([^/?#]+)/)
+
+    if (collectionMatch && collections.has(collectionMatch[1])) {
+      const collection = collectionMatch[1]
+      const rawDocumentID = decodeURIComponent(collectionMatch[2])
+
+      return {
+        documentTarget:
+          rawDocumentID === 'create'
+            ? null
+            : { collection, documentID: rawDocumentID, kind: 'collection' },
+        scope: 'content',
+        type: 'collection',
+      }
+    }
+
+    const globalMatch = pathname.match(/\/globals\/([^/?#]+)/)
+    const global = globalMatch?.[1]
+
+    if (global && globals.has(global)) {
+      return {
+        documentTarget: { global, kind: 'global' },
+        scope: globals.get(global) ?? 'content',
+        type: 'global',
+      }
+    }
+
+    return null
+  }
+}