@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/organisms/Modal/Modal.stories.ts

@@ -0,0 +1,350 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, screen, userEvent, within } from 'storybook/test'
+import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+import { NexxtButton, NexxtModal } from '../../../index'
+
+const WidthDisplay = defineComponent({
+  setup() {
+    const el = ref<HTMLDivElement | null>(null)
+    const width = ref(0)
+    let observer: ResizeObserver
+
+    onMounted(() => {
+      if (!el.value) return
+      observer = new ResizeObserver(([entry]) => {
+        width.value = Math.round(entry.contentRect.width)
+      })
+      observer.observe(el.value)
+    })
+
+    onBeforeUnmount(() => observer?.disconnect())
+
+    return { el, width }
+  },
+  template: `<div ref="el" class="mt-4 flex h-24 w-full items-center justify-center rounded border border-dashed border-gray-300 bg-gray-100 text-xs text-gray-500">{{ width }}px</div>`,
+})
+
+export default {
+  title: 'Components/Organisms/Modal',
+  component: NexxtModal,
+} satisfies Meta<typeof NexxtModal>
+
+type Story = StoryObj<typeof NexxtModal>
+
+const trigger = `<NexxtButton @click="open = true">Open modal</NexxtButton>`
+
+export const Default: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Modal title">
+        <p class="text-sm text-gray-600">This is the modal body content.</p>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const WithHeaderSlot: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Modal title" description="A short description.">
+        <template #header>
+          <div class="mt-2 flex gap-2">
+            <span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-700">Tag 1</span>
+            <span class="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">Tag 2</span>
+          </div>
+        </template>
+        <p class="text-sm text-gray-600">The header slot renders below the description.</p>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const WithDescription: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Modal title" description="A short description to provide context.">
+        <p class="text-sm text-gray-600">This is the modal body content.</p>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const WithFooter: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Confirm action" description="This action cannot be undone.">
+        <p class="text-sm text-gray-600">Are you sure you want to continue?</p>
+        <template #footer>
+          <NexxtButton variant="secondary" @click="open = false">Cancel</NexxtButton>
+          <NexxtButton variant="danger">Delete</NexxtButton>
+        </template>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const SizeSm: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton, WidthDisplay },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Small modal" size="sm">
+        <p class="text-sm text-gray-600">A compact modal for simple messages.</p>
+        <WidthDisplay />
+        <template #footer>
+          <NexxtButton @click="open = false">Got it</NexxtButton>
+        </template>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const SizeMd: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton, WidthDisplay },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Medium modal" size="md">
+        <p class="text-sm text-gray-600">A medium modal for more content.</p>
+        <WidthDisplay />
+        <template #footer>
+          <NexxtButton @click="open = false">Got it</NexxtButton>
+        </template>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const SizeLg: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton, WidthDisplay },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Large modal" size="lg">
+        <p class="text-sm text-gray-600">A wider modal for richer content like forms or tables.</p>
+        <WidthDisplay />
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const SizeXl: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton, WidthDisplay },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Extra-large modal" size="xl">
+        <p class="text-sm text-gray-600">An extra-large modal for complex layouts or data-heavy content.</p>
+        <WidthDisplay />
+      </NexxtModal>
+    `,
+  }),
+}
+
+// The two customWidth stories assert a *resolved* max-width in a real browser.
+// The prop used to render an arbitrary-value max-width utility built from the
+// runtime value, which Tailwind never generates, so the modal had no max-width
+// at all -- and nothing caught it, because asserting a class is present says
+// nothing about whether a width was applied. Only a computed value proves it.
+const openModal = async (canvasElement: HTMLElement) => {
+  await userEvent.click(within(canvasElement).getByRole('button', { name: /open modal/i }))
+  // Rendered through DialogPortal, so it lands on document.body, not the canvas.
+  return screen.findByRole('dialog')
+}
+
+export const SizeCustom: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton, WidthDisplay },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Custom width modal" custom-width="420px">
+        <p class="text-sm text-gray-600">This modal has a fixed custom width of 420px via the <code>customWidth</code> prop.</p>
+        <WidthDisplay />
+      </NexxtModal>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const dialog = await openModal(canvasElement)
+    await expect(getComputedStyle(dialog).maxWidth).toBe('420px')
+  },
+}
+
+// 90vw is what the app actually passes, in EditTemplateDialog and
+// EditVideoTemplateDialog. A viewport unit only resolves in a real browser,
+// which is why this assertion lives here rather than in the jsdom suite.
+export const SizeCustomViewportUnit: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton, WidthDisplay },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Viewport-width modal" custom-width="90vw">
+        <p class="text-sm text-gray-600">Width is <code>90vw</code>, matching the app's template dialogs.</p>
+        <WidthDisplay />
+      </NexxtModal>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const dialog = await openModal(canvasElement)
+    const resolved = parseFloat(getComputedStyle(dialog).maxWidth)
+
+    // Resolved to real pixels rather than left as a literal, and actually 90%
+    // of the viewport.
+    await expect(Number.isNaN(resolved)).toBe(false)
+    await expect(Math.abs(resolved - window.innerWidth * 0.9)).toBeLessThanOrEqual(1)
+  },
+}
+
+export const OverflowVertical: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Tall content" description="The body scrolls, the header and footer stay fixed.">
+        <div class="flex flex-col gap-3">
+          <div v-for="i in 40" :key="i" class="flex h-10 items-center rounded border border-dashed border-gray-300 bg-gray-100 px-3 text-xs text-gray-500">Row {{ i }}</div>
+        </div>
+        <template #footer>
+          <NexxtButton variant="secondary" @click="open = false">Cancel</NexxtButton>
+          <NexxtButton @click="open = false">Confirm</NexxtButton>
+        </template>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const OverflowHorizontal: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Wide content" description="Content wider than the modal scrolls horizontally.">
+        <div class="w-200 rounded border border-dashed border-gray-300 bg-gray-100 p-4 text-xs text-gray-500">
+          This div is 800px wide — wider than the sm/md modal.
+        </div>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const NonDismissible: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Required action" description="You must complete this before continuing." :dismissible="false" :show-close="false">
+        <p class="text-sm text-gray-600">This modal cannot be closed by clicking the overlay or pressing Escape.</p>
+        <template #footer>
+          <NexxtButton @click="open = false">Acknowledge</NexxtButton>
+        </template>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const WithBeforeClose: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      const confirming = ref(false)
+
+      const beforeClose = () =>
+        new Promise<boolean>((resolve) => {
+          confirming.value = true
+          setTimeout(() => {
+            confirming.value = false
+            resolve(true)
+          }, 2000)
+        })
+
+      return { open, confirming, beforeClose }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open" title="Edit form" description="Try closing — it will wait 2 seconds before allowing it." :before-close="beforeClose">
+        <p class="text-sm text-gray-600">Simulates an async guard (e.g. saving a form before close).</p>
+        <p v-if="confirming" class="mt-3 text-sm text-orange-500">Saving changes, please wait…</p>
+        <template #footer>
+          <NexxtButton variant="secondary" @click="open = false">Close</NexxtButton>
+          <NexxtButton>Save</NexxtButton>
+        </template>
+      </NexxtModal>
+    `,
+  }),
+}
+
+export const ContentOnly: Story = {
+  render: () => ({
+    components: { NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      return { open }
+    },
+    template: `
+      ${trigger}
+      <NexxtModal v-model="open">
+        <p class="text-sm text-gray-600">No title or description — just content.</p>
+      </NexxtModal>
+    `,
+  }),
+}

