@tcn/ui-table 2.2.0 → 2.3.0

package/src/components/table/table.tsx

@@ -0,0 +1,183 @@
+import React, { isValidElement, ReactElement, useState, useRef } from 'react';
+
+import { DataSource } from '@tcn/resource-store';
+import { Status, useRunnerStatus, useSignalValue } from '@tcn/state';
+import { Box, BoxProps } from '@tcn/ui/stacks';
+import { BodyText } from '@tcn/ui/typography';
+import { DataCell } from '../cells/data_cell.js';
+import { FooterCell } from '../cells/footer_cell.js';
+import { HeaderCell } from '../cells/header_cell.js';
+import { StickyRowDataCell } from '../cells/sticky_row_data_cell.js';
+import { StickyRowFillCell } from '../cells/sticky_row_fill_cell.js';
+import styles from './table.module.css';
+import { TableColumn, TableColumnProps } from './table_column.js';
+import { TablePresenter } from './table_presenter.js';
+
+export type TableProps<T> = BoxProps & {
+  dataSource: DataSource<T>;
+  children: ReactElement<TableColumnProps<T>>[];
+  onRowClick?: (row: T, rowIndex: number) => void;
+  isRowHighlighted?: (row: T, rowIndex: number) => boolean;
+  stickyItems?: T[];
+};
+
+const HEADER_ROW_HEIGHT = 30;
+
+// @TODO: Props for loading and error states
+
+function wrapContent(content: React.ReactNode): React.ReactNode {
+  if (typeof content === 'string') {
+    return <BodyText>{content}</BodyText>;
+  }
+  return content;
+}
+
+export function Table<T>({
+  dataSource,
+  stickyItems,
+  children,
+  width = '100%',
+  height = '100%',
+  zIndex,
+  isRowHighlighted,
+  onRowClick,
+  ...props
+}: TableProps<T>) {
+  const rows = useSignalValue(dataSource.broadcasts.currentResults);
+  const page = useSignalValue(dataSource.broadcasts.currentPageIndex);
+
+  const scrollerRef = useRef<HTMLDivElement>(null);
+
+  const columns = React.Children.toArray(children).filter(
+    (child): child is ReactElement<TableColumnProps<T>> =>
+      isValidElement(child) && child.type === TableColumn
+  );
+
+  const [presenter] = useState(
+    () =>
+      new TablePresenter({
+        dataSource,
+        columns: columns.map(column => ({
+          fieldName: column.props.fieldName,
+          width: column.props.width ?? 100,
+          sortMode: 'none',
+          canSort: column.props.canSort ?? false,
+          heading: column.props.heading,
+          footer: column.props.footer,
+          sticky: column.props.sticky,
+          render: column.props.render,
+        })),
+        scrollerRef,
+      })
+  );
+
+  const columnInfo = useSignalValue(presenter.broadcasts.columnInfo);
+  const itemsStatus = useRunnerStatus(dataSource.broadcasts.currentResults);
+  const showFooter = useSignalValue(presenter.broadcasts.showFooter);
+
+  const isClickable = typeof onRowClick === 'function';
+  return (
+    <Box
+      ref={scrollerRef}
+      zIndex={zIndex}
+      className={styles['table-body-wrapper']}
+      style={{ overflow: 'auto' }}
+      {...props}
+    >
+      <table
+        className={styles['table-body']}
+        data-is-clickable={isClickable}
+        style={{ width, height }}
+      >
+        <thead>
+          <tr>
+            {columnInfo.map((column, index) => (
+              <HeaderCell
+                key={`h-${index}`}
+                index={index}
+                heading={wrapContent(column.heading)}
+                sticky={column.sticky}
+                onResize={newSize => presenter.setColumnWidth(index, newSize)}
+                width={column.width}
+                sortMode={column.sortMode}
+                onSortModeChange={() => presenter.setNextColumnSortMode(index)}
+                canSort={column.canSort}
+              />
+            ))}
+            <th key="fill" className="fill"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {stickyItems?.map((item, index) => (
+            <tr key={`sticky-${index}`} data-sticky-row>
+              {columnInfo.map((col, colIndex) => {
+                const fieldName = col.fieldName;
+                const render = col.render;
+                const content = render
+                  ? render(item)
+                  : fieldName
+                    ? String((item as Record<string, unknown>)[fieldName] ?? '')
+                    : '';
+                return (
+                  <StickyRowDataCell
+                    key={`${page}-${index}-${colIndex}`}
+                    content={content}
+                    sticky={col.sticky}
+                    width={col.width}
+                    top={HEADER_ROW_HEIGHT * (index + 1)}
+                  />
+                );
+              })}
+              <StickyRowFillCell top={HEADER_ROW_HEIGHT * (index + 1) + 1} />
+            </tr>
+          ))}
+          {itemsStatus === Status.SUCCESS &&
+            rows.map((item, rowIndex) => (
+              <tr
+                key={`${page}-${rowIndex}`}
+                data-selected={isRowHighlighted?.(item, rowIndex)}
+                onClick={() => onRowClick?.(item, rowIndex)}
+              >
+                {columnInfo.map((col, colIndex) => {
+                  const fieldName = col.fieldName;
+                  const render = col.render;
+                  const content = render
+                    ? render(item)
+                    : fieldName
+                      ? String((item as Record<string, unknown>)[fieldName] ?? '')
+                      : '';
+                  return (
+                    <DataCell
+                      key={`${page}-${rowIndex}-${colIndex}`}
+                      content={content}
+                      sticky={col.sticky}
+                      width={col.width}
+                    />
+                  );
+                })}
+                <td key="fill" className="fill"></td>
+              </tr>
+            ))}
+          {itemsStatus === Status.PENDING && 'Loading...'}
+          {itemsStatus === Status.ERROR && 'Error loading data'}
+          <tr key="fill" className="fill"></tr>
+        </tbody>
+        {showFooter && (
+          <tfoot>
+            <tr>
+              {columnInfo.map((col, colIndex) => (
+                <FooterCell
+                  key={`footer-${colIndex}`}
+                  content={wrapContent(col.footer)}
+                  sticky={col.sticky}
+                  width={col.width}
+                />
+              ))}
+              <td key="footer-fill" className="fill"></td>
+            </tr>
+          </tfoot>
+        )}
+      </table>
+    </Box>
+  );
+}

