@faststore/core 2.0.85-alpha.0 → 2.0.88-alpha.0

package/.turbo/turbo-build.log

@@ -17,33 +17,32 @@ info  - Generating static pages (0/13)
 info  - Generating static pages (3/13)
 info  - Generating static pages (6/13)
 info  - Generating static pages (9/13)
-warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 info  - Generating static pages (13/13)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      2.83 kB         127 kB
 ├   └ css/43d61b402f41569b.css             1.84 kB
-├   /_app                                  0 B             100 kB
-├ ● /[...slug]                             6.82 kB         131 kB
+├   /_app                                  0 B             105 kB
+├ ● /[...slug]                             9.99 kB         131 kB
 ├   └ css/430b8cafbf7c23c1.css             2.53 kB
-├ ● /[slug]/p                              11.7 kB         136 kB
-├   └ css/9e7c9877b9f78c63.css             3.87 kB
-├ ○ /404                                   431 B           106 kB
-├ ○ /500                                   439 B           106 kB
-├ ○ /account                               369 B           106 kB
-├ λ /api/graphql                           0 B             100 kB
-├ λ /api/preview                           0 B             100 kB
-├ ○ /checkout                              371 B           106 kB
-├ ○ /login                                 368 B           106 kB
-└ ○ /s                                     6.14 kB         122 kB
+├ ● /[slug]/p                              11.5 kB         135 kB
+├   └ css/a3aac8b785a9dfe2.css             3.22 kB
+├ ○ /404                                   431 B           110 kB
+├ ○ /500                                   439 B           110 kB
+├ ○ /account                               369 B           110 kB
+├ λ /api/graphql                           0 B             105 kB
+├ λ /api/preview                           0 B             105 kB
+├ ○ /checkout                              371 B           110 kB
+├ ○ /login                                 368 B           110 kB
+└ ○ /s                                     895 B           121 kB
     └ css/9dd1d1084d254c66.css             2.33 kB
