@davidbirchall/core 1.0.8 → 1.0.9

package/src/components/DataTable/DataTable.stories.ts

@@ -1,156 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import DataTable from './DataTable.vue'
-import type { DataTableColumn } from './types'
-
-const meta = {
-  title: 'Components/DataTable',
-  component: DataTable,
-  tags: ['autodocs'],
-  argTypes: {
-    hoverable: {
-      control: 'boolean',
-      description: 'Enable hover effect on rows'
-    },
-    emptyText: {
-      control: 'text',
-      description: 'Text to display when no data is available'
-    }
-  },
-  args: {
-    hoverable: true,
-    emptyText: 'No data available'
-  }
-} satisfies Meta<typeof DataTable>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const sampleColumns: DataTableColumn[] = [
-  { key: 'id', label: 'ID', sortable: true },
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'email', label: 'Email', sortable: true },
-  { key: 'role', label: 'Role', sortable: false }
-]
-
-const sampleData = [
-  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
-  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
-  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' },
-  { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'User' },
-  { id: 5, name: 'Charlie Brown', email: 'charlie@example.com', role: 'Admin' }
-]
-
-export const Basic: Story = {
-  args: {
-    columns: sampleColumns,
-    data: sampleData
-  }
-}
-
-export const Empty: Story = {
-  args: {
-    columns: sampleColumns,
-    data: []
-  }
-}
-
-export const CustomEmptyText: Story = {
-  args: {
-    columns: sampleColumns,
-    data: [],
-    emptyText: 'No users found'
-  }
-}
-
-export const NoHover: Story = {
-  args: {
-    columns: sampleColumns,
-    data: sampleData,
-    hoverable: false
-  }
-}
-
-export const ProductTable: Story = {
-  args: {
-    columns: [
-      { key: 'product', label: 'Product', sortable: true },
-      { key: 'category', label: 'Category', sortable: true },
-      { key: 'price', label: 'Price', sortable: true },
-      { key: 'stock', label: 'Stock', sortable: true },
-      { key: 'status', label: 'Status', sortable: false }
-    ],
-    data: [
-      { product: 'Laptop', category: 'Electronics', price: 999, stock: 45, status: 'In Stock' },
-      { product: 'Mouse', category: 'Accessories', price: 25, stock: 120, status: 'In Stock' },
-      { product: 'Keyboard', category: 'Accessories', price: 75, stock: 0, status: 'Out of Stock' },
-      { product: 'Monitor', category: 'Electronics', price: 350, stock: 23, status: 'In Stock' },
-      { product: 'Webcam', category: 'Electronics', price: 89, stock: 8, status: 'Low Stock' }
-    ]
-  }
-}
-
-export const WithCustomSlots: Story = {
-  args: {
-    columns: [
-      { key: 'name', label: 'Name', sortable: true },
-      { key: 'status', label: 'Status', sortable: false },
-      { key: 'actions', label: 'Actions', sortable: false }
-    ],
-    data: [
-      { name: 'John Doe', status: 'active', actions: '' },
-      { name: 'Jane Smith', status: 'inactive', actions: '' },
-      { name: 'Bob Johnson', status: 'active', actions: '' }
-    ]
-  },
-  render: (args: any) => ({
-    components: { DataTable },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DataTable v-bind="args">
-        <template #cell-status="{ value }">
-          <span :style="{ 
-            color: value === 'active' ? '#10b981' : '#ef4444',
-            fontWeight: 600
-          }">
-            {{ value.toUpperCase() }}
-          </span>
-        </template>
-        <template #cell-actions>
-          <button style="
-            padding: 0.25rem 0.75rem;
-            background: #3b82f6;
-            color: white;
-            border: none;
-            border-radius: 0.25rem;
-            cursor: pointer;
-          ">
-            Edit
-          </button>
-        </template>
-      </DataTable>
-    `
-  })
-}
-
-export const LargeDataset: Story = {
-  args: {
-    columns: [
-      { key: 'id', label: 'ID', sortable: true },
-      { key: 'firstName', label: 'First Name', sortable: true },
-      { key: 'lastName', label: 'Last Name', sortable: true },
-      { key: 'email', label: 'Email', sortable: true },
-      { key: 'department', label: 'Department', sortable: true },
-      { key: 'salary', label: 'Salary', sortable: true }
-    ],
-    data: Array.from({ length: 50 }, (_, i) => ({
-      id: i + 1,
-      firstName: ['John', 'Jane', 'Bob', 'Alice', 'Charlie'][i % 5],
-      lastName: ['Doe', 'Smith', 'Johnson', 'Williams', 'Brown'][i % 5],
-      email: `user${i + 1}@example.com`,
-      department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][i % 5],
-      salary: 50000 + (i * 1000)
-    }))
-  }
-}

package/src/components/DataTable/DataTable.test.ts

@@ -1,185 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import DataTable from './DataTable.vue'
-import type { DataTableColumn } from './types'
-
-describe('DataTable', () => {
-  const columns: DataTableColumn[] = [
-    { key: 'name', label: 'Name', sortable: true },
-    { key: 'age', label: 'Age', sortable: true },
-    { key: 'email', label: 'Email' }
-  ]
-
-  const data = [
-    { name: 'John Doe', age: 30, email: 'john@example.com' },
-    { name: 'Jane Smith', age: 25, email: 'jane@example.com' },
-    { name: 'Bob Johnson', age: 35, email: 'bob@example.com' }
-  ]
-
-  describe('rendering', () => {
-    it('renders table headers', () => {
-      render(DataTable, {
-        props: {
-          columns,
-          data
-        }
-      })
-
-      expect(screen.getByText('Name')).toBeInTheDocument()
-      expect(screen.getByText('Age')).toBeInTheDocument()
-      expect(screen.getByText('Email')).toBeInTheDocument()
-    })
-
-    it('renders table data', () => {
-      render(DataTable, {
-        props: {
-          columns,
-          data
-        }
-      })
-
-      expect(screen.getByText('John Doe')).toBeInTheDocument()
-      expect(screen.getByText('30')).toBeInTheDocument()
-      expect(screen.getByText('john@example.com')).toBeInTheDocument()
-    })
-
-    it('renders all rows', () => {
-      const { container } = render(DataTable, {
-        props: {
-          columns,
-          data
-        }
-      })
-
-      const rows = container.querySelectorAll('tbody tr')
-      expect(rows).toHaveLength(3)
-    })
-
-    it('shows empty text when no data', () => {
-      render(DataTable, {
-        props: {
-          columns,
-          data: []
-        }
-      })
-
-      expect(screen.getByText('No data available')).toBeInTheDocument()
-    })
-
-    it('shows custom empty text', () => {
-      render(DataTable, {
-        props: {
-          columns,
-          data: [],
-          emptyText: 'Custom empty message'
-        }
-      })
-
-      expect(screen.getByText('Custom empty message')).toBeInTheDocument()
-    })
-  })
-
-  describe('sorting', () => {
-    it('sorts data in ascending order when clicking sortable column', async () => {
-      const user = userEvent.setup()
-      const { container } = render(DataTable, {
-        props: {
-          columns,
-          data
-        }
-      })
-
-      const nameHeader = screen.getByText('Name').closest('th')
-      await user.click(nameHeader!)
-
-      const cells = container.querySelectorAll('tbody td:first-child')
-      expect(cells[0]).toHaveTextContent('Bob Johnson')
-      expect(cells[1]).toHaveTextContent('Jane Smith')
-      expect(cells[2]).toHaveTextContent('John Doe')
-    })
-
-    it('sorts data in descending order when clicking sortable column twice', async () => {
-      const user = userEvent.setup()
-      const { container } = render(DataTable, {
-        props: {
-          columns,
-          data
-        }
-      })
-
-      const nameHeader = screen.getByText('Name').closest('th')
-      await user.click(nameHeader!)
-      await user.click(nameHeader!)
-
-      const cells = container.querySelectorAll('tbody td:first-child')
-      expect(cells[0]).toHaveTextContent('John Doe')
-      expect(cells[1]).toHaveTextContent('Jane Smith')
-      expect(cells[2]).toHaveTextContent('Bob Johnson')
-    })
-
-    it('sorts numeric columns correctly', async () => {
-      const user = userEvent.setup()
-      const { container } = render(DataTable, {
-        props: {
-          columns,
-          data
-        }
-      })
-
-      const ageHeader = screen.getByText('Age').closest('th')
-      await user.click(ageHeader!)
-
-      const cells = container.querySelectorAll('tbody td:nth-child(2)')
-      expect(cells[0]).toHaveTextContent('25')
-      expect(cells[1]).toHaveTextContent('30')
-      expect(cells[2]).toHaveTextContent('35')
-    })
-
-    it('does not sort non-sortable columns', async () => {
-      const user = userEvent.setup()
-      const { container } = render(DataTable, {
-        props: {
-          columns,
-          data
-        }
-      })
-
-      const emailHeader = screen.getByText('Email').closest('th')
-      await user.click(emailHeader!)
-
-      // Data should remain in original order
-      const cells = container.querySelectorAll('tbody td:first-child')
-      expect(cells[0]).toHaveTextContent('John Doe')
-      expect(cells[1]).toHaveTextContent('Jane Smith')
-      expect(cells[2]).toHaveTextContent('Bob Johnson')
-    })
-  })
-
-  describe('hoverable', () => {
-    it('applies hoverable class by default', () => {
-      const { container } = render(DataTable, {
-        props: {
-          columns,
-          data
-        }
-      })
-
-      const firstRow = container.querySelector('tbody tr')
-      expect(firstRow).toHaveClass('data-table__row--hoverable')
-    })
-
-    it('does not apply hoverable class when disabled', () => {
-      const { container } = render(DataTable, {
-        props: {
-          columns,
-          data,
-          hoverable: false
-        }
-      })
-
-      const firstRow = container.querySelector('tbody tr')
-      expect(firstRow).not.toHaveClass('data-table__row--hoverable')
-    })
-  })
-})

package/src/components/DataTable/DataTable.vue

@@ -1,177 +0,0 @@
-<template>
-  <div class="data-table">
-    <div class="data-table__wrapper">
-      <table class="data-table__table">
-        <thead class="data-table__head">
-          <tr>
-            <th
-              v-for="column in columns"
-              :key="column.key"
-              class="data-table__header"
-              :class="{ 'data-table__header--sortable': column.sortable }"
-              @click="column.sortable ? handleSort(column.key) : undefined"
-            >
-              <div class="data-table__header-content">
-                {{ column.label }}
-                <span v-if="column.sortable" class="data-table__sort-icon">
-                  <span v-if="sortKey === column.key">
-                    {{ sortOrder === 'asc' ? '↑' : '↓' }}
-                  </span>
-                  <span v-else class="data-table__sort-icon--inactive">↕</span>
-                </span>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(row, index) in sortedData"
-            :key="index"
-            class="data-table__row"
-          >
-            <td
-              v-for="column in columns"
-              :key="column.key"
-              class="data-table__cell"
-            >
-              <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
-                {{ row[column.key] }}
-              </slot>
-            </td>
-          </tr>
-          <tr v-if="sortedData.length === 0">
-            <td :colspan="columns.length" class="data-table__cell data-table__cell--empty">
-              {{ emptyText }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-
-export interface DataTableColumn {
-  key: string
-  label: string
-  sortable?: boolean
-}
-
-export interface DataTableProps {
-  columns: DataTableColumn[]
-  data: Record<string, any>[]
-  hoverable?: boolean
-  emptyText?: string
-}
-
-const props = withDefaults(defineProps<DataTableProps>(), {
-  hoverable: true,
-  emptyText: 'No data available'
-})
-
-const sortKey = ref<string | null>(null)
-const sortOrder = ref<'asc' | 'desc'>('asc')
-
-const handleSort = (key: string) => {
-  if (sortKey.value === key) {
-    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
-  } else {
-    sortKey.value = key
-    sortOrder.value = 'asc'
-  }
-}
-
-const sortedData = computed(() => {
-  if (!sortKey.value) {
-    return props.data
-  }
-
-  return [...props.data].sort((a, b) => {
-    const aVal = a[sortKey.value!]
-    const bVal = b[sortKey.value!]
-
-    if (aVal === bVal) return 0
-
-    let comparison = 0
-    if (typeof aVal === 'number' && typeof bVal === 'number') {
-      comparison = aVal - bVal
-    } else {
-      comparison = String(aVal).localeCompare(String(bVal))
-    }
-
-    return sortOrder.value === 'asc' ? comparison : -comparison
-  })
-})
-</script>
-
-<style scoped>
-.data-table {
-  width: 100%;
-}
-
-.data-table__wrapper {
-  overflow-x: auto;
-}
-
-.data-table__table {
-  min-width: 100%;
-  border-collapse: collapse;
-}
-
-.data-table__head {
-  background-color: #f9fafb;
-}
-
-.data-table__header {
-  padding: 0.75rem 1.5rem;
-  text-align: left;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #6b7280;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.data-table__header--sortable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.data-table__header--sortable:hover {
-  background-color: #f3f4f6;
-}
-
-.data-table__header-content {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.data-table__sort-icon {
-  font-size: 0.75rem;
-  color: #6b7280;
-}
-
-.data-table__sort-icon--inactive {
-  color: #d1d5db;
-}
-
-.data-table__row {
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.data-table__cell {
-  padding: 1rem 1.5rem;
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-
-.data-table__cell--empty {
-  text-align: center;
-  color: #9ca3af;
-  font-style: italic;
-}
-</style>

package/src/components/DataTable/types.ts

@@ -1,12 +0,0 @@
-export interface DataTableColumn {
-  key: string
-  label: string
-  sortable?: boolean
-}
-
-export interface DataTableProps {
-  columns: DataTableColumn[]
-  data: Record<string, any>[]
-  hoverable?: boolean
-  emptyText?: string
-}

package/src/components/DatePicker/DatePicker.stories.ts

@@ -1,172 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
-import DatePicker from './DatePicker.vue'
-
-const meta = {
-  title: 'Components/DatePicker',
-  component: DatePicker,
-  tags: ['autodocs']
-} satisfies Meta<typeof DatePicker>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args: any) => ({
-    components: { DatePicker },
-    setup() {
-      const date = ref<string>('')
-      return { args, date }
-    },
-    template: `
-      <div>
-        <DatePicker v-bind="args" v-model="date" />
-        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
-          Selected: {{ date || 'None' }}
-        </div>
-      </div>
-    `
-  })
-}
-
-export const WithValue: Story = {
-  render: (args: any) => ({
-    components: { DatePicker },
-    setup() {
-      const date = ref<string>('2026-03-15')
-      return { args, date }
-    },
-    template: `
-      <div>
-        <DatePicker v-bind="args" v-model="date" />
-        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
-          Selected: {{ date }}
-        </div>
-      </div>
-    `
-  })
-}
-
-export const DateRange: Story = {
-  render: (args: any) => ({
-    components: { DatePicker },
-    setup() {
-      const dateRange = ref<{ start: string; end: string }>({ start: '', end: '' })
-      return { args, dateRange }
-    },
-    template: `
-      <div>
-        <DatePicker v-bind="args" v-model="dateRange" mode="range" placeholder="Select date range" />
-        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
-          Start: {{ dateRange.start || 'Not set' }}<br />
-          End: {{ dateRange.end || 'Not set' }}
-        </div>
-      </div>
-    `
-  })
-}
-
-export const WithMinMaxDates: Story = {
-  render: (args: any) => ({
-    components: { DatePicker },
-    setup() {
-      const date = ref<string>('')
-      const today = new Date()
-      const minDate = today.toISOString().split('T')[0]
-      const maxDate = new Date(today.getFullYear(), today.getMonth() + 3, today.getDate()).toISOString().split('T')[0]
-      
-      return { args, date, minDate, maxDate }
-    },
-    template: `
-      <div>
-        <DatePicker 
-          v-bind="args" 
-          v-model="date" 
-          :min-date="minDate"
-          :max-date="maxDate"
-          placeholder="Future dates only"
-        />
-        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
-          Selected: {{ date || 'None' }}<br />
-          <small style="color: #6b7280;">Min: {{ minDate }} | Max: {{ maxDate }}</small>
-        </div>
-      </div>
-    `
-  })
-}
-
-export const FormExample: Story = {
-  render: (args: any) => ({
-    components: { DatePicker },
-    setup() {
-      const passportNumber = ref('')
-      const expiryDate = ref<string>('')
-      
-      return { args, passportNumber, expiryDate }
-    },
-    template: `
-      <div style="max-width: 400px;">
-        <div style="margin-bottom: 1rem;">
-          <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Passport Number</label>
-          <input 
-            v-model="passportNumber"
-            type="text" 
-            placeholder="e.g., X12345678"
-            style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
-          />
-        </div>
-        
-        <div style="margin-bottom: 1rem;">
-          <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Expiry Date</label>
-          <DatePicker 
-            v-bind="args" 
-            v-model="expiryDate"
-            placeholder="Select expiry date"
-          />
-        </div>
-        
-        <div style="padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
-          <strong>Form Data:</strong><br />
-          Passport: {{ passportNumber || 'Not entered' }}<br />
-          Expiry: {{ expiryDate || 'Not selected' }}
-        </div>
-      </div>
-    `
-  })
-}
-
-export const LongFormat: Story = {
-  render: (args: any) => ({
-    components: { DatePicker },
-    setup() {
-      const date = ref<string>('2026-06-15')
-      return { args, date }
-    },
-    template: `
-      <div>
-        <DatePicker v-bind="args" v-model="date" format="long" />
-        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
-          Selected: {{ date }}
-        </div>
-      </div>
-    `
-  })
-}
-
-export const Disabled: Story = {
-  render: (args: any) => ({
-    components: { DatePicker },
-    setup() {
-      const date = ref<string>('2026-02-07')
-      return { args, date }
-    },
-    template: `
-      <div>
-        <DatePicker v-bind="args" v-model="date" disabled />
-        <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem;">
-          Selected: {{ date }}
-        </div>
-      </div>
-    `
-  })
-}