@nexxtmove/ui 0.1.29 → 0.1.31

package/dist/nuxt.js

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

package/package.json

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

package/src/components/Avatar/Avatar.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Avatar from './Avatar.vue'
+
+export default {
+  title: 'Components/Atoms/Avatar',
+  component: Avatar,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System',
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+  },
+} satisfies Meta<typeof Avatar>
+
+type Story = StoryObj<typeof Avatar>
+
+export const Default: Story = {
+  args: {
+    name: 'Peter van der Sloot',
+    size: 'sm',
+  },
+}

package/src/components/Avatar/Avatar.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Avatar from './Avatar.vue'
+
+describe('Avatar', () => {
+  it('generates 2 character initials from name with multiple words', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Peter Vink',
+      },
+    })
+
+    expect(wrapper.text()).toContain('PV')
+  })
+
+  it('generates 2 character initials from name with single word', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Peter',
+      },
+    })
+
+    expect(wrapper.text()).toContain('PE')
+  })
+
+  it('generates 2 character initials picking first and last words for names with tussenvoegsels', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Peter van der Sloot',
+      },
+    })
+
+    expect(wrapper.text()).toContain('PS')
+  })
+
+  it('handles empty strings gracefully by returning no text', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: '',
+      },
+    })
+
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('handles whitespace-only strings gracefully by returning no text', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: '   ',
+      },
+    })
+
+    expect(wrapper.text()).toBe('')
+  })
+})

