@arbor-education/design-system.components 0.3.2 → 0.3.4

package/src/components/table/columnFilters/TimeFilter/TimeFilter.tsx

@@ -0,0 +1,122 @@
+import type { DoesFilterPassParams } from 'ag-grid-community';
+import { useEffect, useRef, useState } from 'react';
+import { compareTimeByFilterType, type FilterType, FILTER_TYPES } from './utils/compareTimeByFilterType';
+import { transformTimeStringToDate } from './utils/transformTimeStringToDate';
+import { FilterResetButton } from '../filterResetButton/FilterResetButton';
+import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+
+type TimeFilterModel = {
+  filterType: FilterType;
+  pivot: string;
+};
+
+export const doesTimeFilterPass: ({
+  model,
+  node,
+  handlerParams,
+}: DoesFilterPassParams<TimeFilterModel>) => boolean = ({ model, node, handlerParams }) => {
+  if (!model || !model.pivot) {
+    return true;
+  }
+
+  const pivotDate = transformTimeStringToDate(model.pivot);
+  if (pivotDate === null) {
+    return false;
+  }
+
+  const value = handlerParams.getValue(node);
+  if (value == null) {
+    return false;
+  }
+
+  const dateToCheck = cellValueToDate(value);
+  if (dateToCheck === null) {
+    return false;
+  }
+
+  return compareTimeByFilterType(model.filterType, pivotDate, dateToCheck);
+};
+
+function cellValueToDate(value: unknown): Date | null {
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+  if (typeof value === 'string') {
+    const fromTime = transformTimeStringToDate(value);
+    if (fromTime !== null) return fromTime;
+    const parsed = new Date(value);
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+  }
+  return null;
+}
+
+type TimeFilterProps = {
+  model: TimeFilterModel | null;
+  onModelChange: (model: TimeFilterModel) => void;
+};
+
+export const TimeFilter = (props: TimeFilterProps) => {
+  const { model, onModelChange } = props;
+
+  const { filterType: initialFilterType, pivot: initialPivot } = model ?? { filterType: FILTER_TYPES.BEFORE, pivot: '' };
+
+  const [filterType, setFilterType] = useState<FilterType>(initialFilterType);
+  const [pivot, setPivot] = useState(initialPivot);
+
+  const onModelChangeRef = useRef(onModelChange);
+  onModelChangeRef.current = onModelChange;
+
+  useEffect(() => {
+    setFilterType(initialFilterType);
+    setPivot(initialPivot);
+  }, [initialFilterType, initialPivot]);
+
+  const handleFilterTypeChange = (value: string[]) => {
+    setFilterType(value[0] as FilterType);
+  };
+
+  const handlePivotChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPivot(e.target.value);
+  };
+
+  const handleResetClick = () => {
+    setFilterType(FILTER_TYPES.BEFORE);
+    setPivot('');
+  };
+
+  useEffect(() => {
+    if (filterType === initialFilterType && pivot === initialPivot) {
+      return;
+    }
+    onModelChangeRef.current({ filterType, pivot });
+  }, [filterType, pivot, initialFilterType, initialPivot]);
+
+  const popupParentRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <PopupParentContext.Provider value={popupParentRef}>
+      <div className="ds-column-filter__container ds-column-filter-time" ref={popupParentRef}>
+        <div className="ds-column-filter-time__row">
+          <SelectDropdown
+            key={filterType}
+            options={[
+              { label: 'Before', value: FILTER_TYPES.BEFORE },
+              { label: 'After', value: FILTER_TYPES.AFTER },
+              { label: 'At', value: FILTER_TYPES.EQUAL },
+            ]}
+            onSelectionChange={handleFilterTypeChange}
+            initialSelectedValues={[filterType]}
+          />
+          <input
+            className="ds-column-filter-time__input"
+            onChange={handlePivotChange}
+            type="time"
+            value={pivot}
+          />
+        </div>
+        <FilterResetButton onClick={handleResetClick}>Reset time</FilterResetButton>
+      </div>
+    </PopupParentContext.Provider>
+  );
+};

package/src/components/table/columnFilters/TimeFilter/utils/compareTimeByFilterType.test.ts

