@faststore/core 22.42.6

package/src/components/search/Search.stories.mdx

@@ -0,0 +1,169 @@
+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 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 } from 'src/../.storybook/mocks'
+import { msw, products } from './searchMock.ts'
+import SearchSharedTokenTable from './SearchSharedTokenTable.mdx'
+
+<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',
+    }}
+  >
+    <SearchInput {...props} />
+  </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
+
+<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 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 />
+    </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>

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

@@ -0,0 +1,62 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import { rest } from 'msw'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import { productGridItems, searchTerms } 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',
+    }}
+  >
+    <SearchInputProvider>
+      <SearchDropdown {...args} />
+    </SearchInputProvider>
+  </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,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />

package/src/components/search/SearchDropdown/SearchDropdown.tsx

@@ -0,0 +1,44 @@
+import type { SearchSuggestionsProps } from 'src/components/search/SearchSuggestions'
+import SearchSuggestions from 'src/components/search/SearchSuggestions'
+import useSuggestions from 'src/sdk/search/useSuggestions'
+
+import { SearchHistory } from '../SearchHistory'
+import { SearchTop } from '../SearchTop'
+
+export type SearchDropdownProps = SearchSuggestionsProps
+
+function SearchDropdown({
+  term = '',
+  style,
+  ...otherProps
+}: SearchDropdownProps) {
+  const { terms, products, isLoading } = useSuggestions(term)
+
+  if (term.length === 0 && !isLoading) {
+    return (
+      <>
+        <SearchHistory />
+        <SearchTop />
+      </>
+    )
+  }
+
+  if (isLoading) {
+    return <p data-fs-search-input-loading-text>Loading...</p>
+  }
+
+  if (terms.length === 0 && products.length === 0) {
+    return null
+  }
+
+  return (
+    <SearchSuggestions
+      term={term}
+      terms={terms}
+      products={products}
+      {...otherProps}
+    />
+  )
+}
+
+export default SearchDropdown

package/src/components/search/SearchDropdown/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchDropdown'
+export type { SearchDropdownProps } from './SearchDropdown'

package/src/components/search/SearchHistory/SearchHistory.stories.mdx