package/src/components/Avatar/Avatar.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface NexxtAvatarProps {
+  name: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+defineOptions({
+  name: 'NexxtAvatar',
+})
+
+const props = withDefaults(defineProps<NexxtAvatarProps>(), {
+  size: 'sm',
+})
+
+const computedInitials = computed(() => {
+  if (!props.name?.trim()) return ''
+
+  const parts = props.name.trim().split(/\s+/)
+  if (parts.length >= 2) {
+    const firstInitial = parts[0][0]
+    const lastInitial = parts[parts.length - 1][0]
+
+    return (firstInitial + lastInitial).toUpperCase()
+  }
+
+  return parts[0].substring(0, 2).toUpperCase()
+})
+
+const sizeClasses = {
+  xs: 'h-6 w-6 text-[10px]',
+  sm: 'h-8 w-8 text-sm',
+  md: 'h-10 w-10 text-base',
+  lg: 'h-12 w-12 text-lg',
+  xl: 'h-16 w-16 text-xl',
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-cornflower-blue-50 font-semibold text-cornflower-blue-500',
+      sizeClasses[size],
+    ]"
+  >
+    {{ computedInitials }}
+  </div>
+</template>

package/src/components/Checkbox/Checkbox.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Checkbox from './Checkbox.vue'
+
+export default {
+  title: 'Components/Atoms/Checkbox',
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  args: {
+    modelValue: false,
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    modelValue: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    modelValue: false,
+    disabled: true,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    modelValue: true,
+    disabled: true,
+  },
+}

package/src/components/Checkbox/Checkbox.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Checkbox from './Checkbox.vue'
+
+describe('Checkbox', () => {
+  it('renders a checkbox input', () => {
+    const wrapper = mount(Checkbox)
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+  })
+
+  it('is unchecked by default', () => {
+    const wrapper = mount(Checkbox)
+
+    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('is checked when modelValue is true', () => {
+    const wrapper = mount(Checkbox, { props: { modelValue: true } })
+
+    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('emits update:modelValue when toggled', async () => {
+    const wrapper = mount(Checkbox, { props: { modelValue: false } })
+
+    await wrapper.find('input').setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+  })
+
+  it('disables the input when disabled prop is true', () => {
+    const wrapper = mount(Checkbox, { props: { disabled: true } })
+
+    expect((wrapper.find('input').element as HTMLInputElement).disabled).toBe(true)
+  })
+
+  it('applies opacity class when disabled', () => {
+    const wrapper = mount(Checkbox, { props: { disabled: true } })
+
+    expect(wrapper.find('label').classes()).toContain('opacity-50')
+  })
+
+  it('forwards attributes to the input', () => {
+    const wrapper = mount(Checkbox, { attrs: { 'aria-label': 'Accept terms' } })
+
+    expect(wrapper.find('input').attributes('aria-label')).toBe('Accept terms')
+  })
+
+  it('renders the check icon', () => {
+    const wrapper = mount(Checkbox)
+
+    expect(wrapper.find('i.fa-check').exists()).toBe(true)
+  })
+})

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import Icon from '../Icon/Icon.vue'
+
+interface NexxtCheckboxProps {
+  disabled?: boolean
+  indeterminate?: boolean
+}
+
+defineOptions({
+  name: 'NexxtCheckbox',
+})
+
+const model = defineModel<boolean>()
+const { indeterminate } = defineProps<NexxtCheckboxProps>()
+
+const inputRef = ref<HTMLInputElement>()
+watchEffect(() => {
+  if (inputRef.value) inputRef.value.indeterminate = indeterminate ?? false
+})
+</script>
+
+<template>
+  <label :class="['inline-flex cursor-pointer', disabled ? 'cursor-not-allowed opacity-50' : '']">
+    <input
+      v-bind="$attrs"
+      ref="inputRef"
+      type="checkbox"
+      class="peer sr-only"
+      v-model="model"
+      :disabled="disabled"
+    />
+    <span
+      aria-hidden="true"
+      :class="[
+        'flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors duration-200',
+        'peer-focus-visible:ring-primary peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2',
+        model || indeterminate
+          ? 'border-primary text-cornflower-blue-600'
+          : 'border-gray-300 text-transparent',
+      ]"
+    >
+      <Icon :name="indeterminate ? 'minus' : 'check'" type="solid" class="text-xs" />
+    </span>
+  </label>
+</template>

package/src/components/Table/Table.stories.ts

@@ -0,0 +1,283 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref, type ConcreteComponent } from 'vue'
+import Table, { type TableColumn } from './Table.vue'
+
+type RowKey = 'name' | 'email' | 'role' | 'status' | 'department' | 'lastLogin'
+
+interface TableStoryProps {
+  columns: TableColumn<RowKey>[]
+  rows: Record<RowKey, string>[]
+  selectable?: boolean
+}
+
+const meta: Meta<TableStoryProps> = {
+  title: 'Components/Atoms/Table',
+  component: Table as ConcreteComponent<TableStoryProps>,
+}
+
+export default meta
+type Story = StoryObj<TableStoryProps>
+
+const columns: TableColumn<RowKey>[] = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'department', label: 'Department' },
+  { key: 'role', label: 'Role', sortable: true, width: '0.5fr' },
+  { key: 'lastLogin', label: 'lastLogin' },
+  { key: 'status', label: 'Status', width: '0.5fr' },
+]
+
+const allRows = [
+  {
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-25',
+  },
+  {
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Marketing',
+    lastLogin: '2026-03-27',
+  },
+  {
+    name: 'Carol White',
+    email: 'carol@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-02-12',
+  },
+  {
+    name: 'David Brown',
+    email: 'david@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'IT',
+    lastLogin: '2026-03-30',
+  },
+  {
+    name: 'Eve Turner',
+    email: 'eve@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-28',
+  },
+  {
+    name: 'Frank Miller',
+    email: 'frank@example.com',
+    role: 'Viewer',
+    status: 'Active',
+    department: 'Support',
+    lastLogin: '2026-03-26',
+  },
+  {
+    name: 'Grace Lee',
+    email: 'grace@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Product',
+    lastLogin: '2026-03-29',
+  },
+  {
+    name: 'Henry Wilson',
+    email: 'henry@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-01-10',
+  },
+  {
+    name: 'Ivy Clark',
+    email: 'ivy@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'IT',
+    lastLogin: '2026-03-20',
+  },
+  {
+    name: 'Jack Davis',
+    email: 'jack@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Marketing',
+    lastLogin: '2026-03-23',
+  },
+  {
+    name: 'Karen Harris',
+    email: 'karen@example.com',
+    role: 'Viewer',
+    status: 'Active',
+    department: 'Support',
+    lastLogin: '2026-03-19',
+  },
+  {
+    name: 'Leo King',
+    email: 'leo@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Product',
+    lastLogin: '2026-03-28',
+  },
+  {
+    name: 'Mia Scott',
+    email: 'mia@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-30',
+  },
+  {
+    name: 'Nick Evans',
+    email: 'nick@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-02-05',
+  },
+  {
+    name: 'Olivia Foster',
+    email: 'olivia@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Product',
+    lastLogin: '2026-03-27',
+  },
+  {
+    name: 'Paul Green',
+    email: 'paul@example.com',
+    role: 'Viewer',
+    status: 'Active',
+    department: 'Support',
+    lastLogin: '2026-03-18',
+  },
+  {
+    name: 'Quincy Adams',
+    email: 'quincy@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Marketing',
+    lastLogin: '2026-03-25',
+  },
+  {
+    name: 'Rachel Lewis',
+    email: 'rachel@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-29',
+  },
+  {
+    name: 'Sam Nelson',
+    email: 'sam@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-01-15',
+  },
+  {
+    name: 'Tina Brooks',
+    email: 'tina@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'IT',
+    lastLogin: '2026-03-30',
+  },
+]
+
+const sortRows = (rows: typeof allRows, key: string | undefined, direction: 'asc' | 'desc') => {
+  if (!key) return rows
+  return [...rows].sort((a, b) => {
+    const aVal = String(a[key as keyof typeof a] ?? '')
+    const bVal = String(b[key as keyof typeof b] ?? '')
+    const result = aVal.localeCompare(bVal, undefined, { numeric: true, sensitivity: 'base' })
+    return direction === 'asc' ? result : -result
+  })
+}
+
+export const Default: Story = {
+  args: { columns, rows: allRows },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      const onSort = (key: string, direction: 'asc' | 'desc') => {
+        sortKey.value = key
+        sortDirection.value = direction
+      }
+      return { args, rows, sortKey, sortDirection, onSort }
+    },
+    template: `<Table :columns="args.columns" :rows="rows" :sort-key="sortKey" :sort-direction="sortDirection" @sort="onSort" />`,
+  }),
+}
+
+export const WithSelection: Story = {
+  args: { columns, rows: allRows, selectable: true },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const selected = ref<number[]>([])
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      const onSort = (key: string, direction: 'asc' | 'desc') => {
+        sortKey.value = key
+        sortDirection.value = direction
+      }
+      return { args, rows, sortKey, sortDirection, onSort, selected }
+    },
+    template: `<Table :columns="args.columns" :rows="rows" :sort-key="sortKey" :sort-direction="sortDirection" :selectable="args.selectable" v-model="selected" @sort="onSort" />`,
+  }),
+}
+
+export const WithSlots: Story = {
+  args: { columns, rows: allRows },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      const onSort = (key: string, direction: 'asc' | 'desc') => {
+        sortKey.value = key
+        sortDirection.value = direction
+      }
+      return { args, rows, sortKey, sortDirection, onSort }
+    },
+    template: `
+      <Table :columns="args.columns" :rows="rows" :sort-key="sortKey" :sort-direction="sortDirection" @sort="onSort">
+        <template #cell-name="{ value, row }">
+          <div class="flex flex-col">
+            <span class="font-medium">{{ value }}</span>
+            <span class="text-xs text-slate-400">{{ row.email }}</span>
+          </div>
+        </template>
+        <template #cell-status="{ value }">
+          <span
+            class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+            :class="value === 'Active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'"
+          >
+            {{ value }}
+          </span>
+        </template>
+      </Table>
+    `,
+  }),
+}
+
+export const Empty: Story = {
+  args: { columns, rows: [] },
+}