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

package/src/components/Slider/Slider.jsx

@@ -0,0 +1,103 @@
+/*
+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, { useEffect, useState } from 'react';
+
+import '../Slider/Slider.css';
+
+import { useProducts, useSearch } from '../../context';
+import useSliderFacet from '../../hooks/useSliderFacet';
+
+export const Slider = ({ filterData }) => {
+  const productsCtx = useProducts();
+  const [isFirstRender, setIsFirstRender] = useState(true);
+  const preSelectedToPrice = productsCtx.variables.filter?.find(
+    (obj) => obj.attribute === 'price'
+  )?.range?.to;
+
+  const searchCtx = useSearch();
+
+  const [selectedPrice, setSelectedPrice] = useState(
+    !preSelectedToPrice
+      ? filterData.buckets[filterData.buckets.length - 1].to
+      : preSelectedToPrice
+  );
+
+  const { onChange } = useSliderFacet(filterData);
+
+  useEffect(() => {
+    if (
+      searchCtx?.filters?.length === 0 ||
+      !searchCtx?.filters?.find((obj) => obj.attribute === 'price')
+    ) {
+      setSelectedPrice(filterData.buckets[filterData.buckets.length - 1].to);
+    }
+  }, [searchCtx]);
+
+  useEffect(() => {
+    if (!isFirstRender) {
+      setSelectedPrice(filterData.buckets[filterData.buckets.length - 1].to);
+    }
+    setIsFirstRender(false);
+  }, [filterData.buckets]);
+
+  const handleSliderChange = (event) => {
+    onChange(filterData.buckets[0].from, parseInt(event.target.value, 10));
+  };
+
+  const handleNewPrice = (event) => {
+    setSelectedPrice(parseInt(event.target.value, 10));
+  };
+
+  const formatLabel = (price) => {
+    const currencyRate = productsCtx.currencyRate || '1';
+    const currencySymbol = productsCtx.currencySymbol || '$';
+
+    const value =
+      price && parseFloat(currencyRate) * parseInt(price.toFixed(0), 10)
+        ? (parseFloat(currencyRate) * parseInt(price.toFixed(0), 10)).toFixed(2)
+        : 0;
+
+    return `${currencySymbol}${value}`;
+  };
+
+  return (
+    <>
+      <p className="pt-md">{filterData.title}</p>
+      <div className="ds-sdk-slider slider-container">
+        <input
+          type="range"
+          id="price-range"
+          className="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg dark:bg-gray-700"
+          min={filterData.buckets[0].from}
+          max={filterData.buckets[filterData.buckets.length - 1].to}
+          value={selectedPrice}
+          onChange={handleNewPrice}
+          onMouseUp={handleSliderChange}
+          onTouchEnd={handleSliderChange}
+          onKeyUp={handleSliderChange}
+        />
+        <span className="selected-price">{formatLabel(selectedPrice)}</span>
+        <div className="price-range-display">
+          <span className="min-price">
+            {formatLabel(filterData.buckets[0].from)}
+          </span>
+          <span className="max-price">
+            {formatLabel(
+              filterData.buckets[filterData.buckets.length - 1].to
+            )}
+          </span>
+        </div>
+      </div>
+      <div className="ds-sdk-input__border border-t mt-md border-gray-200" />
+    </>
+  );
+};
+
+export default Slider;

package/src/components/Slider/index.jsx

@@ -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 './Slider';
+export { default } from './Slider';

package/src/components/SliderDoubleControl/SliderDoubleControl.css

@@ -0,0 +1,83 @@
+.range_container {
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.sliders_control {
+    position: relative;
+}
+
+.form_control {
+    display: none;
+}
+
+input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    pointer-events: all;
+    width: 12px;
+    height: 12px;
+    background-color: #383838;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px #c6c6c6;
+    cursor: pointer;
+}
+
+input[type='range']::-moz-range-thumb {
+    -webkit-appearance: none;
+    pointer-events: all;
+    width: 12px;
+    height: 12px;
+    background-color: #383838;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px #c6c6c6;
+    cursor: pointer;
+}
+
+input[type='range']::-webkit-slider-thumb:hover {
+    background: #383838;
+}
+
+input[type='number'] {
+    color: #8a8383;
+    width: 50px;
+    height: 30px;
+    font-size: 20px;
+    border: none;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+    opacity: 1;
+}
+
+input[type='range'] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 2px;
+    width: 100%;
+    position: absolute;
+    background-color: #c6c6c6;
+    pointer-events: none;
+}
+
+.fromSlider {
+    height: 0;
+    z-index: 1;
+}
+
+.toSlider {
+    z-index: 2;
+}
+
+.price-range-display {
+    text-wrap: nowrap;
+    font-size: 0.8em;
+}
+
+.fromSlider,
+.toSlider {
+    box-shadow: none !important;
+}

package/src/components/SliderDoubleControl/SliderDoubleControl.jsx

@@ -0,0 +1,220 @@
+import React, { useEffect, useState } from 'react';
+import './SliderDoubleControl.css';
+
+import { useProducts, useSearch } from '../../context';
+import useSliderFacet from '../../hooks/useSliderFacet';
+
+export const SliderDoubleControl = ({ filterData }) => {
+  const productsCtx = useProducts();
+  const searchCtx = useSearch();
+  const min = filterData.buckets[0].from;
+  const max = filterData.buckets[filterData.buckets.length - 1].to;
+
+  const preSelectedToPrice = productsCtx.variables.filter?.find(
+    obj => obj.attribute === 'price'
+  )?.range?.to;
+  const preSelectedFromPrice = productsCtx.variables.filter?.find(
+    obj => obj.attribute === 'price'
+  )?.range?.from;
+
+  const [minVal, setMinVal] = useState(
+    preSelectedFromPrice !== null && preSelectedFromPrice !== undefined ? preSelectedFromPrice : min
+  );
+  const [maxVal, setMaxVal] = useState(
+    preSelectedToPrice !== null && preSelectedToPrice !== undefined ? preSelectedToPrice : max
+  );
+  
+  const { onChange } = useSliderFacet(filterData);
+
+  const fromSliderId = `fromSlider_${filterData.attribute}`;
+  const toSliderId = `toSlider_${filterData.attribute}`;
+  const fromInputId = `fromInput_${filterData.attribute}`;
+  const toInputId = `toInput_${filterData.attribute}`;
+
+  useEffect(() => {
+    if (
+      searchCtx?.filters?.length === 0 ||
+      !searchCtx?.filters?.find(obj => obj.attribute === filterData.attribute)
+    ) {
+      setMinVal(min);
+      setMaxVal(max);
+    }
+  }, [searchCtx]);
+
+  useEffect(() => {
+    const getParsed = (fromEl, toEl) => [
+      parseInt(fromEl.value, 10),
+      parseInt(toEl.value, 10)
+    ];
+
+    const fillSlider = (from, to, sliderColor, rangeColor, controlSlider) => {
+      const rangeDistance = to.max - to.min;
+      const fromPosition = from.value - to.min;
+      const toPosition = to.value - to.min;
+      controlSlider.style.background = `linear-gradient(
+        to right,
+        ${sliderColor} 0%,
+        ${sliderColor} ${(fromPosition / rangeDistance) * 100}%,
+        ${rangeColor} ${(fromPosition / rangeDistance) * 100}%,
+        ${rangeColor} ${(toPosition / rangeDistance) * 100}%,
+        ${sliderColor} ${(toPosition / rangeDistance) * 100}%,
+        ${sliderColor} 100%)`;
+    };
+
+    const controlFromSlider = (fromSlider, toSlider, fromInput) => {
+      const [from, to] = getParsed(fromSlider, toSlider);
+      fillSlider(fromSlider, toSlider, '#C6C6C6', '#383838', toSlider);
+      if (from > to) {
+        setMinVal(to);
+        fromSlider.value = to;
+        fromInput.value = to;
+      } else {
+        fromInput.value = from;
+      }
+    };
+
+    const controlToSlider = (fromSlider, toSlider, toInput) => {
+      const [from, to] = getParsed(fromSlider, toSlider);
+      fillSlider(fromSlider, toSlider, '#C6C6C6', '#383838', toSlider);
+      if (from <= to) {
+        toSlider.value = to;
+        toInput.value = to;
+      } else {
+        setMaxVal(from);
+        toInput.value = from;
+        toSlider.value = from;
+      }
+    };
+
+    const controlFromInput = (fromSlider, fromInput, toInput, controlSlider) => {
+      const [from, to] = getParsed(fromInput, toInput);
+      fillSlider(fromInput, toInput, '#C6C6C6', '#383838', controlSlider);
+      if (from > to) {
+        fromSlider.value = to;
+        fromInput.value = to;
+      } else {
+        fromSlider.value = from;
+      }
+    };
+
+    const controlToInput = (toSlider, fromInput, toInput, controlSlider) => {
+      const [from, to] = getParsed(fromInput, toInput);
+      fillSlider(fromInput, toInput, '#C6C6C6', '#383838', controlSlider);
+      if (from <= to) {
+        toSlider.value = to;
+        toInput.value = to;
+      } else {
+        toInput.value = from;
+      }
+    };
+
+    const fromSlider = document.getElementById(fromSliderId);
+    const toSlider = document.getElementById(toSliderId);
+    const fromInput = document.getElementById(fromInputId);
+    const toInput = document.getElementById(toInputId);
+
+    if (!fromSlider || !toSlider || !fromInput || !toInput) return;
+
+    fillSlider(fromSlider, toSlider, '#C6C6C6', '#383838', toSlider);
+
+    fromSlider.oninput = () => controlFromSlider(fromSlider, toSlider, fromInput);
+    toSlider.oninput = () => controlToSlider(fromSlider, toSlider, toInput);
+    fromInput.oninput = () =>
+      controlFromInput(fromSlider, fromInput, toInput, toSlider);
+    toInput.oninput = () =>
+      controlToInput(toSlider, fromInput, toInput, toSlider);
+  }, [minVal, maxVal]);
+
+  const formatLabel = (price) => {
+    const currencyRate = productsCtx.currencyRate || 1;
+    const currencySymbol = productsCtx.currencySymbol || '$';
+    const label = `${currencySymbol}${
+      price ? (parseFloat(currencyRate) * parseInt(price.toFixed(0), 10)).toFixed(2) : 0
+    }`;
+    return label;
+  };
+
+  return (
+    <div className="ds-sdk-input pt-md">
+      <label className="ds-sdk-input__label text-base font-normal text-gray-900">
+        {filterData.title}
+      </label>
+
+      <div className="ds-sdk-slider range_container">
+        <div className="sliders_control">
+          <input
+            className="ds-sdk-slider__from fromSlider"
+            id={fromSliderId}
+            type="range"
+            value={minVal}
+            min={min}
+            max={max}
+            onInput={({ target }) => setMinVal(Math.round(Number(target.value)))}
+            onMouseUp={() => onChange(minVal, maxVal)}
+            onTouchEnd={() => onChange(minVal, maxVal)}
+            onKeyUp={() => onChange(minVal, maxVal)}
+          />
+          <input
+            className="ds-sdk-slider__to toSlider"
+            id={toSliderId}
+            type="range"
+            value={maxVal}
+            min={min}
+            max={max}
+            onInput={({ target }) => setMaxVal(Math.round(Number(target.value)))}
+            onMouseUp={() => onChange(minVal, maxVal)}
+            onTouchEnd={() => onChange(minVal, maxVal)}
+            onKeyUp={() => onChange(minVal, maxVal)}
+          />
+        </div>
+
+        <div className="form_control">
+          <div className="form_control_container">
+            <div className="form_control_container__time">Min</div>
+            <input
+              className="form_control_container__time__input"
+              type="number"
+              id={fromInputId}
+              value={minVal}
+              min={min}
+              max={max}
+              onInput={({ target }) => setMinVal(Math.round(Number(target.value)))}
+              onMouseUp={() => onChange(minVal, maxVal)}
+              onTouchEnd={() => onChange(minVal, maxVal)}
+              onKeyUp={() => onChange(minVal, maxVal)}
+            />
+          </div>
+          <div className="form_control_container">
+            <div className="form_control_container__time">Max</div>
+            <input
+              className="form_control_container__time__input"
+              type="number"
+              id={toInputId}
+              value={maxVal}
+              min={min}
+              max={max}
+              onInput={({ target }) => setMaxVal(Math.round(Number(target.value)))}
+              onMouseUp={() => onChange(minVal, maxVal)}
+              onTouchEnd={() => onChange(minVal, maxVal)}
+              onKeyUp={() => onChange(minVal, maxVal)}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className={`price-range-display__${filterData.attribute} pb-3`}>
+        <span className="ml-sm block-display text-sm font-light text-gray-700">
+          Between{' '}
+          <span className="min-price text-gray-900 font-semibold">
+            {formatLabel(minVal)}
+          </span>{' '}
+          and{' '}
+          <span className="max-price text-gray-900 font-semibold">
+            {formatLabel(maxVal)}
+          </span>
+        </span>
+      </div>
+      <div className="ds-sdk-input__border border-t mt-md border-gray-200" />
+    </div>
+  );
+};

package/src/components/SliderDoubleControl/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 './SliderDoubleControl';
+export { SliderDoubleControl as default } from './SliderDoubleControl';

package/src/components/SortDropdown/SortDropdown.jsx

@@ -0,0 +1,126 @@
+/*
+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, { useEffect, useRef } from 'react';
+import { useTranslation } from '../../context/translation';
+import { useAccessibleDropdown } from '../../hooks/useAccessibleDropdown';
+import Chevron from '../../icons/chevron.svg';
+import SortIcon from '../../icons/sort.svg';
+
+export const SortDropdown = ({ value, sortOptions, onChange }) => {
+  const sortOptionButton = useRef(null);
+  const sortOptionMenu = useRef(null);
+
+  const selectedOption = sortOptions.find(e => e.value === value);
+
+  const translation = useTranslation();
+  const sortOptionTranslation = translation.SortDropdown.option;
+  const sortOption = sortOptionTranslation.replace(
+    '{selectedOption}',
+    `${selectedOption?.label}`
+  );
+
+  const {
+    isDropdownOpen,
+    setIsDropdownOpen,
+    activeIndex,
+    setActiveIndex,
+    select,
+    setIsFocus,
+    listRef
+  } = useAccessibleDropdown({
+    options: sortOptions,
+    value,
+    onChange
+  });
+
+  useEffect(() => {
+    const menuRef = sortOptionMenu.current;
+
+    const handleBlur = () => {
+      setIsFocus(false);
+      setIsDropdownOpen(false);
+    };
+
+    const handleFocus = () => {
+      if (menuRef?.parentElement?.querySelector(':hover') !== menuRef) {
+        setIsFocus(false);
+        setIsDropdownOpen(false);
+      }
+    };
+
+    menuRef?.addEventListener('blur', handleBlur);
+    menuRef?.addEventListener('focusin', handleFocus);
+    menuRef?.addEventListener('focusout', handleFocus);
+
+    return () => {
+      menuRef?.removeEventListener('blur', handleBlur);
+      menuRef?.removeEventListener('focusin', handleFocus);
+      menuRef?.removeEventListener('focusout', handleFocus);
+    };
+  }, [sortOptionMenu]);
+
+  return (
+    <div
+      ref={sortOptionMenu}
+      className="ds-sdk-sort-dropdown relative inline-block text-left bg-gray-100 rounded-md outline outline-1 outline-gray-200 hover:outline-gray-600 h-[32px] z-99"
+    >
+      <button
+        className="group flex justify-center items-center font-normal text-sm text-gray-700 rounded-md hover:cursor-pointer 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 h-full w-full px-sm"
+        ref={sortOptionButton}
+        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        onFocus={() => setIsFocus(false)}
+        onBlur={() => setIsFocus(false)}
+      >
+        <img src={SortIcon} className="h-md w-md mr-sm stroke-gray-600 m-auto" height="32px" width="32px" />
+        {/* <SortIcon className="h-md w-md mr-sm stroke-gray-600 m-auto" /> */}
+        {selectedOption ? sortOption : translation.SortDropdown.title}
+        <img src={Chevron} className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-gray-600 ${
+            isDropdownOpen ? '' : 'rotate-180'
+          }`} height="32px" width="32px" />
+        {/* <Chevron
+          className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-gray-600 ${
+            isDropdownOpen ? '' : 'rotate-180'
+          }`}
+        /> */}
+      </button>
+      {isDropdownOpen && (
+        <ul
+          ref={listRef}
+          tabIndex={-1}
+          className="ds-sdk-sort-dropdown__items origin-top-right absolute hover:cursor-pointer right-0 w-full rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
+        >
+          {sortOptions.map((option, i) => (
+            <li
+              key={i}
+              aria-selected={option.value === selectedOption?.value}
+              onMouseOver={() => setActiveIndex(i)}
+              className={`py-xs hover:bg-gray-100 hover:text-gray-900 ${
+                i === activeIndex ? 'bg-gray-100 text-gray-900' : ''
+              }`}
+            >
+              <a
+                className={`ds-sdk-sort-dropdown__items--item block-display px-md py-sm text-sm mb-0
+                no-underline active:no-underline focus:no-underline hover:no-underline
+                hover:text-gray-900 ${
+                  option.value === selectedOption?.value
+                    ? 'ds-sdk-sort-dropdown__items--item-selected font-semibold text-gray-900'
+                    : 'font-normal text-gray-800'
+                }`}
+                onClick={() => select(option.value)}
+              >
+                {option.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};

package/src/components/SortDropdown/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 './SortDropdown';
+export { SortDropdown as default } from './SortDropdown';

package/src/components/SwatchButton/SwatchButton.jsx

@@ -0,0 +1,72 @@
+/*
+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';
+
+export const SwatchButton = ({ id, value, type, checked, onClick }) => {
+  const outlineColor = checked
+    ? 'border-black'
+    : type === 'COLOR_HEX'
+    ? 'border-transparent'
+    : 'border-gray';
+
+  if (type === 'COLOR_HEX') {
+    const color = value.toLowerCase();
+    const className = `min-w-[32px] rounded-full p-sm border border-[1.5px] ${outlineColor} h-[32px] outline-transparent`;
+    const isWhite = color === '#ffffff' || color === '#fff';
+    return (
+      <div className={`ds-sdk-swatch-button_${id}`}>
+        <button
+          key={id}
+          className={className}
+          style={{
+            backgroundColor: color,
+            border: !checked && isWhite ? '1px solid #ccc' : undefined,
+          }}
+          onClick={onClick}
+          aria-checked={checked}
+        />
+      </div>
+    );
+  }
+
+  if (type === 'IMAGE' && value) {
+    const className = `object-cover object-center min-w-[32px] rounded-full p-sm border border-[1.5px] ${outlineColor} h-[32px] outline-transparent`;
+    const style = {
+      background: `url(${value}) no-repeat center`,
+      backgroundSize: 'initial',
+    };
+    return (
+      <div className={`ds-sdk-swatch-button_${value}`}>
+        <button
+          key={id}
+          className={className}
+          style={style}
+          onClick={onClick}
+          aria-checked={checked}
+        />
+      </div>
+    );
+  }
+
+  // Assume TEXT type
+  const className = `flex items-center bg-white rounded-full p-sm border border-[1.5px]h-[32px] ${outlineColor} outline-transparent`;
+  return (
+    <div className={`ds-sdk-swatch-button_${value}`}>
+      <button
+        key={id}
+        className={className}
+        onClick={onClick}
+        aria-checked={checked}
+      >
+        {value}
+      </button>
+    </div>
+  );
+};

package/src/components/SwatchButton/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 './SwatchButton';
+export { SwatchButton as default } from './SwatchButton';