@davidbirchall/core 1.0.7 → 1.0.8

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

@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import Calendar from './Calendar.vue'
+
+const meta = {
+  title: 'Components/Calendar',
+  component: Calendar,
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'select',
+      options: ['single', 'multiple', 'range']
+    },
+    firstDayOfWeek: {
+      control: 'select',
+      options: [0, 1, 2, 3, 4, 5, 6],
+      description: '0 = Sunday, 1 = Monday, etc.'
+    }
+  }
+} satisfies Meta<typeof Calendar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SingleDate: Story = {
+  render: (args: any) => ({
+    components: { Calendar },
+    setup() {
+      const selectedDate = ref<string>('')
+      return { args, selectedDate }
+    },
+    template: `
+      <div>
+        <Calendar v-bind="args" v-model="selectedDate" />
+        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
+          <strong>Selected Date:</strong> {{ selectedDate || 'None' }}
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    mode: 'single'
+  }
+}
+
+export const MultipleDates: Story = {
+  render: (args: any) => ({
+    components: { Calendar },
+    setup() {
+      const selectedDates = ref<string[]>([])
+      return { args, selectedDates }
+    },
+    template: `
+      <div>
+        <Calendar v-bind="args" v-model="selectedDates" />
+        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
+          <strong>Selected Dates:</strong>
+          <ul v-if="selectedDates.length" style="margin: 0.5rem 0 0 0; padding-left: 1.5rem;">
+            <li v-for="date in selectedDates" :key="date">{{ date }}</li>
+          </ul>
+          <span v-else> None</span>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    mode: 'multiple'
+  }
+}
+
+export const DateRange: Story = {
+  render: (args: any) => ({
+    components: { Calendar },
+    setup() {
+      const dateRange = ref<{ start: string; end: string }>({ start: '', end: '' })
+      return { args, dateRange }
+    },
+    template: `
+      <div>
+        <Calendar v-bind="args" v-model="dateRange" />
+        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
+          <strong>Date Range:</strong><br />
+          Start: {{ dateRange.start || 'Not set' }}<br />
+          End: {{ dateRange.end || 'Not set' }}
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    mode: 'range'
+  }
+}
+
+export const WithMinMaxDates: Story = {
+  render: (args: any) => ({
+    components: { Calendar },
+    setup() {
+      const selectedDate = ref<string>('')
+      const today = new Date()
+      const minDate = new Date(today)
+      minDate.setDate(today.getDate() - 7)
+      const maxDate = new Date(today)
+      maxDate.setDate(today.getDate() + 14)
+      
+      return { 
+        args: {
+          ...args,
+          minDate: minDate.toISOString().split('T')[0],
+          maxDate: maxDate.toISOString().split('T')[0]
+        },
+        selectedDate
+      }
+    },
+    template: `
+      <div>
+        <Calendar v-bind="args" v-model="selectedDate" />
+        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
+          <strong>Selected Date:</strong> {{ selectedDate || 'None' }}<br />
+          <em style="font-size: 0.875rem; color: #6b7280;">Min: {{ args.minDate }} | Max: {{ args.maxDate }}</em>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    mode: 'single'
+  }
+}
+
+export const WithDisabledDates: Story = {
+  render: (args: any) => ({
+    components: { Calendar },
+    setup() {
+      const selectedDate = ref<string>('')
+      const today = new Date()
+      const disabledDates = [
+        new Date(today.getFullYear(), today.getMonth(), 10).toISOString().split('T')[0],
+        new Date(today.getFullYear(), today.getMonth(), 15).toISOString().split('T')[0],
+        new Date(today.getFullYear(), today.getMonth(), 20).toISOString().split('T')[0],
+        new Date(today.getFullYear(), today.getMonth(), 25).toISOString().split('T')[0]
+      ]
+      
+      return { 
+        args: {
+          ...args,
+          disabledDates
+        },
+        selectedDate
+      }
+    },
+    template: `
+      <div>
+        <Calendar v-bind="args" v-model="selectedDate" />
+        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
+          <strong>Selected Date:</strong> {{ selectedDate || 'None' }}<br />
+          <em style="font-size: 0.875rem; color: #6b7280;">Disabled: 10th, 15th, 20th, 25th of current month</em>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    mode: 'single'
+  }
+}
+
+export const MondayFirstDay: Story = {
+  render: (args: any) => ({
+    components: { Calendar },
+    setup() {
+      const selectedDate = ref<string>('')
+      return { args, selectedDate }
+    },
+    template: `
+      <div>
+        <Calendar v-bind="args" v-model="selectedDate" />
+        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
+          <strong>Selected Date:</strong> {{ selectedDate || 'None' }}<br />
+          <em style="font-size: 0.875rem; color: #6b7280;">Week starts on Monday</em>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    mode: 'single',
+    firstDayOfWeek: 1
+  }
+}
+
+export const BookingInterface: Story = {
+  render: (args: any) => ({
+    components: { Calendar },
+    setup() {
+      const dateRange = ref<{ start: string; end: string }>({ start: '', end: '' })
+      
+      const calculateNights = () => {
+        if (!dateRange.value.start || !dateRange.value.end) return 0
+        const start = new Date(dateRange.value.start)
+        const end = new Date(dateRange.value.end)
+        const diff = Math.abs(end.getTime() - start.getTime())
+        return Math.ceil(diff / (1000 * 60 * 60 * 24))
+      }
+      
+      return { args, dateRange, calculateNights }
+    },
+    template: `
+      <div style="max-width: 600px;">
+        <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
+          <div style="flex: 1; padding: 1rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem;">
+            <div style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.25rem;">Check-in</div>
+            <div style="font-weight: 600;">{{ dateRange.start || 'Select date' }}</div>
+          </div>
+          <div style="flex: 1; padding: 1rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem;">
+            <div style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.25rem;">Check-out</div>
+            <div style="font-weight: 600;">{{ dateRange.end || 'Select date' }}</div>
+          </div>
+        </div>
+        
+        <Calendar v-bind="args" v-model="dateRange" />
+        
+        <div v-if="dateRange.start && dateRange.end" style="margin-top: 1rem; padding: 1rem; background: #eef2ff; border-radius: 0.5rem; color: #667eea;">
+          <strong>{{ calculateNights() }} night{{ calculateNights() !== 1 ? 's' : '' }}</strong> selected
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    mode: 'range'
+  }
+}
+
+export const MultipleCalendars: Story = {
+  render: (args: any) => ({
+    components: { Calendar },
+    setup() {
+      const departureDate = ref<string>('')
+      const returnDate = ref<string>('')
+      return { args, departureDate, returnDate }
+    },
+    template: `
+      <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
+        <div>
+          <h3 style="margin: 0 0 1rem 0;">Departure</h3>
+          <Calendar v-bind="args" v-model="departureDate" />
+          <div style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
+            {{ departureDate || 'No date selected' }}
+          </div>
+        </div>
+        
+        <div>
+          <h3 style="margin: 0 0 1rem 0;">Return</h3>
+          <Calendar v-bind="args" v-model="returnDate" />
+          <div style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
+            {{ returnDate || 'No date selected' }}
+          </div>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    mode: 'single'
+  }
+}

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

@@ -0,0 +1,119 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Calendar from './Calendar.vue'
+
+describe('Calendar', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Calendar)
+    expect(wrapper.find('.calendar').exists()).toBe(true)
+  })
+
+  it('displays correct month and year', () => {
+    const wrapper = mount(Calendar)
+    const today = new Date()
+    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+    
+    expect(wrapper.text()).toContain(monthNames[today.getMonth()])
+    expect(wrapper.text()).toContain(today.getFullYear().toString())
+  })
+
+  it('navigates to previous month', async () => {
+    const wrapper = mount(Calendar)
+    const navButtons = wrapper.findAll('.calendar-nav')
+    
+    await navButtons[0].trigger('click')
+    
+    // Calendar should show previous month
+    expect(wrapper.find('.calendar-month-btn').exists()).toBe(true)
+  })
+
+  it('navigates to next month', async () => {
+    const wrapper = mount(Calendar)
+    const navButtons = wrapper.findAll('.calendar-nav')
+    
+    await navButtons[1].trigger('click')
+    
+    // Calendar should show next month
+    expect(wrapper.find('.calendar-month-btn').exists()).toBe(true)
+  })
+
+  it('selects a date in single mode', async () => {
+    const wrapper = mount(Calendar, {
+      props: {
+        mode: 'single'
+      }
+    })
+    
+    const dayButtons = wrapper.findAll('.calendar-day')
+    const currentMonthDay = dayButtons.find(btn => !btn.classes().includes('calendar-day--other-month'))
+    
+    if (currentMonthDay) {
+      await currentMonthDay.trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    }
+  })
+
+  it('highlights today', () => {
+    const wrapper = mount(Calendar)
+    const todayButton = wrapper.find('.calendar-day--today')
+    expect(todayButton.exists()).toBe(true)
+  })
+
+  it('respects minDate constraint', () => {
+    const today = new Date()
+    const tomorrow = new Date(today)
+    tomorrow.setDate(today.getDate() + 1)
+    
+    const wrapper = mount(Calendar, {
+      props: {
+        minDate: tomorrow.toISOString().split('T')[0]
+      }
+    })
+    
+    const disabledDays = wrapper.findAll('.calendar-day--disabled')
+    expect(disabledDays.length).toBeGreaterThan(0)
+  })
+
+  it('respects maxDate constraint', () => {
+    const yesterday = new Date()
+    yesterday.setDate(yesterday.getDate() - 1)
+    
+    const wrapper = mount(Calendar, {
+      props: {
+        maxDate: yesterday.toISOString().split('T')[0]
+      }
+    })
+    
+    const disabledDays = wrapper.findAll('.calendar-day--disabled')
+    expect(disabledDays.length).toBeGreaterThan(0)
+  })
+
+  it('shows month picker when month button clicked', async () => {
+    const wrapper = mount(Calendar)
+    const monthButton = wrapper.find('.calendar-month-btn')
+    
+    await monthButton.trigger('click')
+    
+    expect(wrapper.find('.calendar-picker').exists()).toBe(true)
+  })
+
+  it('shows year picker when year button clicked', async () => {
+    const wrapper = mount(Calendar)
+    const yearButton = wrapper.find('.calendar-year-btn')
+    
+    await yearButton.trigger('click')
+    
+    expect(wrapper.find('.calendar-picker').exists()).toBe(true)
+  })
+
+  it('displays correct first day of week', () => {
+    const wrapper = mount(Calendar, {
+      props: {
+        firstDayOfWeek: 1 // Monday
+      }
+    })
+    
+    const firstWeekday = wrapper.find('.calendar-weekday')
+    expect(firstWeekday.text()).toBe('Mon')
+  })
+})