chore: use new searchbox

oramasearch · Aug 17, 2024 · c7c27bc · c7c27bc
1 parent 332de6a
commit c7c27bc
Show file tree

Hide file tree

Showing 3 changed files with 540 additions and 123 deletions.
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -30,6 +30,7 @@
     "@jop-software/astro-cookieconsent": "^3.0.0",
     "@orama/crawly": "^0.0.6",
     "@orama/orama": "^2.0.21",
+    "@orama/react-components": "^0.0.14",
     "@orama/searchbox": "1.0.0-rc48",
     "@oramacloud/client": "^1.3.2",
     "astro": "^4.11.3",

diff --git a/packages/docs/src/components/Search.jsx b/packages/docs/src/components/Search.jsx
@@ -1,16 +1,11 @@
 import { useEffect, useState } from 'react'
-import { OramaClient } from '@oramacloud/client'
-import { SearchBox, SearchButton } from '@orama/searchbox'
-import '@orama/searchbox/dist/index.css'
+import { OramaSearchBox, OramaSearchButton } from '@orama/react-components'
 
-export const client = new OramaClient({
-  api_key: 'NKiqTJnwnKsQCdxN7RyOBJgeoW5hJ594',
-  endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-bzo330'
-})
-
-export function Search(props) {
+export function Search() {
   const [theme, setTheme] = useState()
   const [currentCategory, setCurrentCategory] = useState(null)
+  // TODO: Remove when fully integrated
+  const [isOpen, setIsOpen] = useState(false)
 
   function getCurrentCategory() {
     const url = new URL(window.location.href).pathname
@@ -53,42 +48,49 @@ export function Search(props) {
     }
   }, [])
 
-  const oramaWhere = currentCategory ? {
-    category: {
-      eq: currentCategory
-    }
-  } : {}
+  const oramaWhere = currentCategory
+    ? {
+        category: {
+          eq: currentCategory
+        }
+      }
+    : {}
 
   const facetProperty = ['Cloud', 'Open Source'].includes(currentCategory) ? 'section' : 'category'
 
   if (!theme) return null
 
   return (
     <>
-      <SearchBox
-        {...{
-          oramaInstance: client,
-          backdrop: true,
-          colorScheme: theme,
-          facetProperty,
-          resultsMap: {
-            description: 'content'
-          },
-          searchParams: {
-            where: oramaWhere
-          },
-          setResultTitle: (doc) => doc.title.split('| Orama Docs')[0]
+      <OramaSearchBox
+        id="orama-ui-searchbox"
+        onSearchboxClosed={() => {
+          setIsOpen(false)
+        }}
+        index={{
+          api_key: 'NKiqTJnwnKsQCdxN7RyOBJgeoW5hJ594',
+          endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-bzo330'
         }}
+        resultsMap={{
+          description: 'content'
+        }}
+        searchParams={{
+          where: oramaWhere
+        }}
+        facetProperty={facetProperty}
+        colorScheme={theme}
+        open={isOpen}
       />
-      <SearchButton
+
+      <OramaSearchButton
+        id="orama-ui-searchbox-button"
         colorScheme={theme}
-        themeConfig={{
-          dark: {
-            '--search-btn-background-color': '#201c27',
-            '--search-btn-background-color-hover': '#201c27'
-          }
+        onClick={() => {
+          setIsOpen(true)
         }}
-      />
+      >
+        Search
+      </OramaSearchButton>
     </>
   )
 }