@nexxtmove/ui 0.1.24 → 0.1.26

package/dist/nuxt.js

@@ -1,20 +1,23 @@
-import { defineNuxtModule as a, addComponent as c, addTemplate as s } from "@nuxt/kit";
-const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button/Button.vue", x = "components/Calendar/Calendar.vue", p = "components/Chip/Chip.vue", u = "components/DatePicker/DatePicker.vue", d = "components/Header/Header.vue", r = "components/Icon/Icon.vue", l = "components/InfoBlock/InfoBlock.vue", v = "components/ProgressBar/ProgressBar.vue", S = "components/SocialIcons/SocialIcons.vue", N = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", f = "components/SocialMediaTemplate/SocialMediaTemplate.vue", C = "components/SocialMediaType/SocialMediaType.vue", M = "components/StepperHeader/StepperHeader.vue", T = {
-  NexxtAnimatedNumber: i,
+import { defineNuxtModule as c, addComponent as s, addTemplate as i } from "@nuxt/kit";
+const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button/Button.vue", x = "components/Calendar/Calendar.vue", p = "components/Chip/Chip.vue", l = "components/DatePicker/DatePicker.vue", u = "components/Header/Header.vue", d = "components/Icon/Icon.vue", r = "components/InfoBlock/InfoBlock.vue", v = "components/ProgressBar/ProgressBar.vue", N = "components/SocialIcons/SocialIcons.vue", S = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", T = "components/SocialMediaTemplate/SocialMediaTemplate.vue", f = "components/SocialMediaType/SocialMediaType.vue", C = "components/StepperHeader/StepperHeader.vue", h = "components/TimelineEvent/TimelineEvent.vue", M = "components/TimelinePhaseblock/TimelinePhaseblock.vue", P = "components/Tooltip/Tooltip.vue", b = {
+  NexxtAnimatedNumber: a,
   NexxtButton: m,
   NexxtCalendar: x,
   NexxtChip: p,
-  NexxtDatePicker: u,
-  NexxtHeader: d,
-  NexxtIcon: r,
-  NexxtInfoBlock: l,
+  NexxtDatePicker: l,
+  NexxtHeader: u,
+  NexxtIcon: d,
+  NexxtInfoBlock: r,
   NexxtProgressBar: v,
-  NexxtSocialIcons: S,
-  NexxtSocialMediaCustomTemplate: N,
-  NexxtSocialMediaTemplate: f,
-  NexxtSocialMediaType: C,
-  NexxtStepperHeader: M
-}, I = a({
+  NexxtSocialIcons: N,
+  NexxtSocialMediaCustomTemplate: S,
+  NexxtSocialMediaTemplate: T,
+  NexxtSocialMediaType: f,
+  NexxtStepperHeader: C,
+  NexxtTimelineEvent: h,
+  NexxtTimelinePhaseblock: M,
+  NexxtTooltip: P
+}, B = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -26,13 +29,13 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(T))
-      c({
+    for (const [t, n] of Object.entries(b))
+      s({
         name: t,
         export: "default",
         filePath: `@nexxtmove/ui/${n}`
       });
-    e.addCSS && (s({
+    e.addCSS && (i({
       filename: "nexxtmove-ui.css",
       getContents: () => `
 @import "tailwindcss";
@@ -45,5 +48,5 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
   }
 });
 export {
-  I as default
+  B as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/AnimatedNumber/AnimatedNumber.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 
+defineOptions({
+  name: 'NexxtAnimatedNumber',
+})
+
 type EasingFunction = 'ease-linear' | 'ease-in' | 'ease-out' | 'ease-in-out'
 
 const {

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,
+  },
+}

package/src/components/TimelineEvent/TimelineEvent.test.ts

@@ -0,0 +1,166 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TimelineEvent from './TimelineEvent.vue'
+
+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,
+}
+
+const mountEvent = (eventOverrides = {}, props = {}) =>
+  mount(TimelineEvent, {
+    props: {
+      event: { ...baseEvent, type: 'contact_created', ...eventOverrides },
+      ...props,
+    },
+    global: {
+      stubs: {
+        NexxtIcon: true,
+      },
+    },
+  })
+
+describe('TimelineEvent', () => {
+  it('renders the formatted date', () => {
+    const wrapper = mountEvent()
+    const dateText = wrapper.find('.extra-small-normal').text()
+    expect(dateText).toContain('om')
+  })
+
+  it('sets data-event-source attribute from direction', () => {
+    const wrapper = mountEvent({ direction: 'inbound' })
+    expect(wrapper.attributes('data-event-source')).toBe('inbound')
+  })
+
+  it('sets data-event-date attribute from happened_at', () => {
+    const wrapper = mountEvent({ happened_at: '2024-06-15T10:30:00.000Z' })
+    expect(wrapper.attributes('data-event-date')).toBe('2024-06-15T10:30:00.000Z')
+  })
+
+  it('sets date-event-type attribute from type', () => {
+    const wrapper = mountEvent({ type: 'page_viewed' })
+    expect(wrapper.attributes('date-event-type')).toBe('page_viewed')
+  })
+
+  it('renders the event label for a known event type', () => {
+    const wrapper = mountEvent({ type: 'contact_created' })
+    expect(wrapper.text()).toContain('Contact aangemaakt')
+  })
+
+  it('renders the event type as label for an unknown event type', () => {
+    const wrapper = mountEvent({ type: 'custom_unknown_type' })
+    expect(wrapper.text()).toContain('custom_unknown_type')
+  })
+
+  it('does not render a link when event.url is null', () => {
+    const wrapper = mountEvent({ url: null })
+    expect(wrapper.find('a').exists()).toBe(false)
+  })
+
+  it('renders a link when event.url is set', () => {
+    const wrapper = mountEvent({ url: 'https://example.com' })
+    const link = wrapper.find('a')
+    expect(link.exists()).toBe(true)
+    expect(link.attributes('href')).toBe('https://example.com')
+    expect(link.attributes('target')).toBe('_blank')
+  })
+
+  it('renders event.description as link text when set', () => {
+    const wrapper = mountEvent({ url: 'https://example.com', description: 'Mijn voorstel' })
+    expect(wrapper.find('a').text()).toContain('Mijn voorstel')
+  })
+
+  it('renders event.url as link text when description is null', () => {
+    const wrapper = mountEvent({ url: 'https://example.com', description: null })
+    expect(wrapper.find('a').text()).toContain('https://example.com')
+  })
+
+  it('does not render request_reason when not set', () => {
+    const wrapper = mountEvent({ request_reason: null })
+    expect(wrapper.text()).not.toContain('Reden:')
+  })
+
+  it('renders request_reason when set', () => {
+    const wrapper = mountEvent({ request_reason: 'Interesse in de woning' })
+    expect(wrapper.text()).toContain('Reden: Interesse in de woning')
+  })
+
+  it('aligns outbound events to the left by default (no justify-end)', () => {
+    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
+    expect(wrapper.classes()).not.toContain('justify-end')
+  })
+
+  it('aligns inbound events to the right when splitView is true', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
+    expect(wrapper.classes()).toContain('justify-end')
+  })
+
+  it('does not align inbound events to the right when splitView is false', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: false })
+    expect(wrapper.classes()).not.toContain('justify-end')
+  })
+
+  it('reverses icon and content order for inbound events in splitView', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
+    const innerRow = wrapper.find('.flex.w-full.shrink-0')
+    expect(innerRow.classes()).toContain('flex-row-reverse')
+  })
+
+  it('does not reverse order for outbound events', () => {
+    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
+    const innerRow = wrapper.find('.flex.w-full.shrink-0')
+    expect(innerRow.classes()).not.toContain('flex-row-reverse')
+  })
+
+  it('applies max-w-lg to content when splitView is true', () => {
+    const wrapper = mountEvent({}, { splitView: true })
+    const content = wrapper.find('.rounded-xl')
+    expect(content.classes()).toContain('max-w-lg')
+  })
+
+  it('does not apply max-w-lg to content when splitView is false', () => {
+    const wrapper = mountEvent({}, { splitView: false })
+    const content = wrapper.find('.rounded-xl')
+    expect(content.classes()).not.toContain('max-w-lg')
+  })
+
+  it('defaults splitView to true', () => {
+    const wrapper = mount(TimelineEvent, {
+      props: {
+        event: { ...baseEvent, type: 'contact_created', direction: 'inbound' },
+      },
+      global: { stubs: { NexxtIcon: true } },
+    })
+    expect(wrapper.classes()).toContain('justify-end')
+  })
+
+  it('applies correct background color class for known event type', () => {
+    const wrapper = mountEvent({ type: 'contact_created' })
+    const iconWrapper = wrapper.find('.rounded-full')
+    expect(iconWrapper.classes()).toContain('bg-pink-500')
+  })
+
+  it('applies default background color for unknown event type', () => {
+    const wrapper = mountEvent({ type: 'unknown_type' })
+    const iconWrapper = wrapper.find('.rounded-full')
+    expect(iconWrapper.classes()).toContain('bg-gray-500')
+  })
+
+  it('aligns date text to the right for inbound events in splitView', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
+    expect(wrapper.find('.extra-small-normal').classes()).toContain('text-right')
+  })
+
+  it('does not align date text to the right for outbound events', () => {
+    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
+    expect(wrapper.find('.extra-small-normal').classes()).not.toContain('text-right')
+  })
+})

package/src/components/TimelineEvent/TimelineEvent.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import NexxtIcon from '../Icon/Icon.vue'
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'NexxtTimelineEvent',
+})
+import { EVENT_CONFIG_MAP, type TimelineEvent as Event } from './TimelineTypes'
+
+interface EventConfig {
+  label: string
+  icon: string
+  color: string
+}
+
+const defaultEventConfig: EventConfig = {
+  label: 'Gebeurtenis',
+  icon: 'info',
+  color: 'bg-gray-500',
+}
+
+const eventConfig = computed(() => {
+  return EVENT_CONFIG_MAP[props.event.type] || { ...defaultEventConfig, label: props.event.type }
+})
+
+const props = withDefaults(
+  defineProps<{
+    event: Event
+    splitView?: boolean
+  }>(),
+  {
+    splitView: true,
+  },
+)
+
+const formattedDate = computed(() => {
+  const date = new Date(props.event.happened_at)
+  const datePart = date.toLocaleDateString('nl-NL', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+  const timePart = date.toLocaleTimeString('nl-NL', {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+  return `${datePart} om ${timePart}`
+})
+
+const isContactEvent = computed(() => {
+  return props.splitView && props.event.direction === 'inbound'
+})
+</script>
+
+<template>
+  <div
+    :data-event-source="event.direction"
+    :data-event-date="event.happened_at"
+    :date-event-type="event.type"
+    class="relative z-20 flex flex-wrap items-center gap-x-6 gap-y-2"
+    :class="{
+      'justify-end': isContactEvent,
+    }"
+  >
+    <div
+      class="w-full px-24 extra-small-normal text-gray-600"
+      :class="{
+        'text-right': isContactEvent,
+      }"
+    >
+      {{ formattedDate }}
+    </div>
+
+    <div
+      class="flex w-full shrink-0 items-center gap-6"
+      :class="{
+        'flex-row-reverse': isContactEvent,
+      }"
+    >
+      <div
+        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
+        :class="[eventConfig.color]"
+      >
+        <NexxtIcon
+          :name="eventConfig.icon as any"
+          :type="eventConfig.icon === 'whatsapp' ? 'brands' : 'light'"
+          class="flex h-6 w-6 text-xl text-white"
+        />
+      </div>
+      <div
+        class="flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8"
+        :class="{ 'max-w-lg': splitView }"
+      >
+        <span class="heading-3">
+          {{ eventConfig.label }}
+        </span>
+        <a
+          v-if="event.url"
+          :href="event.url"
+          target="_blank"
+          class="group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
+        >
+          <span class="truncate group-hover:underline">
+            {{ event.description || event.url }}
+          </span>
+          <NexxtIcon name="external-link" class="ml-1 h-4 w-4 text-gray-950" />
+        </a>
+        <span v-if="event.request_reason" class="mt-1 text-sm text-gray-500">
+          Reden: {{ event.request_reason }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>