@nexxtmove/ui 0.1.30 → 0.1.32

package/src/components/Calendar/_CalendarDayView.test.ts

@@ -1,104 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import CalendarDayView from './_CalendarDayView.vue'
-import { nl } from 'date-fns/locale'
-import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval } from 'date-fns'
-
-const VIEW_DATE = new Date(2026, 2, 20) // March 20, 2026
-const start = startOfWeek(startOfMonth(VIEW_DATE), { weekStartsOn: 1 })
-const end = endOfWeek(endOfMonth(VIEW_DATE), { weekStartsOn: 1 })
-const DAYS = eachDayOfInterval({ start, end })
-
-const defaults = {
-  viewDate: VIEW_DATE,
-  calendarDays: DAYS,
-  modelValue: null,
-  markedDates: [],
-  locale: nl,
-  isDisabled: () => false,
-  timezone: 'UTC',
-}
-
-const mountDayView = (props: Record<string, unknown> = {}) =>
-  mount(CalendarDayView, {
-    props: { ...defaults, ...props },
-  })
-
-describe('CalendarDayView', () => {
-  it('renders the correct number of days', () => {
-    const wrapper = mountDayView()
-    const dayButtons = wrapper.findAll('button')
-    expect(dayButtons.length).toBe(DAYS.length)
-  })
-
-  it('highlights the selected day', () => {
-    const selectedDate = new Date(2026, 2, 15)
-    const wrapper = mountDayView({
-      modelValue: selectedDate,
-    })
-    const selectedCell = wrapper.find('[role="gridcell"][aria-selected="true"]')
-    expect(selectedCell.exists()).toBe(true)
-    expect(selectedCell.text()).toBe('15')
-  })
-
-  it('marks dates correctly', () => {
-    const markedDates = [new Date(2026, 2, 10)]
-    const wrapper = mountDayView({
-      markedDates,
-    })
-    // In our component, isMarked(day) is used to show a small dot.
-    // The dot is a span with bg-cornflower-blue-500 class.
-    expect(wrapper.find('.bg-cornflower-blue-500').exists()).toBe(true)
-  })
-
-  it('disables dates based on isDisabled prop', () => {
-    const wrapper = mountDayView({
-      isDisabled: (day: Date) => day.getDate() === 15,
-    })
-    const disabledButton = wrapper.find('button[disabled]')
-    expect(disabledButton.exists()).toBe(true)
-    expect(disabledButton.text()).toBe('15')
-  })
-
-  it('emits select event when a day is clicked', async () => {
-    const wrapper = mountDayView()
-    const button = wrapper.findAll('button')[10]
-    if (button) {
-      await button.trigger('click')
-      expect(wrapper.emitted('select')).toBeTruthy()
-      expect(wrapper.emitted('select')?.[0]?.[0]).toBeInstanceOf(Date)
-    }
-  })
-
-  it('handles keyboard navigation (ArrowRight)', async () => {
-    const wrapper = mountDayView({
-      attachTo: document.body,
-    })
-    const button = wrapper.findAll('button')[0]
-    if (button) {
-      await button.trigger('keydown', { key: 'ArrowRight' })
-    }
-    // In vitest/jsdom, focus might not move as easily, so we check if the method logic runs
-    // For unit tests, we can also check if emit('select') is called on Enter/Space
-  })
-
-  it('emits select when Enter or Space is pressed', async () => {
-    const wrapper = mountDayView()
-    const button = wrapper.findAll('button')[0]
-    if (button) {
-      await button.trigger('keydown', { key: 'Enter' })
-      expect(wrapper.emitted('select')).toBeTruthy()
-      await button.trigger('keydown', { key: ' ' })
-      expect(wrapper.emitted('select')?.[1]).toBeTruthy()
-    }
-  })
-
-  it('does not emit select for other keys', async () => {
-    const wrapper = mountDayView()
-    const button = wrapper.findAll('button')[0]
-    if (button) {
-      await button.trigger('keydown', { key: 'Tab' })
-      expect(wrapper.emitted('select')).toBeFalsy()
-    }
-  })
-})

package/src/components/Calendar/_CalendarHeader.test.ts

