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

package/src/components/InputButtonGroup/InputButtonGroup.jsx

@@ -0,0 +1,120 @@
+/*
+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, { useState } from 'react';
+
+import { useProducts, useTranslation } from '../../context';
+import PlusIcon from '../../icons/plus.svg';
+import { BOOLEAN_NO, BOOLEAN_YES } from '../../utils/constants';
+import { LabelledInput } from '../LabelledInput';
+
+const numberOfOptionsShown = 5;
+
+const InputButtonGroup = ({
+  title,
+  attribute,
+  buckets,
+  isSelected,
+  onChange,
+  type,
+  inputGroupTitleSlot
+}) => {
+  const translation = useTranslation();
+  const productsCtx = useProducts();
+
+  const [showMore, setShowMore] = useState(buckets.length < numberOfOptionsShown);
+
+  const numberOfOptions = showMore ? buckets.length : numberOfOptionsShown;
+
+  const onInputChange = (title, e) => {
+    onChange({
+      value: title,
+      selected: e?.target?.checked
+    });
+  };
+
+  const formatLabel = (title, bucket) => {
+    if (bucket.__typename === 'RangeBucket') {
+      const currencyRate = productsCtx.currencyRate || '1';
+      const currencySymbol = productsCtx.currencySymbol || '$';
+      const from = bucket?.from
+        ? (parseFloat(currencyRate) * parseInt(bucket.from.toFixed(0), 10)).toFixed(2)
+        : 0;
+      const to = bucket?.to
+        ? ` - ${currencySymbol}${(
+            parseFloat(currencyRate) * parseInt(bucket.to.toFixed(0), 10)
+          ).toFixed(2)}`
+        : translation.InputButtonGroup.priceRange;
+      return `${currencySymbol}${from}${to}`;
+    } else if (bucket.__typename === 'CategoryView') {
+      return productsCtx.categoryPath ? (bucket.name !== undefined && bucket.name !== null ? bucket.name : bucket.title) : bucket.title;
+    } else if (bucket.title === BOOLEAN_YES) {
+      return title;
+    } else if (bucket.title === BOOLEAN_NO) {
+      const excludedMessageTranslation = translation.InputButtonGroup.priceExcludedMessage;
+      const excludedMessage = excludedMessageTranslation.replace('{title}', `${title}`);
+      return excludedMessage;
+    }
+    return bucket.title;
+  };
+
+  return (
+    <div className="ds-sdk-input pt-md">
+      {inputGroupTitleSlot ? (
+        inputGroupTitleSlot(title)
+      ) : (
+        <label className="ds-sdk-input__label text-base font-normal text-gray-900">
+          {title}
+        </label>
+      )}
+      <fieldset className="ds-sdk-input__options mt-md">
+        <div className="space-y-4">
+          {buckets.slice(0, numberOfOptions).map((option) => {
+            if (!option.title) {
+              return null;
+            }
+            const checked = isSelected(option.title);
+            const noShowPriceBucketCount = option.__typename === 'RangeBucket';
+            return (
+              <LabelledInput
+                key={formatLabel(title, option)}
+                name={`${option.title}-${attribute}`}
+                attribute={attribute}
+                label={formatLabel(title, option)}
+                checked={!!checked}
+                value={option.title}
+                count={noShowPriceBucketCount ? null : option.count}
+                onChange={(e) => onInputChange(option.title, e)}
+                type={type}
+              />
+            );
+          })}
+          {!showMore && buckets.length > numberOfOptionsShown && (
+            <div
+              className="ds-sdk-input__fieldset__show-more flex items-center text-gray-700 cursor-pointer"
+              onClick={() => setShowMore(true)}
+            >
+              <img src={PlusIcon} height="16px" width="16px" className="h-md w-md fill-gray-500" />
+              {/* <PlusIcon className="h-md w-md fill-gray-500" /> */}
+              <button
+                type="button"
+                className="ml-sm font-light 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 text-sm"
+              >
+                {translation.InputButtonGroup.showmore}
+              </button>
+            </div>
+          )}
+        </div>
+      </fieldset>
+      <div className="ds-sdk-input__border border-t mt-md border-gray-200" />
+    </div>
+  );
+};
+
+export default InputButtonGroup;

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

package/src/components/LabelledInput/LabelledInput.jsx

