@pipe0/react-sdk 0.0.72 → 0.0.73

package/dist/hooks/usePipeCatalogTable.d.ts

@@ -1,4 +1,4 @@
-import { type PipeEntryWithLatestVersion, type PipeCategory, type PipeId } from "@pipe0/ops";
+import { type PipeCategory, type PipeEntryWithLatestVersion, type PipeId } from "@pipe0/ops";
 import { type ColumnFilter } from "@tanstack/react-table";
 export type InputFieldEntries = Record<string, PipeId[]>;
 export type OutputFieldEntries = Record<string, PipeId[]>;
@@ -31,5 +31,7 @@ export declare function usePipeCatalogTable(config?: {
     category: PipeCategory | null;
     setCategory: (category: PipeCategory | null) => void;
     showFeaturedPipes: boolean;
+    getColumnFilterValue: (id: "inputFields" | "outputFields" | "tags" | "providers") => string;
 };
+export type UsePipeCatalogTableReturn = ReturnType<typeof usePipeCatalogTable>;
 //# sourceMappingURL=usePipeCatalogTable.d.ts.map

package/dist/hooks/usePipeCatalogTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePipeCatalogTable.d.ts","sourceRoot":"","sources":["../../src/hooks/usePipeCatalogTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,0BAA0B,EAC/B,KAAK,YAAY,EACjB,KAAK,MAAM,EACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,KAAK,YAAY,EAOlB,MAAM,uBAAuB,CAAC;AA2C/B,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AACzD,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAuC1D,wBAAgB,mBAAmB,CACjC,MAAM,GAAE;IACN,oBAAoB,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC;;;;;;;;;;;;;iCAyGC,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW;8BA3BpD,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW,SAClD,MAAM;;;;;wBA2CV,aAAa,GAAG,cAAc,aAAa,MAAM;;;0BAThD,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW,SAClD,MAAM;;;4BAvBJ,YAAY,GAAG,IAAI;;EA4EjC"}
+{"version":3,"file":"usePipeCatalogTable.d.ts","sourceRoot":"","sources":["../../src/hooks/usePipeCatalogTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,YAAY,EACjB,KAAK,0BAA0B,EAC/B,KAAK,MAAM,EACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,KAAK,YAAY,EAMlB,MAAM,uBAAuB,CAAC;AA4C/B,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AACzD,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AA0C1D,wBAAgB,mBAAmB,CACjC,MAAM,GAAE;IACN,oBAAoB,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC;;;;;;;;;;;;;iCAwGC,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW;8BAxBpD,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW,SAClD,MAAM;;;;;wBAgDV,aAAa,GAAG,cAAc,aAAa,MAAM;;;0BAjBhD,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW,SAClD,MAAM;;;4BAvBJ,YAAY,GAAG,IAAI;;+BA+BzB,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW,KAE1C,MAAM;EAkDzB;AAED,MAAM,MAAM,yBAAyB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/hooks/usePipeCatalogTable.js

@@ -1,6 +1,7 @@
 import { getDefaultOutputFields, getDefaultPipeProviders, getInitialTableData, getTableDataAggregates, } from "@pipe0/ops";
-import { createColumnHelper, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, useReactTable, } from "@tanstack/react-table";
+import { createColumnHelper, getCoreRowModel, getFilteredRowModel, useReactTable, } from "@tanstack/react-table";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { fuzzyFilter } from "../utils/helpers.js";
 const globalFilterFn = (row, columnId, filterValue) => {
     const value = row.getValue(columnId);
     if (Array.isArray(value)) {
@@ -31,6 +32,14 @@ const columns = [
         filterFn: "includesString",
         enableGlobalFilter: true,
     }),
+    columnHelper.accessor("label", {
+        filterFn: "fuzzy",
+        enableGlobalFilter: true,
+    }),
+    columnHelper.accessor("description", {
+        filterFn: "fuzzy",
+        enableGlobalFilter: true,
+    }),
     columnHelper.accessor((row) => row.defaultInputGroups.flatMap((g) => Object.keys(g.fields)) || [], {
         id: "inputFields",
         filterFn: "arrIncludes",
@@ -51,11 +60,6 @@ const columns = [
         filterFn: "arrIncludes",
         enableGlobalFilter: true,
     }),
-    // columnHelper.accessor((row) => row.categories || [], {
-    //   id: "categories",
-    //   filterFn: "arrIncludes",
-    //   enableGlobalFilter: true,
-    // }),
 ];
 export function usePipeCatalogTable(config = {}) {
     const [category, setCategory] = useState(null);
@@ -65,9 +69,11 @@ export function usePipeCatalogTable(config = {}) {
         columns,
         data: initialTableData,
         getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
-        globalFilterFn: globalFilterFn,
+        globalFilterFn: fuzzyFilter,
+        filterFns: {
+            fuzzy: fuzzyFilter,
+        },
         getColumnCanGlobalFilter: (column) => column.columnDef.enableGlobalFilter !== false,
         initialState: {
             columnFilters: initialColumnFilters,
@@ -109,11 +115,8 @@ export function usePipeCatalogTable(config = {}) {
     });
     const addColumnFilter = useCallback((id, value) => {
         setGlobalFilterImmediately("");
-        table.setColumnFilters([
-            { id: "categories", value: category },
-            { id, value },
-        ]);
-    }, [category, setGlobalFilterImmediately, table]);
+        table.setColumnFilters([{ id, value }]);
+    }, [setGlobalFilterImmediately, table]);
     const handleCategoryChange = useCallback((category) => {
         setCategory(category);
         table.setColumnFilters([]);
@@ -121,21 +124,23 @@ export function usePipeCatalogTable(config = {}) {
     }, [table, setGlobalFilterImmediately]);
     const resetColumnFilters = useCallback(() => {
         setGlobalFilterImmediately("");
-        table.setColumnFilters([{ id: "categories", value: null }]);
-    }, [setGlobalFilterImmediately, table]);
+        setCategory(null);
+    }, [setGlobalFilterImmediately]);
     const removeColumnFilter = useCallback((id) => {
         table.getColumn(id)?.setFilterValue(null);
     }, [table]);
     const isFilterChecked = useCallback((id, value) => {
         return columnFilters.some((f) => f.id === id && f.value === value);
     }, [columnFilters]);
+    const getColumnFilterValue = useCallback((id) => {
+        const res = columnFilters.find((f) => f.id === id)?.value;
+        return res;
+    }, [columnFilters]);
     const filterByField = useCallback((id, fieldName) => {
         setExpandedSidebarSections([id]);
         setGlobalFilterImmediately("");
-        table.setColumnFilters([
-            { id: "categories", value: null },
-            { id, value: fieldName },
-        ]);
+        setCategory(null);
+        table.setColumnFilters([{ id, value: fieldName }]);
     }, [table, setExpandedSidebarSections, setGlobalFilterImmediately]);
     const tableState = table.getState();
     const showFeaturedPipes = !globalFilterInput &&
@@ -167,5 +172,6 @@ export function usePipeCatalogTable(config = {}) {
         category,
         setCategory: handleCategoryChange,
         showFeaturedPipes,
+        getColumnFilterValue,
     };
 }

package/dist/hooks/useSearchCatalogTable.d.ts

@@ -26,5 +26,7 @@ export declare function useSearchCatalogTable(config?: {
     category: SearchCategory | null;
     setCategory: (category: SearchCategory | null) => void;
     showFeaturedSearches: boolean;
+    getColumnFilterValue: (id: "outputFields" | "tags" | "providers") => string;
 };
+export type UseSearchCatalogTableReturn = ReturnType<typeof useSearchCatalogTable>;
 //# sourceMappingURL=useSearchCatalogTable.d.ts.map

package/dist/hooks/useSearchCatalogTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSearchCatalogTable.d.ts","sourceRoot":"","sources":["../../src/hooks/useSearchCatalogTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,QAAQ,EACd,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,KAAK,YAAY,EAOlB,MAAM,uBAAuB,CAAC;AA2C/B,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;AA4BlE,wBAAgB,qBAAqB,CACnC,MAAM,GAAE;IACN,oBAAoB,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC;;;;;;;;;;;iCAyEA,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW;8BAhBrD,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW,SAClD,MAAM;;;wBA4BT,aAAa,GAAG,cAAc,aACvB,MAAM;;;0BARb,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW,SAClD,MAAM;;;4BA0BF,cAAc,GAAG,IAAI;;EAgCnC"}
+{"version":3,"file":"useSearchCatalogTable.d.ts","sourceRoot":"","sources":["../../src/hooks/useSearchCatalogTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,QAAQ,EACd,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,KAAK,YAAY,EAKlB,MAAM,uBAAuB,CAAC;AA8B/B,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;AAoClE,wBAAgB,qBAAqB,CACnC,MAAM,GAAE;IACN,oBAAoB,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC;;;;;;;;;;;iCA2EA,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW;8BAhBrD,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW,SAClD,MAAM;;;wBA4BT,aAAa,GAAG,cAAc,aACvB,MAAM;;;0BARb,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,WAAW,SAClD,MAAM;;;4BA0BF,cAAc,GAAG,IAAI;;+BAS3B,cAAc,GAAG,MAAM,GAAG,WAAW,KAE1B,MAAM;EA8BzB;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAClD,OAAO,qBAAqB,CAC7B,CAAC"}

package/dist/hooks/useSearchCatalogTable.js

@@ -1,13 +1,7 @@
 import { getDefaultSearchOutputFields, getInitialSearchTableData, getSearchTableDataAggregates, } from "@pipe0/ops";
-import { createColumnHelper, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, useReactTable, } from "@tanstack/react-table";
+import { createColumnHelper, getCoreRowModel, getFilteredRowModel, useReactTable, } from "@tanstack/react-table";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-const globalFilterFn = (row, columnId, filterValue) => {
-    const value = row.getValue(columnId);
-    if (Array.isArray(value)) {
-        return value.some((item) => String(item).toLowerCase().includes(filterValue.toLowerCase()));
-    }
-    return String(value).toLowerCase().includes(filterValue.toLowerCase());
-};
+import { fuzzyFilter } from "../utils/helpers.js";
 function useDebounce(cb, config = {}) {
     const { initialValue = "", timeout = 400 } = config;
     const [value, setValue] = useState(initialValue);
@@ -31,6 +25,14 @@ const columns = [
         filterFn: "includesString",
         enableGlobalFilter: true,
     }),
+    columnHelper.accessor("description", {
+        filterFn: "fuzzy",
+        enableGlobalFilter: true,
+    }),
+    columnHelper.accessor("label", {
+        filterFn: "includesString",
+        enableGlobalFilter: true,
+    }),
     columnHelper.accessor((row) => getDefaultSearchOutputFields(row.searchId) || [], {
         id: "outputFields",
         filterFn: "arrIncludes",
@@ -54,9 +56,11 @@ export function useSearchCatalogTable(config = {}) {
         columns,
         data: initialSearchTableData,
         getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
-        globalFilterFn: globalFilterFn,
+        globalFilterFn: fuzzyFilter,
+        filterFns: {
+            fuzzy: fuzzyFilter,
+        },
         getColumnCanGlobalFilter: (column) => column.columnDef.enableGlobalFilter !== false,
         initialState: {
             columnFilters: initialColumnFilters,
@@ -114,6 +118,10 @@ export function useSearchCatalogTable(config = {}) {
         table.setColumnFilters([]);
         setGlobalFilterImmediately("");
     }, [table, setGlobalFilterImmediately]);
+    const getColumnFilterValue = useCallback((id) => {
+        const res = columnFilters.find((f) => f.id === id)?.value;
+        return res;
+    }, [columnFilters]);
     return {
         table,
         sidebar: {
@@ -137,5 +145,6 @@ export function useSearchCatalogTable(config = {}) {
         category,
         setCategory: handleCategoryChange,
         showFeaturedSearches,
+        getColumnFilterValue,
     };
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { usePipeCatalogTable, type InputFieldEntries, type OutputFieldEntries, } from "./hooks/usePipeCatalogTable.js";
-export { useSearchCatalogTable, type SearchOutputFieldEntries, } from "./hooks/useSearchCatalogTable.js";
+export { usePipeCatalogTable, type InputFieldEntries, type OutputFieldEntries, type UsePipeCatalogTableReturn, } from "./hooks/usePipeCatalogTable.js";
+export { useSearchCatalogTable, type SearchOutputFieldEntries, type UseSearchCatalogTableReturn, } from "./hooks/useSearchCatalogTable.js";
 export * from "./utils/helpers.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,GACxB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,qBAAqB,EACrB,KAAK,wBAAwB,GAC9B,MAAM,kCAAkC,CAAC;AAC1C,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,yBAAyB,GAC/B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,qBAAqB,EACrB,KAAK,wBAAwB,EAC7B,KAAK,2BAA2B,GACjC,MAAM,kCAAkC,CAAC;AAC1C,cAAc,oBAAoB,CAAC"}

package/dist/utils/helpers.d.ts

@@ -1,4 +1,6 @@
 import type { RecordFieldType, RecordFieldStatus } from "@pipe0/ops";
+import { type FilterFn } from "@tanstack/react-table";
 export declare function getFieldTypeIcon(fieldType: RecordFieldType): import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export declare function getFieldStatusIcon(fieldStatus: RecordFieldStatus): import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const fuzzyFilter: FilterFn<any>;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/utils/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAmCrE,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,eAAe,6IAE1D;AAED,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,iBAAiB,6IAEhE"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAiBrE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAoBtD,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,eAAe,6IAE1D;AAED,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,iBAAiB,6IAEhE;AAED,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,GAAG,CASrC,CAAC"}

package/dist/utils/helpers.js

@@ -1,4 +1,6 @@
 import { BookDashed, Bookmark, Braces, CheckCheck, Hash, HelpCircle, Loader, Pause, ToggleRight, TriangleDashed, Type, X, } from "lucide-react";
+import { rankItem } from "@tanstack/match-sorter-utils";
+import {} from "@tanstack/react-table";
 const fieldStatusIconMap = {
     completed: CheckCheck,
     failed: X,
@@ -21,3 +23,11 @@ export function getFieldTypeIcon(fieldType) {
 export function getFieldStatusIcon(fieldStatus) {
     return fieldStatusIconMap[fieldStatus];
 }
+export const fuzzyFilter = (row, columnId, value, addMeta) => {
+    // Rank the item
+    const itemRank = rankItem(row.getValue(columnId), value);
+    // Store the itemRank info
+    addMeta({ itemRank });
+    // Return if the item should be filtered in/out
+    return itemRank.passed;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipe0/react-sdk",
-  "version": "0.0.72",
+  "version": "0.0.73",
   "type": "module",
   "description": "React utils to work with pipe0",
   "keywords": [
@@ -30,11 +30,12 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@pipe0/ops": "0.0.3"
+    "@pipe0/ops": "0.0.4"
   },
   "devDependencies": {
     "@types/node": "^22.18.10",