@graphcommerce/magento-product 3.0.1

package/components/ProductListCount/index.tsx

@@ -0,0 +1,55 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+
+import { ProductListCountFragment } from './ProductListCount.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    productListCount: {
+      maxWidth: '100%',
+      width: responsiveVal(280, 650),
+      margin: '0 auto',
+      padding: theme.spacings.xs,
+      paddingTop: responsiveVal(24, 30),
+      paddingBottom: responsiveVal(4, 8),
+      position: 'relative',
+      textAlign: 'center',
+      gridArea: 'count',
+      marginBottom: theme.spacings.sm,
+    },
+    line: {
+      background: '#ededed',
+      width: '100%',
+      height: 1,
+      lineHeight: 20,
+    },
+    count: {
+      ...theme.typography.body2,
+      margin: '0 auto',
+      background: theme.palette.background.default,
+      display: 'inline-block',
+      padding: `0 ${theme.spacings.xs} 0 ${theme.spacings.xs}`,
+      color: theme.palette.primary.mutedText,
+      transform: 'translateY(calc(-50% - 1px))',
+    },
+  }),
+  {
+    name: 'ProductListCount',
+  },
+)
+
+export type ProductCountProps = ProductListCountFragment & UseStyles<typeof useStyles>
+
+export default function ProductListCount(props: ProductCountProps) {
+  const { total_count } = props
+  const classes = useStyles(props)
+
+  return (
+    <div className={classes.productListCount}>
+      <div className={classes.line} />
+      <div className={classes.count}>
+        {total_count} product{(total_count ?? 0) > 1 ? 's' : ''}
+      </div>
+    </div>
+  )
+}

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -0,0 +1,66 @@
+import { cloneDeep } from '@apollo/client/utilities'
+import { Chip, ChipProps } from '@material-ui/core'
+import { useChipMenuStyles, SvgImage, iconCloseCircle } from '@graphcommerce/next-ui'
+import clsx from 'clsx'
+import React from 'react'
+import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
+import ProductListLink from '../ProductListLink/ProductListLink'
+import { FilterIn } from './FilterEqualType'
+import { ProductListFiltersFragment } from './ProductListFilters.gql'
+
+export type FilterCheckboxTypeProps = NonNullable<
+  NonNullable<ProductListFiltersFragment['aggregations']>[0]
+> &
+  Omit<ChipProps, 'selected'>
+
+export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
+  const { attribute_code, count, label, options, ...chipProps } = props
+  const { params } = useProductListParamsContext()
+  const classes = useChipMenuStyles(props)
+  const currentFilter = params.filters[attribute_code]
+  const pushRoute = useProductListLinkPush({ scroll: false })
+
+  if (!options?.[0]) return null
+
+  const option = options?.[1]?.value === '1' ? options[1] : options[0]
+  const isActive = currentFilter?.in?.includes(option.value)
+
+  const filter = isActive ? {} : ({ in: [option.value] } as FilterIn)
+
+  return (
+    <ProductListLink
+      {...params}
+      filters={{ ...params.filters, [attribute_code]: filter }}
+      currentPage={undefined}
+      noLink
+      link={{ scroll: false }}
+    >
+      <Chip
+        variant='outlined'
+        color={isActive ? undefined : 'default'}
+        onDelete={
+          isActive
+            ? () => {
+                const linkParams = cloneDeep(params)
+
+                delete linkParams.currentPage
+                delete linkParams.filters[attribute_code]
+
+                pushRoute(linkParams)
+              }
+            : undefined
+        }
+        deleteIcon={
+          isActive ? (
+            <SvgImage src={iconCloseCircle} alt='remove' size='small' loading='eager' />
+          ) : undefined
+        }
+        label={label}
+        clickable
+        {...chipProps}
+        className={clsx(classes.chip, isActive && classes.chipSelected, chipProps.className)}
+      />
+    </ProductListLink>
+  )
+}

package/components/ProductListFilters/FilterEqualType.tsx

