ui-kit: use InstantSearch

Signed-off-by: Victor Login <[email protected]>
shortlink-org · Oct 7, 2024 · 12e769f · 12e769f
1 parent 1ce05e1
commit 12e769f
Show file tree

Hide file tree

Showing 3 changed files with 281 additions and 21 deletions.
diff --git a/boundaries/ui-monorepo/packages/ui-kit/package.json b/boundaries/ui-monorepo/packages/ui-kit/package.json
@@ -44,9 +44,12 @@
   ],
   "dependencies": {
     "@storybook/builder-vite": "^8.3.5",
+    "@tailwindcss/typography": "^0.5.15",
+    "algoliasearch": "^5.7.0",
     "export-to-csv": "^1.4.0",
     "glob": "^11.0.0",
     "material-react-table": "^3.0.1",
+    "react-instantsearch": "^7.13.2",
     "vite-plugin-dts": "4.2.3",
     "vite-plugin-lib-inject-css": "^2.1.1"
   },

diff --git a/boundaries/ui-monorepo/packages/ui-kit/src/ui/SearchForm/SearchForm.tsx b/boundaries/ui-monorepo/packages/ui-kit/src/ui/SearchForm/SearchForm.tsx
@@ -1,28 +1,24 @@
-import SearchIcon from '@mui/icons-material/Search'
-import MicIcon from '@mui/icons-material/Mic'
+import { liteClient as algoliasearch } from 'algoliasearch/lite';
+import { InstantSearch, SearchBox, RefinementList } from 'react-instantsearch';
+
+const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey')
 
 function SearchForm() {
   return (
-    <div className="relative flex-grow">
-      <button
-        type="button"
-        className="absolute left-2 top-1/2 transform -translate-y-1/2 p-1 text-gray-500 hover:text-gray-700"
-      >
-        <SearchIcon className="h-5 w-5" />
-      </button>
-      <input
-        id="search"
-        type="search"
-        className="w-full pl-10 p-2 text-sm text-gray-700 form-input bg-white border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
-        placeholder="Search..."
+    <InstantSearch searchClient={searchClient} indexName="instant_search" insights>
+      <SearchBox
+        placeholder="Product, brand, color, …"
+        classNames={{
+          root: 'p-3 shadow-sm',
+          form: 'relative',
+          input: 'block w-full pl-9 pr-3 py-2 bg-white border border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 rounded-md focus:ring-1',
+          submitIcon: 'absolute top-0 left-0 bottom-0 w-6',
+        }}
+      />
+      <RefinementList
+        attribute="categories"
       />
-      <button
-        type="submit"
-        className="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 text-gray-500 hover:text-gray-700"
-      >
-        <MicIcon />
-      </button>
-    </div>
+    </InstantSearch>
   )
 }