@faststore/core 2.0.89-alpha.0 → 2.0.90-alpha.0

package/.turbo/turbo-build.log

@@ -17,6 +17,7 @@ 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...
 
@@ -24,8 +25,8 @@ Route (pages)                              Size     First Load JS
 ┌ ● /                                      2.83 kB         127 kB
 ├   └ css/43d61b402f41569b.css             1.84 kB
 ├   /_app                                  0 B             105 kB
-├ ● /[...slug]                             9.99 kB         131 kB
-├   └ css/430b8cafbf7c23c1.css             2.53 kB
+├ ● /[...slug]                             9.98 kB         131 kB
+├   └ css/8ea129ea90e49e98.css             1.83 kB
 ├ ● /[slug]/p                              11.7 kB         135 kB
 ├   └ css/59446068ab594e58.css             3 kB
 ├ ○ /404                                   431 B           110 kB
@@ -35,14 +36,14 @@ Route (pages)                              Size     First Load JS
 ├ λ /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
+└ ○ /s                                     896 B           122 kB
+    └ css/db63ea05e98cb7e8.css             1.63 kB
 + First Load JS shared by all              126 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
   ├ chunks/pages/_app-0bf8e95d55047056.js  33.2 kB
-  ├ chunks/webpack-2d6880a14598b3ec.js     2.18 kB
-  └ css/046add45db5e9cdf.css               21.1 kB
+  ├ chunks/webpack-e8365cb80353190c.js     2.18 kB
+  └ css/e848206ea71282d6.css               21.8 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,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.90-alpha.0](https://github.com/vtex/faststore/compare/v2.0.89-alpha.0...v2.0.90-alpha.0) (2023-03-29)
+
+### Features
+
+- Adds `Filter` and `FilterSlider` Components. ([#1687](https://github.com/vtex/faststore/issues/1687)) ([a18e1af](https://github.com/vtex/faststore/commit/a18e1af9fe6037f19a558f2c49e52ba01e50e95a))
+
 ## [2.0.89-alpha.0](https://github.com/vtex/faststore/compare/v2.0.88-alpha.0...v2.0.89-alpha.0) (2023-03-29)
 
 ### Features

package/cypress/integration/plp.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable cypress/no-unnecessary-waiting */
 // eslint-disable-next-line spaced-comment
 /// <reference types="cypress" />
 /**
@@ -23,11 +22,11 @@ describe('Search page Filters and Sorting options', () => {
     cy.getById('open-filter-button')
       .click()
       .get(
-        `[data-testid=mobile-store-filter-accordion][data-type=StoreFacetBoolean]>[data-testid=mobile-store-filter-accordion-button]`
+        `[data-testid=mobile-fs-filter-accordion][data-type=StoreFacetBoolean]>[data-testid=mobile-fs-filter-accordion-button]`
       )
       .first()
       .click()
-      .getById('mobile-store-filter-accordion-panel-checkbox')
+      .getById('mobile-fs-filter-accordion-panel-checkbox')
       .should('exist')
       .first()
       .click()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.89-alpha.0",
+  "version": "2.0.90-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.89-alpha.0",
+    "@faststore/components": "^2.0.90-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.89-alpha.0",
+    "@faststore/ui": "^2.0.90-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": "110810c0f5ff267980370f556fe7e9ad34e4d68a"
+  "gitHead": "8382d02bffb1fcf8c517df11221b228ecb1a38bd"
 }

package/src/components/search/Filter/Filter.tsx

@@ -1,10 +1,8 @@
 import { gql } from '@faststore/graphql-utils'
-import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
 
-import type { Filter_FacetsFragment } from '@generated/graphql'
 import { useUI } from '@faststore/ui'
-
-import Facets from './Facets'
+import type { Filter_FacetsFragment } from '@generated/graphql'
+import FilterDesktop from './FilterDesktop'
 import FilterSlider from './FilterSlider'
 import { useFilter } from './useFilter'
 
@@ -20,37 +18,19 @@ interface Props {
   testId?: string
 }
 
-function Filter({ facets: allFacets, testId = 'store-filter' }: Props) {
+function Filter({ facets: allFacets, testId = 'fs-filter' }: Props) {
   const filter = useFilter(allFacets)
-  const { resetInfiniteScroll, state, setState } = useSearch()
   const { filter: displayFilter } = useUI()
-  const { facets, expanded, dispatch } = filter
 
   return (
     <>
       <div className="hidden-mobile">
-        <Facets
-          facets={facets}
-          testId={`desktop-${testId}`}
-          indicesExpanded={expanded}
-          onFacetChange={(facet, type) => {
-            setState({
-              ...state,
-              selectedFacets:
-                type === 'BOOLEAN'
-                  ? toggleFacet(state.selectedFacets, facet)
-                  : setFacet(state.selectedFacets, facet, true),
-              page: 0,
-            })
-            resetInfiniteScroll(0)
-          }}
-          onAccordionChange={(index) =>
-            dispatch({ type: 'toggleExpanded', payload: index })
-          }
-        />
+        <FilterDesktop {...filter} testId={testId} title="Filters" />
       </div>
 
-      {displayFilter && <FilterSlider {...filter} testId={testId} />}
+      {displayFilter && (
+        <FilterSlider {...filter} testId={testId} title="Filters" />
+      )}
     </>
   )
 }

package/src/components/search/Filter/FilterDesktop.tsx

@@ -0,0 +1,109 @@
+import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
+
+import {
+  Filter as UIFilter,
+  FilterFacetBoolean as UIFilterFacetBoolean,
+  FilterFacetBooleanItem as UIFilterFacetBooleanItem,
+  FilterFacetRange as UIFilterFacetRange,
+  FilterFacets as UIFilterFacets,
+} from '@faststore/ui'
+import type { Filter_FacetsFragment } from '@generated/graphql'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import { useFilter } from './useFilter'
+
+interface Props {
+  /**
+   * The array that represents the details of every facet.
+   */
+  facets: Filter_FacetsFragment[]
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Title for the `FilterDesktop` component.
+   */
+  title?: string
+}
+
+function FilterDesktop({
+  facets,
+  testId,
+  dispatch,
+  expanded,
+  title,
+}: Props & ReturnType<typeof useFilter>) {
+  const { resetInfiniteScroll, state, setState } = useSearch()
+
+  return (
+    <UIFilter
+      testId={`desktop-${testId}`}
+      title={title}
+      indicesExpanded={expanded}
+      onAccordionChange={(idx) =>
+        dispatch({ type: 'toggleExpanded', payload: idx })
+      }
+    >
+      {facets.map((facet, index) => {
+        const { __typename: type, label } = facet
+        const isExpanded = expanded.has(index)
+        return (
+          <UIFilterFacets
+            key={`${testId}-${label}-${index}`}
+            testId={testId}
+            index={index}
+            type={type}
+            label={label}
+          >
+            {type === 'StoreFacetBoolean' && isExpanded && (
+              <UIFilterFacetBoolean>
+                {facet.values.map((item) => (
+                  <UIFilterFacetBooleanItem
+                    key={`${testId}-${facet.label}-${item.label}`}
+                    id={`${testId}-${facet.label}-${item.label}`}
+                    testId={testId}
+                    onFacetChange={(facet) => {
+                      setState({
+                        ...state,
+                        selectedFacets: toggleFacet(
+                          state.selectedFacets,
+                          facet
+                        ),
+                        page: 0,
+                      })
+                      resetInfiniteScroll(0)
+                    }}
+                    selected={item.selected}
+                    value={item.value}
+                    quantity={item.quantity}
+                    facetKey={facet.key}
+                    label={item.label}
+                  />
+                ))}
+              </UIFilterFacetBoolean>
+            )}
+            {type === 'StoreFacetRange' && isExpanded && (
+              <UIFilterFacetRange
+                facetKey={facet.key}
+                min={facet.min}
+                max={facet.max}
+                formatter={useFormattedPrice}
+                onFacetChange={(facet) => {
+                  setState({
+                    ...state,
+                    selectedFacets: setFacet(state.selectedFacets, facet, true),
+                    page: 0,
+                  })
+                  resetInfiniteScroll(0)
+                }}
+              />
+            )}
+          </UIFilterFacets>
+        )
+      })}
+    </UIFilter>
+  )
+}
+
+export default FilterDesktop

package/src/components/search/Filter/FilterSlider.tsx

@@ -1,28 +1,32 @@
 import { useSearch } from '@faststore/sdk'
 import {
-  Button as UIButton,
-  SlideOver as UISlideOver,
-  SlideOverHeader as UISlideOverHeader,
+  Filter as UIFilter,
+  FilterFacetBoolean as UIFilterFacetBoolean,
+  FilterFacetBooleanItem as UIFilterFacetBooleanItem,
+  FilterFacetRange as UIFilterFacetRange,
+  FilterFacets as UIFilterFacets,
+  FilterSlider as UIFilterSlider,
 } from '@faststore/ui'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 
 import type { Filter_FacetsFragment } from '@generated/graphql'
-import { useUI } from '@faststore/ui'
-import { useFadeEffect } from '@faststore/ui'
 
-import Facets from './Facets'
-import styles from './filter-slider.module.scss'
 import type { useFilter } from './useFilter'
 
 interface Props {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
   /**
    * The array that represents the details of every facet.
    */
   facets: Filter_FacetsFragment[]
   /**
-   * ID to find this component in testing tools (e.g.: cypress,
-   * testing-library, and jest).
+   * Title for the `Filter` component.
    */
-  testId?: string
+  title?: string
 }
 
 function FilterSlider({
@@ -31,76 +35,96 @@ function FilterSlider({
   dispatch,
   expanded,
   selected,
+  title,
 }: Props & ReturnType<typeof useFilter>) {
-  const { closeFilter } = useUI()
-  const { fade, fadeOut } = useFadeEffect()
-
   const { resetInfiniteScroll, setState, state } = useSearch()
 
   return (
-    <UISlideOver
-      isOpen
-      fade={fade}
-      onDismiss={fadeOut}
+    <UIFilterSlider
+      title={title}
       size="partial"
       direction="rightSide"
-      className={styles.fsFilterSlider}
-      onTransitionEnd={() => fade === 'out' && closeFilter()}
-    >
-      <div data-fs-filter-slider-content>
-        <UISlideOverHeader
-          onClose={() => {
-            dispatch({
-              type: 'selectFacets',
-              payload: state.selectedFacets,
-            })
-
-            fadeOut()
-          }}
-        >
-          <h2 className="text__lead">Filters</h2>
-        </UISlideOverHeader>
-        <Facets
-          facets={facets}
-          testId={`mobile-${testId}`}
-          indicesExpanded={expanded}
-          onFacetChange={(facet, type) =>
-            type === 'BOOLEAN'
-              ? dispatch({ type: 'toggleFacet', payload: facet })
-              : dispatch({ type: 'setFacet', payload: { facet, unique: true } })
-          }
-          onAccordionChange={(index) =>
-            dispatch({ type: 'toggleExpanded', payload: index })
-          }
-        />
-      </div>
-      <footer data-fs-filter-slider-footer>
-        <UIButton
-          data-fs-filter-slider-footer-button-clear
-          variant="secondary"
-          onClick={() => dispatch({ type: 'selectFacets', payload: [] })}
-        >
-          Clear All
-        </UIButton>
-        <UIButton
-          data-fs-filter-slider-footer-button-apply
-          variant="primary"
-          data-testid="filter-slider-button-apply"
-          onClick={() => {
-            resetInfiniteScroll(0)
+      clearBtnProps={{
+        variant: 'secondary',
+        onClick: () => dispatch({ type: 'selectFacets', payload: [] }),
+        children: 'Clear All',
+      }}
+      applyBtnProps={{
+        variant: 'primary',
+        onClick: () => {
+          resetInfiniteScroll(0)
 
-            setState({
-              ...state,
-              selectedFacets: selected,
-              page: 0,
-            })
-            fadeOut()
-          }}
-        >
-          Apply
-        </UIButton>
-      </footer>
-    </UISlideOver>
+          setState({
+            ...state,
+            selectedFacets: selected,
+            page: 0,
+          })
+        },
+        children: 'Apply',
+      }}
+      onClose={() => {
+        dispatch({
+          type: 'selectFacets',
+          payload: state.selectedFacets,
+        })
+      }}
+    >
+      <UIFilter
+        testId={`mobile-${testId}`}
+        indicesExpanded={expanded}
+        onAccordionChange={(index) =>
+          dispatch({ type: 'toggleExpanded', payload: index })
+        }
+      >
+        {facets.map((facet, index) => {
+          const { __typename: type, label } = facet
+          const isExpanded = expanded.has(index)
+          return (
+            <UIFilterFacets
+              key={`${testId}-${label}-${index}`}
+              testId={testId}
+              index={index}
+              type={type}
+              label={label}
+            >
+              {type === 'StoreFacetBoolean' && isExpanded && (
+                <UIFilterFacetBoolean>
+                  {facet.values.map((item) => (
+                    <UIFilterFacetBooleanItem
+                      key={`${testId}-${facet.label}-${item.label}`}
+                      id={`${testId}-${facet.label}-${item.label}`}
+                      testId={testId}
+                      onFacetChange={(facet) =>
+                        dispatch({ type: 'toggleFacet', payload: facet })
+                      }
+                      selected={item.selected}
+                      value={item.value}
+                      quantity={item.quantity}
+                      facetKey={facet.key}
+                      label={item.label}
+                    />
+                  ))}
+                </UIFilterFacetBoolean>
+              )}
+              {type === 'StoreFacetRange' && isExpanded && (
+                <UIFilterFacetRange
+                  facetKey={facet.key}
+                  min={facet.min}
+                  max={facet.max}
+                  formatter={useFormattedPrice}
+                  onFacetChange={(facet) =>
+                    dispatch({
+                      type: 'setFacet',
+                      payload: { facet, unique: true },
+                    })
+                  }
+                />
+              )}
+            </UIFilterFacets>
+          )
+        })}
+      </UIFilter>
+    </UIFilterSlider>
   )
 }
 

package/.next/BUILD_ID

@@ -1 +0,0 @@
-1KPdWgQQSDSsDjbALweg_

package/.next/build-manifest.json

@@ -1,101 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/1KPdWgQQSDSsDjbALweg_/_buildManifest.js",
-    "static/1KPdWgQQSDSsDjbALweg_/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-2d6880a14598b3ec.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/781-7df372b5b56e3f96.js",
-      "static/chunks/626-99e3ce6603bc98f0.js",
-      "static/css/43d61b402f41569b.css",
-      "static/chunks/pages/index-eabe9d42a172b52b.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-2d6880a14598b3ec.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-2d6880a14598b3ec.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-2d6880a14598b3ec.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/855-05313b1877eceff8.js",
-      "static/css/430b8cafbf7c23c1.css",
-      "static/chunks/pages/[...slug]-a947020e62f4ac94.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-2d6880a14598b3ec.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/781-7df372b5b56e3f96.js",
-      "static/chunks/626-99e3ce6603bc98f0.js",
-      "static/css/59446068ab594e58.css",
-      "static/chunks/pages/[slug]/p-de7852e7e513012d.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-2d6880a14598b3ec.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/css/046add45db5e9cdf.css",
-      "static/chunks/pages/_app-0bf8e95d55047056.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-2d6880a14598b3ec.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-2d6880a14598b3ec.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-2d6880a14598b3ec.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-2d6880a14598b3ec.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-2d6880a14598b3ec.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/855-05313b1877eceff8.js",
-      "static/css/9dd1d1084d254c66.css",
-      "static/chunks/pages/s-56181f57d448f67c.js"
-    ]
-  },
-  "ampFirstPages": []
-}