@magento/venia-pwa-live-search 1.0.0-alpha6

package/src/components/Facets/Facets.jsx

@@ -0,0 +1,50 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import React from 'react';
+
+import { useStore } from '../../context';
+import RangeFacet from './Range/RangeFacet';
+import ScalarFacet from './Scalar/ScalarFacet';
+import SliderDoubleControl from '../SliderDoubleControl';
+
+export const Facets = ({ searchFacets }) => {
+  const {
+    config: { priceSlider },
+  } = useStore();
+
+  return (
+    <div className="ds-plp-facets flex flex-col">
+      <form className="ds-plp-facets__list border-t border-gray-200">
+        {searchFacets?.map((facet) => {
+          const bucketType = facet?.buckets[0]?.__typename;
+          switch (bucketType) {
+            case 'ScalarBucket':
+              return <ScalarFacet key={facet.attribute} filterData={facet} />;
+            case 'RangeBucket':
+              return priceSlider ? (
+                <SliderDoubleControl filterData={facet} />
+              ) : (
+                <RangeFacet
+                  key={facet.attribute}
+                  filterData={facet}
+                />
+              );
+            case 'CategoryView':
+              return <ScalarFacet key={facet.attribute} filterData={facet} />;
+            default:
+              return null;
+          }
+        })}
+      </form>
+    </div>
+  );
+};
+
+export default Facets;

package/src/components/Facets/Range/RangeFacet.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import useRangeFacet from '../../../hooks/useRangeFacet';
+import { InputButtonGroup } from '../../InputButtonGroup';
+
+const RangeFacet = ({ filterData }) => {
+    const { isSelected, onChange } = useRangeFacet(filterData);
+
+    return (
+        <InputButtonGroup
+            title={filterData.title}
+            attribute={filterData.attribute}
+            buckets={filterData.buckets}
+            type="radio"
+            isSelected={isSelected}
+            onChange={e => onChange(e.value)}
+        />
+    );
+};
+
+export default RangeFacet;

package/src/components/Facets/Scalar/ScalarFacet.js

@@ -0,0 +1,29 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import React from 'react';
+import { InputButtonGroup } from '../../InputButtonGroup';
+import useScalarFacet from '../../../hooks/useScalarFacet';
+
+const ScalarFacet = ({ filterData }) => {
+    const { isSelected, onChange } = useScalarFacet(filterData);
+
+    return (
+        <InputButtonGroup
+            title={filterData.title}
+            attribute={filterData.attribute}
+            buckets={filterData.buckets}
+            type="checkbox"
+            isSelected={isSelected}
+            onChange={args => onChange(args.value, args.selected)}
+        />
+    );
+};
+
+export default ScalarFacet;

package/src/components/Facets/SelectedFilters.js