-+ First Load JS shared by all              121 kB
++ First Load JS shared by all              125 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-0effc9759a3900cf.js  29.1 kB
-  ├ chunks/webpack-dbb0d4f8be2c2abe.js     2.2 kB
-  └ css/2caa85943bafc7b1.css               20.4 kB
+  ├ chunks/pages/_app-256a3d53cde1dece.js  33.2 kB
+  ├ chunks/webpack-432485347f98ee3c.js     2.18 kB
+  └ css/4ac2b0d468ca74dc.css               20.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.88-alpha.0](https://github.com/vtex/faststore/compare/v2.0.87-alpha.0...v2.0.88-alpha.0) (2023-03-29)
+
+### Features
+
+- Adds `SearchInput`, `SearchInputField` and `SearchDropdown` components ([#1676](https://github.com/vtex/faststore/issues/1676)) ([edba839](https://github.com/vtex/faststore/commit/edba8399a27f183f2092086b3c9d69cf5c1e8f52))
+
+## [2.0.87-alpha.0](https://github.com/vtex/faststore/compare/v2.0.86-alpha.0...v2.0.87-alpha.0) (2023-03-24)
+
+### Features
+
+- Adds `SkuSelector` component ([#1677](https://github.com/vtex/faststore/issues/1677)) ([696a14e](https://github.com/vtex/faststore/commit/696a14e6d9633ececcd2818e4a32b32ce8ad2e2b))
+
 ## [2.0.85-alpha.0](https://github.com/vtex/faststore/compare/v2.0.84-alpha.0...v2.0.85-alpha.0) (2023-03-22)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.85-alpha.0",
+  "version": "2.0.88-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.85-alpha.0",
+    "@faststore/components": "^2.0.88-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.85-alpha.0",
+    "@faststore/ui": "^2.0.88-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "24590eae428eae6be0b7c43cbec9fe236270794e"
+  "gitHead": "a9aa7a6572c08e0bd26e384bb66464e633f1ad84"
 }

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

@@ -72,7 +72,7 @@
     }
   }
 
-  [data-fs-search-input-wrapper] {
+  [data-fs-search-input] {
     flex: 1 0 100%;
     order: 2;
 
@@ -125,7 +125,7 @@
       }
     }
 
-    [data-fs-search-input-wrapper] {
+    [data-fs-search-input] {
       display: none;
       transition: flex var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
 
@@ -136,7 +136,7 @@
         order: 0;
         width: min-content;
 
-        &[data-fs-search-input-dropdown-visible="false"] [data-fs-search-input] {
+        &[data-fs-search-input-dropdown-visible="false"] [data-fs-search-input-field-input] {
           width: 0;
           padding: 0;
           border-width: 0;
@@ -162,12 +162,12 @@
     &[data-fs-navbar-search-expanded="true"] {
       width: 100%;
 
-      [data-fs-search-input-wrapper] {
+      [data-fs-search-input] {
         flex: 1 1;
         margin-right: var(--fs-navbar-search-expanded-input-wrapper-margin-right);
         margin-left: var(--fs-navbar-search-expanded-input-wrapper-margin-left);
 
-        [data-fs-search-input] {
+        [data-fs-search-input-field] [data-fs-search-input-field-input] {
           width: var(--fs-navbar-search-expanded-input-width);
           padding: var(--fs-spacing-2);
         }
@@ -186,6 +186,7 @@
 
   [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/regionalization/RegionalizationBar/regionalization-bar.module.scss

@@ -37,6 +37,10 @@
     background-color: var(--fs-regionalization-bar-bkg-color);
     border-bottom: var(--fs-regionalization-bar-border-bottom-width) solid var(--fs-regionalization-bar-border-bottom-color);
     border-radius: 0;
+
+    > span {
+      display: contents;
+    }
   }
 
   [data-fs-regionalization-bar-cta] {

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

@@ -1,43 +1,54 @@
-import type { SearchSuggestionsProps } from 'src/components/search/SearchSuggestions'
-import SearchSuggestions from 'src/components/search/SearchSuggestions'
-import useSuggestions from 'src/sdk/search/useSuggestions'
+import {
+  SearchAutoComplete as UISearchAutoComplete,
+  SearchAutoCompleteTerm as UISearchAutoCompleteTerm,
+  SearchDropdown as UISearchDropdown,
+  SearchProducts,
+  useSearch,
+} from '@faststore/ui'
 
 import { SearchHistory } from '../SearchHistory'
 import { SearchTop } from '../SearchTop'
 
-export type SearchDropdownProps = SearchSuggestionsProps
+import SearchProductItem from 'src/components/search/SearchProductItem'
+import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
+import { ProductSummary_ProductFragment } from '@generated/graphql'
 
-function SearchDropdown({
-  term = '',
-  style,
-  ...otherProps
-}: SearchDropdownProps) {
-  const { terms, products, isLoading } = useSuggestions(term)
-
-  if (term.length === 0 && !isLoading) {
-    return (
-      <>
-        <SearchHistory data-fs-search-section />
-        <SearchTop data-fs-search-section />
-      </>
-    )
-  }
-
-  if (isLoading) {
-    return <p data-fs-search-input-loading-text>Loading...</p>
-  }
-
-  if (terms.length === 0 && products.length === 0) {
-    return null
-  }
+function SearchDropdown({ ...otherProps }) {
+  const {
+    values: { onSearchSelection, products, term, terms },
+  } = useSearch()
 
   return (
-    <SearchSuggestions
-      term={term}
-      terms={terms}
-      products={products}
-      {...otherProps}
-    />
+    <UISearchDropdown {...otherProps}>
+      <SearchHistory />
+      <SearchTop />
+      <UISearchAutoComplete>
+        {terms?.map(({ value: suggestion }) => (
+          <UISearchAutoCompleteTerm
+            key={suggestion}
+            term={term}
+            suggestion={suggestion}
+            linkProps={{
+              href: formatSearchPath(suggestion),
+              onClick: () =>
+                onSearchSelection?.(suggestion, formatSearchPath(suggestion)),
+            }}
+          />
+        ))}
+      </UISearchAutoComplete>
+      <SearchProducts>
+        {products.map((product, index) => {
+          const productParsed = product as ProductSummary_ProductFragment
+          return (
+            <SearchProductItem
+              key={productParsed.id}
+              product={productParsed}
+              index={index}
+            />
+          )
+        })}
+      </SearchProducts>
+    </UISearchDropdown>
   )
 }
 

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

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

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

@@ -1,12 +1,14 @@
 import {
   SearchHistory as UISearchHistory,
   SearchHistoryTerm as UISearchHistoryTerm,
+  useSearch,
 } from '@faststore/ui'
 import useSearchHistory from 'src/sdk/search/useSearchHistory'
-import useSearchInput from 'src/sdk/search/useSearchInput'
 
 const SearchHistory = ({ ...props }) => {
-  const { onSearchInputSelection } = useSearchInput()
+  const {
+    values: { onSearchSelection },
+  } = useSearch()
   const { searchHistory, clearSearchHistory } = useSearchHistory()
 
   if (!searchHistory.length) {
@@ -21,7 +23,7 @@ const SearchHistory = ({ ...props }) => {
           value={item.term}
           linkProps={{
             href: item.path,
-            onClick: () => onSearchInputSelection?.(item.term, item.path),
+            onClick: () => onSearchSelection?.(item.term, item.path),
           }}
         />
       ))}

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

@@ -11,23 +11,20 @@ import type { CSSProperties } from 'react'
 import { useRouter } from 'next/router'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import type { SearchEvent } from '@faststore/sdk'
-import { SearchInput as UISearchInput } from '@faststore/ui'
+import {
+  SearchInputField as UISearchInputField,
+  SearchInput as UISearchInput,
+  SearchProviderContextValue,
+} from '@faststore/ui'
 import type {
-  SearchInputProps as UISearchInputProps,
-  SearchInputRef as UISearchInputRef,
+  SearchInputFieldProps as UISearchInputFieldProps,
+  SearchInputFieldRef as UISearchInputFieldRef,
 } from '@faststore/ui'
 
-import Icon from 'src/components/ui/Icon'
 import useSearchHistory from 'src/sdk/search/useSearchHistory'
-import {
-  formatSearchPath,
-  SearchInputProvider,
-} from 'src/sdk/search/useSearchInput'
-import type { SearchInputContextValue } from 'src/sdk/search/useSearchInput'
+import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 import useOnClickOutside from 'src/sdk/ui/useOnClickOutside'
-
-import inputStyles from './search-input.module.scss'
-import styles from '../search.module.scss'
+import useSuggestions from 'src/sdk/search/useSuggestions'
 
 const SearchDropdown = lazy(
   () => import('src/components/search/SearchDropdown')
@@ -37,9 +34,11 @@ export type SearchInputProps = {
   onSearchClick?: () => void
   buttonTestId?: string
   containerStyle?: CSSProperties
-} & Omit<UISearchInputProps, 'onSubmit'>
+} & Omit<UISearchInputFieldProps, 'onSubmit'>
 
-export type SearchInputRef = UISearchInputRef & { resetSearchInput: () => void }
+export type SearchInputRef = UISearchInputFieldRef & {
+  resetSearchInput: () => void
+}
 
 const sendAnalytics = async (term: string) => {
   sendAnalyticsEvent<SearchEvent>({
@@ -52,7 +51,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
   function SearchInput(
     {
       onSearchClick,
-      buttonTestId = 'store-search-button',
+      buttonTestId = 'fs-search-button',
       containerStyle,
       ...otherProps
     },
@@ -71,60 +70,55 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       resetSearchInput: () => setSearchQuery(''),
     }))
 
-    const onSearchInputSelection: SearchInputContextValue['onSearchInputSelection'] =
-      (term, path) => {
-        addToSearchHistory({ term, path })
-        sendAnalytics(term)
-        setSearchDropdownVisible(false)
-        setSearchQuery(term)
-      }
+    const onSearchSelection: SearchProviderContextValue['onSearchSelection'] = (
+      term,
+      path
+    ) => {
+      addToSearchHistory({ term, path })
+      sendAnalytics(term)
+      setSearchDropdownVisible(false)
+      setSearchQuery(term)
+    }
 
     useOnClickOutside(searchRef, () => setSearchDropdownVisible(false))
 
+    const { terms, products, isLoading } = useSuggestions(searchQueryDeferred)
+
     return (
-      <div
+      <UISearchInput
         ref={searchRef}
-        data-fs-search-input-wrapper
-        className={inputStyles.fsSearchInput}
-        data-fs-search-input-dropdown-visible={searchDropdownVisible}
-        style={containerStyle}
+        visibleDropdown={searchDropdownVisible}
+        onSearchSelection={onSearchSelection}
+        term={searchQueryDeferred}
+        terms={terms}
+        products={products}
+        isLoading={isLoading}
       >
-        <SearchInputProvider onSearchInputSelection={onSearchInputSelection}>
-          <UISearchInput
-            data-fs-search-input
-            ref={ref}
-            icon={
-              <Icon
-                name="MagnifyingGlass"
-                onClick={onSearchClick}
-                data-testid={buttonTestId}
-              />
-            }
-            placeholder="Search everything at the store"
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onSubmit={(term) => {
-              const path = formatSearchPath(term)
+        <UISearchInputField
+          ref={ref}
+          buttonProps={{
+            onClick: onSearchClick,
+            testId: buttonTestId,
+          }}
+          placeholder="Search everything at the store"
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onSubmit={(term) => {
+            const path = formatSearchPath(term)
 
-              onSearchInputSelection(term, path)
-              router.push(path)
-            }}
-            onFocus={() => setSearchDropdownVisible(true)}
-            value={searchQuery}
-            {...otherProps}
-          />
+            onSearchSelection(term, path)
+            router.push(path)
+          }}
+          onFocus={() => setSearchDropdownVisible(true)}
+          value={searchQuery}
+          {...otherProps}
+        />
 
-          {searchDropdownVisible && (
-            <Suspense fallback={null}>
-              <div
-                data-fs-search-input-dropdown-wrapper
-                className={styles.fsSearch}
-              >
-                <SearchDropdown term={searchQueryDeferred} />
-              </div>
-            </Suspense>
-          )}
-        </SearchInputProvider>
-      </div>
+        {searchDropdownVisible && (
+          <Suspense fallback={null}>
+            <SearchDropdown />
+          </Suspense>
+        )}
+      </UISearchInput>
     )
   }
 )

package/src/components/search/SearchProductItem/SearchProductItem.tsx

@@ -2,12 +2,12 @@ import {
   SearchProductItem as UISearchProductItem,
   SearchProductItemContent as UISearchProductItemContent,
   SearchProductItemImage as UISearchProductItemImage,
+  useSearch,
 } from '@faststore/ui'
 
 import { Image } from 'src/components/ui/Image'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
-import useSearchInput from 'src/sdk/search/useSearchInput'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 
 type SearchProductItemProps = {
@@ -26,7 +26,9 @@ function SearchProductItem({
   index,
   ...otherProps
 }: SearchProductItemProps) {
-  const { onSearchInputSelection } = useSearchInput()
+  const {
+    values: { onSearchSelection },
+  } = useSearch()
 
   const { href, onClick, ...baseLinkProps } = useProductLink({
     product,
@@ -47,7 +49,7 @@ function SearchProductItem({
     href,
     onClick: () => {
       onClick()
-      onSearchInputSelection?.(name, href)
+      onSearchSelection?.(name, href)
     },
     ...baseLinkProps,
   }

package/src/components/search/SearchTop/SearchTop.tsx

@@ -1,11 +1,12 @@
 import {
   SearchTop as UISearchTop,
   SearchTopTerm as UISearchTopTerm,
+  useSearch,
 } from '@faststore/ui'
 import type { HTMLAttributes } from 'react'
 
 import type { StoreSuggestionTerm } from '@generated/graphql'
-import useSearchInput, { formatSearchPath } from 'src/sdk/search/useSearchInput'
+import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 import useTopSearch from 'src/sdk/search/useTopSearch'
 
 export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
@@ -16,15 +17,17 @@ export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 function SearchTop({ topTerms, ...otherProps }: SearchTopProps) {
-  const { onSearchInputSelection } = useSearchInput()
-  const { terms, isLoading } = useTopSearch(topTerms)
+  const {
+    values: { onSearchSelection },
+  } = useSearch()
+  const { terms } = useTopSearch(topTerms)
 
   if (terms.length === 0) {
     return null
   }
 
   return (
-    <UISearchTop title="Top Search" isLoading={isLoading} {...otherProps}>
+    <UISearchTop title="Top Search" {...otherProps}>
       {terms.map((term, index) => (
         <UISearchTopTerm
           key={index}
@@ -33,10 +36,7 @@ function SearchTop({ topTerms, ...otherProps }: SearchTopProps) {
           linkProps={{
             href: formatSearchPath(term.value),
             onClick: () =>
-              onSearchInputSelection?.(
-                term.value,
-                formatSearchPath(term.value)
-              ),
+              onSearchSelection?.(term.value, formatSearchPath(term.value)),
           }}
         />
       ))}

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -170,10 +170,12 @@ function ProductDetails({ context: staleProduct }: Props) {
             </section>
             {skuVariants && (
               <Selectors
-                slugsMap={skuVariants.slugsMap}
-                availableVariations={skuVariants.availableVariations}
-                activeVariations={skuVariants.activeVariations}
                 data-fs-product-details-selectors
+                slugsMap={isVariantOf.skuVariants.slugsMap}
+                activeVariations={isVariantOf.skuVariants.activeVariations}
+                availableVariations={
+                  isVariantOf.skuVariants.availableVariations
+                }
               />
             )}
             {/* NOTE: A loading skeleton had to be used to avoid a Lighthouse's
@@ -284,8 +286,8 @@ export const fragment = gql`
       productGroupID
       skuVariants {
         activeVariations
-        slugsMap(dominantVariantName: "Color")
-        availableVariations(dominantVariantName: "Color")
+        slugsMap
+        availableVariations
       }
     }
 

package/src/components/sections/ProductDetails/product-details.module.scss

@@ -38,11 +38,6 @@
   [data-fs-product-details-section] {
     height: fit-content;
 
-    [data-fs-sku-selector] {
-      margin-bottom: var(--fs-product-details-vertical-spacing);
-      &:last-of-type { margin-bottom: var(--fs-spacing-7); }
-    }
-
     [data-fs-buy-button] {
       width: 100%;
       margin-top: var(--fs-spacing-3);

package/src/components/ui/SkuSelector/Selectors.stories.mdx

@@ -39,12 +39,16 @@ The code snippet below is an example of what `Selectors` props should look like,
     ]}
   >
     <Selectors
-      activeVariations={{ Size: '41', Color: 'White' }}
+      activeVariations={{
+        Color: 'White',
+        Size: '42',
+      }}
       slugsMap={{
         'Color-Pink-Size-42': 'classic-shoes-37',
         'Color-White-Size-42': 'classic-shoes-36',
         'Color-White-Size-41': 'classic-shoes-310124175',
       }}
+      dominantVariation: 'Color'
       availableVariations={{
         Size: [
           {