package/src/components/table/table_column.tsx

@@ -0,0 +1,27 @@
+type BaseTableColumnProps<T> = {
+  heading: React.ReactNode;
+  footer?: React.ReactNode;
+  render?: (item: T) => React.ReactNode;
+  sticky?: 'start' | 'end';
+  width?: number;
+};
+
+type SortableTableColumnProps<T> = BaseTableColumnProps<T> & {
+  fieldName: string;
+  canSort: true;
+};
+
+type NonSortableTableColumnProps<T> = BaseTableColumnProps<T> & {
+  fieldName?: string;
+  canSort?: false;
+};
+
+export type TableColumnProps<T> =
+  | SortableTableColumnProps<T>
+  | NonSortableTableColumnProps<T>;
+
+// This component never gets rendered. It is given as children to the
+// table body as configuration
+export function TableColumn<T>(_props: TableColumnProps<T>) {
+  return null;
+}

package/src/components/table/table_presenter.test.ts

@@ -0,0 +1,161 @@
+import { StaticDataSource, StaticStringField } from '@tcn/resource-store';
+import { Signal } from '@tcn/state';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { TablePresenter } from './table_presenter.js';
+
+type TestItem = {
+  name: string;
+  age: string;
+};
+
+describe('TablePresenter', () => {
+  let dataSource: StaticDataSource<TestItem>;
+  let mockColumnInfo: Array<{
+    width: number;
+    sortMode: 'none' | 'asc' | 'desc';
+    canSort: boolean;
+    heading: string;
+    fieldName?: string;
+  }>;
+
+  beforeEach(() => {
+    dataSource = new StaticDataSource<TestItem>(
+      [],
+      [
+        new StaticStringField('name', i => i.name),
+        new StaticStringField('age', i => i.age),
+      ]
+    );
+
+    mockColumnInfo = [
+      {
+        width: 100,
+        sortMode: 'none' as const,
+        canSort: true,
+        heading: 'Name',
+        fieldName: 'name',
+      },
+      {
+        width: 100,
+        sortMode: 'none' as const,
+        canSort: false,
+        heading: 'Age',
+        fieldName: 'age',
+      },
+    ];
+  });
+
+  describe('constructor', () => {
+    it('initializes with provided data source and columns', () => {
+      const presenter = new TablePresenter({
+        dataSource,
+        columns: mockColumnInfo,
+      });
+      const columnInfo = presenter.broadcasts.columnInfo.get();
+
+      expect(columnInfo).toEqual(mockColumnInfo);
+    });
+  });
+
+  describe('setColumnWidth', () => {
+    it('updates the width of the specified column', () => {
+      const presenter = new TablePresenter({
+        dataSource,
+        columns: mockColumnInfo,
+      });
+      const newWidth = 200;
+
+      presenter.setColumnWidth(0, newWidth);
+      const columnInfo = presenter.broadcasts.columnInfo.get();
+
+      expect(columnInfo[0].width).toBe(newWidth);
+      expect(columnInfo[1].width).toBe(mockColumnInfo[1].width);
+    });
+  });
+
+  describe('setColumnSortMode', () => {
+    it('updates sort mode and calls setFieldSort when fieldName exists', () => {
+      const presenter = new TablePresenter({
+        dataSource,
+        columns: mockColumnInfo,
+      });
+      const newSortMode = 'asc' as const;
+
+      presenter.setColumnSortMode(0, newSortMode);
+      const columnInfo = presenter.broadcasts.columnInfo.get();
+
+      expect(columnInfo[0].sortMode).toBe(newSortMode);
+      expect(dataSource.broadcasts.sortStatus.get()).toEqual([['name', 'asc']]);
+    });
+
+    it('does not update sort mode or call setFieldSort when fieldName is missing', () => {
+      const columnsWithoutFieldName = [
+        {
+          width: 100,
+          sortMode: 'none' as const,
+          canSort: true,
+          heading: 'Name',
+        },
+      ];
+      const presenter = new TablePresenter({
+        dataSource,
+        columns: columnsWithoutFieldName,
+      });
+      const newSortMode = 'asc' as const;
+
+      presenter.setColumnSortMode(0, newSortMode);
+      const columnInfo = presenter.broadcasts.columnInfo.get();
+
+      expect(columnInfo[0].sortMode).toBe('none');
+      expect(dataSource.broadcasts.sortStatus.get()).toEqual([]);
+    });
+  });
+
+  describe('setNextColumnSortMode', () => {
+    it('cycles through sort modes in order: none -> asc -> desc -> none', () => {
+      const presenter = new TablePresenter({
+        dataSource,
+        columns: mockColumnInfo,
+      });
+
+      // First click: none -> asc
+      presenter.setNextColumnSortMode(0);
+      expect(presenter.broadcasts.columnInfo.get()[0].sortMode).toBe('asc');
+      expect(dataSource.broadcasts.sortStatus.get()).toEqual([['name', 'asc']]);
+
+      // Second click: asc -> desc
+      presenter.setNextColumnSortMode(0);
+      expect(presenter.broadcasts.columnInfo.get()[0].sortMode).toBe('desc');
+      expect(dataSource.broadcasts.sortStatus.get()).toEqual([['name', 'desc']]);
+
+      // Third click: desc -> none
+      presenter.setNextColumnSortMode(0);
+      expect(presenter.broadcasts.columnInfo.get()[0].sortMode).toBe('none');
+      expect(dataSource.broadcasts.sortStatus.get()).toEqual([]);
+    });
+
+    it('does not cycle sort modes for unsortable columns', () => {
+      const presenter = new TablePresenter({
+        dataSource,
+        columns: mockColumnInfo,
+      });
+
+      presenter.setNextColumnSortMode(1);
+      expect(presenter.broadcasts.columnInfo.get()[1].sortMode).toBe('none');
+      expect(dataSource.broadcasts.sortStatus.get()).toEqual([]);
+    });
+  });
+
+  describe('broadcasts', () => {
+    it('provides access to column info signal', () => {
+      const presenter = new TablePresenter({
+        dataSource,
+        columns: mockColumnInfo,
+      });
+
+      expect(presenter.broadcasts.columnInfo).toBeInstanceOf(Signal);
+      expect(presenter.broadcasts.columnInfo.get()).toEqual(mockColumnInfo);
+    });
+  });
+});

