@tcn/ui-table 2.2.0 → 2.3.0

package/src/components/table_filter_panel/field_filters/string_field_filter_presenter.test.ts

@@ -0,0 +1,296 @@
+import { Node } from 'clarity-pattern-parser';
+import { StringFieldFilterPresenter } from './string_field_filter_presenter.js';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('StringFieldFilterPresenter', () => {
+  let presenter: StringFieldFilterPresenter;
+  let mockFieldRegistry: any;
+
+  beforeEach(() => {
+    presenter = new StringFieldFilterPresenter('test_field');
+    mockFieldRegistry = {
+      registerFieldFilter: vi.fn(),
+      unregisterFieldFilter: vi.fn(),
+    };
+  });
+
+  describe('constructor', () => {
+    it('should initialize with the correct field name', () => {
+      const presenter = new StringFieldFilterPresenter('custom_field');
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should initialize with default values', () => {
+      expect(presenter.getFilterString()).toBe('');
+    });
+  });
+
+  describe('setValue', () => {
+    it('should set the value when setValue is called with a string', () => {
+      presenter.setValue('test_value');
+      presenter.setOperator('=');
+      expect(presenter.getFilterString()).toBe('test_field = "test_value"');
+    });
+
+    it('should set the value when setValue is called with null', () => {
+      presenter.setValue('test_value');
+      presenter.setValue(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should trigger onChange handlers when value is set', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setValue('new_value');
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setOperator', () => {
+    it('should set the operator when setOperator is called', () => {
+      presenter.setValue('test_value');
+      presenter.setOperator('>');
+      expect(presenter.getFilterString()).toBe('test_field > "test_value"');
+    });
+
+    it('should work with all comparison operators', () => {
+      const operators = ['>=', '>', '<=', '<', '=', ':', '!='] as const;
+      presenter.setValue('test_value');
+
+      operators.forEach(operator => {
+        presenter.setOperator(operator);
+        expect(presenter.getFilterString()).toBe(`test_field ${operator} "test_value"`);
+      });
+    });
+
+    it('should trigger onChange handlers when operator is set', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setOperator('>');
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('getFilterString', () => {
+    it('should return empty string when value is null', () => {
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should return empty string when value is set to null', () => {
+      presenter.setValue('test_value');
+      presenter.setValue(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should return formatted filter string with value and operator', () => {
+      presenter.setValue('test_value');
+      presenter.setOperator('=');
+      expect(presenter.getFilterString()).toBe('test_field = "test_value"');
+    });
+
+    it('should handle special characters in values', () => {
+      presenter.setValue('test"value');
+      presenter.setOperator('!=');
+      expect(presenter.getFilterString()).toBe('test_field != "test\\"value"');
+    });
+  });
+
+  describe('onChange', () => {
+    it('should register onChange handler and return unsubscribe function', () => {
+      const onChangeHandler = vi.fn();
+      const unsubscribe = presenter.onChange(onChangeHandler);
+
+      presenter.setValue('test_value');
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+
+      unsubscribe();
+      presenter.setValue('another_value');
+      expect(onChangeHandler).toHaveBeenCalledTimes(1); // Should not be called again
+    });
+
+    it('should handle multiple onChange handlers', () => {
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+
+      presenter.onChange(handler1);
+      presenter.onChange(handler2);
+
+      presenter.setValue('test_value');
+
+      expect(handler1).toHaveBeenCalledTimes(1);
+      expect(handler2).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle removing onChange handlers', () => {
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+
+      const unsubscribe1 = presenter.onChange(handler1);
+      presenter.onChange(handler2);
+
+      unsubscribe1();
+      presenter.setValue('test_value');
+
+      expect(handler1).not.toHaveBeenCalled();
+      expect(handler2).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setFieldRegistry', () => {
+    it('should register the field filter with the registry', () => {
+      presenter.setFieldRegistry(mockFieldRegistry);
+
+      expect(mockFieldRegistry.registerFieldFilter).toHaveBeenCalledWith(
+        'test_field',
+        presenter
+      );
+    });
+
+    it('should store the field registry reference', () => {
+      presenter.setFieldRegistry(mockFieldRegistry);
+
+      // Test that dispose can call unregisterFieldFilter
+      presenter.dispose();
+      expect(mockFieldRegistry.unregisterFieldFilter).toHaveBeenCalledWith('test_field');
+    });
+  });
+
+  describe('setFilterState', () => {
+    it('should parse filter AST and set operator and value', () => {
+      // Create a mock AST node structure
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '=' },
+                { name: 'string', value: '"test_value"' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe('test_field = "test_value"');
+    });
+
+    it('should handle case when field is not found in AST', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([]),
+      } as unknown as Node;
+
+      presenter.setValue('existing_value');
+      presenter.setOperator('>');
+
+      presenter.setFilterState(mockAst);
+
+      // Should not change existing state
+      expect(presenter.getFilterString()).toBe('test_field > "existing_value"');
+    });
+
+    it('should handle case when field node has no parent', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: null,
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setValue('existing_value');
+      presenter.setOperator('>');
+
+      presenter.setFilterState(mockAst);
+
+      // Should not change existing state
+      expect(presenter.getFilterString()).toBe('test_field > "existing_value"');
+    });
+
+    it('should extract value without quotes from AST', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '!=' },
+                { name: 'string', value: '"quoted_value"' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe('test_field != "quoted_value"');
+    });
+  });
+
+  describe('dispose', () => {
+    it('should unregister field filter from registry when registry is set', () => {
+      presenter.setFieldRegistry(mockFieldRegistry);
+      presenter.dispose();
+
+      expect(mockFieldRegistry.unregisterFieldFilter).toHaveBeenCalledWith('test_field');
+    });
+
+    it('should not call unregisterFieldFilter when no registry is set', () => {
+      presenter.dispose();
+
+      expect(mockFieldRegistry.unregisterFieldFilter).not.toHaveBeenCalled();
+    });
+
+    it('should clear onChange handlers', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.dispose();
+      presenter.setValue('test_value');
+
+      expect(onChangeHandler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('edge cases and error handling', () => {
+    it('should handle rapid successive value changes', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setValue('value1');
+      presenter.setValue('value2');
+      presenter.setValue('value3');
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(3);
+      expect(presenter.getFilterString()).toBe('test_field : "value3"');
+    });
+
+    it('should handle rapid successive operator changes', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setValue('test_value');
+      presenter.setOperator('=');
+      presenter.setOperator('>');
+      presenter.setOperator('!=');
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(4); // 1 for value + 3 for operators
+      expect(presenter.getFilterString()).toBe('test_field != "test_value"');
+    });
+  });
+});

package/src/components/table_filter_panel/field_filters/string_field_filter_presenter.ts

@@ -0,0 +1,81 @@
+import { Signal } from '@tcn/state';
+import { Node } from 'clarity-pattern-parser';
+import { FieldFilterRegistry, FieldFilterStrategy } from './field_filter_strategy.js';
+import { ComparisonOperator } from '../types.js';
+
+export class StringFieldFilterPresenter implements FieldFilterStrategy {
+  private _fieldName: string;
+  private _value = new Signal<string | null>(null);
+  private _operator = new Signal<ComparisonOperator>(':');
+  private _fieldFilterRegistry: FieldFilterRegistry | null = null;
+  private _onChangeHandlers = new Set<() => void>();
+
+  private _broadcasts = {
+    value: this._value.broadcast,
+    operator: this._operator.broadcast,
+  };
+
+  constructor(fieldName: string) {
+    this._fieldName = fieldName;
+  }
+
+  get broadcasts() {
+    return this._broadcasts;
+  }
+
+  onChange(handler: () => void) {
+    this._onChangeHandlers.add(handler);
+    return () => {
+      this._onChangeHandlers.delete(handler);
+    };
+  }
+
+  setFieldRegistry(fieldRegistry: FieldFilterRegistry) {
+    this._fieldFilterRegistry = fieldRegistry;
+    fieldRegistry.registerFieldFilter(this._fieldName, this);
+  }
+
+  getFilterString() {
+    if (this._value.get() === null) {
+      return '';
+    }
+    return `${this._fieldName} ${this._operator.get()} "${this._value.get()}"`;
+  }
+
+  setValue(value: string | null) {
+    const escapedValue = value?.replace(/"/g, '\\"') ?? null;
+    this._value.set(escapedValue === '' ? null : escapedValue);
+    this._onChangeHandlers.forEach(handler => handler());
+  }
+
+  setOperator(operator: ComparisonOperator) {
+    this._operator.set(operator);
+    this._onChangeHandlers.forEach(handler => handler());
+  }
+
+  setFilterState(filterAst: Node) {
+    const fieldNodes = filterAst.findAll(
+      (n: Node) => n.name === 'plain-field' && n.value === this._fieldName
+    );
+
+    const fieldNode = fieldNodes.filter(
+      (n: Node) => n.parent !== null && n.parent.name === 'infix-expression'
+    )[0];
+
+    if (fieldNode == null) {
+      return;
+    }
+
+    const parent = fieldNode.parent as Node;
+    const operatorNode = parent.children[1] as Node;
+    const valueNode = parent.children[2] as Node;
+    this._operator.set(operatorNode.value as ComparisonOperator);
+    const value = valueNode.value as string;
+    this._value.set(value.slice(1, -1));
+  }
+
+  dispose() {
+    this._fieldFilterRegistry?.unregisterFieldFilter(this._fieldName);
+    this._onChangeHandlers.clear();
+  }
+}

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

@@ -0,0 +1,30 @@
+import { useContext, useEffect, useState } from 'react';
+import { FieldFilterStrategy } from './field_filter_strategy.js';
+import { TableFilterPanelContext } from '../table_filter_panel.js';
+
+type FieldFilterStrategyConstructor<T> = new (...args: any[]) => T;
+
+export function useFieldFilterStrategy<T extends FieldFilterStrategy>(
+  filterPresenterConstructor: FieldFilterStrategyConstructor<T>,
+  ...args: any[]
+): T {
+  const panelPresenter = useContext(TableFilterPanelContext);
+
+  const [presenter] = useState<T>(() => {
+    return new filterPresenterConstructor(...args);
+  });
+
+  useEffect(() => {
+    if (panelPresenter) {
+      presenter.setFieldRegistry(panelPresenter);
+    }
+  }, [panelPresenter, presenter]);
+
+  useEffect(() => {
+    return () => {
+      presenter.dispose();
+    };
+  }, [presenter]);
+
+  return presenter;
+}

package/src/components/table_filter_panel/table_filter_panel.stories.tsx

@@ -0,0 +1,46 @@
+import {
+  StaticDataSource,
+  StaticNumberField,
+  StaticStringField,
+} from '@tcn/resource-store';
+import React, { useState } from 'react';
+import { items } from '../../__stories__/sample_data.js';
+import { NumberFieldFilter } from './field_filters/number_field_filter.js';
+import { TableFilterPanel } from './table_filter_panel.js';
+
+type DataItem = {
+  id: string;
+  name: string;
+  age: number;
+  email: string;
+  city: string;
+  country: string;
+  occupation: string;
+  isActive: boolean;
+};
+
+export default {
+  title: 'TableFilterPanel',
+};
+
+export const Demo = () => {
+  const [source] = useState(() => {
+    return new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+  });
+
+  return (
+    <div style={{ width: '300px' }}>
+      <TableFilterPanel dataSource={source}>
+        <NumberFieldFilter fieldName="age" label="Age" />
+      </TableFilterPanel>
+    </div>
+  );
+};

package/src/components/table_filter_panel/table_filter_panel.tsx

@@ -0,0 +1,26 @@
+import { DataSource } from '@tcn/resource-store';
+import { VStack } from '@tcn/ui/stacks';
+import React, { ReactElement, useState, createContext } from 'react';
+import { FieldFilterProps } from './field_filters/field_filter_props.js';
+import { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';
+
+export type TableFilterPanelProps = {
+  children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;
+  dataSource: DataSource<any>;
+};
+
+export function TableFilterPanel({ children, dataSource }: TableFilterPanelProps) {
+  const [presenter] = useState(() => {
+    return new TableFilterPanelPresenter(dataSource);
+  });
+
+  return (
+    <TableFilterPanelContext.Provider value={presenter}>
+      <VStack gap="16px">{children}</VStack>
+    </TableFilterPanelContext.Provider>
+  );
+}
+
+export const TableFilterPanelContext = createContext<TableFilterPanelPresenter | null>(
+  null
+);

package/src/components/table_filter_panel/table_filter_panel_presenter.ts

@@ -0,0 +1,77 @@
+import { parseFilterString } from '@tcn/aip-160';
+import { DataSource } from '@tcn/resource-store';
+import { Node } from 'clarity-pattern-parser';
+import { FieldFilterStrategy } from './field_filters/field_filter_strategy.js';
+import { FieldFilterRegistry } from './field_filters/field_filter_strategy.js';
+export class TableFilterPanelPresenter<T = unknown> implements FieldFilterRegistry {
+  private _dataSource: DataSource<T>;
+  private _unsubscribers = new Map<string, () => void>();
+
+  private _fieldFilters = new Map<string, FieldFilterStrategy>();
+
+  // Some state to prevent infinite loops.
+  // Disable filtering while we're setting state of all the fields
+  // based on an updated filter string.
+  private _lastKnownFilterString = '';
+  private _disableObserving = false;
+
+  constructor(dataSource: DataSource<T>) {
+    this._dataSource = dataSource;
+    this._dataSource.broadcasts.filterString.subscribe(filterString => {
+      if (filterString !== this._lastKnownFilterString) {
+        this._disableObserving = true;
+        for (const fieldFilter of this._fieldFilters.values()) {
+          this._setFieldFilterState(fieldFilter);
+        }
+        this._disableObserving = false;
+      }
+    });
+  }
+
+  registerFieldFilter(fieldName: string, fieldFilter: FieldFilterStrategy) {
+    this._fieldFilters.set(fieldName, fieldFilter);
+    const unsubscribe = fieldFilter.onChange(() => {
+      if (!this._disableObserving) {
+        this._applyFilters();
+      }
+    });
+    this._unsubscribers.set(fieldName, unsubscribe);
+    this._setFieldFilterState(fieldFilter);
+  }
+
+  unregisterFieldFilter(fieldName: string) {
+    this._fieldFilters.delete(fieldName);
+    this._unsubscribers.get(fieldName)?.();
+    this._unsubscribers.delete(fieldName);
+  }
+
+  private async _applyFilters() {
+    const filterString = Array.from(this._fieldFilters.values())
+      .map(fieldFilter => fieldFilter.getFilterString())
+      .filter(Boolean)
+      .join(' AND ');
+
+    this._lastKnownFilterString = filterString;
+    this._dataSource.setFilterString(filterString);
+  }
+
+  private async _setFieldFilterState(fieldFilter: FieldFilterStrategy) {
+    const filterString = this._dataSource.broadcasts.filterString.get();
+    // TODO: Why isn't this type working?
+    const ast = (await parseFilterString(filterString)) as Node | null;
+    if (ast == null) {
+      return;
+    }
+
+    ast.findAll((n: Node) => n.name === 'space').forEach((n: Node) => n.remove());
+
+    ast.walkBreadthFirst((n: Node) => {
+      const firstChild = n.children[0];
+      if (n.children.length === 1 && firstChild.children.length === 0) {
+        n.replaceWith(firstChild);
+      }
+    });
+
+    fieldFilter.setFilterState(ast);
+  }
+}

package/src/components/table_filter_panel/types.ts

@@ -0,0 +1,3 @@
+export type ComparisonOperator = '>=' | '>' | '<=' | '<' | '=' | ':' | '!=';
+
+export const comparisonOperators = ['>=', '>', '<=', '<', '=', ':', '!='];

package/src/components/table_pager.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';
+import { DataSource } from '@tcn/resource-store';
+import { useSignalValue } from '@tcn/state';
+import { Button } from '@tcn/ui/actions';
+import { HStack, HStackOwnProps, WithDetailedHTMLProps } from '@tcn/ui/stacks';
+import { BodyText } from '@tcn/ui/typography';
+
+import { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';
+import styles from './table_pager.module.css';
+
+export interface TablePagerOwnProps<T> {
+  dataSource: DataSource<T>;
+}
+export type TablePagerProps<T> = WithDetailedHTMLProps<
+  TablePagerOwnProps<T> & HStackOwnProps,
+  'div'
+>;
+
+export function TablePager<T>({ dataSource, ...props }: TablePagerProps<T>) {
+  const pageIndex = useSignalValue(dataSource.broadcasts.currentPageIndex);
+  const hasNextPage = useSignalValue(dataSource.broadcasts.hasNextPage);
+
+  return (
+    <HStack as="div" height="auto" width="auto" gap="8px" {...props}>
+      <HStack gap="4px" width="auto">
+        <BodyText>Page:</BodyText>
+        <BodyText className={styles['page-count']}>{pageIndex + 1}</BodyText>
+      </HStack>
+      <Button onClick={() => dataSource.previousPage()} disabled={pageIndex === 0}>
+        <ChevronLeftIcon flipOnRtl />
+      </Button>
+      <Button onClick={() => dataSource.nextPage()} disabled={!hasNextPage}>
+        <ChevronRightIcon flipOnRtl />
+      </Button>
+    </HStack>
+  );
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+export { Table } from './components/table/table.js';
+export { TableColumn } from './components/table/table_column.js';
+export { TablePager } from './components/table_pager.js';
+export { GlobalSearch } from './components/global_search.js';
+export { TableFilterPanel } from './components/table_filter_panel/table_filter_panel.js';
+export { NumberFieldFilter } from './components/table_filter_panel/field_filters/number_field_filter.js';
+export { StringFieldFilter } from './components/table_filter_panel/field_filters/string_field_filter.js';
+export { DateFieldFilter } from './components/table_filter_panel/field_filters/date_field_filter.js';
+export { NumberRangeFieldFilter } from './components/table_filter_panel/field_filters/number_range_field_filter.js';
+export { MulitSelectFieldFilter } from './components/table_filter_panel/field_filters/mulit_select_field_filter.js';
+export { SelectFieldFilter } from './components/table_filter_panel/field_filters/select_field_filter.js';
+
+// for making your own field filter
+export type { FieldFilterStrategy } from './components/table_filter_panel/field_filters/field_filter_strategy.js';
+export type { FieldFilterProps } from './components/table_filter_panel/field_filters/field_filter_props.js';
+export { useFieldFilterStrategy as useFilterFieldStrategy } from './components/table_filter_panel/field_filters/use_field_filter_strategy.js';

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "~aip-160/*": [
+        "../aip-160/src/*"
+      ],
+      "~aip-160-editor/*": [
+        "../aip-160-editor/src/*"
+      ],
+      "~icons/*": [
+        "../icons/src/*"
+      ],
+      "~resource-store/*": [
+        "../resource-store/src/*"
+      ],
+      "~sb-blackcat-addon/*": [
+        "../sb-blackcat-addon/src/*"
+      ],
+      "~state/*": [
+        "../state/src/*"
+      ],
+      "~ui/*": [
+        "../ui/src/*"
+      ],
+      "~ui-table/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "types/**/*"
+  ]
+}