@ims360/svelte-ivory 0.0.6 → 0.0.8

package/src/lib/components/table/table/table.svelte.ts

@@ -0,0 +1,124 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { Column, type ColumnConfig } from './column.svelte';
+
+export type TableRow<T> = { id: string; children?: T[] };
+export type TablePlugin<T extends TableRow<T>> = (state: TableState<T>) => TableState<T>;
+
+export interface TableConfig<T extends TableRow<T>> {
+    data: T[];
+    plugins?: TablePlugin<T>[];
+}
+
+export interface TableState<T extends TableRow<T>> {
+    data: T[];
+    expanded: Set<string>;
+}
+
+interface TreeRow<T> {
+    node: T;
+    nestingLevel: number;
+    id: string;
+}
+
+export class TableController<T extends TableRow<T>> {
+    columns = $state<Column[]>([]);
+    data = $state<T[]>([]);
+    expanded: Set<string> = new SvelteSet<string>();
+    scrollTop = $state(0);
+
+    readonly results = $derived(treeWalker(this.data, this.expanded));
+
+    refresh(conf: TableConfig<T>) {
+        let intitalState: TableState<T> = {
+            data: structuredClone(conf.data),
+            expanded: this.expanded
+        };
+
+        for (const plugin of conf.plugins ?? []) {
+            intitalState = plugin(intitalState);
+        }
+
+        this.data = intitalState.data;
+        this.expanded = new SvelteSet(intitalState.expanded);
+    }
+
+    registerColumn(config: ColumnConfig): Column {
+        // only register a column once
+        let existingColumn: Column | undefined = undefined;
+        for (const column of this.columns) {
+            if (column.id !== config.id) continue;
+            existingColumn = column;
+            break;
+        }
+        if (existingColumn) return existingColumn;
+        const col = new Column(config);
+        this.columns.push(col);
+        return col;
+    }
+
+    toggleExpansion(id: string) {
+        if (this.expanded.has(id)) this.expanded.delete(id);
+        else this.expanded.add(id);
+    }
+}
+
+/** Walks though a tree strucure and turns it into a flat list, needed since the `VirtualList` needs a list, not a tree */
+function treeWalker<T extends TableRow<T>>(data: T[], expanded: Set<string>) {
+    const stack: { node: T; nestingLevel: number }[] = [];
+
+    // push the root nodes of the trees onto the stack
+    for (let i = 0; i < data.length; i++) {
+        stack.push({
+            node: data[data.length - i - 1],
+            nestingLevel: 0
+        });
+    }
+
+    const entries: TreeRow<T>[] = []; // the final result
+
+    let someHaveChildren = false; // used to determine whether to show the tree utility buttons
+    let maxNestingLevel = 0;
+    while (stack.length !== 0) {
+        const stackEntry = stack.pop();
+        if (!stackEntry) break;
+
+        const { node, nestingLevel } = stackEntry;
+        const children = node.children;
+
+        if (children && children.length > 0) {
+            someHaveChildren = true;
+            // only show the children of expanded elements
+            if (expanded.has(node.id)) {
+                maxNestingLevel = Math.max(maxNestingLevel, nestingLevel + 1);
+                stack.push(
+                    ...children
+                        .map((c) => ({
+                            node: c,
+                            nestingLevel: nestingLevel + 1
+                        }))
+                        .reverse()
+                );
+            }
+        }
+
+        entries.push({
+            id: node.id,
+            node,
+            nestingLevel
+        });
+    }
+
+    return {
+        entries,
+        someHaveChildren,
+        maxNestingLevel
+    };
+}
+
+export function getAllIds<T extends TableRow<T>>(...nodes: T[]): string[] {
+    const ids = nodes.map((n) => n.id);
+    for (const node of nodes) {
+        ids.push(...getAllIds(...(node.children ?? [])));
+    }
+    return ids;
+}

package/src/lib/utils/actions/index.ts

@@ -1,5 +1,6 @@
 export { clickOutside } from './clickOutside';
 export { focusTrap } from './focusTrap';
 export { portal } from './portal';
+export { resize } from './resize';
 export { shortcut } from './shortcut';
 export { onFirstVisible } from './visible';

package/src/lib/utils/actions/resize.ts

@@ -0,0 +1,35 @@
+import type { Action } from 'svelte/action';
+
+export const resize: Action<
+    HTMLElement,
+    { resized: (mouseX: number) => void; dragging: (dragging: boolean) => void }
+> = (node: HTMLElement, { resized, dragging }) => {
+    const onResize = (e: PointerEvent) => {
+        resized(e.clientX);
+    };
+
+    const onResizeEnd = () => {
+        dragging(false);
+        window.removeEventListener('pointermove', onResize);
+        window.removeEventListener('pointerup', onResizeEnd);
+        window.removeEventListener('pointercancel', onResizeEnd);
+
+        document.getElementsByTagName('html')[0].style.userSelect = '';
+    };
+
+    const onResizeStart = () => {
+        dragging(true);
+        window.addEventListener('pointermove', onResize);
+        window.addEventListener('pointerup', onResizeEnd);
+        window.addEventListener('pointercancel', onResizeEnd);
+
+        document.getElementsByTagName('html')[0].style.userSelect = 'none';
+    };
+    node.addEventListener('pointerdown', onResizeStart);
+
+    return {
+        destroy() {
+            node.removeEventListener('pointerdown', onResizeStart);
+        }
+    };
+};

