@drivenets/design-system 0.0.1

package/src/components/ds-table/filters/adapters/create-checkbox-filter-adapter.tsx

@@ -0,0 +1,116 @@
+import type { ReactNode } from 'react';
+import type { Row } from '@tanstack/react-table';
+import type { FilterAdapter } from '../types/filter-adapter.types';
+import { type CheckboxFilterItem, CheckboxFilter } from '../components/checkbox-filter';
+import { createFilterAdapter } from './create-filter-adapter';
+
+export interface CheckboxFilterAdapterConfig<TData, TValue> {
+	/**
+	 * Unique identifier (should match column accessorKey)
+	 */
+	id: string;
+
+	/**
+	 * Display label for filter navigation
+	 */
+	label: string;
+
+	/**
+	 * Available items to select from
+	 */
+	items: CheckboxFilterItem<TValue>[];
+
+	/**
+	 * Optional custom renderer for each item
+	 */
+	renderer?: (item: CheckboxFilterItem<TValue>) => ReactNode;
+
+	/**
+	 * Optional custom chip label generator
+	 * @default (item) => `${label}: ${item.label}`
+	 */
+	chipLabelTemplate?: (item: CheckboxFilterItem<TValue>) => string;
+
+	/**
+	 * Optional custom cell renderer for table column
+	 */
+	cellRenderer?: (value: TValue) => ReactNode;
+
+	/**
+	 * How to extract the value from a row for comparison
+	 * @default (row) => row.getValue(id)
+	 */
+	getRowValue?: (row: Row<TData>) => TValue;
+}
+
+/**
+ * Factory function to create a checkbox filter adapter
+ *
+ * Handles multi-select checkbox filtering with inclusion model:
+ * - Empty selection = show all data (no filter active)
+ * - Selected items = show only those items
+ */
+export function createCheckboxFilterAdapter<TData, TValue = string>(
+	config: CheckboxFilterAdapterConfig<TData, TValue>,
+): FilterAdapter<TData, CheckboxFilterItem<TValue>[], TValue> {
+	const {
+		id,
+		label,
+		items,
+		renderer,
+		chipLabelTemplate = (item) => `${label}: ${item.label}`,
+		cellRenderer,
+		getRowValue = (row) => row.getValue(id),
+	} = config;
+
+	return createFilterAdapter<TData, CheckboxFilterItem<TValue>[], TValue>({
+		id,
+		label,
+		initialValue: [], // Start with nothing selected (show all)
+
+		filterFn: (row, columnId, filterValue) => {
+			// Empty selection = no filter = show all
+			if (filterValue.length === 0) {
+				return true;
+			}
+
+			// Otherwise, show only selected items
+			const rowValue = getRowValue(row);
+			return filterValue.some((item) => item.value === rowValue);
+		},
+
+		cellRenderer,
+
+		toChips: (selectedItems) => {
+			// Generate chips for all selected items
+			return selectedItems.map((item) => ({
+				id: `${id}_${String(item.value)}`,
+				label: chipLabelTemplate(item),
+				metadata: {
+					key: id,
+					value: item.value,
+				},
+			}));
+		},
+
+		fromChip: (chip, currentValue) => {
+			return currentValue.filter((item) => item.value !== chip.metadata?.value);
+		},
+
+		getActiveFiltersCount: (selectedItems) => {
+			// Count = number of selected items (0 means none selected)
+			return selectedItems.length;
+		},
+
+		renderFilter: (value, onChange) => {
+			return (
+				<CheckboxFilter
+					items={items}
+					renderer={renderer}
+					selectedItems={value}
+					onSelectionChange={onChange}
+				/>
+			);
+		},
+	});
+}

package/src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx

@@ -0,0 +1,171 @@
+import type { Row } from '@tanstack/react-table';
+import type { ChipItem } from '../../../ds-chip-group';
+import type { FilterAdapter } from '../types/filter-adapter.types';
+import { RangeFilter } from '../components/range-filter';
+import { createFilterAdapter } from './create-filter-adapter';
+
+export interface RangeValue {
+	from?: number;
+	to?: number;
+}
+
+export interface DualRangeFilterValue {
+	[fieldName: string]: RangeValue;
+}
+
+export interface DualRangeFilterAdapterConfig<TData> {
+	/**
+	 * Unique identifier (should match column accessorKey)
+	 */
+	id: string;
+
+	/**
+	 * Display label for filter navigation
+	 */
+	label: string;
+
+	/**
+	 * Field configurations: { fieldKey: displayLabel }
+	 * Example: { running: 'Running', completed: 'Completed' }
+	 */
+	fields: Record<string, string>;
+
+	/**
+	 * Optional formatter for chip display
+	 * @default (num) => num.toLocaleString('en-US')
+	 */
+	formatNumber?: (num: number) => string;
+
+	/**
+	 * How to extract the value object from a row
+	 * @default (row) => row.getValue(id)
+	 */
+	getRowValue?: (row: Row<TData>) => Record<string, number>;
+}
+
+/**
+ * Factory function to create a dual-range filter adapter
+ * Handles filtering on multiple numeric ranges within a single column
+ */
+export function createDualRangeFilterAdapter<TData>(
+	config: DualRangeFilterAdapterConfig<TData>,
+): FilterAdapter<TData, DualRangeFilterValue, Record<string, number>> {
+	const {
+		id,
+		label,
+		fields,
+		formatNumber = (num) => num.toLocaleString('en-US'),
+		getRowValue = (row) => row.getValue(id),
+	} = config;
+
+	const initialValue: DualRangeFilterValue = {};
+	Object.keys(fields).forEach((key) => {
+		initialValue[key] = {};
+	});
+
+	return createFilterAdapter<TData, DualRangeFilterValue, Record<string, number>>({
+		id,
+		label,
+		initialValue,
+
+		filterFn: (row, columnId, filterValue) => {
+			const rowValue = getRowValue(row);
+
+			// Check each field's range
+			for (const [fieldKey, range] of Object.entries(filterValue)) {
+				const hasFilter = range.from !== undefined || range.to !== undefined;
+
+				if (hasFilter) {
+					const fieldValue = rowValue[fieldKey];
+					const matchesFrom = range.from === undefined || fieldValue >= range.from;
+					const matchesTo = range.to === undefined || fieldValue <= range.to;
+
+					if (!matchesFrom || !matchesTo) {
+						return false; // AND logic: all ranges must match
+					}
+				}
+			}
+
+			return true;
+		},
+
+		cellRenderer: undefined, // Let the column definition handle rendering
+
+		toChips: (value) => {
+			const chips: ChipItem[] = [];
+
+			Object.entries(value).forEach(([fieldKey, range]) => {
+				const hasFilter = range.from !== undefined || range.to !== undefined;
+
+				if (hasFilter) {
+					const fieldLabel = fields[fieldKey] || fieldKey;
+					const fromText = range.from !== undefined ? formatNumber(range.from) : '';
+					const toText = range.to !== undefined ? formatNumber(range.to) : '';
+
+					chips.push({
+						id: `${id}_${fieldKey}`,
+						label: `${fieldLabel}: From ${fromText} to ${toText}`,
+						metadata: {
+							key: id,
+							field: fieldKey,
+							from: range.from,
+							to: range.to,
+						},
+					});
+				}
+			});
+
+			return chips;
+		},
+
+		fromChip: (chip, currentValue) => {
+			const fieldKey = chip.metadata?.field as string;
+			if (!fieldKey) {
+				return currentValue;
+			}
+
+			return {
+				...currentValue,
+				[fieldKey]: {},
+			};
+		},
+
+		getActiveFiltersCount: (value) => {
+			let count = 0;
+			Object.values(value).forEach((range) => {
+				if (range.from !== undefined || range.to !== undefined) {
+					count++;
+				}
+			});
+			return count;
+		},
+
+		renderFilter: (value, onChange) => {
+			return (
+				<div>
+					{Object.entries(fields).map(([fieldKey, fieldLabel]) => (
+						<RangeFilter
+							key={fieldKey}
+							label={fieldLabel}
+							// This is not necessarily a redundant condition. It depends on `noUncheckedIndexedAccess`.
+							// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+							value={value[fieldKey] || {}}
+							onChange={(rangeValue) =>
+								onChange({
+									...value,
+									[fieldKey]: rangeValue,
+								})
+							}
+							onClear={() =>
+								onChange({
+									...value,
+									[fieldKey]: {},
+								})
+							}
+						/>
+					))}
+				</div>
+			);
+		},
+	});
+}

package/src/components/ds-table/filters/adapters/create-filter-adapter.ts

