@pipe0/react-sdk 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @pipe0/react-sdk
+
+## 0.0.2
+
+### Patch Changes
+
+- Updates
+- Updated dependencies
+  - @pipe0/client-sdk@0.0.47

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@pipe0/eslint-config/react-internal";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@pipe0/react-sdk",
+  "version": "0.0.2",
+  "type": "module",
+  "description": "React utils to work with pipe0",
+  "keywords": [
+    "data enrichment",
+    "prospecting",
+    "company data",
+    "people data",
+    "sales technology",
+    "sales engineering"
+  ],
+  "publishConfig": {
+    "provenance": false,
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "private": false,
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "check-types": "tsc --noEmit"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@pipe0/client-sdk": "workspace:*",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "@tanstack/react-table": "catalog:"
+  },
+  "devDependencies": {
+    "@pipe0/eslint-config": "workspace:*",
+    "@types/react": "catalog:",
+    "@types/node": "^22.13.2",
+    "eslint": "catalog:",
+    "@types/react-dom": "catalog:"
+  }
+}

package/src/hooks/usePipeCatalogTable.ts

@@ -0,0 +1,210 @@
+import {
+  getInitialTableData,
+  getTableDataAggregates,
+  type PipeCatalogTableData,
+  type PipeCategory,
+  type PipeId,
+} from "@pipe0/client-sdk";
+import {
+  type ColumnFilter,
+  createColumnHelper,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+export function useDebounce(
+  cb: (v: string) => unknown,
+  config: { initialValue?: string; timeout?: number } = {}
+) {
+  const { initialValue = "", timeout = 400 } = config;
+  const [value, setValue] = useState(initialValue);
+
+  const cbRef = useRef(cb);
+
+  const setImmediately = useCallback((v: string) => {
+    setValue(v);
+    cb(v);
+  }, []);
+
+  useEffect(() => {
+    if (!cbRef.current) return;
+    cbRef.current = cb;
+    const handle = setTimeout(() => {
+      cbRef.current(value);
+    }, timeout);
+
+    return () => clearTimeout(handle);
+  }, [value, timeout]);
+
+  return [value, setValue, setImmediately] as const;
+}
+
+export type InputFieldEntries = Record<string, PipeId[]>;
+export type OutputFieldEntries = Record<string, PipeId[]>;
+
+const columnHelper = createColumnHelper<PipeCatalogTableData>();
+
+const columns = [
+  columnHelper.accessor("pipeId", {}),
+  columnHelper.accessor(
+    (row) => row.inputGroups.flatMap((g) => Object.keys(g.fields)).join(", "),
+    {
+      id: "inputFields",
+    }
+  ),
+  columnHelper.accessor((row) => row.outputFields.join(", "), {
+    id: "outputFields",
+  }),
+  columnHelper.accessor((row) => row.tags.join(", "), {
+    id: "tags",
+  }),
+  columnHelper.accessor((row) => row.providers.join(", "), {
+    id: "providers",
+  }),
+  columnHelper.accessor((row) => row.categories.join(", "), {
+    id: "categories",
+  }),
+];
+
+export function usePipeCatalogTable(
+  config: {
+    initialColumnFilters?: ColumnFilter[];
+  } = {}
+) {
+  const {
+    initialColumnFilters: initialColumnFilters = [
+      { id: "category", value: "enrichment" },
+    ] as ColumnFilter[],
+  } = config;
+
+  const initialTableData = useMemo(() => getInitialTableData(), []);
+
+  const table = useReactTable({
+    columns,
+    data: initialTableData,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    initialState: {
+      columnFilters: initialColumnFilters,
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  });
+
+  const columnFilters = table.getState().columnFilters;
+  const x = "lsdfj";
+  const category: PipeCategory | null = useMemo(
+    () =>
+      (columnFilters.find((e) => e.id === "categories" && e.value)
+        ?.value as PipeCategory) || null,
+    [columnFilters]
+  );
+
+  const {
+    pipeIdsByInputField,
+    pipeIdsByOutputField,
+    pipeIdsByTag,
+    pipeIdsByProvider,
+    sortedTagEntries,
+    sortedInputFieldEntries,
+    sortedOutputFieldEntries,
+    sortedProviderEntries,
+    pipeEntriesByBasePipe,
+  } = useMemo(() => {
+    return getTableDataAggregates(initialTableData, category);
+  }, [category]);
+
+  const [expandedSidebarSections, setExpandedSidebarSections] = useState<
+    string[]
+  >(["tags"]);
+
+  const setCategory = (category: PipeCategory | null) => {
+    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: "inputFields" | "outputFields" | "tags" | "providers",
+    value: string
+  ) => {
+    setGlobalFilterImmediately("");
+    table.setColumnFilters([
+      { id: "categories", value: category },
+      { id, value },
+    ]);
+  };
+
+  const resetColumnFilters = () => {
+    setGlobalFilterImmediately("");
+    table.setColumnFilters([{ id: "categories", value: null }]);
+  };
+
+  const removeColumnFilter = (
+    id: "inputFields" | "outputFields" | "tags" | "providers"
+  ) => {
+    table.getColumn(id)?.setFilterValue(null);
+  };
+
+  const isFilterChecked = (
+    id: "inputFields" | "outputFields" | "tags" | "providers",
+    value: string
+  ) => {
+    return columnFilters.some((f) => f.id === id && f.value === value);
+  };
+
+  const filterByField = (
+    id: "inputFields" | "outputFields",
+    fieldName: string
+  ) => {
+    setExpandedSidebarSections([id]);
+    setGlobalFilterImmediately("");
+    table.setColumnFilters([
+      { id: "categories", value: null },
+      { id, value: fieldName },
+    ]);
+  };
+
+  return {
+    table,
+    sidebar: {
+      sortedInputFieldEntries,
+      sortedOutputFieldEntries,
+      sortedTagEntries,
+      sortedProviderEntries,
+      pipeIdsByInputField,
+      pipeIdsByOutputField,
+      pipeIdsByProvider,
+      pipeIdsByTag,
+      expandedSidebarSections,
+      setExpandedSidebarSections,
+      removeColumnFilter,
+      addColumnFilter,
+    },
+    pipeEntriesByBasePipe,
+    filterByField,
+    globalFilterInput,
+    setGlobalFilterInput,
+    isFilterChecked,
+    resetColumnFilters,
+    category,
+    setCategory,
+  };
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./hooks/usePipeCatalogTable";

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "rootDir": "src",
+    "moduleDetection": "force",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noUncheckedSideEffectImports": true,
+    "outDir": "./dist",
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["./src"]
+}