@nexxtmove/ui 0.1.31 → 0.1.32

package/src/components/Table/Table.test.ts

@@ -1,220 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Table from './Table.vue'
-
-const columns = [
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'email', label: 'Email' },
-]
-
-const rows = [
-  { name: 'Alice', email: 'alice@example.com' },
-  { name: 'Bob', email: 'bob@example.com' },
-  { name: 'Carol', email: 'carol@example.com' },
-]
-
-describe('Table', () => {
-  describe('rendering', () => {
-    it('renders column headers', () => {
-      const wrapper = mount(Table, { props: { columns, rows } })
-      expect(wrapper.text()).toContain('Name')
-      expect(wrapper.text()).toContain('Email')
-    })
-
-    it('renders row data', () => {
-      const wrapper = mount(Table, { props: { columns, rows } })
-      expect(wrapper.text()).toContain('Alice')
-      expect(wrapper.text()).toContain('bob@example.com')
-    })
-
-    it('renders empty slot when rows is empty', () => {
-      const wrapper = mount(Table, { props: { columns, rows: [] } })
-      expect(wrapper.text()).toContain('Geen data beschikbaar')
-    })
-
-    it('renders custom empty slot content', () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows: [] },
-        slots: { empty: 'Nothing here' },
-      })
-      expect(wrapper.text()).toContain('Nothing here')
-    })
-
-    it('renders cell slot content', () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows },
-        slots: { 'cell-name': '<strong>custom</strong>' },
-      })
-      expect(wrapper.html()).toContain('<strong>custom</strong>')
-    })
-  })
-
-  describe('sorting', () => {
-    it('renders sort icon on sortable columns', () => {
-      const wrapper = mount(Table, { props: { columns, rows } })
-      const headers = wrapper.findAll('[role="columnheader"]')
-      const nameHeader = headers[0]
-      expect(nameHeader.find('i').exists()).toBe(true)
-    })
-
-    it('does not render sort icon on non-sortable columns', () => {
-      const wrapper = mount(Table, { props: { columns, rows } })
-      const headers = wrapper.findAll('[role="columnheader"]')
-      const emailHeader = headers[1]
-      expect(emailHeader.find('i').exists()).toBe(false)
-    })
-
-    it('emits sort event when clicking a sortable header', async () => {
-      const wrapper = mount(Table, { props: { columns, rows } })
-      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
-      await nameHeader.trigger('click')
-      expect(wrapper.emitted('sort')).toBeTruthy()
-      expect(wrapper.emitted('sort')![0]).toEqual(['name', 'asc'])
-    })
-
-    it('emits desc direction when clicking an already sorted column', async () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, sortKey: 'name', sortDirection: 'asc' },
-      })
-      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
-      await nameHeader.trigger('click')
-      expect(wrapper.emitted('sort')![0]).toEqual(['name', 'desc'])
-    })
-
-    it('does not emit sort when clicking a non-sortable header', async () => {
-      const wrapper = mount(Table, { props: { columns, rows } })
-      const emailHeader = wrapper.findAll('[role="columnheader"]')[1]
-      await emailHeader.trigger('click')
-      expect(wrapper.emitted('sort')).toBeFalsy()
-    })
-
-    it('sets aria-sort to ascending on the active sort column', () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, sortKey: 'name', sortDirection: 'asc' },
-      })
-      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
-      expect(nameHeader.attributes('aria-sort')).toBe('ascending')
-    })
-
-    it('sets aria-sort to descending on the active sort column', () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, sortKey: 'name', sortDirection: 'desc' },
-      })
-      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
-      expect(nameHeader.attributes('aria-sort')).toBe('descending')
-    })
-
-    it('sets aria-sort to none on an inactive sortable column', () => {
-      const wrapper = mount(Table, { props: { columns, rows } })
-      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
-      expect(nameHeader.attributes('aria-sort')).toBe('none')
-    })
-  })
-
-  describe('selection', () => {
-    it('does not render checkboxes when selectable is false', () => {
-      const wrapper = mount(Table, { props: { columns, rows } })
-      expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
-    })
-
-    it('renders a checkbox per row and one in the header when selectable', () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, selectable: true, modelValue: [] },
-      })
-      const checkboxes = wrapper.findAll('input[type="checkbox"]')
-      expect(checkboxes).toHaveLength(rows.length + 1)
-    })
-
-    it('emits update:modelValue with all indices when select-all is clicked', async () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, selectable: true, modelValue: [] },
-      })
-      const headerCheckbox = wrapper.find('input[type="checkbox"]')
-      await headerCheckbox.setValue(true)
-      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[0, 1, 2]])
-    })
-
-    it('emits update:modelValue with empty array when deselecting all', async () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, selectable: true, modelValue: [0, 1, 2] },
-      })
-      const headerCheckbox = wrapper.find('input[type="checkbox"]')
-      await headerCheckbox.setValue(false)
-      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[]])
-    })
-
-    it('emits update:modelValue when a row checkbox is changed', async () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, selectable: true, modelValue: [] },
-      })
-      const rowCheckboxes = wrapper.findAll('input[type="checkbox"]').slice(1)
-      await rowCheckboxes[0].setValue(true)
-      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[0]])
-    })
-
-    it('removes index from selection when an already-selected row checkbox is changed', async () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, selectable: true, modelValue: [0, 1] },
-      })
-      const rowCheckboxes = wrapper.findAll('input[type="checkbox"]').slice(1)
-      await rowCheckboxes[0].setValue(false)
-      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[1]])
-    })
-  })
-
-  describe('row click selection', () => {
-    it('selects a row when clicking on it', async () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, selectable: true, modelValue: [] },
-      })
-      const dataRows = wrapper.findAll('[role="row"]').slice(1)
-      await dataRows[0].trigger('click')
-      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[0]])
-    })
-
-    it('does not emit selection when clicking a button inside a row', async () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, selectable: true, modelValue: [] },
-        slots: { 'cell-name': '<button>action</button>' },
-      })
-      const button = wrapper.find('button')
-      await button.trigger('click')
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
-    })
-
-    it('does not emit selection when clicking a link inside a row', async () => {
-      const wrapper = mount(Table, {
-        props: { columns, rows, selectable: true, modelValue: [] },
-        slots: { 'cell-name': '<a href="#">link</a>' },
-      })
-      const link = wrapper.find('a')
-      await link.trigger('click')
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
-    })
-
-    it('does not select when selectable is false', async () => {
-      const wrapper = mount(Table, { props: { columns, rows } })
-      const dataRows = wrapper.findAll('[role="row"]').slice(1)
-      await dataRows[0].trigger('click')
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
-    })
-  })
-
-  describe('keyboard navigation', () => {
-    it('moves focus to next row on ArrowDown', async () => {
-      const wrapper = mount(Table, { props: { columns, rows }, attachTo: document.body })
-      const dataRows = wrapper.findAll('[role="row"]').slice(1)
-      await dataRows[0].trigger('keydown', { key: 'ArrowDown' })
-      expect(document.activeElement).toBe(dataRows[1].element)
-      wrapper.unmount()
-    })
-
-    it('moves focus to previous row on ArrowUp', async () => {
-      const wrapper = mount(Table, { props: { columns, rows }, attachTo: document.body })
-      const dataRows = wrapper.findAll('[role="row"]').slice(1)
-      await dataRows[1].trigger('keydown', { key: 'ArrowUp' })
-      expect(document.activeElement).toBe(dataRows[0].element)
-      wrapper.unmount()
-    })
-  })
-})