@@ -0,0 +1,51 @@
+/*
+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 LabelledInput = ({
+  type,
+  checked,
+  onChange,
+  name,
+  label,
+  attribute,
+  value,
+  count,
+}) => {
+  return (
+    <div className="ds-sdk-labelled-input flex items-center">
+      <input
+        id={name}
+        name={
+          type === 'checkbox'
+            ? `checkbox-group-${attribute}`
+            : `radio-group-${attribute}`
+        }
+        type={type}
+        className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-gray-600 min-w-[16px]"
+        checked={checked}
+        aria-checked={checked}
+        onChange={onChange}
+        value={value}
+      />
+      <label
+        htmlFor={name}
+        className="ds-sdk-labelled-input__label ml-sm block-display text-sm font-light text-gray-700 cursor-pointer"
+      >
+        {label}
+        {count != null && (
+          <span className="text-[12px] font-light text-gray-700 ml-1">
+            {`(${count})`}
+          </span>
+        )}
+      </label>
+    </div>
+  );
+};

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

package/src/components/Loading/Loading.jsx

@@ -0,0 +1,32 @@
+/*
+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 LoadingIcon from '../../icons/loading.svg';
+
+export const Loading = ({ label }) => {
+  const isMobile = typeof window !== 'undefined' &&
+    window.matchMedia('only screen and (max-width: 768px)').matches;
+
+  return (
+    <div
+      className={`ds-sdk-loading flex h-screen justify-center items-center ${
+        isMobile ? 'loading-spinner-on-mobile' : ''
+      }`}
+    >
+      <div className="ds-sdk-loading__spinner bg-gray-100 rounded-full p-xs flex w-fit my-lg outline-gray-200">
+        {/* <LoadingIcon className="inline-block mr-xs ml-xs w-md animate-spin fill-primary" /> */}
+        <img src={LoadingIcon} className={`inline-block mr-xs ml-xs w-md animate-spin fill-primary`} />
+        <span className="ds-sdk-loading__spinner-label p-xs">{label}</span>
+      </div>
+    </div>
+  );
+};
+
+export default Loading;

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

package/src/components/NoResults/NoResults.jsx

@@ -0,0 +1,55 @@
+/*
+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 NoResults = ({ heading, subheading, isError }) => {
+  return (
+    <div className="ds-sdk-no-results__page">
+      {isError ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-28 w-28 my-0 mx-auto stroke-gray-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-28 w-28 my-0 mx-auto stroke-gray-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      )}
+      <h1 className="ds-sdk-no-results__page__heading text-2xl text-center text-gray-600">
+        {heading}
+      </h1>
+      <h3 className="ds-sdk-no-results__page__subheading text-lg text-center text-gray-500">
+        {subheading}
+      </h3>
+    </div>
+  );
+};
+
+export default NoResults;

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

package/src/components/Pagination/Pagination.jsx

@@ -0,0 +1,105 @@
+/*
+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 } from 'react';
+
+import { useProducts } from '../../context';
+import { ELLIPSIS, usePagination } from '../../hooks/usePagination';
+import Chevron from '../../icons/chevron.svg';
+
+export const Pagination = ({ onPageChange, totalPages, currentPage }) => {
+  const productsCtx = useProducts();
+  const paginationRange = usePagination({
+    currentPage,
+    totalPages,
+  });
+
+  useEffect(() => {
+    const { currentPage: ctxCurrentPage, totalPages: ctxTotalPages } = productsCtx;
+    if (ctxCurrentPage > ctxTotalPages) {
+      onPageChange(ctxTotalPages);
+    }
+  }, []); // Only run on mount
+
+  const onPrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const onNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  return (
+    <ul className="ds-plp-pagination flex justify-center items-center mt-2 mb-6 list-none">
+      <img src={Chevron} className={`h-sm w-sm transform rotate-90 ${
+          currentPage === 1
+            ? 'stroke-gray-400 cursor-not-allowed'
+            : 'stroke-gray-600 cursor-pointer'
+        }`}
+        onClick={onPrevious}
+      /> 
+      {/* <Chevron
+        className={`h-sm w-sm transform rotate-90 ${
+          currentPage === 1
+            ? 'stroke-gray-400 cursor-not-allowed'
+            : 'stroke-gray-600 cursor-pointer'
+        }`}
+        onClick={onPrevious}
+      /> */}
+
+      {paginationRange?.map((page) => {
+        if (page === ELLIPSIS) {
+          return (
+            <li
+              key={`ellipsis-${Math.random()}`}
+              className="ds-plp-pagination__dots text-gray-500 mx-sm my-auto"
+            >
+              ...
+            </li>
+          );
+        }
+
+        return (
+          <li
+            key={page}
+            className={`ds-plp-pagination__item flex items-center cursor-pointer text-center text-gray-500 my-auto mx-sm ${
+              currentPage === page
+                ? 'ds-plp-pagination__item--current text-black font-medium underline underline-offset-4 decoration-black'
+                : ''
+            }`}
+            onClick={() => onPageChange(page)}
+          >
+            {page}
+          </li>
+        );
+      })}
+      <img src={Chevron} className={`h-sm w-sm transform -rotate-90 ${
+          currentPage === totalPages
+            ? 'stroke-gray-400 cursor-not-allowed'
+            : 'stroke-gray-600 cursor-pointer'
+        }`}
+        onClick={onNext}
+      />
+      {/* <Chevron
+        className={`h-sm w-sm transform -rotate-90 ${
+          currentPage === totalPages
+            ? 'stroke-gray-400 cursor-not-allowed'
+            : 'stroke-gray-600 cursor-pointer'
+        }`}
+        onClick={onNext}
+      /> */}
+    </ul>
+  );
+};
+
+export default Pagination;

