@ebrains/components 0.9.2-beta → 1.0.0

package/dist/collection/components/eds-table/eds-table.css

@@ -0,0 +1,142 @@
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+table {
+    text-indent: 0;
+    /* 1 */
+    border-color: inherit;
+    /* 2 */
+    border-collapse: collapse;
+    /* 3 */
+}
+
+.container {
+    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.container>* {
+    --container-outer-gutter: 0;
+    --breakout-container-outer-gutter: 0;
+}
+
+.pt-32 {
+    padding-top: 2rem;
+}
+
+.pt-40 {
+    padding-top: 2.5rem;
+}
+
+.pt-48 {
+    padding-top: 3rem;
+}
+
+.pb-28 {
+    padding-bottom: 1.75rem;
+}
+
+.pb-60 {
+    padding-bottom: 3.75rem;
+}
+
+.mt-20 {
+    margin-top: 1.25rem;
+}
+
+.mt-28 {
+    margin-top: 1.75rem;
+}
+
+.block {
+    display: block;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.overflow-x-auto {
+    overflow-x: auto;
+}
+
+.mt-6 {
+    margin-top: 0.375rem;
+}
+
+.p-0 {
+    padding: 0rem;
+}
+
+.m-0 {
+    margin: 0rem;
+}
+
+.border {
+    border-width: 1px;
+}
+
+.border-softer {
+    border: 1px solid rgba(0, 0, 0, .1);
+}
+
+.even\:bg-inverse-softer:nth-child(even) {
+    background-color: rgba(255, 255, 255, .15);
+}
+
+.px-20 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+}
+
+.py-8 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+.f-ui-01 {
+    font-family: var(--f-ui-01-fontFamily);
+    font-weight: var(--f-ui-01-fontWeight);
+    font-size: var(--f-ui-01-fontSize);
+    line-height: var(--f-ui-01-lineHeight);
+    letter-spacing: var(--f-ui-01-letterSpacing);
+}
+
+.f-ui-02 {
+    font-family: var(--f-ui-02-fontFamily);
+    font-weight: var(--f-ui-02-fontWeight);
+    font-size: var(--f-ui-02-fontSize);
+    line-height: var(--f-ui-02-lineHeight);
+    letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.break-words {
+    overflow-wrap: anywhere;
+}

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

@@ -0,0 +1,370 @@
+import { sendAnalytics } from "../../utils/analytics";
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+/**
+ * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
+ *
+ * Key Features:
+ * - Accepts static data or fetches dynamic data from an endpoint.
+ * - Configurable columns with options to hide or apply text formatting (uppercase, bold, or code).
+ * - Pagination support with adjustable rows per page.
+ * - Searchable content for easier data filtering.
+ *
+ * This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.
+ */
+export class EdsTable {
+    constructor() {
+        this.handleResize = () => {
+            this.updateContainerWidth();
+        };
+        this.data = null;
+        this.endpoint = null;
+        this.config = {};
+        this.rowsPerPage = 10;
+        this.paginationEnabled = true;
+        this.searchEnabled = false;
+        this.hostWidth = undefined;
+        this.columnSize = 'default';
+        this.tbData = [];
+        this.columns = [];
+        this.currentPage = 1;
+        this.parsedConfig = {};
+        this.totalRows = 0;
+        this.searchQuery = '';
+        this.containerWidth = 0;
+    }
+    handleDataChange() {
+        this.parseData();
+    }
+    handleConfigChange() {
+        this.parseConfig();
+    }
+    componentWillLoad() {
+        this.parseConfig();
+        this.data ? this.parseData() : this.endpoint && this.fetchData();
+    }
+    componentDidLoad() {
+        this.updateContainerWidth();
+        window.addEventListener('resize', this.handleResize);
+        this.setupPaginationListener();
+    }
+    componentDidUpdate() {
+        this.setupPaginationListener();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    updateContainerWidth() {
+        // Use hostWidth prop if provided; otherwise, measure parent element
+        if (this.hostWidth && this.hostWidth.trim() !== '') {
+            this.containerWidth = Number(this.hostWidth);
+        }
+        else if (this.hostEl.parentElement instanceof HTMLElement) {
+            this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
+        }
+        else {
+            this.containerWidth = 400;
+        }
+    }
+    parseData() {
+        try {
+            this.tbData = parseData(this.data);
+            //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+            this.totalRows = this.tbData.length;
+            this.updateColumns();
+            this.currentPage = 1;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to parse data:', error);
+            this.tbData = [];
+        }
+    }
+    parseConfig() {
+        try {
+            //this.parsedConfig = parseData(this.config);
+            this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to parse config:', error);
+            this.parsedConfig = {};
+        }
+    }
+    async fetchData() {
+        try {
+            const response = await fetch(this.endpoint);
+            const data = await response.json();
+            this.data = data;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to fetch data:', error);
+        }
+    }
+    setupPaginationListener() {
+        if (!this.shouldEnablePagination()) {
+            return;
+        }
+        const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
+        if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
+            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail));
+            paginationEl.setAttribute('listener-attached', 'true');
+        }
+    }
+    getFilteredRows() {
+        return this.tbData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+    }
+    getPaginatedRows() {
+        const filteredRows = this.getFilteredRows();
+        this.totalRows = filteredRows.length;
+        const start = (this.currentPage - 1) * this.rowsPerPage;
+        return filteredRows.slice(start, start + this.rowsPerPage);
+    }
+    handlePageChange(newPage) {
+        this.currentPage = newPage;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
+            name: `${newPage}` || '',
+            action: 'page'
+        });
+    }
+    handleSearch(event) {
+        this.searchQuery = event.target.value;
+        this.currentPage = 1;
+        /*sendAnalytics({
+          category: 'ui-component',
+          parentContext: null,
+          tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
+          name: `${this.searchQuery}` || '',
+          action: 'page'
+        });*/
+    }
+    renderCell(value, column) {
+        var _a;
+        const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
+        return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'svg' ? (h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
+    }
+    shouldEnablePagination() {
+        return this.paginationEnabled && this.totalRows > this.rowsPerPage;
+    }
+    updateColumns() {
+        this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
+    }
+    getVisibleColumnsCount() {
+        return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
+    }
+    divisionFactor() {
+        let divisionFactor = 1;
+        if (this.columnSize === 'medium') {
+            divisionFactor = 2;
+        }
+        else if (this.columnSize === 'large') {
+            divisionFactor = 4;
+        }
+        return divisionFactor;
+    }
+    render() {
+        // Use containerWidth state that is updated on resize.
+        const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
+        // Calculate the number of visible columns and the column width.
+        const visibleColumnsCount = this.getVisibleColumnsCount();
+        const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
+        const paginatedRows = this.getPaginatedRows();
+        const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+        return (h("div", { key: '81735ac374853c8c92b3f50e26263ff9d71b326c' }, this.searchEnabled && (h("div", { key: '0b2ab8dbb343033f605e2028890bd963cd650998' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+            // @ts-ignore
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'eb3eebe6fb124d4e1983b2fb7e636707817d36bd', class: "mt-20" }, h("table", { key: '03b312ac20bdec28843a46907a3cc4fba69f62ae', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'ccab58dc46ae765df28da97ded6b1dd14d45d7f1' }, h("tr", { key: '904a125aad610cebe42b0bce46615be38f0ee17a', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            var _a;
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
+        }))), h("tbody", { key: 'a4c54c9c89d15546020dbb684e5486decde33f30' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            var _a;
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '2a248cbbe81ac8c1ad4dfbb49a9615f15931bac6', class: "mt-20" }, h("eds-pagination", { key: '11701d81922ca4c8b36fe82be32316a175eddbcd', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+    }
+    static get is() { return "eds-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { [key: string]: any }[] | null",
+                    "resolved": "string | { [key: string]: any; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Static data for the table as an object or JSON string"
+                },
+                "attribute": "table-data",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint to fetch data dynamically"
+                },
+                "attribute": "endpoint",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "config": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| string\n    | {\n        [key: string]: {\n          hidden?: boolean;\n          format?: 'uppercase' | 'bold' | 'code';\n        };\n      }",
+                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"bold\" | \"uppercase\"; }; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Config object to hide or format columns"
+                },
+                "attribute": "config",
+                "reflect": false,
+                "defaultValue": "{}"
+            },
+            "rowsPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of rows per page"
+                },
+                "attribute": "rows-per-page",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "paginationEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable or disable pagination explicitly"
+                },
+                "attribute": "pagination-enabled",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "searchEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable or disable search input for filtering"
+                },
+                "attribute": "search-enabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hostWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "host-width",
+                "reflect": false
+            },
+            "columnSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'medium' | 'large'",
+                    "resolved": "\"default\" | \"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional property to control the column sizing mode.\n- 'default' uses containerWidth / visibleColumns.\n- 'medium' divides that result by 2.\n- 'large' divides that result by 4."
+                },
+                "attribute": "column-size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tbData": {},
+            "columns": {},
+            "currentPage": {},
+            "parsedConfig": {},
+            "totalRows": {},
+            "searchQuery": {},
+            "containerWidth": {}
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "handleDataChange"
+            }, {
+                "propName": "config",
+                "methodName": "handleConfigChange"
+            }, {
+                "propName": "data",
+                "methodName": "parseData"
+            }];
+    }
+}

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

