@faststore/core 22.42.6

package/src/components/search/Filter/Facets.stories.mdx

@@ -0,0 +1,284 @@
+import { SearchProvider } from '@faststore/sdk'
+import { useSearch } from '@faststore/sdk'
+
+import storeConfig from 'store.config'
+
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { validateSession } from 'src/sdk/session'
+import { useFilter } from './useFilter'
+
+import Facets from './Facets'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Organisms/Filter/Facets"
+  component={Facets}
+  argTypes={{
+    testId: {
+      table: {
+        disable: true,
+      },
+    },
+    indicesExpanded: {
+      control: false,
+    },
+    onFacetChange: {
+      control: false,
+    },
+  }}
+/>
+
+export const facets = [
+  {
+    key: 'price',
+    label: 'Price',
+    min: {
+      selected: 1.67,
+      absolute: 1.67,
+    },
+    max: {
+      selected: 889.53,
+      absolute: 889.53,
+    },
+    __typename: 'StoreFacetRange',
+  },
+  {
+    key: 'category-2',
+    label: 'Category',
+    values: [
+      {
+        label: 'Chairs',
+        value: 'chairs',
+        selected: true,
+        quantity: 138,
+      },
+      {
+        label: 'Desks',
+        value: 'desks',
+        selected: false,
+        quantity: 125,
+      },
+    ],
+    __typename: 'StoreFacetBoolean',
+  },
+  {
+    key: 'brand',
+    label: 'Brand',
+    values: [
+      {
+        label: 'Acer',
+        value: 'acer',
+        selected: true,
+        quantity: 138,
+      },
+      {
+        label: 'Adidas',
+        value: 'adidas',
+        selected: false,
+        quantity: 121,
+      },
+      {
+        label: 'Nike',
+        value: 'nike',
+        selected: false,
+        quantity: 150,
+      },
+    ],
+    __typename: 'StoreFacetBoolean',
+  },
+]
+
+export const FacetsTemplate = (args) => {
+  const filter = useFilter(args.facets)
+  const { state, setState } = useSearch()
+  const { filter: displayFilter, openFilter } = useUI()
+  const { facets, expanded, dispatch } = filter
+  return (
+    <Facets
+      facets={facets}
+      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 })
+      }
+    />
+  )
+}
+
+export const TemplateWithProvider = (args) => {
+  return (
+    <UIProvider>
+      <SearchProvider onChange={() => ({})}>
+        <FacetsTemplate {...args} />
+      </SearchProvider>
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Facets
+
+Facets represent the <code>Filter</code> details and allow users to refine their searches.
+
+</header>
+
+## Overview
+
+The `Facets` component uses the [Accordion](?path=/docs/molecules-accordion-overview--default-story), [Checkbox](?path=/docs/atoms-checkbox--overview-default), [PriceRange](?path=/docs/molecules-pricerange--overview-default), and [Badge](?path=/docs/molecules-badge--default) components.
+
+---
+
+## Usage
+
+`import Facets from 'src/components/search/Filter/Facets'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      facets: facets,
+    }}
+  >
+    {TemplateWithProvider.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+---
+
+## Nested Elements
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-facets-title-height"
+    value="var(--product-listing-row-height)"
+  />
+  <TokenRow
+    token="--fs-facets-title-margin-bottom"
+    value="var(--fs-spacing-0)"
+  />
+</TokenTable>
+
+### Accordion
+
+<TokenTable>
+  <TokenRow
+    token="--fs-facets-accordion-border-width-notebook"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-facets-accordion-border-color-notebook"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-facets-accordion-border-radius-notebook"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+### Accordion Item Button
+
+<TokenTable>
+  <TokenRow
+    token="--fs-facets-accordion-item-button-text-size"
+    value="var(--fs-text-size-lead)"
+  />
+  <TokenRow
+    token="--fs-facets-accordion-item-button-text-weight"
+    value="var(--fs-text-weight-regular)"
+  />
+  <TokenRow token="--fs-facets-accordion-item-button-line-height" value="1.5" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-facets-accordion-item-button-text-weight-notebook"
+    value="var(--fs-text-size-2)"
+  />
+  <TokenRow
+    token="--fs-facets-accordion-item-button-line-height-notebook"
+    value="1.25"
+  />
+  <TokenRow
+    token="--fs-facets-accordion-item-button-padding-right-notebook"
+    value="var(--fs-spacing-4)"
+  />
+  <TokenRow
+    token="--fs-facets-accordion-item-button-padding-left-notebook"
+    value="var(--fs-facets-accordion-item-button-padding-right-notebook)"
+  />
+</TokenTable>
+
+### Accordion Item Panel
+
+<TokenTable>
+  <TokenRow
+    token="--fs-facets-accordion-item-panel-padding-right-notebook"
+    value="var(--fs-spacing-4)"
+  />
+  <TokenRow
+    token="--fs-facets-accordion-item-panel-padding-left-notebook"
+    value="var(--fs-facets-accordion-item-panel-padding-right-notebook)"
+  />
+</TokenTable>
+
+### Accordion Item List
+
+<TokenTable>
+  <TokenRow
+    token="--fs-facets-list-padding-bottom"
+    value="var(--fs-spacing-3)"
+  />
+</TokenTable>
+
+### List Item
+
+<TokenTable>
+  <TokenRow
+    token="--fs-facets-list-item-not-last-margin-bottom"
+    value="var(--fs-spacing-3)"
+  />
+</TokenTable>
+
+### List Item Checkbox
+
+<TokenTable>
+  <TokenRow token="--fs-facets-list-item-checkbox-width" value="1.25rem" />
+  <TokenRow
+    token="--fs-facets-list-item-checkbox-height"
+    value="var(--fs-facets-list-item-checkbox-width)"
+  />
+</TokenTable>
+
+### List Item Label
+
+<TokenTable>
+  <TokenRow token="--fs-facets-list-item-label-width" value="100%" />
+  <TokenRow
+    token="--fs-facets-list-item-label-margin-left"
+    value="var(--fs-spacing-1)"
+  />
+</TokenTable>
+
+### List Item Badge
+
+<TokenTable>
+  <TokenRow
+    token="--fs-facets-list-item-badge-margin-left"
+    value="var(--fs-spacing-1)"
+  />
+</TokenTable>

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

@@ -0,0 +1,136 @@
+import { Label as UILabel, List as UIList } from '@faststore/ui'
+
+import type {
+  Filter_FacetsFragment,
+  IStoreSelectedFacet,
+} from '@generated/graphql'
+import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
+import { Badge } from 'src/components/ui/Badge'
+import Checkbox from 'src/components/ui/Checkbox'
+import PriceRange from 'src/components/ui/PriceRange'
+
+import styles from './facets.module.scss'
+
+type OnFacetChange = (
+  item: IStoreSelectedFacet,
+  type: 'BOOLEAN' | 'RANGE'
+) => void
+
+interface FacetsProps {
+  /**
+   * 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[]
+  /**
+   * The expanded items from the `Accordion`.
+   */
+  indicesExpanded: Set<number>
+  /**
+   * This function is called when `Checkbox` from the facet changes.
+   */
+  onFacetChange: OnFacetChange
+  /**
+   * This function is called when `Accordion` is expanded or collapsed.
+   */
+  onAccordionChange: (index: number) => void
+}
+
+const formatRange = (min: number, max: number) =>
+  `${min.toFixed(2)}-to-${max.toFixed(2)}`
+
+function Facets({
+  testId,
+  facets,
+  indicesExpanded,
+  onFacetChange,
+  onAccordionChange,
+}: FacetsProps) {
+  return (
+    <div className={styles.fsFacets} data-fs-filter data-testid={testId}>
+      <h2 className="text__title-mini-alt" data-fs-facets-title>
+        Filters
+      </h2>
+      <Accordion
+        expandedIndices={indicesExpanded}
+        onChange={onAccordionChange}
+        data-fs-facets-accordion
+      >
+        {facets.map((facet, index) => {
+          const isExpanded = indicesExpanded.has(index)
+          const { __typename: type, label } = facet
+
+          return (
+            <AccordionItem
+              key={`${label}-${index}`}
+              prefixId={testId}
+              testId={`${testId}-accordion`}
+              isExpanded={isExpanded}
+              buttonLabel={label}
+              data-type={type}
+              data-fs-facets-accordion-item
+            >
+              {type === 'StoreFacetBoolean' && isExpanded && (
+                <UIList data-fs-facets-list>
+                  {facet.values.map((item) => {
+                    const id = `${testId}-${facet.label}-${item.label}`
+
+                    return (
+                      <li key={id} data-fs-facets-list-item>
+                        <Checkbox
+                          id={id}
+                          checked={item.selected}
+                          onChange={() =>
+                            onFacetChange(
+                              { key: facet.key, value: item.value },
+                              'BOOLEAN'
+                            )
+                          }
+                          data-fs-facets-list-item-checkbox
+                          data-testid={`${testId}-accordion-panel-checkbox`}
+                          data-value={item.value}
+                          data-quantity={item.quantity}
+                        />
+                        <UILabel
+                          htmlFor={id}
+                          className="text__title-mini-alt"
+                          data-fs-facets-list-item-label
+                        >
+                          {item.label}{' '}
+                          <Badge data-fs-facets-list-item-badge>
+                            {item.quantity}
+                          </Badge>
+                        </UILabel>
+                      </li>
+                    )
+                  })}
+                </UIList>
+              )}
+              {type === 'StoreFacetRange' && isExpanded && (
+                <PriceRange
+                  min={facet.min}
+                  max={facet.max}
+                  onEnd={(v) =>
+                    onFacetChange(
+                      {
+                        key: facet.key,
+                        value: formatRange(v.min, v.max),
+                      },
+                      'RANGE'
+                    )
+                  }
+                />
+              )}
+            </AccordionItem>
+          )
+        })}
+      </Accordion>
+    </div>
+  )
+}
+
+export default Facets

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

@@ -0,0 +1,209 @@
+import { SearchProvider } from '@faststore/sdk'
+import { useSearch } from '@faststore/sdk'
+
+import storeConfig from 'store.config'
+
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { validateSession } from 'src/sdk/session'
+import { useFilter } from './useFilter'
+
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import Facets from './Facets'
+import FilterSlider from './FilterSlider'
+import Filter from '.'
+
+import { SectionList, SectionItem } from 'src/../.storybook/components'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+<Meta
+  title="Organisms/Filter/Overview"
+  component={Filter}
+  argTypes={{
+    testId: {
+      table: {
+        disable: true,
+      },
+    },
+  }}
+/>
+
+export const facets = [
+  {
+    key: 'price',
+    label: 'Price',
+    min: {
+      selected: 1.67,
+      absolute: 1.67,
+    },
+    max: {
+      selected: 889.53,
+      absolute: 889.53,
+    },
+    __typename: 'StoreFacetRange',
+  },
+  {
+    key: 'category-2',
+    label: 'Category',
+    values: [
+      {
+        label: 'Chairs',
+        value: 'chairs',
+        selected: true,
+        quantity: 138,
+      },
+      {
+        label: 'Desks',
+        value: 'desks',
+        selected: false,
+        quantity: 125,
+      },
+    ],
+    __typename: 'StoreFacetBoolean',
+  },
+  {
+    key: 'brand',
+    label: 'Brand',
+    values: [
+      {
+        label: 'Acer',
+        value: 'acer',
+        selected: true,
+        quantity: 138,
+      },
+      {
+        label: 'Adidas',
+        value: 'adidas',
+        selected: false,
+        quantity: 121,
+      },
+      {
+        label: 'Nike',
+        value: 'nike',
+        selected: false,
+        quantity: 150,
+      },
+    ],
+    __typename: 'StoreFacetBoolean',
+  },
+]
+
+export const FilterTemplate = (args) => {
+  const filter = useFilter(args.facets)
+  const { state, setState } = useSearch()
+  const { filter: displayFilter, openFilter } = useUI()
+  const { facets, expanded, dispatch } = filter
+  return (
+    <>
+      <div className="hidden-mobile">
+        <Facets
+          facets={facets}
+          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>
+      <div className="display-mobile">
+        <Button
+          variant="tertiary"
+          icon={<Icon name="FadersHorizontal" width={16} height={16} />}
+          iconPosition="left"
+          aria-label="Open Filters"
+          onClick={openFilter}
+        >
+          Open Filters
+        </Button>
+      </div>
+      {displayFilter && <FilterSlider {...filter} />}
+    </>
+  )
+}
+
+export const TemplateWithProvider = (args) => {
+  return (
+    <UIProvider>
+      <SearchProvider onChange={() => ({})}>
+        <FilterTemplate {...args} />
+      </SearchProvider>
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Filter
+
+The Filter component is used to filter products inside the Product Listing Page (PLP) and Search Page.
+
+</header>
+
+## Overview
+
+The `Filter` component uses the [Facets](?path=/docs/organisms-filter-facets--default-story) component or the [FilterSlider](?path=/docs/organisms-filter-filterslider--default-story) depending on the screen dimension.
+
+---
+
+## Usage
+
+`import Filter from 'src/components/search/Filter'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      facets: facets,
+    }}
+  >
+    {TemplateWithProvider.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+---
+
+## Related Components
+
+<SectionList grid="grid">
+  <SectionItem
+    title="Open Filter Button"
+    description={
+      <>
+        The button that trigger the <code>FilterSlider</code> mobile view.
+      </>
+    }
+  >
+    <img src="https://vtexhelp.vtexassets.com/assets/docs/src/filter-button___0c620a5ec7a882a10a5a664e213af40c.png" />
+  </SectionItem>
+  <SectionItem
+    title="Facets"
+    actionPath="../?path=/docs/organisms-filter-facets--default-story"
+    description={
+      <>
+        Facets represents the <code>Filter</code> details and allow users to
+        refine their searches.
+      </>
+    }
+  >
+    <img src="https://vtexhelp.vtexassets.com/assets/docs/src/facets___fdf0046c69ce7cff6cd0425c30721715.png" />
+  </SectionItem>
+  <SectionItem
+    title="FilterSlider"
+    actionPath="../?path=/docs/organisms-filter-filterslider--default-story"
+    description={
+      <>
+        The mobile <code>Filter</code> view that is rendered inside a{' '}
+        <code>SlideOver</code> component.
+      </>
+    }
+  >
+    <img src="https://vtexhelp.vtexassets.com/assets/docs/src/filter-slider___0b494caafda8ca47a39a06a006a64849.png" />
+  </SectionItem>
+</SectionList>

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

@@ -0,0 +1,91 @@
+import { gql } from '@faststore/graphql-utils'
+import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
+
+import type { Filter_FacetsFragment } from '@generated/graphql'
+import { useUI } from 'src/sdk/ui/Provider'
+
+import Facets from './Facets'
+import FilterSlider from './FilterSlider'
+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
+}
+
+function Filter({ facets: allFacets, testId = 'store-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 })
+          }
+        />
+      </div>
+
+      {displayFilter && <FilterSlider {...filter} testId={testId} />}
+    </>
+  )
+}
+
+export const fragment = gql`
+  fragment Filter_facets on StoreFacet {
+    ... on StoreFacetRange {
+      key
+      label
+
+      min {
+        selected
+        absolute
+      }
+
+      max {
+        selected
+        absolute
+      }
+
+      __typename
+    }
+    ... on StoreFacetBoolean {
+      key
+      label
+      values {
+        label
+        value
+        selected
+        quantity
+      }
+
+      __typename
+    }
+  }
+`
+
+export default Filter