Skip to content

Commit 81f3938

Browse files
avivkelleravivkeller
committed
fixup!
1 parent 817a11f commit 81f3938

10 files changed

Lines changed: 110 additions & 102 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import ChatActions from '@node-core/ui-components/Common/Search/Chat/Actions';
12
import type { Interaction } from '@orama/core';
23
import { ChatInteractions } from '@orama/ui/components';
34
import type { FC } from 'react';
45

5-
import { ChatActions } from '../ChatActions';
66
import ChatSources from '../ChatSources';
77
import styles from './index.module.css';
88

‎apps/site/components/Common/Searchbox/Search/index.module.css‎

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,6 @@
77
overflow-hidden;
88
}
99

10-
.searchInputWrapper {
11-
@apply relative;
12-
13-
svg {
14-
@apply absolute
15-
top-1/2
16-
left-3
17-
size-4
18-
-translate-y-1/2
19-
text-neutral-500
20-
dark:text-neutral-600;
21-
}
22-
}
23-
24-
.searchInput {
25-
@apply w-full
26-
border-b
27-
border-neutral-200
28-
bg-transparent
29-
py-4
30-
pr-4
31-
pl-9
32-
text-sm
33-
text-neutral-900
34-
placeholder:text-neutral-500
35-
focus:outline-none
36-
dark:border-neutral-900
37-
dark:text-neutral-200
38-
dark:placeholder:text-neutral-600;
39-
}
40-
4110
.chatButtonWrapper {
4211
@apply hidden
4312
border-b

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

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
'use client';
22

3-
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
4-
import { SearchInput } from '@orama/ui/components';
3+
import SearchInput from '@node-core/ui-components/Common/Search/Input';
54
import { useTranslations } from 'next-intl';
6-
import type { FC, PropsWithChildren } from 'react';
5+
import type { ComponentProps, FC } from 'react';
76

87
import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
98
import { useSearchbox } from '#site/providers/searchboxProvider';
@@ -12,36 +11,22 @@ import { Footer } from '../Footer';
1211
import { SearchResultsWrapper } from '../SearchResults';
1312
import styles from './index.module.css';
1413

15-
type SearchProps = PropsWithChildren & React.RefAttributes<HTMLInputElement>;
14+
type SearchProps = ComponentProps<typeof SearchInput>;
1615

17-
export const Search: FC<SearchProps> = ({ ref }) => {
18-
const t = useTranslations();
16+
export const Search: FC<SearchProps> = props => {
1917
const searchbox = useSearchbox();
20-
const isSearchMode = searchbox?.mode === 'search';
18+
const t = useTranslations();
2119

2220
return (
2321
<div className={styles.searchContainer}>
24-
<SearchInput.Wrapper className={styles.searchInputWrapper}>
25-
<MagnifyingGlassIcon />
26-
<SearchInput.Input
27-
inputId="orama-doc-search"
28-
ariaLabel={t('components.search.searchPlaceholder')}
29-
placeholder={t('components.search.searchPlaceholder')}
30-
tabIndex={isSearchMode ? 0 : -1}
31-
aria-hidden={!isSearchMode}
32-
className={styles.searchInput}
33-
searchParams={{
34-
...DEFAULT_ORAMA_QUERY_PARAMS,
35-
groupBy: {
36-
properties: ['siteSection'],
37-
},
38-
facets: {
39-
siteSection: {},
40-
},
41-
}}
42-
ref={ref}
43-
/>
44-
</SearchInput.Wrapper>
22+
<SearchInput
23+
ariaLabel={t('components.search.searchPlaceholder')}
24+
placeholder={t('components.search.searchPlaceholder')}
25+
tabIndex={searchbox?.mode === 'search' ? 0 : -1}
26+
aria-hidden={searchbox?.mode === 'chat'}
27+
{...props}
28+
searchParams={DEFAULT_ORAMA_QUERY_PARAMS}
29+
/>
4530

4631
<SearchResultsWrapper />
4732
<Footer />

‎apps/site/components/Common/Searchbox/Search/utils.ts‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

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

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
import { DocumentTextIcon } from '@heroicons/react/24/outline';
44
import { SearchResults } from '@orama/ui/components';
5-
import { useReducer, type FC } from 'react';
6-
7-
import searchReducer, { searchState } from '#site/reducers/searchboxReducer';
5+
import type { FC } from 'react';
86

97
import { DocumentLink } from '../DocumentLink';
108
import type { Document } from '../DocumentLink';
@@ -13,32 +11,29 @@ import { getFormattedPath } from './utils';
1311

1412
type SearchItemProps = {
1513
document: Document;
14+
mode?: 'search' | 'chat';
1615
};
1716

18-
export const SearchItem: FC<SearchItemProps> = ({ document }) => {
19-
const [state] = useReducer(searchReducer, searchState);
20-
const isSearchMode = state.mode === 'search';
21-
return (
22-
<SearchResults.Item className={styles.searchResultsItem}>
23-
<DocumentLink
24-
document={document as Document}
25-
tabIndex={isSearchMode ? 0 : -1}
26-
aria-hidden={!isSearchMode}
27-
data-focus-on-arrow-nav
28-
>
29-
<DocumentTextIcon />
30-
<div>
31-
{typeof document?.pageSectionTitle === 'string' && (
32-
<h3>{document.pageSectionTitle}</h3>
17+
export const SearchItem: FC<SearchItemProps> = ({ document, mode }) => (
18+
<SearchResults.Item className={styles.searchResultsItem}>
19+
<DocumentLink
20+
document={document as Document}
21+
tabIndex={mode === 'search' ? 0 : -1}
22+
aria-hidden={mode === 'chat'}
23+
data-focus-on-arrow-nav
24+
>
25+
<DocumentTextIcon />
26+
<div>
27+
{typeof document?.pageSectionTitle === 'string' && (
28+
<h3>{document.pageSectionTitle}</h3>
29+
)}
30+
{typeof document?.pageSectionTitle === 'string' &&
31+
typeof document?.path === 'string' && (
32+
<p className={styles.searchResultsItemDescription}>
33+
{getFormattedPath(document.path, document.pageSectionTitle)}
34+
</p>
3335
)}
34-
{typeof document?.pageSectionTitle === 'string' &&
35-
typeof document?.path === 'string' && (
36-
<p className={styles.searchResultsItemDescription}>
37-
{getFormattedPath(document.path, document.pageSectionTitle)}
38-
</p>
39-
)}
40-
</div>
41-
</DocumentLink>
42-
</SearchResults.Item>
43-
);
44-
};
36+
</div>
37+
</DocumentLink>
38+
</SearchResults.Item>
39+
);

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,12 @@ export const SearchResultsWrapper: FC = () => {
114114
<div key={group.name} className={styles.searchResultsGroup}>
115115
<h2 className={styles.searchResultsGroupTitle}>{group.name}</h2>
116116
<SearchResults.GroupList group={group}>
117-
{hit => <SearchItem document={hit.document as Document} />}
117+
{hit => (
118+
<SearchItem
119+
document={hit.document as Document}
120+
mode={searchbox?.mode}
121+
/>
122+
)}
118123
</SearchResults.GroupList>
119124
</div>
120125
)}

apps/site/components/Common/Searchbox/ChatActions/index.module.css renamed to packages/ui-components/src/Common/Search/Chat/Actions/index.module.css

File renamed without changes.

apps/site/components/Common/Searchbox/ChatActions/index.tsx renamed to packages/ui-components/src/Common/Search/Chat/Actions/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ type ChatActionsProps = {
1818
interaction: Interaction;
1919
};
2020

21-
export const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
21+
const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
2222
const [isDisliked, setIsDisliked] = useState(false);
2323

2424
const dislikeMessage = () => setIsDisliked(!isDisliked);
@@ -68,3 +68,5 @@ export const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
6868
</div>
6969
);
7070
};
71+
72+
export default ChatActions;

‎packages/ui-components/src/Common/Search/Input/index.module.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@reference "../../../styles/index.css";
2+
3+
.searchInputWrapper {
4+
@apply relative;
5+
6+
svg {
7+
@apply absolute
8+
top-1/2
9+
left-3
10+
size-4
11+
-translate-y-1/2
12+
text-neutral-500
13+
dark:text-neutral-600;
14+
}
15+
}
16+
17+
.searchInput {
18+
@apply w-full
19+
border-b
20+
border-neutral-200
21+
bg-transparent
22+
py-4
23+
pr-4
24+
pl-9
25+
text-sm
26+
text-neutral-900
27+
placeholder:text-neutral-500
28+
focus:outline-none
29+
dark:border-neutral-900
30+
dark:text-neutral-200
31+
dark:placeholder:text-neutral-600;
32+
}

‎packages/ui-components/src/Common/Search/Input/index.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
'use client';
2+
3+
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
4+
import { SearchInput } from '@orama/ui/components';
5+
import type { ComponentProps, FC } from 'react';
6+
7+
import styles from './index.module.css';
8+
9+
type SearchProps = ComponentProps<typeof SearchInput.Input>;
10+
11+
const Input: FC<SearchProps> = ({ searchParams, ...props }) => (
12+
<SearchInput.Wrapper className={styles.searchInputWrapper}>
13+
<MagnifyingGlassIcon />
14+
<SearchInput.Input
15+
inputId="orama-doc-search"
16+
className={styles.searchInput}
17+
searchParams={{
18+
...searchParams,
19+
groupBy: {
20+
properties: ['siteSection'],
21+
},
22+
facets: {
23+
siteSection: {},
24+
},
25+
}}
26+
{...props}
27+
/>
28+
</SearchInput.Wrapper>
29+
);
30+
31+
export default Input;

0 commit comments

Comments
 (0)