frame.select 1.1.1 → 1.1.3

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,CAAC;AAInB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,iBAAS,GAAG,sBAuGX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,CAAC;AAInB,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,iBAAS,GAAG,sBA6LX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -1,10 +1,11 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import './App.css';
-import ItemList from './components/ItemList';
 import { useState } from 'react';
 import React from 'react';
 import { BrandList } from './components/BrandList';
+import { FrameList } from './components/FrameList';
 function App() {
+    const [brand, setBrand] = useState('');
     const brands = [
         {
             name: 'Adidas',
@@ -43,24 +44,102 @@ function App() {
             // item: ['New Balance'],
         },
     ];
-    const columnHelper = createColumnHelper();
-    const extraColumns = [
-        columnHelper.accessor((row) => row.description, {
+    const framesAdidas = [
+        'ADI0000000000000000014362150000',
+        'ADI0000000000000000018362150000',
+        'ADI0000000000000000019362150000',
+        // 3456789 123456789 12345678901
+        'AFF000000000000000TMA4750190000',
+    ];
+    const frameNike = [
+        'NIK0000000000000000030362150000',
+        'NIK0000000000000000031362150000',
+    ];
+    const framePuma = [
+        'PUM000000000000000PUMA162150000',
+        'PUM000000000000000PUMA262150000',
+    ];
+    const frameReebok = [
+        'REB000000000000000REEBO62150000',
+        'REB000000000000000EEBOK62150000',
+    ];
+    const frameUnderArmour = [
+        'UND000000000000000UARMR62150000',
+        'UND000000000000000UNDER62150000',
+    ];
+    const frameNewBalance = [
+        'NEW000000000000000NEWBL62150000',
+        'NEW000000000000000NWBLC62150000',
+    ];
+    const frames = [
+        { brand: 'Adidas', frames: framesAdidas },
+        { brand: 'Nike', frames: frameNike },
+        { brand: 'Puma', frames: framePuma },
+        { brand: 'Reebok', frames: frameReebok },
+        { brand: 'Under Armour', frames: frameUnderArmour },
+        { brand: 'New Balance', frames: frameNewBalance },
+    ];
+    function convertFrames(brand) {
+        const foundFrames = frames.find((b) => b.brand === brand);
+        if (!foundFrames) {
+            return [];
+        }
+        return foundFrames.frames.map((frame) => ({
+            id: frame,
+            name: frame.substring(18, 23),
+            length: parseInt(frame.substring(23, 25)),
+            width: parseInt(frame.substring(25, 27)),
+        }));
+    }
+    const brandColumnHelper = createColumnHelper();
+    const extraBrandColumns = [
+        brandColumnHelper.accessor((row) => row.description, {
             header: 'description',
             cell: (info) => React.createElement("div", null, info.getValue()),
         }),
     ];
-    const colWidth = [
+    const brandColWidth = [
         {
-            column: extraColumns[0],
+            column: extraBrandColumns[0],
+        },
+    ];
+    const frameColumnHelper = createColumnHelper();
+    const extraFrameColumns = [
+        frameColumnHelper.accessor((row) => row.length.toString(), {
+            header: 'length',
+            cell: (info) => React.createElement("div", null, info.getValue()),
+        }),
+        frameColumnHelper.accessor((row) => row.width.toString(), {
+            // Convert to string
+            header: 'width',
+            cell: (info) => React.createElement("div", null, info.getValue()),
+        }),
+    ];
+    const frameColWidth = [
+        {
+            column: extraFrameColumns[0],
+        },
+        {
+            column: extraFrameColumns[1],
         },
     ];
     const onClickItem = (item) => {
         window.alert(`Item clicked: ${item.getValue()}\n${JSON.stringify(item.row.original)}`);
     };
-    const onClickBrand = (index) => {
-        window.alert(`Item clicked: ${index}\n${JSON.stringify(brands[index], null, 2)}`);
+    const onClickBrand = (cell, index) => {
+        console.log(`cell:  ${JSON.stringify(cell.row.original, null, 2)}`);
+        const brand = brands.find((b) => b.name === cell.row.original.name);
+        // window.alert(`Item clicked: ${index}\n${JSON.stringify(brand, null, 2)}`);
+        if (brand) {
+            setBrand(brand.name);
+        }
+    };
+    const onClickFrame = (cell, index) => {
+        window.alert(`Frame clicked: ${JSON.stringify(cell.row.original)} at index ${index}`);
     };
+    // const onClickFrame = (frame: string, index: number) => {
+    //   window.alert(`Frame clicked: ${frame} at index ${index}`);
+    // };
     const [filter, setFilter] = useState('');
     function filterMatches(item, fltr) {
         const match = item.name
@@ -75,12 +154,13 @@ function App() {
         filterMatches,
         placeholder: 'Filter Brands',
     };
-    const renderItem = (item) => React.createElement("h4", null, item);
+    // const renderItem = (item: string) => <h4>{item}</h4>;
     return (React.createElement(React.Fragment, null,
         React.createElement("h1", null, "Brand List"),
-        React.createElement(ItemList, { itemList: brands, renderItem: renderItem, clickFunc: onClickItem, itemFilter: tItemFilter, extraColumns: colWidth }),
         React.createElement(BrandList, { brandList: brands, onClick: onClickBrand, 
             // renderItem={renderItem}
-            extraColumns: colWidth })));
+            extraColumns: brandColWidth }),
+        React.createElement("h2", null, "Frame List"),
+        React.createElement(FrameList, { frameList: convertFrames(brand), onClick: onClickFrame, extraColumns: frameColWidth, style: { border: '1px solid black', padding: '10px' } })));
 }
 export default App;

package/dist/components/BrandList.d.ts

@@ -1,10 +1,11 @@
+import { Cell } from '@tanstack/react-table';
 import { TColumn } from './itemTypes';
 import { JSX } from 'react';
 import React from 'react';
 import { TBrandObj } from './types';
 export declare function BrandList(props: {
     brandList: TBrandObj[];
-    onClick?: (index: number) => void;
+    onClick?: (cell: Cell<TBrandObj, unknown>, index: number) => void;
     renderItem?: (item: string) => React.ReactNode;
     extraColumns?: TColumn<TBrandObj>[];
     style?: React.CSSProperties;

package/dist/components/BrandList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrandList.d.ts","sourceRoot":"","sources":["../../src/components/BrandList.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAe,OAAO,EAAS,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,GAAG,EAA6C,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAmLd"}
+{"version":3,"file":"BrandList.d.ts","sourceRoot":"","sources":["../../src/components/BrandList.tsx"],"names":[],"mappings":"AASA,OAAO,EAIL,IAAI,EAKL,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAe,OAAO,EAAS,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,GAAG,EAA6C,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CA8Ld"}

package/dist/components/BrandList.js

@@ -29,6 +29,7 @@ export function BrandList(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [serializedExtraColumns]); // Use the serialized version as a dependency
+    /***************************** filtered items *******************************/
     const filteredItems = useMemo(() => {
         if (!tBrandFilter) {
             return props.brandList;
@@ -45,6 +46,7 @@ export function BrandList(props) {
         // tBrandFilter.filterEvent?.(filteredList)
         return filteredList;
     }, [tBrandFilter, props.brandList, extraCols]);
+    /****************************************************************************/
     const defaultHeader = 'Name';
     const columnHelper = createColumnHelper();
     const defaultColumns = [
@@ -60,9 +62,9 @@ export function BrandList(props) {
             columns.push(col.column);
         }
     });
-    const onClick = (index) => () => {
+    const onClick = (cell, index) => () => {
         if (props.onClick) {
-            props.onClick?.(index);
+            props.onClick?.(cell, index);
         }
         else {
             console.log(`Clicked item index: ${index}`);
@@ -86,31 +88,35 @@ export function BrandList(props) {
         }
         return filter;
     }
-    function displayBody(cell) {
-        let cellContent = React.createElement("div", null);
-        const cll = cell.getValue();
-        if (cell.column.columnDef.header === defaultHeader) {
-            cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, key: cell.id },
-                React.createElement(Button, { onClick: onClick(cell.row.index) }, props.renderItem
-                    ? props.renderItem(cll)
-                    : flexRender(cell.column.columnDef.cell, cell.getContext()))));
-        }
-        else {
-            cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, key: cell.id }, props.renderItem ? props.renderItem(cll) : React.createElement("div", null, cll)));
-        }
-        return cellContent;
-    }
     const table = useReactTable({
         data: filteredItems,
         columns,
         getCoreRowModel: getCoreRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
     });
+    const paginatedRows = table.getRowModel().rows;
+    const renderRows = React.useCallback((rows) => {
+        function displayBody(cell) {
+            let cellContent = React.createElement("div", null);
+            const cll = cell.getValue();
+            if (cell.column.columnDef.header === defaultHeader) {
+                cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, key: cell.id },
+                    React.createElement(Button, { onClick: onClick(cell, cell.row.index) }, props.renderItem
+                        ? props.renderItem(cll)
+                        : flexRender(cell.column.columnDef.cell, cell.getContext()))));
+            }
+            else {
+                cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, key: cell.id }, props.renderItem ? props.renderItem(cll) : React.createElement("div", null, cll)));
+            }
+            return cellContent;
+        }
+        return rows.map((row) => (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map((cell) => {
+            // console.log(`cell: ${JSON.stringify(cell, null)}`)
+            return displayBody(cell);
+        }))));
+    }, [onClick, props]);
     return (React.createElement(TableContainer, { "data-testid": "frame.select-TableContainer", style: props.style },
         React.createElement(Table, { stickyHeader: true, "aria-label": "sticky table" },
             React.createElement(TableHead, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(TableRow, { key: headerGroup.id, "data-testid": headerGroup.id }, headerGroup.headers.map((header) => (React.createElement(TableCell, { key: header.id }, displayHeader(header)))))))),
-            React.createElement(TableBody, null, table.getRowModel().rows.map((row) => (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map((cell) => {
-                // console.log(`cell: ${JSON.stringify(cell, null)}`)
-                return displayBody(cell);
-            }))))))));
+            React.createElement(TableBody, { "data-testid": "table.list-of-brands" }, renderRows(paginatedRows)))));
 }

