@nordcode/ui 1.1.6 → 1.2.0

package/out/src/modules/notifications/js/notifications.js

@@ -0,0 +1,294 @@
+// @ts-check
+
+/**
+ * @typedef {T[keyof T]} valueOf<T>
+ * @template T
+ */
+
+/**
+ * @typedef SelectorType
+ * @property {string} notificationTemplate
+ * @property {string} notification
+ * @property {string} notificationTitle
+ * @property {string} notificationDescription
+ * @property {string} notificationTime
+ * @property {string} notificationButton
+ * @property {string} notificationCenterToggle
+ * @property {string} notificationCenterDismissAll
+ * @property {string} notificationCenter
+ * @property {string} notificationCenterContainer
+ * @property {string} notificationOutput
+ */
+
+/**
+ * @type {SelectorType}
+ */
+export const Selector = {
+    notificationTemplate: '#nc-notification',
+    notification: '.nc-notification',
+    notificationTitle: '.nc-notification-title',
+    notificationDescription: '.nc-notification-description',
+    notificationTime: '.nc-notification-time',
+
+    notificationButton: 'button[data-has-notification]',
+    notificationCenterToggle: 'button[data-toggle-notification-center]',
+    notificationCenterDismissAll: 'button[data-notifications-dismiss-all]',
+
+    notificationCenter: '.nc-notification-center',
+    notificationCenterContainer: '.nc-notification-center-container',
+    notificationOutput: '.nc-notification-output',
+};
+
+/** @type {Set<string>} */
+const notifications = new Set();
+
+/** @type {function(): HTMLTemplateElement | null} */
+const getNotificationTemplate = () => document.querySelector(Selector.notificationTemplate);
+
+/** @type {function(): HTMLElement | null} */
+const getNotificationCenter = () => document.querySelector(Selector.notificationCenter);
+
+/** @type {function(): NodeListOf<HTMLButtonElement>} */
+const getNotificationCenterToggle = () =>
+    document.querySelectorAll(Selector.notificationCenterToggle);
+
+/** @type {function(): HTMLOutputElement | null} */
+const getNotificationOutput = () => document.querySelector(Selector.notificationOutput);
+
+/** @type {function(): NodeListOf<HTMLButtonElement>} */
+const getNotificationCenterDismissAll = () =>
+    document.querySelectorAll(Selector.notificationCenterDismissAll);
+
+/** @type {function(): HTMLElement | null} */
+const getNotificationCenterContainer = () =>
+    document.querySelector(Selector.notificationCenterContainer);
+
+/**
+ * Create a unique id for a notification
+ * @param {string} title
+ * @return {`${string}-${number}`}
+ */
+const createNotificationId = (title) => {
+    return `${title}-${Date.now()}`;
+};
+
+/**
+ * Set the inner text of an element if it is defined
+ * @param {HTMLElement} notification
+ * @param {valueOf<SelectorType>} selector
+ * @param {string | undefined} text
+ */
+const setElementTextIfItExists = (notification, selector, text) => {
+    /** @type {HTMLElement | null} */
+    const element = notification.querySelector(selector);
+
+    if (!element) {
+        return;
+    }
+
+    element.textContent = text || '';
+};
+
+/**
+ * Remove all notifications
+ */
+const dismissAllNotifications = () => {
+    for (const notificationId of notifications) {
+        /** @type {HTMLElement | null} */
+        const notification = document.querySelector(`[data-notification-id="${notificationId}"]`);
+
+        if (!notification) {
+            return;
+        }
+
+        removeNotification(notificationId, notification);
+    }
+};
+
+/**
+ * Register all buttons
+ */
+const setupNotificationButtons = () => {
+    const htmlEl = document.documentElement;
+
+    htmlEl?.addEventListener('click', (e) => {
+        const el = e.target;
+        if (el.hasAttribute('data-has-notification')) {
+            const title = el.dataset.notificationTitle;
+            const description = el.dataset.notificationDescription;
+
+            if (!title) {
+                console.error('No title defined for notification');
+                return;
+            }
+            addNotification(title, description);
+        }
+    });
+
+    for (const button of getNotificationCenterDismissAll()) {
+        button.addEventListener('click', () => {
+            dismissAllNotifications();
+        });
+    }
+
+    for (const button of getNotificationCenterToggle()) {
+        button.addEventListener('click', () => {
+            getNotificationCenter()?.classList.toggle('-open');
+        });
+    }
+};
+
+/**
+ * Hide the notification center
+ */
+const closeNavigationCenter = () => {
+    getNotificationCenter()?.classList?.remove('-open');
+};
+
+/**
+ * Create a new notification from the template and set the necessary data and event listeners
+ * @param {string} title
+ * @param {string | undefined} description
+ * @param {string} notificationId
+ * @return {HTMLElement | null} The notification element
+ */
+const createNotification = (title, description, notificationId) => {
+    const notificationTemplate = getNotificationTemplate();
+
+    if (!notificationTemplate) {
+        console.error('Could not find notification template', Selector.notificationTemplate);
+        return null;
+    }
+
+    const clonedTemplate = notificationTemplate.content.cloneNode(true);
+    /** @type {HTMLElement | null} */
+    const notificationElement = /** @type {HTMLTemplateElement} */ (clonedTemplate).querySelector(
+        Selector.notification,
+    );
+    if (!notificationElement) {
+        console.error('Could not find notification element');
+        return null;
+    }
+
+    /** @type {HTMLButtonElement | null} */
+    const notificationClose = notificationElement.querySelector('button');
+
+    notificationElement.dataset.notificationId = notificationId;
+    setElementTextIfItExists(notificationElement, Selector.notificationTitle, title);
+    setElementTextIfItExists(notificationElement, Selector.notificationDescription, description);
+    setElementTextIfItExists(
+        notificationElement,
+        Selector.notificationTime,
+        new Date().toLocaleTimeString(),
+    );
+
+    notificationClose?.addEventListener(
+        'click',
+        (e) => {
+            closeCorrespondingNotification(e);
+        },
+        { once: true },
+    );
+
+    return notificationElement;
+};
+
+/**
+ * Handle the creation of the necessary DOM elements and add them to the DOM
+ * @param {string} title
+ * @param {string | undefined} description
+ */
+export const addNotification = (title, description) => {
+    const notificationId = createNotificationId(title);
+    const liveNotification = createNotification(title, description, notificationId);
+    const notificationOutput = getNotificationOutput();
+
+    if (!liveNotification || !notificationOutput) {
+        return;
+    }
+
+    notificationOutput.append(liveNotification);
+    notifications.add(notificationId);
+
+    setTimeout(() => {
+        /** @type {HTMLElement | null} */
+        const notification = notificationOutput.querySelector(
+            `[data-notification-id="${notificationId}"]`,
+        );
+
+        if (!notification) {
+            return;
+        }
+
+        removeNotification(notificationId, notification, false);
+        const archiveNotification = createNotification(title, description, notificationId);
+        const notificationCenterContainer = getNotificationCenterContainer();
+        if (!archiveNotification || !notificationCenterContainer) {
+            return;
+        }
+        notificationCenterContainer.append(archiveNotification);
+    }, 4000);
+};
+
+/**
+ * Close the notification that is associated with the button that was clicked
+ * @param {MouseEvent} e
+ */
+const closeCorrespondingNotification = (e) => {
+    /** @type {HTMLElement | null} */
+    const notification = /** @type {HTMLButtonElement} */ (e.target).closest(Selector.notification);
+
+    const notificationId = notification?.dataset?.notificationId;
+    if (!notificationId) {
+        return;
+    }
+    removeAllNotificationsWithId(notificationId);
+};
+
+/**
+ * Remove a notification from the DOM after playing the closing animation
+ *
+ * @param {string} notificationId
+ * @param {HTMLElement | null} notification
+ * @param {boolean} removeId
+ */
+const removeNotification = (notificationId, notification, removeId = true) => {
+    if (!notification) {
+        return;
+    }
+
+    notification.addEventListener(
+        'animationend',
+        () => {
+            notification.remove();
+
+            if (removeId) {
+                notifications.delete(notificationId);
+            }
+
+            if (notifications.size === 0) {
+                closeNavigationCenter();
+            }
+        },
+        { once: true },
+    );
+
+    notification.classList.add('-closing');
+};
+
+/**
+ * Remove all notifications with the same id. This is used to remove the live notification and the archived notification
+ * @param {string} notificationId
+ */
+const removeAllNotificationsWithId = (notificationId) => {
+    /** @type {NodeListOf<HTMLElement>} */
+    const relatedNotifications = document.querySelectorAll(
+        `[data-notification-id="${notificationId}"]`,
+    );
+
+    for (const n of relatedNotifications) {
+        removeNotification(notificationId, n);
+    }
+};
+
+setupNotificationButtons();