package/src/components/TimelineEvent/TimelineEvent.stories.ts

@@ -1,291 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import TimelineEvent from './TimelineEvent.vue'
-
-export default {
-  title: 'Components/Atoms/Timeline Event',
-  component: TimelineEvent,
-} satisfies Meta<typeof TimelineEvent>
-
-type Story = StoryObj<typeof TimelineEvent>
-
-const baseEvent = {
-  id: 1,
-  happened_at: '2024-06-15T10:30:00.000Z',
-  medium_type: null,
-  url: null,
-  page_title: null,
-  request_reason: null,
-  agenda_item_type: null,
-  source: 'system',
-  direction: 'outbound',
-  description: null,
-}
-
-export const ContactCreated: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'contact_created',
-    },
-    splitView: true,
-  },
-}
-
-export const InboundEvent: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'contact_requested',
-      direction: 'inbound',
-    },
-    splitView: true,
-  },
-}
-
-export const PageViewed: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'page_viewed',
-      url: 'https://example.com/page',
-      page_title: 'Example Page',
-      description: 'Example Page',
-    },
-    splitView: true,
-  },
-}
-
-export const WhatsAppMessageReceived: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'whatsapp_message_received',
-    },
-    splitView: true,
-  },
-}
-
-export const WhatsAppMessageSent: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'whatsapp_message_sent',
-      direction: 'outbound',
-    },
-    splitView: true,
-  },
-}
-
-export const WithUrl: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'proposal_sent',
-      url: 'https://example.com/proposal/123',
-      description: 'Voorstel Q2 2024',
-    },
-    splitView: true,
-  },
-}
-
-export const WithRequestReason: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'house_viewing_requested',
-      request_reason: 'Interesse in de woning na open dag',
-    },
-    splitView: true,
-  },
-}
-
-export const SplitViewDisabled: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'contact_created',
-      direction: 'inbound',
-    },
-    splitView: false,
-  },
-}
-
-export const ViewingAgendaItemScheduled: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'viewing_agenda_item_scheduled',
-    },
-    splitView: true,
-  },
-}
-
-export const ProposalAccepted: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'proposal_accepted',
-    },
-    splitView: true,
-  },
-}
-
-export const KeyHandoverScheduled: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'key_handover_agenda_item_scheduled',
-    },
-    splitView: true,
-  },
-}
-
-export const AutomationPhaseOpened: Story = {
-  args: {
-    event: { ...baseEvent, type: 'automation_phase_opened' },
-    splitView: true,
-  },
-}
-
-export const AutomationWhatsAppButtonClicked: Story = {
-  args: {
-    event: { ...baseEvent, type: 'automation_whatsapp_button_clicked' },
-    splitView: true,
-  },
-}
-
-export const AutomationButtonMailAnswered: Story = {
-  args: {
-    event: { ...baseEvent, type: 'automation_button_mail_answered' },
-    splitView: true,
-  },
-}
-
-export const WaitingListSignup: Story = {
-  args: {
-    event: { ...baseEvent, type: 'waiting_list_signup' },
-    splitView: true,
-  },
-}
-
-export const ViewingCreated: Story = {
-  args: {
-    event: { ...baseEvent, type: 'viewing_created' },
-    splitView: true,
-  },
-}
-
-export const GeneralAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'general_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const SalesAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'sales_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const AgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const AppraisalAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'appraisal_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const PurchaseAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'purchase_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const StructuralInspectionAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'structural_inspection_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const ValuationAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'valuation_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const MortgageAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'mortgage_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const PurchaseDeedSigningAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'purchase_deed_signing_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const ProposalOpened: Story = {
-  args: {
-    event: { ...baseEvent, type: 'proposal_opened' },
-    splitView: true,
-  },
-}
-
-export const FinalInspectionAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'final_inspection_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const TransportAgendaItemScheduled: Story = {
-  args: {
-    event: { ...baseEvent, type: 'transport_agenda_item_scheduled' },
-    splitView: true,
-  },
-}
-
-export const NewsletterOpened: Story = {
-  args: {
-    event: { ...baseEvent, type: 'newsletter_opened' },
-    splitView: true,
-  },
-}
-
-export const HouseValuationRequested: Story = {
-  args: {
-    event: { ...baseEvent, type: 'house_valuation_requested' },
-    splitView: true,
-  },
-}
-
-export const Unsubscribed: Story = {
-  args: {
-    event: { ...baseEvent, type: 'unsubscribed' },
-    splitView: true,
-  },
-}
-
-export const UnknownEventType: Story = {
-  args: {
-    event: {
-      ...baseEvent,
-      type: 'custom_event_type',
-    },
-    splitView: true,
-  },
-}