@@ -0,0 +1,131 @@
+import type { ReactNode } from 'react';
+import type { FilterAdapter } from '../types/filter-adapter.types';
+
+export interface FilterAdapterConfig<TData, TFilterValue, TCellValue = unknown> {
+	/**
+	 * Unique identifier (should match column accessorKey)
+	 */
+	id: string;
+
+	/**
+	 * Display label for filter navigation
+	 */
+	label: string;
+
+	/**
+	 * Initial/default value for the filter
+	 */
+	initialValue: TFilterValue;
+
+	/**
+	 * Filter function - determines if row matches filter value
+	 */
+	filterFn: FilterAdapter<TData, TFilterValue, TCellValue>['columnFilterFn'];
+
+	/**
+	 * Convert filter value to display chips
+	 */
+	toChips: FilterAdapter<TData, TFilterValue, TCellValue>['toChips'];
+
+	/**
+	 * Remove chip effect from filter value
+	 */
+	fromChip: FilterAdapter<TData, TFilterValue, TCellValue>['fromChip'];
+
+	/**
+	 * Calculate active filter count
+	 */
+	getActiveFiltersCount: FilterAdapter<TData, TFilterValue, TCellValue>['getActiveFiltersCount'];
+
+	/**
+	 * Render the filter UI
+	 */
+	renderFilter: (value: TFilterValue, onChange: (value: TFilterValue) => void) => ReactNode;
+
+	/**
+	 * Optional custom cell renderer for table cells
+	 * Note: This receives the cell value from the table, not the filter value
+	 */
+	cellRenderer?: (value: TCellValue) => ReactNode;
+}
+
+/**
+ * Base factory function to create a filter adapter
+ *
+ * This is the core function that all specialized filter adapters use internally.
+ * Use this when checkbox or dual-range adapters don't fit your requirements.
+ *
+ * ## When to use directly:
+ * - Complex filtering logic (e.g., editor + date range)
+ * - Unique UI that doesn't fit generic patterns
+ * - Combining multiple sub-filters
+ * - Special chip generation requirements
+ *
+ * ## When to use specialized helpers instead:
+ * - **Checkbox filters**: Use `createCheckboxFilterAdapter` for multi-select
+ * - **Range filters**: Use `createDualRangeFilterAdapter` for numeric ranges
+ *
+ * ## Example:
+ * ```typescript
+ * interface MyFilterValue {
+ *   users: string[];
+ *   dateRange: { from?: Date; to?: Date };
+ * }
+ *
+ * const myFilter = createFilterAdapter<DataType, MyFilterValue>({
+ *   id: 'myColumn',
+ *   label: 'My Filter',
+ *   initialValue: { users: [], dateRange: {} },
+ *
+ *   filterFn: (row, columnId, filterValue) => {
+ *     // Your custom logic
+ *     return matchesUsers && matchesDateRange;
+ *   },
+ *
+ *   toChips: (value) => {
+ *     // Generate chips from your filter value
+ *     return chips;
+ *   },
+ *
+ *   fromChip: (chip, currentValue) => {
+ *     // Remove chip's effect from value
+ *     return updatedValue;
+ *   },
+ *
+ *   getActiveFiltersCount: (value) => {
+ *     // Count active filters (0 means none active)
+ *     return count;
+ *   },
+ *
+ *   renderFilter: (value, onChange) => (
+ *     <YourCustomFilterComponent
+ *       value={value}
+ *       onChange={onChange}
+ *     />
+ *   ),
+ * });
+ * ```
+ *
+ * ## Reference Implementation:
+ * See `workflow-filters.config.tsx` for a complete example (lastEditedFilterAdapter).
+ *
+ * ## Note:
+ * Most use cases are covered by `createCheckboxFilterAdapter` or `createDualRangeFilterAdapter`.
+ * Only use this base function directly when you need completely custom filter logic.
+ */
+export function createFilterAdapter<TData, TFilterValue, TCellValue = unknown>(
+	config: FilterAdapterConfig<TData, TFilterValue, TCellValue>,
+): FilterAdapter<TData, TFilterValue, TCellValue> {
+	return {
+		id: config.id,
+		label: config.label,
+		initialValue: config.initialValue,
+		columnFilterFn: config.filterFn,
+		cellRenderer: config.cellRenderer,
+		toChips: config.toChips,
+		fromChip: config.fromChip,
+		getActiveFiltersCount: config.getActiveFiltersCount,
+		reset: () => config.initialValue,
+		renderFilter: config.renderFilter,
+	};
+}

package/src/components/ds-table/filters/adapters/index.ts

@@ -0,0 +1,12 @@
+export { createFilterAdapter } from './create-filter-adapter';
+export type { FilterAdapterConfig } from './create-filter-adapter';
+
+export { createCheckboxFilterAdapter } from './create-checkbox-filter-adapter';
+export type { CheckboxFilterAdapterConfig } from './create-checkbox-filter-adapter';
+
+export { createDualRangeFilterAdapter } from './create-dual-range-filter-adapter';
+export type {
+	RangeValue,
+	DualRangeFilterValue,
+	DualRangeFilterAdapterConfig,
+} from './create-dual-range-filter-adapter';

