Toniq List Table (#72)

Author: ponnexcodev

cspell.config.cjs

@@ -7,6 +7,7 @@ module.exports = {
         '.storybook-dist',
         '*.otf',
         '/graphics/',
+        './.github/CODEOWNERS',
     ],
     words: [
         ...baseConfig.words,
@@ -19,7 +20,6 @@ module.exports = {
         'nftgeek',
         'tablist',
         'toniq',
-        'stephenandrews',
-        'ponnexcodev',
+        'CODEOWNERS',
     ],
 };

package-lock.json

@@ -13,6 +13,7 @@ import {toniqHeadingBookPage} from '../elements/toniq-heading/toniq-heading.elem
 import {toniqHyperlinkPage} from '../elements/toniq-hyperlink/toniq-hyperlink.element.book';
 import {toniqIconBookPage} from '../elements/toniq-icon/toniq-icon.element.book';
 import {toniqInputPage} from '../elements/toniq-input/toniq-input.element.book';
+import {toniqListTableElementBookPage} from '../elements/toniq-list-table/toniq-list-table.element.book';
 import {toniqLoadingBookPage} from '../elements/toniq-loading/toniq-loading.element.book';
 import {toniqMiddleEllipsisPage} from '../elements/toniq-middle-ellipsis/toniq-middle-ellipsis.element.book';
 import {toniqProgressBookPage} from '../elements/toniq-progress/toniq-progress.element.book';
@@ -64,6 +65,7 @@ const childPages = [
     toniqSliderPage,
     toniqToggleButtonBookPage,
     toniqTopTabsPage,
+    toniqListTableElementBookPage,
 ].sort((a, b) => a.title.localeCompare(b.title));
 
 export const allElementBookEntries = [

packages/design-system/src/element-book/all-element-book-entries.ts

@@ -16,6 +16,7 @@ export * from './toniq-heading/toniq-heading.element';
 export * from './toniq-hyperlink/toniq-hyperlink.element';
 export * from './toniq-icon/toniq-icon.element';
 export * from './toniq-input/toniq-input.element';
+export * from './toniq-list-table/toniq-list-table.element';
 export * from './toniq-loading/toniq-loading.element';
 export * from './toniq-middle-ellipsis/toniq-middle-ellipsis.element';
 export * from './toniq-pagination/toniq-pagination.element';

packages/design-system/src/elements/index.ts

@@ -0,0 +1,58 @@
+import {assertTypeOf} from 'run-time-assertions';
+import {createListTableTable} from './list-table-inputs';
+
+describe(createListTableTable.name, () => {
+    it('should have proper type enforcement', () => {
+        createListTableTable({
+            entries: [],
+            columns: [
+                {key: 'first', title: 'First'},
+                {key: 'second', title: 'Second'},
+            ],
+            // missing keys
+            // @ts-expect-error
+            createRowObject(entry) {
+                return {
+                    cells: {
+                        first: 'yo',
+                    },
+                };
+            },
+        });
+        createListTableTable({
+            entries: [
+                {
+                    key1: 'string',
+                    key2: 42,
+                },
+            ],
+            columns: [
+                {key: 'first', title: 'First'},
+                {key: 'second', title: 'Second'},
+            ],
+            createRowObject(entry) {
+                assertTypeOf(entry).toEqualTypeOf<Readonly<{key1: string; key2: number}>>();
+                return {
+                    cells: {
+                        first: 'yo',
+                        second: 'hi',
+                    },
+                };
+            },
+        });
+        createListTableTable({
+            entries: [
+                {
+                    key1: 'string',
+                    key2: 42,
+                },
+            ],
+            columns: [],
+            // can't do anything if columNames is empty
+            // @ts-expect-error
+            createRowObject(entry) {
+                return {cells: {}};
+            },
+        });
+    });
+});

packages/design-system/src/elements/toniq-list-table/list-table-inputs.test.ts

@@ -0,0 +1,92 @@
+import {ArrayElement, PartialAndUndefined, areJsonEqual} from '@augment-vir/common';
+import {HtmlInterpolation} from 'element-vir';
+
+export type ColumnsBase = ReadonlyArray<
+    Readonly<{
+        key: PropertyKey;
+        title: string;
+        disabled?: boolean;
+        mobile?: {
+            sticky: boolean | undefined;
+        };
+    }>
+>;
+
+export type HeaderItem = {
+    title: string;
+    key: string;
+    left: number;
+    mobile?: {
+        sticky: boolean;
+    };
+};
+
+export type ListTableRow<Columns extends ColumnsBase> = {
+    cells: Readonly<
+        ArrayElement<Columns> extends never
+            ? never
+            : Record<ArrayElement<Columns>['key'], HtmlInterpolation>
+    >;
+    rowActions?:
+        | PartialAndUndefined<{
+              click: (params: {
+                  clickEvent: MouseEvent;
+                  dispatch: (newEvent: Event) => void;
+              }) => void;
+          }>
+        | undefined;
+};
+
+export enum ListTableHeaderStyleEnum {
+    Default = 'default',
+    Transparent = 'transparent',
+}
+
+export type ListTableInputs = {
+    columns: Readonly<ColumnsBase>;
+    rows: ReadonlyArray<Readonly<ListTableRow<any>>>;
+    /** Defaults to ListTableHeaderStyleEnum.Default. */
+    headerStyle?: ListTableHeaderStyleEnum | undefined;
+    pagination?:
+        | Readonly<{
+              currentPage: number;
+              pageCount: number;
+          }>
+        | undefined;
+    showLoading?: boolean | undefined;
+};
+
+export type CreateRowObjectCallback<EntryType, Columns extends ColumnsBase> = (
+    entry: Readonly<EntryType>,
+    index: number,
+) => Readonly<ListTableRow<Columns>>;
+
+export function createListTableTable<EntryType, const Columns extends ColumnsBase>({
+    entries,
+    columns,
+    createRowObject,
+}: {
+    entries: ReadonlyArray<Readonly<EntryType>>;
+    columns: Readonly<Columns>;
+    createRowObject: CreateRowObjectCallback<EntryType, Columns>;
+}): Pick<ListTableInputs, 'rows' | 'columns'> {
+    const columnsObject = Object.fromEntries(
+        columns.map((column) => [
+            column.key,
+            '',
+        ]),
+    );
+
+    const rows = entries.map((entry, index) => {
+        const row = createRowObject(entry, index);
+
+        if (!areJsonEqual(Object.keys(columnsObject).sort(), Object.keys(row.cells).sort())) {
+            console.error('broken list table row', {cells: row.cells, columns: columnsObject});
+            throw new Error('List table row keys does not match expect column keys.');
+        }
+
+        return row;
+    });
+
+    return {rows, columns};
+}