@bobbykim/manguito-cms-admin 0.1.0 → 0.2.0

package/src/components/fields/__tests__/DatePicker.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import DatePicker from '../DatePicker.vue'
+
+function makeField(overrides: Partial<ParsedField> = {}): ParsedField {
+  return {
+    name: 'published_at',
+    label: 'Published At',
+    field_type: 'date',
+    required: false,
+    nullable: true,
+    order: 0,
+    validation: { required: false },
+    db_column: { column_name: 'published_at', column_type: 'timestamp', nullable: true },
+    ui_component: { component: 'date-picker' },
+    ...overrides,
+  }
+}
+
+describe('DatePicker', () => {
+  it('emits an ISO string on change', async () => {
+    const wrapper = mount(DatePicker, {
+      props: { field: makeField(), modelValue: '' },
+    })
+    await wrapper.find('input').setValue('2024-06-15T10:30')
+    const emitted = wrapper.emitted('update:modelValue')!
+    expect(emitted[emitted.length - 1]).toEqual(['2024-06-15T10:30:00.000Z'])
+  })
+
+  it('applies the disabled prop to the input', () => {
+    const wrapper = mount(DatePicker, {
+      props: { field: makeField(), modelValue: '', disabled: true },
+    })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+})

package/src/components/fields/__tests__/EnumSelect.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import EnumSelect from '../EnumSelect.vue'
+
+function makeField(overrides: Partial<ParsedField> = {}): ParsedField {
+  return {
+    name: 'status',
+    label: 'Status',
+    field_type: 'enum',
+    required: false,
+    nullable: true,
+    order: 0,
+    validation: { required: false, allowed_values: ['draft', 'published', 'archived'] },
+    db_column: { column_name: 'status', column_type: 'varchar', nullable: true },
+    ui_component: { component: 'select', options: ['draft', 'published', 'archived'] },
+    ...overrides,
+  }
+}
+
+describe('EnumSelect', () => {
+  it('renders an option for each allowed_value', () => {
+    const wrapper = mount(EnumSelect, {
+      props: { field: makeField(), modelValue: '' },
+    })
+    const options = wrapper.findAll('option').map(o => o.text())
+    expect(options).toContain('draft')
+    expect(options).toContain('published')
+    expect(options).toContain('archived')
+  })
+
+  it('emits the selected value on change', async () => {
+    const wrapper = mount(EnumSelect, {
+      props: { field: makeField(), modelValue: '' },
+    })
+    await wrapper.find('select').setValue('published')
+    const emitted = wrapper.emitted('update:modelValue')!
+    expect(emitted[emitted.length - 1]).toEqual(['published'])
+  })
+
+  it('shows "No options available" when allowed_values is empty', () => {
+    const wrapper = mount(EnumSelect, {
+      props: {
+        field: makeField({
+          validation: { required: false, allowed_values: [] },
+          ui_component: { component: 'select', options: [] },
+        }),
+        modelValue: '',
+      },
+    })
+    expect(wrapper.text()).toContain('No options available')
+  })
+})

package/src/components/fields/__tests__/NumberInput.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import NumberInput from '../NumberInput.vue'
+
+function makeField(overrides: Partial<ParsedField> = {}): ParsedField {
+  return {
+    name: 'count',
+    label: 'Count',
+    field_type: 'integer',
+    required: false,
+    nullable: true,
+    order: 0,
+    validation: { required: false },
+    db_column: { column_name: 'count', column_type: 'integer', nullable: true },
+    ui_component: { component: 'number-input', step: 1 },
+    ...overrides,
+  }
+}
+
+describe('NumberInput', () => {
+  it('emits numeric value on change', async () => {
+    const wrapper = mount(NumberInput, {
+      props: { field: makeField(), modelValue: null },
+    })
+    const input = wrapper.find('input')
+    await input.setValue('42')
+    const emitted = wrapper.emitted('update:modelValue')!
+    expect(emitted[emitted.length - 1]).toEqual([42])
+  })
+
+  it('integer field has step attribute of 1', () => {
+    const wrapper = mount(NumberInput, {
+      props: { field: makeField({ field_type: 'integer' }), modelValue: null },
+    })
+    expect(wrapper.find('input').attributes('step')).toBe('1')
+  })
+
+  it('float field has step attribute of 0.01', () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        field: makeField({
+          field_type: 'float',
+          db_column: { column_name: 'price', column_type: 'decimal', nullable: true },
+          ui_component: { component: 'number-input', step: 0.01 },
+        }),
+        modelValue: null,
+      },
+    })
+    expect(wrapper.find('input').attributes('step')).toBe('0.01')
+  })
+
+  it('applies min and max from field.validation to input attributes', () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        field: makeField({ validation: { required: false, min: 0, max: 100 } }),
+        modelValue: null,
+      },
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('min')).toBe('0')
+    expect(input.attributes('max')).toBe('100')
+  })
+})

