Add basic code skeleton for new Search Router PoC

src/CONST.ts

@@ -964,7 +964,6 @@ const CONST = {
             BOTTOM_DOCKED: 'bottom_docked',
             POPOVER: 'popover',
             RIGHT_DOCKED: 'right_docked',
-            ONBOARDING: 'onboarding',
         },
         ANCHOR_ORIGIN_VERTICAL: {
             TOP: 'top',

src/components/Search/SearchRouter.tsx

@@ -0,0 +1,99 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Modal from '@components/Modal';
+import SelectionList from '@components/SelectionList';
+import TableListItem from '@components/SelectionList/TableListItem';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import * as SearchUtils from '@libs/SearchUtils';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
+import SearchRouterInput from './SearchRouter/SearchRouterInput';
+import type {SearchQueryJSON} from './types';
+
+type SearchRouterProps = {
+    type?: SearchDataTypes;
+};
+
+function SearchRouter({type}: SearchRouterProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
+    const [isDisplayed, setIsDisplayed] = useState(false);
+    const [currentQuery, setCurrentQuery] = useState<SearchQueryJSON | undefined>(undefined);
+
+    const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER;
+    const fullscreen = true;
+
+    const onSearch = (userQuery: string) => {
+        if (userQuery.length < 3) {
+            return;
+        }
+
+        const query = type ? `type:${type} ${userQuery}` : userQuery;
+        const queryJSON = SearchUtils.buildSearchQueryJSON(query);
+
+        if (queryJSON) {
+            setCurrentQuery(queryJSON);
+        }
+    };
+
+    const sectionData = currentQuery
+        ? [
+              {
+                  text: `Search for: ${currentQuery.inputQuery}`,
+              },
+          ]
+        : [];
+
+    return (
+        <>
+            <Button
+                text={translate('common.search')}
+                icon={Expensicons.MagnifyingGlass}
+                onPress={() => {
+                    setIsDisplayed(true);
+                }}
+                medium
+            />
+            <Modal
+                type={modalType}
+                fullscreen={fullscreen}
+                isVisible={isDisplayed}
+                popoverAnchorPosition={{right: 20, top: 20}}
+                onClose={() => {
+                    setIsDisplayed(false);
+                }}
+            >
+                <View style={[styles.flex1, styles.p4, styles.m5]}>
+                    <SearchRouterInput onSearch={onSearch} />
+                    {currentQuery ? (
+                        <View>
+                            <SelectionList
+                                sections={[{data: sectionData}]}
+                                ListItem={TableListItem}
+                                onSelectRow={() => {
+                                    // Todo different items will have different functionalities on click
+                                    const query = SearchUtils.buildSearchQueryString(currentQuery);
+
+                                    setIsDisplayed(false);
+                                    Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query}));
+                                }}
+                            />
+                        </View>
+                    ) : null}
+                </View>
+            </Modal>
+        </>
+    );
+}
+
+SearchRouter.displayName = 'SearchRouter';
+
+export default SearchRouter;

src/components/Search/SearchRouter/SearchRouterInput.tsx

@@ -0,0 +1,50 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import TextInput from '@components/TextInput';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type SearchRouterInputProps = {
+    onSearch: (searchTerm: string) => void;
+};
+
+function SearchRouterInput({onSearch}: SearchRouterInputProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const [value, setValue] = useState('');
+
+    const onChangeText = (text: string) => {
+        setValue(text);
+        onSearch(text);
+    };
+
+    return (
+        <View style={[]}>
+            <TextInput
+                value={value}
+                onChangeText={onChangeText}
+                textInputContainerStyles={[]}
+                containerStyles={[]}
+                inputStyle={[
+                    styles.w80,
+                    styles.h13,
+                    {
+                        width: 400,
+                    },
+                    {
+                        borderRadius: 8,
+                        borderWidth: 4,
+                        borderColor: theme.borderFocus,
+                    },
+                ]}
+                role={CONST.ROLE.PRESENTATION}
+            />
+        </View>
+    );
+}
+
+SearchRouterInput.displayName = 'SearchRouterInput';
+
+export default SearchRouterInput;

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx

@@ -5,6 +5,7 @@ import Breadcrumbs from '@components/Breadcrumbs';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {PressableWithoutFeedback} from '@components/Pressable';
+import SearchRouter from '@components/Search/SearchRouter';
 import Tooltip from '@components/Tooltip';
 import WorkspaceSwitcherButton from '@components/WorkspaceSwitcherButton';
 import useLocalize from '@hooks/useLocalize';
@@ -38,6 +39,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true}
 
     const displaySignIn = isAnonymousUser;
     const displaySearch = !isAnonymousUser && shouldDisplaySearch;
+    const displayNewSearch = true;
 
     return (
         <View style={styles.w100}>
@@ -60,6 +62,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true}
                     </View>
                 </View>
                 {displaySignIn && <SignInButton />}
+                {displayNewSearch && <SearchRouter />}
                 {displaySearch && (
                     <Tooltip text={translate('common.find')}>
                         <PressableWithoutFeedback

src/styles/utils/generators/ModalStyleUtils.ts

@@ -205,7 +205,8 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     boxShadow: variables.popoverMenuShadow,
                 };
 
-                hideBackdrop = true;
+                // Todo add new modal type instead of this
+                // hideBackdrop = true;
                 swipeDirection = undefined;
                 animationIn = 'fadeIn';
                 animationOut = 'fadeOut';