package/src/components/organisms/Modal/Modal.test.ts

@@ -0,0 +1,275 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, nextTick, ref } from 'vue'
+import Modal from './Modal.vue'
+
+const DialogRootStub = defineComponent({
+  props: ['open'],
+  emits: ['update:open'],
+  template: '<div><slot /></div>',
+})
+const DialogPortalStub = defineComponent({ template: '<div><slot /></div>' })
+const DialogOverlayStub = defineComponent({ template: '<div class="dialog-overlay" />' })
+const DialogContentStub = defineComponent({
+  props: ['ariaDescribedby'],
+  emits: ['pointerDownOutside', 'interactOutside', 'escapeKeyDown'],
+  template: '<div class="dialog-content" :aria-describedby="ariaDescribedby"><slot /></div>',
+})
+const DialogTitleStub = defineComponent({ template: '<div class="dialog-title"><slot /></div>' })
+const DialogDescriptionStub = defineComponent({
+  template: '<div class="dialog-description"><slot /></div>',
+})
+const DialogCloseStub = defineComponent({
+  emits: ['click'],
+  template: '<button class="dialog-close" @click="$emit(\'click\')"><slot /></button>',
+})
+
+const stubs = {
+  DialogRoot: DialogRootStub,
+  DialogPortal: DialogPortalStub,
+  DialogOverlay: DialogOverlayStub,
+  DialogContent: DialogContentStub,
+  DialogTitle: DialogTitleStub,
+  DialogDescription: DialogDescriptionStub,
+  DialogClose: DialogCloseStub,
+  Transition: { template: '<slot />' },
+}
+
+const mountModal = (props = {}, slots = {}) =>
+  mount(Modal, {
+    props: { modelValue: true, ...props },
+    slots,
+    global: { stubs },
+  })
+
+describe('Modal', () => {
+  describe('header', () => {
+    it('renders title when provided', () => {
+      const wrapper = mountModal({ title: 'My title' })
+      expect(wrapper.find('.dialog-title').text()).toBe('My title')
+    })
+
+    it('renders description when provided', () => {
+      const wrapper = mountModal({ description: 'My description' })
+      expect(wrapper.find('.dialog-description').text()).toBe('My description')
+    })
+
+    it('renders header div when title is provided', () => {
+      const wrapper = mountModal({ title: 'Title' })
+      expect(wrapper.find('.dialog-title').exists()).toBe(true)
+    })
+
+    it('renders header div when description is provided', () => {
+      const wrapper = mountModal({ description: 'Desc' })
+      expect(wrapper.find('.dialog-description').exists()).toBe(true)
+    })
+
+    it('does not render title or description when neither is provided', () => {
+      const wrapper = mountModal()
+      expect(wrapper.find('.dialog-title').exists()).toBe(false)
+      expect(wrapper.find('.dialog-description').exists()).toBe(false)
+    })
+
+    it('renders header slot below description', () => {
+      const wrapper = mountModal(
+        { title: 'Title', description: 'Desc' },
+        { header: '<span class="header-extra">Extra</span>' },
+      )
+      const description = wrapper.find('.dialog-description')
+      const extra = wrapper.find('.header-extra')
+
+      expect(extra.exists()).toBe(true)
+      expect(
+        description.element.compareDocumentPosition(extra.element) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy()
+    })
+
+    it('shows header bar when only header slot is provided', () => {
+      const wrapper = mountModal({}, { header: '<span class="header-extra">Extra</span>' })
+
+      expect(wrapper.find('.header-extra').exists()).toBe(true)
+    })
+
+    it('trims whitespace-only description to nothing', () => {
+      const wrapper = mountModal({ description: '   ' })
+      expect(wrapper.find('.dialog-description').exists()).toBe(false)
+    })
+  })
+
+  describe('close button', () => {
+    it('renders close button in header when title is present', () => {
+      const wrapper = mountModal({ title: 'Title' })
+      expect(wrapper.find('.dialog-close').exists()).toBe(true)
+    })
+
+    it('renders absolute close button when no title or description', () => {
+      const wrapper = mountModal()
+      expect(wrapper.find('.dialog-close').exists()).toBe(true)
+    })
+
+    it('does not render close button when showClose is false', () => {
+      const wrapper = mountModal({ showClose: false })
+      expect(wrapper.find('.dialog-close').exists()).toBe(false)
+    })
+
+    it('does not render close button when showClose is false even with title', () => {
+      const wrapper = mountModal({ title: 'Title', showClose: false })
+      expect(wrapper.find('.dialog-close').exists()).toBe(false)
+    })
+  })
+
+  describe('slots', () => {
+    it('renders default slot content', () => {
+      const wrapper = mountModal({}, { default: '<p class="body">Body text</p>' })
+      expect(wrapper.find('.body').exists()).toBe(true)
+      expect(wrapper.find('.body').text()).toBe('Body text')
+    })
+
+    it('renders footer slot when provided', () => {
+      const wrapper = mountModal({}, { footer: '<button class="footer-btn">Save</button>' })
+      expect(wrapper.find('.footer-btn').exists()).toBe(true)
+    })
+
+    it('does not render footer when footer slot is absent', () => {
+      const wrapper = mountModal()
+      expect(wrapper.find('.footer-btn').exists()).toBe(false)
+    })
+  })
+
+  describe('size prop', () => {
+    it('applies max-w-xl for sm', () => {
+      const wrapper = mountModal({ size: 'sm' })
+      expect(wrapper.find('.dialog-content').classes()).toContain('max-w-xl')
+    })
+
+    it('applies max-w-3xl for md (default)', () => {
+      const wrapper = mountModal()
+      expect(wrapper.find('.dialog-content').classes()).toContain('max-w-3xl')
+    })
+
+    it('applies max-w-5xl for lg', () => {
+      const wrapper = mountModal({ size: 'lg' })
+      expect(wrapper.find('.dialog-content').classes()).toContain('max-w-5xl')
+    })
+
+    it('applies max-w-7xl for xl', () => {
+      const wrapper = mountModal({ size: 'xl' })
+      expect(wrapper.find('.dialog-content').classes()).toContain('max-w-7xl')
+    })
+
+    it('leaves the inline max-width unset when customWidth is not given', () => {
+      const el = mountModal({ size: 'sm' }).find('.dialog-content').element as HTMLElement
+      expect(el.style.maxWidth).toBe('')
+      expect(el.classList).toContain('max-w-xl')
+    })
+  })
+
+  // These assert the inline style rather than a class on purpose. customWidth
+  // used to render an arbitrary-value max-width utility built from the prop,
+  // which Tailwind never generates from a runtime value, so the modal silently
+  // had no max-width at all -- and the previous tests passed throughout,
+  // because they asserted the class was present rather than that a width was
+  // applied.
+  //
+  // Do not write a complete arbitrary-value class anywhere in this file. The
+  // Tailwind @source glob scans these .ts files, so the literal strings in the
+  // old tests were themselves generating the CSS that made the broken code
+  // look like it worked in Storybook. A comment counts.
+  describe('customWidth', () => {
+    it('applies a value that carries its own unit untouched', () => {
+      const el = mountModal({ customWidth: '420px' }).find('.dialog-content').element as HTMLElement
+      expect(el.style.maxWidth).toBe('420px')
+    })
+
+    it('treats a bare number as pixels', () => {
+      const el = mountModal({ customWidth: '640' }).find('.dialog-content').element as HTMLElement
+      expect(el.style.maxWidth).toBe('640px')
+    })
+
+    it.each(['90vw', '80vw', '42rem', '100%'])('passes %s through unchanged', (value) => {
+      const el = mountModal({ customWidth: value }).find('.dialog-content').element as HTMLElement
+      expect(el.style.maxWidth).toBe(value)
+    })
+
+    it('never emits an arbitrary-value Tailwind class, which would not exist', () => {
+      const classes = mountModal({ customWidth: '420px' }).find('.dialog-content').classes()
+      expect(classes.some((c) => c.startsWith('max-w-['))).toBe(false)
+    })
+
+    it('replaces the size class rather than sitting alongside it', () => {
+      const found = mountModal({ size: 'sm', customWidth: '300px' }).find('.dialog-content')
+      expect(found.classes()).not.toContain('max-w-xl')
+      expect((found.element as HTMLElement).style.maxWidth).toBe('300px')
+    })
+  })
+
+  describe('aria-describedby', () => {
+    it('sets aria-describedby to "undefined" when no description', () => {
+      const wrapper = mountModal()
+      expect(wrapper.find('.dialog-content').attributes('aria-describedby')).toBe('undefined')
+    })
+
+    it('does not set aria-describedby when description is provided', () => {
+      const wrapper = mountModal({ description: 'Some description' })
+      expect(wrapper.find('.dialog-content').attributes('aria-describedby')).toBeUndefined()
+    })
+  })
+
+  describe('beforeClose guard', () => {
+    it('closes when beforeClose returns true', async () => {
+      const beforeClose = vi.fn().mockResolvedValue(true)
+      const modelValue = ref(true)
+      const wrapper = mount(Modal, {
+        props: {
+          modelValue: modelValue.value,
+          beforeClose,
+          'onUpdate:modelValue': (val: boolean) => {
+            modelValue.value = val
+          },
+        },
+        global: { stubs },
+      })
+
+      wrapper.findComponent(DialogRootStub).vm.$emit('update:open', false)
+      await nextTick()
+
+      expect(beforeClose).toHaveBeenCalled()
+      expect(modelValue.value).toBe(false)
+    })
+
+    it('keeps modal open when beforeClose returns false', async () => {
+      const beforeClose = vi.fn().mockResolvedValue(false)
+      const modelValue = ref(true)
+      const wrapper = mount(Modal, {
+        props: {
+          modelValue: modelValue.value,
+          beforeClose,
+          'onUpdate:modelValue': (val: boolean) => {
+            modelValue.value = val
+          },
+        },
+        global: { stubs },
+      })
+
+      wrapper.findComponent(DialogRootStub).vm.$emit('update:open', false)
+      await nextTick()
+
+      expect(beforeClose).toHaveBeenCalled()
+      expect(modelValue.value).toBe(true)
+    })
+
+    it('does not call beforeClose when opening', async () => {
+      const beforeClose = vi.fn().mockResolvedValue(true)
+      const wrapper = mount(Modal, {
+        props: { modelValue: false, beforeClose },
+        global: { stubs },
+      })
+
+      wrapper.findComponent(DialogRootStub).vm.$emit('update:open', true)
+      await nextTick()
+
+      expect(beforeClose).not.toHaveBeenCalled()
+    })
+  })
+})