@actuate-media/cms-admin 0.14.1 → 0.16.0

package/src/__tests__/lib/post-editor-service.test.ts

@@ -0,0 +1,215 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// `cmsApi` is the only I/O dependency; mock it so the service is tested
+// hermetically. Responses follow the SDK `{ data, error }` envelope.
+const cmsApiMock = vi.fn()
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApiMock(...args),
+}))
+
+const {
+  validatePost,
+  validateTemplate,
+  emptyPostFromTemplate,
+  fetchTemplateForEditor,
+  savePostDraft,
+} = await import('../../lib/post-editor-service.js')
+
+type EditorPostT = Awaited<ReturnType<typeof emptyPostFromTemplate>>
+
+function basePost(over: Partial<EditorPostT> = {}): EditorPostT {
+  return {
+    id: 'p1',
+    postType: 'blog',
+    title: 'Hello',
+    slug: 'hello',
+    excerpt: '',
+    featuredImage: '',
+    body: '',
+    category: '',
+    status: 'DRAFT',
+    publishDate: null,
+    sections: [],
+    seoTitle: '',
+    seoDescription: '',
+    publishedAt: null,
+    updatedAt: null,
+    ...over,
+  }
+}
+
+beforeEach(() => {
+  cmsApiMock.mockReset()
+})
+
+describe('validatePost', () => {
+  it('requires title + slug', () => {
+    const r = validatePost(basePost({ title: '', slug: '' }), false)
+    expect(r.errors).toContain('Post title is required.')
+    expect(r.errors).toContain('Post slug is required.')
+  })
+
+  it('does not run section validation for draft saves', () => {
+    const r = validatePost(
+      basePost({
+        sections: [
+          {
+            id: 's1',
+            sectionType: 'quote',
+            name: 'Quote',
+            visible: true,
+            content: {},
+            settings: {},
+          },
+        ],
+      }),
+      false,
+    )
+    expect(r.errors).toEqual([])
+  })
+
+  it('runs section + SEO checks at publish time', () => {
+    const r = validatePost(
+      basePost({
+        sections: [
+          // missing required `quote` field → blocking section error
+          {
+            id: 's1',
+            sectionType: 'quote',
+            name: 'Quote',
+            visible: true,
+            content: {},
+            settings: {},
+          },
+        ],
+      }),
+      true,
+    )
+    expect(r.errors.some((e) => e.startsWith('Quote:'))).toBe(true)
+    expect(r.warnings.some((w) => w.includes('SEO title'))).toBe(true)
+  })
+
+  it('skips hidden sections during publish validation', () => {
+    const r = validatePost(
+      basePost({
+        seoTitle: 'T',
+        seoDescription: 'D',
+        sections: [
+          {
+            id: 's1',
+            sectionType: 'quote',
+            name: 'Quote',
+            visible: false,
+            content: {},
+            settings: {},
+          },
+        ],
+      }),
+      true,
+    )
+    expect(r.errors).toEqual([])
+  })
+})
+
+describe('validateTemplate', () => {
+  it('validates only visible section content', () => {
+    const r = validateTemplate({
+      docId: null,
+      postType: 'blog',
+      header: {
+        layout: 'centered',
+        showFeaturedImage: true,
+        showExcerpt: true,
+        showAuthor: true,
+        showDate: true,
+        showCategory: true,
+        showReadingTime: false,
+      },
+      sections: [
+        { id: 's1', sectionType: 'quote', name: 'Quote', visible: true, content: {}, settings: {} },
+      ],
+    })
+    expect(r.errors.some((e) => e.startsWith('Quote:'))).toBe(true)
+  })
+})
+
+describe('emptyPostFromTemplate', () => {
+  it('seeds sections from the type template with fresh ids', async () => {
+    // fetchTemplateForEditor lists the post-templates collection.
+    cmsApiMock.mockResolvedValueOnce({
+      data: {
+        docs: [
+          {
+            id: 'tmpl-1',
+            slug: 'blog',
+            data: {
+              header: { layout: 'left' },
+              sections: [
+                {
+                  id: 'orig',
+                  sectionType: 'article-body',
+                  name: 'Body',
+                  visible: true,
+                  content: {},
+                  settings: {},
+                },
+              ],
+            },
+          },
+        ],
+      },
+    })
+    const post = await emptyPostFromTemplate('blog')
+    expect(post.id).toBeNull()
+    expect(post.postType).toBe('blog')
+    expect(post.sections).toHaveLength(1)
+    expect(post.sections[0]!.sectionType).toBe('article-body')
+    // cloned: a fresh id, not the template's section id
+    expect(post.sections[0]!.id).not.toBe('orig')
+  })
+
+  it('starts empty when the type has no template', async () => {
+    cmsApiMock.mockResolvedValueOnce({ data: { docs: [] } })
+    const post = await emptyPostFromTemplate('news')
+    expect(post.sections).toEqual([])
+  })
+})
+
+describe('fetchTemplateForEditor', () => {
+  it('returns an unsaved default when no template document matches', async () => {
+    cmsApiMock.mockResolvedValueOnce({ data: { docs: [] } })
+    const t = await fetchTemplateForEditor('blog')
+    expect(t.docId).toBeNull()
+    expect(t.header.layout).toBe('centered')
+    expect(t.sections).toEqual([])
+  })
+})
+
+describe('savePostDraft', () => {
+  it('PUTs the post fields + sections for an existing post', async () => {
+    cmsApiMock.mockResolvedValueOnce({
+      data: { id: 'p1', title: 'Hello', slug: 'hello', status: 'DRAFT', data: { sections: [] } },
+    })
+    await savePostDraft(basePost({ body: 'Body copy', category: 'News' }))
+    expect(cmsApiMock).toHaveBeenCalledTimes(1)
+    const [endpoint, init] = cmsApiMock.mock.calls[0]!
+    expect(endpoint).toBe('/collections/blog/p1')
+    expect(init.method).toBe('PUT')
+    const body = JSON.parse(init.body as string)
+    expect(body.title).toBe('Hello')
+    expect(body.body).toBe('Body copy')
+    expect(body.category).toBe('News')
+    expect(Array.isArray(body.sections)).toBe(true)
+  })
+
+  it('POSTs to create when the post has no id', async () => {
+    cmsApiMock.mockResolvedValueOnce({
+      data: { id: 'new1', title: 'Hello', slug: 'hello', status: 'DRAFT', data: {} },
+    })
+    const out = await savePostDraft(basePost({ id: null }))
+    const [endpoint, init] = cmsApiMock.mock.calls[0]!
+    expect(endpoint).toBe('/collections/blog')
+    expect(init.method).toBe('POST')
+    expect(out.id).toBe('new1')
+  })
+})