@@ -0,0 +1,169 @@
+import { cloneDeep } from '@apollo/client/utilities'
+import {
+  Checkbox,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+  makeStyles,
+  Theme,
+} from '@material-ui/core'
+import { FilterEqualTypeInput } from '@graphcommerce/graphql'
+import { ChipMenu, ChipMenuProps, responsiveVal } from '@graphcommerce/next-ui'
+import React from 'react'
+import { SetRequired } from 'type-fest'
+import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
+import ProductListLink from '../ProductListLink/ProductListLink'
+import { ProductListFiltersFragment } from './ProductListFilters.gql'
+
+export type FilterIn = SetRequired<Omit<FilterEqualTypeInput, 'eq'>, 'in'>
+
+type FilterEqualTypeProps = NonNullable<
+  NonNullable<ProductListFiltersFragment['aggregations']>[0]
+> &
+  Omit<ChipMenuProps, 'selected'>
+
+const useFilterEqualStyles = makeStyles(
+  (theme: Theme) => ({
+    listItem: {
+      padding: `${theme.spacings.xxs} ${theme.spacings.xxs} 0`,
+      display: 'block',
+      '&:not(:nth-last-of-type(-n+2)) > div': {
+        borderBottom: `1px solid ${theme.palette.divider}`,
+      },
+    },
+    listItemInnerContainer: {
+      width: '100%',
+      paddingTop: responsiveVal(0, 3),
+      paddingBottom: theme.spacings.xxs,
+      '& > div': {
+        display: 'inline-block',
+        [theme.breakpoints.down('sm')]: {
+          maxWidth: '72%',
+        },
+      },
+    },
+    checkbox: {
+      padding: 0,
+      margin: '3px 0 0 8px',
+      float: 'right',
+    },
+    linkContainer: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      columnGap: responsiveVal(2, 16),
+      minWidth: 0,
+      [theme.breakpoints.down('sm')]: {
+        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+      },
+    },
+    button: {
+      float: 'right',
+      marginTop: theme.spacings.xxs,
+      marginRight: theme.spacings.xxs,
+      textDecoration: 'none',
+    },
+    resetButton: {
+      background: theme.palette.grey['100'],
+      marginRight: theme.spacings.xxs,
+    },
+    filterAmount: {
+      color: theme.palette.grey[500],
+      marginLeft: 4,
+      fontSize: theme.typography.pxToRem(11),
+      display: 'inline',
+    },
+    filterLabel: {
+      display: 'inline',
+      overflow: 'hidden',
+      whiteSpace: 'break-spaces',
+    },
+  }),
+  { name: 'FilterEqual' },
+)
+
+export default function FilterEqualType(props: FilterEqualTypeProps) {
+  const { attribute_code, count, label, options, ...chipProps } = props
+  const { params } = useProductListParamsContext()
+  const classes = useFilterEqualStyles()
+  const pushRoute = useProductListLinkPush({ scroll: false })
+
+  const currentFilter: FilterEqualTypeInput = cloneDeep(params.filters[attribute_code]) ?? {
+    in: [],
+  }
+
+  const currentLabels =
+    options
+      ?.filter((option) => option && currentFilter.in?.includes(option.value))
+      .map((option) => option && option.label) ?? []
+
+  const removeFilter = () => {
+    const linkParams = cloneDeep(params)
+    delete linkParams.filters[attribute_code]
+    delete linkParams.currentPage
+    pushRoute(linkParams)
+  }
+
+  return (
+    <ChipMenu
+      variant='outlined'
+      {...chipProps}
+      label={label}
+      selected={currentLabels.length > 0}
+      selectedLabel={currentLabels.length > 0 ? currentLabels.join(', ') : undefined}
+      onDelete={currentLabels.length > 0 ? removeFilter : undefined}
+    >
+      <div className={classes.linkContainer}>
+        {options?.map((option) => {
+          if (!option?.value) return null
+          const labelId = `filter-equal-${attribute_code}-${option?.value}`
+          const filters = cloneDeep(params.filters)
+
+          if (currentFilter.in?.includes(option.value)) {
+            filters[attribute_code] = {
+              ...currentFilter,
+              in: currentFilter.in?.filter((v) => v !== option.value),
+            }
+          } else {
+            filters[attribute_code] = {
+              ...currentFilter,
+              in: [...(currentFilter?.in ?? []), option.value],
+            }
+          }
+
+          return (
+            <ProductListLink
+              {...params}
+              filters={filters}
+              currentPage={undefined}
+              key={option?.value}
+              color='inherit'
+            >
+              <ListItem dense className={classes.listItem}>
+                <div className={classes.listItemInnerContainer}>
+                  <ListItemText
+                    primary={option?.label}
+                    classes={{ primary: classes.filterLabel, secondary: classes.filterAmount }}
+                    secondary={`(${option?.count})`}
+                  />
+                  <ListItemSecondaryAction>
+                    <Checkbox
+                      edge='start'
+                      checked={currentFilter.in?.includes(option?.value ?? '')}
+                      tabIndex={-1}
+                      size='small'
+                      color='primary'
+                      disableRipple
+                      inputProps={{ 'aria-labelledby': labelId }}
+                      className={classes.checkbox}
+                    />
+                  </ListItemSecondaryAction>
+                </div>
+              </ListItem>
+            </ProductListLink>
+          )
+        })}
+      </div>
+    </ChipMenu>
+  )
+}