package/dist/components/index.js

@@ -1 +0,0 @@
-"use strict";

package/src/lib/components/basic/checkbox/checkbox.svelte.spec.ts

@@ -1,39 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { render, screen } from '@testing-library/svelte';
-import { userEvent } from '@testing-library/user-event';
-import { fn } from '@vitest/spy';
-import { describe, expect, it } from 'vitest';
-import { Checkbox } from '../index';
-
-const testId = 'checkbox';
-
-describe('Basic/Checkbox', () => {
-    it('renders the checked icon', async () => {
-        render(Checkbox, { testId, checked: true });
-
-        const checkbox = screen.getByTestId(testId);
-        expect(checkbox).toBeVisible();
-        const icon = checkbox.querySelector('svg');
-        expect(icon).toBeVisible();
-    });
-
-    it('fires click event when clicked', async () => {
-        const callback = fn();
-        render(Checkbox, { testId, onclick: callback });
-
-        const checkbox = screen.getByTestId(testId);
-        expect(checkbox).toBeVisible();
-        checkbox.click();
-        expect(callback).toHaveBeenCalledOnce();
-    });
-
-    it("doesn't fire click event when disabled", async () => {
-        const callback = fn();
-        render(Checkbox, { testId, onclick: callback, disabled: true });
-
-        const checkbox = screen.getByTestId(testId);
-        expect(checkbox).toBeVisible();
-        await userEvent.click(checkbox);
-        expect(callback).not.toHaveBeenCalled();
-    });
-});

package/src/lib/components/basic/toggle/toggle.svelte.spec.ts

@@ -1,19 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { render, screen } from '@testing-library/svelte';
-import { fn } from '@vitest/spy';
-import { describe, expect, it } from 'vitest';
-import Toggle from './Toggle.svelte';
-
-const testId = 'toggle';
-
-describe('Basic/Toggle', () => {
-    it('fires click event when clicked', async () => {
-        const callback = fn();
-        render(Toggle, { testId, onclick: callback });
-
-        const toggle = screen.getByTestId(testId);
-        expect(toggle).toBeVisible();
-        toggle.click();
-        expect(callback).toHaveBeenCalledOnce();
-    });
-});

package/src/lib/components/layout/modal/modal.svelte.spec.ts

@@ -1,39 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import ModalTest from './ModalTest.svelte';
-
-const testId = 'modal';
-const contentTestId = 'modal-content';
-
-const children = createRawSnippet(() => ({
-    render: () => `<p data-testId="${contentTestId}">Content</p>`
-}));
-
-describe('Layout/Modal', () => {
-    it('renders', async () => {
-        render(ModalTest, {
-            open: true,
-            testId,
-            children
-        });
-        const modal = screen.getByTestId(testId);
-        expect(modal).toBeVisible();
-        const content = screen.getByTestId(contentTestId);
-        expect(content).toBeVisible();
-    });
-
-    // this is bugged for some f'ing reason
-    // it('closes when clicking outside', async () => {
-    //     render(ModalTest, {
-    //         open: true,
-    //         testId,
-    //         children
-    //     });
-    //     const modal = screen.getByTestId(testId);
-    //     const background = screen.getByTestId(HiddenBackground.TEST_ID);
-    //     await userEvent.click(background!);
-    //     expect(modal).not.toBeVisible();
-    // });
-});

package/src/lib/components/layout/tabs/Tabs.test.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-    interface Props {}
-
-    let {}: Props = $props();
-</script>

package/src/lib/utils/actions/clickOutside.svelte.spec.ts

