@brandsync/wc 0.0.1

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -0,0 +1,259 @@
+import { h } from "@stencil/core";
+/**
+ * A sortable, optionally row-selectable table for tabular data.
+ *
+ * `columns`, `rows`, and `cellRenderer` are JS-property-only — HTML attributes can only carry
+ * strings, so arrays/objects/functions must be set via `element.rows = [...]` etc., not as
+ * attributes. See CONVENTIONS.md.
+ *
+ * ## When to use
+ * - Comparing structured records across the same set of fields (a list of people, bookings, etc.).
+ *
+ * ## When not to use
+ * - A handful of unrelated key/value pairs — a simple list or card is lighter-weight.
+ * - Deeply nested/hierarchical data — this component renders one flat row per record.
+ *
+ * @part table - The `<table>` element.
+ * @part head - The `<thead>` element.
+ * @part body - The `<tbody>` element.
+ * @part row - Each `<tr>` in the body.
+ * @part header-cell - Each `<th>` in the header row.
+ * @part cell - Each `<td>` in a body row.
+ */
+export class BsDataTable {
+    /** Array prop -- must be set as a JS property (`el.columns = [...]`), not an HTML attribute,
+     * since attributes can only carry strings. See CONVENTIONS.md. */
+    columns = [];
+    /** Array prop -- same JS-property-only rule as `columns`. */
+    rows = [];
+    sortColumn;
+    sortDirection = 'asc';
+    selectable = false;
+    /** Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only,
+     * same as array props -- there is no attribute equivalent. Falls back to the raw cell value. */
+    cellRenderer;
+    bsSort;
+    bsRowSelect;
+    selectedIds = new Set();
+    onHeaderClick = (column) => {
+        if (!column.sortable)
+            return;
+        const direction = this.sortColumn === column.key && this.sortDirection === 'asc' ? 'desc' : 'asc';
+        this.bsSort.emit({ column: column.key, direction });
+    };
+    onRowCheckboxChange = (row, ev) => {
+        const selected = ev.target.checked;
+        const next = new Set(this.selectedIds);
+        if (selected) {
+            next.add(row.id);
+        }
+        else {
+            next.delete(row.id);
+        }
+        this.selectedIds = next;
+        this.bsRowSelect.emit({ id: row.id, selected });
+    };
+    render() {
+        return (h("table", { key: '9d51da1ed65a523ac8008fde2f77673a68e4e39e', part: "table", class: "bs-data-table" }, h("thead", { key: 'e1baef3845a07af164e2c91cd3979d1ff76eb767', part: "head" }, h("tr", { key: '930648d2ced662352ddfb7dfc9748501324e7bf3' }, this.selectable && h("th", { key: 'd61beed09258e8ba9c087d4d922eebb6591735e9', class: "bs-data-table__select-col" }), this.columns.map(column => {
+            const isSorted = this.sortColumn === column.key;
+            const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
+            return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
+        }))), h("tbody", { key: '2015f29ec50c9e99ce63366ea06a4d9082fc638d', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
+        // derived from untrusted input) -- its HTML output is intentionally not escaped,
+        // same trust model as React's dangerouslySetInnerHTML.
+        h("td", { part: "cell", class: "bs-data-table__cell", innerHTML: this.cellRenderer(row, column) })) : (
+        // Default path renders raw cell values as plain text so untrusted row data
+        // (e.g. user-submitted names) can never be interpreted as HTML.
+        h("td", { part: "cell", class: "bs-data-table__cell" }, String(row[column.key] ?? ''))))))))));
+    }
+    static get is() { return "bs-data-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-data-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-data-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsDataTableColumn[]",
+                    "resolved": "BsDataTableColumn[]",
+                    "references": {
+                        "BsDataTableColumn": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-data-table/bs-data-table.tsx",
+                            "id": "src/components/bs-data-table/bs-data-table.tsx::BsDataTableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array prop -- must be set as a JS property (`el.columns = [...]`), not an HTML attribute,\nsince attributes can only carry strings. See CONVENTIONS.md."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsDataTableRow[]",
+                    "resolved": "BsDataTableRow[]",
+                    "references": {
+                        "BsDataTableRow": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-data-table/bs-data-table.tsx",
+                            "id": "src/components/bs-data-table/bs-data-table.tsx::BsDataTableRow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array prop -- same JS-property-only rule as `columns`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "sortColumn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort-column"
+            },
+            "sortDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'asc' | 'desc'",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort-direction",
+                "defaultValue": "'asc'"
+            },
+            "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"
+            },
+            "cellRenderer": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(row: BsDataTableRow, column: BsDataTableColumn) => string",
+                    "resolved": "(row: BsDataTableRow, column: BsDataTableColumn) => string",
+                    "references": {
+                        "BsDataTableRow": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-data-table/bs-data-table.tsx",
+                            "id": "src/components/bs-data-table/bs-data-table.tsx::BsDataTableRow"
+                        },
+                        "BsDataTableColumn": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-data-table/bs-data-table.tsx",
+                            "id": "src/components/bs-data-table/bs-data-table.tsx::BsDataTableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only,\nsame as array props -- there is no attribute equivalent. Falls back to the raw cell value."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedIds": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsSort",
+                "name": "bsSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ column: string; direction: 'asc' | 'desc' }",
+                    "resolved": "{ column: string; direction: \"desc\" | \"asc\"; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRowSelect",
+                "name": "bsRowSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ id: string | number; selected: boolean }",
+                    "resolved": "{ id: string | number; selected: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/bs-data-table/bs-data-table.stories.js

