@pipe0/react-sdk 0.0.10 → 0.0.11

package/dist/hooks/usePipeCatalogTable.d.ts

@@ -20,7 +20,7 @@ export declare function usePipeCatalogTable(config?: {
         removeColumnFilter: (id: "inputFields" | "outputFields" | "tags" | "providers") => void;
         addColumnFilter: (id: "inputFields" | "outputFields" | "tags" | "providers", value: string) => void;
     };
-    pipeEntriesByBasePipe: Record<string, (import("@pipe0/client-sdk").PipeMetaCatalogEntry<"people:workemail:waterfall@1" | "people:split:name@1" | "people:validate:email:zerobounce@1" | "people:is:workemail@1" | "company:websiteurl:email@1" | "company:newssummary:website@1" | "company:profile:builtwith@1" | "company:identity@1" | "company:overview@1" | "website:technologystack:builtwith@1" | "run:prompt@1" | "people:mobilenumber:professionalprofile:waterfall@1" | "people:mobilenumber:workemail:waterfall@1" | "people:join:name@1" | "people:professionalprofile:waterfall@1" | "people:professionalprofileurl:name@1" | "people:professionalprofileurl:email:waterfall@1" | "people:personalemail:professionalprofile:waterfall@1"> & {
+    pipeEntriesByBasePipe: Record<string, (import("@pipe0/client-sdk").PipeCatalogEntry<"people:workemail:waterfall@1" | "people:split:name@1" | "people:validate:email:zerobounce@1" | "people:is:workemail@1" | "company:websiteurl:email@1" | "company:newssummary:website@1" | "company:profile:builtwith@1" | "company:identity@1" | "company:overview@1" | "website:technologystack:builtwith@1" | "run:prompt@1" | "people:mobilenumber:professionalprofile:waterfall@1" | "people:mobilenumber:workemail:waterfall@1" | "people:join:name@1" | "people:professionalprofile:waterfall@1" | "people:professionalprofileurl:name@1" | "people:professionalprofileurl:email:waterfall@1" | "people:personalemail:professionalprofile:waterfall@1"> & {
         pipeId: PipeId;
     })[]>;
     filterByField: (id: "inputFields" | "outputFields", fieldName: string) => void;

package/dist/hooks/usePipeCatalogTable.js

@@ -31,12 +31,12 @@ const columns = [
         filterFn: "includesString",
         enableGlobalFilter: true,
     }),
-    columnHelper.accessor((row) => row.inputGroups.flatMap((g) => Object.keys(g.fields)) || [], {
+    columnHelper.accessor((row) => row.defaultInputGroups.flatMap((g) => Object.keys(g.fields)) || [], {
         id: "inputFields",
         filterFn: "arrIncludes",
         enableGlobalFilter: true,
     }),
-    columnHelper.accessor((row) => row.outputFields || [], {
+    columnHelper.accessor((row) => row.defaultOutputFields || [], {
         id: "outputFields",
         filterFn: "arrIncludes",
         enableGlobalFilter: true,

package/dist/hooks/useSearchCatalogTable.d.ts

@@ -0,0 +1,30 @@
+import { type SearchCatalogTableData, type SearchCategory, type SearchId } from "@pipe0/client-sdk";
+import { type ColumnFilter } from "@tanstack/react-table";
+export type SearchOutputFieldEntries = Record<string, SearchId[]>;
+export declare function useSearchCatalogTable(config?: {
+    initialColumnFilters?: ColumnFilter[];
+}): {
+    table: import("@tanstack/react-table").Table<SearchCatalogTableData>;
+    sidebar: {
+        sortedOutputFieldEntries: [string, ("people:profiles:icypeas@1" | "companies:profiles:icypeas@1")[]][];
+        sortedTagEntries: [string, ("people:profiles:icypeas@1" | "companies:profiles:icypeas@1")[]][];
+        sortedProviderEntries: [string, ("people:profiles:icypeas@1" | "companies:profiles:icypeas@1")[]][];
+        searchIdsByOutputField: Record<string, ("people:profiles:icypeas@1" | "companies:profiles:icypeas@1")[]>;
+        searchIdsByProvider: Record<string, ("people:profiles:icypeas@1" | "companies:profiles:icypeas@1")[]>;
+        searchIdsByTag: Record<string, ("people:profiles:icypeas@1" | "companies:profiles:icypeas@1")[]>;
+        expandedSidebarSections: string[];
+        setExpandedSidebarSections: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+        removeColumnFilter: (id: "inputFields" | "outputFields" | "tags" | "providers") => void;
+        addColumnFilter: (id: "inputFields" | "outputFields" | "tags" | "providers", value: string) => void;
+    };
+    searchEntriesByBaseSearch: Record<string, import("@pipe0/client-sdk").SearchMetaEntryWithId[]>;
+    filterByField: (id: "inputFields" | "outputFields", fieldName: string) => void;
+    globalFilterInput: string;
+    setGlobalFilterInput: import("react").Dispatch<import("react").SetStateAction<string>>;
+    isFilterChecked: (id: "inputFields" | "outputFields" | "tags" | "providers", value: string) => boolean;
+    resetColumnFilters: () => void;
+    category: SearchCategory;
+    setCategory: (category: SearchCategory | null) => void;
+    showFeaturedPipes: boolean;
+};
+//# sourceMappingURL=useSearchCatalogTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSearchCatalogTable.d.ts","sourceRoot":"","sources":["../../src/hooks/useSearchCatalogTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,KAAK,YAAY,EAOlB,MAAM,uBAAuB,CAAC;AA2C/B,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;AA+BlE,wBAAgB,qBAAqB,CACnC,MAAM,GAAE;IACN,oBAAoB,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC;;;;;;;;;;;iCAmFA,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;;;4BA1CgB,cAAc,GAAG,IAAI;;EA2FrD"}

package/dist/hooks/useSearchCatalogTable.js

@@ -0,0 +1,151 @@
+import { getInitialSearchTableData, getSearchTableDataAggregates, } from "@pipe0/client-sdk";
+import { createColumnHelper, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, 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());
+};
+function useDebounce(cb, config = {}) {
+    const { initialValue = "", timeout = 400 } = config;
+    const [value, setValue] = useState(initialValue);
+    const cbRef = useRef(cb);
+    cbRef.current = cb;
+    const setImmediately = useCallback((v) => {
+        setValue(v);
+        cbRef.current(v);
+    }, []);
+    useEffect(() => {
+        const handle = setTimeout(() => {
+            cbRef.current(value);
+        }, timeout);
+        return () => clearTimeout(handle);
+    }, [value, timeout]);
+    return [value, setValue, setImmediately];
+}
+const columnHelper = createColumnHelper();
+const columns = [
+    columnHelper.accessor("searchId", {
+        filterFn: "includesString",
+        enableGlobalFilter: true,
+    }),
+    columnHelper.accessor((row) => row.outputFields || [], {
+        id: "outputFields",
+        filterFn: "arrIncludes",
+        enableGlobalFilter: true,
+    }),
+    columnHelper.accessor((row) => row.tags || [], {
+        id: "tags",
+        filterFn: "arrIncludes",
+        enableGlobalFilter: true,
+    }),
+    columnHelper.accessor((row) => row.providers || [], {
+        id: "providers",
+        filterFn: "arrIncludes",
+        enableGlobalFilter: true,
+    }),
+    columnHelper.accessor((row) => row.categories || [], {
+        id: "categories",
+        filterFn: "arrIncludes",
+        enableGlobalFilter: true,
+    }),
+];
+export function useSearchCatalogTable(config = {}) {
+    const { initialColumnFilters: initialColumnFilters = [] } = config;
+    const initialSearchTableData = useMemo(() => getInitialSearchTableData(), []);
+    const table = useReactTable({
+        columns,
+        data: initialSearchTableData,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        globalFilterFn: globalFilterFn,
+        getColumnCanGlobalFilter: (column) => column.columnDef.enableGlobalFilter !== false,
+        initialState: {
+            columnFilters: initialColumnFilters,
+            pagination: {
+                pageSize: 10,
+            },
+        },
+    });
+    const columnFilters = table.getState().columnFilters;
+    const category = useMemo(() => columnFilters.find((e) => e.id === "categories" && e.value)
+        ?.value || null, [columnFilters]);
+    const { searchIdsByOutputField, searchIdsByTag, searchIdsByProvider, sortedTagEntries, sortedOutputFieldEntries, sortedProviderEntries, searchEntriesByBaseSearch, } = useMemo(() => {
+        return getSearchTableDataAggregates(initialSearchTableData, category);
+    }, [category, initialSearchTableData]);
+    const [expandedSidebarSections, setExpandedSidebarSections] = useState(["tags"]);
+    const setCategory = (category) => {
+        table.setGlobalFilter(null);
+        if (category) {
+            table.setColumnFilters([{ id: "categories", value: category }]);
+        }
+        else {
+            table.setColumnFilters([]);
+        }
+    };
+    const [globalFilterInput, setGlobalFilterInput, setGlobalFilterImmediately] = useDebounce((v) => {
+        if (v === table.getState().globalFilter)
+            return;
+        table.setGlobalFilter(v);
+        if (v) {
+            table.setColumnFilters([]);
+        }
+    });
+    const addColumnFilter = (id, value) => {
+        setGlobalFilterImmediately("");
+        table.setColumnFilters([
+            { id: "categories", value: category },
+            { id, value },
+        ]);
+    };
+    const resetColumnFilters = () => {
+        setGlobalFilterImmediately("");
+        table.setColumnFilters([{ id: "categories", value: null }]);
+    };
+    const removeColumnFilter = (id) => {
+        table.getColumn(id)?.setFilterValue(null);
+    };
+    const isFilterChecked = (id, value) => {
+        return columnFilters.some((f) => f.id === id && f.value === value);
+    };
+    const filterByField = (id, fieldName) => {
+        setExpandedSidebarSections([id]);
+        setGlobalFilterImmediately("");
+        table.setColumnFilters([
+            { id: "categories", value: null },
+            { id, value: fieldName },
+        ]);
+    };
+    const tableState = table.getState();
+    const showFeaturedSearches = !globalFilterInput &&
+        category === null &&
+        tableState.columnFilters.every((e) => e.id === "categories") &&
+        tableState.pagination.pageIndex === 0;
+    return {
+        table,
+        sidebar: {
+            sortedOutputFieldEntries,
+            sortedTagEntries,
+            sortedProviderEntries,
+            searchIdsByOutputField,
+            searchIdsByProvider,
+            searchIdsByTag,
+            expandedSidebarSections,
+            setExpandedSidebarSections,
+            removeColumnFilter,
+            addColumnFilter,
+        },
+        searchEntriesByBaseSearch,
+        filterByField,
+        globalFilterInput,
+        setGlobalFilterInput,
+        isFilterChecked,
+        resetColumnFilters,
+        category,
+        setCategory,
+        showFeaturedPipes: showFeaturedSearches,
+    };
+}

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export { usePipeCatalogTable, type InputFieldEntries, type OutputFieldEntries, } from "./hooks/usePipeCatalogTable.js";
+export { useSearchCatalogTable, type SearchOutputFieldEntries, } 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"}
+{"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"}

package/dist/index.js

@@ -1 +1,3 @@
 export { usePipeCatalogTable, } from "./hooks/usePipeCatalogTable.js";
+export { useSearchCatalogTable, } from "./hooks/useSearchCatalogTable.js";
+export * from "./utils/helpers.js";

package/dist/utils/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { RecordFieldStatus } from "@pipe0/client-sdk";
+export declare function getFieldStatusIcon(fieldStatus: RecordFieldStatus): import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAsB3D,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,iBAAiB,6IAEhE"}

package/dist/utils/helpers.js

@@ -0,0 +1,13 @@
+import { BookDashed, Bookmark, CheckCheck, Loader, Pause, TriangleDashed, X, } from "lucide-react";
+const fieldStatusIconMap = {
+    completed: CheckCheck,
+    failed: X,
+    no_result: BookDashed,
+    pending: Bookmark,
+    processing: Loader,
+    queued: Pause,
+    skipped: TriangleDashed,
+};
+export function getFieldStatusIcon(fieldStatus) {
+    return fieldStatusIconMap[fieldStatus];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipe0/react-sdk",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "description": "React utils to work with pipe0",
   "keywords": [
@@ -25,10 +25,11 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@tanstack/react-table": "^8.21.2",
+    "@tanstack/react-table": "^8.21.3",
+    "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@pipe0/client-sdk": "0.0.52"
+    "@pipe0/client-sdk": "0.0.53"
   },
   "devDependencies": {
     "@types/node": "^22.13.2",