@ebrains/components 0.0.1-alpha.0

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

@@ -0,0 +1,109 @@
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+/**
+ * @internal
+ */
+export class EdsTab {
+    constructor() {
+        this.tabCva = cva([
+            'cursor-pointer',
+            //'px-16 py-12',
+            //'border-b-2',
+            'text-gray-700',
+            'hover:text-black',
+            'focus:outline-none',
+            'focus-visible:ring'
+        ], {
+            variants: {
+                active: {
+                    true: 'border-blue-500 font-bold text-blue-600',
+                    false: 'border-transparent'
+                }
+            },
+            defaultVariants: {
+                active: false
+            }
+        });
+        this.label = undefined;
+        this.url = undefined;
+        this.active = false;
+        this.ariaLabel = undefined;
+    }
+    render() {
+        return (h("a", { key: 'ba4c995637d8d305249f018a0451775f45907716', "aria-label": this.label, "aria-current": this.active, class: this.tabCva({ active: this.active }) }, this.label));
+    }
+    static get is() { return "eds-tab"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the tab"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL or href of the tab"
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab is active"
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for accessibility"
+                },
+                "attribute": "aria-label",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -0,0 +1,138 @@
+/*
+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;
+}

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

@@ -0,0 +1,281 @@
+import { h } from "@stencil/core";
+/**
+ * `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.minWidth = 400; // Minimum width for components in px
+        this.data = null;
+        this.endpoint = null;
+        this.config = {};
+        this.rowsPerPage = 10;
+        this.paginationEnabled = true;
+        this.searchEnabled = false;
+        this.tableData = [];
+        this.columns = [];
+        this.currentPage = 1;
+        this.parsedConfig = {};
+        this.totalRows = 0;
+        this.searchQuery = '';
+    }
+    handleDataChange() {
+        this.parseData();
+    }
+    handleConfigChange() {
+        this.parseConfig();
+    }
+    componentWillLoad() {
+        this.parseConfig();
+        this.data ? this.parseData() : this.endpoint && this.fetchData();
+    }
+    componentDidLoad() {
+        this.setupPaginationListener();
+    }
+    componentDidUpdate() {
+        this.setupPaginationListener();
+    }
+    parseData() {
+        try {
+            this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+            this.totalRows = this.tableData.length;
+            this.updateColumns();
+            this.currentPage = 1;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to parse data:', error);
+            this.tableData = [];
+        }
+    }
+    parseConfig() {
+        try {
+            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('pageChange', (event) => this.handlePageChange(event.detail));
+            paginationEl.setAttribute('listener-attached', 'true');
+        }
+    }
+    getFilteredRows() {
+        return this.tableData.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;
+    }
+    handleSearch(event) {
+        this.searchQuery = event.target.value;
+        this.currentPage = 1;
+    }
+    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.tableData.length > 0 ? Object.keys(this.tableData[0]) : [];
+    }
+    getVisibleColumnsCount() {
+        return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
+    }
+    render() {
+        const paginatedRows = this.getPaginatedRows();
+        const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+        // Calculate column width based on minWidth and number of columns
+        //const columnWidth = Math.max(this.minWidth / this.columns.length, 100);
+        // Use the visible column count to calculate the column width
+        const visibleColumnsCount = this.getVisibleColumnsCount();
+        const columnWidth = visibleColumnsCount > 0 ? Math.max(this.minWidth / visibleColumnsCount, 100) : 100;
+        return (h("div", { key: 'c5e50673eb1ed5cf00e0294885bf9cd6d13f9366', class: "container", style: { minWidth: `${this.minWidth}px` } }, h("div", { key: '0e0814a8cb5ae1e11538a26cba630e59d39dde74' }, this.searchEnabled && (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: '65e0c9057c313f220655ecd7692a83c932f441b3', class: "mt-20" }, h("table", { key: '9e77153c2e0983f7598a21ef55ebcf3107655e09', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '38e5ac67ffae80d896c29357615d19b5dfcc52d3' }, h("tr", { key: '526c5b30da0a2aa97bb90f5b473b3e9ea41dde6b', 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 px-20 py-8 border border-softer f-ui-02", style: { minWidth: `${columnWidth}px` } }, column));
+        }))), h("tbody", { key: '5a10525ed86eac82291746be4c6cce5f65942d2d' }, 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 px-20 py-8 f-ui-2", style: { minWidth: `${columnWidth}px` } }, this.renderCell(row[column], column)));
+        }))))))), h("div", { key: 'af1183fd3e635c7d7ac982231adfdd9d892f6979', class: "mt-20" }, this.shouldEnablePagination() && (h("eds-pagination", { key: 'a5de7f25054c2d67f0788bfd2bc37d07f46de02c', 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": "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?: \"bold\" | \"code\" | \"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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tableData": {},
+            "columns": {},
+            "currentPage": {},
+            "parsedConfig": {},
+            "totalRows": {},
+            "searchQuery": {}
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "handleDataChange"
+            }, {
+                "propName": "config",
+                "methodName": "handleConfigChange"
+            }];
+    }
+}

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

@@ -0,0 +1,173 @@
+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)'
+        },
+        endpoint: {
+            control: 'text',
+            description: 'API endpoint to fetch data from'
+        },
+        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'
+        }
+    },
+    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
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-table 
+      data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'>
+    </eds-table>`
+};
+export const WithHiddenColumn = {
+    render: (args) => `
+    <eds-table 
+      data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'>
+    </eds-table>`,
+    args: {
+        data: [
+            { Property: 'username', Type: 'string', Required: 'Yes' },
+            { Property: 'password', Type: 'string', Required: 'Yes' },
+            { Property: 'email', Type: 'string', Required: 'No' }
+        ],
+        config: {
+            Required: { hidden: true }
+        }
+    }
+};
+export const WithEndpoint = {
+    render: (args) => `
+    <eds-table 
+      endpoint="${args.endpoint}">
+    </eds-table>`,
+    args: {
+        endpoint: 'http://127.0.0.1:5000/api/info'
+    }
+};
+export const WithCustomFormats = {
+    render: (args) => `
+    <eds-table 
+      data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'>
+    </eds-table>`,
+    args: {
+        data: [
+            { Property: 'username', Type: 'string', Role: 'User' },
+            { Property: 'password', Type: 'password', Role: 'Admin' }
+        ],
+        config: {
+            Property: { format: 'code' },
+            Type: { format: 'uppercase' },
+            Role: { format: 'bold' }
+        }
+    }
+};
+// 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' }
+];
+const tableData = JSON.stringify(sampleData);
+export const BasicPagination = {
+    render: (args) => `
+    <eds-table
+      data=${tableData}
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+    ></eds-table>
+  `,
+    args: {
+        rowsPerPage: 5,
+        paginationEnabled: true
+    }
+};
+export const CustomRowsPerPage = {
+    render: (args) => `
+    <eds-table
+      data=${tableData}
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+    ></eds-table>
+  `,
+    args: {
+        rowsPerPage: 3,
+        paginationEnabled: true
+    }
+};
+export const CustomRowsPerPageEndpoint = {
+    render: (args) => `
+    <eds-table
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+      endpoint="${args.endpoint}"
+    ></eds-table>
+  `,
+    args: {
+        rowsPerPage: 3,
+        paginationEnabled: true,
+        endpoint: 'http://127.0.0.1:5000/api/info'
+    }
+};
+export const CompleteExample = {
+    render: (args) => `
+    <eds-table
+      data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+      search-enabled="${args.searchEnabled}"
+      endpoint="${args.endpoint || ''}"
+    ></eds-table>
+  `,
+    args: {
+        data: sampleData,
+        config: {
+            name: { format: 'bold' },
+            occupation: { format: 'uppercase' }
+        },
+        rowsPerPage: 5,
+        paginationEnabled: true,
+        searchEnabled: true,
+        endpoint: '' // Leave empty for manual data entry
+    }
+};