@davidbirchall/core 1.0.6 → 1.0.8

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

@@ -0,0 +1,156 @@
+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

@@ -0,0 +1,185 @@
+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

@@ -0,0 +1,177 @@
+<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

@@ -0,0 +1,12 @@
+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

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