@@ -0,0 +1,55 @@
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-data-table',
+    parameters: { docs: { description: { component: componentDescription('bs-data-table') } } },
+};
+export default meta;
+const columns = [
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'department', label: 'Department', sortable: true },
+    { key: 'status', label: 'Status' },
+];
+const rows = [
+    { id: 1, name: 'Amelia Torres', department: 'Facilities', status: 'Active' },
+    { id: 2, name: 'Noah Whitfield', department: 'Engineering', status: 'Active' },
+    { id: 3, name: 'Priya Nair', department: 'Design', status: 'On leave' },
+];
+export const Default = {
+    render: () => {
+        const table = document.createElement('bs-data-table');
+        table.columns = columns;
+        table.rows = rows;
+        table.addEventListener('bsSort', (ev) => {
+            // eslint-disable-next-line no-console
+            console.log('bsSort', ev.detail);
+        });
+        return table;
+    },
+};
+export const Selectable = {
+    render: () => {
+        const table = document.createElement('bs-data-table');
+        table.columns = columns;
+        table.rows = rows;
+        table.selectable = true;
+        table.addEventListener('bsRowSelect', (ev) => {
+            // eslint-disable-next-line no-console
+            console.log('bsRowSelect', ev.detail);
+        });
+        return table;
+    },
+};
+export const WithCustomCellRenderer = {
+    render: () => {
+        const table = document.createElement('bs-data-table');
+        table.columns = [...columns, { key: 'actions', label: 'Actions' }];
+        table.rows = rows;
+        table.cellRenderer = (row, column) => {
+            if (column.key === 'actions') {
+                return `<button type="button">Edit</button>`;
+            }
+            return String(row[column.key] ?? '');
+        };
+        return table;
+    },
+};

package/dist/collection/components/bs-input/bs-input.cmp.test.js

