@ebrains/components 0.2.0-alpha.0 → 0.4.0-alpha.0

package/dist/collection/components/eds-code-block/eds-code-block.js

@@ -5,18 +5,72 @@ import "prismjs/components/prism-bash"; // Add support for Bash/Shell
 import "prismjs/components/prism-yaml"; // Add YAML support
 //import 'prismjs/components/prism-html';
 import "prismjs/components/prism-css";
+//import { sendAnalytics } from '@ebrains/utils';
+/**
+ * A component that displays a code block with syntax highlighting.
+ *
+ * Uses Prism.js for syntax highlighting. Supports multiple languages such as JavaScript, HTML, CSS,
+ * Python, Bash/Shell, and YAML.
+ *
+ * */
 export class EdsCodeBlock {
     constructor() {
         this.code = undefined;
         this.language = undefined;
         this.copied = false;
     }
+    /**
+     * Copies the current code content to the clipboard and sets a temporary copied state.
+     *
+     * @private
+     * @returns {void}
+     */
     copyToClipboard() {
         navigator.clipboard.writeText(this.code).then(() => {
             this.copied = true;
+            /*const analyticsName = this.createHumanFriendlyAnalyticsName(this.code, this.language);
+            sendAnalytics({
+              category: 'ui-component',
+              parentContext: null,
+              tag: this.el.tagName.toLowerCase(),
+              name: analyticsName || '',
+              action: 'copy'
+            });*/
             setTimeout(() => (this.copied = false), 2000);
         });
     }
+    /**
+     * Utility function that creates a human-friendly analytics name based on the code and language.
+     * It uses:
+     *  - The language (in uppercase)
+     *  - The number of non-empty lines in the code
+     *  - The first non-empty line of code (truncated to 30 characters, if needed)
+     *
+     * returns A descriptive analytics name.
+     */
+    /*private createHumanFriendlyAnalyticsName(code: string, language: string): string {
+      // Count non-empty lines
+      const lines = code.split('\n').filter(line => line.trim() !== '').length;
+      
+      // Find the first non-empty line and trim it
+      let firstNonEmptyLine = code.split('\n').find(line => line.trim() !== '');
+      firstNonEmptyLine = firstNonEmptyLine ? firstNonEmptyLine.trim() : '';
+  
+      // Truncate the snippet if it’s too long
+      if (firstNonEmptyLine.length > 30) {
+        firstNonEmptyLine = firstNonEmptyLine.substring(0, 30) + '...';
+      }
+  
+      return `CodeBlock:${language.toLowerCase()}|${lines}-line(s)|${firstNonEmptyLine.toLowerCase()}`;
+    }*/
+    /**
+     * Returns the syntax-highlighted HTML for the code.
+     * If the provided language is supported by Prism, this method returns the highlighted code.
+     * Otherwise, it logs a warning and returns the raw code.
+     *
+     * @private
+     * @returns {string} The highlighted HTML string for the code block.
+     */
     getHighlightedCode() {
         if (this.language && Prism.languages[this.language]) {
             return Prism.highlight(this.code, Prism.languages[this.language], this.language);
@@ -26,7 +80,7 @@ export class EdsCodeBlock {
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (h("div", { key: 'a99c0c8b9546b80bb3f9e21cd53c29540e8b6e06', class: "relative bg-stronger rounded-sm" }, h("div", { key: '5856f9d30bb52f791e0d8bb03a6438bc01247f66', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: 'dfb0f69dbbd1032ace5afb7fe98d899816f36610', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: 'b399384638265f9fcc9a824c47fe73c75bcade33', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '47c2d00b2cf86b99522dbc438726e0fc57fb6a44', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '038321e9d3d2a38963857ab8b719653f3e8385e3', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '72be161dd9781d9bc2f4d9495969175f34c19249', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: '00eba9265ee17605f699d1e5606013b68e900b29', class: "relative bg-stronger rounded-sm" }, h("div", { key: '1192584f04de5ff74e91c88597a3360b92053456', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '3666b6529a16a8cc64f448527db4ddee08f977a3', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: 'f222d95a2e548429f6c4de96a7646e3cef1f360f', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '8c539deda773909c01a41eb04ee51380c0a9c4bb', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '99541dedb32c543da5e780ffee4460333fbb3724', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '4e6ae6fcfae3de8c1fe5ad9d22309e0c8bee0c2c', innerHTML: this.getHighlightedCode() })))));
     }
     static get is() { return "eds-code-block"; }
     static get encapsulation() { return "shadow"; }
@@ -54,7 +108,7 @@ export class EdsCodeBlock {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The code content to display"
+                    "text": "The code content to display."
                 },
                 "attribute": "code",
                 "reflect": false
@@ -83,4 +137,5 @@ export class EdsCodeBlock {
             "copied": {}
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/eds-code-block/eds-code-block.stories.js

@@ -0,0 +1,78 @@
+export default {
+    title: 'Components/CodeBlock',
+    component: 'eds-code-block',
+    argTypes: {
+        code: {
+            control: 'text',
+            description: 'The code content to display in the code block.'
+        },
+        language: {
+            control: 'text',
+            description: 'The language type for syntax highlighting (e.g., "javascript", "python", "bash", "yaml").'
+        }
+    },
+    args: {
+        code: "const greeting = 'Hello, world!';\nconsole.log(greeting);",
+        language: 'javascript'
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: "const greeting = 'Hello, world!';\nconsole.log(greeting);",
+        language: 'javascript'
+    }
+};
+export const PythonExample = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: "def hello_world():\n    print('Hello, world!')",
+        language: 'python'
+    }
+};
+export const BashExample = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: '#!/bin/bash\necho "Hello, world!"',
+        language: 'bash'
+    }
+};
+export const YamlExample = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: 'greeting: "Hello, world!"',
+        language: 'yaml'
+    }
+};
+export const UnsupportedLanguage = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: 'This is a code block with an unsupported language. It will render without syntax highlighting.',
+        language: 'unknown'
+    }
+};