@@ -1,86 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import CalendarHeader from './_CalendarHeader.vue'
-import { nl } from 'date-fns/locale'
-
-const VIEW_DATE = new Date(2026, 2, 20) // March 20, 2026
-
-describe('CalendarHeader', () => {
-  it('renders the correct month and year label', () => {
-    const wrapper = mount(CalendarHeader, {
-      props: {
-        viewDate: VIEW_DATE,
-        pickerView: 'days',
-        monthYearPicker: false,
-        locale: nl,
-        canGoPrev: true,
-        canGoNext: true,
-      },
-    })
-    expect(wrapper.text()).toContain('Mrt.')
-    expect(wrapper.text()).toContain('2026')
-  })
-
-  it('renders month and year as buttons if monthYearPicker is true', () => {
-    const wrapper = mount(CalendarHeader, {
-      props: {
-        viewDate: VIEW_DATE,
-        pickerView: 'days',
-        monthYearPicker: true,
-        locale: nl,
-        canGoPrev: true,
-        canGoNext: true,
-      },
-    })
-    const buttons = wrapper.findAll('.flex.items-center.gap-1 button')
-    expect(buttons.length).toBe(2)
-  })
-
-  it('emits openMonthPicker when month label button is clicked', async () => {
-    const wrapper = mount(CalendarHeader, {
-      props: {
-        viewDate: VIEW_DATE,
-        pickerView: 'days',
-        monthYearPicker: true,
-        locale: nl,
-        canGoPrev: true,
-        canGoNext: true,
-      },
-    })
-    await wrapper.findAll('.flex.items-center.gap-1 button')[0].trigger('click')
-    expect(wrapper.emitted('openMonthPicker')).toBeTruthy()
-  })
-
-  it('emits prev and next events', async () => {
-    const wrapper = mount(CalendarHeader, {
-      props: {
-        viewDate: VIEW_DATE,
-        pickerView: 'days',
-        monthYearPicker: false,
-        locale: nl,
-        canGoPrev: true,
-        canGoNext: true,
-      },
-    })
-    const navButtons = wrapper.findAll('button[aria-label]')
-    await navButtons[0].trigger('click')
-    expect(wrapper.emitted('prev')).toBeTruthy()
-    await navButtons[1].trigger('click')
-    expect(wrapper.emitted('next')).toBeTruthy()
-  })
-
-  it('shows back arrow instead of chevron when in years view', () => {
-    const wrapper = mount(CalendarHeader, {
-      props: {
-        viewDate: VIEW_DATE,
-        pickerView: 'years',
-        monthYearPicker: true,
-        locale: nl,
-        canGoPrev: false,
-        canGoNext: false,
-      },
-    })
-    const backButton = wrapper.find('button[aria-label="Terug naar maanden"]')
-    expect(backButton.exists()).toBe(true)
-  })
-})

package/src/components/Calendar/_CalendarMonthView.test.ts

@@ -1,52 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import CalendarMonthView from './_CalendarMonthView.vue'
-import { nl } from 'date-fns/locale'
-
-const VIEW_YEAR = 2026
-const CURRENT_MONTH = 2 // March
-
-const mountMonthView = (props: Record<string, unknown>) =>
-  mount(CalendarMonthView, {
-    props: {
-      viewYear: VIEW_YEAR,
-      modelValue: null,
-      currentMonth: CURRENT_MONTH,
-      locale: nl,
-      timezone: 'UTC',
-      ...(props as Record<string, unknown>),
-    },
-  })
-
-describe('CalendarMonthView', () => {
-  it('renders all 12 months', () => {
-    const wrapper = mountMonthView({})
-    const buttons = wrapper.findAll('button')
-    expect(buttons.length).toBe(12)
-  })
-
-  it('highlights the selected month', () => {
-    const selectedDate = new Date(Date.UTC(VIEW_YEAR, 5, 15)) // June
-    const wrapper = mountMonthView({ modelValue: selectedDate })
-    const selectedButton = wrapper.find('button[aria-selected="true"]')
-    expect(selectedButton.text()).toBe('Jun')
-  })
-
-  it('disables months based on minDate and maxDate', () => {
-    const minDate = new Date(Date.UTC(VIEW_YEAR, 2, 1)) // March 1st
-    const wrapper = mountMonthView({ minDate })
-    // January (0) and February (1) should be disabled
-    const disabledButtons = wrapper.findAll('button[disabled]')
-    expect(disabledButtons.length).toBe(2)
-    expect(disabledButtons[0]?.text()).toBe('Jan')
-    expect(disabledButtons[1]?.text()).toBe('Feb')
-  })
-
-  it('emits select event when a month is clicked', async () => {
-    const wrapper = mountMonthView({})
-    await wrapper.findAll('button')[5]?.trigger('click')
-    const emitted = wrapper.emitted('select')
-    expect(emitted).toBeTruthy()
-    expect(emitted?.[0]?.[0]).toBe(5)
-  })
-})