package/components/ProductListFilters/FilterRangeType.tsx

@@ -0,0 +1,170 @@
+import { cloneDeep } from '@apollo/client/utilities'
+import { makeStyles, Mark, Slider, Theme } from '@material-ui/core'
+import { FilterRangeTypeInput } from '@graphcommerce/graphql'
+import { Money } from '@graphcommerce/magento-store'
+import { ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
+import React from 'react'
+import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
+import { ProductListFiltersFragment } from './ProductListFilters.gql'
+
+type FilterRangeTypeProps = NonNullable<
+  NonNullable<ProductListFiltersFragment['aggregations']>[0]
+> &
+  Omit<ChipMenuProps, 'selected'>
+
+const sliderThumbWidth = 28
+const useFilterRangeType = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      padding: `${theme.spacings.xxs} ${theme.spacings.xxs} !important`,
+      width: '100%',
+    },
+    slider: {
+      maxWidth: `calc(100% - ${sliderThumbWidth}px)`,
+      margin: `${theme.spacings.xxs} auto`,
+      display: 'block',
+      paddingBottom: 32,
+      '& .MuiSlider-rail': {
+        color: theme.palette.secondary.mutedText,
+        height: 4,
+        borderRadius: 10,
+      },
+      '& .MuiSlider-track': {
+        color: theme.palette.primary.main,
+        height: 4,
+      },
+      '& .MuiSlider-thumb': {
+        width: sliderThumbWidth,
+        height: sliderThumbWidth,
+        marginLeft: `-${sliderThumbWidth * 0.5}px`,
+        marginTop: `-${sliderThumbWidth * 0.5}px`,
+        background: theme.palette.background.default,
+        boxShadow: theme.shadows[4],
+      },
+    },
+  }),
+  { name: 'FilterRangeType' },
+)
+
+export default function FilterRangeType(props: FilterRangeTypeProps) {
+  const { attribute_code, label, options, ...chipProps } = props
+  const classes = useFilterRangeType(props)
+  const { params } = useProductListParamsContext()
+  const pushRoute = useProductListLinkPush({ scroll: false })
+
+  // eslint-disable-next-line no-case-declarations
+  const marks: { [index: number]: Mark } = {}
+  const paramValues = params.filters[attribute_code]
+
+  const [min, maxish] = options
+    ?.map((option) => {
+      let val = option?.value.replace('*_', '0_') ?? ''
+      val = val.replace('_*', '_0')
+      const [minVal, maxVal] = val.split('_').map((value) => Number(value))
+
+      marks[minVal] = { value: minVal, label: minVal }
+      marks[maxVal] = { value: maxVal, label: maxVal }
+      return [minVal, maxVal]
+    })
+    .reduce(([prevMin, prevMax], [curMin, curMax]) => [
+      Math.min(prevMin, curMin),
+      Math.max(curMax, prevMax),
+    ]) ?? [0, 0]
+
+  // eslint-disable-next-line no-case-declarations
+  const max = (maxish / (options?.length ?? 2 - 1)) * (options?.length ?? 1)
+  marks[max] = { value: max, label: max }
+
+  const [value, setValue] = React.useState<[number, number]>(
+    paramValues ? [Number(paramValues.from), Number(paramValues.to)] : [min, max],
+  )
+
+  const priceFilterUrl = cloneDeep(params)
+  delete priceFilterUrl.currentPage
+  priceFilterUrl.filters[attribute_code] = {
+    from: String(value[0]),
+    to: String(value[1]),
+  } as FilterRangeTypeInput
+
+  const resetFilter = () => {
+    const linkParams = cloneDeep(params)
+
+    delete linkParams.currentPage
+    delete linkParams.filters[attribute_code]
+
+    setValue([min, max])
+    pushRoute(linkParams)
+  }
+
+  const currentFilter = params.filters[attribute_code] as FilterRangeTypeInput | undefined
+
+  let currentLabel: React.ReactNode | undefined
+
+  if (currentFilter) {
+    const from = Number(currentFilter?.from ?? 0)
+    const to = Number(currentFilter?.to ?? 0)
+
+    if (from === min && to !== max)
+      currentLabel = (
+        <>
+          {'Below '} <Money round value={Number(currentFilter?.to)} />
+        </>
+      )
+
+    if (from !== min && to === max)
+      currentLabel = (
+        <>
+          {'Above '} <Money round value={Number(currentFilter?.from)} />
+        </>
+      )
+
+    if (from !== min && to !== max)
+      currentLabel = (
+        <>
+          <Money round value={Number(currentFilter?.from)} />
+          {' — '}
+          <Money round value={Number(currentFilter.to)} />
+        </>
+      )
+  }
+
+  return (
+    <ChipMenu
+      variant='outlined'
+      label={label}
+      selectedLabel={currentLabel}
+      selected={!!currentLabel}
+      {...chipProps}
+      onDelete={currentLabel ? resetFilter : undefined}
+      labelRight={
+        <>
+          <Money round value={value[0]} />
+          {' — '}
+          <Money round value={value[1]} />
+        </>
+      }
+    >
+      <div className={classes.container}>
+        <Slider
+          min={min}
+          max={max}
+          aria-labelledby='range-slider'
+          value={value}
+          onChange={(e, newValue) => {
+            setValue(Array.isArray(newValue) ? [newValue[0], newValue[1]] : [0, 0])
+          }}
+          onChangeCommitted={(e, newValue) => {
+            if (newValue[0] > min || newValue[1] < max) {
+              pushRoute({ ...priceFilterUrl })
+            } else {
+              resetFilter()
+            }
+          }}
+          valueLabelDisplay='off'
+          className={classes.slider}
+        />
+      </div>
+    </ChipMenu>
+  )
+}