package/src/components/table/table_presenter.ts

@@ -0,0 +1,103 @@
+import { ReactNode, RefObject } from 'react';
+
+import { DataSource } from '@tcn/resource-store';
+import { ISubscription, Signal } from '@tcn/state';
+
+type SortMode = 'none' | 'asc' | 'desc';
+
+const sortModes: SortMode[] = ['none', 'asc', 'desc'];
+
+export type ColumnInfo = {
+  width: number;
+  render?: (item: any) => ReactNode;
+  sortMode: SortMode;
+  canSort: boolean;
+  heading: ReactNode;
+  footer?: ReactNode;
+  sticky?: 'start' | 'end';
+  fieldName?: string;
+};
+
+export class TablePresenter {
+  private _columnInfo = new Signal<ColumnInfo[]>([]);
+  private _dataSource: DataSource<any>;
+  private _showFooter = new Signal<boolean>(false);
+  private _broadcasts = {
+    columnInfo: this._columnInfo.broadcast,
+    showFooter: this._showFooter.broadcast,
+  };
+
+  private _scrollerRef?: RefObject<HTMLDivElement>;
+
+  // holding a reference to this subscription prevents it from being garbage collected
+  private _pageSubscription?: ISubscription<number>;
+
+  constructor({
+    dataSource,
+    columns,
+    scrollerRef,
+  }: {
+    dataSource: DataSource<any>;
+    columns: ColumnInfo[];
+    scrollerRef?: RefObject<HTMLDivElement>;
+  }) {
+    this._dataSource = dataSource;
+    this._columnInfo.set(columns);
+    this._scrollerRef = scrollerRef;
+
+    const showFooter = columns.some(column => column.footer);
+    this._showFooter.set(showFooter);
+
+    this._pageSubscription = this._dataSource.broadcasts.currentPageIndex.subscribe(_ => {
+      if (this._scrollerRef?.current) {
+        this._scrollerRef.current.scrollTo({ top: 0 });
+      }
+    });
+  }
+
+  get broadcasts() {
+    return this._broadcasts;
+  }
+
+  setColumnWidth(index: number, width: number) {
+    this._columnInfo.transform(columnInfo => {
+      columnInfo[index].width = width;
+      return columnInfo;
+    });
+  }
+
+  setColumnSortMode(index: number, sortMode: SortMode) {
+    const column = this._columnInfo.get()[index];
+    const fieldName = column.fieldName;
+    if (!column.canSort) {
+      return;
+    }
+
+    if (!fieldName) {
+      // can't sort a field without a name
+      return;
+    }
+
+    this._dataSource.setFieldSort(fieldName, sortMode);
+
+    this._columnInfo.transform(columnInfo => {
+      columnInfo[index].sortMode = sortMode;
+      return columnInfo;
+    });
+  }
+
+  setNextColumnSortMode(index: number) {
+    const column = this._columnInfo.get()[index];
+
+    const currentMode = column.sortMode;
+    const currentIndex = sortModes.indexOf(currentMode);
+    const nextIndex = (currentIndex + 1) % sortModes.length;
+    const nextMode = sortModes[nextIndex];
+
+    this.setColumnSortMode(index, nextMode);
+  }
+
+  dispose() {
+    this._pageSubscription?.unsubscribe();
+  }
+}

