chore: add new orama search widget

Author: rjborba

app/components/ClientOnlySearchButton.tsx

@@ -3,7 +3,9 @@ import { Suspense } from 'react'
 import { ImSpinner2 } from 'react-icons/im'
 
 const LazySearchButton = React.lazy(() =>
-  import('@orama/searchbox').then((mod) => ({ default: mod.SearchButton }))
+  import('@orama/react-components').then((mod) => ({
+    default: mod.OramaSearchButton,
+  }))
 )
 
 let defaultMounted = false

app/components/DocsLayout.tsx

@@ -13,8 +13,7 @@ import {
   useNavigate,
   useParams,
 } from '@tanstack/react-router'
-import type { AnyOrama, SearchParamsFullText, AnyDocument } from '@orama/orama'
-import { SearchBox } from '@orama/searchbox'
+import { OramaSearchBox } from '@orama/react-components'
 import { Carbon } from '~/components/Carbon'
 import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
@@ -336,6 +335,8 @@ export function DocsLayout({
     [menuConfig]
   )
 
+  const [isSearchboxOpen, setIsSearchboxOpen] = React.useState(false)
+
   const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
 
   const relativePathname = lastMatch.pathname.replace(
@@ -444,15 +445,6 @@ export function DocsLayout({
     )
   })
 
-  const oramaSearchParams: SearchParamsFullText<AnyOrama, AnyDocument> = {
-    threshold: 0,
-    where: {
-      category: {
-        eq: capitalize(libraryId),
-      },
-    },
-  }
-
   const logo = (
     <DocsLogo
       name={name}
@@ -499,7 +491,12 @@ export function DocsLayout({
               onSelect={versionConfig.onSelect}
             />
           </div>
-          <ClientOnlySearchButton {...searchButtonParams} />
+          <ClientOnlySearchButton
+            {...searchButtonParams}
+            onClick={() => setIsSearchboxOpen(true)}
+          >
+            Search
+          </ClientOnlySearchButton>
           {menuItems}
         </div>
       </details>
@@ -546,7 +543,20 @@ export function DocsLayout({
       className={`min-h-screen flex flex-col lg:flex-row w-full transition-all duration-300`}
     >
       <div className="fixed z-50">
-        <SearchBox {...searchBoxParams} searchParams={oramaSearchParams} />
+        <OramaSearchBox
+          {...searchBoxParams}
+          searchParams={{
+            threshold: 0,
+            where: {
+              category: {
+                eq: capitalize(libraryId!) as string,
+              },
+            } as any,
+          }}
+          facetProperty={undefined}
+          open={isSearchboxOpen}
+          onSearchboxClosed={() => setIsSearchboxOpen(false)}
+        />
       </div>
       {smallMenu}
       {largeMenu}

app/components/Orama.tsx

@@ -1,38 +1,28 @@
-import type {
-  RegisterSearchButtonProps,
-  RegisterSearchBoxProps,
-} from '@orama/searchbox'
-import { OramaClient } from '@oramacloud/client'
-import '@orama/searchbox/dist/index.css'
-
-const oramaInstance = new OramaClient({
-  // The search endpoint for the Orama index
-  endpoint: 'https://cloud.orama.run/v1/indexes/tanstack-dev-ur0ppd',
-  // The public API key for performing search. This is commit-safe.
-  api_key: 'xqfn8QcuImADRGPIlhWTo9cT5UNiqPDj',
-})
-
-export const searchBoxParams: RegisterSearchBoxProps = {
-  oramaInstance,
-  colorScheme: 'system',
-  backdrop: true,
+export const searchBoxParams = {
+  index: {
+    api_key: 'xqfn8QcuImADRGPIlhWTo9cT5UNiqPDj',
+    endpoint: 'https://cloud.orama.run/v1/indexes/tanstack-dev-ur0ppd',
+  },
+  colorScheme: 'system' as 'light' | 'dark' | 'system',
   facetProperty: 'category',
-  resultsMap: {
+  resultMap: {
     description: 'content',
+    section: 'category',
   },
+
   themeConfig: {
-    light: {},
-    dark: {
-      '--backdrop-bg-color': '#0d103591',
+    colors: {
+      light: {},
+      dark: {
+        '--backdrop-background-color-primary': 'rgba(0, 0, 0, 0.7)',
+      },
     },
   },
-  searchMode: 'hybrid',
   searchParams: {
     threshold: 0,
   },
 }
 
-export const searchButtonParams: RegisterSearchButtonProps = {
+export const searchButtonParams = {
   colorScheme: 'system',
-  fullWidth: true,
 }

app/routes/_libraries.tsx

@@ -9,7 +9,7 @@ import {
 import { CgClose, CgMenuLeft, CgMusicSpeaker } from 'react-icons/cg'
 import { MdLibraryBooks, MdSupport } from 'react-icons/md'
 import { twMerge } from 'tailwind-merge'
-import { SearchBox } from '@orama/searchbox'
+import { OramaSearchBox } from '@orama/react-components'
 import { sortBy } from '~/utils/utils'
 import logoColor100w from '~/images/logo-color-100w.png'
 import {
@@ -46,6 +46,8 @@ function LibrariesLayout() {
 
   const [mounted, setMounted] = React.useState(false)
 
+  const [onSearchboxOpen, setOnSearchboxOpen] = React.useState(false)
+
   React.useEffect(() => {
     setMounted(true)
   }, [])
@@ -255,7 +257,12 @@ function LibrariesLayout() {
           {logo}
         </div>
         <div className="p-2">
-          <ClientOnlySearchButton {...searchButtonParams} />
+          <ClientOnlySearchButton
+            {...searchButtonParams}
+            onClick={() => setOnSearchboxOpen(true)}
+          >
+            Search
+          </ClientOnlySearchButton>
         </div>
         <div className="flex-1 flex flex-col gap-4 whitespace-nowrap overflow-y-auto text-base pb-[300px]">
           <div className="space-y-1 text-sm p-2 border-b border-gray-500/10 dark:border-gray-500/20">
@@ -278,7 +285,11 @@ function LibrariesLayout() {
       </div>
       {mounted ? (
         <div className="fixed z-50">
-          <SearchBox {...searchBoxParams} />
+          <OramaSearchBox
+            {...searchBoxParams}
+            open={onSearchboxOpen}
+            onSearchboxClosed={() => setOnSearchboxOpen(false)}
+          />
         </div>
       ) : null}
     </div>

package.json

@@ -21,6 +21,7 @@
     "@octokit/graphql": "^7.0.2",
     "@octokit/rest": "^20.0.2",
     "@orama/searchbox": "1.0.0-rc42",
+    "@orama/react-components": "^0.0.22",
     "@oramacloud/client": "^1.2.2",
     "@remix-run/node": "^2.8.1",
     "@sentry/react": "^8.2.1",