Filters package (harness#811)

* Added filters package

* added utilities

* updated filters package

* filters updated

* updated filters

* improved types

* export types

* export createFilters method

* fix: fixed ref and reset filter issue

* fix: added ts ignore on router

* fix: updated filters rendering according to order (harness#826)

* fix: updated filters rendering according to order

* feat: added support for defaultValues to filters

* Enhancements on Filters (harness#837)

* fix: updated filters rendering according to order

* feat: added support for defaultValues to filters

* feat: added default value support

* feat: added support for default value on-reset

* fix: addressed review comments

* feat: add onchange for filters

* fix: update type issues (harness#849)

* fix: update type issues

* fix: update display-name ts issue

* removed tsup and added vite config

* fix: fixed prettier

* updated lock file

* updated useRouter

---------

Co-authored-by: avinashmadhwani02 <[email protected]>
Co-authored-by: Harish V <[email protected]>

packages/filters/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@harnessio/filters",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "run-p build:watch",
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "prepublishOnly": "pnpm build",
+    "pretty": "prettier --check ./src",
+    "pre-commit": "lint-staged"
+  },
+  "private": false,
+  "type": "module",
+  "module": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0 <19.0.0",
+    "react-dom": ">=17.0.0 <19.0.0",
+    "react-router-dom": ">=5.0.0 <7.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^16.18.84",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "dts-bundle-generator": "^6.4.0",
+    "eslint": "^8.57.1",
+    "flatted": "^3.3.2",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.9",
+    "npm-run-all": "^4.1.5",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.3.3",
+    "vite": "^6.0.3",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-svgr": "^4.3.0"
+  },
+  "license": "Apache-2.0",
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint ./src --fix",
+      "prettier ./src --write"
+    ]
+  }
+}

packages/filters/src/Filter.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import { useFiltersContext } from './Filters'
+import { defaultStringParser } from './parsers'
+
+type Parser<T> = {
+  parse: (value: string) => T
+  serialize: (value: T) => string
+}
+
+export interface FilterProps<T, K extends keyof T> {
+  filterKey: K
+  children: (props: {
+    onChange: (value: T[K]) => void
+    value?: Parser<T[K]> extends undefined ? string : T[K]
+    removeFilter: (filterKey?: K) => void
+  }) => React.ReactNode
+  parser?: Parser<T[K]>
+  sticky?: boolean
+  className?: string
+}
+
+const Filter = <T, K extends keyof T>({
+  filterKey,
+  children,
+  parser = defaultStringParser as Parser<T[K]>,
+  className
+}: FilterProps<T, K>): React.ReactElement | null => {
+  const { updateFilter, getFilterValue, removeFilter } = useFiltersContext<any>()
+
+  // Handles when a new value is set
+  const handleChange = (value: T[K]) => {
+    const serializedValue = parser.serialize(value)
+    updateFilter(filterKey as string, serializedValue, value)
+  }
+
+  // If no filter key is provided,
+  // filterKey provided to component will be used
+  const wrappedRemoveFilter = (fkey?: K) => {
+    removeFilter(fkey ?? filterKey)
+  }
+
+  // Retrieves the raw and parsed filter value
+  const rawValue = getFilterValue(filterKey as string)
+  const parsedValue = rawValue as T
+
+  // Render the children with the injected props
+  return (
+    <div id="filter" className={className}>
+      {children({
+        onChange: handleChange,
+        value: parsedValue as T[K],
+        removeFilter: wrappedRemoveFilter
+      })}
+    </div>
+  )
+}
+
+export default Filter