package/src/components/Pagination/index.js

@@ -0,0 +1,10 @@
+/*
+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 './Pagination';

package/src/components/PerPagePicker/PerPagePicker.jsx

@@ -0,0 +1,114 @@
+/*
+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 { useAccessibleDropdown } from '../../hooks/useAccessibleDropdown';
+import Chevron from '../../icons/chevron.svg';
+
+export const PerPagePicker = ({ value, pageSizeOptions, onChange }) => {
+  const pageSizeButton = useRef(null);
+  const pageSizeMenu = useRef(null);
+
+  const selectedOption = pageSizeOptions.find((e) => e.value === value);
+
+  const {
+    isDropdownOpen,
+    setIsDropdownOpen,
+    activeIndex,
+    setActiveIndex,
+    select,
+    setIsFocus,
+    listRef,
+  } = useAccessibleDropdown({
+    options: pageSizeOptions,
+    value,
+    onChange,
+  });
+
+  useEffect(() => {
+    const menuRef = pageSizeMenu.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);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={pageSizeMenu}
+      className="ds-sdk-per-page-picker ml-2 mr-2 relative inline-block text-left bg-gray-100 rounded-md outline outline-1 outline-gray-200 hover:outline-gray-600 h-[32px]"
+    >
+      <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={pageSizeButton}
+        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        onFocus={() => setIsFocus(false)}
+        onBlur={() => setIsFocus(false)}
+      >
+        {selectedOption ? `${selectedOption.label}` : '24'}
+        <img src={Chevron} className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-gray-600 ${
+            isDropdownOpen ? '' : 'rotate-180'
+          }`} />
+        {/* <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}
+          className="ds-sdk-per-page-picker__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"
+        >
+          {pageSizeOptions.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-per-page-picker__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-per-page-picker__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/PerPagePicker/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 { PerPagePicker } from './PerPagePicker';
+export { PerPagePicker as default } from './PerPagePicker';

package/src/components/Pill/Pill.jsx

@@ -0,0 +1,34 @@
+/*
+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 CloseIcon from '../../icons/plus.svg';
+
+const defaultIcon = (
+  <img src={CloseIcon} className="h-[12px] w-[12px] rotate-45 inline-block ml-sm cursor-pointer fill-gray-700" />
+  // <CloseIcon className="h-[12px] w-[12px] rotate-45 inline-block ml-sm cursor-pointer fill-gray-700" />
+);
+
+export const Pill = ({ label, onClick, CTA = defaultIcon, type }) => {
+  const containerClasses =
+    type === 'transparent'
+      ? 'ds-sdk-pill inline-flex justify-content items-center rounded-full w-fit min-h-[32px] px-4 py-1'
+      : 'ds-sdk-pill inline-flex justify-content items-center bg-gray-100 rounded-full w-fit outline outline-gray-200 min-h-[32px] px-4 py-1';
+
+  return (
+    <div key={label} className={containerClasses}>
+      <span className="ds-sdk-pill__label font-normal text-sm">{label}</span>
+      <span className="ds-sdk-pill__cta" onClick={onClick}>
+        {CTA}
+      </span>
+    </div>
+  );
+};
+
+export default Pill;

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

package/src/components/Pill/mock.js

@@ -0,0 +1,23 @@
+/*
+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 const CTA = (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-5 w-5 inline-block ml-2 cursor-pointer mb-0.5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+            clipRule="evenodd"
+        />
+    </svg>
+);