package/src/__tests__/lib/posts-service.test.ts

@@ -0,0 +1,279 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// `cmsApi` is the only dependency the service uses; we mock it so the
+// tests run hermetically without an HTTP server. Each mocked response
+// follows the SDK's `{ data, error }` envelope.
+const cmsApiMock = vi.fn()
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApiMock(...args),
+}))
+
+const { fetchPosts, fetchPostTypes } = await import('../../lib/posts-service.js')
+
+interface DocFixture {
+  id: string
+  collection: string
+  title: string
+  slug: string
+  status: 'PUBLISHED' | 'DRAFT' | 'SCHEDULED'
+  createdById: string
+  updatedById: string
+  publishedAt: string | null
+  scheduledAt: string | null
+  createdAt: string
+  updatedAt: string
+  data: Record<string, unknown> | null
+}
+
+function doc(
+  o: Partial<DocFixture> & Pick<DocFixture, 'id' | 'collection' | 'title' | 'slug'>,
+): DocFixture {
+  return {
+    status: 'PUBLISHED',
+    createdById: 'u-david',
+    updatedById: 'u-david',
+    publishedAt: '2026-05-10T00:00:00.000Z',
+    scheduledAt: null,
+    createdAt: '2026-05-10T00:00:00.000Z',
+    updatedAt: '2026-05-10T00:00:00.000Z',
+    data: { seoScore: 80 },
+    ...o,
+  }
+}
+
+const COLLECTIONS_RESPONSE = [
+  {
+    slug: 'blog',
+    labels: { singular: 'Blog Post', plural: 'Blog' },
+    type: 'post',
+    urlPrefix: 'blog',
+    description: 'Blog posts',
+    icon: 'file-text',
+    color: 'purple',
+    group: 'Posts',
+    hidden: false,
+    fieldCount: 12,
+  },
+  {
+    slug: 'case-studies',
+    labels: { singular: 'Case Study', plural: 'Case Studies' },
+    type: 'post',
+    urlPrefix: 'case-studies',
+    description: 'Case studies',
+    icon: 'briefcase',
+    color: 'green',
+    group: 'Posts',
+    hidden: false,
+    fieldCount: 13,
+  },
+  {
+    slug: 'news',
+    labels: { singular: 'News Item', plural: 'News' },
+    type: 'post',
+    urlPrefix: 'news',
+    description: 'News',
+    icon: 'newspaper',
+    color: 'orange',
+    group: 'Posts',
+    hidden: false,
+    fieldCount: 11,
+  },
+  {
+    slug: 'pages',
+    labels: { singular: 'Page', plural: 'Pages' },
+    type: 'page',
+    urlPrefix: '',
+    description: null,
+    icon: null,
+    color: null,
+    group: null,
+    hidden: false,
+    fieldCount: 5,
+  },
+]
+
+const USERS_RESPONSE = {
+  users: [
+    { id: 'u-sarah', name: 'Sarah Morgan', email: 'sarah@example.com' },
+    { id: 'u-maria', name: 'Maria K', email: 'maria@example.com' },
+    { id: 'u-david', name: 'David Carlson', email: 'david@example.com' },
+  ],
+}
+
+const DOCS: Record<string, DocFixture[]> = {
+  blog: [
+    doc({
+      id: 'b1',
+      collection: 'blog',
+      title: 'The Future of AI Content Marketing',
+      slug: 'ai-content-marketing',
+      createdById: 'u-maria',
+      updatedById: 'u-maria',
+      updatedAt: '2026-05-18T00:00:00.000Z',
+      data: { seoScore: 88 },
+    }),
+    doc({
+      id: 'b2',
+      collection: 'blog',
+      title: 'ActuateCMS vs Contentful',
+      slug: 'actuatecms-vs-contentful',
+      updatedAt: '2026-05-15T00:00:00.000Z',
+      data: { seoScore: 92 },
+    }),
+    doc({
+      id: 'b3',
+      collection: 'blog',
+      title: 'Mid-Year Review',
+      slug: 'mid-year-cms-trends',
+      status: 'DRAFT',
+      createdById: 'u-sarah',
+      updatedById: 'u-sarah',
+      publishedAt: null,
+      updatedAt: '2026-05-22T00:00:00.000Z',
+      data: { seoScore: null },
+    }),
+  ],
+  'case-studies': [
+    doc({
+      id: 'c1',
+      collection: 'case-studies',
+      title: 'Healthcare Client SEO Results',
+      slug: 'healthcare-seo',
+      status: 'DRAFT',
+      publishedAt: null,
+      updatedAt: '2026-05-19T00:00:00.000Z',
+      data: { seoScore: 38 },
+    }),
+  ],
+  news: [
+    doc({
+      id: 'n1',
+      collection: 'news',
+      title: 'Q2 2026 Product Roadmap Update',
+      slug: 'q2-roadmap',
+      status: 'SCHEDULED',
+      createdById: 'u-sarah',
+      updatedById: 'u-sarah',
+      publishedAt: null,
+      scheduledAt: '2026-06-01T00:00:00.000Z',
+      updatedAt: '2026-05-24T00:00:00.000Z',
+      data: { seoScore: 62 },
+    }),
+  ],
+}
+
+function installDefaultMocks() {
+  cmsApiMock.mockImplementation((url: string) => {
+    if (url === '/collections') return { data: COLLECTIONS_RESPONSE }
+    if (url.startsWith('/users')) return { data: USERS_RESPONSE }
+    const m = url.match(/^\/collections\/([^/?]+)/)
+    if (m && m[1]) {
+      const slug = decodeURIComponent(m[1])
+      return { data: { docs: DOCS[slug] ?? [], total: DOCS[slug]?.length ?? 0 } }
+    }
+    return { error: `unexpected url: ${url}` }
+  })
+}
+
+describe('posts-service.fetchPostTypes', () => {
+  beforeEach(() => {
+    cmsApiMock.mockReset()
+    installDefaultMocks()
+  })
+
+  it('returns only post-typed collections (filters out type: page)', async () => {
+    const types = await fetchPostTypes()
+    expect(types.map((t) => t.slug).sort()).toEqual(['blog', 'case-studies', 'news'])
+  })
+
+  it('maps collection metadata onto the PostType shape', async () => {
+    const types = await fetchPostTypes()
+    const blog = types.find((t) => t.slug === 'blog')
+    expect(blog).toMatchObject({
+      id: 'blog',
+      slug: 'blog',
+      name: 'Blog',
+      singularName: 'Blog Post',
+      description: 'Blog posts',
+      urlBase: '/blog',
+      accentColor: 'purple',
+      icon: 'file-text',
+      fieldCount: 12,
+      active: true,
+    })
+    // postCount is 0 here because fetchPostTypes doesn't load docs.
+    expect(blog?.postCount).toBe(0)
+  })
+})
+
+describe('posts-service.fetchPosts', () => {
+  beforeEach(() => {
+    cmsApiMock.mockReset()
+    installDefaultMocks()
+  })
+
+  it('aggregates posts across all post-typed collections', async () => {
+    const res = await fetchPosts({ pageSize: 20 })
+    expect(res.total).toBe(5)
+    expect(res.posts.map((p) => p.id).sort()).toEqual(['b1', 'b2', 'b3', 'c1', 'n1'])
+  })
+
+  it('joins authors via /users', async () => {
+    const res = await fetchPosts({ pageSize: 20 })
+    const ai = res.posts.find((p) => p.id === 'b1')
+    expect(ai?.authorName).toBe('Maria K')
+    expect(ai?.authorInitials).toBe('MK')
+  })
+
+  it('sorts by updated date desc by default and surfaces scheduled date for SCHEDULED posts', async () => {
+    const res = await fetchPosts({ pageSize: 20 })
+    // The SCHEDULED news post should win the "date" sort because its
+    // scheduledAt is the most recent date in the fixture set.
+    expect(res.posts[0]?.id).toBe('n1')
+    expect(res.posts[0]?.publishDate).toBe('2026-06-01T00:00:00.000Z')
+  })
+
+  it('filters by postType', async () => {
+    const res = await fetchPosts({ postType: 'blog', pageSize: 20 })
+    expect(res.total).toBe(3)
+    expect(res.posts.every((p) => p.postTypeId === 'blog')).toBe(true)
+  })
+
+  it('filters by status', async () => {
+    const res = await fetchPosts({ status: 'DRAFT', pageSize: 20 })
+    expect(res.posts.map((p) => p.id).sort()).toEqual(['b3', 'c1'])
+  })
+
+  it('filters by author', async () => {
+    const res = await fetchPosts({ author: 'u-sarah', pageSize: 20 })
+    expect(res.posts.map((p) => p.id).sort()).toEqual(['b3', 'n1'])
+  })
+
+  it('searches across title, slug, author name, and post type', async () => {
+    const res = await fetchPosts({ search: 'roadmap' })
+    expect(res.posts).toHaveLength(1)
+    expect(res.posts[0]?.id).toBe('n1')
+  })
+
+  it('paginates and exposes the unfiltered tab counts', async () => {
+    const res = await fetchPosts({ pageSize: 2 })
+    expect(res.posts).toHaveLength(2)
+    expect(res.total).toBe(5)
+    const blogTab = res.types.find((t) => t.slug === 'blog')
+    expect(blogTab?.postCount).toBe(3)
+    const newsTab = res.types.find((t) => t.slug === 'news')
+    expect(newsTab?.postCount).toBe(1)
+  })
+
+  it('returns only authors actually present on posts', async () => {
+    const res = await fetchPosts({ pageSize: 20 })
+    expect(res.authors.map((a) => a.id).sort()).toEqual(['u-david', 'u-maria', 'u-sarah'])
+  })
+
+  it('uses the postType filter to scope the result set without touching the tab counts', async () => {
+    const res = await fetchPosts({ postType: 'news', pageSize: 20 })
+    expect(res.total).toBe(1)
+    // Tab counts still reflect the full corpus.
+    expect(res.types.find((t) => t.slug === 'blog')?.postCount).toBe(3)
+  })
+})

