From 4159bcabe0585596ca4d834aacb2cbd44f29900e Mon Sep 17 00:00:00 2001 From: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com> Date: Mon, 4 Mar 2024 20:52:34 +0100 Subject: [PATCH] chore(search): refactor search to export necessary components and providers. (#5900) * chore(search): refactor search to export necessary components and providers * chore(search): add ItemSelectHandler type --- .../search/components/SearchPopover.tsx | 24 +++++++++++++++++-- .../navbar/search/components/index.ts | 2 ++ .../searchResults/SearchResults.tsx | 10 +++++--- .../search/components/searchResults/index.ts | 1 + .../searchResults/item/SearchResultItem.tsx | 10 ++++++-- .../item/SearchResultItemPreview.tsx | 5 +++- .../components/searchResults/item/index.ts | 1 + .../navbar/search/contexts/index.ts | 1 + .../search/contexts/search/SearchContext.ts | 6 +++++ .../navbar/search/contexts/search/index.ts | 3 +++ .../search/contexts/search/useSearchState.ts | 3 +++ .../studio/components/navbar/search/index.ts | 2 ++ 12 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 packages/sanity/src/core/studio/components/navbar/search/components/index.ts create mode 100644 packages/sanity/src/core/studio/components/navbar/search/components/searchResults/index.ts create mode 100644 packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/index.ts create mode 100644 packages/sanity/src/core/studio/components/navbar/search/contexts/index.ts create mode 100644 packages/sanity/src/core/studio/components/navbar/search/contexts/search/index.ts diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx index c206950241a..cf82f5d0bb8 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx +++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx @@ -18,11 +18,17 @@ import {SearchWrapper} from './common/SearchWrapper' import {Filters} from './filters/Filters' import {RecentSearches} from './recentSearches/RecentSearches' import {SearchHeader} from './SearchHeader' +import {type ItemSelectHandler} from './searchResults/item/SearchResultItem' import {SearchResults} from './searchResults/SearchResults' +/** + * @internal + */ export interface SearchPopoverProps { disableFocusLock?: boolean + disableIntentLink?: boolean onClose: () => void + onItemSelect?: ItemSelectHandler onOpen: () => void open: boolean } @@ -66,7 +72,17 @@ const SearchMotionCard = styled(motion(Card))` width: min(calc(100vw - ${POPOVER_INPUT_PADDING * 2}px), ${POPOVER_MAX_WIDTH}px); ` -export function SearchPopover({disableFocusLock, onClose, onOpen, open}: SearchPopoverProps) { +/** + * @internal + */ +export function SearchPopover({ + disableFocusLock, + disableIntentLink, + onClose, + onItemSelect, + onOpen, + open, +}: SearchPopoverProps) { const [inputElement, setInputElement] = useState(null) const popoverElement = useRef(null) @@ -134,7 +150,11 @@ export function SearchPopover({disableFocusLock, onClose, onOpen, open}: SearchP )} {hasValidTerms ? ( - + ) : ( )} diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/index.ts b/packages/sanity/src/core/studio/components/navbar/search/components/index.ts new file mode 100644 index 00000000000..3e674aac241 --- /dev/null +++ b/packages/sanity/src/core/studio/components/navbar/search/components/index.ts @@ -0,0 +1,2 @@ +export * from './SearchPopover' +export * from './searchResults' diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx index 0ce3d3bea01..5a09b3bf53e 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx +++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx @@ -11,7 +11,7 @@ import {NoResults} from '../NoResults' import {SearchError} from '../SearchError' import {SortMenu} from '../SortMenu' import {DebugOverlay} from './item/DebugOverlay' -import {SearchResultItem} from './item/SearchResultItem' +import {type ItemSelectHandler, SearchResultItem} from './item/SearchResultItem' const VIRTUAL_LIST_SEARCH_RESULT_ITEM_HEIGHT = 57 // px const VIRTUAL_LIST_OVERSCAN = 4 @@ -26,10 +26,12 @@ const SearchResultsInnerFlex = styled(Flex)<{$loading: boolean}>` ` interface SearchResultsProps { + disableIntentLink?: boolean inputElement: HTMLInputElement | null + onItemSelect?: ItemSelectHandler } -export function SearchResults({inputElement}: SearchResultsProps) { +export function SearchResults({disableIntentLink, inputElement, onItemSelect}: SearchResultsProps) { const { dispatch, onClose, @@ -59,16 +61,18 @@ export function SearchResults({inputElement}: SearchResultsProps) { return ( <> {debug && } ) }, - [debug, handleSearchResultClick], + [debug, disableIntentLink, handleSearchResultClick, onItemSelect], ) return ( diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/index.ts b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/index.ts new file mode 100644 index 00000000000..62465b8019c --- /dev/null +++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/index.ts @@ -0,0 +1 @@ +export * from './item' diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx index 5e049fe3100..0ffbeac0b8e 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx +++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx @@ -1,3 +1,4 @@ +import {type SanityDocumentLike} from '@sanity/types' import {Box, type ResponsiveMarginProps, type ResponsivePaddingProps} from '@sanity/ui' import {type MouseEvent, useCallback, useMemo} from 'react' import {useIntentLink} from 'sanity/router' @@ -5,7 +6,9 @@ import {useIntentLink} from 'sanity/router' import {type GeneralPreviewLayoutKey, PreviewCard} from '../../../../../../../components' import {useSchema} from '../../../../../../../hooks' import {useDocumentPresence} from '../../../../../../../store' -import SearchResultItemPreview from './SearchResultItemPreview' +import {SearchResultItemPreview} from './SearchResultItemPreview' + +export type ItemSelectHandler = (item: Pick) => void interface SearchResultItemProps extends ResponsiveMarginProps, ResponsivePaddingProps { disableIntentLink?: boolean @@ -13,6 +16,7 @@ interface SearchResultItemProps extends ResponsiveMarginProps, ResponsivePadding documentType: string layout?: GeneralPreviewLayoutKey onClick?: () => void + onItemSelect?: ItemSelectHandler } export function SearchResultItem({ @@ -21,6 +25,7 @@ export function SearchResultItem({ documentType, layout, onClick, + onItemSelect, ...rest }: SearchResultItemProps) { const schema = useSchema() @@ -35,12 +40,13 @@ export function SearchResultItem({ const handleClick = useCallback( (e: MouseEvent) => { + onItemSelect?.({_id: documentId, _type: documentType}) if (!disableIntentLink) { onIntentClick(e) } onClick?.() }, - [disableIntentLink, onClick, onIntentClick], + [onItemSelect, documentId, documentType, disableIntentLink, onClick, onIntentClick], ) if (!type) return null diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx index a673768e880..5293a7941da 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx +++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx @@ -35,7 +35,10 @@ const SearchResultItemPreviewBox = styled(Box)` } ` -export default function SearchResultItemPreview({ +/** + * @internal + */ +export function SearchResultItemPreview({ documentId, layout, presence, diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/index.ts b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/index.ts new file mode 100644 index 00000000000..32ec1befb87 --- /dev/null +++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/index.ts @@ -0,0 +1 @@ +export * from './SearchResultItemPreview' diff --git a/packages/sanity/src/core/studio/components/navbar/search/contexts/index.ts b/packages/sanity/src/core/studio/components/navbar/search/contexts/index.ts new file mode 100644 index 00000000000..74b6aa9b065 --- /dev/null +++ b/packages/sanity/src/core/studio/components/navbar/search/contexts/index.ts @@ -0,0 +1 @@ +export * from './search' diff --git a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchContext.ts b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchContext.ts index 8f7740d2e12..46273f9fb31 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchContext.ts +++ b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchContext.ts @@ -4,6 +4,9 @@ import {type CommandListHandle} from '../../../../../../components/commandList/t import {type RecentSearchesStore} from '../../datastores/recentSearches' import {type SearchAction, type SearchReducerState} from './reducer' +/** + * @internal + */ export interface SearchContextValue { dispatch: Dispatch onClose: (() => void) | null @@ -14,4 +17,7 @@ export interface SearchContextValue { state: SearchReducerState } +/** + * @internal + */ export const SearchContext = createContext(undefined) diff --git a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/index.ts b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/index.ts new file mode 100644 index 00000000000..301e73c2ddf --- /dev/null +++ b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/index.ts @@ -0,0 +1,3 @@ +export * from './SearchContext' +export * from './SearchProvider' +export * from './useSearchState' diff --git a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/useSearchState.ts b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/useSearchState.ts index fe695a4cc55..a5e6bcf438b 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/useSearchState.ts +++ b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/useSearchState.ts @@ -2,6 +2,9 @@ import {useContext} from 'react' import {SearchContext, type SearchContextValue} from './SearchContext' +/** + * @internal + */ export function useSearchState(): SearchContextValue { const context = useContext(SearchContext) diff --git a/packages/sanity/src/core/studio/components/navbar/search/index.ts b/packages/sanity/src/core/studio/components/navbar/search/index.ts index b1d65c1ddb2..9a824c91890 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/index.ts +++ b/packages/sanity/src/core/studio/components/navbar/search/index.ts @@ -1,3 +1,5 @@ +export * from './components' +export * from './contexts' export { defineSearchFilter, defineSearchFilterOperators,