@ebrains/components 0.0.1-alpha.0

package/dist/collection/shared-ui/eds-header/eds-header.js

@@ -0,0 +1,286 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsHeader` is a header component designed for the EBRAINS platform.
+ * It provides a customizable and responsive navigation experience, tailored for both desktop and mobile views.
+ *
+ * Key Features:
+ * - **Logo Link**: Includes a logo that links to the homepage or a specified URL.
+ * - **Primary Navigation**: Displays an array of navigation links for core platform sections.
+ * - **User Authentication Integration**: Supports Keycloak for login and logout, displaying user authentication options when enabled.
+ * - **Mobile-Friendly Menu**: Offers a collapsible mobile menu with additional links, enhancing navigation for smaller screens.
+ * - **Event-Driven Menu Toggle**: Emits a toggle event to handle opening and closing of a fullscreen menu in sync with other components.
+ *
+ * This component is well-suited for creating a unified header across the platform with seamless integration of navigation, authentication, and responsive design elements.
+ */
+export class EdsHeader {
+    constructor() {
+        this.homeUrl = '/';
+        this.links = undefined;
+        this.inverseHeader = false;
+        this.userFeature = false;
+        this.menuEnabled = false;
+        this.keycloakUrl = undefined;
+        this.keycloakRealm = undefined;
+        this.keycloakClientId = undefined;
+        this.isMenuOpen = false;
+        this.isUserMenuOpen = false;
+        this.isAuthenticated = false;
+    }
+    onAuthStatusChanged(event) {
+        var _a;
+        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
+    }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        // Emit context for each eds-link element after the component is fully loaded
+        const links = this.hostEl.querySelectorAll('eds-link');
+        links.forEach((link) => {
+            this.emitContext(link);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param linkElement - The link element to which the event will be dispatched.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.hostEl.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    /** Emits an event to open or close the menu */
+    handleToggleMenu() {
+        this.toggleMenu.emit(!this.isMenuOpen);
+    }
+    /**
+     * Toggles the visibility of the user menu.
+     * Opens the user menu if closed, and closes it if open.
+     */
+    toggleUserMenu() {
+        this.isUserMenuOpen = !this.isUserMenuOpen;
+    }
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedLinks() {
+        if (typeof this.links === 'object') {
+            return this.links;
+        }
+        else if (typeof this.links === 'string') {
+            try {
+                return JSON.parse(this.links);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing links prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    render() {
+        return (h("header", { key: 'ada0f6cf611eb63a4963e9298ecdd45e0f1db9ad', class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: 'f45518003994b6d65d4adc96d8964c522ca1f0b1', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'e3cc9f3e073db38a589e07c2bcefa7b7a073f04e', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'adc24fa98544deb24e9f3a4617ffd2f88971ad13', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'e17167277f917f80dd5a692a974d7a0dac29e5cf', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '8bee016a6055fb4f7689aa5c0ce0a6666c1ce52b' }), this.userFeature ? (h("div", { class: "px-16" }, h("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId }))) : null, this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
+    }
+    static get is() { return "eds-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "homeUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the home logo link.\nThis is the default URL that the logo points to."
+                },
+                "attribute": "home-url",
+                "reflect": false,
+                "defaultValue": "'/'"
+            },
+            "links": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string representing the links for primary navigation.\nEach link should include `label`, `url`, and optionally an `icon`."
+                },
+                "attribute": "links",
+                "reflect": false
+            },
+            "inverseHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the header is rendered in inverse style.\nWhen true, the header applies styles suitable for a dark background."
+                },
+                "attribute": "inverse-header",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "userFeature": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to enable or disable user authentication features.\nWhen true, displays the authentication options in the header."
+                },
+                "attribute": "user-feature",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "menuEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to enable or disable header menu toggle feature.\nWhen true, displays the toggle in the header."
+                },
+                "attribute": "menu-enabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "keycloakUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL of the Keycloak server.\nRequired if `userFeature` is enabled."
+                },
+                "attribute": "keycloak-url",
+                "reflect": false
+            },
+            "keycloakRealm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Keycloak Realm for authentication.\nRequired if `userFeature` is enabled."
+                },
+                "attribute": "keycloak-realm",
+                "reflect": false
+            },
+            "keycloakClientId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Keycloak Client ID for the application.\nRequired if `userFeature` is enabled."
+                },
+                "attribute": "keycloak-client-id",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMenuOpen": {},
+            "isUserMenuOpen": {},
+            "isAuthenticated": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleMenu",
+                "name": "toggleMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to signal toggle menu action"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get listeners() {
+        return [{
+                "name": "authStatusChanged",
+                "method": "onAuthStatusChanged",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/shared-ui/eds-header/eds-header.stories.js

@@ -0,0 +1,70 @@
+export default {
+    title: 'Shared Ui/Header',
+    component: 'eds-header',
+    argTypes: {
+        homeUrl: {
+            control: 'text',
+            description: 'URL for the home logo link.'
+        },
+        links: {
+            control: 'text',
+            description: 'JSON string representing the primary navigation links, each containing `label`, `url`, and optionally `icon`.'
+        },
+        menuLinks: {
+            control: 'text',
+            description: 'JSON string representing extra menu links for small screens, each containing `label`, `url`.'
+        },
+        dashboardUrl: {
+            control: 'text',
+            description: 'URL for the dashboard page.'
+        },
+        inverseHeader: {
+            control: 'boolean',
+            description: 'Determines if the header is rendered in inverse style (dark background).'
+        },
+        userFeature: {
+            control: 'boolean',
+            description: 'Enables/disables user authentication features.'
+        },
+        keycloakUrl: {
+            control: 'text',
+            description: 'URL of the Keycloak server (required if `userFeature` is enabled).'
+        },
+        keycloakRealm: {
+            control: 'text',
+            description: 'The Keycloak Realm for authentication (required if `userFeature` is enabled).'
+        },
+        keycloakClientId: {
+            control: 'text',
+            description: 'The Keycloak Client ID for the application (required if `userFeature` is enabled).'
+        }
+    },
+    args: {
+        homeUrl: '/',
+        links: JSON.stringify([
+            { label: 'Home', url: '/', icon: '' },
+            { label: 'About', url: '/about' },
+            { label: 'Services', url: '/services' },
+            { label: 'Contact', url: '/contact' }
+        ]),
+        inverseHeader: false,
+        userFeature: false,
+        keycloakUrl: 'http://localhost:8080',
+        keycloakRealm: 'nigeor-realm',
+        keycloakClientId: 'stencil-app'
+    }
+};
+export const Default = (args) => `
+    <eds-toast-manager />
+    <eds-header
+      home-url="${args.homeUrl}"
+      links='${args.links}'
+      menu-links='${args.menuLinks}'
+      dashboard-url="${args.dashboardUrl}"
+      inverse-header="${args.inverseHeader}"
+      user-feature="${args.userFeature}"
+      keycloak-url="${args.keycloakUrl}"
+      keycloak-realm="${args.keycloakRealm}"
+      keycloak-client-id="${args.keycloakClientId}"
+    ></eds-header>
+  `;

package/dist/collection/shared-ui/eds-login/eds-login.js

@@ -0,0 +1,154 @@
+import { h } from "@stencil/core";
+import { initKeycloak, login, logout, isAuthenticated, getUser } from "../../utils/keycloak";
+/**
+ * `EdsLogin` is a login component that integrates Keycloak authentication,
+ * allowing users to log in and out and manage authentication states.
+ * This component is used to handle user login, logout, and authentication status display.
+ *
+ * This component is ideal for applications that require Keycloak-based authentication,
+ * providing a simple login/logout interface and managing user session states.
+ */
+export class EdsLogin {
+    constructor() {
+        // Method to handle user logout
+        this.handleLogout = () => {
+            logout();
+            this.authenticated = false; // Reset authentication state after logout
+        };
+        this.keycloakUrl = '';
+        this.keycloakRealm = '';
+        this.keycloakClientId = '';
+        this.authenticated = false;
+        this.user = null;
+    }
+    // Lifecycle method to check authentication status before the component loads
+    async componentWillLoad() {
+        await this.checkAuthentication();
+    }
+    // Method to initialize Keycloak and check if the user is authenticated
+    async checkAuthentication() {
+        try {
+            const keycloakConfig = {
+                url: this.keycloakUrl,
+                realm: this.keycloakRealm,
+                clientId: this.keycloakClientId
+            };
+            await initKeycloak(keycloakConfig);
+            // eslint-disable-next-line
+            // Set authentication state and fetch user data if authenticated
+            this.authenticated = isAuthenticated();
+            if (this.authenticated) {
+                this.user = getUser();
+            }
+            this.authStatusChanged.emit({
+                authenticated: this.authenticated,
+                user: this.user
+            }); // Emit auth status change
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Keycloak initialization or login check failed:', error);
+        }
+    }
+    // Method to handle user login
+    async handleLogin() {
+        try {
+            if (!this.authenticated) {
+                login(); // Start the Keycloak login process
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Login failed:', error);
+        }
+    }
+    getBtnLabel() {
+        return this.authenticated ? 'Logout' : 'Login';
+    }
+    render() {
+        return (h("div", { key: 'ef7e95a8390ac27ed55e41100dd1a0cb50e98ec4' }, h("eds-button", { key: '54969165777f2ac857fb43ef641307dd7e17043b', label: this.getBtnLabel(), intent: "primary", loading: false, disabled: false, pill: false, icon: "arrow-diagonal", size: "small", "icon-pos": "right", "aria-label": this.getBtnLabel(), "element-type": "button", triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) })));
+    }
+    static get is() { return "eds-login"; }
+    static get properties() {
+        return {
+            "keycloakUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL of the Keycloak server.\nThis is the base URL where your Keycloak instance is hosted,"
+                },
+                "attribute": "keycloak-url",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "keycloakRealm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Keycloak Realm.\nA realm in Keycloak is a space where you manage a set of users, roles,\ngroups, and credentials."
+                },
+                "attribute": "keycloak-realm",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "keycloakClientId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Keycloak Client ID.\nThe client ID represents the client application that Keycloak protects.\nIt's configured in the Keycloak admin console and used to identify the app\nrequesting authentication.\nExample: `my-client-app`"
+                },
+                "attribute": "keycloak-client-id",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "authenticated": {},
+            "user": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "authStatusChanged",
+                "name": "authStatusChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the authentication status changes.\nIt emits a boolean value indicating the new authentication status."
+                },
+                "complexType": {
+                    "original": "{ authenticated: boolean; user: any }",
+                    "resolved": "{ authenticated: boolean; user: any; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/shared-ui/eds-login/eds-login.stories.js

@@ -0,0 +1,37 @@
+export default {
+    title: 'Shared Ui/Login',
+    component: 'eds-login',
+    argTypes: {
+        keycloakUrl: {
+            control: 'text',
+            description: 'The URL of the Keycloak server where the instance is hosted'
+        },
+        keycloakRealm: {
+            control: 'text',
+            description: 'The Keycloak realm where users, roles, and credentials are managed'
+        },
+        keycloakClientId: {
+            control: 'text',
+            description: 'The client ID representing the app Keycloak is protecting'
+        }
+    },
+    args: {
+        keycloakUrl: 'http://localhost:8080',
+        keycloakRealm: 'nigeor-realm',
+        keycloakClientId: 'stencil-app'
+    },
+    parameters: {}
+};
+export const Default = {
+    render: (args) => `
+      <eds-login
+        keycloak-url="${args.keycloakUrl}"
+        keycloak-realm="${args.keycloakRealm}"
+        keycloak-client-id="${args.keycloakClientId}">
+      </eds-login>`,
+    args: {
+        keycloakUrl: 'http://localhost:8080',
+        keycloakRealm: 'nigeor-realm',
+        keycloakClientId: 'stencil-app'
+    }
+};

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.css

@@ -0,0 +1,105 @@
+.fixed {
+    position: fixed;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.bottom-0 {
+    bottom: 0rem;
+}
+
+.bottom-4 {
+    bottom: 0.25rem;
+}
+
+.p-4 {
+    padding: 0.25rem;
+}
+
+.p-6 {
+    padding: 0.375rem;
+}
+
+.p-8 {
+    padding: 0.5rem;
+}
+
+.z-10 {
+    z-index: 10;
+}
+
+.left-0 {
+    left: 0rem;
+}
+
+.left-1\/2 {
+    left: 50%;
+}
+
+.grow {
+    flex-grow: 1;
+}
+
+.-translate-x-1\/2 {
+    --tw-translate-x: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.flex {
+    display: flex;
+}
+
+.gap-12 {
+    gap: 0.75rem;
+}
+
+.gap-20 {
+    gap: 1.25rem;
+}
+
+.gap-4 {
+    gap: 0.25rem;
+}
+
+@media (min-width: 750px) {
+    .md\:left-1\/2 {
+      left: 50%;
+    }
+    .md\:flex {
+      display: flex;
+    }
+    .md\:hidden {
+      display: none;
+    }
+    .md\:-translate-x-1\/2 {
+      --tw-translate-x: -50%;
+      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    }
+    .md\:-translate-y-1\/2 {
+      --tw-translate-y: -50%;
+      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    }
+  }