package/out/src/modules/notifications/svelte/NotificationCenter.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+interface NotificationCenterProps {
+    dismissAllText: string;
+    closeText: string;
+}
+
+let { dismissAllText = 'Dismiss all', closeText = 'Close' }: NotificationCenterProps = $props();
+</script>
+
+<div class="nc-notification-center -archive">
+    <div class="nc-notification-center-header">
+        <button data-notifications-dismiss-all class="nc-button">{dismissAllText}</button>
+        <button data-toggle-notification-center class="nc-button">{closeText}</button>
+    </div>
+    <div class="nc-notification-center-container"></div>
+</div>
+
+<output class="nc-notification-output"></output>

package/out/src/modules/notifications/svelte/NotificationTemplate.svelte

@@ -0,0 +1,16 @@
+<script>
+
+</script>
+
+
+<template id="nc-notification">
+    <div class="nc-notification">
+        <p class="nc-notification-title"></p>
+        <p class="nc-notification-description">Some notification</p>
+        <div class="nc-notification-footer">
+            <button class="nc-button -small">Dismiss</button>
+
+            <time class="nc-notification-time"></time>
+        </div>
+    </div>
+</template>

package/out/src/modules/sectionObserver/ts/sectionOberserver.ts

@@ -0,0 +1,34 @@
+const buildThresholds = (steps: number) => {
+    const thresholds = [0];
+    for (let i = 1.0; i <= steps; i++) {
+        const ratio = i / steps;
+        thresholds.push(ratio);
+    }
+    return thresholds;
+};
+
+const createObserver = (selector: string, steps: number) => {
+    // if the browser does not support the IntersectionObserver API, return
+    if (!('IntersectionObserver' in window)) {
+        return;
+    }
+
+    const options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: buildThresholds(steps),
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            const ratio = entry.intersectionRatio;
+            (entry.target as HTMLElement)?.style?.setProperty('--intersecting', ratio.toString());
+        }
+    }, options);
+
+    for (const node of Array.from(document.querySelectorAll(selector))) {
+        observer.observe(node);
+    }
+};
+
+export { createObserver };