@@ -0,0 +1,89 @@
+export default {
+    title: 'Components/Table',
+    component: 'eds-table',
+    argTypes: {
+        data: {
+            control: 'object',
+            description: 'Data array to display in the table'
+        },
+        config: {
+            control: 'object',
+            description: 'Column configurations (hiding and formatting)'
+        },
+        rowsPerPage: {
+            control: { type: 'number' },
+            description: 'Number of rows displayed per page'
+        },
+        paginationEnabled: {
+            control: { type: 'boolean' },
+            description: 'Toggle pagination on or off'
+        },
+        searchEnabled: {
+            control: { type: 'boolean' },
+            description: 'Enable search input for filtering'
+        },
+        columnSize: { control: 'select', options: ['default', 'medium', 'large'] }
+    },
+    args: {
+        data: [
+            { Property: 'username', Type: 'string', Required: 'Yes' },
+            { Property: 'password', Type: 'string', Required: 'Yes' },
+            { Property: 'email', Type: 'string', Required: 'Yes' }
+        ],
+        config: {
+            Required: { hidden: true },
+            Type: { format: 'uppercase' },
+            Property: { format: 'code' }
+        },
+        rowsPerPage: 5,
+        paginationEnabled: true,
+        searchEnabled: true,
+        columnSize: 'default'
+    }
+};
+// Sample data for the table
+const sampleData = [
+    { name: 'Alice', age: 25, occupation: 'Engineer' },
+    { name: 'Bob', age: 30, occupation: 'Designer' },
+    { name: 'Charlie', age: 35, occupation: 'Manager' },
+    { name: 'Daisy', age: 28, occupation: 'Developer' },
+    { name: 'Edward', age: 40, occupation: 'Architect' },
+    { name: 'Fiona', age: 22, occupation: 'Analyst' },
+    { name: 'George', age: 29, occupation: 'Technician' },
+    { name: 'Hannah', age: 31, occupation: 'Scientist' },
+    { name: 'Ian', age: 27, occupation: 'Developer' },
+    { name: 'Jackie', age: 33, occupation: 'Consultant' }
+];
+export const Default = {
+    render: (args) => `
+    <eds-table
+      table-data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+      search-enabled="${args.searchEnabled}"
+      column-size="${args.columnSize}"
+    ></eds-table>
+  `,
+    args: {
+        data: sampleData,
+        config: {
+            name: { format: 'bold' },
+            occupation: { format: 'uppercase' }
+        },
+        rowsPerPage: 5,
+        paginationEnabled: true,
+        searchEnabled: true,
+        columnSize: 'default'
+    }
+};
+export const WithEndpoint = {
+    render: (args) => `
+    <eds-table 
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+      search-enabled="${args.searchEnabled}"
+      host-width="600"
+      column-size="${args.columnSize}"
+    ></eds-table>`
+};