@nexxtmove/ui 0.1.30 → 0.1.32

package/src/components/TimelinePhaseblock/TimelinePhaseblock.stories.ts

@@ -1,198 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import TimelinePhaseblock from './TimelinePhaseblock.vue'
-import type { TimelinePhase } from '../TimelineEvent/TimelineTypes'
-
-export default {
-  title: 'Components/Molecules/Timeline Phaseblock',
-  component: TimelinePhaseblock,
-} satisfies Meta<typeof TimelinePhaseblock>
-
-type Story = StoryObj<typeof TimelinePhaseblock>
-
-const makePhase = (
-  value: number,
-  entered_at: string | null = '2024-06-01T09:00:00.000Z',
-  exited_at: string | null = '2024-07-01T09:00:00.000Z',
-  events: TimelinePhase['events'] = [],
-): TimelinePhase => ({
-  phase: { value },
-  entered_at,
-  exited_at,
-  events,
-})
-
-const sampleEvent = {
-  id: 1,
-  type: 'contact_created',
-  happened_at: '2024-06-10T10:30:00.000Z',
-  medium_type: null,
-  url: null,
-  page_title: null,
-  request_reason: null,
-  agenda_item_type: null,
-  source: 'system',
-  direction: 'outbound',
-  description: null,
-}
-
-// Single phase at the end of the timeline (no separator shown)
-export const SinglePhase: Story = {
-  args: {
-    phase: makePhase(1),
-    index: 0,
-    phases: [makePhase(1)],
-    isSplitView: true,
-    isLast: true,
-  },
-}
-
-// First phase (index 0) in split view — shows the Outbound/Inbound header
-export const FirstPhaseWithHeader: Story = {
-  args: {
-    phase: makePhase(4),
-    index: 0,
-    phases: [makePhase(4), makePhase(2)],
-    isSplitView: true,
-    isLast: false,
-  },
-}
-
-// Phase separator visible — phase progressed upward (arrow up)
-export const PhaseProgressedUp: Story = {
-  args: {
-    phase: makePhase(4),
-    index: 0,
-    phases: [makePhase(4), makePhase(2)],
-    isSplitView: true,
-    isLast: false,
-  },
-}
-
-// Phase separator visible — phase regressed downward (arrow down)
-export const PhaseRegressedDown: Story = {
-  args: {
-    phase: makePhase(2),
-    index: 0,
-    phases: [makePhase(2), makePhase(4)],
-    isSplitView: true,
-    isLast: false,
-  },
-}
-
-// Last item in a multi-phase list — no separator shown
-export const LastInList: Story = {
-  args: {
-    phase: makePhase(1),
-    index: 1,
-    phases: [makePhase(4), makePhase(1)],
-    isSplitView: true,
-    isLast: true,
-  },
-}
-
-// Non-split view — with phase separator
-export const NonSplitView: Story = {
-  args: {
-    phase: makePhase(3),
-    index: 0,
-    phases: [makePhase(3), makePhase(1)],
-    isSplitView: false,
-    isLast: false,
-  },
-}
-
-// Non-split view — single/last phase (no separator)
-export const NonSplitViewLast: Story = {
-  args: {
-    phase: makePhase(3),
-    index: 0,
-    phases: [makePhase(3)],
-    isSplitView: false,
-    isLast: true,
-  },
-}
-
-// Non-split view — with events
-export const NonSplitViewWithEvents: Story = {
-  args: {
-    phase: makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
-      sampleEvent,
-      { ...sampleEvent, id: 2, type: 'page_viewed', happened_at: '2024-06-12T14:00:00.000Z' },
-    ]),
-    index: 0,
-    phases: [makePhase(4), makePhase(2)],
-    isSplitView: false,
-    isLast: false,
-  },
-}
-
-// Phase with events
-export const WithEvents: Story = {
-  args: {
-    phase: makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
-      sampleEvent,
-      { ...sampleEvent, id: 2, type: 'page_viewed', happened_at: '2024-06-12T14:00:00.000Z' },
-      {
-        ...sampleEvent,
-        id: 3,
-        type: 'whatsapp_message_received',
-        direction: 'inbound',
-        happened_at: '2024-06-15T11:00:00.000Z',
-      },
-    ]),
-    index: 0,
-    phases: [makePhase(4), makePhase(2)],
-    isSplitView: true,
-    isLast: false,
-  },
-}
-
-// All phases shown together (newest first)
-export const FullTimeline: Story = {
-  args: {
-    phase: makePhase(5, '2024-08-01T09:00:00.000Z', null, [
-      { ...sampleEvent, id: 4, type: 'proposal_accepted', happened_at: '2024-08-05T10:00:00.000Z' },
-    ]),
-    index: 0,
-    phases: [
-      makePhase(5, '2024-08-01T09:00:00.000Z', null),
-      makePhase(4, '2024-06-01T09:00:00.000Z', '2024-08-01T09:00:00.000Z'),
-      makePhase(1, '2024-01-01T09:00:00.000Z', '2024-06-01T09:00:00.000Z'),
-    ],
-    isSplitView: true,
-    isLast: false,
-  },
-}
-
-// Phase with no entered_at or exited_at dates
-export const NoDates: Story = {
-  args: {
-    phase: makePhase(2, null, null),
-    index: 0,
-    phases: [makePhase(2, null, null), makePhase(1, null, null)],
-    isSplitView: true,
-    isLast: false,
-  },
-}
-
-// Inactive phase (value 0)
-export const InactivePhase: Story = {
-  args: {
-    phase: makePhase(0),
-    index: 0,
-    phases: [makePhase(0)],
-    isSplitView: true,
-    isLast: true,
-  },
-}
-
-// Wonen phase (value 6 — highest)
-export const WonenPhase: Story = {
-  args: {
-    phase: makePhase(6),
-    index: 0,
-    phases: [makePhase(6), makePhase(5)],
-    isSplitView: true,
-    isLast: false,
-  },
-}

