chore: add new orama search widget

app/components/ClientOnlySearchButton.tsx

@@ -3,7 +3,7 @@ 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

@@ -15,7 +15,7 @@ import {
   useRouterState,
 } from '@tanstack/react-router'
 import type { AnyOrama, SearchParamsFullText, AnyDocument } from '@orama/orama'
-import { SearchBox, SearchButton } from '@orama/searchbox'
+import { OramaSearchBox } from '@orama/react-components'
 import { Carbon } from '~/components/Carbon'
 import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
@@ -335,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(
@@ -434,7 +436,7 @@ export function DocsLayout({
     threshold: 0,
     where: {
       category: {
-        eq: capitalize(libraryId),
+        eq: capitalize(libraryId!),
       },
     },
   }
@@ -485,7 +487,9 @@ export function DocsLayout({
               onSelect={versionConfig.onSelect}
             />
           </div>
-          <ClientOnlySearchButton {...searchButtonParams} />
+          <ClientOnlySearchButton id="orama-ui-searchbox-button" {...searchButtonParams} onClick={() => setIsSearchboxOpen(true)} >
+            Search
+            </ClientOnlySearchButton>
           {menuItems}
         </div>
       </details>
@@ -535,7 +539,8 @@ 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} />
+        {/* TODO: Search params should be exposed on Orama React Components */}
+        <OramaSearchBox id="orama-ui-searchbox"{...searchBoxParams} searchParams={oramaSearchParams as any} open={isSearchboxOpen} onSearchboxClosed={() => setIsSearchboxOpen(false)} />
       </div>
       {smallMenu}
       {largeMenu}

app/components/Orama.tsx

@@ -1,38 +1,27 @@
-import type {
-  RegisterSearchButtonProps,
-  RegisterSearchBoxProps,
-} from '@orama/searchbox'
-import { OramaClient } from '@oramacloud/client'
-import '@orama/searchbox/dist/index.css'
+// TODO: Orama Components prop types must be exposed
 
-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',
   },
-  themeConfig: {
-    light: {},
-    dark: {
-      '--backdrop-bg-color': '#0d103591',
-    },
-  },
-  searchMode: 'hybrid',
+  // TODO: Check correct override 
+  // themeConfig: {
+  //   light: {},
+  //   dark: {
+  //     '--backdrop-background-color-primary': 'rgba(0, 0, 0, 0.7)',
+  //   },
+  // },
   searchParams: {
     threshold: 0,
   },
 }
 
-export const searchButtonParams: RegisterSearchButtonProps = {
+export const searchButtonParams = {
   colorScheme: 'system',
-  fullWidth: true,
 }

app/routes/_libraries.index.tsx

@@ -17,8 +17,6 @@ import bytesUidotdevImage from '~/images/bytes-uidotdev.png'
 import { useMutation } from '~/hooks/useMutation'
 import { sample } from '~/utils/utils'
 import { libraries } from '~/libraries'
-import { SearchBox } from '@orama/searchbox'
-import { searchBoxParams } from '~/components/Orama'
 import logoColor from '~/images/logo-color-600w.png'
 import bytesImage from '~/images/bytes.svg'
 

app/routes/_libraries.tsx

@@ -10,6 +10,7 @@ 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 +47,8 @@ function LibrariesLayout() {
 
   const [mounted, setMounted] = React.useState(false)
 
+  const [onSearchboxOpen, setOnSearchboxOpen] = React.useState(false)
+
   React.useEffect(() => {
     setMounted(true)
   }, [])
@@ -255,7 +258,9 @@ function LibrariesLayout() {
           {logo}
         </div>
         <div className="p-2">
-          <ClientOnlySearchButton {...searchButtonParams} />
+          <ClientOnlySearchButton id="orama-ui-searchbox-button-lib" {...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 +283,7 @@ function LibrariesLayout() {
       </div>
       {mounted ? (
         <div className="fixed z-50">
-          <SearchBox {...searchBoxParams} />
+          <OramaSearchBox id="orama-ui-searchbox-lib" {...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.14",
     "@oramacloud/client": "^1.2.2",
     "@remix-run/node": "^2.8.1",
     "@sentry/react": "^8.2.1",