feat(orama): add SearchHit UI component (#8398)

* feat(orama): add SearchHit UI component

* fixup!

Author: avivkeller

apps/site/components/Common/Searchbox/DocumentLink/index.tsx

@@ -1,11 +1,12 @@
 'use client';
 
+import styles from '@node-core/ui-components/Common/Search/Results/Hit/index.module.css';
 import Link from 'next/link';
 import { useLocale } from 'next-intl';
 
 import type { FC } from 'react';
 
-import styles from './index.module.css';
+import { getDocumentHref } from '../SearchItem/utils';
 
 export type Document = {
   path: string;
@@ -22,30 +23,21 @@ type DocumentLinkProps = {
 
 export const DocumentLink: FC<DocumentLinkProps> = ({
   document,
-  className = styles.documentLink,
+  className = styles.link,
   children,
   'data-focus-on-arrow-nav': dataFocusOnArrowNav,
   ...props
 }) => {
   const locale = useLocale();
 
-  const href =
-    document.siteSection?.toLowerCase() === 'docs'
-      ? `/${document.path}`
-      : `/${locale}/${document.path}`;
-
   return (
     <Link
-      href={href}
+      href={getDocumentHref(document, locale)}
       className={className}
       data-focus-on-arrow-nav={dataFocusOnArrowNav}
       {...props}
     >
-      {children || (
-        <span className={styles.documentTitle}>
-          {document.pageSectionTitle}
-        </span>
-      )}
+      {children}
     </Link>
   );
 };

apps/site/components/Common/Searchbox/SearchItem/index.module.css

@@ -1,41 +1,36 @@
-'use client';
-
-import { DocumentTextIcon } from '@heroicons/react/24/outline';
-import { SearchResults } from '@orama/ui/components';
+import SearchHit from '@node-core/ui-components/Common/Search/Results/Hit';
+import Link from 'next/link';
+import { useLocale } from 'next-intl';
 
 import type { Document } from '../DocumentLink';
-import type { FC } from 'react';
-
-import { DocumentLink } from '../DocumentLink';
-import { getFormattedPath } from './utils';
+import type { LinkLike } from '@node-core/ui-components/types';
+import type { ComponentProps, FC } from 'react';
 
-import styles from './index.module.css';
+import { getDocumentHref, getFormattedPath } from './utils';
 
-type SearchItemProps = {
+type SearchItemProps = Omit<
+  ComponentProps<typeof SearchHit>,
+  'document' | 'as'
+> & {
   document: Document;
-  mode?: 'search' | 'chat';
 };
 
-export const SearchItem: FC<SearchItemProps> = ({ document, mode }) => (
-  <SearchResults.Item className={styles.searchResultsItem}>
-    <DocumentLink
-      document={document as Document}
-      tabIndex={mode === 'search' ? 0 : -1}
-      aria-hidden={mode === 'chat'}
-      data-focus-on-arrow-nav
-    >
-      <DocumentTextIcon />
-      <div>
-        {typeof document?.pageSectionTitle === 'string' && (
-          <h3>{document.pageSectionTitle}</h3>
-        )}
-        {typeof document?.pageSectionTitle === 'string' &&
-          typeof document?.path === 'string' && (
-            <p className={styles.searchResultsItemDescription}>
-              {getFormattedPath(document.path, document.pageSectionTitle)}
-            </p>
-          )}
-      </div>
-    </DocumentLink>
-  </SearchResults.Item>
-);
+const SearchItem: FC<SearchItemProps> = ({ document, ...props }) => {
+  const locale = useLocale();
+
+  return (
+    <SearchHit
+      document={{
+        title: document.pageSectionTitle,
+        description:
+          document.pageSectionTitle &&
+          getFormattedPath(document.path, document.pageSectionTitle),
+        href: getDocumentHref(document, locale),
+      }}
+      as={Link as LinkLike}
+      {...props}
+    />
+  );
+};
+
+export default SearchItem;

apps/site/components/Common/Searchbox/SearchItem/index.tsx

@@ -1,3 +1,5 @@
+import type { Document } from '../DocumentLink';
+
 export const uppercaseFirst = (word: string) =>
   word.charAt(0).toUpperCase() + word.slice(1);
 
@@ -9,3 +11,8 @@ export const getFormattedPath = (path: string, title: string) =>
     .map(element => uppercaseFirst(element))
     .filter(Boolean)
     .join(' > ')} — ${title}`;
+
+export const getDocumentHref = (document: Document, locale: string) =>
+  document.siteSection?.toLowerCase() === 'docs'
+    ? `/${document.path}`
+    : `/${locale}/${document.path}`;

apps/site/components/Common/Searchbox/SearchItem/utils.ts

@@ -14,7 +14,7 @@ import type { FC } from 'react';
 
 import { Footer } from './Footer';
 import { oramaClient } from './orama-client';
-import { SearchItem } from './SearchItem';
+import SearchItem from './SearchItem';
 import { SlidingChatPanel } from './SlidingChatPanel';
 
 import styles from './index.module.css';

apps/site/components/Common/Searchbox/index.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
   "exports": {
     "./*": [

packages/ui-components/package.json

@@ -1,14 +1,23 @@
 @reference "../../../../styles/index.css";
 
-.documentLink {
-  @apply rounded-xl
+.link {
+  @apply flex
+    items-center
+    gap-4
+    rounded-xl
+    border
+    border-transparent
     bg-neutral-100
     px-4
     py-2
+    text-sm
     text-neutral-900
     duration-300
+    outline-none
     hover:bg-neutral-200
     focus:bg-neutral-200
+    focus-visible:border-green-600
+    focus-visible:bg-transparent
     motion-safe:transition-colors
     dark:bg-neutral-950
     dark:text-neutral-200
@@ -20,12 +29,8 @@
   }
 }
 
-.documentTitle {
-  @apply max-w-full
-    truncate
-    overflow-hidden
-    text-sm
-    font-semibold
-    text-ellipsis
-    whitespace-nowrap;
+.hitDescription {
+  @apply text-sm
+    text-neutral-600
+    dark:text-neutral-700;
 }

…/Searchbox/DocumentLink/index.module.css …mmon/Search/Results/Hit/index.module.cssapps/site/components/Common/Searchbox/DocumentLink/index.module.css renamed to packages/ui-components/src/Common/Search/Results/Hit/index.module.css apps/site/components/Common/Searchbox/DocumentLink/index.module.css renamed to packages/ui-components/src/Common/Search/Results/Hit/index.module.css

@@ -0,0 +1,39 @@
+import { DocumentTextIcon } from '@heroicons/react/24/outline';
+import { SearchResults } from '@orama/ui/components';
+
+import type { LinkLike } from '#ui/types';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+type HitProps = {
+  document: {
+    title?: string;
+    description?: string;
+    href: string;
+  };
+  mode?: 'search' | 'chat';
+  as?: LinkLike;
+};
+
+const Hit: FC<HitProps> = ({ document, mode = 'search', as: Link = 'a' }) => (
+  <SearchResults.Item>
+    <Link
+      href={document.href}
+      tabIndex={mode === 'search' ? 0 : -1}
+      aria-hidden={mode === 'chat'}
+      data-focus-on-arrow-nav
+      className={styles.link}
+    >
+      <DocumentTextIcon />
+      <div>
+        {typeof document?.title === 'string' && <h3>{document.title}</h3>}
+        {typeof document?.description === 'string' && (
+          <p className={styles.hitDescription}>{document.description}</p>
+        )}
+      </div>
+    </Link>
+  </SearchResults.Item>
+);
+
+export default Hit;