@@ -0,0 +1,101 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-input', () => {
+    it('renders a native text input with an empty value by default', async () => {
+        const { root } = await render(h("bs-input", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('type', 'text');
+        expect(input.value).toBe('');
+        expect(input).not.toHaveAttribute('disabled');
+    });
+    it('reflects the value prop to the native input', async () => {
+        const { root } = await render(h("bs-input", { value: "hello" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input.value).toBe('hello');
+    });
+    ['text', 'email', 'password', 'number'].forEach(type => {
+        it(`applies type="${type}" to the native input`, async () => {
+            const { root } = await render(h("bs-input", { type: type }));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input).toEqualAttribute('type', type);
+        });
+    });
+    it('passes the placeholder prop through to the native input', async () => {
+        const { root } = await render(h("bs-input", { placeholder: "Enter your name" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('placeholder', 'Enter your name');
+    });
+    it('does not render a label when the label prop is not set', async () => {
+        const { root } = await render(h("bs-input", null));
+        expect(root.shadowRoot.querySelector('label')).toBeNull();
+    });
+    it('renders a label wired to the control via htmlFor/id when the label prop is set', async () => {
+        const { root } = await render(h("bs-input", { label: "Email address" }));
+        const label = root.shadowRoot.querySelector('label');
+        const input = root.shadowRoot.querySelector('input');
+        expect(label).toHaveTextContent('Email address');
+        expect(label).toEqualAttribute('for', 'control');
+        expect(input).toEqualAttribute('id', 'control');
+        expect(label).toEqualAttribute('part', 'label');
+    });
+    it('disables the native input when disabled is set', async () => {
+        const { root } = await render(h("bs-input", { disabled: true }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toHaveAttribute('disabled');
+    });
+    it('renders the description when set and no error is present', async () => {
+        const { root } = await render(h("bs-input", { description: "Must be a valid email" }));
+        const description = root.shadowRoot.querySelector('[part="description"]');
+        const input = root.shadowRoot.querySelector('input');
+        expect(description).toHaveTextContent('Must be a valid email');
+        expect(root.shadowRoot.querySelector('[part="error"]')).toBeNull();
+        expect(input).toEqualAttribute('aria-describedby', 'description-or-error');
+        expect(input).not.toHaveAttribute('aria-invalid');
+    });
+    it('renders the error message instead of the description, applies the error class, and sets aria-invalid', async () => {
+        const { root } = await render(h("bs-input", { description: "Must be a valid email", error: "This field is required" }));
+        const error = root.shadowRoot.querySelector('[part="error"]');
+        expect(error).toHaveTextContent('This field is required');
+        expect(root.shadowRoot.querySelector('[part="description"]')).toBeNull();
+        const wrapper = root.shadowRoot.querySelector('.bs-input');
+        expect(wrapper).toHaveClass('bs-input--error');
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('aria-invalid', 'true');
+        expect(input).toEqualAttribute('aria-describedby', 'description-or-error');
+    });
+    it('emits bsInput with the current value as the user types', async () => {
+        const { root, spyOnEvent } = await render(h("bs-input", null));
+        const bsInputSpy = spyOnEvent('bsInput');
+        const input = root.shadowRoot.querySelector('input');
+        input.value = 'a';
+        input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        expect(bsInputSpy).toHaveReceivedEventTimes(1);
+        expect(bsInputSpy).toHaveReceivedEventDetail('a');
+    });
+    it('emits bsChange with the current value on native change', async () => {
+        const { root, spyOnEvent } = await render(h("bs-input", null));
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const input = root.shadowRoot.querySelector('input');
+        input.value = 'final value';
+        input.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        expect(bsChangeSpy).toHaveReceivedEventTimes(1);
+        expect(bsChangeSpy).toHaveReceivedEventDetail('final value');
+    });
+    it('does not emit bsChange on input, or bsInput on change', async () => {
+        const { root, spyOnEvent } = await render(h("bs-input", null));
+        const bsInputSpy = spyOnEvent('bsInput');
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const input = root.shadowRoot.querySelector('input');
+        input.value = 'x';
+        input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        expect(bsChangeSpy.length).toBe(0);
+        input.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        expect(bsInputSpy).toHaveReceivedEventTimes(1);
+    });
+    it('delegates focus from the host to the native input (delegatesFocus)', async () => {
+        const { root } = await render(h("bs-input", { label: "Name" }));
+        const input = root.shadowRoot.querySelector('input');
+        root.focus();
+        expect(root.shadowRoot.activeElement).toBe(input);
+        expect(document.activeElement).toBe(root);
+    });
+});

package/dist/collection/components/bs-input/bs-input.css

@@ -0,0 +1,64 @@
+:host {
+  display: block;
+}
+
+.bs-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+  font-family: inherit;
+}
+
+.bs-input__label {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  color: var(--bs-input-label);
+}
+
+.bs-input__control {
+  height: var(--bs-spacing-600);
+  padding: 0 var(--bs-spacing-300);
+  border: 1px solid var(--bs-input-border-default);
+  border-radius: var(--bs-border-radius-100);
+  background: var(--bs-input-bg-default);
+  color: var(--bs-input-text);
+  font-size: var(--bs-font-size-md);
+  font-family: inherit;
+}
+
+.bs-input__control::placeholder {
+  color: var(--bs-input-placeholder);
+}
+
+.bs-input__control:hover:not(:disabled) {
+  border-color: var(--bs-input-border-hover);
+}
+
+.bs-input__control:focus-visible {
+  outline: none;
+  border-color: var(--bs-input-border-focus);
+}
+
+.bs-input__control:disabled {
+  background: var(--bs-input-bg-disabled);
+  color: var(--bs-input-text-disabled);
+  cursor: not-allowed;
+}
+
+.bs-input--error .bs-input__control {
+  border-color: var(--bs-input-border-error);
+}
+
+.bs-input--error .bs-input__label {
+  color: var(--bs-input-label);
+}
+
+.bs-input__description {
+  font-size: var(--bs-font-size-xs);
+  color: var(--bs-input-description);
+}
+
+.bs-input__error {
+  font-size: var(--bs-font-size-xs);
+  color: var(--bs-input-error);
+}