@@ -0,0 +1,59 @@
+import { useEffect } from 'react'
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
+import Button from 'src/components/ui/Button'
+
+import { SearchHistory } from '.'
+
+<Meta
+  title="Features/Search/SearchHistory"
+  component={SearchHistory}
+/>
+
+export const Template = (args) => {
+  return (
+    <div
+      style={{
+        maxWidth: "600px",
+        margin: "0 auto",
+        padding: "0 16px",
+        background: "white",
+      }}
+    >
+      <SearchInputProvider>
+        <SearchHistory />
+      </SearchInputProvider>
+    </div>
+  )
+}
+
+<header>
+
+# Search History
+
+Responsible for showing the latest terms searched by the user.
+
+</header>
+
+## Usage
+
+`import { SearchHistory } from 'src/components/search/SearchHistory`
+
+<Canvas>
+  <Story
+    name="default"
+    parameters={{
+      backgrounds: { default: 'dark' },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />

package/src/components/search/SearchHistory/SearchHistory.tsx

@@ -0,0 +1,51 @@
+import { List as UIList } from '@faststore/ui'
+
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import Link from 'src/components/ui/Link'
+import useSearchHistory from 'src/sdk/search/useSearchHistory'
+import useSearchInput from 'src/sdk/search/useSearchInput'
+
+import styles from '../search.module.scss'
+
+const SearchHistory = () => {
+  const { onSearchInputSelection } = useSearchInput()
+  const { searchHistory, clearSearchHistory } = useSearchHistory()
+
+  if (!searchHistory.length) {
+    return null
+  }
+
+  return (
+    <section data-fs-search-section className={styles.fsSearch}>
+      <div data-fs-search-header>
+        <p data-fs-search-title>History</p>
+        <Button variant="tertiary" onClick={clearSearchHistory}>
+          Clear History
+        </Button>
+      </div>
+      <UIList variant="ordered">
+        {searchHistory.map((item) => (
+          <li key={item.term} data-fs-search-item>
+            <Link
+              data-fs-search-item-link
+              variant="display"
+              href={item.path}
+              onClick={() => onSearchInputSelection?.(item.term, item.path)}
+            >
+              <Icon
+                name="Clock"
+                width={18}
+                height={18}
+                data-fs-search-item-icon
+              />
+              <span>{item.term}</span>
+            </Link>
+          </li>
+        ))}
+      </UIList>
+    </section>
+  )
+}
+
+export default SearchHistory

package/src/components/search/SearchHistory/index.ts

@@ -0,0 +1 @@
+export { default as SearchHistory } from './SearchHistory'

package/src/components/search/SearchInput/SearchInput.stories.mdx

@@ -0,0 +1,205 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import { rest } from 'msw'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import { productGridItems, searchTerms } from 'src/../.storybook/mocks'
+import { msw, products } from '../searchMock'
+
+import SearchInput from './SearchInput'
+
+<Meta component={SearchInput} title="Features/Search/SearchInput" />
+
+export const Template = (props) => (
+  <div
+    style={{
+      maxWidth: '600px',
+      height: '400px',
+      margin: '0 auto',
+      padding: '0 16px',
+      background: 'white',
+    }}
+  >
+    <SearchInput {...props} />
+  </div>
+)
+
+<header>
+
+# Search Input
+
+Responsible to receive, search and display suggestions.
+
+</header>
+
+## Usage
+
+`import SearchInput from 'src/components/search/SearchInput'`
+
+<Canvas>
+  <Story
+    name="default"
+    parameters={{
+      backgrounds: { default: 'dark' },
+      msw,
+    }}
+    args={{
+      products,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-search-input-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-7) var(--fs-spacing-1) var(--fs-spacing-2)"
+  />
+  <TokenRow
+    isColor
+    token="--fs-search-input-bkg-color"
+    value="var(--fs-color-body-bkg)"
+  />
+  <TokenRow
+    token="--fs-search-input-box-shadow"
+    value="0 0 0 var(--fs-border-width) var(--fs-border-color-active)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-search-input-height-mobile"
+    value="var(--fs-control-tap-size)"
+  />
+  <TokenRow
+    token="--fs-search-input-height-desktop"
+    value="var(--fs-spacing-6)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-search-input-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-search-input-border-radius"
+    value="var(--fs-border-radius)"
+  />
+  <TokenRow
+    isColor
+    token="--fs-search-input-border-color"
+    value="var(--fs-border-color)"
+  />
+  <TokenRow
+    isColor
+    token="--fs-search-input-border-color-hover"
+    value="var(--fs-border-color-active)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-search-input-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+  <TokenRow token="--fs-search-input-transition-function" value="ease" />
+</TokenTable>
+
+### Button
+
+<TokenTable>
+  <TokenRow
+    token="--fs-search-input-button-width"
+    value="var(--fs-spacing-7)"
+  />
+  <TokenRow
+    token="--fs-search-input-button-min-height"
+    value="var(--fs-search-input-height-desktop)"
+  />
+  <TokenRow
+    isColor
+    token="--fs-search-input-button-bkg-color"
+    value="transparent"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-search-input-button-height-mobile"
+    value="var(--fs-search-input-button-width)"
+  />
+  <TokenRow
+    token="--fs-search-input-button-height-desktop"
+    value="var(--fs-search-input-height-desktop)"
+  />
+</TokenTable>
+
+### Icon
+
+<TokenTable>
+  <TokenRow token="--fs-search-input-icon-width" value="var(--fs-spacing-4)" />
+  <TokenRow
+    token="--fs-search-input-icon-height"
+    value="var(--fs-search-input-icon-width)"
+  />
+  <TokenRow
+    isColor
+    token="--fs-search-input-icon-color"
+    value="var(--fs-color-neutral-7)"
+  />
+</TokenTable>
+
+### Dropdown
+
+<TokenTable>
+  <TokenRow
+    token="--fs-search-input-dropdown-padding"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    isColor
+    token="--fs-search-input-dropdown-bkg-color"
+    value="var(--fs-color-neutral-0)"
+  />
+  <TokenRow
+    token="--fs-search-input-dropdown-box-shadow"
+    value="var(--fs-shadow)"
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-search-input-dropdown-width-mobile" value="100vw" />
+  <TokenRow token="--fs-search-input-dropdown-width-desktop" value="100%" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-search-input-dropdown-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    isColor
+    token="--fs-search-input-dropdown-border-color"
+    value="var(--fs-border-color)"
+  />
+  <TokenRow
+    token="--fs-search-input-dropdown-border-radius"
+    value="0 0 var(--fs-border-radius) var(--fs-border-radius)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-search-input-dropdown-position-left-mobile"
+    value="calc(-1 * var(--fs-control-tap-size))"
+  />
+  <TokenRow
+    token="--fs-search-input-dropdown-position-left-tablet"
+    value="calc(var(--fs-search-input-dropdown-position-left-mobile) - var(--fs-spacing-1))"
+  />
+  <TokenRow
+    token="--fs-search-input-dropdown-position-top-tablet"
+    value="calc(var(--fs-control-tap-size) + var(--fs-spacing-2) + var(--fs-border-width))"
+  />
+  <TokenRow
+    token="--fs-search-input-dropdown-position-top-mobile"
+    value="calc(var(--fs-search-input-dropdown-position-top-tablet) + 1px)"
+  />
+  <TokenRow
+    token="--fs-search-input-dropdown-position-top-desktop"
+    value="var(--fs-search-input-height-desktop)"
+  />
+</TokenTable>