package/src/__tests__/views/posts-list-view.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest'
+import { pageNumbers } from '../../views/Posts/PostsListView.js'
+import { renderSnippet } from '../../views/Posts/NewPostTypeInstructions.js'
+import { POST_TYPE_PRESETS } from '../../views/Posts/post-type-presets.js'
+import { POST_TYPE_ICONS } from '../../components/posts/icons.js'
+
+/**
+ * `pageNumbers` is the only pure helper exported from PostsListView.
+ * It drives the pagination footer's sliding window so the bug-prone
+ * cases (single page, exact-window boundary, ellipsis on either end)
+ * have explicit coverage.
+ */
+describe('pageNumbers', () => {
+  it('returns 1..N when total ≤ 7', () => {
+    expect(pageNumbers(1, 1)).toEqual([1])
+    expect(pageNumbers(3, 5)).toEqual([1, 2, 3, 4, 5])
+    expect(pageNumbers(4, 7)).toEqual([1, 2, 3, 4, 5, 6, 7])
+  })
+
+  it('shows leading and trailing ellipses for a mid-range page', () => {
+    expect(pageNumbers(50, 100)).toEqual([1, '…', 49, 50, 51, '…', 100])
+  })
+
+  it('hides leading ellipsis when current is near the start', () => {
+    expect(pageNumbers(2, 20)).toEqual([1, 2, 3, '…', 20])
+  })
+
+  it('hides trailing ellipsis when current is near the end', () => {
+    expect(pageNumbers(19, 20)).toEqual([1, '…', 18, 19, 20])
+  })
+})
+
+describe('renderSnippet', () => {
+  const base = {
+    slug: 'reviews',
+    singular: 'Review',
+    plural: 'Reviews',
+    color: 'purple' as const,
+    icon: 'file-text' as const,
+    description: 'Reviews',
+  }
+
+  it('emits a valid-looking collection entry with the slug, labels, and admin metadata', () => {
+    const out = renderSnippet({ ...base, extraFields: [] })
+    expect(out).toContain("'reviews': {")
+    expect(out).toContain("slug: 'reviews'")
+    expect(out).toContain("singular: 'Review'")
+    expect(out).toContain("type: 'post'")
+    expect(out).toContain("group: 'Posts'")
+    expect(out).toContain("color: 'purple'")
+    // No type-specific block when there are no extra fields.
+    expect(out).not.toContain('type-specific fields')
+  })
+
+  it('injects preset extra fields after the shared base fields', () => {
+    const out = renderSnippet({
+      ...base,
+      extraFields: ["client: { type: 'text', label: 'Client Name' },"],
+    })
+    expect(out).toContain('// type-specific fields')
+    expect(out).toContain("client: { type: 'text', label: 'Client Name' },")
+    // Base fields are still present alongside the injected ones.
+    expect(out).toContain("title: { type: 'text', label: 'Title', required: true },")
+    expect(out).toContain("metaDescription: { type: 'text', label: 'SEO Description' },")
+  })
+
+  it('escapes single quotes in free-text fields so the snippet stays valid', () => {
+    const out = renderSnippet({
+      ...base,
+      description: "Editors' picks",
+      extraFields: [],
+    })
+    expect(out).toContain("description: 'Editors\\' picks'")
+  })
+
+  it('falls back to a placeholder slug when slug is empty', () => {
+    const out = renderSnippet({ ...base, slug: '', extraFields: [] })
+    expect(out).toContain("'new-type': {")
+  })
+})
+
+describe('POST_TYPE_PRESETS', () => {
+  it('has unique keys and slugs', () => {
+    const keys = POST_TYPE_PRESETS.map((p) => p.key)
+    const slugs = POST_TYPE_PRESETS.map((p) => p.slug)
+    expect(new Set(keys).size).toBe(keys.length)
+    expect(new Set(slugs).size).toBe(slugs.length)
+  })
+
+  it('only references icons that exist in the shared icon registry', () => {
+    for (const preset of POST_TYPE_PRESETS) {
+      expect(POST_TYPE_ICONS[preset.icon]).toBeDefined()
+    }
+  })
+
+  it('uses only palette colors the badge component understands', () => {
+    const allowed = new Set(['purple', 'green', 'orange', 'blue', 'red', 'pink'])
+    for (const preset of POST_TYPE_PRESETS) {
+      expect(allowed.has(preset.color)).toBe(true)
+    }
+  })
+
+  it('every preset extra field line is a complete key: { … }, definition', () => {
+    for (const preset of POST_TYPE_PRESETS) {
+      for (const line of preset.extraFields) {
+        expect(line).toMatch(/^[a-zA-Z][\w]*: \{.*\},$/)
+      }
+    }
+  })
+})

