@ims360/svelte-ivory 0.0.2

package/src/lib/components/layout/modal/Modal.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+    import { X } from '@lucide/svelte';
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import Heading from '../heading/Heading.svelte';
+    import HiddenBackground from '../hiddenBackground/HiddenBackground.svelte';
+
+    /** Props for the modal, expose if you overwrite the defaults in a custom component */
+    export interface ModalProps {
+        /** Class of the modal itself, does not apply to the inner div */
+        class?: ClassValue;
+        /** Class of the div wrapping the children */
+        innerClass?: ClassValue;
+        /** If `true`, the modal will be open */
+        b_open: boolean;
+        /** Content of the modal */
+        children?: Snippet;
+        /** Style applied to the */
+        style?: string;
+        /** If `true` the modal will not close when clicking outside of it */
+        preventClosing?: boolean;
+        /** Variant of the modal, applies styling to the header */
+        variant?: ModalVariant;
+        title?: string;
+    }
+
+    export type ModalVariant = 'success' | 'warning' | 'error' | 'info';
+</script>
+
+<script lang="ts">
+    interface Props extends ModalProps {
+        /** If you don't want the title and close button to be included you can overwrite the default modal */
+        modal?: Snippet;
+        testId?: string;
+    }
+
+    let {
+        class: clazz = 'flex ',
+        style,
+        title,
+        b_open = $bindable(),
+        children,
+        modal,
+        preventClosing = false,
+        variant,
+        innerClass,
+        testId
+    }: Props = $props();
+
+    function close() {
+        if (preventClosing) return;
+        b_open = false;
+    }
+</script>
+
+<!-- 
+	@component
+	A modal, comes with a title, close button and different variants per default.
+-->
+{#if b_open}
+    <HiddenBackground
+        onclose={close}
+        class="flex h-full w-full flex-col items-center justify-start p-16"
+    >
+        {#if modal}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <div class={clazz} onclick={(e) => e.stopPropagation()} data-testid={testId} {style}>
+                {@render modal()}
+            </div>
+        {:else}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+                class={twMerge(
+                    clsx([
+                        'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
+                        clazz
+                    ])
+                )}
+                {style}
+                onclick={(e) => e.stopPropagation()}
+                data-testid={testId}
+            >
+                <div
+                    class={[
+                        'flex flex-row items-center justify-between gap-4 px-4 py-3',
+                        // !variant && 'pt-3',
+                        variant === 'success' && 'preset-tonal-success',
+                        variant === 'warning' && 'preset-tonal-warning',
+                        variant === 'error' && 'preset-tonal-error',
+                        variant === 'info' && 'preset-tonal-primary'
+                    ]}
+                >
+                    {#if title}
+                        <Heading>{title}</Heading>
+                    {/if}
+                    <button class="group ml-auto flex justify-end" type="button" onclick={close}>
+                        <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
+                    </button>
+                </div>
+                <div
+                    class={twMerge(
+                        clsx('flex flex-col gap-4 overflow-hidden bg-inherit p-4 pt-2', innerClass)
+                    )}
+                >
+                    {@render children?.()}
+                </div>
+            </div>
+        {/if}
+    </HiddenBackground>
+{/if}

package/src/lib/components/layout/modal/ModalTest.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import Modal from './Modal.svelte';
+
+    interface Props {
+        open: boolean;
+        testId: string;
+        children: Snippet;
+    }
+
+    let { open, ...props }: Props = $props();
+
+    let b_open = $state(open);
+</script>
+
+<Modal bind:b_open {...props} />

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

@@ -0,0 +1,39 @@
+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/popover/Popover.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" module>
+    import { browser } from '$app/environment';
+    import {
+        autoPlacement,
+        autoUpdate,
+        computePosition,
+        flip,
+        shift,
+        type ComputePositionConfig
+    } from '@floating-ui/dom';
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import { clickOutside } from '../../../utils/actions/clickOutside';
+
+    /** Possible placements for the popover */
+    export type PopoverPlacement = ComputePositionConfig['placement'];
+</script>
+
+<script lang="ts">
+    type Props = {
+        class?: ClassValue;
+        /** Whether the popover is open or not */
+        b_open: boolean;
+        style?: string;
+        /** The element the popover will be positioned relative to */
+        target: Element | undefined;
+        /**
+         * Where the popover should be positioned relative to the target.
+         *
+         * default: `bottom-start`
+         */
+        placement?: PopoverPlacement;
+        /**
+         * Callback that is called when the user clicks outside the popover or the target element.
+         */
+        onClickOutside?: (e: MouseEvent) => void;
+        /** If set to `true`, the nested component will not be unmounted when the popover is closed */
+        keepMounted?: boolean;
+        children: Snippet;
+        /**
+         * Whether to place the popover automatically
+         *
+         * [Further reading](https://floating-ui.com/docs/autoPlacement)
+         */
+        autoplacement?: boolean;
+    };
+
+    let {
+        class: clazz,
+        b_open = $bindable(false),
+        style: externalStyle,
+        target,
+        placement = 'bottom-start',
+        onClickOutside = () => {
+            b_open = false;
+        },
+        keepMounted = false,
+        children,
+        autoplacement
+    }: Props = $props();
+
+    let style: string = $state('');
+    let popover: HTMLDivElement | undefined = $state();
+
+    const postion = async (open: boolean) => {
+        if (!open || !popover || !browser || !target) return;
+        const { x, y } = await computePosition(target, popover, {
+            middleware: [shift(), ...(autoplacement ? [autoPlacement()] : [flip()])],
+            placement
+        });
+        style = `top: ${y}px; left: ${x}px;`;
+    };
+
+    let cleanup: () => void = () => {};
+    $effect(() => {
+        if (browser && popover && target)
+            if (b_open) {
+                cleanup = autoUpdate(target, popover, () => postion(b_open));
+            } else {
+                cleanup();
+            }
+    });
+
+    // TODO: this is kinda hacky
+    $effect(() => {
+        [popover, target];
+        postion(b_open);
+    });
+</script>
+
+<!-- 
+    @component
+    A popover, positions itself relative to a target element.
+-->
+{#if b_open || keepMounted}
+    <div
+        class={twMerge(
+            clsx('absolute z-30', !keepMounted && clazz, keepMounted && !b_open ? 'hidden' : clazz)
+        )}
+        style={style + ' ' + externalStyle}
+        bind:this={popover}
+        use:clickOutside={{ callback: onClickOutside, target }}
+    >
+        {@render children()}
+    </div>
+{/if}

package/src/lib/components/layout/portal/Portal.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { portal } from '../../../utils/actions/index';
+
+    interface Props {
+        children: Snippet;
+        target?: string | HTMLElement;
+    }
+
+    let { children, target = 'body' }: Props = $props();
+</script>
+
+<!-- 
+    @component
+    A portal, renders its children in a different DOM element.
+
+    Wrapps the `use:portal` action.
+
+    **Use sparingy as it can make the DOM structure confusing**
+-->
+<div use:portal={target} hidden>
+    {@render children()}
+</div>

package/src/lib/components/layout/tabs/Tab.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { pseudoRandomId } from '$lib/utils/functions/index';
+    import clsx from 'clsx';
+    import { onMount, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import { getTabContext } from './Tabs.svelte';
+
+    type Props = {
+        class?: (selected: boolean) => ClassValue;
+        id?: string | undefined;
+        /**
+         * If this is set the element will be a link.
+         *
+         * This is useful if your tabs are in a `+layout.svelte` and the Panels are seperate pages.
+         */
+        href?: string | undefined;
+        children: Snippet<[{ selected: boolean }]>;
+        testId?: string;
+        /** If `href` is set, this can be used to highlight an active tab */
+        active?: boolean;
+    };
+
+    let {
+        class: clazz = (selected: boolean) => [selected && 'text-primary-500 underline'],
+        id,
+        href,
+        children,
+        testId,
+        active
+    }: Props = $props();
+
+    const tab = pseudoRandomId('tab-');
+    const tabs = getTabContext();
+
+    const tabId = id || tab;
+
+    const selected = $derived.by(() => {
+        if (typeof active === 'boolean') {
+            return active;
+        } else if (href) {
+            return page.url.pathname.startsWith(href);
+        } else if (tabs && tabs.selectedTab === tabId) {
+            return true;
+        } else {
+            return false;
+        }
+    });
+
+    onMount(() => {
+        if (href) return;
+        tabs.registerTab(tabId);
+    });
+</script>
+
+<svelte:element
+    this={href ? 'a' : 'button'}
+    class={twMerge(
+        clsx(
+            'btn flex h-fit w-fit items-center justify-center px-0 text-xl font-bold',
+            clazz(selected)
+        )
+    )}
+    onclick={href
+        ? undefined
+        : () => {
+              tabs.selectedTab = tabId;
+          }}
+    type={href ? undefined : 'button'}
+    {href}
+    data-testid={testId}
+    role="tab"
+    tabindex="0"
+    aria-selected={selected}
+>
+    {@render children({
+        selected
+    })}
+</svelte:element>

package/src/lib/components/layout/tabs/TabPanel.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { pseudoRandomId } from '$lib/utils/functions/index';
+    import { type Snippet } from 'svelte';
+    import { getTabContext } from './Tabs.svelte';
+
+    type Props = {
+        keepMounted?: boolean;
+        children: Snippet<[{ visible: boolean }]>;
+    };
+
+    let { keepMounted = false, children }: Props = $props();
+
+    const panel = pseudoRandomId('tab-panel-');
+    const tabs = getTabContext();
+
+    tabs.registerPanel(panel);
+</script>
+
+{#if keepMounted}
+    {@render children({ visible: tabs.selectedPanel === panel })}
+{:else if tabs.selectedPanel === panel}
+    {@render children({ visible: true })}
+{/if}

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

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+    import { getContext, onDestroy, setContext, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+
+    interface TabContext {
+        registerTab: (tab: string) => void;
+        registerPanel: (panel: string) => void;
+        selectedTab: string | undefined;
+        tabs: string[];
+        selectedPanel: string | undefined;
+    }
+    const TABS = {};
+
+    function setTabContext(context: TabContext) {
+        setContext<TabContext>(TABS, context);
+    }
+
+    export function getTabContext() {
+        return getContext<TabContext>(TABS);
+    }
+</script>
+
+<script lang="ts">
+    type Props = {
+        class?: ClassValue;
+        children: Snippet;
+        b_index?: number;
+    };
+
+    let { class: clazz = '', children, b_index = $bindable(0) }: Props = $props();
+
+    let allTabs: string[] = $state([]);
+    let panels: string[] = $state([]);
+
+    export const forward = () => {
+        if (b_index >= panels.length - 1) {
+            b_index = 0;
+        } else {
+            b_index++;
+        }
+    };
+
+    export const back = () => {
+        if (b_index === 0) {
+            b_index = panels.length - 1;
+        } else {
+            b_index--;
+        }
+    };
+
+    setTabContext({
+        registerTab: (tab: string) => {
+            allTabs.push(tab);
+            onDestroy(() => {
+                const i = allTabs.indexOf(tab);
+                allTabs.splice(i, 1);
+            });
+        },
+
+        registerPanel: (panel: string) => {
+            panels.push(panel);
+            b_index = b_index;
+            onDestroy(() => {
+                panels.filter((p) => p !== panel);
+            });
+        },
+
+        get selectedTab() {
+            return allTabs[b_index];
+        },
+        set selectedTab(tab: string) {
+            b_index = allTabs.indexOf(tab);
+        },
+        get selectedPanel() {
+            return panels[b_index];
+        },
+        set selectedPanel(panel: string) {
+            b_index = panels.indexOf(panel);
+        },
+        tabs: allTabs
+    });
+</script>
+
+<div class={[clazz]}>
+    {@render children()}
+</div>

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

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

package/src/lib/components/layout/tabs/index.ts

@@ -0,0 +1,10 @@
+import Tab from './Tab.svelte';
+import TabPanel from './TabPanel.svelte';
+import { default as TabsComponent } from './Tabs.svelte';
+
+const Tabs = Object.assign(TabsComponent, {
+    Tab: Tab,
+    Panel: TabPanel
+});
+
+export default Tabs;

package/src/lib/components/layout/tooltip/Tooltip.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
+    import Portal from '../portal/Portal.svelte';
+
+    export interface Props {
+        children?: Snippet;
+        /** The content of the tooltip */
+        tooltip: string | Snippet;
+        /** The class of the element that triggers the tooltip */
+        class?: ClassValue;
+        /** The class of the tooltip itself */
+        tooltipClass?: ClassValue;
+        style?: string;
+        onclick?: (e: Event) => void;
+        /** If the href is set, the resulting element will be a link to the href */
+        href?: string;
+        /**
+         * The delay before the tooltip is shown in ms.
+         *
+         * default: `500`
+         */
+        timeout?: number;
+        /**
+         * Where the tooltip should be placed
+         *
+         * default: `top`
+         */
+        placement?: PopoverPlacement;
+    }
+</script>
+
+<script lang="ts">
+    let {
+        children,
+        tooltip,
+        class: clazz,
+        style,
+        onclick,
+        href,
+        timeout = 500,
+        tooltipClass
+    }: Props = $props();
+
+    let target = $state<HTMLElement>();
+
+    let open = $state(false);
+
+    let showTimeout: number;
+    function onpointerenter() {
+        clearTimeout(timeout);
+        if (timeout === 0) {
+            open = true;
+        } else {
+            showTimeout = setTimeout(() => {
+                open = true;
+            }, timeout) as unknown as number;
+        }
+    }
+
+    function onpointerleave() {
+        clearTimeout(timeout);
+        open = false;
+    }
+</script>
+
+<!-- 
+    @component
+    Shows additional information when hovering over an element.
+-->
+
+<!-- Ignoring this error is fine since it's a false positive -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+    this={href ? 'a' : onclick ? 'button' : 'div'}
+    {href}
+    type={onclick ? 'button' : undefined}
+    class={clazz}
+    bind:this={target}
+    {onpointerenter}
+    {onpointerleave}
+    {style}
+    {onclick}
+>
+    {@render children?.()}
+</svelte:element>
+
+{#if open}
+    <Portal>
+        <Popover
+            bind:b_open={open}
+            {target}
+            placement="top"
+            class={twMerge(
+                clsx(
+                    'bg-surface-100-800-token max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
+                    tooltipClass
+                )
+            )}
+        >
+            {#if typeof tooltip === 'string'}
+                {tooltip}
+            {:else}
+                {@render tooltip()}
+            {/if}
+        </Popover>
+    </Portal>
+{/if}