package/src/components/table_filter_panel/field_filters/date_field_filter.tsx

@@ -0,0 +1,70 @@
+import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
+import { useSignalValue } from '@tcn/state';
+import { Button } from '@tcn/ui/actions';
+import { DatePickerInput } from '@tcn/ui/inputs';
+import { Box, HStack, VStack } from '@tcn/ui/stacks';
+import { BodyText, Title } from '@tcn/ui/typography';
+import React from 'react';
+import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
+import { DateFieldFilterPresenter } from './date_field_filter_presenter.js';
+
+export function DateFieldFilter({
+  fieldName,
+  label,
+}: {
+  fieldName: string;
+  label: string;
+}) {
+  const presenter = useFieldFilterStrategy(DateFieldFilterPresenter, fieldName);
+
+  const startDate = useSignalValue(presenter.broadcasts.startDate);
+  const endDate = useSignalValue(presenter.broadcasts.endDate);
+
+  return (
+    <VStack gap="4px">
+      <Box width="flex">
+        <Title size="md">{label}</Title>
+      </Box>
+      <HStack gap="4px">
+        <Box width="auto">
+          <BodyText size="lg">Start</BodyText>
+        </Box>
+        <Box width="flex">
+          <DatePickerInput
+            value={startDate}
+            onChange={value => presenter.setStartDate(value)}
+          />
+        </Box>
+        <Box width="auto">
+          <Button
+            onClick={() => presenter.setStartDate(null)}
+            hierarchy="tertiary"
+            disabled={startDate == null}
+          >
+            <CrossCircleIcon />
+          </Button>
+        </Box>
+      </HStack>
+      <HStack gap="4px">
+        <Box width="auto">
+          <BodyText size="lg">End</BodyText>
+        </Box>
+        <Box width="flex">
+          <DatePickerInput
+            value={endDate}
+            onChange={value => presenter.setEndDate(value)}
+          />
+        </Box>
+        <Box width="auto">
+          <Button
+            onClick={() => presenter.setEndDate(null)}
+            hierarchy="tertiary"
+            disabled={endDate == null}
+          >
+            <CrossCircleIcon />
+          </Button>
+        </Box>
+      </HStack>
+    </VStack>
+  );
+}