feat(orama): use new ui components (#512)

Author: avivkeller

npm-shrinkwrap.json

@@ -43,9 +43,9 @@
     "@heroicons/react": "^2.2.0",
     "@minify-html/node": "^0.16.4",
     "@node-core/rehype-shiki": "1.3.0",
-    "@node-core/ui-components": "1.4.0",
+    "@node-core/ui-components": "1.4.1",
     "@orama/orama": "^3.1.16",
-    "@orama/react-components": "^0.8.1",
+    "@orama/ui": "^1.5.3",
     "@rollup/plugin-virtual": "^3.0.2",
     "acorn": "^8.15.0",
     "commander": "^14.0.2",

package.json

@@ -18,17 +18,17 @@ describe('buildHierarchicalTitle', () => {
 
   it('should build two level hierarchy', () => {
     const result = buildHierarchicalTitle(mockHeadings, 1);
-    assert.equal(result, 'Module > Class');
+    assert.equal(result, 'Class');
   });
 
   it('should build three level hierarchy', () => {
     const result = buildHierarchicalTitle(mockHeadings, 2);
-    assert.equal(result, 'Module > Class > Method');
+    assert.equal(result, 'Class > Method');
   });
 
   it('should build full hierarchy', () => {
     const result = buildHierarchicalTitle(mockHeadings, 3);
-    assert.equal(result, 'Module > Class > Method > Parameter');
+    assert.equal(result, 'Class > Method > Parameter');
   });
 
   it('should handle non-sequential depths', () => {
@@ -38,7 +38,7 @@ describe('buildHierarchicalTitle', () => {
     ];
 
     const result = buildHierarchicalTitle(headings, 1);
-    assert.equal(result, 'Root > Deep');
+    assert.equal(result, 'Deep');
   });
 
   it('should handle same depth headings', () => {

src/generators/orama-db/__tests__/index.test.mjs

@@ -1,7 +1,6 @@
-// This schema comes from
-// https://github.com/oramasearch/orama-ui-components/blob/main/packages/ui-stencil/src/types/index.ts#L4
 export const SCHEMA = {
   title: 'string',
   description: 'string',
-  path: 'string',
+  href: 'string',
+  siteSection: 'string',
 };

src/generators/orama-db/constants.mjs

@@ -21,7 +21,7 @@ export function buildHierarchicalTitle(headings, currentIndex) {
   let targetDepth = currentNode.heading.depth - 1;
 
   // Walk backwards through preceding headings to build hierarchy
-  for (let i = currentIndex - 1; i >= 0 && targetDepth > 0; i--) {
+  for (let i = currentIndex - 1; i >= 1 && targetDepth > 0; i--) {
     const heading = headings[i];
     const headingDepth = heading.heading.depth;
 
@@ -84,7 +84,8 @@ export default {
           description: paragraph
             ? transformNodeToString(paragraph, true)
             : undefined,
-          path: `${entry.api}.html#${entry.slug}`,
+          href: `${entry.api}.html#${entry.slug}`,
+          siteSection: headings[0].heading.data.name,
         };
       })
     );

src/generators/orama-db/index.mjs

@@ -19,8 +19,7 @@ export default () => {
       sidebarItemTogglerAriaLabel="Toggle navigation menu"
       navItems={[]}
     >
-      {/* TODO(@avivkeller): Orama doesn't support Server-Side rendering yet */}
-      {CLIENT && <SearchBox theme={theme} />}
+      <SearchBox />
       <ThemeToggle
         onClick={toggleTheme}
         aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}

src/generators/web/ui/components/NavBar.jsx

@@ -1,36 +1,19 @@
-import { OramaSearchButton, OramaSearchBox } from '@orama/react-components';
+import SearchModal from '@node-core/ui-components/Common/Search/Modal';
+import SearchResults from '@node-core/ui-components/Common/Search/Results';
+import SearchHit from '@node-core/ui-components/Common/Search/Results/Hit';
 
-import { themeConfig } from './config.mjs';
 import useOrama from '../../hooks/useOrama.mjs';
 
-/**
- * Search component that provides documentation search functionality using Orama.
- *
- * @param {{ theme: string }} props - Component props.
- */
-const SearchBox = ({ theme }) => {
+const SearchBox = () => {
   const client = useOrama();
 
   return (
-    <>
-      <OramaSearchButton
-        aria-disabled={!client}
-        style={{ flexGrow: 1 }}
-        colorScheme={theme}
-        themeConfig={themeConfig}
-        aria-label="Search documentation"
-      >
-        Search documentation
-      </OramaSearchButton>
-      <OramaSearchBox
-        aria-disabled={!client}
-        disableChat={true}
-        linksTarget="_self"
-        clientInstance={client}
-        colorScheme={theme}
-        themeConfig={themeConfig}
+    <SearchModal client={client} placeholder={'Start typing...'}>
+      <SearchResults
+        noResultsTitle={'No results found for'}
+        onHit={hit => <SearchHit document={hit.document} />}
       />
-    </>
+    </SearchModal>
   );
 };
 

src/generators/web/ui/components/SearchBox/config.mjs

@@ -1,4 +1,4 @@
-import { create, load } from '@orama/orama';
+import { create, search, load } from '@orama/orama';
 import { useState, useEffect } from 'react';
 
 /**
@@ -13,6 +13,12 @@ export default () => {
       schema: {},
     });
 
+    // TODO(@avivkeller): Ask Orama to support this functionality natively
+    /**
+     * @param {any} options
+     */
+    db.search = options => search(db, options);
+
     setClient(db);
 
     // Load the search data

src/generators/web/ui/components/SearchBox/index.jsx

@@ -70,3 +70,17 @@ main {
     }
   }
 }
+
+#modalContent li > div > a {
+  > svg {
+    flex-shrink: 0;
+  }
+  > div {
+    min-width: 0;
+    > p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}