@tcn/ui-table 2.2.0 → 2.3.0

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

@@ -0,0 +1,431 @@
+import { Node } from 'clarity-pattern-parser';
+import { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('NumberFieldFilterPresenter', () => {
+  let presenter: NumberFieldFilterPresenter;
+  let mockFieldRegistry: any;
+
+  beforeEach(() => {
+    presenter = new NumberFieldFilterPresenter('test_field');
+    mockFieldRegistry = {
+      registerFieldFilter: vi.fn(),
+      unregisterFieldFilter: vi.fn(),
+    };
+  });
+
+  describe('constructor', () => {
+    it('should initialize with the correct field name', () => {
+      const presenter = new NumberFieldFilterPresenter('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 number', () => {
+      presenter.setValue(42);
+      presenter.setOperator('=');
+      expect(presenter.getFilterString()).toBe('test_field = 42');
+    });
+
+    it('should set the value when setValue is called with null', () => {
+      presenter.setValue(42);
+      presenter.setValue(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should handle zero values', () => {
+      presenter.setValue(0);
+      presenter.setOperator('=');
+      expect(presenter.getFilterString()).toBe('test_field = 0');
+    });
+
+    it('should handle negative values', () => {
+      presenter.setValue(-42);
+      presenter.setOperator('>');
+      expect(presenter.getFilterString()).toBe('test_field > -42');
+    });
+
+    it('should handle decimal values', () => {
+      presenter.setValue(3.14);
+      presenter.setOperator('>=');
+      expect(presenter.getFilterString()).toBe('test_field >= 3.14');
+    });
+
+    it('should trigger onChange handlers when value is set', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setValue(42);
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setOperator', () => {
+    it('should set the operator when setOperator is called', () => {
+      presenter.setValue(42);
+      presenter.setOperator('>');
+      expect(presenter.getFilterString()).toBe('test_field > 42');
+    });
+
+    it('should work with all comparison operators', () => {
+      const operators = ['>=', '>', '<=', '<', '=', ':', '!='] as const;
+      presenter.setValue(42);
+
+      operators.forEach(operator => {
+        presenter.setOperator(operator);
+        expect(presenter.getFilterString()).toBe(`test_field ${operator} 42`);
+      });
+    });
+
+    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(42);
+      presenter.setValue(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should return formatted filter string with value and operator', () => {
+      presenter.setValue(42);
+      presenter.setOperator('=');
+      expect(presenter.getFilterString()).toBe('test_field = 42');
+    });
+
+    it('should handle zero values correctly', () => {
+      presenter.setValue(0);
+      presenter.setOperator('=');
+      expect(presenter.getFilterString()).toBe('test_field = 0');
+    });
+
+    it('should handle negative values correctly', () => {
+      presenter.setValue(-42);
+      presenter.setOperator('>');
+      expect(presenter.getFilterString()).toBe('test_field > -42');
+    });
+
+    it('should handle decimal values correctly', () => {
+      presenter.setValue(3.14159);
+      presenter.setOperator('>=');
+      expect(presenter.getFilterString()).toBe('test_field >= 3.14159');
+    });
+
+    it('should handle large numbers', () => {
+      presenter.setValue(1000000);
+      presenter.setOperator('<');
+      expect(presenter.getFilterString()).toBe('test_field < 1000000');
+    });
+  });
+
+  describe('onChange', () => {
+    it('should register onChange handler and return unsubscribe function', () => {
+      const onChangeHandler = vi.fn();
+      const unsubscribe = presenter.onChange(onChangeHandler);
+
+      presenter.setValue(42);
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+
+      unsubscribe();
+      presenter.setValue(100);
+      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(42);
+
+      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(42);
+
+      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: 'number', value: '42' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe('test_field = 42');
+    });
+
+    it('should handle case when field is not found in AST', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([]),
+      } as unknown as Node;
+
+      presenter.setValue(42);
+      presenter.setOperator('>');
+
+      presenter.setFilterState(mockAst);
+
+      // Should not change existing state
+      expect(presenter.getFilterString()).toBe('test_field > 42');
+    });
+
+    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(42);
+      presenter.setOperator('>');
+
+      presenter.setFilterState(mockAst);
+
+      // Should not change existing state
+      expect(presenter.getFilterString()).toBe('test_field > 42');
+    });
+
+    it('should parse numeric values 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: 'number', value: '100' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe('test_field != 100');
+    });
+
+    it('should handle decimal values 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: 'number', value: '3.14' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe('test_field >= 3.14');
+    });
+
+    it('should handle negative values 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: 'number', value: '-42' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe('test_field < -42');
+    });
+
+    it('should handle zero values 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: 'number', value: '0' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe('test_field = 0');
+    });
+  });
+
+  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(42);
+
+      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(10);
+      presenter.setValue(20);
+      presenter.setValue(30);
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(3);
+      expect(presenter.getFilterString()).toBe('test_field = 30');
+    });
+
+    it('should handle rapid successive operator changes', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setValue(42);
+      presenter.setOperator('=');
+      presenter.setOperator('>');
+      presenter.setOperator('!=');
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(4); // 1 for value + 3 for operators
+      expect(presenter.getFilterString()).toBe('test_field != 42');
+    });
+
+    it('should handle very large numbers', () => {
+      presenter.setValue(Number.MAX_SAFE_INTEGER);
+      presenter.setOperator('>');
+      expect(presenter.getFilterString()).toBe(`test_field > ${Number.MAX_SAFE_INTEGER}`);
+    });
+
+    it('should handle very small numbers', () => {
+      presenter.setValue(Number.MIN_SAFE_INTEGER);
+      presenter.setOperator('<');
+      expect(presenter.getFilterString()).toBe(`test_field < ${Number.MIN_SAFE_INTEGER}`);
+    });
+
+    it('should handle NaN values gracefully', () => {
+      presenter.setValue(NaN);
+      presenter.setOperator('=');
+      expect(presenter.getFilterString()).toBe('test_field = NaN');
+    });
+
+    it('should handle Infinity values', () => {
+      presenter.setValue(Infinity);
+      presenter.setOperator('>');
+      expect(presenter.getFilterString()).toBe('test_field > Infinity');
+    });
+
+    it('should handle negative Infinity values', () => {
+      presenter.setValue(-Infinity);
+      presenter.setOperator('<');
+      expect(presenter.getFilterString()).toBe('test_field < -Infinity');
+    });
+  });
+});

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