package/src/components/Calendar/_CalendarYearView.test.ts

@@ -1,56 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import CalendarYearView from './_CalendarYearView.vue'
-
-describe('CalendarYearView', () => {
-  it('renders a range of years', () => {
-    const wrapper = mount(CalendarYearView, {
-      props: {
-        viewYear: 2024,
-        timezone: 'UTC',
-      },
-    })
-    const items = wrapper.findAll('button')
-    expect(items.length).toBeGreaterThan(100) // Default range is viewYear - 100 to + 20
-  })
-
-  it('respects minDate and maxDate', () => {
-    const wrapper = mount(CalendarYearView, {
-      props: {
-        viewYear: 2024,
-        minDate: new Date(Date.UTC(2020, 0, 1)),
-        maxDate: new Date(Date.UTC(2025, 0, 1)),
-        timezone: 'UTC',
-      },
-    })
-    const items = wrapper.findAll('button')
-    // 2020 to 2025 inclusive is 6 years
-    expect(items.length).toBe(6)
-    expect(items[0]?.text()).toBe('2020')
-    expect(items[5]?.text()).toBe('2025')
-  })
-
-  it('emits select when a year is clicked', async () => {
-    const wrapper = mount(CalendarYearView, {
-      props: {
-        viewYear: 2024,
-        timezone: 'UTC',
-      },
-    })
-    const year2024 = wrapper.findAll('button').find((i) => i.text() === '2024')
-    await year2024?.trigger('click')
-    expect(wrapper.emitted('select')).toBeTruthy()
-    expect(wrapper.emitted('select')?.[0]?.[0]).toBe(2024)
-  })
-
-  it('highlights the current year', async () => {
-    const wrapper = mount(CalendarYearView, {
-      props: {
-        viewYear: 2024,
-        timezone: 'UTC',
-      },
-    })
-    const activeYear = wrapper.find('button.text-cornflower-blue-500')
-    expect(activeYear.text()).toBe('2024')
-  })
-})

package/src/components/Checkbox/Checkbox.stories.ts

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import Checkbox from './Checkbox.vue'
-
-export default {
-  title: 'Components/Atoms/Checkbox',
-  component: Checkbox,
-} satisfies Meta<typeof Checkbox>
-
-type Story = StoryObj<typeof Checkbox>
-
-export const Default: Story = {
-  args: {
-    modelValue: false,
-  },
-}
-
-export const Checked: Story = {
-  args: {
-    modelValue: true,
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    modelValue: false,
-    disabled: true,
-  },
-}
-
-export const DisabledChecked: Story = {
-  args: {
-    modelValue: true,
-    disabled: true,
-  },
-}

package/src/components/Checkbox/Checkbox.test.ts

@@ -1,55 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Checkbox from './Checkbox.vue'
-
-describe('Checkbox', () => {
-  it('renders a checkbox input', () => {
-    const wrapper = mount(Checkbox)
-
-    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
-  })
-
-  it('is unchecked by default', () => {
-    const wrapper = mount(Checkbox)
-
-    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(false)
-  })
-
-  it('is checked when modelValue is true', () => {
-    const wrapper = mount(Checkbox, { props: { modelValue: true } })
-
-    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(true)
-  })
-
-  it('emits update:modelValue when toggled', async () => {
-    const wrapper = mount(Checkbox, { props: { modelValue: false } })
-
-    await wrapper.find('input').setValue(true)
-
-    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-  })
-
-  it('disables the input when disabled prop is true', () => {
-    const wrapper = mount(Checkbox, { props: { disabled: true } })
-
-    expect((wrapper.find('input').element as HTMLInputElement).disabled).toBe(true)
-  })
-
-  it('applies opacity class when disabled', () => {
-    const wrapper = mount(Checkbox, { props: { disabled: true } })
-
-    expect(wrapper.find('label').classes()).toContain('opacity-50')
-  })
-
-  it('forwards attributes to the input', () => {
-    const wrapper = mount(Checkbox, { attrs: { 'aria-label': 'Accept terms' } })
-
-    expect(wrapper.find('input').attributes('aria-label')).toBe('Accept terms')
-  })
-
-  it('renders the check icon', () => {
-    const wrapper = mount(Checkbox)
-
-    expect(wrapper.find('i.fa-check').exists()).toBe(true)
-  })
-})

