@nexxtmove/ui 0.1.31 → 0.1.33

package/src/components/SocialMediaTemplate/SocialMediaTemplate.test.ts

@@ -1,466 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, vi } from 'vitest'
-import SocialMediaTemplate from './SocialMediaTemplate.vue'
-
-describe('SocialMediaTemplate', () => {
-  it('renders an image when media is an image file', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: 'https://example.com/image.jpg',
-        mediaType: 'image',
-        name: 'Amsterdam',
-        type: 'Woning',
-      },
-    })
-
-    expect(wrapper.find('img').exists()).toBe(true)
-    expect(wrapper.find('video').exists()).toBe(false)
-  })
-
-  it('renders a video when media is a video file', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/barcelona.mp4',
-        mediaType: 'video',
-        name: 'Barcelona',
-        type: 'Woning',
-        muted: true,
-      },
-    })
-
-    expect(wrapper.find('video').exists()).toBe(true)
-    expect(wrapper.find('img').exists()).toBe(false)
-  })
-
-  it('displays the name and type correctly', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: 'https://example.com/image.png',
-        mediaType: 'image',
-        name: 'Amsterdam',
-        type: 'Woning',
-      },
-    })
-
-    expect(wrapper.text()).toContain('Amsterdam')
-    expect(wrapper.text()).toContain('Woning')
-  })
-
-  it('shows play icon when variant is video', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test.mp4',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-      },
-    })
-
-    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
-    const playIcon = icons.find((icon) => icon.props('name') === 'play-circle')
-    expect(playIcon).toBeDefined()
-  })
-
-  it('does not show play icon when variant is post', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Image',
-      },
-    })
-
-    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
-    const playIcon = icons.find((icon) => icon.props('name') === 'play')
-    expect(playIcon).toBeUndefined()
-  })
-
-  it('shows selected overlay when selected prop is true', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Image',
-        selected: true,
-      },
-    })
-
-    const overlay = wrapper.find('.bg-cornflower-blue-200\\/70')
-    expect(overlay.classes()).toContain('opacity-100')
-  })
-
-  it('hides selected overlay when selected prop is false', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Image',
-        selected: false,
-      },
-    })
-
-    const overlay = wrapper.find('.bg-cornflower-blue-200\\/70')
-    expect(overlay.classes()).toContain('opacity-0')
-  })
-
-  it('plays video on mouseenter when media is video', async () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test.mp4',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-        muted: true,
-      },
-    })
-
-    const video = wrapper.find('video').element as HTMLVideoElement
-    const playSpy = vi.spyOn(video, 'play').mockImplementation(() => Promise.resolve())
-
-    await wrapper.trigger('mouseenter')
-
-    expect(playSpy).toHaveBeenCalled()
-  })
-
-  it('pauses video on mouseleave when media is video', async () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test.mp4',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-        muted: true,
-      },
-    })
-
-    const video = wrapper.find('video').element as HTMLVideoElement
-    const pauseSpy = vi.spyOn(video, 'pause')
-
-    await wrapper.trigger('mouseleave')
-
-    expect(pauseSpy).toHaveBeenCalled()
-  })
-
-  it('applies aspect-9/16 class when variant is video', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test.mp4',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('aspect-9/16')
-  })
-
-  it('applies h-80 class when variant is post', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Image',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('h-80')
-  })
-
-  it('uses media_type prop for image rendering', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: '/test-without-extension',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Image',
-      },
-    })
-
-    expect(wrapper.find('img').exists()).toBe(true)
-    expect(wrapper.find('video').exists()).toBe(false)
-  })
-
-  it('uses media_type prop for video rendering', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test-video-without-extension',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-        muted: true,
-      },
-    })
-
-    expect(wrapper.find('video').exists()).toBe(true)
-    expect(wrapper.find('img').exists()).toBe(false)
-  })
-
-  it('correctly map various media extensions to mime types', () => {
-    const extensions = {
-      mp4: 'video/mp4',
-      webm: 'video/webm',
-      ogg: 'video/ogg',
-      mov: 'video/quicktime',
-      avi: 'video/x-msvideo',
-      mkv: 'video/x-matroska',
-      unknown: 'video/mp4',
-    }
-
-    Object.entries(extensions).forEach(([ext, expectedMime]) => {
-      const wrapper = mount(SocialMediaTemplate, {
-        props: {
-          variant: 'video',
-          media: `/test.${ext}`,
-          mediaType: 'video',
-          mediaExtension: ext === 'unknown' ? undefined : ext,
-          name: 'Test',
-          type: 'Video',
-        },
-      })
-
-      const source = wrapper.find('source')
-      expect(source.attributes('type')).toBe(expectedMime)
-    })
-  })
-
-  it('handles custom aspect ratio correctly', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test.mp4',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-        aspectRatio: '16:9',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('aspect-16/9')
-  })
-
-  it('applies video-specific colors when variant is video', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test.mp4',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-        selected: true,
-      },
-    })
-
-    // Check overlay background
-    const overlay = wrapper.find('.z-10')
-    expect(overlay.classes()).toContain('bg-purple-200/70')
-
-    // Check checkmark background
-    const checkmarkCircle = overlay.find('.rounded-full')
-    expect(checkmarkCircle.classes()).toContain('bg-purple-500')
-
-    // Check info block background
-    const infoBlock = wrapper.find('.z-20')
-    expect(infoBlock.classes()).toContain('bg-purple-500')
-  })
-
-  it('uses correct icons based on variant', () => {
-    const variants = [
-      { variant: 'post', icon: 'image' },
-      { variant: 'video', icon: 'play-circle' },
-      { variant: 'slideshow', icon: 'images' },
-    ]
-
-    variants.forEach(({ variant, icon }) => {
-      const wrapper = mount(SocialMediaTemplate, {
-        props: {
-          variant: variant as 'post' | 'video' | 'slideshow',
-          media: '/test.jpg',
-          mediaType: 'image',
-          name: 'Test',
-          type: 'Test',
-        },
-      })
-      const nexxtIcon = wrapper.find('.z-20').findComponent({ name: 'NexxtIcon' })
-      expect(nexxtIcon.props('name')).toBe(icon)
-    })
-  })
-
-  it('shows image-stack icon when variant is slideshow', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'slideshow',
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Slideshow',
-      },
-    })
-
-    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
-    const stackIcon = icons.find((icon) => icon.props('name') === 'images')
-    expect(stackIcon).toBeDefined()
-  })
-
-  it('correctly uses parsedAspectRatio for slideshow variant', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'slideshow',
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Slideshow',
-        aspectRatio: '1:1',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('aspect-1/1')
-  })
-
-  it('correctly returns empty string aspect ratio when mediaType is image and no aspect ratio is provided', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video', // TriggerparsedAspectRatio evaluation
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Test',
-      },
-    })
-
-    // Classes should not include any aspect ratio class
-    const classes = wrapper.classes()
-    expect(classes.some((c) => c.startsWith('aspect-'))).toBe(false)
-  })
-
-  it('computes undefined mime type when mediaType is image', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: 'test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Test',
-      },
-    })
-
-    // @ts-expect-error - testing computed property internal
-    expect(wrapper.vm.videoMimeType).toBeUndefined()
-  })
-
-  it('handles custom aspect ratio with aspect- prefix correctly', () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test.mp4',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-        aspectRatio: 'aspect-4:3',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('aspect-4/3')
-  })
-
-  it('emits click event on click', async () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Test',
-      },
-    })
-
-    await wrapper.trigger('click')
-    expect(wrapper.emitted('click')).toBeTruthy()
-  })
-
-  it('emits click event on enter key down', async () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Test',
-      },
-    })
-
-    await wrapper.trigger('keydown.enter')
-    expect(wrapper.emitted('click')).toBeTruthy()
-  })
-
-  it('emits click event on space key down', async () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'post',
-        media: '/test.jpg',
-        mediaType: 'image',
-        name: 'Test',
-        type: 'Test',
-      },
-    })
-
-    await wrapper.trigger('keydown.space')
-    expect(wrapper.emitted('click')).toBeTruthy()
-  })
-
-  it('plays video on focus when media is video', async () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test.mp4',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-        muted: true,
-      },
-    })
-
-    const video = wrapper.find('video').element as HTMLVideoElement
-    const playSpy = vi.spyOn(video, 'play').mockImplementation(() => Promise.resolve())
-
-    await wrapper.trigger('focus')
-
-    expect(playSpy).toHaveBeenCalled()
-  })
-
-  it('pauses video on blur when media is video', async () => {
-    const wrapper = mount(SocialMediaTemplate, {
-      props: {
-        variant: 'video',
-        media: '/test.mp4',
-        mediaType: 'video',
-        name: 'Test',
-        type: 'Video',
-        muted: true,
-      },
-    })
-
-    const video = wrapper.find('video').element as HTMLVideoElement
-    const pauseSpy = vi.spyOn(video, 'pause')
-
-    await wrapper.trigger('blur')
-
-    expect(pauseSpy).toHaveBeenCalled()
-  })
-})

