Feat: Applies next/dynamic for SearchInput & adjustments (#2550)

## What's the purpose of this pull request? - Uses dynamic to import `SearchDropdown` and `UISearchInputField` **note**: I'm not using dynamic import for UISearchInput because the searchRef is used in the [useOnClickOutside](https://github.com/vtex/faststore/blob/5cbeb9bb9b67371aa23b6e5ca51d582629dfb6d3/packages/core/src/sdk/ui/useOnClickOutside.ts#L13). If the component isn’t rendered yet and we click on the screen, the ref isn’t available, which could cause an error. To avoid changing the code and introducing this issue, I've chosen not to use dynamic import here. Any other opinion here? ## How to test it? Test using the [preview](https://sfj-91e9bbc--starter.preview.vtex.app) or running local ### testing on mobile screen size (Moto G Power): - you should be able to see the magnify glass icon button - click on it and search for a term - this should have the same behavior as before (excluding a small animation effect) <img width="300" alt="image" src="https://github.com/user-attachments/assets/863df01a-abb7-4543-8376-4ac0f220379f"> <img width="300" alt="image" src="https://github.com/user-attachments/assets/af20d4d3-39c6-4202-a874-a07776100475"> ### testing on desktop: - click on the SearchInput and search for a term - this should have the same behavior as before <img width="500" alt="image" src="https://github.com/user-attachments/assets/1ac364b7-4a89-4c20-b6bd-adf9cd730776"> ### Starters Deploy Preview vtex-sites/starter.store#606 ## Reference [POC](https://github.com/vtex/faststore/pull/2404/files#diff-c85fe4be6105c2f443716ac80824c04e5455fdc63a731e79b72638cd785eee89)
vtex · Nov 11, 2024 · bc17e46 · bc17e46
1 parent 5cbeb9b
commit bc17e46
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 67 deletions.
diff --git a/packages/core/src/components/navigation/Navbar/Navbar.tsx b/packages/core/src/components/navigation/Navbar/Navbar.tsx
@@ -97,7 +97,7 @@ function Navbar({
   } = useOverrideComponents<'Navbar'>()
   const scrollDirection = useScrollDirection()
   const { openNavbar, navbar: displayNavbar } = useUI()
-  const { isDesktop } = useScreenResize()
+  const { isDesktop, isMobile } = useScreenResize()
 
   const searchMobileRef = useRef<SearchInputRef>(null)
   const [searchExpanded, setSearchExpanded] = useState(false)
@@ -139,10 +139,12 @@ function Navbar({
             </>
           )}
 
-          <SearchInput
-            placeholder={searchInput?.placeholder}
-            sort={searchInput?.sort}
-          />
+          {isDesktop && (
+            <SearchInput
+              placeholder={searchInput?.placeholder}
+              sort={searchInput?.sort}
+            />
+          )}
 
           <NavbarButtons.Component
             searchExpanded={searchExpanded}
@@ -160,18 +162,19 @@ function Navbar({
               />
             )}
 
-            <SearchInput
-              placeholder=""
-              ref={searchMobileRef}
-              testId="store-input-mobile"
-              buttonTestId="store-input-mobile-button"
-              onSearchClick={handlerExpandSearch}
-              sort={searchInput?.sort}
-              hidden={!searchExpanded}
-              aria-hidden={!searchExpanded}
-            />
-
-            <ButtonSignIn.Component {...signInButton} />
+            {!isDesktop && (
+              <SearchInput
+                placeholder=""
+                ref={searchMobileRef}
+                testId="store-input-mobile"
+                buttonTestId="store-input-mobile-button"
+                onSearchClick={handlerExpandSearch}
+                sort={searchInput?.sort}
+                hidden={!searchExpanded}
+                aria-hidden={!searchExpanded}
+              />
+            )}
+            {!isMobile && <ButtonSignIn.Component {...signInButton} />}
 
             <CartToggle {...cart} />
           </NavbarButtons.Component>

diff --git a/packages/core/src/components/navigation/NavbarLinks/NavbarLinks.tsx b/packages/core/src/components/navigation/NavbarLinks/NavbarLinks.tsx
@@ -1,11 +1,11 @@
 import type { AnchorHTMLAttributes } from 'react'
 
-import { NavbarLinksListItem as UINavbarLinksListItem } from '@faststore/ui'
 import type { NavbarLinksProps as UINavbarLinksProps } from '@faststore/ui'
+import { NavbarLinksListItem as UINavbarLinksListItem } from '@faststore/ui'
 
-import Link from 'src/components/ui/Link'
-import RegionButton from 'src/components/region/RegionButton'
 import type { NavbarProps } from 'src/components/navigation/Navbar'
+import RegionButton from 'src/components/region/RegionButton'
+import Link from 'src/components/ui/Link'
 
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 

diff --git a/packages/core/src/components/search/SearchDropdown/SearchDropdown.tsx b/packages/core/src/components/search/SearchDropdown/SearchDropdown.tsx
@@ -13,7 +13,6 @@ import { SearchState } from '@faststore/sdk'
 import { ProductSummary_ProductFragment } from '@generated/graphql'
 import SearchProductItem from 'src/components/search/SearchProductItem'
 import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
-
 interface SearchDropdownProps {
   sort: SearchState['sort']
   [key: string]: any

diff --git a/packages/core/src/components/search/SearchInput/SearchInput.tsx b/packages/core/src/components/search/SearchInput/SearchInput.tsx
@@ -1,16 +1,4 @@
-import type { SearchEvent, SearchState } from '@faststore/sdk'
-
-import type {
-  SearchInputFieldProps as UISearchInputFieldProps,
-  SearchInputFieldRef as UISearchInputFieldRef,
-} from '@faststore/ui'
-import {
-  SearchProviderContextValue,
-  SearchInput as UISearchInput,
-  SearchInputField as UISearchInputField,
-} from '@faststore/ui'
-import { useRouter } from 'next/router'
-import type { CSSProperties } from 'react'
+import type { CSSProperties, SetStateAction } from 'react'
 import {
   Suspense,
   forwardRef,
@@ -21,14 +9,40 @@ import {
   useState,
 } from 'react'
 
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+
+import type { SearchEvent, SearchState } from '@faststore/sdk'
+
+import {
+  Icon as UIIcon,
+  IconButton as UIIconButton,
+  SearchInput as UISearchInput,
+} from '@faststore/ui'
+
+import type {
+  SearchInputFieldProps as UISearchInputFieldProps,
+  SearchInputFieldRef as UISearchInputFieldRef,
+} from '@faststore/ui'
+
+import { SearchProviderContextValue } from '@faststore/ui'
+
 import useSearchHistory from 'src/sdk/search/useSearchHistory'
 import useSuggestions from 'src/sdk/search/useSuggestions'
 import useOnClickOutside from 'src/sdk/ui/useOnClickOutside'
 
+import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
+
 const SearchDropdown = lazy(
+  /* webpackChunkName: "SearchDropdown" */
   () => import('src/components/search/SearchDropdown')
 )
 
+const UISearchInputField = dynamic<UISearchInputFieldProps & any>(() =>
+  /* webpackChunkName: "UISearchInputField" */
+  import('@faststore/ui').then((module) => module.SearchInputField)
+)
+
 const MAX_SUGGESTIONS = 5
 
 export type SearchInputProps = {
@@ -64,6 +78,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     },
     ref
   ) {
+    const { hidden } = otherProps
     const [searchQuery, setSearchQuery] = useState<string>('')
     const searchQueryDeferred = useDeferredValue(searchQuery)
     const [searchDropdownVisible, setSearchDropdownVisible] =
@@ -100,48 +115,60 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     )
     const isLoading = !error && !data
 
+    const buttonProps = {
+      onClick: onSearchClick,
+      testId: buttonTestId,
+    }
+
     return (
-      <UISearchInput
-        ref={searchRef}
-        visibleDropdown={searchDropdownVisible}
-        onSearchSelection={onSearchSelection}
-        term={searchQueryDeferred}
-        terms={terms}
-        products={products}
-        isLoading={isLoading}
-      >
-        <UISearchInputField
-          ref={ref}
-          buttonProps={{
-            onClick: onSearchClick,
-            testId: buttonTestId,
-          }}
-          placeholder={placeholder}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          onSubmit={(term) => {
-            import('src/sdk/search/formatSearchPath').then(
-              ({ formatSearchPath }) => {
+      <>
+        {hidden ? (
+          <UIIconButton
+            type="submit"
+            aria-label="Submit Search"
+            icon={<UIIcon name="MagnifyingGlass" />}
+            size="small"
+            {...buttonProps}
+          />
+        ) : (
+          <UISearchInput
+            ref={searchRef}
+            visibleDropdown={searchDropdownVisible}
+            onSearchSelection={onSearchSelection}
+            term={searchQueryDeferred}
+            terms={terms}
+            products={products}
+            isLoading={isLoading}
+          >
+            <UISearchInputField
+              ref={ref}
+              buttonProps={buttonProps}
+              placeholder={placeholder}
+              onChange={(e: { target: { value: SetStateAction<string> } }) =>
+                setSearchQuery(e.target.value)
+              }
+              onSubmit={(term: string) => {
                 const path = formatSearchPath({
                   term,
                   sort: sort as SearchState['sort'],
                 })
 
                 onSearchSelection(term, path)
                 router.push(path)
-              }
-            )
-          }}
-          onFocus={() => setSearchDropdownVisible(true)}
-          value={searchQuery}
-          {...otherProps}
-        />
-
-        {searchDropdownVisible && (
-          <Suspense fallback={null}>
-            <SearchDropdown sort={sort as SearchState['sort']} />
-          </Suspense>
+              }}
+              onFocus={() => setSearchDropdownVisible(true)}
+              value={searchQuery}
+              {...otherProps}
+            />
+
+            {searchDropdownVisible && (
+              <Suspense fallback={null}>
+                <SearchDropdown sort={sort as SearchState['sort']} />
+              </Suspense>
+            )}
+          </UISearchInput>
         )}
-      </UISearchInput>
+      </>
     )
   }
 )