@davidbirchall/core 1.0.8 → 1.0.9

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

@@ -1,145 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import Button from './Button.vue'
-
-describe('Button', () => {
-  describe('rendering', () => {
-    it('renders slot content', () => {
-      render(Button, {
-        slots: {
-          default: 'Click me'
-        }
-      })
-
-      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument()
-    })
-
-    it('applies primary variant class by default', () => {
-      render(Button, {
-        slots: { default: 'Button' }
-      })
-      
-      const button = screen.getByRole('button')
-      expect(button).toHaveClass('btn--primary')
-    })
-
-    it('applies correct variant class', () => {
-      render(Button, {
-        props: {
-          variant: 'secondary'
-        },
-        slots: { default: 'Button' }
-      })
-
-      const button = screen.getByRole('button')
-      expect(button).toHaveClass('btn--secondary')
-      expect(button).not.toHaveClass('btn--primary')
-    })
-
-    it('applies danger variant class', () => {
-      render(Button, {
-        props: {
-          variant: 'danger'
-        },
-        slots: { default: 'Button' }
-      })
-
-      const button = screen.getByRole('button')
-      expect(button).toHaveClass('btn--danger')
-    })
-
-    it('applies disabled class when disabled prop is true', () => {
-      render(Button, {
-        props: {
-          disabled: true
-        },
-        slots: { default: 'Button' }
-      })
-
-      const button = screen.getByRole('button')
-      expect(button).toHaveClass('btn--disabled')
-    })
-
-    it('sets disabled attribute when disabled prop is true', () => {
-      render(Button, {
-        props: {
-          disabled: true
-        },
-        slots: { default: 'Button' }
-      })
-
-      const button = screen.getByRole('button')
-      expect(button).toBeDisabled()
-    })
-  })
-
-  describe('interactions', () => {
-    it('emits click event when clicked', async () => {
-      const user = userEvent.setup()
-      const clickHandler = vi.fn()
-      
-      render(Button, {
-        props: {
-          onClick: clickHandler
-        },
-        slots: { default: 'Click me' }
-      })
-
-      const button = screen.getByRole('button')
-      await user.click(button)
-
-      expect(clickHandler).toHaveBeenCalledTimes(1)
-      expect(clickHandler).toHaveBeenCalledWith(expect.any(MouseEvent))
-    })
-
-    it('does not call click handler when disabled', async () => {
-      const user = userEvent.setup()
-      const clickHandler = vi.fn()
-      
-      render(Button, {
-        props: {
-          disabled: true,
-          onClick: clickHandler
-        },
-        slots: { default: 'Button' }
-      })
-
-      const button = screen.getByRole('button')
-      await user.click(button)
-
-      expect(clickHandler).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('props validation', () => {
-    it('accepts all valid variant values', () => {
-      const variants = ['primary', 'secondary', 'danger'] as const
-
-      variants.forEach(variant => {
-        const { container } = render(Button, {
-          props: {
-            variant
-          },
-          slots: { default: 'Button' }
-        })
-
-        const button = container.querySelector('button')
-        expect(button).toHaveClass(`btn--${variant}`)
-      })
-    })
-
-    it('handles boolean disabled prop', () => {
-      render(Button, {
-        props: {
-          disabled: false
-        },
-        slots: { default: 'Button' }
-      })
-
-      const button = screen.getByRole('button')
-      expect(button).not.toHaveClass('btn--disabled')
-      expect(button).not.toBeDisabled()
-    })
-  })
-})

package/src/components/Button/Button.vue

@@ -1,108 +0,0 @@
-<template>
-  <component
-    :is="url ? 'a' : 'button'"
-    :href="url"
-    :target="url ? target : undefined"
-    :rel="url && target === '_blank' ? 'noopener noreferrer' : undefined"
-    :class="['btn', `btn--${variant}`, { 'btn--disabled': disabled }]"
-    :disabled="!url && disabled"
-    :aria-disabled="disabled"
-    v-on="!url ? { click: handleClick } : {}"
-  >
-    <slot />
-    <span v-if="url && target === '_blank'" class="sr-only">(opens in new window)</span>
-  </component>
-</template>
-
-<script setup lang="ts">
-export interface ButtonProps {
-  variant?: 'primary' | 'secondary' | 'danger'
-  disabled?: boolean
-  url?: string
-  target?: '_self' | '_blank'
-}
-
-const props = withDefaults(defineProps<ButtonProps>(), {
-  variant: 'primary',
-  disabled: false,
-  target: '_self'
-})
-
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
-const handleClick = (event: MouseEvent) => {
-  if (props.disabled) {
-    event.preventDefault()
-    event.stopImmediatePropagation()
-  } else {
-    emit('click', event)
-  }
-}
-</script>
-
-<style scoped>
-.btn {
-  padding: 0.5rem 1rem;
-  border: none;
-  border-radius: 0.25rem;
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-}
-
-.btn:hover:not(.btn--disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.btn--primary {
-  background-color: #3b82f6;
-  color: white;
-}
-
-.btn--primary:hover:not(.btn--disabled) {
-  background-color: #2563eb;
-}
-
-.btn--secondary {
-  background-color: #6b7280;
-  color: white;
-}
-
-.btn--secondary:hover:not(.btn--disabled) {
-  background-color: #4b5563;
-}
-
-.btn--danger {
-  background-color: #ef4444;
-  color: white;
-}
-
-.btn--danger:hover:not(.btn--disabled) {
-  background-color: #dc2626;
-}
-
-.btn--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-</style>

package/src/components/Button/types.ts

@@ -1,4 +0,0 @@
-export interface ButtonProps {
-  variant?: 'primary' | 'secondary' | 'danger'
-  disabled?: boolean
-}

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

@@ -1,261 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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')
-  })
-})