@@ -0,0 +1,80 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+import React from 'react';
+import { useSearch, useProducts, useTranslation } from '../../context';
+import Pill from '../Pill';
+import { formatBinaryLabel, formatRangeLabel } from './format';
+
+const SelectedFilters = () => {
+    const searchCtx = useSearch();
+    const productsCtx = useProducts();
+    const translation = useTranslation();
+
+    return (
+        <div className="w-full h-full">
+            {searchCtx.filters?.length > 0 && (
+                <div className="ds-plp-facets__pills pb-6 sm:pb-6 flex flex-wrap mt-8 justify-start">
+                    {searchCtx.filters.map(filter => (
+                        <div key={filter.attribute}>
+                            {filter.in?.map(option => (
+                                <Pill
+                                    key={formatBinaryLabel(
+                                        filter,
+                                        option,
+                                        searchCtx.categoryNames,
+                                        productsCtx.categoryPath
+                                    )}
+                                    label={formatBinaryLabel(
+                                        filter,
+                                        option,
+                                        searchCtx.categoryNames,
+                                        productsCtx.categoryPath
+                                    )}
+                                    type="transparent"
+                                    onClick={() =>
+                                        searchCtx.updateFilterOptions(
+                                            filter,
+                                            option
+                                        )
+                                    }
+                                />
+                            ))}
+                            {filter.range && (
+                                <Pill
+                                    label={formatRangeLabel(
+                                        filter,
+                                        productsCtx.currencyRate,
+                                        productsCtx.currencySymbol
+                                    )}
+                                    type="transparent"
+                                    onClick={() => {
+                                        searchCtx.removeFilter(
+                                            filter.attribute
+                                        );
+                                    }}
+                                />
+                            )}
+                        </div>
+                    ))}
+                    <div className="py-1">
+                        <button
+                            className="ds-plp-facets__header__clear-all border-none bg-transparent hover:border-none	hover:bg-transparent
+              focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none text-sm px-4"
+                            onClick={() => searchCtx.clearFilters()}
+                        >
+                            {translation.Filter.clearAll}
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default SelectedFilters;

package/src/components/Facets/format.js

@@ -0,0 +1,52 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+const formatRangeLabel = (filter, currencyRate = '1', currencySymbol = '$') => {
+    const range = filter.range;
+
+    const rate = currencyRate;
+    const symbol = currencySymbol;
+    const label = `${symbol}${
+        range?.from && parseFloat(rate) * parseInt(range.from.toFixed(0), 10)
+            ? (
+                  parseFloat(rate) * parseInt(range.from?.toFixed(0), 10)
+              )?.toFixed(2)
+            : 0
+    }${
+        range?.to && parseFloat(rate) * parseInt(range.to.toFixed(0), 10)
+            ? ` - ${symbol}${(
+                  parseFloat(rate) * parseInt(range.to.toFixed(0), 10)
+              ).toFixed(2)}`
+            : ' and above'
+    }`;
+    return label;
+};
+
+const formatBinaryLabel = (filter, option, categoryNames, categoryPath) => {
+    if (categoryPath && categoryNames) {
+        const category = categoryNames.find(
+            facet =>
+                facet.attribute === filter.attribute && facet.value === option
+        );
+
+        if (category?.name) {
+            return category.name;
+        }
+    }
+
+    const title = filter.attribute?.split('_');
+    if (option === 'yes') {
+        return title.join(' ');
+    } else if (option === 'no') {
+        return `not ${title.join(' ')}`;
+    }
+    return option;
+};
+
+export { formatBinaryLabel, formatRangeLabel };

package/src/components/Facets/index.js

@@ -0,0 +1,14 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './Facets';
+export { default as SelectedFilters } from './SelectedFilters';
+export * from './Range/RangeFacet';
+export * from './Scalar/ScalarFacet';
+export { Facets as default } from './Facets';

package/src/components/Facets/mocks.js

@@ -0,0 +1,119 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+const colorBuckets = [
+    {
+        count: 5,
+        title: 'Green',
+        __typename: 'ScalarBucket'
+    },
+    {
+        count: 4,
+        title: 'Black',
+        __typename: 'ScalarBucket'
+    },
+    {
+        count: 3,
+        title: 'Blue',
+        __typename: 'ScalarBucket'
+    },
+    {
+        count: 2,
+        title: 'Gray',
+        __typename: 'ScalarBucket'
+    },
+    {
+        count: 1,
+        title: 'Pink',
+        __typename: 'ScalarBucket'
+    },
+    {
+        count: 0,
+        title: 'Yellow',
+        __typename: 'ScalarBucket'
+    }
+];
+
+const sizeBuckets = [
+    {
+        count: 2,
+        title: '32',
+        __typename: 'ScalarBucket'
+    },
+    {
+        count: 2,
+        title: '33',
+        __typename: 'ScalarBucket'
+    },
+    {
+        count: 1,
+        title: 'L',
+        __typename: 'ScalarBucket'
+    }
+];
+
+const priceBuckets = [
+    {
+        title: '0.0-25.0',
+        __typename: 'RangeBucket',
+        from: 0,
+        to: 25,
+        count: 45
+    },
+    {
+        title: '25.0-50.0',
+        __typename: 'RangeBucket',
+        from: 25,
+        to: 50,
+        count: 105
+    },
+    {
+        title: '75.0-100.0',
+        __typename: 'RangeBucket',
+        from: 75,
+        to: 100,
+        count: 6
+    },
+    {
+        title: '200.0-225.0',
+        __typename: 'RangeBucket',
+        from: 200,
+        to: 225,
+        count: 2
+    }
+];
+
+export const mockFilters = [
+    {
+        title: 'Color',
+        attribute: 'color',
+        buckets: colorBuckets,
+        __typename: 'ScalarBucket'
+    },
+    {
+        title: 'Size',
+        attribute: 'size',
+        buckets: sizeBuckets,
+        __typename: 'ScalarBucket'
+    }
+];
+
+export const mockColorFilter = {
+    title: 'Color',
+    attribute: 'color',
+    buckets: colorBuckets,
+    __typename: 'ScalarBucket'
+};
+
+export const mockPriceFilter = {
+    title: 'Price',
+    attribute: 'price',
+    buckets: priceBuckets,
+    __typename: 'RangeBucket'
+};

package/src/components/FacetsShimmer/FacetsShimmer.css

@@ -0,0 +1,49 @@
+@keyframes placeholderShimmer {
+    0% {
+        background-position: calc(-100vw + 40px); /* 40px offset */
+    }
+    100% {
+        background-position: calc(100vw - 40px); /* 40px offset */
+    }
+}
+
+.shimmer-animation-facet {
+    background-color: #f6f7f8;
+    background-image: linear-gradient(
+        to right,
+        #f6f7f8 0%,
+        #edeef1 20%,
+        #f6f7f8 40%,
+        #f6f7f8 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 100vw 4rem;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeholderShimmer;
+    animation-timing-function: linear;
+}
+
+.ds-sdk-input__header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    margin-top: 0.75rem;
+}
+
+.ds-sdk-input__title {
+    height: 2.5rem;
+    flex: 0 0 auto;
+    width: 50%;
+}
+
+.ds-sdk-input__item {
+    height: 2rem;
+    width: 80%;
+    margin-bottom: 0.3125rem;
+}
+
+.ds-sdk-input__item:last-child {
+    margin-bottom: 0;
+}

package/src/components/FacetsShimmer/FacetsShimmer.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './FacetsShimmer.css';
+
+export const FacetsShimmer = () => {
+  return (
+    <>
+      <div className="ds-sdk-input ds-sdk-input--loading">
+        <div className="ds-sdk-input__content">
+          <div className="ds-sdk-input__header">
+            <div className="ds-sdk-input__title shimmer-animation-facet" />
+          </div>
+          <div className="ds-sdk-input__list">
+            <div className="ds-sdk-input__item shimmer-animation-facet" />
+            <div className="ds-sdk-input__item shimmer-animation-facet" />
+            <div className="ds-sdk-input__item shimmer-animation-facet" />
+            <div className="ds-sdk-input__item shimmer-animation-facet" />
+          </div>
+        </div>
+      </div>
+      <div className="ds-sdk-input__border border-t mt-md border-gray-200" />
+    </>
+  );
+};
+
+//export default FacetsShimmer;

package/src/components/FacetsShimmer/index.js

@@ -0,0 +1,11 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './FacetsShimmer';
+export { FacetsShimmer as default } from './FacetsShimmer';

package/src/components/FilterButton/FilterButton.jsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import React from 'react';
+import { useTranslation } from '../../context/translation';
+import AdjustmentsIcon from '../../icons/adjustments.svg';
+
+export const FilterButton = ({ displayFilter, type, title }) => {
+  const translation = useTranslation();
+
+  return type === 'mobile' ? (
+    <div className="ds-sdk-filter-button">
+      <button
+        className="flex items-center bg-gray-100 ring-black ring-opacity-5 rounded-md p-sm outline outline-gray-200 hover:outline-gray-800 h-[32px]"
+        onClick={displayFilter}
+      >
+        {/* <AdjustmentsIcon className="w-md" /> */}
+        <img src={AdjustmentsIcon} className={`w-md`} />
+        {translation.Filter.title}
+      </button>
+    </div>
+  ) : (
+    <div className="ds-sdk-filter-button-desktop">
+      <button
+        className="flex items-center bg-gray-100 ring-black ring-opacity-5 rounded-md p-sm text-sm h-[32px]"
+        onClick={displayFilter}
+      >
+        {title}
+      </button>
+    </div>
+  );
+};
+
+export default FilterButton;

package/src/components/FilterButton/index.js

@@ -0,0 +1,11 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './FilterButton';
+export { default as FilterButton } from './FilterButton';

package/src/components/ImageCarousel/Image.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useIntersectionObserver } from '../../utils/useIntersectionObserver';
+
+export const Image = ({
+  image,
+  alt,
+  carouselIndex,
+  index,
+}) => {
+  const imageRef = useRef(null);
+  const [imageUrl, setImageUrl] = useState('');
+  const [isVisible, setIsVisible] = useState(false);
+  const entry = useIntersectionObserver(imageRef, { rootMargin: '200px' });
+
+  useEffect(() => {
+    if (!entry) return;
+
+    if (entry?.isIntersecting && index === carouselIndex) {
+      setIsVisible(true);
+      setImageUrl(entry?.target?.dataset.src || '');
+    }
+  }, [entry, carouselIndex, index, image]);
+
+  return (
+    <img
+      className={`aspect-auto w-100 h-auto ${isVisible ? 'visible' : 'invisible'}`}
+      ref={imageRef}
+      src={imageUrl}
+      data-src={typeof image === 'object' ? image.src : image}
+      srcSet={typeof image === 'object' ? image.srcset : null}
+      alt={alt}
+    />
+  );
+};

package/src/components/ImageCarousel/ImageCarousel.jsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { Image } from './Image';
+
+export const ImageCarousel = ({
+  images,
+  productName,
+  carouselIndex,
+  setCarouselIndex,
+}) => {
+  const [swipeIndex, setSwipeIndex] = useState(0);
+
+  const cirHandler = (index) => {
+    setCarouselIndex(index);
+  };
+
+  const prevHandler = () => {
+    if (carouselIndex === 0) {
+      setCarouselIndex(0);
+    } else {
+      setCarouselIndex((prev) => prev - 1);
+    }
+  };
+
+  const nextHandler = () => {
+    if (carouselIndex === images.length - 1) {
+      setCarouselIndex(0);
+    } else {
+      setCarouselIndex((prev) => prev + 1);
+    }
+  };
+
+  return (
+    <div className="ds-sdk-product-image-carousel max-h-[250px] max-w-2xl m-auto">
+      <div
+        className="flex flex-nowrap overflow-hidden relative rounded-lg w-full h-full"
+        onTouchStart={(e) => setSwipeIndex(e.touches[0].clientX)}
+        onTouchEnd={(e) => {
+          const endIndex = e.changedTouches[0].clientX;
+          if (swipeIndex > endIndex) {
+            nextHandler();
+          } else if (swipeIndex < endIndex) {
+            prevHandler();
+          }
+        }}
+      >
+        <div className="overflow-hidden relative max-w-[200px]">
+          <div
+            className={`flex transition ease-out duration-40`}
+            style={{
+              transform: `translateX(-${carouselIndex * 100}%)`,
+            }}
+          >
+            {images.map((item, index) => {
+              return (
+                <Image
+                  image={item}
+                  carouselIndex={carouselIndex}
+                  index={index}
+                  key={index}
+                  alt={productName}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      {images.length > 1 && (
+        <div className="absolute z-1 flex space-x-3 -translate-x-1/2 bottom-0 left-1/2 pb-2 ">
+          {images.map((_item, index) => {
+            return (
+              <span
+                key={index}
+                style={
+                  carouselIndex === index
+                    ? {
+                        width: `12px`,
+                        height: `12px`,
+                        borderRadius: `50%`,
+                        border: `1px solid black`,
+                        cursor: `pointer`,
+                        backgroundColor: `#252525`,
+                      }
+                    : {
+                        width: `12px`,
+                        height: `12px`,
+                        borderRadius: `50%`,
+                        border: `1px solid silver`,
+                        cursor: `pointer`,
+                        backgroundColor: `silver`,
+                      }
+                }
+                onClick={(e) => {
+                  e.preventDefault();
+                  cirHandler(index);
+                }}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/ImageCarousel/index.js

@@ -0,0 +1,11 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './ImageCarousel';
+export { ImageCarousel as default } from './ImageCarousel';