@@ -0,0 +1,183 @@
+import { describe, expect, test } from 'vitest';
+import { compareTimeByFilterType, FILTER_TYPES, type FilterType } from './compareTimeByFilterType';
+
+describe('compareTimeByFilterType', () => {
+  const createDateWithTime = (hours: number, minutes: number): Date => {
+    const date = new Date();
+    date.setHours(hours, minutes, 0, 0);
+    return date;
+  };
+
+  describe('BEFORE filter type', () => {
+    test('returns true when check time is before pivot time', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(10, 0);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.BEFORE, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false when check time is after pivot time', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(16, 0);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.BEFORE, pivotDate, dateToCheck);
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false when check time equals pivot time', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(14, 30);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.BEFORE, pivotDate, dateToCheck);
+
+      expect(result).toBe(false);
+    });
+
+    test('returns true when check time is one minute before pivot', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(14, 29);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.BEFORE, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('AFTER filter type', () => {
+    test('returns true when check time is after pivot time', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(16, 0);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.AFTER, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false when check time is before pivot time', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(10, 0);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.AFTER, pivotDate, dateToCheck);
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false when check time equals pivot time', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(14, 30);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.AFTER, pivotDate, dateToCheck);
+
+      expect(result).toBe(false);
+    });
+
+    test('returns true when check time is one minute after pivot', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(14, 31);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.AFTER, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('EQUAL filter type', () => {
+    test('returns true when check time equals pivot time', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(14, 30);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.EQUAL, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false when check time is before pivot time', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(10, 0);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.EQUAL, pivotDate, dateToCheck);
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false when check time is after pivot time', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(16, 0);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.EQUAL, pivotDate, dateToCheck);
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false when check time differs by one minute', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(14, 31);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.EQUAL, pivotDate, dateToCheck);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles midnight times correctly', () => {
+      const pivotDate = createDateWithTime(0, 0);
+      const dateToCheck = createDateWithTime(0, 1);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.AFTER, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+
+    test('handles end of day times correctly', () => {
+      const pivotDate = createDateWithTime(23, 59);
+      const dateToCheck = createDateWithTime(23, 58);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.BEFORE, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+
+    test('ignores date component and only compares time', () => {
+      const pivotDate = new Date(2024, 0, 1, 14, 30);
+      const dateToCheck = new Date(2024, 0, 15, 14, 30);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.EQUAL, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+
+    test('ignores seconds and milliseconds', () => {
+      const pivotDate = new Date(2024, 0, 1, 14, 30, 45, 500);
+      const dateToCheck = new Date(2024, 0, 1, 14, 30, 10, 100);
+
+      const result = compareTimeByFilterType(FILTER_TYPES.EQUAL, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false for invalid filter type', () => {
+      const pivotDate = createDateWithTime(14, 30);
+      const dateToCheck = createDateWithTime(14, 30);
+
+      const result = compareTimeByFilterType('invalid' as FilterType, pivotDate, dateToCheck);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('cross-midnight comparisons', () => {
+    test('correctly compares times across midnight boundary', () => {
+      const pivotDate = createDateWithTime(23, 30);
+      const dateToCheck = createDateWithTime(0, 30);
+
+      // 00:30 (30 minutes) is before 23:30 (1410 minutes) in terms of minutes since midnight
+      const result = compareTimeByFilterType(FILTER_TYPES.BEFORE, pivotDate, dateToCheck);
+
+      expect(result).toBe(true);
+    });
+  });
+});

package/src/components/table/columnFilters/TimeFilter/utils/compareTimeByFilterType.ts

@@ -0,0 +1,30 @@
+export type FilterType = 'before' | 'after' | 'equal';
+
+export const FILTER_TYPES = {
+  BEFORE: 'before' as FilterType,
+  AFTER: 'after' as FilterType,
+  EQUAL: 'equal' as FilterType,
+};
+
+const minutesSinceMidnight = (date: Date): number =>
+  date.getHours() * 60 + date.getMinutes();
+
+export const compareTimeByFilterType = (
+  filterType: FilterType,
+  pivotDate: Date,
+  dateToCheck: Date,
+): boolean => {
+  const pivotMinutes = minutesSinceMidnight(pivotDate);
+  const checkMinutes = minutesSinceMidnight(dateToCheck);
+
+  switch (filterType) {
+    case FILTER_TYPES.BEFORE:
+      return checkMinutes < pivotMinutes;
+    case FILTER_TYPES.AFTER:
+      return checkMinutes > pivotMinutes;
+    case FILTER_TYPES.EQUAL:
+      return checkMinutes === pivotMinutes;
+    default:
+      return false;
+  }
+};

package/src/components/table/columnFilters/TimeFilter/utils/transformTimeStringToDate.test.ts

@@ -0,0 +1,133 @@
+import { describe, expect, test } from 'vitest';
+import { transformTimeStringToDate } from './transformTimeStringToDate';
+
+describe('transformTimeStringToDate', () => {
+  describe('valid time strings', () => {
+    test('converts valid time string to Date object', () => {
+      const result = transformTimeStringToDate('14:30');
+
+      expect(result).toBeInstanceOf(Date);
+      expect(result?.getHours()).toBe(14);
+      expect(result?.getMinutes()).toBe(30);
+      expect(result?.getSeconds()).toBe(0);
+      expect(result?.getMilliseconds()).toBe(0);
+    });
+
+    test('handles midnight (00:00)', () => {
+      const result = transformTimeStringToDate('00:00');
+
+      expect(result).toBeInstanceOf(Date);
+      expect(result?.getHours()).toBe(0);
+      expect(result?.getMinutes()).toBe(0);
+    });
+
+    test('handles noon (12:00)', () => {
+      const result = transformTimeStringToDate('12:00');
+
+      expect(result).toBeInstanceOf(Date);
+      expect(result?.getHours()).toBe(12);
+      expect(result?.getMinutes()).toBe(0);
+    });
+
+    test('handles end of day (23:59)', () => {
+      const result = transformTimeStringToDate('23:59');
+
+      expect(result).toBeInstanceOf(Date);
+      expect(result?.getHours()).toBe(23);
+      expect(result?.getMinutes()).toBe(59);
+    });
+
+    test('handles single digit hours with leading zero', () => {
+      const result = transformTimeStringToDate('09:45');
+
+      expect(result?.getHours()).toBe(9);
+      expect(result?.getMinutes()).toBe(45);
+    });
+
+    test('handles single digit minutes with leading zero', () => {
+      const result = transformTimeStringToDate('15:05');
+
+      expect(result?.getHours()).toBe(15);
+      expect(result?.getMinutes()).toBe(5);
+    });
+  });
+
+  describe('invalid time strings', () => {
+    test('returns null for empty string', () => {
+      const result = transformTimeStringToDate('');
+
+      expect(result).toBeNull();
+    });
+
+    test('returns null for string without colon', () => {
+      const result = transformTimeStringToDate('1430');
+
+      expect(result).toBeNull();
+    });
+
+    test('returns null for string with too many parts', () => {
+      const result = transformTimeStringToDate('14:30:00');
+
+      expect(result).toBeNull();
+    });
+
+    test('returns null for string with only one part', () => {
+      const result = transformTimeStringToDate('14');
+
+      expect(result).toBeNull();
+    });
+
+    test('returns null for non-numeric hours', () => {
+      const result = transformTimeStringToDate('abc:30');
+
+      expect(result).toBeNull();
+    });
+
+    test('returns null for non-numeric minutes', () => {
+      const result = transformTimeStringToDate('14:xyz');
+
+      expect(result).toBeNull();
+    });
+
+    test('returns null for invalid time format', () => {
+      const result = transformTimeStringToDate('not a time');
+
+      expect(result).toBeNull();
+    });
+
+    test('accepts time with spaces (Number trims whitespace)', () => {
+      const result = transformTimeStringToDate('14: 30');
+
+      expect(result).toBeInstanceOf(Date);
+      expect(result?.getHours()).toBe(14);
+      expect(result?.getMinutes()).toBe(30);
+    });
+  });
+
+  describe('edge cases', () => {
+    test('accepts hours and minutes that would be out of normal range', () => {
+      // Date object normalizes 25:70 to next day 02:10
+      const result = transformTimeStringToDate('25:70');
+
+      expect(result).toBeInstanceOf(Date);
+      expect(result?.getHours()).toBe(2);
+      expect(result?.getMinutes()).toBe(10);
+    });
+
+    test('handles zero padded values', () => {
+      const result = transformTimeStringToDate('00:00');
+
+      expect(result?.getHours()).toBe(0);
+      expect(result?.getMinutes()).toBe(0);
+    });
+
+    test('preserves current date while setting time', () => {
+      const today = new Date();
+      const result = transformTimeStringToDate('10:30');
+
+      expect(result?.getFullYear()).toBe(today.getFullYear());
+      expect(result?.getMonth()).toBe(today.getMonth());
+      expect(result?.getDate()).toBe(today.getDate());
+    });
+  });
+});

package/src/components/table/columnFilters/TimeFilter/utils/transformTimeStringToDate.ts

@@ -0,0 +1,21 @@
+export const transformTimeStringToDate = (timeString: string): Date | null => {
+  if (!timeString) {
+    return null;
+  }
+
+  const parts = timeString.split(':');
+  if (parts.length !== 2) {
+    return null;
+  }
+
+  const hours = Number(parts[0]);
+  const minutes = Number(parts[1]);
+
+  if (isNaN(hours) || isNaN(minutes)) {
+    return null;
+  }
+
+  const date = new Date();
+  date.setHours(hours, minutes, 0, 0);
+  return date;
+};

package/src/components/table/columnFilters/columnFilters.scss

@@ -0,0 +1,71 @@
+.ds-column-filter__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-small);
+    padding: var(--spacing-small);
+
+    // This is needed to ensure the filter popup is displayed above the table
+    z-index: 1;
+    position: relative;
+}
+
+.ds-column-filter__options {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-small);
+}
+
+.ds-column-filter__reset-button {
+    margin-left: auto;
+}
+
+.ds-column-filter-time {
+    background-color: var(--color-mono-white);
+    border-radius: var(--border-radius-small);
+    padding: var(--spacing-small);
+    align-items: stretch;
+}
+
+.ds-column-filter-time__row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-small);
+}
+
+.ds-column-filter-time__row .ds-button {
+    flex: 1;
+    min-width: 0;
+    height: var(--size-control-small);
+    background-color: var(--color-grey-050);
+    border: var(--border-weight) solid var(--color-grey-200);
+    border-radius: var(--border-radius-small);
+    color: var(--color-grey-900);
+    font-family: var(--font-family-standard);
+    font-size: var(--font-size-2-13);
+    font-weight: var(--font-weight-regular);
+    padding: 0 var(--spacing-small);
+    justify-content: space-between;
+}
+
+.ds-column-filter-time__input {
+    flex: 1;
+    min-width: 0;
+    height: var(--size-control-small);
+    padding: 0 var(--spacing-small);
+    background-color: var(--color-grey-050);
+    border: var(--border-weight) solid var(--color-grey-200);
+    border-radius: var(--border-radius-small);
+    color: var(--color-grey-900);
+    font-family: var(--font-family-standard);
+    font-size: var(--font-size-2-13);
+    font-weight: var(--font-weight-regular);
+    box-sizing: border-box;
+
+    &::-webkit-calendar-picker-indicator {
+        opacity: 0.6;
+        cursor: pointer;
+    }
+}

package/src/components/table/columnFilters/filterResetButton/FilterResetButton.tsx

@@ -0,0 +1,21 @@
+import { Button } from 'Components/button/Button';
+
+type FilterResetButtonProps = {
+  onClick: () => void;
+  children?: React.ReactNode;
+};
+
+export function FilterResetButton(props: FilterResetButtonProps) {
+  const { onClick, children = 'Reset' } = props;
+  return (
+    <Button
+      className="ds-column-filter__reset-button"
+      aria-label="Clear this filter"
+      onClick={onClick}
+      variant="secondary"
+      size="S"
+    >
+      {children}
+    </Button>
+  );
+}

package/src/components/table/table.scss

@@ -12,7 +12,7 @@
   }
 
   &__container {
-    .ag-header-cell-resize {
+    *[class^='ag-'], *[class*=' ag-'] {
       // AG-Grid gives these a z-index of 2 which interferes with our stacking elements
       // so we just unset it here
       z-index: unset;

package/src/index.scss

@@ -27,4 +27,5 @@
 @use "components/separator/separator.scss";
 @use "components/modal/modal.scss";
 @use "components/modal/modalManager/modalManager.scss";
+@use "components/table/columnFilters/columnFilters.scss";
 @import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";