@@ -0,0 +1,80 @@
+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 NumberFieldFilterPresenter implements FieldFilterStrategy {
+  private _fieldName: string;
+  private _value = new Signal<number | 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);
+    };
+  }
+
+  setValue(value: number | null) {
+    this._value.set(value);
+    this._onChangeHandlers.forEach(handler => handler());
+  }
+
+  setOperator(operator: ComparisonOperator) {
+    this._operator.set(operator);
+    this._onChangeHandlers.forEach(handler => handler());
+  }
+
+  getFilterString() {
+    if (this._value.get() === null) {
+      return '';
+    }
+    return `${this._fieldName} ${this._operator.get()} ${this._value.get()}`;
+  }
+
+  setFieldRegistry(fieldFilterRegistry: FieldFilterRegistry) {
+    this._fieldFilterRegistry = fieldFilterRegistry;
+    this._fieldFilterRegistry.registerFieldFilter(this._fieldName, this);
+  }
+
+  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 = Number(valueNode.value);
+    this._value.set(value);
+  }
+
+  dispose() {
+    this._fieldFilterRegistry?.unregisterFieldFilter(this._fieldName);
+    this._onChangeHandlers.clear();
+  }
+}

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

@@ -0,0 +1,68 @@
+import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
+import { useSignalValue } from '@tcn/state';
+import { Button } from '@tcn/ui/actions';
+import { Input } 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 { NumberRangeFieldFilterPresenter } from './number_range_field_filter_presenter.js';
+
+export function NumberRangeFieldFilter({
+  fieldName,
+  label,
+}: {
+  fieldName: string;
+  label: string;
+}) {
+  const presenter = useFieldFilterStrategy(NumberRangeFieldFilterPresenter, fieldName);
+
+  const minValue = useSignalValue(presenter.broadcasts.minValue);
+  const maxValue = useSignalValue(presenter.broadcasts.maxValue);
+
+  return (
+    <VStack gap="4px">
+      <Box width="flex">
+        <Title size="md">{label}</Title>
+      </Box>
+      <HStack gap="4px">
+        <Box width="auto">
+          <BodyText size="lg">Min</BodyText>
+        </Box>
+        <Box width="flex">
+          <Input
+            type="number"
+            value={String(minValue ?? '')}
+            onChange={value => presenter.setMinValue(Number(value))}
+          />
+        </Box>
+        <Button
+          onClick={() => presenter.setMinValue(null)}
+          hierarchy="tertiary"
+          disabled={minValue == null}
+        >
+          <CrossCircleIcon />
+        </Button>
+      </HStack>
+      <HStack gap="4px">
+        <Box width="auto">
+          <BodyText size="lg">Max</BodyText>
+        </Box>
+        <Box width="flex">
+          <Input
+            type="number"
+            value={String(maxValue ?? '')}
+            onChange={value => presenter.setMaxValue(Number(value))}
+          />
+        </Box>
+        <Button
+          onClick={() => presenter.setMaxValue(null)}
+          hierarchy="tertiary"
+          disabled={maxValue == null}
+        >
+          <CrossCircleIcon />
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}