package/dist/components/FrameList.d.ts

@@ -0,0 +1,13 @@
+import { Cell } from '@tanstack/react-table';
+import { TColumn } from './itemTypes';
+import { JSX } from 'react';
+import React from 'react';
+import { TFrameObj } from './types';
+export declare function FrameList(props: {
+    frameList: TFrameObj[];
+    onClick?: (cell: Cell<TFrameObj, unknown>, index: number) => void;
+    renderItem?: (item: string) => React.ReactNode;
+    extraColumns?: TColumn<TFrameObj>[];
+    style?: React.CSSProperties;
+}): JSX.Element;
+//# sourceMappingURL=FrameList.d.ts.map

package/dist/components/FrameList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameList.d.ts","sourceRoot":"","sources":["../../src/components/FrameList.tsx"],"names":[],"mappings":"AASA,OAAO,EAIL,IAAI,EAKL,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAe,OAAO,EAAS,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,GAAG,EAA6C,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CA8Ld"}

package/dist/components/FrameList.js

@@ -0,0 +1,122 @@
+import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Button, } from '@mui/material';
+import { useReactTable, getCoreRowModel, getFilteredRowModel, createColumnHelper, flexRender, } from '@tanstack/react-table';
+import ItemFilter from './ItemFilter';
+import { useMemo, useState, useCallback } from 'react';
+import React from 'react';
+export function FrameList(props) {
+    'use no memo'; // For React Compiler compatibility with TanStack Table
+    const [filter, setFilter] = useState('');
+    const filterMatches = useCallback((item, fltr) => {
+        const match = item.name
+            .toLowerCase()
+            .includes(fltr ? fltr.toLowerCase() : '');
+        return match;
+    }, []);
+    const tFrameFilter = useMemo(() => ({
+        property: 'name',
+        filter,
+        setFilter,
+        filterMatches,
+        placeholder: 'Frames',
+    }), [filter, filterMatches]);
+    const serializedExtraColumns = useMemo(() => JSON.stringify(props.extraColumns), [props.extraColumns]);
+    const extraCols = useMemo(() => {
+        if (props.extraColumns) {
+            return props.extraColumns.filter((col) => col !== undefined);
+        }
+        else {
+            return [];
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [serializedExtraColumns]); // Use the serialized version as a dependency
+    /***************************** filtered items *******************************/
+    const filteredItems = useMemo(() => {
+        if (!tFrameFilter) {
+            return props.frameList;
+        }
+        let filteredList = props.frameList;
+        if (tFrameFilter.filterMatches) {
+            filteredList = props.frameList.filter((item) => tFrameFilter.filterMatches(item, tFrameFilter.filter));
+        }
+        extraCols.forEach((col) => {
+            if (col?.filter) {
+                filteredList = filteredList.filter((item) => col.filter?.filterMatches(item, col.filter.filter));
+            }
+        });
+        // tBrandFilter.filterEvent?.(filteredList)
+        return filteredList;
+    }, [tFrameFilter, props.frameList, extraCols]);
+    /****************************************************************************/
+    const defaultHeader = 'Name';
+    const columnHelper = createColumnHelper();
+    const defaultColumns = [
+        columnHelper.accessor((row) => row.name, {
+            header: defaultHeader,
+            cell: (info) => (React.createElement("div", { style: { fontWeight: 'bold' } }, info.getValue())),
+            footer: (info) => info.column.id,
+        }),
+    ];
+    const columns = [...defaultColumns];
+    extraCols.forEach((col) => {
+        if (col) {
+            columns.push(col.column);
+        }
+    });
+    const onClick = (cell, index) => () => {
+        if (props.onClick) {
+            props.onClick?.(cell, index);
+        }
+        else {
+            console.log(`Clicked item index: ${index}`);
+        }
+    };
+    function displayHeader(header) {
+        let filter = React.createElement("div", null);
+        if (header.id === defaultHeader) {
+            if (tFrameFilter) {
+                filter = (React.createElement("div", { style: { width: '100%' } },
+                    React.createElement(ItemFilter, { itemFilter: tFrameFilter })));
+            }
+        }
+        else {
+            extraCols.forEach((col) => {
+                if (col && header.id === col.column.header) {
+                    filter = col.filter ? (React.createElement("div", { style: { width: '100%' } },
+                        React.createElement(ItemFilter, { itemFilter: col.filter }))) : (React.createElement("div", null));
+                }
+            });
+        }
+        return filter;
+    }
+    const table = useReactTable({
+        data: filteredItems,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+    });
+    const paginatedRows = table.getRowModel().rows;
+    const renderRows = React.useCallback((rows) => {
+        function displayBody(cell) {
+            let cellContent = React.createElement("div", null);
+            const cll = cell.getValue();
+            if (cell.column.columnDef.header === defaultHeader) {
+                cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, key: cell.id },
+                    React.createElement(Button, { onClick: onClick(cell, cell.row.index) }, props.renderItem
+                        ? props.renderItem(cll)
+                        : flexRender(cell.column.columnDef.cell, cell.getContext()))));
+            }
+            else {
+                cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, key: cell.id }, props.renderItem ? props.renderItem(cll) : React.createElement("div", null, cll)));
+            }
+            return cellContent;
+        }
+        return rows.map((row) => (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map((cell) => {
+            // console.log(`cell: ${JSON.stringify(cell, null)}`)
+            return displayBody(cell);
+        }))));
+    }, [onClick, props]);
+    return (React.createElement(TableContainer, { "data-testid": "frame.select-TableContainer", style: props.style },
+        React.createElement(Table, { stickyHeader: true, "aria-label": "sticky table" },
+            React.createElement(TableHead, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(TableRow, { key: headerGroup.id, "data-testid": headerGroup.id }, headerGroup.headers.map((header) => (React.createElement(TableCell, { key: header.id }, displayHeader(header)))))))),
+            React.createElement(TableBody, { "data-testid": "table.list-of-frames" }, renderRows(paginatedRows)))));
+}