package/src/components/TimelinePhaseblock/TimelinePhaseblock.test.ts

@@ -1,283 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { defineComponent } from 'vue'
-import TimelinePhaseblock from './TimelinePhaseblock.vue'
-import type { TimelinePhase } from '../TimelineEvent/TimelineTypes'
-
-const TimelineEventStub = defineComponent({
-  name: 'NexxtTimelineEvent',
-  props: ['event', 'splitView'],
-  template: '<div class="timeline-event-stub" />',
-})
-
-const makePhase = (
-  value: number,
-  entered_at: string | null = '2024-06-01T09:00:00.000Z',
-  exited_at: string | null = '2024-07-01T09:00:00.000Z',
-  events: TimelinePhase['events'] = [],
-): TimelinePhase => ({
-  phase: { value },
-  entered_at,
-  exited_at,
-  events,
-})
-
-const baseEvent = {
-  id: 1,
-  type: 'contact_created',
-  happened_at: '2024-06-10T10: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 stubs = {
-  NexxtIcon: true,
-  NexxtTimelineEvent: TimelineEventStub,
-}
-
-const mountBlock = (overrides: Partial<InstanceType<typeof TimelinePhaseblock>['$props']> = {}) => {
-  const phases = [makePhase(4), makePhase(2)]
-  return mount(TimelinePhaseblock, {
-    props: {
-      phase: phases[0],
-      index: 0,
-      phases,
-      isSplitView: true,
-      isLast: false,
-      ...overrides,
-    },
-    global: { stubs },
-  })
-}
-
-describe('TimelinePhaseblock', () => {
-  describe('data attribute', () => {
-    it('sets data-phase to the phase value', () => {
-      const wrapper = mountBlock()
-      expect(wrapper.attributes('data-phase')).toBe('4')
-    })
-  })
-
-  describe('outbound/inbound header', () => {
-    it('shows the header when index is 0 and isSplitView is true', () => {
-      const wrapper = mountBlock({ index: 0, isSplitView: true })
-      expect(wrapper.text()).toContain('Outbound')
-      expect(wrapper.text()).toContain('Inbound')
-    })
-
-    it('does not show the header when index is not 0', () => {
-      const phases = [makePhase(4), makePhase(2)]
-      const wrapper = mountBlock({ phase: phases[1], index: 1, phases, isSplitView: true })
-      expect(wrapper.text()).not.toContain('Outbound')
-    })
-
-    it('does not show the header when isSplitView is false', () => {
-      const wrapper = mountBlock({ index: 0, isSplitView: false })
-      expect(wrapper.text()).not.toContain('Outbound')
-    })
-  })
-
-  describe('timeline lines', () => {
-    it('always renders the left timeline line', () => {
-      const wrapper = mountBlock({ isSplitView: false })
-      expect(wrapper.find('.border-l.left-5').exists()).toBe(true)
-    })
-
-    it('renders the right timeline line when isSplitView is true', () => {
-      const wrapper = mountBlock({ isSplitView: true })
-      expect(wrapper.find('.border-l.right-5').exists()).toBe(true)
-    })
-
-    it('does not render the right timeline line when isSplitView is false', () => {
-      const wrapper = mountBlock({ isSplitView: false })
-      expect(wrapper.find('.border-l.right-5').exists()).toBe(false)
-    })
-
-    it('applies the phase color to the left timeline line', () => {
-      // phase value 4 → border-blue-500
-      const wrapper = mountBlock()
-      expect(wrapper.find('.border-l.left-5').classes()).toContain('border-blue-500')
-    })
-  })
-
-  describe('events', () => {
-    it('renders a NexxtTimelineEvent for each event in the phase', () => {
-      const phases = [
-        makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
-          baseEvent,
-          { ...baseEvent, id: 2 },
-        ]),
-      ]
-      const wrapper = mount(TimelinePhaseblock, {
-        props: { phase: phases[0], index: 0, phases, isSplitView: true, isLast: true },
-        global: { stubs },
-      })
-      expect(wrapper.findAllComponents(TimelineEventStub).length).toBe(2)
-    })
-
-    it('renders no events when the phase has an empty events array', () => {
-      const wrapper = mountBlock()
-      expect(wrapper.findAllComponents(TimelineEventStub).length).toBe(0)
-    })
-
-    it('passes isSplitView to each event', () => {
-      const phases = [
-        makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [baseEvent]),
-      ]
-      const wrapper = mount(TimelinePhaseblock, {
-        props: { phase: phases[0], index: 0, phases, isSplitView: false, isLast: true },
-        global: { stubs },
-      })
-      expect(wrapper.findComponent(TimelineEventStub).props('splitView')).toBe(false)
-    })
-  })
-
-  describe('phase separator badge', () => {
-    it('shows the separator when index is not the last in the phases array', () => {
-      // phases has 2 items, index 0 → 0 !== 1 → shows separator
-      const wrapper = mountBlock({ index: 0 })
-      expect(wrapper.find('.rounded-full').exists()).toBe(true)
-    })
-
-    it('does not show the separator when index equals phases.length - 1', () => {
-      const phases = [makePhase(4), makePhase(2)]
-      const wrapper = mountBlock({ phase: phases[1], index: 1, phases })
-      expect(wrapper.find('.rounded-full').exists()).toBe(false)
-    })
-
-    it('displays the phase label in the separator', () => {
-      // phase value 4 → 'Selectie'
-      const wrapper = mountBlock()
-      expect(wrapper.find('.rounded-full').text()).toContain('Selectie')
-    })
-
-    it('applies the correct background color class to the separator badge', () => {
-      // phase value 4 → bg-blue-500
-      const wrapper = mountBlock()
-      expect(wrapper.find('.rounded-full').classes()).toContain('bg-blue-500')
-    })
-
-    it('applies the correct text color class to the separator badge', () => {
-      // phase value 4 → text-white
-      const wrapper = mountBlock()
-      expect(wrapper.find('.rounded-full').classes()).toContain('text-white')
-    })
-
-    it('shows an up arrow when the current phase value is higher than the previous phase', () => {
-      // index 0 = value 4, index 1 = value 2 → 4 > 2 → up
-      const wrapper = mountBlock()
-      const arrowStub = wrapper.find('nexxt-icon-stub[name="arrow-up"]')
-      expect(arrowStub.exists()).toBe(true)
-    })
-
-    it('shows a down arrow when the current phase value is lower than the previous phase', () => {
-      // index 0 = value 2, index 1 = value 4 → 2 < 4 → down
-      const phases = [makePhase(2), makePhase(4)]
-      const wrapper = mountBlock({ phase: phases[0], index: 0, phases })
-      const arrowStub = wrapper.find('nexxt-icon-stub[name="arrow-down"]')
-      expect(arrowStub.exists()).toBe(true)
-    })
-
-    it('shows no direction arrow when there is no previous phase', () => {
-      const phases = [makePhase(4)]
-      // With only one phase, index 0 === phases.length - 1, so separator is hidden anyway.
-      // Use a 2-item list but check the last item's arrow (no prevPhase for last)
-      // Actually let's test: if index === phases.length -1, separator is hidden.
-      // The arrow is inside the separator, so let's just check getPhaseDirection returns null
-      // by having no phase at index+1. We can't show separator unless index !== phases.length-1,
-      // so create a dummy scenario: index=0, phases=[phase0] would hide separator.
-      // Instead verify: no arrow-up or arrow-down when phases only have one entry.
-      const wrapper = mount(TimelinePhaseblock, {
-        props: { phase: phases[0], index: 0, phases, isSplitView: true, isLast: true },
-        global: { stubs },
-      })
-      expect(wrapper.find('nexxt-icon-stub[name="arrow-up"]').exists()).toBe(false)
-      expect(wrapper.find('nexxt-icon-stub[name="arrow-down"]').exists()).toBe(false)
-    })
-
-    it('shows entered_at date when phase progressed upward', () => {
-      // phase value 4 > prev value 2 → show entered_at
-      const phase = makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z')
-      const phases = [phase, makePhase(2)]
-      const wrapper = mountBlock({ phase, phases })
-      // entered_at = 2024-06-01 → formatted in nl-NL → contains "jun"
-      const dateEl = wrapper.find('.text-gray-500')
-      expect(dateEl.text()).toContain('jun')
-    })
-
-    it('shows exited_at date when phase regressed downward', () => {
-      // phase value 2 < prev value 4 → show exited_at
-      const phase = makePhase(2, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z')
-      const phases = [phase, makePhase(4)]
-      const wrapper = mountBlock({ phase, phases })
-      // exited_at = 2024-07-01 → contains "jul"
-      const dateEl = wrapper.find('.text-gray-500')
-      expect(dateEl.text()).toContain('jul')
-    })
-
-    it('shows empty string when relevant date is null', () => {
-      const phase = makePhase(4, null, null)
-      const phases = [phase, makePhase(2)]
-      const wrapper = mountBlock({ phase, phases })
-      expect(wrapper.find('.text-gray-500').text()).toBe('')
-    })
-
-    it('renders the horizontal divider line in split view', () => {
-      const wrapper = mountBlock({ isSplitView: true })
-      expect(wrapper.find('.h-px.w-\\[75\\%\\]').exists()).toBe(true)
-    })
-
-    it('does not render the horizontal divider line outside split view', () => {
-      const wrapper = mountBlock({ isSplitView: false })
-      expect(wrapper.find('.h-px.w-\\[75\\%\\]').exists()).toBe(false)
-    })
-
-    it('applies pl-16 to the separator container when not in split view', () => {
-      const wrapper = mountBlock({ isSplitView: false })
-      const separator = wrapper.find('.relative.flex.flex-col.items-center')
-      expect(separator.classes()).toContain('pl-16')
-    })
-
-    it('does not apply pl-16 to the separator container in split view', () => {
-      const wrapper = mountBlock({ isSplitView: true })
-      const separator = wrapper.find('.relative.flex.flex-col.items-center')
-      expect(separator.classes()).not.toContain('pl-16')
-    })
-  })
-
-  describe('gradient', () => {
-    it('applies gradient classes to the vertical gradient bar when there is a previous phase', () => {
-      // phase value 4 → fromColor: from-blue-500; prev phase value 2 → toColor: to-purple-500
-      const wrapper = mountBlock()
-      const gradientBar = wrapper.find('.bg-linear-to-b.left-5')
-      expect(gradientBar.classes()).toContain('from-blue-500')
-      expect(gradientBar.classes()).toContain('to-purple-500')
-    })
-
-    it('applies no gradient classes when there is no previous phase', () => {
-      const phases = [makePhase(4)]
-      const wrapper = mount(TimelinePhaseblock, {
-        props: { phase: phases[0], index: 0, phases, isSplitView: true, isLast: true },
-        global: { stubs },
-      })
-      // No separator rendered, so no gradient bar inside separator
-      expect(wrapper.find('.bg-linear-to-b').exists()).toBe(false)
-    })
-
-    it('renders the right-side gradient bar in split view', () => {
-      const wrapper = mountBlock({ isSplitView: true })
-      expect(wrapper.find('.bg-linear-to-b.right-5').exists()).toBe(true)
-    })
-
-    it('does not render the right-side gradient bar outside split view', () => {
-      const wrapper = mountBlock({ isSplitView: false })
-      expect(wrapper.find('.bg-linear-to-b.right-5').exists()).toBe(false)
-    })
-  })
-})