package/src/components/Chip/Chip.stories.ts

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import Chip from './Chip.vue'
-
-export default {
-  title: 'Components/Atoms/Chip',
-  component: Chip,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=526-66&t=CbHvOQfEMIr7M5mO-4',
-    },
-  },
-} satisfies Meta<typeof Chip>
-
-type Story = StoryObj<typeof Chip>
-
-export const Default: Story = {
-  args: {
-    default: 'Default',
-  },
-}
-
-export const Warning: Story = {
-  args: {
-    variant: 'warning',
-    default: 'Warning',
-  },
-}
-
-export const Success: Story = {
-  args: {
-    variant: 'success',
-    default: 'Succes',
-  },
-}
-
-export const Danger: Story = {
-  args: {
-    variant: 'danger',
-    default: 'Danger',
-  },
-}

package/src/components/Chip/Chip.test.ts

@@ -1,51 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Chip from './Chip.vue'
-
-describe('Chip', () => {
-  it('renders correctly with default slot content', () => {
-    const wrapper = mount(Chip, {
-      slots: {
-        default: 'Test Chip',
-      },
-    })
-    expect(wrapper.text()).toBe('Test Chip')
-  })
-
-  it('renders default text when no slot is provided', () => {
-    const wrapper = mount(Chip)
-    expect(wrapper.text()).toBe('Chip')
-  })
-
-  it('applies the correct background color for default variant', () => {
-    const wrapper = mount(Chip)
-    expect(wrapper.classes()).toContain('bg-cornflower-blue-600')
-  })
-
-  it('applies the correct background color for warning variant', () => {
-    const wrapper = mount(Chip, {
-      props: {
-        variant: 'warning',
-      },
-    })
-    expect(wrapper.classes()).toContain('bg-orange-500')
-  })
-
-  it('applies the correct background color for success variant', () => {
-    const wrapper = mount(Chip, {
-      props: {
-        variant: 'success',
-      },
-    })
-    expect(wrapper.classes()).toContain('bg-green-500')
-  })
-
-  it('applies the correct background color for danger variant', () => {
-    const wrapper = mount(Chip, {
-      props: {
-        variant: 'danger',
-      },
-    })
-    expect(wrapper.classes()).toContain('bg-brick-500')
-  })
-})

package/src/components/CustomerJourneyTile/CustomerJourneyTile.stories.ts

@@ -1,86 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import CustomerJourneyTile from './CustomerJourneyTile.vue'
-
-export default {
-  title: 'Components/Atoms/Customer Journey Tile',
-  component: CustomerJourneyTile,
-} satisfies Meta<typeof CustomerJourneyTile>
-
-type Story = StoryObj<typeof CustomerJourneyTile>
-
-export const Default: Story = {
-  args: {
-    title: 'Latent',
-    amount: 270,
-    percentage: 14,
-    percentageExplanaition: 'vorige maand',
-  },
-}
-
-export const CustomTitle: Story = {
-  args: {
-    title: 'Custom Title',
-    amount: 270,
-    percentage: -8,
-    percentageExplanaition: 'vorige maand',
-  },
-}
-
-export const NegativePercentage: Story = {
-  args: {
-    title: 'Latent',
-    amount: 270,
-    percentage: -8,
-    percentageExplanaition: 'vorige maand',
-  },
-}
-
-export const WithoutPercentage: Story = {
-  args: {
-    title: 'Wonen',
-    amount: 54,
-  },
-}
-
-export const WithoutAmount: Story = {
-  args: {
-    title: 'Actief zoeken',
-    percentage: 5,
-    percentageExplanaition: 'vorige maand',
-  },
-}
-
-export const Orientatie: Story = {
-  args: {
-    title: 'Oriëntatie',
-    amount: 142,
-    percentage: 3,
-    percentageExplanaition: 'vorige maand',
-  },
-}
-
-export const Selectie: Story = {
-  args: {
-    title: 'Selectie',
-    amount: 89,
-    percentage: -2,
-    percentageExplanaition: 'vorige maand',
-  },
-}
-
-export const Transactie: Story = {
-  args: {
-    title: 'Transactie',
-    amount: 31,
-    percentage: 21,
-    percentageExplanaition: 'vorige maand',
-  },
-}
-
-export const WithoutPhase: Story = {
-  args: {
-    amount: 270,
-    percentage: 14,
-    percentageExplanaition: 'vorige maand',
-  },
-}