package/dist/collection/components/eds-dropdown/eds-dropdown.js

@@ -1,3 +1,4 @@
+import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
 import { h } from "@stencil/core";
 /**
  * `EdsDropdown` is a versatile dropdown component that provides a list of items
@@ -19,6 +20,7 @@ export class EdsDropdown {
          * Toggles the visibility of the dropdown and manages focus.
          */
         this.handleClick = () => {
+            var _a;
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
                 this.focusIndex = 0;
@@ -27,6 +29,13 @@ export class EdsDropdown {
             else {
                 this.closeDropdown();
             }
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.host.tagName.toLowerCase(),
+                name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+                action: this.isOpen ? 'expanded' : 'collapsed'
+            });
         };
         this.icon = 'chevron-down';
         this.label = undefined;
@@ -93,39 +102,20 @@ export class EdsDropdown {
     componentDidLoad() {
         var _a;
         this.focusableItems = Array.from(((_a = this.dropdownContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button')) || []);
-        const btns = this.host.shadowRoot.querySelectorAll('eds-button');
-        btns.forEach((btn) => {
-            this.emitContext(btn);
-        });
-    }
-    /**
-     * Emits a custom event called `parentContext` for a given button element.
-     * Provides context information about the dropdown component.
-     *
-     * @param linkElement - The button element to which the event will be dispatched.
-     */
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.host.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
     }
     /**
      * Renders the dropdown component and displays its content when open.
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: 'd49e23ee208cfb000baba83795899487e4d94af7', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '6647007c34b47558873e470890893ae4f8e18b5c', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: '41bbd4e2bf02345393aaa97101b2c3aca2fa4085', class: {
+        return (h("div", { key: '809cb733330db434f94f854ed4d1ee375f598297', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'c80f2930b335708a2a01d06b565673597bd8d926', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: '7b3ccb2ab29474a4795d5491960e0713aefcd624', class: {
                 'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
                 'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
                 'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
                 'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
                 'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
                 'rounded-lg': this.rounded
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '714bad9f5a8ddf6d5ea246044a83b0a5102494c4' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'c514c5dca893708fd1660a61cfeb1607229bbff5' }))));
     }
     static get is() { return "eds-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-form/eds-form.js

@@ -125,7 +125,6 @@ export class EdsForm {
                 this.formSubmitting.emit(this.isSubmitting);
             }
         };
-        this.smallAlert = false;
         this.setFormUrl = true;
         this.submitBtn = true;
         this.submitBtnLabel = 'Submit';
@@ -134,7 +133,7 @@ export class EdsForm {
         this.submitBtnHintMessage = 'To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.';
         this.endpoint = undefined;
         this.name = 'form';
-        this.fields = undefined;
+        this.fields = [];
         this.values = {};
         this.coupleAuth = false;
         this.formSubmitted = false;
@@ -144,6 +143,7 @@ export class EdsForm {
         this.alertMessage = null;
         this.isAuthenticated = false;
         this.authUser = undefined;
+        this.parsedFields = [];
     }
     onAuthStatusChanged(event) {
         var _a;
@@ -151,6 +151,7 @@ export class EdsForm {
         this.authUser = event.detail.user;
     }
     componentDidLoad() {
+        this.parseFields(this.fields);
         // Emit context for each eds-link element after the component is fully loaded
         const links = this.el.querySelectorAll('eds-button');
         links.forEach((link) => {
@@ -223,7 +224,7 @@ export class EdsForm {
     validateForm() {
         this.errors = {};
         this.hasError = false;
-        this.parseFields.forEach((field) => {
+        this.parsedFields.forEach((field) => {
             if (field.type !== 'hidden') {
                 if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
                     // Single checkbox validation
@@ -305,19 +306,38 @@ export class EdsForm {
         });
         return formData;
     }
-    get parseFields() {
-        return JSON.parse(this.fields);
+    parseFields(newValue) {
+        try {
+            if (typeof newValue === 'string') {
+                this.parsedFields = JSON.parse(newValue);
+            }
+            else if (Array.isArray(newValue)) {
+                this.parsedFields = newValue;
+            }
+            else if (newValue && typeof newValue === 'object') {
+                // In case a single object is passed, wrap it in an array.
+                this.parsedFields = newValue;
+            }
+            else {
+                this.parsedFields = [];
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Error parsing fields prop:', error);
+            this.parsedFields = [];
+        }
     }
     render() {
-        const hiddenFields = this.parseFields.filter((field) => field.type === 'hidden');
-        const otherFields = this.parseFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: 'fdb974998dfd27c0d857d0fbfbbe9e769e55d7bb', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: 'dfbe5adce9e5685736169e88408590088aba5b1e' }, h("slot", { key: 'f5c5356a8b87bf63fdd21901da81291c596f1487' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
+        const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
+        return (h("form", { key: '0a106caa8aa9f056b55acf6fecfbc7090c4411d2', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: '3478d82640378d9a1c0c09394453e2118b1b3ca9' }, h("slot", { key: '9bc37f54c03b2b0f831da917b6ce6bab2ec11084' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
             return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.submitBtn && (h("div", { key: '2c3165a56d5bec9135a8695cae1b87981167c949', class: "mt-20" }, h("eds-button", { key: 'f311628ff58cd03ebbd0f7ccb0623df817d416da', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '1c7adc93081294eb86b71e808933215fe04fa033', class: "mt-20" }, h("eds-alert", { key: 'd221dd0674be734a8b7382ea2eeb97509f6bc3a6', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
+        })), this.submitBtn && (h("div", { key: 'ca221e8c5c18cf4a107581736728f84cea7831d0', class: "mt-20" }, h("eds-button", { key: 'eef3cf052beb62703c1df74d142650194d60c501', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '69861c8776b99e26a08585a5a8c893c85a2d9999', class: "mt-20" }, h("eds-alert", { key: 'b4d225d8efcbe6cde95789c367f0ecf94f217c9c', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
     }
     static get is() { return "eds-form"; }
     static get originalStyleUrls() {
@@ -332,24 +352,6 @@ export class EdsForm {
     }
     static get properties() {
         return {
-            "smallAlert": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, displays a small alert for messages."
-                },
-                "attribute": "small-alert",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "setFormUrl": {
                 "type": "boolean",
                 "mutable": false,
@@ -497,8 +499,8 @@ export class EdsForm {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
                     "references": {}
                 },
                 "required": false,
@@ -508,7 +510,8 @@ export class EdsForm {
                     "text": "A JSON string representing the fields in the form.\nExample:\n```json\n[\n  { \"name\": \"email\", \"label\": \"Email\", \"type\": \"text\", \"required\": true },\n  { \"name\": \"password\", \"label\": \"Password\", \"type\": \"password\", \"required\": true }\n]\n```"
                 },
                 "attribute": "fields",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "[]"
             },
             "coupleAuth": {
                 "type": "boolean",
@@ -539,7 +542,8 @@ export class EdsForm {
             "isSubmitting": {},
             "alertMessage": {},
             "isAuthenticated": {},
-            "authUser": {}
+            "authUser": {},
+            "parsedFields": {}
         };
     }
     static get events() {
@@ -561,6 +565,12 @@ export class EdsForm {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "fields",
+                "methodName": "parseFields"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "authStatusChanged",

package/dist/collection/components/eds-form/eds-form.stories.js

@@ -17,7 +17,6 @@ export default {
             defaultValue: 'Please fix the errors in the form.'
         },
         submitBtn: { control: 'boolean', description: 'Show submit button', defaultValue: true },
-        smallAlert: { control: 'boolean', description: 'Show small alert message', defaultValue: false },
         setFormUrl: { control: 'boolean', description: 'Include the current URL in the form data', defaultValue: true }
     }
 };
@@ -29,7 +28,6 @@ const Template = (args) => html `
     success-message="${args.successMessage}"
     error-message="${args.errorMessage}"
     ?submit-btn="${args.submitBtn}"
-    ?small-alert="${args.smallAlert}"
     ?set-form-url="${args.setFormUrl}"
   ></eds-form>
 `;
@@ -84,6 +82,5 @@ Default.args = {
     successMessage: 'Form submitted successfully!',
     errorMessage: 'Please fix the errors in the form.',
     submitBtn: true,
-    smallAlert: false,
     setFormUrl: true
 };

package/dist/collection/components/eds-frame/eds-frame.stories.js

@@ -43,25 +43,26 @@ Default.args = {
     bg: true,
     withHover: true
 };
-export const SmallFrame = Template.bind({});
+/*export const SmallFrame = Template.bind({});
 SmallFrame.args = {
-    frameLabel: 'Small Frame',
-    urlLabel: 'Small Frame Link',
-    urlLink: 'https://gitlab-org.gitlab.io/gitlab-ui?path=%2Fstory%2Fbase-card--default',
-    src: 'https://gitlab-org.gitlab.io/gitlab-ui/iframe.html?id=base-card--default&viewMode=story',
-    intent: 'secondary',
-    tiny: true,
-    bg: true,
-    withHover: false
+  frameLabel: 'Small Frame',
+  urlLabel: 'Small Frame Link',
+  urlLink: 'https://gitlab-org.gitlab.io/gitlab-ui?path=%2Fstory%2Fbase-card--default',
+  src: 'https://gitlab-org.gitlab.io/gitlab-ui/iframe.html?id=base-card--default&viewMode=story',
+  intent: 'secondary',
+  tiny: true,
+  bg: true,
+  withHover: false
 };
+
 export const ErrorState = Template.bind({});
 ErrorState.args = {
-    frameLabel: 'Error Frame',
-    urlLabel: 'Error Link',
-    urlLink: 'https://errorframe.com',
-    src: 'https://invalid-url.com', // Simulating a broken URL to trigger the error state
-    intent: 'inverse',
-    tiny: false,
-    bg: false,
-    withHover: true
-};
+  frameLabel: 'Error Frame',
+  urlLabel: 'Error Link',
+  urlLink: 'https://errorframe.com',
+  src: 'https://invalid-url.com', // Simulating a broken URL to trigger the error state
+  intent: 'inverse',
+  tiny: false,
+  bg: false,
+  withHover: true
+};*/