package/dist/components/types.d.ts

@@ -3,4 +3,10 @@ export type TBrandObj = {
     id: number;
     description: string;
 };
+export type TFrameObj = {
+    name: string;
+    length: number;
+    width: number;
+    id: string;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC"}

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/app.tsx","../src/index.ts","../src/main.tsx","../src/vite-env.d.ts","../src/components/brandfilter.tsx","../src/components/brandlist.tsx","../src/components/debounceinput.tsx","../src/components/itemfilter.test.tsx","../src/components/itemfilter.tsx","../src/components/itemlist.test.tsx","../src/components/itemlist.tsx","../src/components/itemtypes.ts","../src/components/types.ts"],"version":"5.9.3"}
+{"root":["../src/app.tsx","../src/index.ts","../src/main.tsx","../src/vite-env.d.ts","../src/components/brandlist.tsx","../src/components/framelist.tsx","../src/components/itemfilter.tsx","../src/components/itemlist.tsx","../src/components/itemtypes.ts","../src/components/types.ts"],"version":"5.9.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.select",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A React component for selecting items from a list with a search bar.",
   "license": "MIT",
   "type": "module",
@@ -35,18 +35,18 @@
     "@eslint/js": "^9.39.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.25",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "globals": "^16.5.0",
     "jsdom": "^27.3.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "vite": "^7.2.7",
-    "vitest": "^4.0.15"
+    "typescript-eslint": "^8.50.0",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16"
   }
 }