package/src/components/SocialMediaType/SocialMediaType.stories.ts

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import SocialMediaType from './SocialMediaType.vue'
-
-export default {
-  title: 'Components/Organisms/Social Media Type',
-  component: SocialMediaType,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=533-28&t=CbHvOQfEMIr7M5mO-11',
-    },
-  },
-} satisfies Meta<typeof SocialMediaType>
-
-type Story = StoryObj<typeof SocialMediaType>
-
-export const Post: Story = {
-  args: {
-    variant: 'post',
-    icons: ['facebook', 'instagram', 'linkedin', 'x', 'google'],
-  },
-}
-
-export const Reel: Story = {
-  args: {
-    variant: 'reel',
-    chip: 'Nieuw!',
-  },
-}
-
-export const Story: Story = {
-  args: {
-    variant: 'story',
-    icons: ['instagram'],
-  },
-}
-
-export const ReelSelected: Story = {
-  args: {
-    variant: 'reel',
-    selected: true,
-  },
-}

package/src/components/SocialMediaType/SocialMediaType.test.ts

@@ -1,126 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, it, expect } from 'vitest'
-import SocialMediaType from './SocialMediaType.vue'
-import SocialIcons, { type NexxtSocialIconsProps } from '../SocialIcons/SocialIcons.vue'
-
-type Variant = 'post' | 'reel' | 'story'
-
-describe('SocialMediaType', () => {
-  it.each([
-    ['post', 'Post', { facebook: true, instagram: true, linkedin: true, x: true, google: true }],
-    ['reel', 'TikTok & Reel', { instagram: true, tiktok: true }],
-    ['story', 'Story', { instagram: true }],
-  ])('renders correctly for variant: %s', (variant, expectedLabel, expectedIcons) => {
-    const wrapper = mount(SocialMediaType, {
-      props: {
-        variant: variant as Variant,
-      },
-    })
-
-    // Check label
-    expect(wrapper.text()).toContain(expectedLabel)
-
-    // Check SocialIcons props
-    const socialIcons = wrapper.findComponent(SocialIcons)
-    expect(socialIcons.exists()).toBe(true)
-
-    Object.entries(expectedIcons).forEach(([prop, value]) => {
-      expect(socialIcons.props(prop as keyof NexxtSocialIconsProps)).toBe(value)
-    })
-  })
-
-  it('renders the chip when provided', () => {
-    const wrapper = mount(SocialMediaType, {
-      props: {
-        variant: 'post',
-        chip: 'Featured',
-      },
-    })
-    expect(wrapper.text()).toContain('Featured')
-  })
-
-  it('emits click event when clicked', async () => {
-    const wrapper = mount(SocialMediaType, {
-      props: {
-        variant: 'reel',
-      },
-    })
-    await wrapper.trigger('click')
-    expect(wrapper.emitted('click')).toBeTruthy()
-  })
-
-  it('normalizes twitter to x in custom icons', () => {
-    const wrapper = mount(SocialMediaType, {
-      props: {
-        variant: 'post',
-        icons: ['twitter', 'facebook'],
-      },
-    })
-
-    const socialIcons = wrapper.findComponent(SocialIcons)
-    expect(socialIcons.props('x')).toBe(true)
-    expect(socialIcons.props('facebook')).toBe(true)
-  })
-
-  it('handles custom icons array correctly', () => {
-    const wrapper = mount(SocialMediaType, {
-      props: {
-        variant: 'reel',
-        icons: ['instagram', 'tiktok', 'linkedin'],
-      },
-    })
-
-    const socialIcons = wrapper.findComponent(SocialIcons)
-    expect(socialIcons.props('instagram')).toBe(true)
-    expect(socialIcons.props('tiktok')).toBe(true)
-    expect(socialIcons.props('linkedin')).toBe(true)
-    expect(socialIcons.props('facebook')).toBe(false)
-  })
-
-  it('renders the selected state correctly', () => {
-    const wrapper = mount(SocialMediaType, {
-      props: {
-        variant: 'story',
-        selected: true,
-      },
-    })
-    expect(wrapper.classes()).toContain('bg-gray-50')
-    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
-    const checkIcon = icons.find((icon) => icon.props('name') === 'check')
-    expect(checkIcon).toBeDefined()
-  })
-
-  it('renders a custom label', () => {
-    const wrapper = mount(SocialMediaType, {
-      props: {
-        variant: 'post',
-        label: 'My Custom Post',
-      },
-    })
-    expect(wrapper.text()).toContain('My Custom Post')
-  })
-
-  it('handles default branch for variant (if TS bypassed)', () => {
-    const wrapper = mount(SocialMediaType, {
-      props: {
-        // @ts-expect-error - testing invalid variant bypass
-        variant: 'invalid',
-      },
-    })
-    const socialIcons = wrapper.findComponent(SocialIcons)
-    // Should hit default: return {}
-    expect(socialIcons.exists()).toBe(true)
-  })
-
-  it('handles empty icons array', () => {
-    const wrapper = mount(SocialMediaType, {
-      props: {
-        variant: 'post',
-        icons: [],
-      },
-    })
-    const socialIcons = wrapper.findComponent(SocialIcons)
-    // Should have no icons
-    expect(socialIcons.exists()).toBe(true)
-  })
-})

package/src/components/StepperHeader/StepperHeader.stories.ts

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import StepperHeader from './StepperHeader.vue'
-import Button from '../Button/Button.vue'
-
-export default {
-  title: 'Components/Molecules/Stepper Header',
-  component: StepperHeader,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=442-1060&t=CbHvOQfEMIr7M5mO-11',
-    },
-  },
-} satisfies Meta<typeof StepperHeader>
-
-type Story = StoryObj<typeof StepperHeader>
-
-export const Default: Story = {
-  args: {
-    title: 'Stepper Header Title',
-    steps: ['Soort', 'Type', 'Inhoud', 'Template', 'Bewerk', 'Inplannen'],
-    currentStep: 0,
-    backButtonText: 'Back',
-    backButtonAction: () => alert('Back button clicked'),
-  },
-}
-
-export const WithSlots: Story = {
-  args: {
-    title: 'Stepper Header Title',
-    steps: ['Soort', 'Type', 'Inhoud', 'Template', 'Bewerk', 'Inplannen'],
-    currentStep: 0,
-    backButtonText: 'Back',
-    backButtonAction: () => alert('Back button clicked'),
-  },
-  render: (args) => ({
-    components: { StepperHeader, Button },
-    setup() {
-      return { args }
-    },
-    template: `
-      <StepperHeader v-bind="args">
-        <Button>Next</Button>
-      </StepperHeader>
-    `,
-  }),
-}