mig-schema-table 3.0.23 → 3.0.25

package/dist/SchemaTable/ColumnFilterRow/index.d.ts

@@ -1,21 +1,17 @@
-import { Dispatch, SetStateAction } from "react";
 import { IColumnConfig } from "../../types";
 import { oas31 } from "openapi3-ts";
 import "react-datepicker/dist/react-datepicker.css";
-import { tColumnSearchValue } from "../index";
 interface IColumnFilterRowProps {
     columnNames: string[];
     getWidth: (index: number) => number;
     config?: {
         [propName: string]: IColumnConfig<any>;
     };
-    columnSearchHandler: (propName: string, value: tColumnSearchValue) => void;
+    columnSearchHandler: (propName: string, value: string | number | boolean) => void;
     value: {
-        [propName: string]: tColumnSearchValue;
+        [propName: string]: string | number | boolean;
     };
     schema: oas31.SchemaObject;
-    columnFilterDropdown?: string;
-    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
 }
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }: IColumnFilterRowProps): import("react/jsx-runtime").JSX.Element;
+export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, }: IColumnFilterRowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/SchemaTable/ColumnFilterRow/index.js

@@ -4,15 +4,15 @@ import { SELECT_ALL_COLUMN_NAME } from "../constants";
 import DatePicker from "react-datepicker";
 import nl from "date-fns/locale/nl";
 import "react-datepicker/dist/react-datepicker.css";
+import { localeFormat } from "../../inc/date";
 import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../inc/constant";
-import { getUnixTimeStamp } from "../../inc/date";
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }) {
+export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, }) {
     const { properties = {} } = schema;
     const getSelectComponent = React.useCallback((propSchema, propName, value, inputChangeHandler) => {
-        const enumItems = propSchema.type === "boolean" ? ["✓", "✕"] : propSchema.enum;
+        const enumItems = propSchema.type === "boolean" ? ["true", "false"] : propSchema.enum;
         return (_jsxs("select", Object.assign({ value: value, "data-prop-name": propName, onChange: inputChangeHandler }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), enumItems.map((name) => (_jsx("option", Object.assign({ value: name }, { children: name }), `column-filter-select-${name}`)))] })));
     }, []);