package/dist/components/BrandFilter.d.ts

@@ -1,6 +0,0 @@
-import { Column } from '@tanstack/react-table';
-import React from 'react';
-export declare function BrandFilter({ column }: {
-    column: Column<any, unknown>;
-}): React.JSX.Element;
-//# sourceMappingURL=BrandFilter.d.ts.map

package/dist/components/BrandFilter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BrandFilter.d.ts","sourceRoot":"","sources":["../../src/components/BrandFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAI/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;CAAE,qBAgDvE"}

package/dist/components/BrandFilter.js

@@ -1,32 +0,0 @@
-import { useMemo } from 'react';
-import { DebouncedInput } from './DebounceInput';
-// import { Message } from '../../../../common/commands';
-import React from 'react';
-export function BrandFilter({ column }) {
-    const columnFilterValue = column.getFilterValue();
-    const [value, setFilterValue] = React.useState('');
-    // const { filterVariant } = column.columnDef.meta ?? {};
-    React.useEffect(() => {
-        console.log(`has changed`);
-        setFilterValue(columnFilterValue);
-    }, [columnFilterValue]);
-    React.useEffect(() => {
-        console.log(`BrandFilter.CommandDBBrandFilter`);
-        // window.electron.ipcRenderer.on(
-        //   Message.CommandDBBrandFilter,
-        //   (_event: unknown, data: string) => {
-        //     setVal(data);
-        //     setFilterValue(data);
-        //   }
-        // );
-    }, []);
-    // setFilterValue((columnFilterValue ?? '') as string);
-    const setVal = React.useCallback((str) => {
-        column.setFilterValue(str);
-    }, [column]);
-    return useMemo(() => (React.createElement(DebouncedInput, { className: "w-36 border shadow rounded", title: "brand", onChange: (value) => {
-            document.body.style.cursor = 'wait';
-            setVal(value);
-            document.body.style.cursor = 'default';
-        }, placeholder: `Search...`, type: "text", value: value })), [setVal, value]);
-}