package/components/ProductListFilters/ProductFiltersQueryFragment.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductFiltersQueryFragment = { filters?: Types.Maybe<{ aggregations?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, count?: Types.Maybe<number>, attribute_code: string, options?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, value: string, count?: Types.Maybe<number> }>>> }>>> }> };

package/components/ProductListFilters/ProductFiltersQueryFragment.graphql

@@ -0,0 +1,5 @@
+fragment ProductFiltersQueryFragment on Query {
+  filters: products(filter: { category_uid: { eq: $categoryUid } }) {
+    ...ProductListFilters
+  }
+}

package/components/ProductListFilters/ProductListFilters.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductListFiltersFragment = { aggregations?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, count?: Types.Maybe<number>, attribute_code: string, options?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, value: string, count?: Types.Maybe<number> }>>> }>>> };

package/components/ProductListFilters/ProductListFilters.graphql

@@ -0,0 +1,12 @@
+fragment ProductListFilters on Products {
+  aggregations {
+    label
+    count
+    attribute_code
+    options {
+      label
+      value
+      count
+    }
+  }
+}

package/components/ProductListFilters/index.tsx

@@ -0,0 +1,61 @@
+import { ChipMenuProps } from '@graphcommerce/next-ui'
+import React from 'react'
+import { FilterTypes } from '../ProductListItems/filterTypes'
+import FilterCheckboxType from './FilterCheckboxType'
+import FilterEqualType from './FilterEqualType'
+import FilterRangeType from './FilterRangeType'
+import { ProductListFiltersFragment } from './ProductListFilters.gql'
+
+export type ProductFiltersProps = ProductListFiltersFragment & {
+  filterTypes: FilterTypes
+} & Omit<ChipMenuProps, 'selected' | 'selectedLabel' | 'children' | 'label' | 'onDelete'>
+
+export default function ProductListFilters(props: ProductFiltersProps) {
+  const { aggregations, filterTypes, ...chipMenuProps } = props
+
+  return (
+    <>
+      {aggregations?.map((aggregation) => {
+        if (!aggregation?.attribute_code || aggregation?.attribute_code === 'category_id')
+          return null
+
+        switch (filterTypes[aggregation.attribute_code]) {
+          case 'FilterEqualTypeInput':
+            if (
+              aggregation.options?.[0]?.label === '0' ||
+              aggregation.options?.[1]?.label === '0' ||
+              aggregation.options?.[0]?.label === '1' ||
+              aggregation.options?.[1]?.label === '1'
+            ) {
+              return (
+                <FilterCheckboxType
+                  key={aggregation.attribute_code}
+                  {...aggregation}
+                  {...chipMenuProps}
+                />
+              )
+            }
+
+            return (
+              <FilterEqualType
+                key={aggregation.attribute_code}
+                {...aggregation}
+                {...chipMenuProps}
+              />
+            )
+
+          case 'FilterRangeTypeInput':
+            return (
+              <FilterRangeType
+                key={aggregation.attribute_code}
+                {...aggregation}
+                {...chipMenuProps}
+              />
+            )
+        }
+        console.log('Filter not recognized', aggregation)
+        return null // `FilterMatchTypeInput not ${aggregation.attribute_code}`
+      })}
+    </>
+  )
+}

