@warkypublic/svelix 0.1.0

package/dist/components/Gridler/Gridler.stories.js

@@ -0,0 +1,262 @@
+import Gridler from './Gridler.svelte';
+const meta = {
+    title: 'Components/Gridler',
+    component: Gridler,
+    tags: ['autodocs'],
+    argTypes: {
+        rows: {
+            control: { type: 'number' },
+            description: 'Total number of rows'
+        },
+        rowHeight: {
+            control: { type: 'number' },
+            description: 'Height of each row in pixels'
+        },
+        headerHeight: {
+            control: { type: 'number' },
+            description: 'Height of the header row'
+        },
+        readonly: {
+            control: { type: 'boolean' },
+            description: 'Whether the grid is read-only'
+        },
+        rowMarkers: {
+            control: { type: 'select' },
+            options: ['none', 'number', 'checkbox'],
+            description: 'Type of row markers to display'
+        }
+    }
+};
+export default meta;
+const defaultColumns = [
+    { id: 'name', title: 'Name', width: 180 },
+    { id: 'email', title: 'Email', width: 220 },
+    { id: 'age', title: 'Age', width: 80 },
+    { id: 'status', title: 'Status', width: 120 },
+    { id: 'department', title: 'Department', width: 150 }
+];
+const firstNames = ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry', 'Ivy', 'Jack'];
+const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Wilson', 'Moore'];
+const statuses = ['Active', 'Pending', 'Inactive', 'Suspended'];
+const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations'];
+function generateCellContent([col, row]) {
+    const firstName = firstNames[row % firstNames.length];
+    const lastName = lastNames[Math.floor(row / 10) % lastNames.length];
+    const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`;
+    const age = 25 + (row % 40);
+    const status = statuses[row % statuses.length];
+    const department = departments[row % departments.length];
+    switch (col) {
+        case 0:
+            return { kind: 'text', displayData: `${firstName} ${lastName}`, data: `${firstName} ${lastName}`, allowOverlay: true };
+        case 1:
+            return { kind: 'uri', displayData: email, data: email, allowOverlay: true };
+        case 2:
+            return { kind: 'number', displayData: String(age), data: age, allowOverlay: true };
+        case 3:
+            return { kind: 'bubble', displayData: status, data: status, allowOverlay: true };
+        case 4:
+            return { kind: 'text', displayData: department, data: department, allowOverlay: true };
+        default:
+            return { kind: 'text', displayData: '', data: null, allowOverlay: true };
+    }
+}
+export const Basic = {
+    args: {
+        columns: defaultColumns,
+        rows: 100,
+        getCellContent: generateCellContent,
+        height: 400
+    }
+};
+export const LargeDataset = {
+    args: {
+        columns: defaultColumns,
+        rows: 10000,
+        getCellContent: generateCellContent,
+        height: 500
+    }
+};
+export const WithRowNumbers = {
+    args: {
+        columns: defaultColumns,
+        rows: 50,
+        getCellContent: generateCellContent,
+        rowMarkers: 'number',
+        height: 400
+    }
+};
+export const WithCheckboxes = {
+    args: {
+        columns: defaultColumns,
+        rows: 50,
+        getCellContent: generateCellContent,
+        rowMarkers: 'checkbox',
+        height: 400
+    }
+};
+export const Readonly = {
+    args: {
+        columns: defaultColumns,
+        rows: 50,
+        getCellContent: generateCellContent,
+        readonly: true,
+        height: 400
+    }
+};
+export const CustomTheme = {
+    args: {
+        columns: defaultColumns,
+        rows: 50,
+        getCellContent: generateCellContent,
+        theme: {
+            accentColor: '#10b981',
+            accentFg: '#ffffff',
+            bgCell: '#1e293b',
+            bgHeader: '#334155',
+            bgHeaderHasFocus: '#475569',
+            borderColor: '#475569',
+            foreground: '#f1f5f9',
+            fontFamily: 'ui-monospace, monospace'
+        },
+        height: 400
+    }
+};
+export const SmallRows = {
+    args: {
+        columns: defaultColumns,
+        rows: 10,
+        getCellContent: generateCellContent,
+        height: 300
+    }
+};
+const wideColumns = [
+    { id: 'id', title: 'ID', width: 60 },
+    { id: 'product', title: 'Product Name', width: 200 },
+    { id: 'sku', title: 'SKU', width: 100 },
+    { id: 'price', title: 'Price', width: 80 },
+    { id: 'stock', title: 'Stock', width: 80 },
+    { id: 'category', title: 'Category', width: 120 },
+    { id: 'supplier', title: 'Supplier', width: 150 },
+    { id: 'created', title: 'Created', width: 120 },
+    { id: 'updated', title: 'Updated', width: 120 }
+];
+function generateProductCell([col, row]) {
+    const products = ['Laptop Pro', 'Wireless Mouse', 'USB-C Hub', 'Monitor 4K', 'Mechanical Keyboard'];
+    const categories = ['Electronics', 'Accessories', 'Peripherals', 'Display', 'Input'];
+    switch (col) {
+        case 0:
+            return { kind: 'number', displayData: String(row + 1000), data: row + 1000, allowOverlay: true };
+        case 1:
+            return { kind: 'text', displayData: products[row % products.length], data: products[row % products.length], allowOverlay: true };
+        case 2:
+            return { kind: 'text', displayData: `SKU-${row.toString(16).toUpperCase()}`, data: `SKU-${row.toString(16).toUpperCase()}`, allowOverlay: true };
+        case 3:
+            return { kind: 'number', displayData: `$${(99.99 + row * 10).toFixed(2)}`, data: 99.99 + row * 10, allowOverlay: true };
+        case 4:
+            return { kind: 'number', displayData: String(Math.floor(Math.random() * 100)), data: Math.floor(Math.random() * 100), allowOverlay: true };
+        case 5:
+            return { kind: 'bubble', displayData: categories[row % categories.length], data: categories[row % categories.length], allowOverlay: true };
+        case 6:
+            return { kind: 'text', displayData: 'Acme Corp', data: 'Acme Corp', allowOverlay: true };
+        case 7:
+            return { kind: 'text', displayData: `2024-${String((row % 12) + 1).padStart(2, '0')}-15`, data: null, allowOverlay: true };
+        case 8:
+            return { kind: 'text', displayData: `2024-${String((row % 12) + 1).padStart(2, '0')}-20`, data: null, allowOverlay: true };
+        default:
+            return { kind: 'text', displayData: '', data: null, allowOverlay: true };
+    }
+}
+export const WideGrid = {
+    args: {
+        columns: wideColumns,
+        rows: 100,
+        getCellContent: generateProductCell,
+        height: 400
+    }
+};
+export const WithSearchHighlight = {
+    args: {
+        columns: defaultColumns,
+        rows: 100,
+        getCellContent: generateCellContent,
+        showSearch: true,
+        searchValue: 'Alice',
+        height: 400
+    }
+};
+export const WithFixedColumns = {
+    args: {
+        columns: wideColumns,
+        rows: 100,
+        getCellContent: generateProductCell,
+        fixedColumns: 2,
+        height: 400
+    }
+};
+export const WithFixedColumnsAndRowNumbers = {
+    args: {
+        columns: wideColumns,
+        rows: 100,
+        getCellContent: generateProductCell,
+        fixedColumns: 2,
+        rowMarkers: 'number',
+        height: 400
+    }
+};
+export const WithColumnReorder = {
+    args: {
+        columns: [...defaultColumns],
+        rows: 50,
+        getCellContent: generateCellContent,
+        onColumnMoved: (startIndex, endIndex) => {
+            console.log(`Column moved from ${startIndex} to ${endIndex}`);
+        },
+        height: 400
+    }
+};
+export const EditableWithCopyPaste = {
+    args: {
+        columns: defaultColumns,
+        rows: 50,
+        getCellContent: generateCellContent,
+        rowMarkers: 'checkbox',
+        onCellEdited: (item, value) => {
+            console.log('Cell edited:', item, value);
+        },
+        height: 400
+    }
+};
+export const AllFeatures = {
+    args: {
+        columns: [...wideColumns],
+        rows: 1000,
+        getCellContent: generateProductCell,
+        fixedColumns: 2,
+        rowMarkers: 'number',
+        showSearch: true,
+        searchValue: 'Laptop',
+        onColumnMoved: (startIndex, endIndex) => {
+            console.log(`Column moved: ${startIndex} → ${endIndex}`);
+        },
+        onCellEdited: (item, value) => {
+            console.log('Cell edited:', item, value);
+        },
+        theme: {
+            accentColor: '#6366f1',
+            bgHeaderHasFocus: '#e0e7ff',
+            bgSearchResult: '#fef9c3'
+        },
+        height: 500
+    }
+};
+export const MillionRows = {
+    args: {
+        columns: defaultColumns,
+        rows: 1_000_000,
+        getCellContent: generateCellContent,
+        fixedColumns: 1,
+        rowMarkers: 'number',
+        height: 500
+    }
+};