Feat: Add css modules, tokens and refactor Search components (#150)

Co-authored-by: Natã Melo <[email protected]>

.storybook/components/SectionItem.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode } from 'react'
+import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react'
 
 import ButtonLink from '../../src/components/ui/Button/ButtonLink'
 import Icon from '../../src/components/ui/Icon'
@@ -7,17 +7,22 @@ type SectionItemProps = {
   title: string
   description: string | ReactNode
   actionPath?: string
+  containerStyle?: CSSProperties
 }
 
 const SectionItem = ({
   title,
   description,
   children,
   actionPath,
+  containerStyle,
+  ...otherProps
 }: PropsWithChildren<SectionItemProps>) => {
   return (
-    <li className="sbdocs-li">
-      <div className="sbdocs-div">{children}</div>
+    <li className="sbdocs-li" {...otherProps}>
+      <div className="sbdocs-div" style={containerStyle}>
+        {children}
+      </div>
       <article className="sbdocs-list-text">
         <h3 className="sbdocs sbdocs-h3">{title}</h3>
         <p className="sbdocs sbdocs-p">{description}</p>

.storybook/mocks/index.ts

@@ -1,2 +1,4 @@
 export { product } from './product'
 export { productGridItems } from './productGridItems'
+export { searchTerms } from './searchTerms'
+export { searchHistory } from './searchHistory'

.storybook/mocks/searchHistory.ts

@@ -0,0 +1,6 @@
+export const searchHistory = [
+  { term: 'headphone', path: '/' },
+  { term: 'audio & video', path: '/' },
+  { term: 'mh-7000', path: '/' },
+  { term: 'jbl go', path: '/' },
+]

.storybook/mocks/searchTerms.ts

@@ -0,0 +1,5 @@
+export const searchTerms = [
+  { value: 'Notebooks', count: 3 },
+  { value: 'Laser Printer', count: 2 },
+  { value: 'Bluetooth Keyboard', count: 1 },
+]

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Applies new local tokens to `SearchHistory`, `SearchTop`, `SearchDropdown` and `SearchSuggestions` ([#150](https://github.com/vtex-sites/gatsby.store/pull/150))
 - Applies CSS Modules to `Incentives` ([#147](https://github.com/vtex-sites/gatsby.store/pull/147))
 - Applies new local tokens to `Footer` ([#147](https://github.com/vtex-sites/gatsby.store/pull/147))
 - Applies new local tokens to `Breadcrumb` ([#146](https://github.com/vtex-sites/gatsby.store/pull/146))
@@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Renames and refactors the components of Search feature ([#150](https://github.com/vtex-sites/gatsby.store/pull/150))
 - A flaky PLP infinite scroll test to be more stable ([#149](https://github.com/vtex-sites/gatsby.store/pull/149))
 - Cypress version from 6.6.0 to 9.5.4 to match WebOps' ([#148](https://github.com/vtex-sites/gatsby.store/pull/148))
 - Updates `IncentivesFooter` content ([#147](https://github.com/vtex-sites/gatsby.store/pull/147))

src/components/common/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import type { SearchInputRef } from '@faststore/ui'
 import { Suspense, useRef, useState } from 'react'
 import CartToggle from 'src/components/cart/CartToggle'
-import SearchInput from 'src/components/common/SearchInput'
+import SearchInput from 'src/components/search/SearchInput'
 import {
   ButtonIcon,
   ButtonSignIn,

src/components/search/Search.stories.mdx

@@ -0,0 +1,180 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import {
+  SectionList,
+  SectionItem,
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
+import { rest } from 'msw'
+import { SessionProvider } from '@faststore/sdk'
+import SearchDropdown from './SearchDropdown'
+import SearchInput from './SearchInput'
+import SearchProductCard from './SearchProductCard'
+import SearchSuggestions from './SearchSuggestions'
+import { SearchTop } from './SearchTop'
+import { SearchHistory } from './SearchHistory'
+import { product, searchTerms, searchHistory } from 'src/../.storybook/mocks'
+import { msw, products } from'./searchMock.ts'
+import SearchSharedTokenTable from'./SearchSharedTokenTable.mdx'
+import { LocationProvider } from '@reach/router'
+
+<Meta
+  title='Features/Search/Overview'
+  parameters={{msw}}
+/>
+
+export const Template = (props) => (
+  <div
+    style={{
+      maxWidth: '600px',
+      height: '400px',
+      margin: '0 auto',
+      padding: '0 16px',
+      background: 'white',
+    }}
+  >
+    <SessionProvider>
+      <SearchInput {...props} />
+    </SessionProvider>
+  </div>
+)
+
+
+<header>
+
+# Search
+
+This feature permits customers to find their search easier.
+
+</header>
+
+## Overview
+
+This Search feature is based on Autocomplete.
+Autocomplete is the functionality that displays previous search results based on current and previous searches. These results are presented in four
+different lists, which can be together or separated, depending on the customer's interaction. The existing sections are:
+
+- Last searches performed;
+
+- Search suggestion;
+
+- Product suggestion;
+
+- Most searched terms.
+
+To know more, visit [Autocomplete in VTEX Intelligent Search](https://help.vtex.com/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/4gXFsEWjF7QF7UtI2GAvhL).
+
+---
+
+## Usage
+
+You can add your `<SearchInput />` whenever it's needed.
+
+It's suggested to add it on `Navbar`.
+
+```jsx
+import SearchInput from 'src/components/search/SearchInput'
+```
+
+<Canvas>
+  <Story
+    name="Overview"
+    parameters={{
+      backgrounds: { default: 'dark' },
+      msw
+    }}
+    args={{
+      products
+    }}
+  >
+  {Template.bind({})}
+  </Story>
+</Canvas>
+
+<SearchSharedTokenTable />
+
+---
+
+## Components
+<LocationProvider>
+  <SessionProvider>
+    <SearchInputProvider>
+      <SectionList grid="grid">
+        <SectionItem
+          title="SearchSuggestions"
+          actionPath="../?path=/docs/features-search-searchsuggestions--default-story"
+          description={
+            <>
+              Displays a set of navigation links that self-adapts on mobile{' '}
+              or desktop screens.
+            </>
+          }
+          containerStyle={{ overflowY: "scroll", alignItems: "flex-start" }}
+        >
+          <SearchSuggestions term="Ste" products={products.slice(0, 3)} terms={searchTerms} style={{ width: "100%" }} />
+        </SectionItem>
+        <SectionItem
+          title="SearchProductCard"
+          actionPath="../?path=/docs/features-search-searchproductcard--search-product-card"
+          description={
+            <>
+              Card to show details of the product and suggestions in <code>SearchDropdown</code>.
+            </>
+          }
+        >
+          <SearchProductCard product={product} style={{ width: "100%" }} />
+        </SectionItem>
+        <SectionItem
+          title="SearchTop"
+          actionPath="../?path=/docs/features-search-searchtop--default-story"
+          description={
+            <>
+              This section displays the most searched terms by customers.
+            </>
+          }
+        >
+          <SearchTop style={{ width: "100%" }} />
+        </SectionItem>
+      </SectionList>
+      <SectionList grid="grid">
+        <SectionItem
+          title="SearchHistory"
+          actionPath="../?path=/docs/features-search-searchhistory--default-story"
+          description={
+            <>
+              Responsible for showing the latest terms searched by the user.
+            </>
+          }
+        >
+          <SearchHistory history={searchHistory} style={{ width: "100%" }} />
+        </SectionItem>
+        <SectionItem
+          title="SearchDropdown"
+          actionPath="../?path=/docs/features-search-searchdropdown--default-story"
+          description={
+            <>
+              Combine <code>SearchHistory</code>, <code>SearchTop</code>, and <code>SearchSuggestions</code> to show all options in <code>SearchInput</code>.
+            </>
+          }
+          containerStyle={{ display: "flex", flexDirection: "column", overflowY: "scroll", justifyContent: "start" }}
+        >
+          <SearchDropdown history={searchHistory} />
+        </SectionItem>
+        <SectionItem
+          title="SearchInput"
+          actionPath="../?path=/docs/features-search-searchinput--default-story"
+          description={
+            <>
+              Responsible to receive, search and display suggestions.
+            </>
+          }
+          containerStyle={{ overflowY: "scroll" }}
+        >
+          <SearchInput containerStyle={{ width: "100%" }} />
+        </SectionItem>
+      </SectionList>
+    </SearchInputProvider>
+  </SessionProvider>
+</LocationProvider>

src/components/search/SearchDropdown/SearchDropdown.stories.mdx

@@ -0,0 +1,69 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import { SessionProvider } from '@faststore/sdk'
+import { rest } from 'msw'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import { productGridItems, searchTerms, searchHistory } from 'src/../.storybook/mocks'
+import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
+import { msw, products } from'../searchMock'
+
+import SearchDropdown from '.'
+
+<Meta
+  component={SearchDropdown}
+  title="Features/Search/SearchDropdown"
+/>
+
+export const Template = (args) => (
+  <div
+    style={{
+      maxWidth: '600px',
+      margin: '0 auto',
+      padding: '0 16px',
+      background: 'white',
+    }}
+  >
+    <SessionProvider>
+      <SearchInputProvider>
+        <SearchDropdown {...args} />
+      </SearchInputProvider>
+    </SessionProvider>
+  </div>
+)
+
+<header>
+
+# Search Dropdown
+
+Combine [SearchHistory](?path=/docs/features-search-searchhistory--default-story),
+[SearchTop](?path=/docs/features-search-searchtop--default-story) and
+[SearchSuggestions](?path=/docs/features-search-searchsuggestions--default-story)
+to show all options in [SearchInput](?path=/docs/features-search-searchinput--default-story).
+
+</header>
+
+## Usage
+
+`import SearchDropdown from 'src/components/search/SearchDropdown'`
+
+<Canvas>
+  <Story
+    name="default"
+    parameters={{
+      backgrounds: { default: 'dark' },
+      msw
+    }}
+    args={{
+      products,
+      history: searchHistory
+    }}
+  >
+  {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />