@nexxtmove/ui 0.1.22 → 0.1.23

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

@@ -0,0 +1,126 @@
+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/SocialMediaType/SocialMediaType.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import TiktokSvg from '@assets/svg/type_tiktok.svg'
+import PostSvg from '@assets/svg/type_post.svg'
+import StorySvg from '@assets/svg/type_story.svg'
+import Chip from '../Chip/Chip.vue'
+import SocialIcons from '../SocialIcons/SocialIcons.vue'
+import Icon from '../Icon/Icon.vue'
+
+type SocialPlatform = 'tiktok' | 'facebook' | 'instagram' | 'linkedin' | 'x' | 'twitter' | 'google'
+
+interface NexxtSocialMediaTypeProps {
+  variant: 'post' | 'reel' | 'story'
+  label?: string
+  chip?: string
+  selected?: boolean
+  icons?: SocialPlatform[]
+}
+
+defineOptions({
+  name: 'NexxtSocialMediaType',
+})
+
+const emit = defineEmits(['click'])
+
+const { variant, selected, icons, label } = defineProps<NexxtSocialMediaTypeProps>()
+
+const labels = {
+  post: 'Post',
+  reel: 'TikTok & Reel',
+  story: 'Story',
+}
+
+const iconSrc = computed(() => {
+  const icons = {
+    post: PostSvg,
+    reel: TiktokSvg,
+    story: StorySvg,
+  }
+
+  return icons[variant]
+})
+
+const computedIcons = computed(() => {
+  if (icons) {
+    // Normalize twitter to x and convert array to object
+    const normalized = icons.map((icon) => (icon === 'twitter' ? 'x' : icon))
+    return normalized.reduce(
+      (acc, icon) => {
+        acc[icon] = true
+        return acc
+      },
+      {} as Record<string, boolean>,
+    )
+  }
+
+  switch (variant) {
+    case 'post':
+      return {
+        facebook: true,
+        instagram: true,
+        linkedin: true,
+        x: true,
+        google: true,
+      }
+    case 'reel':
+      return {
+        instagram: true,
+        tiktok: true,
+      }
+    case 'story':
+      return {
+        instagram: true,
+      }
+    default:
+      return {}
+  }
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="group inline-flex min-w-60 cursor-pointer flex-col items-start justify-start gap-2.5 overflow-hidden rounded-3xl pt-4 outline-1 -outline-offset-1 transition-colors hover:outline-cornflower-blue-600 focus-visible:outline-2 focus-visible:outline-cornflower-blue-600"
+    :class="selected ? 'bg-gray-50 outline-cornflower-blue-500' : 'bg-white outline-gray-200'"
+    @click="emit('click')"
+  >
+    <div class="flex items-center justify-end self-stretch px-4">
+      <Chip v-if="chip" variant="warning">{{ chip }}</Chip>
+      <SocialIcons class="ml-auto" v-bind="computedIcons" aria-hidden="true" />
+    </div>
+    <div class="flex justify-center self-stretch py-14">
+      <component
+        :is="iconSrc"
+        class="h-44 object-contain transition-transform group-hover:-translate-y-0.5"
+        aria-hidden="true"
+      />
+    </div>
+    <div
+      class="inline-flex w-full flex-col items-center justify-center gap-2.5 bg-cornflower-blue-500 py-3.5 transition-colors group-hover:bg-cornflower-blue-600"
+      :class="selected ? 'bg-cornflower-blue-600' : 'bg-cornflower-blue-500'"
+    >
+      <div class="flex w-full justify-center self-stretch text-center">
+        <span class="relative block max-w-full text-center body-semibold text-ellipsis text-white">
+          <Icon
+            v-if="selected"
+            name="check"
+            type="solid"
+            class="absolute top-1/2 -translate-x-[calc(100%+4px)] -translate-y-[calc(50%+1px)] text-white"
+            aria-hidden="true"
+          />
+          {{ label ?? labels[variant] }}
+        </span>
+      </div>
+    </div>
+  </button>
+</template>

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

@@ -0,0 +1,47 @@
+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>
+    `,
+  }),
+}

package/src/components/StepperHeader/StepperHeader.test.ts

@@ -0,0 +1,244 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import StepperHeader from './StepperHeader.vue'
+import Header from '../Header/Header.vue'
+import ProgressBar from '../ProgressBar/ProgressBar.vue'
+
+describe('StepperHeader', () => {
+  const defaultProps = {
+    title: 'Test Title',
+    currentStep: 0,
+    steps: ['Step 1', 'Step 2', 'Step 3'],
+    backButtonAction: vi.fn(),
+  }
+
+  it('renders the header component', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.exists()).toBe(true)
+  })
+
+  it('passes title prop to Header component', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.props('title')).toBe('Test Title')
+  })
+
+  it('passes backButtonAction to Header component', () => {
+    const backButtonAction = vi.fn()
+    const wrapper = mount(StepperHeader, {
+      props: {
+        ...defaultProps,
+        backButtonAction,
+      },
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.props('backButtonAction')).toBe(backButtonAction)
+  })
+
+  it('passes backButtonText to Header component when provided', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        ...defaultProps,
+        backButtonText: 'Go Back',
+      },
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.props('backButtonText')).toBe('Go Back')
+  })
+
+  it('renders ProgressBar component when steps are provided', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(true)
+  })
+
+  it('passes correct props to ProgressBar component', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        ...defaultProps,
+        currentStep: 2,
+        steps: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.props('steps')).toBe(4)
+    expect(progressBar.props('stepTitles')).toEqual(['Step 1', 'Step 2', 'Step 3', 'Step 4'])
+    expect(progressBar.props('currentStep')).toBe(2)
+  })
+
+  it('does not render ProgressBar when steps is null or undefined', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        steps: null as any,
+        backButtonAction: vi.fn(),
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(false)
+  })
+
+  it('renders default slot content in Header right slot', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+      slots: {
+        default: '<button class="test-button">Next</button>',
+      },
+    })
+
+    expect(wrapper.find('.test-button').exists()).toBe(true)
+    expect(wrapper.find('.test-button').text()).toBe('Next')
+  })
+
+  it('does not render right slot when default slot is empty', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    // When no default slot is provided, the right slot in Header should not exist
+    expect(wrapper.find('.ml-auto').exists()).toBe(false)
+  })
+
+  it('applies w-full class to ProgressBar', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.classes()).toContain('w-full')
+  })
+
+  it('renders with all props and slots correctly', () => {
+    const backButtonAction = vi.fn()
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Complete Header',
+        currentStep: 1,
+        steps: ['One', 'Two', 'Three'],
+        backButtonText: 'Previous',
+        backButtonAction,
+      },
+      slots: {
+        default: '<button>Continue</button>',
+      },
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.props('title')).toBe('Complete Header')
+    expect(header.props('backButtonText')).toBe('Previous')
+    expect(header.props('backButtonAction')).toBe(backButtonAction)
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.props('currentStep')).toBe(1)
+    expect(progressBar.props('steps')).toBe(3)
+    expect(progressBar.props('stepTitles')).toEqual(['One', 'Two', 'Three'])
+
+    expect(wrapper.text()).toContain('Continue')
+  })
+
+  it('renders without steps and without default slot', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        steps: null as any,
+        backButtonAction: vi.fn(),
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(false)
+    expect(wrapper.find('.ml-auto').exists()).toBe(false)
+  })
+
+  it('renders with steps but without default slot', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(true)
+    expect(wrapper.find('.ml-auto').exists()).toBe(false)
+  })
+
+  it('renders without steps but with default slot', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        steps: null as any,
+        backButtonAction: vi.fn(),
+      },
+      slots: {
+        default: '<button class="action-button">Action</button>',
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(false)
+    expect(wrapper.find('.action-button').exists()).toBe(true)
+    expect(wrapper.find('.ml-auto').exists()).toBe(true)
+  })
+
+  it('renders with empty steps array', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        steps: [],
+        backButtonAction: vi.fn(),
+      },
+    })
+
+    // Empty array is truthy, so ProgressBar should still render
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(true)
+    expect(progressBar.props('steps')).toBe(0)
+    expect(progressBar.props('stepTitles')).toEqual([])
+  })
+
+  it('renders with undefined steps', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        steps: undefined as any,
+        backButtonAction: vi.fn(),
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(false)
+  })
+
+  it('emits update:currentStep when ProgressBar emits it', async () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    await progressBar.vm.$emit('update:currentStep', 1)
+
+    expect(wrapper.emitted('update:currentStep')).toBeTruthy()
+    expect(wrapper.emitted('update:currentStep')![0]).toEqual([1])
+  })
+})

package/src/components/StepperHeader/StepperHeader.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import Header from '../Header/Header.vue'
+import ProgressBar from '../ProgressBar/ProgressBar.vue'
+
+interface NexxtStepperHeaderProps {
+  title: string
+  currentStep: InstanceType<typeof ProgressBar>['currentStep']
+  steps: InstanceType<typeof ProgressBar>['stepTitles']
+  backButtonText?: InstanceType<typeof Header>['backButtonText']
+  backButtonAction: InstanceType<typeof Header>['backButtonAction']
+}
+
+defineOptions({
+  name: 'NexxtStepperHeader',
+})
+
+defineEmits(['update:currentStep'])
+
+defineProps<NexxtStepperHeaderProps>()
+</script>
+
+<template>
+  <Header :title="title" :back-button-action="backButtonAction" :back-button-text="backButtonText">
+    <template v-if="steps" #center>
+      <ProgressBar
+        class="w-full"
+        :steps="steps.length"
+        :step-titles="steps"
+        :current-step="currentStep"
+        @update:currentStep="$emit('update:currentStep', $event)"
+      />
+    </template>
+    <template v-if="$slots.default" #right>
+      <slot />
+    </template>
+  </Header>
+</template>

package/src/components.json

@@ -0,0 +1,16 @@
+{
+  "NexxtAnimatedNumber": "components/AnimatedNumber/AnimatedNumber.vue",
+  "NexxtButton": "components/Button/Button.vue",
+  "NexxtCalendar": "components/Calendar/Calendar.vue",
+  "NexxtChip": "components/Chip/Chip.vue",
+  "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
+  "NexxtHeader": "components/Header/Header.vue",
+  "NexxtIcon": "components/Icon/Icon.vue",
+  "NexxtInfoBlock": "components/InfoBlock/InfoBlock.vue",
+  "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",
+  "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",
+  "NexxtSocialMediaCustomTemplate": "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
+  "NexxtSocialMediaTemplate": "components/SocialMediaTemplate/SocialMediaTemplate.vue",
+  "NexxtSocialMediaType": "components/SocialMediaType/SocialMediaType.vue",
+  "NexxtStepperHeader": "components/StepperHeader/StepperHeader.vue"
+}

package/src/env.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}
+
+declare module '*.svg?component' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}
+
+declare module '*.svg?url' {
+  const content: string
+  export default content
+}
+
+declare module '*.svg?raw' {
+  const content: string
+  export default content
+}

package/src/index.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@nexxtmove/ui/theme';

package/src/index.ts

@@ -0,0 +1,15 @@
+// This file is auto-generated by scripts/generate-index.ts
+export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/AnimatedNumber.vue'
+export { default as NexxtButton } from './components/Button/Button.vue'
+export { default as NexxtCalendar } from './components/Calendar/Calendar.vue'
+export { default as NexxtChip } from './components/Chip/Chip.vue'
+export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
+export { default as NexxtHeader } from './components/Header/Header.vue'
+export { default as NexxtIcon } from './components/Icon/Icon.vue'
+export { default as NexxtInfoBlock } from './components/InfoBlock/InfoBlock.vue'
+export { default as NexxtProgressBar } from './components/ProgressBar/ProgressBar.vue'
+export { default as NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'
+export { default as NexxtSocialMediaCustomTemplate } from './components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue'
+export { default as NexxtSocialMediaTemplate } from './components/SocialMediaTemplate/SocialMediaTemplate.vue'
+export { default as NexxtSocialMediaType } from './components/SocialMediaType/SocialMediaType.vue'
+export { default as NexxtStepperHeader } from './components/StepperHeader/StepperHeader.vue'

package/src/nuxt.ts

@@ -0,0 +1,50 @@
+import { defineNuxtModule, addComponent, addTemplate } from '@nuxt/kit'
+import type { NuxtModule } from '@nuxt/schema'
+import components from './components.json'
+
+export interface ModuleOptions {
+  /**
+   * Whether to automatically add the theme CSS.
+   * @default true
+   */
+  addCSS?: boolean
+}
+
+const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: '@nexxtmove/ui',
+    configKey: 'nexxtmoveUi',
+    compatibility: {
+      nuxt: '^3.0.0 || ^4.0.0',
+    },
+  },
+  defaults: {
+    addCSS: true,
+  },
+  setup(options, nuxt) {
+    for (const [name, path] of Object.entries(components)) {
+      addComponent({
+        name,
+        export: 'default',
+        filePath: `@nexxtmove/ui/${path}`,
+      })
+    }
+
+    // Add CSS
+    if (options.addCSS) {
+      addTemplate({
+        filename: 'nexxtmove-ui.css',
+        getContents: () => `
+@import "tailwindcss";
+@import "@nexxtmove/ui/theme";
+
+@source "../../node_modules/@nexxtmove/ui/dist/*.js";
+`,
+        write: true,
+      })
+      nuxt.options.css.push('#build/nexxtmove-ui.css')
+    }
+  },
+})
+
+export default module