@nexxtmove/ui 0.1.31 → 0.1.32

package/src/components/Button/Button.test.ts

@@ -1,318 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Button from './Button.vue'
-
-describe('Button', () => {
-  it('renders slot content', () => {
-    const wrapper = mount(Button, {
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    expect(wrapper.text()).toBe('Click me')
-  })
-
-  it('renders complex slot content', () => {
-    const wrapper = mount(Button, {
-      slots: {
-        default: '<span>Complex</span> <span>Text</span>',
-      },
-    })
-
-    expect(wrapper.html()).toContain('<span>Complex</span>')
-    expect(wrapper.html()).toContain('<span>Text</span>')
-  })
-
-  it('applies primary variant by default', () => {
-    const wrapper = mount(Button, {
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('button-primary')
-  })
-
-  it('applies secondary variant when specified', () => {
-    const wrapper = mount(Button, {
-      props: {
-        variant: 'secondary',
-      },
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('button-secondary')
-  })
-
-  it('applies success variant when specified', () => {
-    const wrapper = mount(Button, {
-      props: {
-        variant: 'success',
-      },
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('button-success')
-  })
-
-  it('applies danger variant when specified', () => {
-    const wrapper = mount(Button, {
-      props: {
-        variant: 'danger',
-      },
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('button-danger')
-  })
-
-  it('applies link variant when specified', () => {
-    const wrapper = mount(Button, {
-      props: {
-        variant: 'link',
-      },
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('button-link')
-  })
-
-  it('applies link variant special classes', () => {
-    const wrapper = mount(Button, {
-      props: {
-        variant: 'link',
-      },
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    const span = wrapper.find('span')
-    expect(span.classes()).toContain('body-link')
-    expect(span.classes()).toContain('underline-offset-1')
-    expect(span.classes()).toContain('hover:underline-offset-2')
-  })
-
-  it('does not apply hover underline offset when link is disabled', () => {
-    const wrapper = mount(Button, {
-      props: {
-        variant: 'link',
-        disabled: true,
-      },
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    const span = wrapper.find('span')
-    expect(span.classes()).not.toContain('hover:underline-offset-2')
-  })
-
-  it('renders icon when icon prop is provided', () => {
-    const wrapper = mount(Button, {
-      props: {
-        icon: 'star',
-      },
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    const icon = wrapper.find('i')
-    expect(icon.exists()).toBe(true)
-    expect(icon.classes()).toContain('fa-light')
-    expect(icon.classes()).toContain('fa-star')
-  })
-
-  it('does not render icon when icon prop is not provided', () => {
-    const wrapper = mount(Button, {
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    const icon = wrapper.find('i')
-    expect(icon.exists()).toBe(false)
-  })
-
-  it('positions icon on the right when iconRight is true', () => {
-    const wrapper = mount(Button, {
-      props: {
-        icon: 'arrow-right',
-        iconRight: true,
-      },
-      slots: {
-        default: 'Next',
-      },
-    })
-
-    const icon = wrapper.find('i')
-    expect(icon.classes()).toContain('order-last')
-  })
-
-  it('positions icon on the left by default', () => {
-    const wrapper = mount(Button, {
-      props: {
-        icon: 'arrow-right',
-      },
-      slots: {
-        default: 'Back',
-      },
-    })
-
-    const icon = wrapper.find('i')
-    expect(icon.classes()).not.toContain('order-last')
-  })
-
-  it('renders as button type="button"', () => {
-    const wrapper = mount(Button, {
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    expect(wrapper.element.tagName).toBe('BUTTON')
-    expect(wrapper.attributes('type')).toBe('button')
-  })
-
-  it('disables button when disabled prop is true', () => {
-    const wrapper = mount(Button, {
-      props: {
-        disabled: true,
-      },
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    expect(wrapper.attributes('disabled')).toBeDefined()
-    expect(wrapper.classes()).toContain('disabled:cursor-not-allowed')
-  })
-
-  it('applies disabled styles for primary variant', () => {
-    const wrapper = mount(Button, {
-      props: {
-        variant: 'primary',
-        disabled: true,
-      },
-      slots: {
-        default: 'Click me',
-      },
-    })
-
-    expect(wrapper.attributes()).toHaveProperty('disabled')
-  })
-
-  it('hides icon and slot content when loading', () => {
-    const wrapper = mount(Button, {
-      props: {
-        loading: true,
-        icon: 'star',
-      },
-      slots: {
-        default: 'Submit',
-      },
-    })
-
-    const starIcon = wrapper.find('.fa-star')
-    expect(starIcon.classes()).toContain('opacity-0')
-
-    const label = wrapper.find('span')
-    expect(label.classes()).toContain('opacity-0')
-  })
-
-  it('removes hover effects when loading or disabled in link variant', async () => {
-    const wrapper = mount(Button, {
-      props: {
-        variant: 'link',
-        loading: true,
-      },
-      slots: {
-        default: 'Link',
-      },
-    })
-
-    expect(wrapper.find('span').classes()).not.toContain('hover:underline-offset-2')
-
-    await wrapper.setProps({ loading: false, disabled: true })
-    expect(wrapper.find('span').classes()).not.toContain('hover:underline-offset-2')
-
-    await wrapper.setProps({ disabled: false })
-    expect(wrapper.find('span').classes()).toContain('hover:underline-offset-2')
-  })
-
-  it('renders icon-only button without padding', () => {
-    const wrapper = mount(Button, {
-      props: {
-        icon: 'star',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('w-10')
-    expect(wrapper.classes()).not.toContain('px-4')
-  })
-
-  it('displays spinner icon when loading is true', () => {
-    const wrapper = mount(Button, {
-      props: {
-        loading: true,
-      },
-    })
-
-    const icon = wrapper.find('i')
-    expect(icon.exists()).toBe(true)
-    expect(icon.classes()).toContain('fa-spinner-third')
-    expect(icon.classes()).toContain('fa-spin')
-  })
-
-  it('disables button when loading is true', () => {
-    const wrapper = mount(Button, {
-      props: {
-        loading: true,
-      },
-    })
-
-    expect(wrapper.classes()).toContain('pointer-events-none')
-  })
-
-  it('set the button type prop', async () => {
-    const wrapper = mount(Button)
-
-    expect(wrapper.attributes('type')).toBe('button')
-
-    await wrapper.setProps({ buttonType: 'submit' })
-    expect(wrapper.attributes('type')).toBe('submit')
-
-    await wrapper.setProps({ buttonType: 'reset' })
-    expect(wrapper.attributes('type')).toBe('reset')
-  })
-
-  it('no animated span whitout default slot', async () => {
-    const wrapper = mount(Button)
-
-    const slotSpanWrapper = wrapper.find('span')
-
-    expect(slotSpanWrapper.exists()).toBe(false)
-  })
-
-  it('has animated span with default slot', async () => {
-    const wrapper = mount(Button, {
-      slots: {
-        default: 'text',
-      },
-    })
-
-    const slotSpanWrapper = wrapper.find('span')
-
-    expect(slotSpanWrapper.exists()).toBe(true)
-  })
-})

package/src/components/Calendar/Calendar.stories.ts

@@ -1,91 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-import { enUS } from 'date-fns/locale'
-import Calendar from './Calendar.vue'
-export default {
-  title: 'Components/Atoms/Calendar',
-  component: Calendar,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=713-720&t=CbHvOQfEMIr7M5mO-4',
-    },
-  },
-} satisfies Meta<typeof Calendar>
-
-type Story = StoryObj<typeof Calendar>
-
-export const Default: Story = {
-  args: {},
-}
-
-export const WithSelectedDate: Story = {
-  args: {
-    modelValue: new Date(),
-  },
-}
-
-export const WithMarkedDates: Story = {
-  args: {
-    markedDates: [
-      new Date(new Date().getFullYear(), new Date().getMonth(), 5),
-      new Date(new Date().getFullYear(), new Date().getMonth(), 12),
-      new Date(new Date().getFullYear(), new Date().getMonth(), 20),
-    ],
-  },
-}
-
-export const WithDisabledDates: Story = {
-  args: {
-    disabledDates: [
-      new Date(new Date().getFullYear(), new Date().getMonth(), 10),
-      new Date(new Date().getFullYear(), new Date().getMonth(), 11),
-      new Date(new Date().getFullYear(), new Date().getMonth(), 12),
-    ],
-  },
-}
-
-export const WithDateRange: Story = {
-  args: {
-    minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 5),
-    maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 20),
-  },
-}
-
-export const WithMonthYearPicker: Story = {
-  args: {
-    monthYearPicker: true,
-  },
-}
-
-export const EnglishLocale: Story = {
-  args: {
-    locale: enUS,
-  },
-}
-
-export const Playground: Story = {
-  render: (args) => ({
-    components: { Calendar },
-    setup() {
-      const selected = ref<Date | null>(null)
-      return { args, selected }
-    },
-    template: `
-      <Calendar
-        v-bind="args"
-        v-model="selected"
-      />
-      <p v-if="selected" style="margin-top: 12px; font-size: 13px; color: #555; display: block;">
-        Geselecteerd: {{ selected.toLocaleDateString('nl-NL') }}
-      </p>
-    `,
-  }),
-  args: {
-    monthYearPicker: true,
-    markedDates: [
-      new Date(new Date().getFullYear(), new Date().getMonth(), 8),
-      new Date(new Date().getFullYear(), new Date().getMonth(), 15),
-    ],
-  },
-}

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

@@ -1,279 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import Calendar from './Calendar.vue'
-
-// Mock today's date for consistent testing
-const MOCK_TODAY = new Date(Date.UTC(2026, 2, 20)) // March 20, 2026
-vi.useFakeTimers()
-vi.setSystemTime(MOCK_TODAY)
-
-// Fixed reference date used across tests
-const YEAR = 2026
-const MONTH = 2 // March (0-indexed)
-const TODAY = new Date(Date.UTC(YEAR, MONTH, 20))
-
-const mountCalendar = (props = {}) => mount(Calendar, { props })
-
-describe('Calendar', () => {
-  // ── Rendering ─────────────────────────────────────────────────────────────
-
-  it('renders the calendar widget', () => {
-    const wrapper = mountCalendar({ modelValue: TODAY })
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
-  })
-
-  it('shows 7 weekday header columns', () => {
-    const wrapper = mountCalendar({ modelValue: TODAY })
-    const headers = wrapper.findAll('[class*="grid-cols-7"] > div').slice(0, 7)
-    expect(headers.length).toBe(7)
-  })
-
-  // ── Day selection ──────────────────────────────────────────────────────────
-
-  it('emits update:modelValue and select when a day is clicked', async () => {
-    const wrapper = mountCalendar({ modelValue: TODAY })
-
-    const dayButtons = wrapper
-      .findAll('button[type="button"]')
-      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
-    await dayButtons[10]!.trigger('click')
-    await nextTick()
-
-    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-    expect(wrapper.emitted('update:modelValue')![0]![0]).toBeInstanceOf(Date)
-    expect(wrapper.emitted('select')).toBeTruthy()
-  })
-
-  // ── Month navigation ───────────────────────────────────────────────────────
-
-  it('navigates to next month', async () => {
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)) })
-
-    const labelBefore = wrapper
-      .find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-      .text()
-    const nextBtn = wrapper
-      .findAll('button[aria-label]')
-      .find((b) => b.attributes('aria-label') === 'Volgende maand')
-    await nextBtn!.trigger('click')
-    await nextTick()
-
-    const labelAfter = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
-    expect(labelAfter).not.toBe(labelBefore)
-  })
-
-  it('navigates to previous month', async () => {
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)) })
-
-    const labelBefore = wrapper
-      .find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-      .text()
-    const prevBtn = wrapper
-      .findAll('button[aria-label]')
-      .find((b) => b.attributes('aria-label') === 'Vorige maand')
-    await prevBtn!.trigger('click')
-    await nextTick()
-
-    const labelAfter = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
-    expect(labelAfter).not.toBe(labelBefore)
-  })
-
-  // ── Marked dates ───────────────────────────────────────────────────────────
-
-  it('renders a dot for marked dates', () => {
-    const markedDates = [new Date(Date.UTC(YEAR, MONTH, 10))]
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)), markedDates })
-
-    expect(wrapper.find('[class*="rounded-full"][class*="bg-cornflower"]').exists()).toBe(true)
-  })
-
-  // ── Disabled dates ─────────────────────────────────────────────────────────
-
-  it('disables specified dates', () => {
-    const disabledDates = [new Date(Date.UTC(YEAR, MONTH, 15))]
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)), disabledDates })
-
-    const disabled = wrapper
-      .findAll('button[disabled]')
-      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
-    expect(disabled.length).toBeGreaterThan(0)
-  })
-
-  it('does not emit when clicking a disabled date', async () => {
-    const disabledDates = [new Date(Date.UTC(YEAR, MONTH, 15))]
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)), disabledDates })
-
-    const disabledBtn = wrapper
-      .findAll('button[disabled]')
-      .find((b) => /^\d{1,2}$/.test(b.text().trim()))
-    await disabledBtn?.trigger('click')
-    await nextTick()
-
-    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
-  })
-
-  // ── minDate / maxDate ──────────────────────────────────────────────────────
-
-  it('disables dates before minDate', () => {
-    const minDate = new Date(Date.UTC(YEAR, MONTH, 10))
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), minDate })
-
-    const disabled = wrapper
-      .findAll('button[disabled]')
-      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
-    expect(disabled.length).toBeGreaterThan(0)
-  })
-
-  it('disables dates after maxDate', () => {
-    const maxDate = new Date(Date.UTC(YEAR, MONTH, 20))
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), maxDate })
-
-    const disabled = wrapper
-      .findAll('button[disabled]')
-      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
-    expect(disabled.length).toBeGreaterThan(0)
-  })
-
-  it('disables prev nav when already at minDate month', () => {
-    const minDate = new Date(Date.UTC(YEAR, MONTH, 1))
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), minDate })
-
-    const prevBtn = wrapper.find('button[aria-label="Vorige maand"]')
-    expect(prevBtn.attributes('disabled')).toBeDefined()
-  })
-
-  it('disables next nav when already at maxDate month', () => {
-    const maxDate = new Date(Date.UTC(YEAR, MONTH, 28))
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), maxDate })
-
-    const nextBtn = wrapper.find('button[aria-label="Volgende maand"]')
-    expect(nextBtn.attributes('disabled')).toBeDefined()
-  })
-
-  it('does not navigate prev when at minDate month', async () => {
-    const minDate = new Date(Date.UTC(YEAR, MONTH, 1))
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), minDate })
-
-    const prevBtn = wrapper.find('button[aria-label="Vorige maand"]')
-    await prevBtn.trigger('click')
-    await nextTick()
-
-    const label = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
-    expect(label).toContain('Mrt')
-  })
-
-  it('does not navigate next when at maxDate month', async () => {
-    const maxDate = new Date(Date.UTC(YEAR, MONTH, 28))
-    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), maxDate })
-
-    const nextBtn = wrapper.find('button[aria-label="Volgende maand"]')
-    await nextBtn.trigger('click')
-    await nextTick()
-
-    const label = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
-    expect(label).toContain('Mrt')
-  })
-
-  // ── monthYearPicker ────────────────────────────────────────────────────────
-
-  it('month name is not a button without monthYearPicker prop', () => {
-    const wrapper = mountCalendar({ modelValue: TODAY })
-
-    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-    expect(header.find('button').exists()).toBe(false)
-  })
-
-  it('month name is a button with monthYearPicker prop', () => {
-    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
-
-    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-    expect(header.find('button').exists()).toBe(true)
-  })
-
-  it('opens month picker when month name is clicked', async () => {
-    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
-
-    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-    const monthBtn = header.findAll('button').find((b) => b.text().includes('Mrt'))
-    await monthBtn!.trigger('click')
-    await nextTick()
-
-    // Month view uses grid-cols-3
-    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(true)
-  })
-
-  it('opens year picker when year is clicked', async () => {
-    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
-
-    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-    const buttons = header.findAll('button')
-    await buttons[1]!.trigger('click')
-    await nextTick()
-
-    expect(wrapper.find('[class*="snap-y"]').exists()).toBe(true)
-  })
-
-  it('returns to days view after selecting a month', async () => {
-    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
-
-    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-    await header.find('button').trigger('click')
-    await nextTick()
-
-    const monthButtons = wrapper.findAll('[class*="grid-cols-3"] button')
-    await monthButtons[0]!.trigger('click')
-    await nextTick()
-
-    expect(wrapper.find('[class*="grid-cols-7"]').exists()).toBe(true)
-    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(false)
-  })
-
-  it('returns to months view after selecting a year', async () => {
-    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
-
-    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-    await header.findAll('button')[1]!.trigger('click')
-    await nextTick()
-
-    const yearButtons = wrapper.findAll('[class*="snap-center"]')
-    await yearButtons[0]!.trigger('click')
-    await nextTick()
-
-    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(true)
-    expect(wrapper.find('[class*="snap-y"]').exists()).toBe(false)
-  })
-
-  it('selects correct date from month picker', async () => {
-    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
-
-    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-    await header.find('button').trigger('click')
-    await nextTick()
-
-    const monthButtons = wrapper.findAll('[class*="grid-cols-3"] button')
-    await monthButtons[0]?.trigger('click')
-    await nextTick()
-
-    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
-    expect(labelAfter).toContain('Jan')
-  })
-
-  it('selects correct year from year drum', async () => {
-    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
-
-    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
-    const headerButtons = header.findAll('button')
-    await headerButtons[1]?.trigger('click')
-    await nextTick()
-
-    const yearButtons = wrapper.findAll('[class*="snap-center"]')
-    const targetYear = (YEAR - 1).toString()
-    const targetBtn = yearButtons.find((btn) => btn.text().includes(targetYear))
-    await targetBtn!.trigger('click')
-    await nextTick()
-
-    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
-    expect(labelAfter).toContain(targetYear)
-  })
-})