@@ -1,67 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import userEvent from '@testing-library/user-event';
-import { fn } from '@vitest/spy';
-import { describe, expect, it } from 'vitest';
-import { clickOutside } from './clickOutside';
-
-describe('clickOutside', () => {
-    it('should fire when an element outside the node is clicked', async () => {
-        const node = document.createElement('div');
-        document.body.appendChild(node);
-        const otherNode = document.createElement('div');
-        document.body.appendChild(otherNode);
-
-        const callback = fn();
-        clickOutside(node, callback);
-
-        await userEvent.click(otherNode);
-
-        expect(callback).toHaveBeenCalledOnce();
-    });
-
-    it('should not fire when the target is inside the node', async () => {
-        const node = document.createElement('div');
-        document.body.appendChild(node);
-        const nestedNode = node.appendChild(document.createElement('div'));
-        const otherNode = document.createElement('div');
-        document.body.appendChild(otherNode);
-
-        const callback = fn();
-        clickOutside(node, callback);
-
-        await userEvent.click(nestedNode);
-
-        expect(callback).not.toHaveBeenCalled();
-    });
-
-    it('should fire when the callback is passed in as an object', async () => {
-        const node = document.createElement('div');
-        document.body.appendChild(node);
-        const otherNode = document.createElement('div');
-        document.body.appendChild(otherNode);
-
-        const callback = fn();
-        clickOutside(node, { callback });
-
-        await userEvent.click(otherNode);
-
-        expect(callback).toHaveBeenCalledOnce();
-    });
-
-    it('should not fire when the target is inside the passed target', async () => {
-        const node = document.createElement('div');
-        document.body.appendChild(node);
-
-        const otherNode = document.createElement('div');
-        document.body.appendChild(otherNode);
-        const nestedNode = otherNode.appendChild(document.createElement('div'));
-
-        const callback = fn();
-        clickOutside(node, { callback, target: otherNode });
-
-        await userEvent.click(nestedNode);
-        await userEvent.click(otherNode);
-
-        expect(callback).not.toHaveBeenCalled();
-    });
-});

package/src/lib/utils/actions/shortcut.svelte.spec.ts

@@ -1,19 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import userEvent from '@testing-library/user-event';
-import { fn } from '@vitest/spy';
-import { describe, expect, it } from 'vitest';
-import { shortcut } from './shortcut';
-
-describe('shortcut', () => {
-    it('should call the callback when the key is pressed', async () => {
-        const node = document.createElement('div');
-        const keyCode = 'Enter';
-        const callback = fn();
-        shortcut(node, {
-            callback,
-            code: keyCode
-        });
-        await userEvent.keyboard(`{${keyCode}}`);
-        expect(callback).toHaveBeenCalledOnce();
-    });
-});

package/src/lib/utils/functions/cookie.svelte.spec.ts

@@ -1,55 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { describe, expect, it } from 'vitest';
-import { cookie } from './cookie';
-
-describe('cookie', () => {
-    it('sets correctly', () => {
-        const name = 'test';
-        const value = 'test';
-        const days = 1;
-        // this is a hack to get the value back that is actually being set
-        const setCookie = cookie.set({ name, value, days });
-        expect(setCookie).toBe(
-            `${name}=${value}; expires=${new Date(new Date().getTime() + days * 24 * 60 * 60 * 1000).toUTCString()}; path=/`
-        );
-    });
-
-    it('gets correctly', () => {
-        const name = 'test';
-        const value = 'test';
-        const days = 1;
-        cookie.set({ name, value, days });
-        expect(cookie.get(name)).toBe(value);
-    });
-
-    it("preserves existing cookie's path", () => {
-        const cookie1 = {
-            name: 'test',
-            value: 'test'
-        };
-        const cookie2 = {
-            name: 'test2',
-            value: 'test2'
-        };
-        cookie.set(cookie1);
-        cookie.set(cookie2);
-        expect(cookie.get(cookie1.name)).toBe(cookie1.value);
-        expect(cookie.get(cookie2.name)).toBe(cookie2.value);
-    });
-
-    it('updates cookies correctly', () => {
-        const cookie1 = {
-            name: 'test',
-            value: 'test'
-        };
-        const cookie2 = {
-            name: 'test2',
-            value: 'test2'
-        };
-        cookie.set(cookie1);
-        cookie.set(cookie2);
-        cookie.set({ name: cookie1.name, value: 'newValue' });
-        expect(cookie.get(cookie1.name)).toBe('newValue');
-        expect(cookie.get(cookie2.name)).toBe(cookie2.value);
-    });
-});

package/src/lib/utils/functions/pseudoRandomId.spec.ts

@@ -1,19 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { pseudoRandomId } from './pseudoRandomId';
-
-describe('pseudoRandomId', () => {
-    it('generates different values', () => {
-        const a = pseudoRandomId();
-        const b = pseudoRandomId();
-        expect(a).not.toBe(b);
-    });
-
-    it('generates values that start with the prefix', () => {
-        const prefix = 'test-';
-        const a = pseudoRandomId(prefix);
-        const b = pseudoRandomId(prefix);
-        expect(a.startsWith(prefix)).toBe(true);
-        expect(b.startsWith(prefix)).toBe(true);
-        expect(a).not.toBe(b);
-    });
-});

package/src/lib/utils/functions/queryParams.spec.ts

@@ -1,25 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { queryParams } from './queryParams';
-
-describe('queryParams', () => {
-    it('adds all query params', () => {
-        const params = {
-            a: 0,
-            b: '2',
-            c: 3
-        };
-        const query = queryParams(params);
-        expect(query).toBe('?a=0&b=2&c=3');
-    });
-
-    it('removes nullish values', () => {
-        const params = {
-            a: 0,
-            b: undefined,
-            c: 3,
-            d: null
-        };
-        const query = queryParams(params);
-        expect(query).toBe('?a=0&c=3');
-    });
-});