@nexxtmove/ui 0.1.31 → 0.1.32

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

@@ -1,244 +0,0 @@
-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/Table/Table.stories.ts

@@ -1,283 +0,0 @@
-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: [] },
-}