@faststore/core 2.0.74-alpha.0 → 2.0.76-alpha.0

package/.turbo/turbo-build.log

@@ -40,9 +40,9 @@ Route (pages)                              Size     First Load JS
 + First Load JS shared by all              120 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-286bcfa03a5e17a7.js  28.9 kB
-  ├ chunks/webpack-8f397ae160440a8e.js     2.23 kB
-  └ css/d78f4c5305f398ac.css               19.5 kB
+  ├ chunks/pages/_app-9cc7312632f19e94.js  28.9 kB
+  ├ chunks/webpack-499a79772d3ef1c5.js     2.22 kB
+  └ css/14ebc84fc6d6c80c.css               19.9 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.76-alpha.0](https://github.com/vtex/faststore/compare/v2.0.75-alpha.0...v2.0.76-alpha.0) (2023-03-15)
+
+### Bug Fixes
+
+- Adds missing test id ([#1666](https://github.com/vtex/faststore/issues/1666)) ([470584d](https://github.com/vtex/faststore/commit/470584d7a7213742bc7d9fbcf9e52e28c6595676)), closes [/github.com/vtex/faststore/pull/1649/files#diff-bc55adb273e27dfb220da8699e7463fac6bc3e1292439e1fa7530e09e9a6d009](https://github.com/vtex//github.com/vtex/faststore/pull/1649/files/issues/diff-bc55adb273e27dfb220da8699e7463fac6bc3e1292439e1fa7530e09e9a6d009)
+
+## [2.0.75-alpha.0](https://github.com/vtex/faststore/compare/v2.0.74-alpha.0...v2.0.75-alpha.0) (2023-03-15)
+
+### Features
+
+- Add `SearchSuggestions` components ([#1654](https://github.com/vtex/faststore/issues/1654)) ([5dc8077](https://github.com/vtex/faststore/commit/5dc8077421267af882d22e85ddbbb8eacf807690))
+
 ## 2.0.74-alpha.0 (2023-03-15)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.74-alpha.0",
+  "version": "2.0.76-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,10 +30,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.3-alpha.0",
-    "@faststore/components": "^2.0.74-alpha.0",
+    "@faststore/components": "^2.0.75-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.74-alpha.0",
+    "@faststore/ui": "^2.0.75-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -107,5 +107,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "0d1dd82a4d5517290ae8eaf6be7abb79aa8ff841"
+  "gitHead": "40b59fd76d0d908980ff4d4b655a858dc3c61a59"
 }

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -72,7 +72,11 @@ function CartSidebar() {
       className={styles.fsCartSidebar}
       onTransitionEnd={() => fade === 'out' && closeCart()}
     >
-      <UISlideOverHeader closeBtnProps={closeBtnProps} onClose={fadeOut}>
+      <UISlideOverHeader
+        closeBtnProps={closeBtnProps}
+        onClose={fadeOut}
+        data-testid="cart-sidebar"
+      >
         <div data-fs-cart-sidebar-title>
           <p data-fs-cart-sidebar-title-text className="text__lead">
             Your Cart

package/src/components/common/Navbar/navbar.module.scss

@@ -186,7 +186,6 @@
 
   [data-fs-navbar-header] {
     padding: var(--fs-navbar-header-padding);
-    overflow-x: clip;
     background-color: var(--fs-navbar-bkg-color);
     backdrop-filter: blur(10px);
   }

package/src/components/search/SearchInput/SearchInput.tsx

@@ -26,7 +26,8 @@ import {
 import type { SearchInputContextValue } from 'src/sdk/search/useSearchInput'
 import useOnClickOutside from 'src/sdk/ui/useOnClickOutside'
 
-import styles from './search-input.module.scss'
+import inputStyles from './search-input.module.scss'
+import styles from '../search.module.scss'
 
 const SearchDropdown = lazy(
   () => import('src/components/search/SearchDropdown')
@@ -84,7 +85,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       <div
         ref={searchRef}
         data-fs-search-input-wrapper
-        className={styles.fsSearchInput}
+        className={inputStyles.fsSearchInput}
         data-fs-search-input-dropdown-visible={searchDropdownVisible}
         style={containerStyle}
       >
@@ -114,7 +115,10 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
 
           {searchDropdownVisible && (
             <Suspense fallback={null}>
-              <div data-fs-search-input-dropdown-wrapper>
+              <div
+                data-fs-search-input-dropdown-wrapper
+                className={styles.fsSearch}
+              >
                 <SearchDropdown term={searchQueryDeferred} />
               </div>
             </Suspense>

package/src/components/search/SearchInput/search-input.module.scss

@@ -134,13 +134,5 @@
     }
 
     [data-fs-search-input-loading-text] { padding: var(--fs-spacing-3); }
-
-    [data-fs-search-section] {
-      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
-
-      &:last-child {
-        border-bottom-width: 0;
-      }
-    }
   }
 }

package/src/components/search/{SearchProductCard/SearchProductCard.tsx → SearchProductItem/SearchProductItem.tsx}

@@ -1,7 +1,7 @@
 import {
-  SearchProductCard as UISearchProductCard,
-  SearchProductCardContent as UISearchProductCardContent,
-  SearchProductCardImage as UISearchProductCardImage,
+  SearchProductItem as UISearchProductItem,
+  SearchProductItemContent as UISearchProductItemContent,
+  SearchProductItemImage as UISearchProductItemImage,
 } from '@faststore/ui'
 
 import { Image } from 'src/components/ui/Image'
@@ -10,9 +10,9 @@ import { useProductLink } from 'src/sdk/product/useProductLink'
 import useSearchInput from 'src/sdk/search/useSearchInput'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 
-type SearchProductCardProps = {
+type SearchProductItemProps = {
   /**
-   * Product to be showed in `SearchProductCard`.
+   * Product to be showed in `SearchProductItem`.
    */
   product: ProductSummary_ProductFragment
   /**
@@ -21,13 +21,14 @@ type SearchProductCardProps = {
   index: number
 }
 
-function SearchProductCard({
+function SearchProductItem({
   product,
   index,
   ...otherProps
-}: SearchProductCardProps) {
+}: SearchProductItemProps) {
   const { onSearchInputSelection } = useSearchInput()
-  const linkProps = useProductLink({
+
+  const { href, onClick, ...baseLinkProps } = useProductLink({
     product,
     selectedOffer: 0,
     index,
@@ -42,28 +43,30 @@ function SearchProductCard({
     },
   } = product
 
+  const linkProps = {
+    href,
+    onClick: () => {
+      onClick()
+      onSearchInputSelection?.(name, href)
+    },
+    ...baseLinkProps,
+  }
+
   return (
-    <UISearchProductCard
-      linkProps={linkProps}
-      onLinkClick={() => {
-        linkProps.onClick
-        onSearchInputSelection?.(name, linkProps.href)
-      }}
-      {...otherProps}
-    >
-      <UISearchProductCardImage>
+    <UISearchProductItem linkProps={linkProps} {...otherProps}>
+      <UISearchProductItemImage>
         <Image src={img.url} alt={img.alternateName} width={56} height={56} />
-      </UISearchProductCardImage>
-      <UISearchProductCardContent
+      </UISearchProductItemImage>
+      <UISearchProductItemContent
         title={name}
         price={{
           value: spotPrice,
           listPrice: listPrice,
           formatter: useFormattedPrice,
         }}
-      ></UISearchProductCardContent>
-    </UISearchProductCard>
+      ></UISearchProductItemContent>
+    </UISearchProductItem>
   )
 }
 
-export default SearchProductCard
+export default SearchProductItem

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

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

package/src/components/search/SearchSuggestions/SearchSuggestions.tsx

@@ -1,58 +1,16 @@
-import { List as UIList } from '@faststore/ui'
+import {
+  SearchAutoComplete as UISearchAutoComplete,
+  SearchAutoCompleteTerm as UISearchAutoCompleteTerm,
+  SearchProducts,
+} from '@faststore/ui'
 import type { HTMLAttributes } from 'react'
-import { Fragment } from 'react'
 
-import SearchProductCard from 'src/components/search/SearchProductCard'
-import Icon from 'src/components/ui/Icon'
-import Link from 'src/components/ui/Link'
+import SearchProductItem from 'src/components/search/SearchProductItem'
 import useSearchInput, { formatSearchPath } from 'src/sdk/search/useSearchInput'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 
 import styles from '../search.module.scss'
 
-function formatSearchTerm(
-  indexSubstring: number,
-  searchTerm: string,
-  suggestion: string
-) {
-  if (indexSubstring === 0) {
-    return searchTerm
-      .split('')
-      .map((char, idx) =>
-        idx === 0 && suggestion.indexOf(char.toUpperCase()) === 0
-          ? char.toUpperCase()
-          : char.toLowerCase()
-      )
-      .join('')
-  }
-
-  return searchTerm.toLowerCase()
-}
-
-function handleSuggestions(suggestion: string, searchTerm: string) {
-  const suggestionSubstring = suggestion
-    .toLowerCase()
-    .split(searchTerm.toLowerCase())
-
-  return (
-    <p>
-      {suggestionSubstring.map((substring, indexSubstring) => (
-        <Fragment key={[substring, indexSubstring].join()}>
-          {substring.length > 0 && (
-            <b data-fs-search-item-bold>
-              {indexSubstring === 0
-                ? substring.charAt(0).toUpperCase() + substring.slice(1)
-                : substring}
-            </b>
-          )}
-          {indexSubstring !== suggestionSubstring.length - 1 &&
-            formatSearchTerm(indexSubstring, searchTerm, suggestion)}
-        </Fragment>
-      ))}
-    </p>
-  )
-}
-
 export interface SearchSuggestionsProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
@@ -89,45 +47,35 @@ function SearchSuggestions({
       {...otherProps}
     >
       {terms.length > 0 && (
-        <UIList data-fs-search-section="terms">
+        <UISearchAutoComplete data-fs-search-section>
           {terms?.map(({ value: suggestion }) => (
-            <li key={suggestion} data-fs-search-item>
-              <Link
-                data-fs-search-item-link
-                href={formatSearchPath(suggestion)}
-                onClick={() => {
+            <UISearchAutoCompleteTerm
+              key={suggestion}
+              term={term}
+              suggestion={suggestion}
+              linkProps={{
+                href: formatSearchPath(suggestion),
+                onClick: () =>
                   onSearchInputSelection?.(
                     suggestion,
                     formatSearchPath(suggestion)
-                  )
-                }}
-              >
-                <Icon
-                  name="MagnifyingGlass"
-                  width={18}
-                  height={18}
-                  data-fs-search-item-icon
-                />
-                {handleSuggestions(suggestion, term)}
-              </Link>
-            </li>
+                  ),
+              }}
+            />
           ))}
-        </UIList>
+        </UISearchAutoComplete>
       )}
 
       {products.length > 0 && (
-        <div data-fs-search-section>
-          <div data-fs-search-header>
-            <p data-fs-search-title>Suggested Products</p>
-          </div>
-          <UIList>
-            {products.map((product, index) => (
-              <li key={product.id} data-fs-search-item>
-                <SearchProductCard product={product} index={index} />
-              </li>
-            ))}
-          </UIList>
-        </div>
+        <SearchProducts data-fs-search-section>
+          {products.map((product, index) => (
+            <SearchProductItem
+              key={product.id}
+              product={product}
+              index={index}
+            />
+          ))}
+        </SearchProducts>
       )}
     </section>
   )

package/src/components/search/search.module.scss

@@ -2,89 +2,18 @@
   // --------------------------------------------------------
   // Design Tokens for Search
   // --------------------------------------------------------
-  --fs-search-min-height              : var(--fs-spacing-7);
+  --fs-search-border-bottom-width   : var(--fs-border-width);
+  --fs-search-border-bottom-color   : var(--fs-border-color-light);
 
-  // Title
-  --fs-search-title-size              : var(--fs-text-size-lead);
-  --fs-search-title-line-height       : 1.5;
-
-  // Link
-  --fs-search-item-link-color         : var(--fs-color-text-light);
-  --fs-search-item-link-padding-right : var(--fs-spacing-3);
-  --fs-search-item-link-padding-left  : var(--fs-search-item-link-padding-right);
-
-  // Item
-  --fs-search-item-text-size          : var(--fs-text-size-2);
-  --fs-search-item-line-height        : 1.25;
-  --fs-search-item-bkg-color-hover    : var(--fs-color-tertiary-bkg-hover);
-
-  // Icon
-  --fs-search-item-icon-color         : var(--fs-color-neutral-4);
-  --fs-search-item-icon-margin-right  : var(--fs-spacing-1);
-
-  // Badge
-  --fs-search-badge-margin-right      : var(--fs-spacing-1);
-
-  // Default properties
-  [data-fs-search-header] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: var(--fs-search-min-height);
-  }
-
-  [data-fs-search-title] {
-    font-size: var(--fs-search-title-size);
-    line-height: var(--fs-search-title-line-height);
-  }
-
-  [data-fs-search-item-link] {
-    color: var(--fs-search-item-link-color);
-
-    > span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  [data-fs-search-item] {
-    margin-right: calc(-1 * var(--fs-search-item-link-padding-right));
-    margin-left: calc(-1 * var(--fs-search-item-link-padding-right));
-    font-size: var(--fs-search-item-text-size);
-    line-height: var(--fs-search-item-line-height);
-
-    &:hover {
-      background-color: var(--fs-search-item-bkg-color-hover);
-    }
-
-    [data-fs-search-product-card-link], [data-fs-search-item-link] {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      padding-left: var(--fs-search-item-link-padding-left);
-    }
-
-    [data-fs-search-item-link] {
-      margin-right: var(--fs-search-item-link-padding-right);
-    }
-
-    [data-fs-search-badge] {
-      margin-right: var(--fs-search-badge-margin-right);
-    }
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
 
-    [data-fs-search-item-icon] {
-      flex-grow: 0;
-      flex-shrink: 0;
-      margin-right: var(--fs-search-item-icon-margin-right);
-      color: var(--fs-search-item-icon-color);
-    }
-  }
+  [data-fs-search-section] {
+    border-bottom: var(--fs-search-border-bottom-width) solid var(--fs-search-border-bottom-color);
 
-  [data-fs-search] {
-    [data-fs-search-item-bold] {
-      font-weight: var(--fs-text-weight-bold);
-      color: var(--fs-color-neutral-7);
+    &:last-child {
+      border-bottom-width: 0;
     }
   }
 }

package/.next/BUILD_ID

@@ -1 +0,0 @@
-M7OQ7A7JAyTrgvf0m1Ztu

package/.next/build-manifest.json

@@ -1,103 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/M7OQ7A7JAyTrgvf0m1Ztu/_buildManifest.js",
-    "static/M7OQ7A7JAyTrgvf0m1Ztu/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/260-994385416f68673d.js",
-      "static/chunks/817-728f854c2948afc0.js",
-      "static/css/43d61b402f41569b.css",
-      "static/chunks/pages/index-6717326cc207d674.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/404-ba608a2a9f0c420a.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/500-910883c20541d9ce.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/260-994385416f68673d.js",
-      "static/chunks/337-4b719ca7a86d8d8c.js",
-      "static/css/430b8cafbf7c23c1.css",
-      "static/chunks/pages/[...slug]-9443b18a60d89746.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/260-994385416f68673d.js",
-      "static/chunks/817-728f854c2948afc0.js",
-      "static/css/e63697a078fd522e.css",
-      "static/chunks/pages/[slug]/p-cb8ef12f6449cf26.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/css/d78f4c5305f398ac.css",
-      "static/chunks/pages/_app-286bcfa03a5e17a7.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/account-f19102933e6fd84c.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/checkout-f8cb7cb22225ef9d.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/login-0b9ea80d9fa0f91b.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-8f397ae160440a8e.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/153-a20e3f2da180607e.js",
-      "static/chunks/337-4b719ca7a86d8d8c.js",
-      "static/css/9dd1d1084d254c66.css",
-      "static/chunks/pages/s-86fe1e3303388123.js"
-    ]
-  },
-  "ampFirstPages": []
-}