package/components/ProductListFiltersContainer/index.tsx

@@ -0,0 +1,140 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import {
+  iconChevronLeft,
+  iconChevronRight,
+  SvgImageSimple,
+  UseStyles,
+} from '@graphcommerce/next-ui'
+import clsx from 'clsx'
+import { m, useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    wrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      height: 44,
+      marginBottom: theme.spacings.sm,
+      position: 'sticky',
+      top: theme.page.vertical,
+      zIndex: 9,
+      margin: '0 auto',
+      maxWidth: `calc(100% - 96px - ${theme.spacings.sm} * 2)`,
+      [theme.breakpoints.down('sm')]: {
+        textAlign: 'center',
+        maxWidth: 'unset',
+        margin: `0 calc(${theme.page.horizontal} * -1)`,
+      },
+      [theme.breakpoints.down('xs')]: {
+        textAlign: 'center',
+      },
+    },
+    container: {
+      maxWidth: '100%',
+      padding: 6,
+      [theme.breakpoints.up('md')]: {
+        background: '#fff',
+        borderRadius: 22,
+        // padding: `0 3px`,
+      },
+    },
+    containerSticky: {},
+    scroller: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+      borderRadius: 22,
+      columnGap: 6,
+    },
+    scrollerSticky: {},
+    sliderPrev: {
+      position: 'absolute',
+      top: 2,
+      left: 2,
+      zIndex: 10,
+    },
+    sliderNext: {
+      position: 'absolute',
+      top: 2,
+      right: 2,
+      zIndex: 10,
+    },
+  }),
+  { name: 'ProductListFiltersContainer' },
+)
+
+export type ProductListFiltersContainerProps = PropsWithChildren<UseStyles<typeof useStyles>>
+
+export default function ProductListFiltersContainer(props: ProductListFiltersContainerProps) {
+  const { children } = props
+
+  const classes = useStyles(props)
+  const { scrollY } = useViewportScroll()
+  const [isSticky, setIsSticky] = useState<boolean>(false)
+  const [startPosition, setStartPosition] = useState(100)
+  const [spacing, setSpacing] = useState(20)
+  const scrollHalfway = startPosition + spacing
+
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  // Measure the sizing of the wrapping container
+  useEffect(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      if (window.scrollY > 100) return
+      const offset = wrapperRef.current?.offsetTop ?? 0
+      const elemHeigh = entry.contentRect.height
+      const nextOffset =
+        (wrapperRef.current?.parentElement?.nextElementSibling as HTMLElement | null)?.offsetTop ??
+        0
+
+      setSpacing(nextOffset - elemHeigh - offset + 20)
+      setStartPosition(offset)
+    })
+    if (wrapperRef.current) observer.observe(wrapperRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    const onCheckStickyChange = (v: number) => {
+      if (isSticky && v <= scrollHalfway) {
+        setIsSticky(false)
+      }
+      if (!isSticky && v > scrollHalfway) {
+        setIsSticky(true)
+      }
+    }
+    onCheckStickyChange(scrollY.get())
+    return scrollY.onChange(onCheckStickyChange)
+  }, [isSticky, scrollHalfway, scrollY])
+
+  const opacity = useTransform(scrollY, [startPosition, startPosition + spacing], [0, 0.08])
+  const opacity2 = useTransform(scrollY, [startPosition, startPosition + spacing], [0, 0.1])
+  const filter = useMotionTemplate`
+    drop-shadow(0 1px 4px rgba(0,0,0,${opacity}))
+    drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
+
+  return (
+    <m.div className={classes.wrapper} ref={wrapperRef}>
+      <ScrollerProvider scrollSnapAlign='none'>
+        <ScrollerButton direction='left' className={classes.sliderPrev}>
+          <SvgImageSimple src={iconChevronLeft} />
+        </ScrollerButton>
+        <m.div
+          className={clsx(classes.container, isSticky && classes.containerSticky)}
+          style={{ filter }}
+        >
+          <Scroller
+            className={clsx(classes.scroller, isSticky && classes.scrollerSticky)}
+            hideScrollbar
+          >
+            {children}
+          </Scroller>
+        </m.div>
+        <ScrollerButton direction='right' className={classes.sliderNext}>
+          <SvgImageSimple src={iconChevronRight} />
+        </ScrollerButton>
+      </ScrollerProvider>
+    </m.div>
+  )
+}