@warkypublic/svelix 0.1.0

package/dist/components/Svark/Svark.stories.js

@@ -0,0 +1,659 @@
+import { expect, within, userEvent, fn } from '@storybook/test';
+import Svark from './Svark.svelte';
+import SvarkSelectionDemo from './SvarkSelectionDemo.svelte';
+const meta = {
+    title: 'Components/Svark',
+    component: Svark,
+    tags: ['autodocs'],
+    argTypes: {
+        baseUrl: {
+            control: { type: 'text' },
+            description: 'ResolveSpec API base URL'
+        },
+        token: {
+            control: { type: 'text' },
+            description: 'Bearer auth token'
+        },
+        schema: {
+            control: { type: 'text' },
+            description: 'Database schema name'
+        },
+        entity: {
+            control: { type: 'text' },
+            description: 'Entity / table name'
+        },
+        clientType: {
+            control: { type: 'select' },
+            options: ['body', 'header'],
+            description: 'REST client protocol — body JSON or HTTP headers'
+        },
+        pageSize: {
+            control: { type: 'number' },
+            description: 'Number of rows to fetch per page'
+        },
+        serverSide: {
+            control: { type: 'boolean' },
+            description: 'Enable server-side sort and filter'
+        },
+        height: {
+            control: { type: 'text' },
+            description: 'Grid container height (CSS string or px number)'
+        },
+        select: {
+            control: { type: 'boolean' },
+            description: 'Enable row selection'
+        },
+        multiselect: {
+            control: { type: 'boolean' },
+            description: 'Allow multi-row selection'
+        },
+        virtualScroll: {
+            control: { type: 'boolean' },
+            description: 'Enable virtual (windowed) scrolling'
+        },
+        infiniteScroll: {
+            control: { type: 'boolean' },
+            description: 'Enable infinite scroll (append pages on scroll)'
+        }
+    },
+    args: {
+        onchange: fn(),
+        onerror: fn(),
+        onselect: fn()
+    }
+};
+export default meta;
+// ── Shared mock data ──────────────────────────────────────────────────────────
+const mockUsers = Array.from({ length: 50 }, (_, i) => ({
+    id: i + 1,
+    name: ['Alice Smith', 'Bob Jones', 'Carol White', 'Dave Brown', 'Eve Wilson'][i % 5],
+    email: `user${i + 1}@example.com`,
+    role: ['Admin', 'Editor', 'Viewer'][i % 3],
+    status: ['Active', 'Inactive', 'Pending'][i % 3],
+    department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][i % 5]
+}));
+// Large dataset for virtual / infinite scroll demos (5 000 rows)
+const mockLargeUsers = Array.from({ length: 5000 }, (_, i) => ({
+    id: i + 1,
+    name: ['Alice Smith', 'Bob Jones', 'Carol White', 'Dave Brown', 'Eve Wilson'][i % 5],
+    email: `user${i + 1}@example.com`,
+    role: ['Admin', 'Editor', 'Viewer'][i % 3],
+    status: ['Active', 'Inactive', 'Pending'][i % 3],
+    department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][i % 5]
+}));
+// Paginated mock: slices mockLargeUsers by limit/offset from the request body
+function mockFetchPaginated(dataset) {
+    return async (_url, init) => {
+        const body = init?.body ? JSON.parse(init.body) : {};
+        const offset = body.options?.offset ?? 0;
+        const limit = body.options?.limit ?? 50;
+        const page = dataset.slice(offset, offset + limit);
+        return new Response(JSON.stringify({
+            success: true,
+            data: page,
+            metadata: {
+                total: dataset.length,
+                count: page.length,
+                filtered: dataset.length,
+                limit,
+                offset
+            }
+        }), { status: 200, headers: { 'Content-Type': 'application/json' } });
+    };
+}
+function mockApiResponse(data, total) {
+    return new Response(JSON.stringify({
+        success: true,
+        data,
+        metadata: { total: total ?? data.length, count: data.length, filtered: data.length, limit: 100, offset: 0 }
+    }), { status: 200, headers: { 'Content-Type': 'application/json' } });
+}
+function mockFetch(data, delayMs = 0) {
+    return async () => {
+        if (delayMs > 0)
+            await new Promise((r) => setTimeout(r, delayMs));
+        return mockApiResponse(data);
+    };
+}
+function mockFetchError(message = 'Internal Server Error', status = 500) {
+    return async () => new Response(JSON.stringify({ success: false, error: { code: 'ERR', message } }), {
+        status,
+        headers: { 'Content-Type': 'application/json' }
+    });
+}
+// ── Shared columns ────────────────────────────────────────────────────────────
+const userColumns = [
+    { id: 'id', header: 'ID', width: 60 },
+    { id: 'name', header: 'Name', width: 180, sort: true },
+    { id: 'email', header: 'Email', width: 220 },
+    { id: 'role', header: 'Role', width: 100 },
+    { id: 'status', header: 'Status', width: 100 },
+    { id: 'department', header: 'Department', width: 140 }
+];
+// ── Stories ───────────────────────────────────────────────────────────────────
+export const Basic = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetch(mockUsers);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        pageSize: 50
+    }
+};
+export const HeaderClient = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetch(mockUsers);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'header',
+        pageSize: 50
+    }
+};
+export const WithToken = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = async (url, init) => {
+                const hasAuth = init?.headers?.['Authorization'];
+                return mockApiResponse(hasAuth ? mockUsers : []);
+            };
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        token: 'demo-bearer-token',
+        columns: userColumns,
+        clientType: 'body'
+    }
+};
+export const ServerSideSort = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = async (url, init) => {
+                const body = init?.body ? JSON.parse(init.body) : {};
+                const sort = body.options?.sort ?? [];
+                const limit = body.options?.limit ?? 50;
+                const offset = body.options?.offset ?? 0;
+                const data = [...mockUsers];
+                if (sort.length > 0) {
+                    const { column, direction } = sort[0];
+                    data.sort((a, b) => {
+                        const av = String(a[column] ?? '');
+                        const bv = String(b[column] ?? '');
+                        return direction === 'desc' ? bv.localeCompare(av) : av.localeCompare(bv);
+                    });
+                }
+                return mockApiResponse(data.slice(offset, offset + limit), data.length);
+            };
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        serverSide: true,
+        pageSize: 10
+    }
+};
+export const ServerSideFilter = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = async (url, init) => {
+                const body = init?.body ? JSON.parse(init.body) : {};
+                const filters = body.options?.filters ?? [];
+                const limit = body.options?.limit ?? 50;
+                const offset = body.options?.offset ?? 0;
+                let data = [...mockUsers];
+                for (const f of filters) {
+                    const val = String(f.value ?? '').toLowerCase();
+                    data = data.filter((row) => String(row[f.column] ?? '').toLowerCase().includes(val));
+                }
+                return mockApiResponse(data.slice(offset, offset + limit), data.length);
+            };
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns.map((c) => c.id === 'name' ? { ...c, header: { text: 'Name', filter: 'text' } } : c),
+        clientType: 'body',
+        serverSide: true,
+        pageSize: 10
+    }
+};
+export const InitialQuery = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetch(mockUsers.filter((u) => u.role === 'Admin'));
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        query: {
+            filters: [{ column: 'role', operator: 'eq', value: 'Admin' }],
+            sort: [{ column: 'name', direction: 'asc' }],
+            limit: 20
+        }
+    }
+};
+export const LoadingState = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetch(mockUsers, 2000);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body'
+    }
+};
+export const ErrorState = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetchError('Connection refused');
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        onerror: (msg) => console.error('Svark error:', msg)
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const alert = await canvas.findByRole('alert', {}, { timeout: 3000 });
+        await expect(alert).toBeInTheDocument();
+    }
+};
+export const EmptyData = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetch([]);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        config: { autoConfig: true }
+    }
+};
+export const WithGridConfig = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetch(mockUsers);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        config: {
+            select: true,
+            reorder: true,
+            sizes: { rowHeight: 40, headerHeight: 42 }
+        }
+    }
+};
+// ── Row selection stories ──────────────────────────────────────────────────────
+export const SingleRowSelection = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetch(mockUsers);
+            return Story();
+        }
+    ],
+    render: (args) => ({ Component: SvarkSelectionDemo, props: args }),
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        select: true,
+        multiselect: false
+    },
+    play: async ({ canvasElement }) => {
+        // Wait for SVAR to render rows after fetch
+        await new Promise((r) => setTimeout(r, 600));
+        const rows = canvasElement.querySelectorAll('[role="row"][data-id]');
+        if (rows.length > 0) {
+            await userEvent.click(rows[0]);
+        }
+    }
+};
+export const MultiRowSelection = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetch(mockUsers);
+            return Story();
+        }
+    ],
+    render: (args) => ({ Component: SvarkSelectionDemo, props: args }),
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        select: true,
+        multiselect: true
+    },
+    play: async ({ canvasElement }) => {
+        await new Promise((r) => setTimeout(r, 600));
+        const rows = canvasElement.querySelectorAll('[role="row"][data-id]');
+        if (rows.length >= 3) {
+            await userEvent.click(rows[0]);
+            await userEvent.click(rows[1], { ctrlKey: true });
+            await userEvent.click(rows[2], { ctrlKey: true });
+        }
+    }
+};
+export const PreSelectedRows = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetch(mockUsers);
+            return Story();
+        }
+    ],
+    render: (args) => ({ Component: SvarkSelectionDemo, props: args }),
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        select: true,
+        multiselect: true,
+        // Pass initial selection via Grid's selectedRows prop through config spread
+        config: { selectedRows: [1, 3, 5] }
+    },
+    play: async ({ canvasElement }) => {
+        await new Promise((r) => setTimeout(r, 600));
+        // Verify the pre-selected rows have .wx-selected class
+        const selected = canvasElement.querySelectorAll('[role="row"].wx-selected');
+        await expect(selected.length).toBeGreaterThan(0);
+    }
+};
+// ── Virtual & Infinite scroll stories ────────────────────────────────────────
+export const VirtualScrolling = {
+    decorators: [
+        (Story) => {
+            // Paginated fetch: Svark sends limit=1 first (metadata), then
+            // request-data drives subsequent window fetches.
+            globalThis.fetch = mockFetchPaginated(mockLargeUsers);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        pageSize: 50,
+        virtualScroll: true,
+        height: '500px'
+    }
+};
+export const InfiniteScrolling = {
+    decorators: [
+        (Story) => {
+            // Paginated fetch: Svark appends pages as the user scrolls.
+            globalThis.fetch = mockFetchPaginated(mockLargeUsers);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'body',
+        pageSize: 50,
+        infiniteScroll: true,
+        height: '500px'
+    }
+};
+// ── HeaderSpec (header client) stories ───────────────────────────────────────
+//
+// HeaderSpecClient sends GET requests with options encoded in HTTP headers:
+//   X-Limit / X-Offset   — pagination
+//   X-Sort               — sort: "+col" asc, "-col" desc
+//   X-SearchOp-ilike-col — case-insensitive filter value for a column
+//
+// The server must return the raw data array as JSON body and signal the total
+// via the "content-range: {offset}-{end}/{total}" response header.
+function mockFetchHeader(dataset, delayMs = 0) {
+    return async (_url, init) => {
+        if (delayMs > 0)
+            await new Promise((r) => setTimeout(r, delayMs));
+        const hdrs = (init?.headers ?? {});
+        const limit = Number(hdrs['X-Limit'] ?? 50);
+        const offset = Number(hdrs['X-Offset'] ?? 0);
+        let data = [...dataset];
+        // Apply ilike filters: X-SearchOp-ilike-{column}: value
+        for (const [key, val] of Object.entries(hdrs)) {
+            const m = key.match(/^X-SearchOp-ilike-(.+)$/i);
+            if (m) {
+                const col = m[1];
+                const search = String(val).toLowerCase();
+                data = data.filter((row) => String(row[col] ?? '').toLowerCase().includes(search));
+            }
+        }
+        // Apply sort: X-Sort: +col,-col2
+        const sortHeader = hdrs['X-Sort'];
+        if (sortHeader) {
+            for (const part of sortHeader.split(',').reverse()) {
+                const desc = part.startsWith('-');
+                const col = part.slice(1);
+                data.sort((a, b) => {
+                    const av = String(a[col] ?? '');
+                    const bv = String(b[col] ?? '');
+                    return desc ? bv.localeCompare(av) : av.localeCompare(bv);
+                });
+            }
+        }
+        const total = data.length;
+        const page = data.slice(offset, offset + limit);
+        const end = offset + page.length - 1;
+        return new Response(JSON.stringify(page), {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+                'content-range': `${offset}-${Math.max(end, 0)}/${total}`,
+                'x-limit': String(limit)
+            }
+        });
+    };
+}
+const userColumnsWithSort = [
+    { id: 'id', header: 'ID', width: 60 },
+    { id: 'name', header: 'Name', width: 180, sort: true },
+    { id: 'email', header: 'Email', width: 220, sort: true },
+    { id: 'role', header: 'Role', width: 100, sort: true },
+    { id: 'status', header: 'Status', width: 100, sort: true },
+    { id: 'department', header: 'Department', width: 140, sort: true }
+];
+const userColumnsWithFilter = [
+    { id: 'id', header: 'ID', width: 60 },
+    { id: 'name', header: { text: 'Name', filter: 'text' }, width: 180, sort: true },
+    { id: 'email', header: { text: 'Email', filter: 'text' }, width: 220 },
+    { id: 'role', header: { text: 'Role', filter: 'text' }, width: 100 },
+    { id: 'status', header: { text: 'Status', filter: 'text' }, width: 100 },
+    { id: 'department', header: { text: 'Department', filter: 'text' }, width: 140 }
+];
+export const HeaderInfiniteScroll = {
+    decorators: [
+        (Story) => {
+            // 300ms delay so the loading indicator is visible on each page append
+            globalThis.fetch = mockFetchHeader(mockLargeUsers, 300);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumns,
+        clientType: 'header',
+        pageSize: 50,
+        infiniteScroll: true,
+        height: '500px'
+    }
+};
+export const HeaderSorting = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetchHeader(mockLargeUsers);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumnsWithSort,
+        clientType: 'header',
+        pageSize: 100,
+        serverSide: true,
+        height: '500px'
+    }
+};
+export const HeaderFiltering = {
+    decorators: [
+        (Story) => {
+            globalThis.fetch = mockFetchHeader(mockLargeUsers);
+            return Story();
+        }
+    ],
+    args: {
+        baseUrl: 'http://localhost:3000',
+        schema: 'public',
+        entity: 'users',
+        columns: userColumnsWithFilter,
+        clientType: 'header',
+        pageSize: 100,
+        serverSide: true,
+        height: '500px'
+    }
+};
+// ── Live HeaderSpec stories (real backend, no mock) ───────────────────────────
+// Set baseUrl, schema, entity and optionally token in the Controls panel.
+export const LiveHeaderInfiniteScroll = {
+    args: {
+        baseUrl: "https://utils.btsys.tech/api",
+        token: "773EB99C-F625-4E99-9DB9-CDDA7CA17639",
+        schema: 'public',
+        entity: "synclog",
+        columns: [{
+                "id": "id",
+                "header": "ID",
+                "width": 120
+            }, {
+                "id": "logmessage",
+                "header": {
+                    "text": "Name",
+                    "filter": "text"
+                },
+                "width": 280,
+                "sort": true
+            }, {
+                "id": "logtype",
+                "header": {
+                    "text": "Test",
+                    "filter": "text"
+                },
+                "width": 140
+            }],
+        clientType: 'header',
+        serverSide: true,
+        pageSize: 50,
+        infiniteScroll: true,
+        height: "400px"
+    }
+};
+export const LiveHeaderSorting = {
+    args: {
+        baseUrl: "https://utils.btsys.tech/api/",
+        token: "773EB99C-F625-4E99-9DB9-CDDA7CA17639",
+        schema: 'public',
+        entity: 'users',
+        columns: userColumnsWithSort,
+        clientType: 'header',
+        pageSize: 10,
+        serverSide: true,
+        height: '500px'
+    }
+};
+export const LiveHeaderFiltering = {
+    args: {
+        baseUrl: "https://utils.btsys.tech/api",
+        token: "773EB99C-F625-4E99-9DB9-CDDA7CA17639",
+        schema: 'public',
+        entity: "synclog",
+        columns: [{
+                "id": "id",
+                "header": "ID",
+                "width": 120
+            }, {
+                "id": "logmessage",
+                "header": {
+                    "text": "Name",
+                    "filter": "text"
+                },
+                "width": 280,
+                "sort": true
+            }, {
+                "id": "logtype",
+                "header": {
+                    "text": "Test",
+                    "filter": "text"
+                },
+                "width": 140
+            }],
+        clientType: 'header',
+        pageSize: 100,
+        serverSide: true,
+        height: '500px'
+    }
+};