@aleph-alpha/ui-library 1.9.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/ui-library",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/system/lib.js",
@@ -18,6 +18,7 @@
   },
   "files": [
     "dist/system",
+    "src",
     "config.js",
     "config.d.ts",
     "tailwind.preset.js"

package/src/@types/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, any>;
+  export default component;
+}

package/src/__tests__/placeholder.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('ui-library setup', () => {
+  it('placeholder test passes', () => {
+    expect(true).toBe(true);
+  });
+});

package/src/compositions/UiCompositionPlaceholder/UiCompositionPlaceholder.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+  defineOptions({
+    name: 'UiCompositionPlaceholder',
+  });
+</script>
+
+<template>
+  <div>Composition Placeholder</div>
+</template>

package/src/compositions/UiCompositionPlaceholder/index.ts

@@ -0,0 +1 @@
+export { default as UiCompositionPlaceholder } from './UiCompositionPlaceholder.vue';

package/src/compositions/UiCompositionPlaceholder/types.ts

@@ -0,0 +1,8 @@
+/**
+ * Placeholder for composition components (internal development use).
+ *
+ * @category Compositions
+ * @useCases development placeholder
+ * @keywords placeholder, composition, internal
+ */
+export type UiCompositionPlaceholderProps = Record<string, never>;

package/src/compositions/UiDataTable/UiDataTable.mock.ts

@@ -0,0 +1,104 @@
+/**
+ * Mock data for UiDataTable stories and testing.
+ * Keep test data separate from component logic for cleaner architecture.
+ */
+
+export interface Payment {
+  /** Unique payment identifier */
+  id: string;
+  /** Payment amount in cents */
+  amount: number;
+  /** Current payment status */
+  status: 'pending' | 'processing' | 'success' | 'failed';
+  /** Customer email address */
+  email: string;
+}
+
+// Utility to generate deterministic mock data
+function generatePayments(count: number): Payment[] {
+  const statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed'];
+  const domains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 'company.com'];
+  const firstNames = [
+    'John',
+    'Jane',
+    'Bob',
+    'Alice',
+    'Charlie',
+    'Diana',
+    'Edward',
+    'Fiona',
+    'George',
+    'Helen',
+    'Ivan',
+    'Julia',
+    'Kevin',
+    'Laura',
+    'Michael',
+    'Nancy',
+    'Oscar',
+    'Patricia',
+    'Quentin',
+    'Rachel',
+  ];
+  const lastNames = [
+    'Smith',
+    'Johnson',
+    'Williams',
+    'Brown',
+    'Jones',
+    'Garcia',
+    'Miller',
+    'Davis',
+    'Rodriguez',
+    'Martinez',
+  ];
+
+  return Array.from({ length: count }, (_, i) => {
+    const firstName = firstNames[i % firstNames.length];
+    const lastName = lastNames[i % lastNames.length];
+    const domain = domains[i % domains.length];
+
+    return {
+      id: `payment-${String(i + 1).padStart(4, '0')}`,
+      amount: Math.floor(100 + ((i * 73) % 900)), // Deterministic "random" amounts 100-999
+      status: statuses[i % statuses.length],
+      email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${i > 19 ? i : ''}@${domain}`,
+    };
+  });
+}
+
+/**
+ * Small dataset for basic examples (12 items)
+ */
+export const paymentsSmall: Payment[] = generatePayments(12);
+
+/**
+ * Medium dataset for pagination examples (50 items)
+ */
+export const paymentsMedium: Payment[] = generatePayments(50);
+
+/**
+ * Large dataset for stress testing (100 items)
+ */
+export const paymentsLarge: Payment[] = generatePayments(100);
+
+/**
+ * Extra large dataset for performance testing (500 items)
+ */
+export const paymentsXLarge: Payment[] = generatePayments(500);
+
+/**
+ * Default dataset used in most stories
+ */
+export const payments = paymentsLarge;
+
+/**
+ * Dataset options for Storybook controls
+ */
+export const datasetOptions = {
+  'Small (12 items)': paymentsSmall,
+  'Medium (50 items)': paymentsMedium,
+  'Large (100 items)': paymentsLarge,
+  'Extra Large (500 items)': paymentsXLarge,
+  Empty: [] as Payment[],
+} as const;