package/out/src/styles/bundle.css

@@ -0,0 +1,7 @@
+@layer config, theme, reset, base, utils, components, helpers;
+
+@import "./config/bundle.css";
+@import "./theme/colors.css";
+
+@import "./utils/bundle.css";
+@import "./exceptions/bundle.css";

package/out/src/styles/bundle_configless.css

@@ -0,0 +1,5 @@
+@layer config, theme, reset, base, utils, components, helpers;
+
+@import "./theme/colors.css";
+@import "./utils/bundle.css";
+@import "./exceptions/bundle.css";

package/out/src/styles/complete.css

@@ -0,0 +1,5 @@
+@layer config, theme, reset, base, utils, components, helpers;
+
+@import "./bundle.css";
+
+@import "./components/bundle.css";

package/out/src/styles/complete_configless.css

@@ -0,0 +1,5 @@
+@layer config, theme, reset, base, utils, components, helpers;
+
+@import "./bundle_configless.css";
+
+@import "./components/bundle.css";

package/out/src/styles/components/alerts.css

@@ -0,0 +1,20 @@
+@layer components.alerts {
+    :where(.nc-alert) {
+        background: var(--surface);
+        color: var(--text);
+        gap: 1ch;
+    }
+
+    :where(.nc-alert)>.nc-icon {
+        margin-block: calc((var(--line-height-base) - var(--icon-size)) / 2);
+    }
+
+    :where(.nc-alert-title) {
+        font-weight: var(--font-weight-heading);
+    }
+
+    :where(.nc-alert.-filled) {
+        background: var(--surface-hover);
+        color: var(--text-hover);
+    }
+}

package/out/src/styles/components/badges.css

@@ -0,0 +1,14 @@
+@layer components.badge {
+    :where(.badge) {
+        font-family: var(--font-family-mono);
+        letter-spacing: var(--tracking-tight);
+        font-weight: var(--font-weight-default);
+        color: var(--text, var(--color-text-base));
+        border: var(--border-width-thin) solid var(--text, var(--color-text-base));
+        border-radius: var(--border-radius-small);
+        background: var(--surface, transparent);
+        padding: 0.5lh 1ch;
+        inline-size: max-content;
+        line-height: 1;
+    }
+}

package/out/src/styles/components/breadcrumbs.css

@@ -0,0 +1,37 @@
+@layer components.breadcrumbs {
+    :where(.nc-breadcrumbs) {
+        inline-size: max-content;
+        max-inline-size: 100%;
+        background-color: var(--nc-breadcrumbs-surface, transparent);
+        color: var(--nc-breadcrumbs-text, --color-text-muted);
+    }
+
+    :where(.nc-breadcrumb-item) {
+        color: inherit;
+
+        &:last-child {
+            color: var(--color-brand-primary-base);
+        }
+
+        &:not(:last-child):after {
+            padding-inline: 1ch;
+            color: inherit;
+            content: "›";
+            font-size: inherit;
+        }
+    }
+
+    :where(.nc-breadcrumb-link) {
+        text-decoration: none;
+        color: inherit;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &[aria-current="page"] {
+            pointer-events: none;
+            color: var(--nc-breadcrumbs-text-active, --color-text-base);
+        }
+    }
+}

package/out/src/styles/components/bundle.css

@@ -0,0 +1,13 @@
+@import "./alerts.css";
+@import "./badges.css";
+@import "./breadcrumbs.css";
+@import "./buttons.css";
+@import "./card.css";
+@import "./dialogs.css";
+@import "./forms.css";
+@import "./gallery.css";
+@import "./icons.css";
+@import "./inputs/bundle.css";
+@import "./lists.css";
+@import "./notifications.css";
+@import "./tables.css";