package/src/components/Tooltip/Tooltip.stories.ts

@@ -1,146 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import Tooltip from './Tooltip.vue'
-
-export default {
-  title: 'Components/Atoms/Tooltip',
-  component: Tooltip,
-} satisfies Meta<typeof Tooltip>
-
-type Story = StoryObj<typeof Tooltip>
-
-const trigger = `<button class="rounded border border-gray-300 px-3 py-1 text-sm">Hover me</button>`
-
-export const Default: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip>
-        ${trigger}
-        <template #tooltip>This is a tooltip</template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const WithDelay: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip :delay="500">
-        <button class="rounded border border-gray-300 px-3 py-1 text-sm">Hover me (500ms delay)</button>
-        <template #tooltip>Appears after a delay</template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const SideBottom: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip side="bottom">
-        ${trigger}
-        <template #tooltip>Tooltip below</template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const SideLeft: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip side="left">
-        ${trigger}
-        <template #tooltip>Tooltip on the left</template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const SideRight: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip side="right">
-        ${trigger}
-        <template #tooltip>Tooltip on the right</template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const AlignStart: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip align="start">
-        ${trigger}
-        <template #tooltip>Aligned to start</template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const AlignEnd: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip align="end">
-        ${trigger}
-        <template #tooltip>Aligned to end</template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const CustomOffset: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip :side-offset="20">
-        ${trigger}
-        <template #tooltip>Further away (20px offset)</template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const DisableHoverableContent: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip :disable-hoverable-content="true">
-        ${trigger}
-        <template #tooltip>Closes when you move to the tooltip</template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const RichContent: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip>
-        <button class="rounded border border-gray-300 px-3 py-1 text-sm">Hover for details</button>
-        <template #tooltip>
-          <strong>Title</strong>
-          <p class="mt-1 text-gray-500">Additional description here</p>
-        </template>
-      </Tooltip>
-    `,
-  }),
-}
-
-export const OnIcon: Story = {
-  render: () => ({
-    components: { Tooltip },
-    template: `
-      <Tooltip>
-        <span class="inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-xs text-gray-600">?</span>
-        <template #tooltip>Helpful information about this field</template>
-      </Tooltip>
-    `,
-  }),
-}