@ims360/svelte-ivory 0.0.2

package/src/lib/components/toast/Toast.svelte

@@ -0,0 +1,100 @@
+<!-- 
+	@component
+	Renders the toasts that have been triggered by the `Toasts` store.  
+	Make sure to include this component in your root `+layout.svelte` file.
+-->
+<script lang="ts">
+    import type { Icon } from '@lucide/svelte';
+    import { Check, CircleAlert, Info, TriangleAlert, X } from '@lucide/svelte';
+    import type { Snippet } from 'svelte';
+    import { flip } from 'svelte/animate';
+    import type { ClassValue } from 'svelte/elements';
+    import { fly, scale } from 'svelte/transition';
+    import { Toasts, type ToastSettings } from './toasts.svelte';
+
+    type Props = {
+        class?: ClassValue;
+        children?: Snippet<[toast: ToastSettings & { close: () => void }]>;
+    };
+
+    let { class: clazz = 'px-2 pb-2', children }: Props = $props();
+
+    function getIcon(
+        variant: 'info' | 'success' | 'warning' | 'error',
+        icon?: typeof Icon
+    ): typeof Icon {
+        if (icon) return icon;
+        switch (variant) {
+            case 'info':
+                return Info;
+            case 'success':
+                return Check;
+            case 'warning':
+                return CircleAlert;
+            case 'error':
+                return TriangleAlert;
+        }
+    }
+</script>
+
+<div
+    class="pointer-events-none absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-start"
+>
+    <div
+        class={[
+            'flex h-full max-h-full flex-col-reverse items-center justify-end gap-2 overflow-hidden',
+            clazz
+        ]}
+    >
+        {#each Toasts.toasts as toast (toast.id)}
+            {@const VariantIcon = getIcon(toast.variant, toast.icon)}
+
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+                in:fly={{ y: '-100%', duration: 300 }}
+                out:scale={{ duration: 300 }}
+                animate:flip={{ duration: 300 }}
+                onpointerenter={() => {
+                    Toasts.freeze(toast.id);
+                }}
+                onpointerleave={() => {
+                    Toasts.unfreeze(toast.id);
+                }}
+                class="group pointer-events-auto flex h-fit w-fit flex-row items-center"
+            >
+                {#if children}
+                    {@render children({
+                        ...toast,
+                        close: () => Toasts.close(toast.id)
+                    })}
+                {:else}
+                    <div
+                        class={[
+                            'bg-opacity-85 flex flex-row items-center gap-4 rounded px-4 py-2 shadow-lg group-last:rounded-t-none',
+                            toast.variant === 'info' && 'preset-filled-primary-500',
+                            toast.variant === 'success' && 'preset-filled-success-500',
+                            toast.variant === 'warning' && 'preset-filled-warning-500',
+                            toast.variant === 'error' && 'preset-filled-error-500'
+                        ]}
+                    >
+                        <VariantIcon />
+                        <p class="font-bold">
+                            {toast.message}
+                        </p>
+                        {#if !toast.hideDismiss}
+                            <button
+                                type="button"
+                                onclick={() => {
+                                    Toasts.close(toast.id);
+                                }}
+                                class="transition-transform hover:rotate-90"
+                            >
+                                <X />
+                            </button>
+                        {/if}
+                    </div>
+                {/if}
+            </div>
+        {/each}
+    </div>
+</div>

package/src/lib/components/toast/index.ts

@@ -0,0 +1,2 @@
+export { default as ToastUI } from './Toast.svelte';
+export { Toasts } from './toasts.svelte';

package/src/lib/components/toast/toasts.svelte.ts

@@ -0,0 +1,89 @@
+import type { Icon } from '@lucide/svelte';
+
+export type ToastSettings = {
+    message: string;
+    autohide?: boolean;
+    timeout?: number;
+    hideDismiss?: boolean;
+    icon?: typeof Icon;
+    variant: 'info' | 'success' | 'warning' | 'error';
+};
+
+type Toast = ToastSettings & {
+    id: string;
+    timeoutId?: ReturnType<typeof setTimeout>;
+};
+
+const TOAST_DEFAULTS: ToastSettings = {
+    message: 'Missing Toast Message',
+    autohide: true,
+    timeout: 3000,
+    variant: 'info'
+};
+
+class ToastStore {
+    toasts = $state<Toast[]>([]);
+
+    trigger(toast: ToastSettings, id = crypto.randomUUID() as string) {
+        const mergedToasts: Toast = { ...TOAST_DEFAULTS, ...toast, id };
+
+        // start the autohide timeout
+        this.startAutoHide(mergedToasts);
+
+        // add the toasts to the list
+        this.toasts.push(mergedToasts);
+        return id;
+    }
+
+    close(id: string) {
+        const toast = this.toasts.find((t) => t.id === id);
+        if (!toast) return;
+        this.stopAutoHide(toast);
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+
+    update(id: string, toast: ToastSettings) {
+        const existingToast = this.toasts.find((t) => t.id === id);
+        if (!existingToast) {
+            this.trigger(toast, id);
+            return;
+        }
+        const mergedToast: Toast = {
+            ...TOAST_DEFAULTS,
+            ...existingToast,
+            ...toast
+        };
+        // clear the existing timeout and restart the autohide
+        this.stopAutoHide(existingToast);
+        this.startAutoHide(mergedToast);
+        this.toasts.splice(this.toasts.indexOf(existingToast), 1, mergedToast);
+    }
+
+    freeze(id: string) {
+        const toast = this.toasts.find((t) => t.id === id);
+        if (!toast) return;
+        this.stopAutoHide(toast);
+    }
+
+    unfreeze(id: string) {
+        const toast = this.toasts.find((t) => t.id === id);
+        if (!toast) return;
+        this.startAutoHide(toast);
+    }
+
+    private startAutoHide(toast: Toast) {
+        if (!toast.autohide) return;
+        toast.timeoutId = setTimeout(() => {
+            this.close(toast.id);
+        }, toast.timeout);
+    }
+
+    private stopAutoHide(toast: Toast) {
+        if (!toast.timeoutId) return;
+        clearTimeout(toast.timeoutId);
+        delete toast.timeoutId;
+    }
+}
+
+/** Exposes functions to manage toasts, contains currently active toasts */
+export const Toasts = new ToastStore();

package/src/lib/index.ts

@@ -0,0 +1 @@
+// Reexport your entry components here

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

@@ -0,0 +1,67 @@
+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/clickOutside.ts

@@ -0,0 +1,38 @@
+interface ClickOutsideParams {
+    /** Callback to be called when clicking outside of node */
+    callback: (e: MouseEvent) => void;
+    /** Callback is also not fired if the click target is inside this element */
+    target?: Element;
+}
+
+/** Dispatch event on click outside of node */
+export function clickOutside(
+    node: Element,
+    params: ((e: MouseEvent) => void) | ClickOutsideParams
+) {
+    function handleClick(event: MouseEvent) {
+        if (
+            !(event.target instanceof Node) ||
+            !node ||
+            node.contains(event.target) ||
+            event.defaultPrevented
+        )
+            return;
+
+        if (typeof params === 'function') {
+            params(event);
+            return;
+        }
+
+        if (params.target?.contains(event.target)) return;
+        params.callback(event);
+    }
+
+    document.addEventListener('click', handleClick, true);
+
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}

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

@@ -0,0 +1,65 @@
+export function focusTrap(node: HTMLElement, enabled: boolean) {
+    const elementWhitelist =
+        'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+    let firstElement: HTMLElement;
+    let lastElement: HTMLElement;
+
+    function onFirstElemKeydown(e: KeyboardEvent): void {
+        if (e.shiftKey && e.code === 'Tab') {
+            e.preventDefault();
+            lastElement.focus();
+        }
+    }
+
+    function onLastElemKeydown(e: KeyboardEvent): void {
+        if (!e.shiftKey && e.code === 'Tab') {
+            e.preventDefault();
+            firstElement.focus();
+        }
+    }
+
+    function scanElements(fromObserver: boolean) {
+        if (enabled === false) return;
+        const focusableElems: HTMLElement[] = Array.from(node.querySelectorAll(elementWhitelist));
+        if (focusableElems.length) {
+            // Set first/last focusable elements
+            firstElement = focusableElems[0];
+            lastElement = focusableElems[focusableElems.length - 1];
+            // Auto-focus first focusable element only when not called from mutation observer
+            if (!fromObserver) firstElement.focus();
+            // Listen for keydown on first & last element
+            firstElement.addEventListener('keydown', onFirstElemKeydown);
+            lastElement.addEventListener('keydown', onLastElemKeydown);
+        }
+    }
+    scanElements(false);
+
+    function cleanUp(): void {
+        if (firstElement) firstElement.removeEventListener('keydown', onFirstElemKeydown);
+        if (lastElement) lastElement.removeEventListener('keydown', onLastElemKeydown);
+    }
+
+    // Re-determine focusable elements when mutations are observed
+    const onObservationChange = (mutationRecords: MutationRecord[], observer: MutationObserver) => {
+        if (mutationRecords.length) {
+            cleanUp();
+            scanElements(true);
+        }
+        return observer;
+    };
+    const observer = new MutationObserver(onObservationChange);
+    observer.observe(node, { childList: true, subtree: true });
+
+    // Lifecycle
+    return {
+        update(newArgs: boolean) {
+            enabled = newArgs;
+            if (newArgs) scanElements(false);
+            else cleanUp();
+        },
+        destroy() {
+            cleanUp();
+            observer.disconnect();
+        }
+    };
+}

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

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

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

@@ -0,0 +1,43 @@
+import { tick } from 'svelte';
+
+/**
+ * Places the element in a diffrent place in the DOM
+ *
+ * **Use sparingy as it can make the DOM structure confusing**
+ */
+export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
+    let targetEl;
+    async function update(newTarget: HTMLElement | string) {
+        target = newTarget;
+        if (typeof target === 'string') {
+            targetEl = document.querySelector(target);
+            if (targetEl === null) {
+                await tick();
+                targetEl = document.querySelector(target);
+            }
+            if (targetEl === null) {
+                throw new Error(`No element found matching css selector: "${target}"`);
+            }
+        } else if (target instanceof HTMLElement) {
+            targetEl = target;
+        } else {
+            throw new TypeError(
+                `Unknown portal target type: ${
+                    target === null ? 'null' : typeof target
+                }. Allowed types: string (CSS selector) or HTMLElement.`
+            );
+        }
+        targetEl.appendChild(el);
+        el.hidden = false;
+    }
+
+    function destroy() {
+        if (el.parentNode) el.parentNode.removeChild(el);
+    }
+
+    update(target);
+    return {
+        update,
+        destroy
+    };
+}

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

@@ -0,0 +1,19 @@
+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/actions/shortcut.ts

@@ -0,0 +1,35 @@
+export const shortcut = (
+    node: HTMLElement,
+    params?: {
+        alt?: boolean;
+        shift?: boolean;
+        control?: boolean;
+        code: string;
+        callback: () => void;
+    }
+) => {
+    if (!params) return;
+    let handler: (e: KeyboardEvent) => void;
+    const removeHandler = () => window.removeEventListener('keydown', handler);
+    const setHandler = () => {
+        removeHandler();
+        handler = (e) => {
+            if (
+                !!params.alt != e.altKey ||
+                !!params.shift != e.shiftKey ||
+                !!params.control != (e.ctrlKey || e.metaKey) ||
+                params.code != e.code
+            )
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            params.callback();
+        };
+        window.addEventListener('keydown', handler);
+    };
+    setHandler();
+    return {
+        update: setHandler,
+        destroy: removeHandler
+    };
+};

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

@@ -0,0 +1,28 @@
+import type { Action } from 'svelte/action';
+
+export const onFirstVisible: Action<
+    HTMLElement,
+    {
+        callback: () => void;
+        options?: Partial<IntersectionObserverInit>;
+    }
+> = (node, input) => {
+    const observer = new IntersectionObserver(
+        (e) => {
+            if (!e[0].isIntersecting) {
+                return;
+            }
+
+            input.callback();
+        },
+        { root: null, threshold: 1, ...input.options }
+    );
+
+    observer.observe(node);
+
+    return {
+        destroy: () => {
+            observer.disconnect();
+        }
+    };
+};

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

@@ -0,0 +1,55 @@
+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/cookie.ts

@@ -0,0 +1,46 @@
+function getCookie(name: string) {
+    const cname = name + '=';
+    let decodedCookie: string;
+
+    try {
+        decodedCookie = decodeURIComponent(document.cookie);
+    } catch (error) {
+        return '';
+    }
+
+    const ca = decodedCookie.split(';');
+
+    for (let c of ca) {
+        while (c.startsWith(' ')) {
+            c = c.substring(1);
+        }
+        if (c.startsWith(cname)) {
+            return c.substring(cname.length);
+        }
+    }
+    return '';
+}
+
+interface CookieSetParams {
+    name: string;
+    value: string;
+    days?: number;
+}
+
+function setCookie(params: CookieSetParams): string {
+    const { name, value, days } = params;
+    let expires = '';
+    if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+        expires = '; expires=' + date.toUTCString();
+    }
+    const cookie = name + '=' + (value || '') + expires + '; path=/';
+    document.cookie = cookie;
+    return cookie;
+}
+
+export const cookie = {
+    get: getCookie,
+    set: setCookie
+};

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

@@ -0,0 +1,3 @@
+export { cookie } from './cookie';
+export { pseudoRandomId } from './pseudoRandomId';
+export { queryParams } from './queryParams';

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

@@ -0,0 +1,19 @@
+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/pseudoRandomId.ts

@@ -0,0 +1,4 @@
+export const pseudoRandomId = (prefix: string = '') =>
+    Math.random()
+        .toString(36)
+        .replace('0.', prefix || '');

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

@@ -0,0 +1,25 @@
+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');
+    });
+});

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

@@ -0,0 +1,15 @@
+export const queryParams = <T extends Record<string, string | number | undefined | null>>(
+    params: T
+): string => {
+    // create the string
+    let query = '?';
+    let isFirst = true;
+    for (const [key, value] of Object.entries(params)) {
+        if (value === undefined || value === null) continue;
+        if (!isFirst) query += '&';
+        query += `${key}=${value}`;
+        isFirst = false;
+    }
+
+    return isFirst ? '' : query;
+};