@faststore/core 22.42.6

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

@@ -0,0 +1,226 @@
+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 FilterSlider from './FilterSlider'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Organisms/Filter/FilterSlider"
+  component={FilterSlider}
+  argTypes={{
+    testId: {
+      table: {
+        disable: true,
+      },
+    },
+    selected: {
+      description: 'The selected facets.',
+      control: false,
+    },
+    expanded: {
+      description: 'An array of the expanded Accordion indexes from Facets.',
+      control: false,
+    },
+    dispatch: {
+      description: 'The dispatch function from useUI() hook.',
+      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 FilterTemplate = (args) => {
+  const filter = useFilter(args.facets)
+  const { state, setState } = useSearch()
+  const { filter: displayFilter, openFilter } = useUI()
+  const { facets, expanded, dispatch } = filter
+  return (
+    <>
+      <Button
+        variant="tertiary"
+        icon={<Icon name="FadersHorizontal" width={16} height={16} />}
+        iconPosition="left"
+        aria-label="Open Filters"
+        onClick={openFilter}
+      >
+        Open Filters
+      </Button>
+      {displayFilter && <FilterSlider {...filter} />}
+    </>
+  )
+}
+
+export const TemplateWithProvider = (args) => {
+  return (
+    <UIProvider>
+      <SearchProvider onChange={() => ({})}>
+        <FilterTemplate {...args} />
+      </SearchProvider>
+    </UIProvider>
+  )
+}
+
+<header>
+
+# FilterSlider
+
+The mobile `Filter` view that is rendered inside a `SlideOver` component.
+
+</header>
+
+## Overview
+
+The `FilterSlider` component uses the [SlideOver](?path=/docs/organisms-slideover--default-story), and [Facets](?path=/docs/organisms-filter-facets--default-story) components.
+
+---
+
+## Usage
+
+`import { FilterSlider } from 'src/components/search/Filter'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      facets: facets,
+    }}
+  >
+    {TemplateWithProvider.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+---
+
+## Nested Elements
+
+### Content
+
+<TokenTable>
+  <TokenRow
+    token="--fs-filter-slider-content-height"
+    value="calc(100vh - var(--fs-filter-slider-footer-height))"
+  />
+  <TokenRow
+    token="--fs-filter-slider-content-padding"
+    value="var(--fs-spacing-3) var(--fs-spacing-3) calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3))"
+  />
+</TokenTable>
+
+### Header
+
+<TokenTable>
+  <TokenRow
+    token="--fs-filter-slider-header-icon-margin-right"
+    value="calc(-1 * var(--fs-spacing-1))"
+  />
+</TokenTable>
+
+### Footer
+
+<TokenTable>
+  <TokenRow token="--fs-filter-slider-footer-width" value="100%" />
+  <TokenRow token="--fs-filter-slider-footer-height" value="5rem" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-filter-slider-footer-padding"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-filter-slider-footer-bkg-color"
+    value="var(--fs-color-neutral-0)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-filter-slider-footer-box-shadow"
+    value="0 0 6px rgb(0 0 0 / 20%)"
+  />
+</TokenTable>
+
+### Footer Buttons
+
+<TokenTable>
+  <TokenRow token="--fs-filter-slider-footer-button-clear-width" value="40%" />
+  <TokenRow
+    token="--fs-filter-slider-footer-button-clear-margin-right"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-filter-slider-footer-button-apply-width" value="60%" />
+</TokenTable>

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

@@ -0,0 +1,109 @@
+import { useSearch } from '@faststore/sdk'
+
+import type { Filter_FacetsFragment } from '@generated/graphql'
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import SlideOver from 'src/components/ui/SlideOver'
+import { useUI } from 'src/sdk/ui/Provider'
+import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+
+import Facets from './Facets'
+import styles from './filter-slider.module.scss'
+import type { 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 FilterSlider({
+  facets,
+  testId,
+  dispatch,
+  expanded,
+  selected,
+}: Props & ReturnType<typeof useFilter>) {
+  const { closeFilter } = useUI()
+  const { fade, fadeOut } = useFadeEffect()
+
+  const { resetInfiniteScroll, setState, state } = useSearch()
+
+  return (
+    <SlideOver
+      isOpen
+      fade={fade}
+      onDismiss={fadeOut}
+      size="partial"
+      direction="rightSide"
+      className={styles.fsFilterSlider}
+      onTransitionEnd={() => fade === 'out' && closeFilter()}
+    >
+      <div data-fs-filter-slider-content>
+        <header data-fs-filter-slider-header>
+          <h2 className="text__lead">Filters</h2>
+          <Button
+            data-fs-filter-slider-header-icon
+            aria-label="Close Filters"
+            icon={<Icon name="X" width={32} height={32} />}
+            onClick={() => {
+              dispatch({
+                type: 'selectFacets',
+                payload: state.selectedFacets,
+              })
+
+              fadeOut()
+            }}
+          />
+        </header>
+        <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>
+        <Button
+          data-fs-filter-slider-footer-button-clear
+          variant="secondary"
+          onClick={() => dispatch({ type: 'selectFacets', payload: [] })}
+        >
+          Clear All
+        </Button>
+        <Button
+          data-fs-filter-slider-footer-button-apply
+          variant="primary"
+          data-testid="filter-slider-button-apply"
+          onClick={() => {
+            resetInfiniteScroll(0)
+
+            setState({
+              ...state,
+              selectedFacets: selected,
+              page: 0,
+            })
+            fadeOut()
+          }}
+        >
+          Apply
+        </Button>
+      </footer>
+    </SlideOver>
+  )
+}
+
+export default FilterSlider

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

@@ -0,0 +1,117 @@
+@import "src/styles/scaffold";
+
+.fs-facets {
+  // --------------------------------------------------------
+  // Design Tokens for Facets
+  // --------------------------------------------------------
+
+  // Title
+  --fs-facets-title-height                                 : var(--product-listing-row-height);
+  --fs-facets-title-margin-bottom                          : var(--fs-spacing-0);
+
+  // Accordion
+  --fs-facets-accordion-border-width-notebook              : var(--fs-border-width);
+  --fs-facets-accordion-border-color-notebook              : var(--fs-border-color-light);
+  --fs-facets-accordion-border-radius-notebook             : var(--fs-border-radius);
+
+  // Accordion Item Button
+  --fs-facets-accordion-item-button-text-size              : var(--fs-text-size-lead);
+  --fs-facets-accordion-item-button-text-weight            : var(--fs-text-weight-regular);
+  --fs-facets-accordion-item-button-line-height            : 1.5;
+  --fs-facets-accordion-item-button-padding-right-notebook : var(--fs-spacing-4);
+  --fs-facets-accordion-item-button-padding-left-notebook  : var(--fs-facets-accordion-item-button-padding-right-notebook);
+
+  --fs-facets-accordion-item-button-text-weight-notebook   : var(--fs-text-size-2);
+  --fs-facets-accordion-item-button-line-height-notebook   : 1.25;
+
+  // Accordion Item Panel
+  --fs-facets-accordion-item-panel-padding-right-notebook  : var(--fs-spacing-4);
+  --fs-facets-accordion-item-panel-padding-left-notebook   : var(--fs-facets-accordion-item-panel-padding-right-notebook);
+
+  // Accordion Item List
+  --fs-facets-list-padding-bottom                          : var(--fs-spacing-3);
+
+  // List Item
+  --fs-facets-list-item-not-last-margin-bottom             : var(--fs-spacing-3);
+
+  // List Item Checkbox
+  --fs-facets-list-item-checkbox-width                     : 1.25rem;
+  --fs-facets-list-item-checkbox-height                    : var(--fs-facets-list-item-checkbox-width);
+
+  // List Item Label
+  --fs-facets-list-item-label-width                        : 100%;
+  --fs-facets-list-item-label-margin-left                  : var(--fs-spacing-1);
+
+  // List Item Badge
+  --fs-facets-list-item-badge-margin-left                  : var(--fs-spacing-1);
+
+  [data-fs-facets-title] {
+    display: flex;
+    align-items: center;
+    height: var(--fs-facets-title-height);
+    margin-bottom: var(--fs-facets-title-margin-bottom);
+
+    @include media("<notebook") {
+      display: none;
+    }
+  }
+
+  [data-fs-facets-accordion] {
+    @include media(">=notebook") {
+      border: var(--fs-facets-accordion-border-width-notebook) solid var(--fs-facets-accordion-border-color-notebook);
+      border-radius: var(--fs-facets-accordion-border-radius-notebook);
+    }
+  }
+
+  [data-fs-facets-accordion-item] {
+    [data-fs-accordion-item-button] {
+      font-size: var(--fs-facets-accordion-item-button-text-size);
+      font-weight: var(--fs-facets-accordion-item-button-text-weight);
+      line-height: var(--fs-facets-accordion-item-button-line-height);
+
+      @include media(">=notebook") {
+        padding-right: var(--fs-facets-accordion-item-button-padding-right-notebook);
+        padding-left: var(--fs-facets-accordion-item-button-padding-left-notebook);
+        font-size: var(--fs-facets-accordion-item-button-text-weight-notebook);
+        line-height: var(--fs-facets-accordion-item-button-line-height-notebook);
+      }
+    }
+
+    [data-fs-accordion-item-panel] {
+      @include media(">=notebook") {
+        padding-right: var(--fs-facets-accordion-item-panel-padding-right-notebook);
+        padding-left: var(--fs-facets-accordion-item-panel-padding-left-notebook);
+      }
+    }
+  }
+
+  [data-fs-facets-list] {
+    padding-bottom: var(--fs-facets-list-padding-bottom);
+  }
+
+  [data-fs-facets-list-item] {
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) {
+      margin-bottom: var(--fs-facets-list-item-not-last-margin-bottom);
+    }
+  }
+
+  [data-fs-facets-list-item-checkbox] {
+    flex-shrink: 0;
+    width: var(--fs-facets-list-item-checkbox-width);
+    height: var(--fs-facets-list-item-checkbox-height);
+  }
+
+  [data-fs-facets-list-item-label] {
+    display: flex;
+    align-items: center;
+    width: var(--fs-facets-list-item-label-width);
+    margin-left: var(--fs-facets-list-item-label-margin-left);
+  }
+
+  [data-fs-facets-list-item-badge] {
+    margin-left: var(--fs-facets-list-item-badge-margin-left);
+  }
+}

package/src/components/search/Filter/filter-slider.module.scss

@@ -0,0 +1,63 @@
+.fs-filter-slider {
+  // --------------------------------------------------------
+  // Design Tokens for Filter Slider
+  // --------------------------------------------------------
+
+  // Content
+  --fs-filter-slider-content-height                   : calc(100vh - var(--fs-filter-slider-footer-height));
+  --fs-filter-slider-content-padding                  : var(--fs-spacing-3) var(--fs-spacing-3) calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3));
+
+  // Header
+  --fs-filter-slider-header-icon-margin-right         : calc(-1 * var(--fs-spacing-1));
+
+  // Footer
+  --fs-filter-slider-footer-width                     : 100%;
+  --fs-filter-slider-footer-height                    : 5rem;
+  --fs-filter-slider-footer-padding                   : var(--fs-spacing-3);
+  --fs-filter-slider-footer-bkg-color                 : var(--fs-color-neutral-0);
+  --fs-filter-slider-footer-box-shadow                : 0 0 6px rgb(0 0 0 / 20%);
+
+  // Footer Buttons
+  --fs-filter-slider-footer-button-clear-width        : 40%;
+  --fs-filter-slider-footer-button-clear-margin-right : var(--fs-spacing-3);
+
+  --fs-filter-slider-footer-button-apply-width        : 60%;
+
+  [data-fs-filter-slider-content] {
+    height: var(--fs-filter-slider-content-height);
+    padding: var(--fs-filter-slider-content-padding);
+    overflow-y: auto;
+  }
+
+  [data-fs-filter-slider-header] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  [data-fs-filter-slider-header-icon] {
+    margin-right: var(--fs-filter-slider-header-icon-margin-right);
+  }
+
+  [data-fs-filter-slider-footer] {
+    position: sticky;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    width: var(--fs-filter-slider-footer-width);
+    height: var(--fs-filter-slider-footer-height);
+    padding: var(--fs-filter-slider-footer-padding);
+    background-color: var(--fs-filter-slider-footer-bkg-color);
+    box-shadow: var(--fs-filter-slider-footer-box-shadow);
+  }
+
+  [data-fs-filter-slider-footer-button-clear] {
+    width: var(--fs-filter-slider-footer-button-clear-width);
+    margin-right: var(--fs-filter-slider-footer-button-clear-margin-right);
+  }
+
+  [data-fs-filter-slider-footer-button-apply] {
+    width: var(--fs-filter-slider-footer-button-apply-width);
+  }
+}

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

@@ -0,0 +1,2 @@
+export { default } from './Filter'
+export { default as FilterSlider } from './FilterSlider'

package/src/components/search/Filter/useFilter.ts

@@ -0,0 +1,131 @@
+import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
+import { useEffect, useMemo, useReducer } from 'react'
+import type { IStoreSelectedFacet } from '@faststore/api'
+
+import type { Filter_FacetsFragment } from '@generated/graphql'
+
+interface State {
+  expanded: Set<number>
+  selected: IStoreSelectedFacet[]
+}
+
+type Action =
+  | {
+      type: 'toggleExpanded'
+      payload: number
+    }
+  | {
+      type: 'selectFacets'
+      payload: IStoreSelectedFacet[]
+    }
+  | {
+      type: 'toggleFacet'
+      payload: IStoreSelectedFacet
+    }
+  | {
+      type: 'setFacet'
+      payload: { facet: IStoreSelectedFacet; unique?: boolean }
+    }
+
+const reducer = (state: State, action: Action) => {
+  const { expanded, selected } = state
+  const { type, payload } = action
+
+  switch (type) {
+    case 'toggleExpanded': {
+      if (expanded.has(payload)) {
+        expanded.delete(payload)
+      } else {
+        expanded.add(payload)
+      }
+
+      return {
+        ...state,
+        expanded: new Set(expanded),
+      }
+    }
+
+    case 'selectFacets': {
+      if (payload !== selected) {
+        return {
+          ...state,
+          selected: payload,
+        }
+      }
+
+      break
+    }
+
+    case 'toggleFacet': {
+      return {
+        ...state,
+        selected: toggleFacet(state.selected, payload),
+      }
+    }
+
+    case 'setFacet': {
+      return {
+        ...state,
+        selected: setFacet(state.selected, payload.facet, payload.unique),
+      }
+    }
+
+    default:
+      throw new Error(`Action ${type} not implemented`)
+  }
+
+  return state
+}
+
+export const useFilter = (allFacets: Filter_FacetsFragment[]) => {
+  const {
+    state: { selectedFacets },
+  } = useSearch()
+
+  const [{ selected, expanded }, dispatch] = useReducer(reducer, null, () => ({
+    expanded: new Set([]),
+    selected: selectedFacets,
+  }))
+
+  const selectedMap = useMemo(
+    () =>
+      selected.reduce((acc, facet) => {
+        if (!acc.has(facet.key)) {
+          acc.set(facet.key, new Map())
+        }
+
+        acc.get(facet.key)?.set(facet.value, facet)
+
+        return acc
+      }, new Map() as Map<string, Map<string, IStoreSelectedFacet>>),
+    [selected]
+  )
+
+  const facets = useMemo(
+    () =>
+      allFacets.map((facet) => {
+        if (facet.__typename === 'StoreFacetBoolean') {
+          return {
+            ...facet,
+            values: facet.values.map(({ value, ...rest }) => ({
+              ...rest,
+              value,
+              selected: Boolean(selectedMap.get(facet.key)?.has(value)),
+            })),
+          }
+        }
+
+        return facet
+      }),
+    [allFacets, selectedMap]
+  )
+
+  useEffect(() => {
+    dispatch({
+      type: 'selectFacets',
+      payload: selectedFacets,
+    })
+  }, [selectedFacets])
+
+  return { facets, selected, expanded, dispatch }
+}