package/dist/components/DebounceInput.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare function DebouncedInput({ value: initialValue, title, onChange, debounce, }: {
-    value: string | number;
-    title: string;
-    onChange: (value: string | number) => void;
-    debounce?: number;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>): React.JSX.Element;
-//# sourceMappingURL=DebounceInput.d.ts.map

package/dist/components/DebounceInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DebounceInput.d.ts","sourceRoot":"","sources":["../../src/components/DebounceInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EAAE,YAAY,EACnB,KAAK,EACL,QAAQ,EACR,QAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,qBAkEhE"}

package/dist/components/DebounceInput.js

@@ -1,41 +0,0 @@
-import { Box, Button, TextField } from '@mui/material';
-import CancelPresentationRounded from '@mui/icons-material/CancelPresentationRounded';
-import React from 'react';
-// import { Message } from '../../../../common/commands';
-export function DebouncedInput({ value: initialValue, title, onChange, debounce = 0, }) {
-    const [value, setValue] = React.useState(initialValue);
-    React.useEffect(() => {
-        console.log(`DebounceInput.clearTextField`);
-        // window.electron.ipcRenderer.on(
-        //   Message.CommandDBBrandClearFilter,
-        //   (_event: unknown, _data: string) => {
-        //     clearTextField();
-        //   }
-        // );
-    }, []);
-    React.useEffect(() => {
-        setValue(initialValue);
-    }, [initialValue]);
-    React.useEffect(() => {
-        const timeout = setTimeout(() => {
-            onChange(value);
-        }, debounce);
-        return () => clearTimeout(timeout);
-    }, [value]);
-    function clearTextField() {
-        setValue('');
-    }
-    return (React.createElement("div", null,
-        React.createElement(Box, { sx: { display: 'flex', alignItems: 'flex-end' } },
-            React.createElement(Button, { "data-testid": `button.clear-${title}`, style: {
-                    height: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    marginLeft: '8px',
-                }, onClick: clearTextField },
-                React.createElement(CancelPresentationRounded, null)),
-            React.createElement(TextField, { id: "input-with-sx", label: title, variant: "standard", value: value, onChange: (e) => {
-                    console.log(e.target.value);
-                    setValue(e.target.value);
-                }, sx: { width: '100px' } }))));
-}

package/dist/components/ItemFilter.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=ItemFilter.test.d.ts.map

package/dist/components/ItemFilter.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemFilter.test.d.ts","sourceRoot":"","sources":["../../src/components/ItemFilter.test.tsx"],"names":[],"mappings":""}

package/dist/components/ItemFilter.test.js

@@ -1,41 +0,0 @@
-import { render, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import ItemFilter from './ItemFilter';
-import React from 'react';
-describe('ItemFilter', () => {
-    it('should clear the filter when clearFilter is called', () => {
-        const setFilterMock = vi.fn();
-        const itemFilter = {
-            filter: 'test',
-            setFilter: setFilterMock,
-            placeholder: 'Filter Items',
-            property: 'name',
-            filterMatches: vi.fn(),
-        };
-        const { getByPlaceholderText, getByRole } = render(React.createElement(ItemFilter, { itemFilter: itemFilter }));
-        const input = getByPlaceholderText('Filter Items');
-        const button = getByRole('button');
-        // Ensure the input has the initial filter value
-        expect(input.value).toBe('test');
-        // Click the clear button
-        fireEvent.click(button);
-        // Ensure the setFilter function was called with an empty string
-        expect(setFilterMock).toHaveBeenCalledWith('');
-    });
-    it('should update the filter when handleInputChange is called', () => {
-        const setFilterMock = vi.fn();
-        const itemFilter = {
-            filter: '',
-            setFilter: setFilterMock,
-            placeholder: 'Filter Items',
-            property: 'name',
-            filterMatches: vi.fn(),
-        };
-        const { getByPlaceholderText } = render(React.createElement(ItemFilter, { itemFilter: itemFilter }));
-        const input = getByPlaceholderText('Filter Items');
-        // Simulate typing in the input field
-        fireEvent.change(input, { target: { value: 'new filter' } });
-        // Ensure the setFilter function was called with the new value
-        expect(setFilterMock).toHaveBeenCalledWith('new filter');
-    });
-});

package/dist/components/ItemList.test.d.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-//# sourceMappingURL=ItemList.test.d.ts.map

package/dist/components/ItemList.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemList.test.d.ts","sourceRoot":"","sources":["../../src/components/ItemList.test.tsx"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC"}

package/dist/components/ItemList.test.js

@@ -1,74 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { describe, expect, it, vi } from 'vitest';
-import { createColumnHelper } from '@tanstack/react-table';
-import React from 'react';
-import ItemList from './ItemList';
-describe('ItemList', () => {
-    const itemList = [
-        { name: 'Item 1' },
-        { name: 'Item 2' },
-        { name: 'Item 3' },
-    ];
-    const filterMatches = (item, filter) => item.name.includes(filter);
-    // const filterEvent = vi.fn()
-    const renderItem = (item) => React.createElement("span", null, item);
-    const clickFunc = vi.fn();
-    const itemFilter = {
-        filter: 'Item',
-        setFilter: vi.fn(),
-        property: 'name',
-        filterMatches,
-        placeholder: 'Filter Items',
-    };
-    it('renders the item list', () => {
-        render(React.createElement(ItemList, { itemList: itemList }));
-        itemList.forEach((item) => {
-            expect(screen.getByText(item.name)).toBeInTheDocument();
-        });
-    });
-    it('filters the item list based on filterMatches', () => {
-        render(React.createElement(ItemList, { itemList: itemList, itemFilter: itemFilter }));
-        expect(screen.getByText('Item 1')).toBeInTheDocument();
-        expect(screen.getByText('Item 2')).toBeInTheDocument();
-        expect(screen.getByText('Item 3')).toBeInTheDocument();
-    });
-    // it('calls filterEvent when filter is applied', () => {
-    //   render(<ItemList itemList={itemList} filterEvent={filterEvent} itemFilter={itemFilter} />)
-    //   expect(filterEvent).toHaveBeenCalledWith(itemList)
-    // })
-    it('renders custom item using renderItem', () => {
-        render(React.createElement(ItemList, { itemList: itemList, renderItem: renderItem }));
-        itemList.forEach((item) => {
-            expect(screen.getByText(item.name)).toBeInTheDocument();
-        });
-    });
-    it('calls clickFunc with the correct cell when an item is clicked', () => {
-        render(React.createElement(ItemList, { itemList: itemList, clickFunc: clickFunc }));
-        const itemButton = screen.getByText('Item 1').closest('button');
-        fireEvent.click(itemButton);
-        expect(clickFunc).toHaveBeenCalled();
-        expect(clickFunc.mock.calls[0][0].getValue()).toBe('Item 1');
-    });
-});
-describe('ItemList - createColumnHelper', () => {
-    it('creates columns correctly', () => {
-        const columnHelper = createColumnHelper();
-        const columns = [
-            columnHelper.accessor('name', {
-                header: 'Name',
-                cell: (info) => React.createElement("span", null, info.getValue()),
-            }),
-            columnHelper.accessor('age', {
-                header: 'Age',
-                cell: (info) => React.createElement("span", null, info.getValue()),
-            }),
-        ];
-        expect(columns).toHaveLength(2);
-        expect(columns[0].accessorKey).toBe('name');
-        expect(columns[0].header).toBe('Name');
-        expect(typeof columns[0].cell).toBe('function');
-        expect(columns[1].header).toBe('Age');
-        expect(typeof columns[1].cell).toBe('function');
-    });
-});