-    const field = React.useCallback((propSchema, propName, propValue) => {
+    const field = React.useCallback((propSchema, propName, propValue, propConfig) => {
         const { type, format, minimum, maximum } = propSchema;
         const inputChangeHandler = (event) => {
             columnSearchHandler(propName, event.target.value);
@@ -24,69 +24,24 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
                     return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
                 }
                 if (format === "date-time" || format === "date") {
-                    const dateFormat = format === "date"
-                        ? DEFAULT_DATE_FORMAT
-                        : DEFAULT_DATE_TIME_FORMAT;
-                    const dateRangeValue = propValue;
-                    const startDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.from)
-                        ? new Date(dateRangeValue.from)
-                        : null;
-                    const endDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.to)
-                        ? new Date(dateRangeValue.to)
-                        : null;
-                    const startDateChangeHandler = (date) => {
-                        if (endDate && date && date > endDate) {
-                            return;
-                        }
-                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { from: `${date || ""}`, to: `${date && endDate ? dateRangeValue.to : ""}` }));
+                    const dateFormat = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) ||
+                        (format === "date"
+                            ? DEFAULT_DATE_FORMAT
+                            : DEFAULT_DATE_TIME_FORMAT);
+                    const dateChangeHandler = (date) => {
+                        columnSearchHandler(propName, date ? localeFormat(date, dateFormat) : "");
                     };
-                    const endDateChangeHandler = (date) => {
-                        if (startDate &&
-                            date &&
-                            getUnixTimeStamp(`${date}`) < getUnixTimeStamp(`${startDate}`)) {
-                            return;
-                        }
-                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { to: `${date || ""}` }));
-                    };
-                    return (_jsx("div", Object.assign({ "data-bs-toggle": "dropdown-menu-item" }, { children: _jsxs("div", Object.assign({ className: "d-flex p-2" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: startDate, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, startDate: startDate, endDate: endDate, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "End date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: endDate, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: startDate, endDate: endDate, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })) })));
+                    return (_jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, showTimeSelect: format === "date-time", locale: nl, selected: propValue ? new Date(propValue) : null, onChange: dateChangeHandler, value: propValue || undefined, placeholderText: dateFormat, isClearable: true }));
                 }
-                return (_jsx("div", Object.assign({ className: "p-1" }, { children: _jsx("input", { value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}` }) })));
+                return (_jsx("input", { value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}` }));
             case "integer":
-                return (_jsx("div", Object.assign({ className: "d-flex p-1" }, { children: _jsx("input", { type: "number", value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
+                return (_jsx("input", { type: "number", value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}`, min: minimum, max: maximum }));
             case "boolean":
                 return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
             default:
                 return _jsx(_Fragment, {});
         }
     }, [columnSearchHandler, getSelectComponent]);
-    const removeDropdown = React.useCallback((e) => {
-        var _a;
-        if (!columnFilterDropdown || ((_a = e.target.dataset) === null || _a === void 0 ? void 0 : _a.bsToggle) === "dropdown") {
-            return;
-        }
-        let columnFilterEl = null;
-        let parentNode = e.target;
-        while (parentNode && parentNode !== window.document) {
-            if (typeof parentNode.className === "string" &&
-                parentNode.className.includes("schema-table__column-filter")) {
-                columnFilterEl = parentNode;
-                break;
-            }
-            parentNode = parentNode.parentNode;
-        }
-        if (!columnFilterEl) {
-            setColumnFilterDropdown && setColumnFilterDropdown(undefined);
-        }
-    }, [columnFilterDropdown, setColumnFilterDropdown]);
-    React.useEffect(() => {
-        if (!columnFilterDropdown) {
-            return;
-        }
-        window.addEventListener("click", removeDropdown, { capture: true });
-        return () => {
-            window.removeEventListener("click", removeDropdown, { capture: true });
-        };
-    }, [columnFilterDropdown, removeDropdown]);
     const SchemaColumnFilter = React.useCallback((index) => {
         const propName = columnNames[index];
         const propSchema = properties[propName];
@@ -95,14 +50,8 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
         if (propName === SELECT_ALL_COLUMN_NAME || !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable)) {
             return _jsx("div", { className: "schema-table__th" });
         }
-        return (_jsx("ul", Object.assign({ className: `column-filter-dropdown ${columnFilterDropdown && columnFilterDropdown === propName
-                ? "column-filter-dropdown--show"
-                : ""}`, style: {
-                position: "fixed",
-                marginTop: -10,
-                minHeight: 100,
-            } }, { children: _jsx("div", Object.assign({ id: "filter-dropdown-item", style: { margin: 10 } }, { children: field(propSchema, propName, propValue) })) })));
-    }, [columnFilterDropdown, columnNames, config, field, properties, value]);
+        return (_jsx("div", Object.assign({ className: "schema-table__th" }, { children: field(propSchema, propName, propValue, propConfig) }), `filter-col-${propName}`));
+    }, [columnNames, config, field, properties, value]);
     return (_jsx("div", Object.assign({ className: "schema-table__th-row", style: { display: "flex", flex: "row" } }, { children: columnNames.map((columnName, index) => {
             return (_jsx("div", Object.assign({ className: "schema-table__column-filter", style: {
                     width: getWidth(index),

package/dist/SchemaTable/SchemaColumnFilterPopover/FilterFormComponent/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { TColumnFilterValue } from "../../index";
+interface IFilterFormComponentProps {
+    onChange: (newValue?: TColumnFilterValue) => void;
+    propSchema: oas31.SchemaObject;
+    propName: string;
+    columnFilterValue: TColumnFilterValue;
+}
+declare const _default: React.MemoExoticComponent<({ onChange, propSchema, propName, columnFilterValue, }: IFilterFormComponentProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/SchemaTable/SchemaColumnFilterPopover/FilterFormComponent/index.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { uncamel } from "../../../inc/string";
+import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../../inc/constant";
+import DatePicker from "react-datepicker";
+import nl from "date-fns/locale/nl";
+const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue, }) => {
+    const { type, format, minimum, maximum } = propSchema;
+    const value = columnFilterValue;
+    switch (type) {
+        case "integer":
+            return (_jsx("div", Object.assign({ className: "d-flex p-1" }, { children: _jsx("input", { type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+                        onChange(e.currentTarget.value === ""
+                            ? undefined
+                            : parseInt(e.currentTarget.value));
+                    }, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
+        case "boolean":
+            let selectValue = value ? "✓" : "✕";
+            if (value === undefined) {
+                selectValue = "";
+            }
+            return (_jsxs("select", Object.assign({ value: selectValue, "data-prop-name": propName, onChange: (e) => {
+                    switch (e.currentTarget.value) {
+                        case "✓":
+                            onChange(true);
+                            break;
+                        case "✕":
+                            onChange(false);
+                            break;
+                        default:
+                            onChange(undefined);
+                    }
+                } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), ["✓", "✕"].map((optionValue) => (_jsx("option", Object.assign({ value: optionValue }, { children: optionValue }), `column-filter-select-${optionValue}`)))] })));
+        // @ts-ignore
+        case "string":
+            if (propSchema.enum) {
+                return (_jsxs("select", Object.assign({ value: value, "data-prop-name": propName, onChange: (e) => {
+                        onChange(e.currentTarget.value || undefined);
+                    } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((name) => (_jsx("option", Object.assign({ value: name }, { children: uncamel(name) }), `column-filter-select-${name}`)))] })));
+            }
+            if (format === "date-time" || format === "date") {
+                const dateFormat = format === "date" ? DEFAULT_DATE_FORMAT : DEFAULT_DATE_TIME_FORMAT;
+                const dateRangeValue = (columnFilterValue || {
+                    from: undefined,
+                    to: undefined,
+                });
+                const startDateChangeHandler = (date) => {
+                    if (!date && !dateRangeValue.to) {
+                        onChange(undefined);
+                        return;
+                    }
+                    if (dateRangeValue.to && date && date > dateRangeValue.to) {
+                        return;
+                    }
+                    onChange(Object.assign(Object.assign({}, columnFilterValue), { from: date || undefined }));
+                };
+                const endDateChangeHandler = (date) => {
+                    if (!date && !dateRangeValue.from) {
+                        onChange(undefined);
+                        return;
+                    }
+                    if (dateRangeValue.from && date && date < dateRangeValue.from) {
+                        return;
+                    }
+                    onChange(Object.assign(Object.assign({}, columnFilterValue), { to: date || undefined }));
+                };
+                return (_jsx("div", Object.assign({ "data-bs-toggle": "dropdown-menu-item" }, { children: _jsxs("div", Object.assign({ className: "d-flex p-2" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: dateRangeValue.from, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "End date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: dateRangeValue.to, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })) })));
+            }
+        // falls through
+        default:
+            return (_jsx("div", Object.assign({ className: "p-1" }, { children: _jsx("input", { autoFocus: true, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+                        onChange(e.currentTarget.value || undefined);
+                    }, placeholder: `Search ${propName}` }) })));
+    }
+};
+export default React.memo(FilterFormComponent);

package/dist/SchemaTable/SchemaColumnFilterPopover/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { TColumnFilterValue } from "../index";
+export interface ISchemaColumnFilterPopoverConfig {
+    anchorPoint: {
+        x: number;
+        y: number;
+    };
+    anchorPosition?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+    propName: string;
+}
+type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
+    onChange: (newValue?: TColumnFilterValue) => void;
+    propSchema: oas31.SchemaObject;
+    value: TColumnFilterValue;
+    onClose: () => void;
+};
+declare const _default: React.MemoExoticComponent<(props: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/SchemaTable/SchemaColumnFilterPopover/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import FilterFormComponent from "./FilterFormComponent";
+const SchemaColumnFilterPopover = (props) => {
+    const { anchorPoint, onClose, onChange, propName, propSchema, value } = props;
+    const [popoverEl, setPopoverEl] = React.useState();
+    const rect = React.useMemo(() => {
+        return popoverEl === null || popoverEl === void 0 ? void 0 : popoverEl.getBoundingClientRect();
+    }, [popoverEl]);
+    const ref = React.useCallback((el) => {
+        if (el) {
+            setPopoverEl(el);
+        }
+    }, []);
+    const style = React.useMemo(() => {
+        const result = {};
+        let anchorPosition = props.anchorPosition;
+        if (!anchorPosition) {
+            const anchorPositionVertical = anchorPoint.y > window.innerHeight / 2 ? "bottom" : "top";
+            const anchorPositionHorizontal = anchorPoint.x > window.innerWidth / 2 ? "Right" : "Left";
+            anchorPosition = `${anchorPositionVertical}${anchorPositionHorizontal}`;
+        }
+        switch (anchorPosition) {
+            case "bottomLeft":
+                result.left = (anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0;
+                result.top = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y) || 0) - rect.height : 0;
+                break;
+            case "topLeft":
+                result.left = (anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0;
+                result.top = (anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y) || 0;
+                break;
+            case "bottomRight":
+                result.left = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0) - rect.width : 0;
+                result.top = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y) || 0) - rect.height : 0;
+                break;
+            case "topRight":
+            default:
+                result.left = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0) - rect.width : 0;
+                result.top = anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y;
+                break;
+        }
+        result.maxHeight = window.innerHeight - result.top - 10;
+        return result;
+    }, [anchorPoint.x, anchorPoint.y, props.anchorPosition, rect]);
+    const lightboxRef = React.useRef(null);
+    const onLightboxClick = React.useCallback((e) => {
+        if (e.target === lightboxRef.current) {
+            onClose();
+        }
+    }, [onClose]);
+    return (_jsx("div", Object.assign({ className: `lightbox lightbox--transparent schema-column-filter-popover schema-column-filter-popover__${propSchema.type}${propSchema.format ? `_${propSchema.format}` : ""}`, onClick: onLightboxClick, onContextMenu: onClose, ref: lightboxRef }, { children: _jsx("div", Object.assign({ className: "popover", ref: ref, style: style }, { children: _jsx(FilterFormComponent, { onChange: onChange, propSchema: propSchema, propName: propName, columnFilterValue: value }) })) })));
+};
+export default React.memo(SchemaColumnFilterPopover);

package/dist/SchemaTable/Th/index.d.ts

@@ -1,21 +1,27 @@
 import { oas31 } from "openapi3-ts";
 import React, { CSSProperties, Dispatch, SetStateAction } from "react";
 import { IColumnConfig } from "../../types";
+import { ISchemaColumnFilterPopoverConfig } from "../SchemaColumnFilterPopover";
+export declare enum EColumnFilterStatus {
+    UNAVAILABLE = "UNAVAILABLE",
+    AVAILABLE = "AVAILABLE",
+    ACTIVE = "ACTIVE"
+}
 interface IThProps {
-    columnFilterDropdown?: string;
+    columnFilterStatus: EColumnFilterStatus;
+    disableColumnFilter: (propName: string) => void;
     isAllChecked?: boolean;
-    isColumnSearchable?: boolean;
     isSortable: boolean;
-    name: string;
     numberOfSelectedRows?: number;
     onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     propConfig?: IColumnConfig<any>;
+    propName: string;
     schema: oas31.SchemaObject;
-    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
+    setPopoverConfig?: Dispatch<SetStateAction<ISchemaColumnFilterPopoverConfig | undefined>>;
     setSortAsc: Dispatch<SetStateAction<boolean>>;
     setSortColumn: Dispatch<SetStateAction<string>>;
     sortAsc?: boolean;
     style: CSSProperties;
 }
-declare const _default: ({ columnFilterDropdown, isAllChecked, isColumnSearchable, isSortable, name, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, schema, setColumnFilterDropdown, setSortAsc, setSortColumn, sortAsc, style, }: IThProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }: IThProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/SchemaTable/Th/index.js

@@ -2,30 +2,60 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { uncamel } from "../../inc/string";
 import { SELECT_ALL_COLUMN_NAME } from "../constants";
-const Th = ({ columnFilterDropdown, isAllChecked, isColumnSearchable, isSortable, name, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, schema, setColumnFilterDropdown, setSortAsc, setSortColumn, sortAsc, style, }) => {
+export var EColumnFilterStatus;
+(function (EColumnFilterStatus) {
+    EColumnFilterStatus["UNAVAILABLE"] = "UNAVAILABLE";
+    EColumnFilterStatus["AVAILABLE"] = "AVAILABLE";
+    EColumnFilterStatus["ACTIVE"] = "ACTIVE";
+})(EColumnFilterStatus || (EColumnFilterStatus = {}));
+const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }) => {
     const thDivProps = {
         style,
-        className: `schema-table__th ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
+        className: `schema-table__th schema-table__th--column-filter-status-${columnFilterStatus} ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
     };
     const onSortButtonClick = React.useCallback(() => {
         if (sortAsc === undefined) {
-            setSortColumn(name);
+            setSortColumn(propName);
             setSortAsc(!(propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc));
             return;
         }
         setSortAsc((sortAsc) => !sortAsc);
-    }, [propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc, name, setSortAsc, setSortColumn, sortAsc]);
-    const onFilterButtonClick = React.useCallback(() => {
-        if (!setColumnFilterDropdown) {
+    }, [
+        propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc,
+        propName,
+        setSortAsc,
+        setSortColumn,
+        sortAsc,
+    ]);
+    const onFilterButtonClick = React.useCallback((e) => {
+        if (columnFilterStatus === EColumnFilterStatus.ACTIVE &&
+            disableColumnFilter) {
+            disableColumnFilter(propName);
             return;
         }
-        if (columnFilterDropdown && columnFilterDropdown === name) {
-            setColumnFilterDropdown(undefined);
+        if (!setPopoverConfig) {
             return;
         }
-        setColumnFilterDropdown(name);
-    }, [columnFilterDropdown, name, setColumnFilterDropdown]);
-    if (name === SELECT_ALL_COLUMN_NAME) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        setPopoverConfig((popoverConfig) => {
+            if (popoverConfig) {
+                return undefined;
+            }
+            return {
+                anchorPoint: rect
+                    ? {
+                        x: Math.round(rect.x + rect.width),
+                        y: Math.round(rect.y + rect.height),
+                    }
+                    : {
+                        x: e.clientX,
+                        y: e.clientY,
+                    },
+                propName,
+            };
+        });
+    }, [columnFilterStatus, disableColumnFilter, propName, setPopoverConfig]);
+    if (propName === SELECT_ALL_COLUMN_NAME) {
         return (_jsx("div", Object.assign({}, thDivProps, { children: _jsx("div", Object.assign({ style: {
                     width: "100%",
                     textAlign: "center",
@@ -47,6 +77,10 @@ const Th = ({ columnFilterDropdown, isAllChecked, isColumnSearchable, isSortable
                 thDivProps.className += ` text-${propConfig.align}`;
             }
     }
-    return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortable) === false, onClick: onSortButtonClick }, { children: [(propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined ? uncamel(name) : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined ? uncamel(name) : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title }))), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable) && isColumnSearchable ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick, "data-bs-toggle": "dropdown" }, { children: _jsx("svg", Object.assign({ viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", height: 16, width: 16, style: { display: "block" }, "data-bs-toggle": "dropdown" }, { children: _jsx("polygon", { "data-bs-toggle": "dropdown", fill: "#231F20", points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
+    return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortable) === false, onClick: onSortButtonClick }, { children: [(propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined
+                        ? uncamel(propName)
+                        : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined
+                    ? uncamel(propName)
+                    : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title }))), columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick, "data-bs-toggle": "dropdown" }, { children: _jsx("svg", Object.assign({ viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", height: 16, width: 16, style: { display: "block" }, fill: "currentColor" }, { children: _jsx("polygon", { points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
 };
 export default React.memo(Th);

package/dist/SchemaTable/index.d.ts

@@ -15,7 +15,7 @@ export interface ISchemaTableProps<T> {
     getRowSelected?: (rowData: T) => boolean;
     maxHeight?: number;
     isSearchable?: boolean;
-    isColumnSearchable?: boolean;
+    isColumnFilterable?: boolean;
     isSortable?: boolean;
     onCheckedIndexesChange?: (dataIndex: number[]) => void;
     onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
@@ -25,8 +25,10 @@ export interface ISchemaTableProps<T> {
     style?: React.CSSProperties;
     width: number;
 }
-export type tColumnSearchValue = string | number | boolean | {
-    from: string;
-    to: string;
+export type TColumnFilterValue = string | number | boolean | {
+    from?: Date;
+    to?: Date;
 };
-export default function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnSearchable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof SchemaTable;
+export default _default;

package/dist/SchemaTable/index.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { VariableSizeList, VariableSizeGrid } from "react-window";
-import { localeFormat, getUnixTimeStamp } from "../inc/date";
+import { VariableSizeGrid, VariableSizeList } from "react-window";
+import { localeFormat } from "../inc/date";
 import { uncamel } from "../inc/string";
-import Th from "./Th";
+import Th, { EColumnFilterStatus } from "./Th";
 import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
 import Td from "./Td";
-import ColumnFilterRow from "./ColumnFilterRow";
 import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
-export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnSearchable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, }) {
+import SchemaColumnFilterPopover from "./SchemaColumnFilterPopover";
+function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [searchQuery, setSearchQuery] = React.useState("");
-    const [columnSearchObj, setColumnSearchObj] = React.useState({});
-    const [columnFilterDropdown, setColumnFilterDropdown] = React.useState();
+    const [columnFilterMap, setColumnFilterMap] = React.useState({});
+    const [popoverConfig, setPopoverConfig] = React.useState();
     const { properties = {} } = schema;
     const columnNames = React.useMemo(() => {
         const columns = Object.keys(properties);
@@ -143,61 +143,60 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
     ]);
     const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
     const filteredRenderData = React.useMemo(() => {
-        if (!renderData || (!isColumnSearchable && !isSearchable)) {
+        if (!renderData || (!isColumnFilterable && !isSearchable)) {
             return renderData;
         }
         return renderData.filter((item) => {
-            const globalSearchFilterResult = searchQuery
-                ? !!columnNames.find((columnName) => 
+            const lcSearchQuery = searchQuery.toLowerCase();
+            if (searchQuery &&
+                !columnNames.find((columnName) => `${item[columnName]}`.toLowerCase().includes(lcSearchQuery))) {
+                return false;
+            }
+            let result = true;
+            Object.entries(columnFilterMap).forEach(([propName, columnFilterValue]) => {
+                if (!result || columnFilterValue === undefined) {
+                    return;
+                }
+                const propSchema = properties[propName];
                 // @ts-ignore
-                `${item[columnName]}`
-                    .toLowerCase()
-                    .includes(searchQuery.toLowerCase()))
-                : true;
-            const rowColumnValidation = isColumnSearchable
-                ? Object.keys(columnSearchObj).reduce((previousValue, propName) => {
-                    const propSchema = properties[propName];
-                    const columnSearchValue = columnSearchObj[propName];
-                    const rawValue = `${item[propName]}`;
-                    if (typeof columnSearchValue === "object" &&
-                        (propSchema.format === "date" ||
-                            propSchema.format === "date-time")) {
-                        const dateFormat = propSchema.format === "date"
-                            ? DEFAULT_DATE_FORMAT
-                            : DEFAULT_DATE_TIME_FORMAT;
-                        const { from, to } = columnSearchValue;
-                        if (!from) {
-                            return previousValue;
+                const rawValue = data[item._index][propName];
+                switch (propSchema.type) {
+                    case "boolean":
+                    case "integer":
+                        result = rawValue === columnFilterValue;
+                        break;
+                    // @ts-ignore
+                    case "string":
+                        if (typeof columnFilterValue === "object" &&
+                            (propSchema.format === "date" ||
+                                propSchema.format === "date-time")) {
+                            const { from, to } = columnFilterValue;
+                            const rawDate = rawValue ? new Date(rawValue) : undefined;
+                            if ((from && (!rawDate || rawDate < from)) ||
+                                (to && (!rawDate || rawDate > to))) {
+                                result = false;
+                            }
+                            return;
                         }
-                        const startDate = getUnixTimeStamp(from, dateFormat);
-                        const endDate = to
-                            ? getUnixTimeStamp(to, dateFormat)
-                            : undefined;
-                        const currentDate = getUnixTimeStamp(rawValue, dateFormat);
-                        if (!startDate) {
-                            return previousValue;
-                        }
-                        previousValue.push(startDate && endDate
-                            ? currentDate >= startDate && currentDate <= endDate
-                            : currentDate >= startDate);
-                        return previousValue;
-                    }
-                    previousValue.push(rawValue
-                        .toLowerCase()
-                        .includes(`${columnSearchValue}`.toLowerCase()));
-                    return previousValue;
-                }, [])
-                : [true];
-            return globalSearchFilterResult && rowColumnValidation.every((el) => el);
+                    // fall through
+                    default:
+                        // fallback by looking at the render value
+                        result = `${item[propName]}`
+                            .toLowerCase()
+                            .includes(`${columnFilterValue}`.toLowerCase());
+                }
+            });
+            return result;
         });
     }, [
-        columnNames,
-        columnSearchObj,
-        isColumnSearchable,
-        isSearchable,
-        properties,
         renderData,
+        isColumnFilterable,
+        isSearchable,
         searchQuery,
+        columnNames,
+        columnFilterMap,
+        properties,
+        data,
     ]);
     // Sort the filtered data
     const sortedRenderData = React.useMemo(() => {
@@ -254,21 +253,33 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
             (filteredRenderData === null || filteredRenderData === void 0 ? void 0 : filteredRenderData.length) === (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length) &&
             (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.every((checkedIndex) => filteredRenderData === null || filteredRenderData === void 0 ? void 0 : filteredRenderData.some((el) => el._index === checkedIndex))));
     }, [checkedIndexes, filteredRenderData]);
+    const disableColumnFilter = React.useCallback((propName) => {
+        const newColumnFilterMap = Object.assign({}, columnFilterMap);
+        delete newColumnFilterMap[propName];
+        setColumnFilterMap(newColumnFilterMap);
+    }, [columnFilterMap]);
     const SchemaTableTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
-        return (_jsx(Th, { columnFilterDropdown: columnFilterDropdown, isAllChecked: isAllRowsChecked, isColumnSearchable: isColumnSearchable, isSortable: !!isSortable, name: propName, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: config ? config[propName] : undefined, schema: properties[propName], setColumnFilterDropdown: setColumnFilterDropdown, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
+        let columnFilterStatus = isColumnFilterable
+            ? EColumnFilterStatus.AVAILABLE
+            : EColumnFilterStatus.UNAVAILABLE;
+        if (columnFilterMap[propName] !== undefined) {
+            columnFilterStatus = EColumnFilterStatus.ACTIVE;
+        }
+        return (_jsx(Th, { isAllChecked: isAllRowsChecked, columnFilterStatus: columnFilterStatus, disableColumnFilter: disableColumnFilter, isSortable: !!isSortable, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: config ? config[propName] : undefined, propName: propName, schema: properties[propName], setPopoverConfig: setPopoverConfig, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
     }, [
+        checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
+        columnFilterMap,
         columnNames,
         config,
+        disableColumnFilter,
+        isAllRowsChecked,
+        isColumnFilterable,
         isSortable,
+        onSelectAllIndexesHandler,
         properties,
-        sortColumn,
         sortAsc,
-        onSelectAllIndexesHandler,
-        isAllRowsChecked,
-        checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
-        columnFilterDropdown,
-        isColumnSearchable,
+        sortColumn,
     ]);
     const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
         const propName = columnNames[columnIndex];
@@ -286,9 +297,6 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
         rowHeight,
         sortedRenderData,
     ]);
-    const columnSearchHandler = React.useCallback((propName, value) => {
-        setColumnSearchObj((columnSearch) => (Object.assign(Object.assign({}, columnSearch), { [propName]: value })));
-    }, []);
     const onSearchChange = React.useCallback((e) => {
         setSearchQuery(e.currentTarget.value);
     }, []);
@@ -302,5 +310,19 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
             ? rowsMaxHeight
             : rowsHeight;
     }, [maxHeight, isSearchable, rowCount, rowHeight]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }) }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), isColumnSearchable ? (_jsx(ColumnFilterRow, { schema: schema, columnNames: columnNames, config: config, value: columnSearchObj, columnSearchHandler: columnSearchHandler, getWidth: getColumnWidth, columnFilterDropdown: columnFilterDropdown, setColumnFilterDropdown: setColumnFilterDropdown })) : null, _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)] })));
+    const onPopoverClose = React.useCallback(() => {
+        setPopoverConfig(undefined);
+    }, []);
+    const onSchemaColumnFilterChange = React.useCallback((newColumnFilterValue) => {
+        if (!popoverConfig) {
+            return;
+        }
+        if (newColumnFilterValue === undefined) {
+            disableColumnFilter(popoverConfig.propName);
+            return;
+        }
+        setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
+    }, [disableColumnFilter, popoverConfig]);
+    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { anchorPoint: popoverConfig.anchorPoint, anchorPosition: popoverConfig.anchorPosition, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName] })) : null] })));
 }
+export default React.memo(SchemaTable);

package/dist/SchemaTable/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/SchemaTable/index.test.js

@@ -0,0 +1,18 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import SchemaTable from "./index";
+it("renders an empty table", () => __awaiter(void 0, void 0, void 0, function* () {
+    render(_jsx(SchemaTable, { data: [], schema: {}, width: 1 }));
+    const table = yield screen.findByRole("table");
+    expect(table).toBeInTheDocument();
+}));

package/dist/inc/date.d.ts

@@ -1,2 +1 @@
 export declare const localeFormat: (date: Date | number, dateFormat: string) => string;
-export declare const getUnixTimeStamp: (date: string, dateFormat?: string) => number;

package/dist/inc/date.js

@@ -1,7 +1,3 @@
 import { format } from "date-fns";
 import nl from "date-fns/locale/nl";
 export const localeFormat = (date, dateFormat) => format(date, dateFormat, { locale: nl });
-export const getUnixTimeStamp = (date, dateFormat) => {
-    return Math.floor(new Date(format(new Date(date), dateFormat || "MM/dd/yyyy")).getTime() /
-        1000);
-};

package/dist/index.css

@@ -1,3 +1,8 @@
+@import "../../node_modules/react-datepicker/dist/react-datepicker.min.css";
+.react-datepicker {
+  display: flex;
+}
+
 .schema-table {
   overflow: hidden;
 }
@@ -87,6 +92,12 @@
   font-weight: bold;
   display: flex;
 }
+.schema-table__th--column-filter-status-ACTIVE button {
+  font-style: italic;
+}
+.schema-table__th--column-filter-status-ACTIVE svg {
+  color: red;
+}
 .schema-table__td {
   overflow: hidden;
   white-space: nowrap;
@@ -126,3 +137,32 @@
   border-radius: 8px;
   padding: 4px 10px;
 }
+.schema-table .schema-column-filter-popover__string_date-time .popover {
+  width: 500px;
+  max-width: initial;
+}
+.schema-table .lightbox {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+.schema-table .lightbox--transparent {
+  background-color: transparent;
+}
+.schema-table .popover {
+  position: fixed;
+  border-radius: 2px;
+  background: #ddd;
+  box-shadow: 0 2px 10px #999999;
+  z-index: 1;
+  padding: 10px;
+  min-width: 150px;
+}
+.schema-table .popover select,
+.schema-table .popover input {
+  width: 100%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.23",
+  "version": "3.0.25",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -23,9 +23,10 @@
     "react-window": "^1.8.9"
   },
   "scripts": {
+    "build": "tsc -p tsconfig.json; sass --no-source-map src/component/index.scss dist/index.css",
+    "prepublishOnly": "npm run build",
     "start": "react-scripts start",
-    "build": "tsc -p tsconfig.json; sass --no-source-map src/component/SchemaTable/index.scss dist/index.css",
-    "prepublishOnly": "npm run build"
+    "test": "react-scripts test"
   },
   "eslintConfig": {
     "extends": [
@@ -49,6 +50,8 @@
     "@types/date-fns": "^2.6.0",
     "@types/lodash": "^4.14.194",
     "@types/react-window": "^1.8.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "axios": "^1.4.0",
     "prettier": "^2.8.8",
     "react-router-dom": "^6.11.2",