package/src/components/fields/__tests__/ReferenceSelect.test.ts

@@ -0,0 +1,196 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { http, HttpResponse } from 'msw'
+import type { ParsedField, ParsedContentType } from '@bobbykim/manguito-cms-core'
+import { server } from '../../../test-utils/server'
+import { useSchemaStore } from '../../../stores/schema'
+import ReferenceSelect from '../ReferenceSelect.vue'
+
+// useApiClient calls useRouter() — stub it so component setup doesn't throw.
+vi.mock('vue-router', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}))
+
+const ADMIN = '/admin'
+
+const userContentType: ParsedContentType = {
+  schema_type: 'content-type',
+  name: 'content--user',
+  label: 'User',
+  source_file: '',
+  only_one: false,
+  default_base_path: 'users',
+  system_fields: [],
+  fields: [
+    {
+      name: 'title',
+      label: 'Title',
+      field_type: 'text/plain',
+      required: true,
+      nullable: false,
+      order: 0,
+      validation: { required: true },
+      db_column: { column_name: 'title', column_type: 'varchar', nullable: false },
+      ui_component: { component: 'text-input' },
+    },
+  ],
+  ui: { tabs: [{ name: 'main', label: 'Main', fields: ['title'] }] },
+  db: { table_name: 'content_user', junction_tables: [] },
+  api: {
+    default_base_path: 'users',
+    http_methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
+    collection_path: '/api/user',
+    item_path: '/api/user/:slug',
+  },
+}
+
+function makeField(overrides: Partial<ParsedField> = {}): ParsedField {
+  return {
+    name: 'author',
+    label: 'Author',
+    field_type: 'reference',
+    required: false,
+    nullable: true,
+    order: 0,
+    validation: { required: false },
+    db_column: { column_name: 'author', column_type: 'uuid', nullable: true },
+    ui_component: { component: 'typeahead-select', ref: 'content--user', rel: 'one-to-one' },
+    ...overrides,
+  }
+}
+
+let pinia: ReturnType<typeof createPinia>
+
+beforeEach(() => {
+  pinia = createPinia()
+  setActivePinia(pinia)
+  const schemaStore = useSchemaStore()
+  schemaStore.setSchema(userContentType)
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+function mountComponent(field: ParsedField, modelValue: unknown = null) {
+  return mount(ReferenceSelect, {
+    global: { plugins: [pinia] },
+    props: { field, modelValue },
+  })
+}
+
+describe('ReferenceSelect', () => {
+  it('does not show dropdown when fewer than 2 chars are typed', async () => {
+    const wrapper = mountComponent(makeField())
+    await wrapper.find('input').setValue('a')
+    await wrapper.find('input').trigger('input')
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('shows dropdown with result items when MSW returns results', async () => {
+    server.use(
+      http.get(`${ADMIN}/api/content/content--user`, () =>
+        HttpResponse.json({ ok: true, data: [{ id: 'u1', title: 'Alice' }] })
+      )
+    )
+    const wrapper = mountComponent(makeField())
+    await wrapper.find('input').setValue('al')
+    await wrapper.find('input').trigger('input')
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Alice')
+  })
+
+  it('shows "No results found" when MSW returns an empty array', async () => {
+    server.use(
+      http.get(`${ADMIN}/api/content/content--user`, () =>
+        HttpResponse.json({ ok: true, data: [] })
+      )
+    )
+    const wrapper = mountComponent(makeField())
+    await wrapper.find('input').setValue('xy')
+    await wrapper.find('input').trigger('input')
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    expect(wrapper.text()).toContain('No results found')
+  })
+
+  it('selecting an item emits update:modelValue with the selected id', async () => {
+    server.use(
+      http.get(`${ADMIN}/api/content/content--user`, () =>
+        HttpResponse.json({ ok: true, data: [{ id: 'u1', title: 'Alice' }] })
+      )
+    )
+    const wrapper = mountComponent(makeField())
+    await wrapper.find('input').setValue('al')
+    await wrapper.find('input').trigger('input')
+    await vi.runAllTimersAsync()
+    await flushPromises()
+
+    await wrapper.findAll('[role="option"]')[0]!.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['u1'])
+  })
+
+  it('many-to-many: selecting multiple items shows chips for each', async () => {
+    server.use(
+      http.get(`${ADMIN}/api/content/content--user`, () =>
+        HttpResponse.json({
+          ok: true,
+          data: [
+            { id: 'u1', title: 'Alice' },
+            { id: 'u2', title: 'Bob' },
+          ],
+        })
+      )
+    )
+    const field = makeField({
+      ui_component: { component: 'typeahead-select', ref: 'content--user', rel: 'many-to-many' },
+    })
+    const wrapper = mountComponent(field)
+
+    // Select first item (Alice)
+    await wrapper.find('input').setValue('al')
+    await wrapper.find('input').trigger('input')
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    await wrapper.findAll('[role="option"]')[0]!.trigger('click')
+    // Simulate parent v-model update so selectedIds reflects the first pick
+    await wrapper.setProps({ modelValue: ['u1'] })
+    await wrapper.vm.$nextTick()
+
+    // Select second item (Bob — index 1 since MSW returns both)
+    await wrapper.find('input').setValue('bo')
+    await wrapper.find('input').trigger('input')
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    await wrapper.findAll('[role="option"]')[1]!.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const emitted = wrapper.emitted('update:modelValue')!
+    const lastEmit = emitted[emitted.length - 1]![0] as string[]
+    expect(lastEmit).toContain('u1')
+    expect(lastEmit).toContain('u2')
+  })
+
+  it('input is disabled and counter shows X / Y when max_items is reached', async () => {
+    server.use(
+      http.get(`${ADMIN}/api/content/content--user/:id`, ({ params }) =>
+        HttpResponse.json({ ok: true, data: { id: params['id'], title: `User ${params['id']}` } })
+      )
+    )
+    const field = makeField({
+      validation: { required: false, max_items: 2 },
+      ui_component: { component: 'typeahead-select', ref: 'content--user', rel: 'many-to-many' },
+    })
+    const wrapper = mountComponent(field, ['u1', 'u2'])
+    await flushPromises()
+
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.text()).toContain('2 / 2')
+  })
+})

package/src/components/fields/__tests__/RichTextEditor.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import RichTextEditor from '../RichTextEditor.vue'
+
+function makeField(overrides: Partial<ParsedField> = {}): ParsedField {
+  return {
+    name: 'body',
+    label: 'Body',
+    field_type: 'text/rich',
+    required: false,
+    nullable: true,
+    order: 0,
+    validation: { required: false },
+    db_column: { column_name: 'body', column_type: 'text', nullable: true },
+    ui_component: { component: 'rich-text-editor' },
+    ...overrides,
+  }
+}
+
+describe('RichTextEditor', () => {
+  it('mounts without error', () => {
+    expect(() =>
+      mount(RichTextEditor, { props: { field: makeField(), modelValue: '' } })
+    ).not.toThrow()
+  })
+
+  it('displays the error prop when set', () => {
+    const wrapper = mount(RichTextEditor, {
+      props: { field: makeField(), modelValue: '', error: 'Content is required' },
+    })
+    expect(wrapper.text()).toContain('Content is required')
+  })
+
+  it('toolbar buttons have disabled attribute when disabled prop is true', () => {
+    const wrapper = mount(RichTextEditor, {
+      props: { field: makeField(), modelValue: '', disabled: true },
+    })
+    const buttons = wrapper.findAll('button')
+    expect(buttons.length).toBeGreaterThan(0)
+    buttons.forEach(btn => {
+      expect(btn.attributes('disabled')).toBeDefined()
+    })
+  })
+
+  it('sizes the nested .ProseMirror element itself, not just the outer wrapper, so clicks in empty space focus the editor', async () => {
+    const wrapper = mount(RichTextEditor, { props: { field: makeField(), modelValue: '' } })
+    await flushPromises()
+    const contentWrapper = wrapper.find('.ProseMirror').element.parentElement!
+    expect(Array.from(contentWrapper.classList)).toContain('[&_.ProseMirror]:min-h-32')
+    expect(Array.from(contentWrapper.classList)).toContain('[&_.ProseMirror]:cursor-text')
+  })
+
+  it('link button toggles the link popover, and Cancel closes it', async () => {
+    const wrapper = mount(RichTextEditor, { props: { field: makeField(), modelValue: '' } })
+    const linkButton = wrapper.findAll('button').find(b => b.text() === 'Link')
+    expect(linkButton).toBeTruthy()
+
+    expect(wrapper.text()).not.toContain('CSS class')
+
+    await linkButton!.trigger('click')
+    expect(wrapper.text()).toContain('CSS class')
+    expect(wrapper.find('input[placeholder="https://example.com"]').exists()).toBe(true)
+    expect(wrapper.find('select').exists()).toBe(true)
+
+    const cancelButton = wrapper.findAll('button').find(b => b.text() === 'Cancel')
+    await cancelButton!.trigger('click')
+    expect(wrapper.text()).not.toContain('CSS class')
+  })
+
+  it('link button is disabled (no popover) when the field is disabled', async () => {
+    const wrapper = mount(RichTextEditor, {
+      props: { field: makeField(), modelValue: '', disabled: true },
+    })
+    const linkButton = wrapper.findAll('button').find(b => b.text() === 'Link')
+    expect(linkButton!.attributes('disabled')).toBeDefined()
+
+    await linkButton!.trigger('click')
+    expect(wrapper.text()).not.toContain('CSS class')
+  })
+})

package/src/components/fields/__tests__/TextInput.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import TextInput from '../TextInput.vue'
+
+function makeField(overrides: Partial<ParsedField> = {}): ParsedField {
+  return {
+    name: 'test_field',
+    label: 'Test Field',
+    field_type: 'text/plain',
+    required: false,
+    nullable: true,
+    order: 0,
+    validation: { required: false },
+    db_column: { column_name: 'test_field', column_type: 'varchar', nullable: true },
+    ui_component: { component: 'text-input' },
+    ...overrides,
+  }
+}
+
+describe('TextInput', () => {
+  it('renders an input element', () => {
+    const wrapper = mount(TextInput, {
+      props: { field: makeField(), modelValue: '' },
+    })
+    expect(wrapper.find('input').exists()).toBe(true)
+  })
+
+  it('typing emits update:modelValue with the typed value', async () => {
+    const wrapper = mount(TextInput, {
+      props: { field: makeField(), modelValue: '' },
+    })
+    const input = wrapper.find('input')
+    await input.setValue('hello world')
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    expect(emitted![emitted!.length - 1]).toEqual(['hello world'])
+  })
+
+  it('renders inline error text when error prop is set', () => {
+    const wrapper = mount(TextInput, {
+      props: { field: makeField(), modelValue: '', error: 'Required field' },
+    })
+    expect(wrapper.text()).toContain('Required field')
+  })
+
+  it('does not render error text when error prop is not set', () => {
+    const wrapper = mount(TextInput, {
+      props: { field: makeField(), modelValue: '' },
+    })
+    expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  })
+
+  it('input has disabled attribute when disabled prop is true', () => {
+    const wrapper = mount(TextInput, {
+      props: { field: makeField(), modelValue: '', disabled: true },
+    })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+
+  it('slug field formats "My Blog Post" to "my-blog-post"', async () => {
+    const wrapper = mount(TextInput, {
+      props: {
+        field: makeField({ name: 'post_slug' }),
+        modelValue: '',
+      },
+    })
+    await wrapper.find('input').setValue('My Blog Post')
+    const emitted = wrapper.emitted('update:modelValue')!
+    expect(emitted[emitted.length - 1]).toEqual(['my-blog-post'])
+  })
+})

package/src/components/layout/AppShell.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useUiStore } from '../../stores/ui'
+import Sidebar from './Sidebar.vue'
+import Topbar from './Topbar.vue'
+import Footer from './Footer.vue'
+import ToastContainer from '../shared/ToastContainer.vue'
+
+const uiStore = useUiStore()
+</script>
+
+<template>
+  <div class="flex h-screen overflow-hidden bg-surface">
+    <Sidebar />
+
+    <!-- Mobile drawer backdrop -->
+    <div
+      v-if="uiStore.isMobile && uiStore.mobileNavOpen"
+      class="fixed inset-0 z-40 bg-[rgba(20,20,40,0.4)] backdrop-blur-[2px]"
+      @click="uiStore.closeMobileNav()"
+    />
+
+    <div class="flex min-w-0 flex-1 flex-col">
+      <Topbar />
+      <main class="flex-1 overflow-y-auto p-6">
+        <router-view />
+        <Footer />
+      </main>
+    </div>
+
+    <!-- Toast stack rendered outside the layout flow so it always overlays -->
+    <ToastContainer />
+  </div>
+</template>

package/src/components/layout/Footer.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useUiStore } from '../../stores/ui'
+
+const uiStore = useUiStore()
+</script>
+
+<template>
+  <footer class="mt-10 border-t border-gray-200 px-1 py-5">
+    <p class="text-xs text-gray-400">{{ uiStore.cmsName }}</p>
+  </footer>
+</template>