package/src/components/TimelineEvent/TimelineEvent.test.ts

@@ -1,166 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import TimelineEvent from './TimelineEvent.vue'
-
-const baseEvent = {
-  id: 1,
-  happened_at: '2024-06-15T10:30:00.000Z',
-  medium_type: null,
-  url: null,
-  page_title: null,
-  request_reason: null,
-  agenda_item_type: null,
-  source: 'system',
-  direction: 'outbound',
-  description: null,
-}
-
-const mountEvent = (eventOverrides = {}, props = {}) =>
-  mount(TimelineEvent, {
-    props: {
-      event: { ...baseEvent, type: 'contact_created', ...eventOverrides },
-      ...props,
-    },
-    global: {
-      stubs: {
-        NexxtIcon: true,
-      },
-    },
-  })
-
-describe('TimelineEvent', () => {
-  it('renders the formatted date', () => {
-    const wrapper = mountEvent()
-    const dateText = wrapper.find('.extra-small-normal').text()
-    expect(dateText).toContain('om')
-  })
-
-  it('sets data-event-source attribute from direction', () => {
-    const wrapper = mountEvent({ direction: 'inbound' })
-    expect(wrapper.attributes('data-event-source')).toBe('inbound')
-  })
-
-  it('sets data-event-date attribute from happened_at', () => {
-    const wrapper = mountEvent({ happened_at: '2024-06-15T10:30:00.000Z' })
-    expect(wrapper.attributes('data-event-date')).toBe('2024-06-15T10:30:00.000Z')
-  })
-
-  it('sets date-event-type attribute from type', () => {
-    const wrapper = mountEvent({ type: 'page_viewed' })
-    expect(wrapper.attributes('date-event-type')).toBe('page_viewed')
-  })
-
-  it('renders the event label for a known event type', () => {
-    const wrapper = mountEvent({ type: 'contact_created' })
-    expect(wrapper.text()).toContain('Contact aangemaakt')
-  })
-
-  it('renders the event type as label for an unknown event type', () => {
-    const wrapper = mountEvent({ type: 'custom_unknown_type' })
-    expect(wrapper.text()).toContain('custom_unknown_type')
-  })
-
-  it('does not render a link when event.url is null', () => {
-    const wrapper = mountEvent({ url: null })
-    expect(wrapper.find('a').exists()).toBe(false)
-  })
-
-  it('renders a link when event.url is set', () => {
-    const wrapper = mountEvent({ url: 'https://example.com' })
-    const link = wrapper.find('a')
-    expect(link.exists()).toBe(true)
-    expect(link.attributes('href')).toBe('https://example.com')
-    expect(link.attributes('target')).toBe('_blank')
-  })
-
-  it('renders event.description as link text when set', () => {
-    const wrapper = mountEvent({ url: 'https://example.com', description: 'Mijn voorstel' })
-    expect(wrapper.find('a').text()).toContain('Mijn voorstel')
-  })
-
-  it('renders event.url as link text when description is null', () => {
-    const wrapper = mountEvent({ url: 'https://example.com', description: null })
-    expect(wrapper.find('a').text()).toContain('https://example.com')
-  })
-
-  it('does not render request_reason when not set', () => {
-    const wrapper = mountEvent({ request_reason: null })
-    expect(wrapper.text()).not.toContain('Reden:')
-  })
-
-  it('renders request_reason when set', () => {
-    const wrapper = mountEvent({ request_reason: 'Interesse in de woning' })
-    expect(wrapper.text()).toContain('Reden: Interesse in de woning')
-  })
-
-  it('aligns outbound events to the left by default (no justify-end)', () => {
-    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
-    expect(wrapper.classes()).not.toContain('justify-end')
-  })
-
-  it('aligns inbound events to the right when splitView is true', () => {
-    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
-    expect(wrapper.classes()).toContain('justify-end')
-  })
-
-  it('does not align inbound events to the right when splitView is false', () => {
-    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: false })
-    expect(wrapper.classes()).not.toContain('justify-end')
-  })
-
-  it('reverses icon and content order for inbound events in splitView', () => {
-    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
-    const innerRow = wrapper.find('.flex.w-full.shrink-0')
-    expect(innerRow.classes()).toContain('flex-row-reverse')
-  })
-
-  it('does not reverse order for outbound events', () => {
-    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
-    const innerRow = wrapper.find('.flex.w-full.shrink-0')
-    expect(innerRow.classes()).not.toContain('flex-row-reverse')
-  })
-
-  it('applies max-w-lg to content when splitView is true', () => {
-    const wrapper = mountEvent({}, { splitView: true })
-    const content = wrapper.find('.rounded-xl')
-    expect(content.classes()).toContain('max-w-lg')
-  })
-
-  it('does not apply max-w-lg to content when splitView is false', () => {
-    const wrapper = mountEvent({}, { splitView: false })
-    const content = wrapper.find('.rounded-xl')
-    expect(content.classes()).not.toContain('max-w-lg')
-  })
-
-  it('defaults splitView to true', () => {
-    const wrapper = mount(TimelineEvent, {
-      props: {
-        event: { ...baseEvent, type: 'contact_created', direction: 'inbound' },
-      },
-      global: { stubs: { NexxtIcon: true } },
-    })
-    expect(wrapper.classes()).toContain('justify-end')
-  })
-
-  it('applies correct background color class for known event type', () => {
-    const wrapper = mountEvent({ type: 'contact_created' })
-    const iconWrapper = wrapper.find('.rounded-full')
-    expect(iconWrapper.classes()).toContain('bg-pink-500')
-  })
-
-  it('applies default background color for unknown event type', () => {
-    const wrapper = mountEvent({ type: 'unknown_type' })
-    const iconWrapper = wrapper.find('.rounded-full')
-    expect(iconWrapper.classes()).toContain('bg-gray-500')
-  })
-
-  it('aligns date text to the right for inbound events in splitView', () => {
-    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
-    expect(wrapper.find('.extra-small-normal').classes()).toContain('text-right')
-  })
-
-  it('does not align date text to the right for outbound events', () => {
-    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
-    expect(wrapper.find('.extra-small-normal').classes()).not.toContain('text-right')
-  })
-})