@nexxtmove/ui 0.1.23 → 0.1.25

package/src/components/Calendar/_CalendarDayView.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref, onMounted } from 'vue'
-import { isSameDay, isSameMonth, isToday, format } from 'date-fns'
+import { isSameDay, isSameMonth, format } from 'date-fns'
+import { toZonedTime } from 'date-fns-tz'
 import type { Locale } from 'date-fns'
 
 interface CalendarDayViewProps {
@@ -10,6 +11,7 @@ interface CalendarDayViewProps {
   markedDates: Date[]
   locale: Locale
   isDisabled: (day: Date) => boolean
+  timezone: string
 }
 
 const props = defineProps<CalendarDayViewProps>()
@@ -19,6 +21,12 @@ const emit = defineEmits<{
 
 const dayButtonsRef = ref<HTMLElement[]>([])
 
+const isTodayByTimezone = (day: Date): boolean => {
+  const zonedDay = toZonedTime(day, props.timezone)
+  const nowZoned = toZonedTime(new Date(), props.timezone)
+  return isSameDay(zonedDay, nowZoned)
+}
+
 const isSelected = (day: Date): boolean => {
   return props.modelValue ? isSameDay(day, props.modelValue) : false
 }
@@ -61,10 +69,12 @@ const handleKeydown = (event: KeyboardEvent, dayIndex: number) => {
       nextIdx -= 7
       break
     case 'Enter':
-    case ' ':
+    case ' ': {
       event.preventDefault()
-      emit('select', props.calendarDays[dayIndex])
+      const selectedDay = props.calendarDays[dayIndex]
+      if (selectedDay) emit('select', selectedDay)
       return
+    }
     default:
       return
   }
@@ -81,7 +91,8 @@ const handleKeydown = (event: KeyboardEvent, dayIndex: number) => {
 onMounted(() => {
   const focusIdx = props.calendarDays.findIndex(
     (d) =>
-      (props.modelValue && isSameDay(d, props.modelValue)) || (!props.modelValue && isToday(d)),
+      (props.modelValue && isSameDay(d, props.modelValue)) ||
+      (!props.modelValue && isTodayByTimezone(d)),
   )
   if (focusIdx !== -1) {
     // We don't auto-focus on mount to avoid stealing focus from the popover,
@@ -129,10 +140,12 @@ defineExpose({
             'relative flex h-8 w-8 items-center justify-center rounded-xl text-xs transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1',
             !isSameMonth(day, viewDate) ? 'text-gray-300' : 'text-gray-900',
             isSelected(day) ? 'bg-cornflower-blue-500 font-medium text-white!' : '',
-            isToday(day) && !isSelected(day)
+            isTodayByTimezone(day) && !isSelected(day)
               ? 'font-medium text-cornflower-blue-500! ring-1 ring-cornflower-blue-500'
               : '',
-            isToday(day) && isSelected(day) ? 'ring-2 ring-cornflower-blue-500 ring-offset-2' : '',
+            isTodayByTimezone(day) && isSelected(day)
+              ? 'ring-2 ring-cornflower-blue-500 ring-offset-2'
+              : '',
             !isDisabled(day) && !isSelected(day)
               ? 'cursor-pointer hover:bg-cornflower-blue-50'
               : '',

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

@@ -6,63 +6,47 @@ 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 = mount(CalendarMonthView, {
-      props: {
-        viewYear: VIEW_YEAR,
-        modelValue: null,
-        currentMonth: CURRENT_MONTH,
-        locale: nl,
-      },
-    })
+    const wrapper = mountMonthView({})
     const buttons = wrapper.findAll('button')
     expect(buttons.length).toBe(12)
   })
 
   it('highlights the selected month', () => {
-    const selectedDate = new Date(VIEW_YEAR, 5, 15) // June
-    const wrapper = mount(CalendarMonthView, {
-      props: {
-        viewYear: VIEW_YEAR,
-        modelValue: selectedDate,
-        currentMonth: CURRENT_MONTH,
-        locale: nl,
-      },
-    })
+    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(VIEW_YEAR, 2, 1) // March 1st
-    const wrapper = mount(CalendarMonthView, {
-      props: {
-        viewYear: VIEW_YEAR,
-        modelValue: null,
-        currentMonth: CURRENT_MONTH,
-        locale: nl,
-        minDate,
-      },
-    })
+    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')
+    expect(disabledButtons[0]?.text()).toBe('Jan')
+    expect(disabledButtons[1]?.text()).toBe('Feb')
   })
 
   it('emits select event when a month is clicked', async () => {
-    const wrapper = mount(CalendarMonthView, {
-      props: {
-        viewYear: VIEW_YEAR,
-        modelValue: null,
-        currentMonth: CURRENT_MONTH,
-        locale: nl,
-      },
-    })
-    await wrapper.findAll('button')[5].trigger('click')
-    expect(wrapper.emitted('select')).toBeTruthy()
-    expect(wrapper.emitted('select')![0][0]).toBe(5)
+    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/_CalendarMonthView.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { format, startOfMonth, endOfMonth, startOfDay, endOfDay } from 'date-fns'
+import { toZonedTime } from 'date-fns-tz'
 import type { Locale } from 'date-fns'
 
 interface CalendarMonthViewProps {
@@ -10,6 +11,7 @@ interface CalendarMonthViewProps {
   minDate?: Date
   maxDate?: Date
   locale: Locale
+  timezone: string
 }
 
 const props = defineProps<CalendarMonthViewProps>()
@@ -19,7 +21,7 @@ const emit = defineEmits<{
 
 const monthItems = computed(() =>
   Array.from({ length: 12 }, (_, i) => {
-    const d = new Date(props.viewYear, i, 1)
+    const d = toZonedTime(new Date(Date.UTC(props.viewYear, i, 1)), props.timezone)
     const raw = format(d, 'LLL', { locale: props.locale }).replace('.', '').trim()
     return { index: i, label: raw.charAt(0).toUpperCase() + raw.slice(1) }
   }),
@@ -27,17 +29,24 @@ const monthItems = computed(() =>
 
 const isMonthDisabled = (i: number): boolean => {
   const y = props.viewYear
-  if (props.minDate && endOfMonth(new Date(y, i)) < startOfDay(props.minDate)) return true
-  if (props.maxDate && startOfMonth(new Date(y, i)) > endOfDay(props.maxDate)) return true
+  const monthDate = toZonedTime(new Date(Date.UTC(y, i, 1)), props.timezone)
+  if (
+    props.minDate &&
+    endOfMonth(monthDate) < startOfDay(toZonedTime(props.minDate, props.timezone))
+  )
+    return true
+  if (
+    props.maxDate &&
+    startOfMonth(monthDate) > endOfDay(toZonedTime(props.maxDate, props.timezone))
+  )
+    return true
   return false
 }
 
 const isMonthSelected = (i: number): boolean => {
-  return (
-    !!props.modelValue &&
-    props.modelValue.getFullYear() === props.viewYear &&
-    props.modelValue.getMonth() === i
-  )
+  if (!props.modelValue) return false
+  const zonedModel = toZonedTime(props.modelValue, props.timezone)
+  return zonedModel.getFullYear() === props.viewYear && zonedModel.getMonth() === i
 }
 
 const isMonthCurrent = (i: number): boolean => {

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

@@ -0,0 +1,56 @@
+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/Calendar/_CalendarYearView.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { ref, computed, nextTick, onMounted } from 'vue'
+import { toZonedTime } from 'date-fns-tz'
 
 interface CalendarYearViewProps {
   viewYear: number
   minDate?: Date
   maxDate?: Date
+  timezone: string
 }
 
 const props = defineProps<CalendarYearViewProps>()
@@ -16,8 +18,12 @@ const YEAR_ITEM_H = 36 // px — matches h-9
 const yearScrollerRef = ref<HTMLElement | null>(null)
 
 const yearRange = computed(() => {
-  const min = props.minDate ? props.minDate.getFullYear() : props.viewYear - 100
-  const max = props.maxDate ? props.maxDate.getFullYear() : props.viewYear + 20
+  const min = props.minDate
+    ? toZonedTime(props.minDate, props.timezone).getFullYear()
+    : props.viewYear - 100
+  const max = props.maxDate
+    ? toZonedTime(props.maxDate, props.timezone).getFullYear()
+    : props.viewYear + 20
   return Array.from({ length: max - min + 1 }, (_, i) => min + i)
 })
 

package/src/components/Calendar/calendar.types.ts

@@ -7,4 +7,5 @@ export interface NexxtCalendarProps {
   minDate?: Date
   maxDate?: Date
   monthYearPicker?: boolean
+  timezone?: string
 }

package/src/components/DatePicker/DatePicker.vue

@@ -24,12 +24,15 @@ const props = withDefaults(defineProps<NexxtDatePickerProps>(), {
 
 const PICKER_ONLY_KEYS = new Set(['placeholder', 'anchor', 'autoClose'])
 
-const calendarProps = computed(
-  (): NexxtCalendarProps =>
-    Object.fromEntries(
-      Object.entries(props).filter(([key]) => !PICKER_ONLY_KEYS.has(key)),
-    ) as NexxtCalendarProps,
-)
+const calendarProps = computed((): NexxtCalendarProps => {
+  const commonProps = Object.fromEntries(
+    Object.entries(props).filter(([key]) => !PICKER_ONLY_KEYS.has(key)),
+  )
+  return {
+    timezone: 'UTC',
+    ...commonProps,
+  } as NexxtCalendarProps
+})
 
 // ── State ─────────────────────────────────────────────────────────────────────
 

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

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