package/src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import { DsCheckbox } from '../../../../ds-checkbox';
+
+export interface CheckboxFilterItem<TValue = string> {
+	value: TValue;
+	label: string;
+	metadata?: Record<string, unknown>;
+}
+
+export interface CheckboxFilterProps<TValue> {
+	items: CheckboxFilterItem<TValue>[];
+	renderer?: (item: CheckboxFilterItem<TValue>) => ReactNode;
+	selectedItems: CheckboxFilterItem<TValue>[];
+	onSelectionChange: (selectedItems: CheckboxFilterItem<TValue>[]) => void;
+}
+
+export const CheckboxFilter = <TValue,>({
+	items,
+	renderer,
+	selectedItems,
+	onSelectionChange,
+}: CheckboxFilterProps<TValue>) => {
+	const handleCheckedChange = (selected: CheckboxFilterItem<TValue>, checked: boolean) => {
+		if (checked) {
+			onSelectionChange([...selectedItems, selected]);
+		} else {
+			onSelectionChange(selectedItems.filter((item) => item.value !== selected.value));
+		}
+	};
+
+	return items.map((item) => {
+		const label = renderer ? renderer(item) : item.label;
+		const checked = selectedItems.findIndex((selectedItem) => selectedItem.value === item.value) > -1;
+		return (
+			<DsCheckbox
+				key={JSON.stringify(item.value)}
+				label={label}
+				checked={checked}
+				onCheckedChange={(newState) => handleCheckedChange(item, newState === true)}
+			/>
+		);
+	});
+};

package/src/components/ds-table/filters/components/checkbox-filter/index.ts

@@ -0,0 +1,2 @@
+export { CheckboxFilter } from './checkbox-filter';
+export type { CheckboxFilterProps, CheckboxFilterItem } from './checkbox-filter';

package/src/components/ds-table/filters/components/range-filter/index.ts

@@ -0,0 +1,2 @@
+export { RangeFilter } from './range-filter';
+export type { RangeFilterProps, RangeFilterValue } from './range-filter';

package/src/components/ds-table/filters/components/range-filter/range-filter.module.scss

@@ -0,0 +1,25 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding-bottom: 16px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.inputs {
+	display: flex;
+	gap: 16px;
+}
+
+.inputGroup {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	gap: 2px;
+}

package/src/components/ds-table/filters/components/range-filter/range-filter.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { DsTypography } from '../../../../ds-typography';
+import { DsButton } from '../../../../ds-button';
+import { DsTextInput } from '../../../../ds-text-input';
+import styles from './range-filter.module.scss';
+
+export interface RangeFilterValue {
+	from?: number;
+	to?: number;
+}
+
+export interface RangeFilterProps {
+	label: string;
+	value: RangeFilterValue;
+	onChange: (value: RangeFilterValue) => void;
+	onClear?: () => void;
+}
+
+export const RangeFilter = ({ label, value, onChange, onClear }: RangeFilterProps) => {
+	const [localFrom, setLocalFrom] = useState(value.from?.toString() || '');
+	const [localTo, setLocalTo] = useState(value.to?.toString() || '');
+
+	const handleFromChange = (val: string) => {
+		setLocalFrom(val);
+		const numVal = val ? parseInt(val, 10) : undefined;
+		onChange({ from: numVal, to: value.to });
+	};
+
+	const handleToChange = (val: string) => {
+		setLocalTo(val);
+		const numVal = val ? parseInt(val, 10) : undefined;
+		onChange({ from: value.from, to: numVal });
+	};
+
+	const handleClear = () => {
+		setLocalFrom('');
+		setLocalTo('');
+		if (onClear) {
+			onClear();
+		}
+	};
+
+	const hasValue = value.from !== undefined || value.to !== undefined;
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.header}>
+				<DsTypography variant="body-md-md">{label}</DsTypography>
+				{hasValue && onClear && (
+					<DsButton design="v1.2" buttonType="tertiary" size="small" onClick={handleClear}>
+						Clear
+					</DsButton>
+				)}
+			</div>
+			<div className={styles.inputs}>
+				<div className={styles.inputGroup}>
+					<DsTypography variant="body-sm-reg">From</DsTypography>
+					<DsTextInput
+						type="number"
+						placeholder=""
+						value={localFrom}
+						onValueChange={handleFromChange}
+						size="default"
+					/>
+				</div>
+				<div className={styles.inputGroup}>
+					<DsTypography variant="body-sm-reg">To</DsTypography>
+					<DsTextInput
+						type="number"
+						placeholder=""
+						value={localTo}
+						onValueChange={handleToChange}
+						size="default"
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};

package/src/components/ds-table/filters/hooks/index.ts

@@ -0,0 +1 @@
+export type { UseTableFiltersResult } from './use-table-filters';