@teranga-ds/components 0.1.0

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

@@ -0,0 +1,117 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.tg-table-wrapper {
+  border: 1px solid var(--tg-color-neutral-200, #e5e7eb);
+  border-radius: var(--tg-radius-lg, 12px);
+  overflow: hidden;
+}
+
+.tg-table-scroll {
+  overflow-x: auto;
+}
+
+.tg-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--tg-font-family, sans-serif);
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+}
+
+/* Header */
+.tg-table thead {
+  background: var(--tg-color-neutral-50, #f9fafb);
+}
+
+.tg-table th {
+  text-align: left;
+  padding: var(--tg-spacing-sm, 12px) var(--tg-spacing-md, 16px);
+  font-weight: var(--tg-font-weight-semibold, 600);
+  color: var(--tg-color-text-secondary, #6b7280);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--tg-color-neutral-200, #e5e7eb);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.tg-table th--sortable {
+  cursor: pointer;
+  transition: color var(--tg-duration-fast, 150ms);
+}
+
+.tg-table th--sortable:hover {
+  color: var(--tg-color-text, #111827);
+}
+
+.tg-table__sort-icon {
+  display: inline-flex;
+  margin-left: var(--tg-spacing-2xs, 4px);
+  opacity: 0.4;
+  vertical-align: middle;
+}
+
+.tg-table__sort-icon--active {
+  opacity: 1;
+  color: var(--tg-color-primary, #00853F);
+}
+
+.tg-table__sort-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Body */
+.tg-table td {
+  padding: var(--tg-spacing-sm, 12px) var(--tg-spacing-md, 16px);
+  color: var(--tg-color-text, #111827);
+  border-bottom: 1px solid var(--tg-color-neutral-100, #f3f4f6);
+  vertical-align: middle;
+}
+
+.tg-table tbody tr {
+  transition: background var(--tg-duration-fast, 150ms);
+}
+
+.tg-table tbody tr:hover {
+  background: var(--tg-color-neutral-50, #f9fafb);
+}
+
+.tg-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Striped */
+.tg-table--striped tbody tr:nth-child(even) {
+  background: var(--tg-color-neutral-50, #f9fafb);
+}
+
+/* Compact */
+.tg-table--compact th,
+.tg-table--compact td {
+  padding: var(--tg-spacing-xs, 8px) var(--tg-spacing-sm, 12px);
+}
+
+/* Selectable */
+.tg-table__checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--tg-color-primary, #00853F);
+  cursor: pointer;
+}
+
+/* Empty */
+.tg-table__empty {
+  text-align: center;
+  padding: var(--tg-spacing-2xl, 48px) var(--tg-spacing-lg, 24px);
+  color: var(--tg-color-text-secondary, #6b7280);
+}
+
+.tg-table__empty-icon {
+  font-size: 2rem;
+  margin-bottom: var(--tg-spacing-sm, 12px);
+  opacity: 0.4;
+}

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

@@ -0,0 +1,289 @@
+import { h, Host } from "@stencil/core";
+export class TgTable {
+    constructor() {
+        this.columns = [];
+        this.data = [];
+        this.striped = false;
+        this.compact = false;
+        this.selectable = false;
+        this.emptyText = 'Aucune donnée';
+        this.sortKey = null;
+        this.sortDir = 'asc';
+        this.selectedRows = new Set();
+        this.handleSort = (col) => {
+            if (!col.sortable)
+                return;
+            if (this.sortKey === col.key) {
+                this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+            }
+            else {
+                this.sortKey = col.key;
+                this.sortDir = 'asc';
+            }
+            this.tgSort.emit({ key: col.key, direction: this.sortDir });
+        };
+        this.toggleRow = (index) => {
+            const next = new Set(this.selectedRows);
+            if (next.has(index))
+                next.delete(index);
+            else
+                next.add(index);
+            this.selectedRows = next;
+            this.tgSelect.emit([...next]);
+        };
+        this.toggleAll = () => {
+            const rows = this.sortedData;
+            if (this.selectedRows.size === rows.length) {
+                this.selectedRows = new Set();
+            }
+            else {
+                this.selectedRows = new Set(rows.map((_, i) => i));
+            }
+            this.tgSelect.emit([...this.selectedRows]);
+        };
+    }
+    get parsedColumns() {
+        if (typeof this.columns === 'string') {
+            try {
+                return JSON.parse(this.columns);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.columns;
+    }
+    get parsedData() {
+        if (typeof this.data === 'string') {
+            try {
+                return JSON.parse(this.data);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.data;
+    }
+    get sortedData() {
+        const rows = [...this.parsedData];
+        if (!this.sortKey)
+            return rows;
+        const key = this.sortKey;
+        const dir = this.sortDir === 'asc' ? 1 : -1;
+        return rows.sort((a, b) => {
+            const va = a[key];
+            const vb = b[key];
+            if (va == null)
+                return 1;
+            if (vb == null)
+                return -1;
+            if (typeof va === 'number' && typeof vb === 'number')
+                return (va - vb) * dir;
+            return String(va).localeCompare(String(vb)) * dir;
+        });
+    }
+    render() {
+        const cols = this.parsedColumns;
+        const rows = this.sortedData;
+        const ascending = `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 3l4 5H3l4-5z"/></svg>`;
+        const descending = `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 11l-4-5h8l-4 5z"/></svg>`;
+        return (h(Host, { key: '99c2d954442f43a51e1ba7d74f5dbee0ea761d74' }, h("div", { key: '9e7809c0d913e4e9102dc9b2833cc60747c5f209', class: "tg-table-wrapper" }, h("div", { key: 'a5c20b050f99d52887bcda2ddd61fb252e055764', class: "tg-table-scroll" }, h("table", { key: 'ef7ad43c02aac35b5e49a8128e8eb327a9921773', class: {
+                'tg-table': true,
+                'tg-table--striped': this.striped,
+                'tg-table--compact': this.compact,
+            } }, h("thead", { key: 'f7157def8d8f5701826eafd802edfb5e98d60c97' }, h("tr", { key: '34c77c7712b0de495292ceb67440690f3ecee561' }, this.selectable && (h("th", { key: '37fd83351f092b4c73f31db57ef8f8a115d91489', style: { width: '40px' } }, h("input", { key: 'f18e847bad40bc3e0960c683c5978ff0759f1eec', class: "tg-table__checkbox", type: "checkbox", checked: rows.length > 0 && this.selectedRows.size === rows.length, onChange: () => this.toggleAll(), "aria-label": "S\u00E9lectionner tout" }))), cols.map(col => (h("th", { class: { 'th--sortable': !!col.sortable }, style: col.width ? { width: col.width } : {}, onClick: () => this.handleSort(col) }, col.label, col.sortable && (h("span", { class: {
+                'tg-table__sort-icon': true,
+                'tg-table__sort-icon--active': this.sortKey === col.key,
+            }, innerHTML: this.sortKey === col.key && this.sortDir === 'desc' ? descending : ascending }))))))), h("tbody", { key: 'a9e19da69c43d3d7fdf40e5a52a6a2259d3009e7' }, rows.length === 0 ? (h("tr", null, h("td", { colSpan: cols.length + (this.selectable ? 1 : 0) }, h("div", { class: "tg-table__empty" }, h("div", { class: "tg-table__empty-icon" }, "\uD83D\uDCCB"), this.emptyText)))) : (rows.map((row, i) => (h("tr", null, this.selectable && (h("td", null, h("input", { class: "tg-table__checkbox", type: "checkbox", checked: this.selectedRows.has(i), onChange: () => this.toggleRow(i), "aria-label": `Sélectionner la ligne ${i + 1}` }))), cols.map(col => {
+            var _a;
+            return (h("td", null, String((_a = row[col.key]) !== null && _a !== void 0 ? _a : '')));
+        })))))))))));
+    }
+    static get is() { return "tg-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TgTableColumn[]",
+                    "resolved": "TgTableColumn[] | string",
+                    "references": {
+                        "TgTableColumn": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-table/tg-table.tsx",
+                            "id": "src/components/tg-table/tg-table.tsx::TgTableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "[]"
+            },
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Record<string, unknown>[]",
+                    "resolved": "Record<string, unknown>[] | string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "striped",
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text",
+                "defaultValue": "'Aucune donn\u00E9e'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sortKey": {},
+            "sortDir": {},
+            "selectedRows": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgSort",
+                "name": "tgSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ key: string; direction: string }",
+                    "resolved": "{ key: string; direction: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tgSelect",
+                "name": "tgSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-tabs/tg-tabs.css

@@ -0,0 +1,114 @@
+:host {
+  display: block;
+}
+
+.tg-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Tab list */
+.tg-tabs__list {
+  display: flex;
+  gap: var(--tg-spacing-2xs, 4px);
+  border-bottom: 2px solid var(--tg-color-neutral-100, #f3f4f6);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tg-tabs__list::-webkit-scrollbar { display: none; }
+
+.tg-tabs__list--pills {
+  border-bottom: none;
+  background: var(--tg-color-neutral-50, #f9fafb);
+  border-radius: var(--tg-radius-lg, 12px);
+  padding: var(--tg-spacing-2xs, 4px);
+}
+
+/* Tab trigger */
+.tg-tabs__tab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--tg-font-family, sans-serif);
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  font-weight: var(--tg-font-weight-medium, 500);
+  color: var(--tg-color-text-secondary, #6b7280);
+  padding: var(--tg-spacing-sm, 12px) var(--tg-spacing-md, 16px);
+  white-space: nowrap;
+  position: relative;
+  transition: color var(--tg-duration-fast, 150ms), background var(--tg-duration-fast, 150ms);
+  border-radius: 0;
+}
+
+.tg-tabs__tab::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  height: 2px;
+  background: transparent;
+  transition: background var(--tg-duration-fast, 150ms);
+}
+
+.tg-tabs__tab:hover {
+  color: var(--tg-color-text, #111827);
+}
+
+.tg-tabs__tab--active {
+  color: var(--tg-color-primary, #00853F);
+}
+
+.tg-tabs__tab--active::after {
+  background: var(--tg-color-primary, #00853F);
+}
+
+.tg-tabs__tab:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+  border-radius: var(--tg-radius-sm, 4px);
+}
+
+/* Pill variant */
+.tg-tabs__list--pills .tg-tabs__tab {
+  border-radius: var(--tg-radius-md, 8px);
+}
+
+.tg-tabs__list--pills .tg-tabs__tab::after { display: none; }
+
+.tg-tabs__list--pills .tg-tabs__tab--active {
+  background: var(--tg-color-surface, #fff);
+  box-shadow: var(--tg-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
+  color: var(--tg-color-primary, #00853F);
+}
+
+/* Badge */
+.tg-tabs__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6875rem;
+  font-weight: var(--tg-font-weight-semibold, 600);
+  background: var(--tg-color-neutral-100, #f3f4f6);
+  color: var(--tg-color-text-secondary, #6b7280);
+  border-radius: 9999px;
+  padding: 0 6px;
+  min-width: 18px;
+  height: 18px;
+  margin-left: var(--tg-spacing-2xs, 4px);
+}
+
+.tg-tabs__tab--active .tg-tabs__badge {
+  background: var(--tg-color-primary-50, #ecfdf5);
+  color: var(--tg-color-primary, #00853F);
+}
+
+/* Panel */
+.tg-tabs__panel {
+  padding: var(--tg-spacing-md, 16px) 0;
+}

package/dist/collection/components/tg-tabs/tg-tabs.js

@@ -0,0 +1,141 @@
+import { h, Host } from "@stencil/core";
+export class TgTabs {
+    constructor() {
+        this.tabs = [];
+        this.variant = 'underline';
+        this.selectTab = (tab) => {
+            if (tab.disabled)
+                return;
+            this.internalActive = tab.id;
+            this.activeTab = tab.id;
+            this.tgTabChange.emit(tab.id);
+        };
+    }
+    get parsedTabs() {
+        if (typeof this.tabs === 'string') {
+            try {
+                return JSON.parse(this.tabs);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.tabs;
+    }
+    componentWillLoad() {
+        var _a;
+        const items = this.parsedTabs;
+        this.internalActive = (_a = this.activeTab) !== null && _a !== void 0 ? _a : (items.length > 0 ? items[0].id : '');
+    }
+    render() {
+        const items = this.parsedTabs;
+        return (h(Host, { key: 'c68ffca94fcc42f99cde35f88f37677e4b85e8e3' }, h("div", { key: 'f4303416e3144410bc3cce2d71dbd8b9ef9e0def', class: "tg-tabs" }, h("div", { key: '4da9fbb011b839a3400e07ca34968f7dc6df5d86', class: { 'tg-tabs__list': true, 'tg-tabs__list--pills': this.variant === 'pills' }, role: "tablist" }, items.map(tab => (h("button", { class: {
+                'tg-tabs__tab': true,
+                'tg-tabs__tab--active': this.internalActive === tab.id,
+            }, role: "tab", "aria-selected": this.internalActive === tab.id ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, onClick: () => this.selectTab(tab), tabindex: tab.disabled ? -1 : 0 }, tab.label, tab.badge && h("span", { class: "tg-tabs__badge" }, tab.badge))))), h("div", { key: 'ec6ced09c19b7e257706592a01a7e6457833113f', class: "tg-tabs__panel", role: "tabpanel" }, h("slot", { key: 'a7ecf6c0045e9b3245decfec424b1f0cb2b642fc' })))));
+    }
+    static get is() { return "tg-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tabs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TgTabItem[]",
+                    "resolved": "TgTabItem[] | string",
+                    "references": {
+                        "TgTabItem": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-tabs/tg-tabs.tsx",
+                            "id": "src/components/tg-tabs/tg-tabs.tsx::TgTabItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tabs",
+                "defaultValue": "[]"
+            },
+            "activeTab": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-tab"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'underline' | 'pills'",
+                    "resolved": "\"pills\" | \"underline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'underline'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalActive": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgTabChange",
+                "name": "tgTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}