package/src/components/pages/tag-badges.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { paletteFor } from '../posts/badges.js'
+
+/**
+ * Tag UI for the Pages area. Two variants:
+ *   - PageTagChip — interactive filter chip (filter bar). Toggles a tag
+ *     on/off; announces pressed state for screen readers.
+ *   - PageTagPill — static inline pill (Tags column). Compact, with a
+ *     colored dot so tags don't rely on color alone.
+ *
+ * Both resolve color through the shared `paletteFor` palette so they
+ * stay consistent with Post Type badges and work in light/dark mode.
+ */
+
+const DOT_COLOR: Record<string, string> = {
+  purple: 'bg-violet-500',
+  green: 'bg-emerald-500',
+  orange: 'bg-amber-500',
+  red: 'bg-red-500',
+  blue: 'bg-blue-500',
+  pink: 'bg-pink-500',
+  gray: 'bg-muted-foreground',
+}
+
+export function tagDotColor(color: string | null | undefined): string {
+  if (!color) return DOT_COLOR.gray!
+  return DOT_COLOR[color] ?? DOT_COLOR.gray!
+}
+
+export function PageTagChip({
+  name,
+  color,
+  count,
+  selected,
+  onToggle,
+}: {
+  name: string
+  color: string | null
+  count?: number
+  selected: boolean
+  onToggle: () => void
+}) {
+  const p = paletteFor(color)
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={selected}
+      className={`focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 ${
+        selected
+          ? `${p.bg} ${p.text} border-transparent ring-1 ${p.ring}`
+          : 'border-border bg-background text-foreground hover:bg-accent'
+      }`}
+    >
+      <span aria-hidden className={`h-2 w-2 rounded-full ${tagDotColor(color)}`} />
+      {name}
+      {typeof count === 'number' && (
+        <span className="text-muted-foreground tabular-nums">{count}</span>
+      )}
+    </button>
+  )
+}
+
+export function PageTagPill({ name, color }: { name: string; color: string | null }) {
+  const p = paletteFor(color)
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`}
+    >
+      <span aria-hidden className={`h-1.5 w-1.5 rounded-full ${tagDotColor(color)}`} />
+      {name}
+    </span>
+  )
+}
+
+export function PageTagsCell({
+  tagSlugs,
+  primaryTagId,
+  resolve,
+}: {
+  tagSlugs: string[]
+  primaryTagId: string | null
+  resolve: (slug: string) => { name: string; color: string | null } | undefined
+}) {
+  if (tagSlugs.length === 0) {
+    return <span className="text-muted-foreground text-xs">—</span>
+  }
+  // Show the primary tag first, then the rest, so grouping context is
+  // visible at a glance.
+  const ordered = [...tagSlugs].sort((a, b) => {
+    if (a === primaryTagId) return -1
+    if (b === primaryTagId) return 1
+    return 0
+  })
+  return (
+    <div className="flex flex-wrap items-center gap-1">
+      {ordered.map((slug) => {
+        const tag = resolve(slug)
+        return <PageTagPill key={slug} name={tag?.name ?? slug} color={tag?.color ?? null} />
+      })}
+    </div>
+  )
+}