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

package/src/components/ProductList/MockData.js

@@ -0,0 +1,190 @@
+/*
+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 SimpleProduct = {
+    product: {
+        sku: '24-WG088',
+        name: 'Sprite Foam Roller',
+        canonical_url:
+            'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/sprite-foam-roller.html'
+    },
+    productView: {
+        __typename: 'SimpleProductView',
+        sku: '24-WG088',
+        name: 'Sprite Foam Roller',
+        url:
+            'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/sprite-foam-roller.html',
+        urlKey: 'sprite-foam-roller',
+        images: [
+            {
+                label: 'Image',
+                url:
+                    'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/media/catalog/product/l/u/luma-foam-roller.jpg'
+            }
+        ],
+        price: {
+            final: {
+                amount: {
+                    value: 19.0,
+                    currency: 'USD'
+                }
+            },
+            regular: {
+                amount: {
+                    value: 19.0,
+                    currency: 'USD'
+                }
+            }
+        }
+    },
+    highlights: [
+        {
+            attribute: 'name',
+            value: '<em>Sprite</em> Foam Roller',
+            matched_words: []
+        }
+    ]
+};
+
+const ComplexProduct = {
+    product: {
+        sku: 'MSH06',
+        name: 'Lono Yoga Short',
+        canonical_url:
+            'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/lono-yoga-short.html'
+    },
+    productView: {
+        __typename: 'ComplexProductView',
+        sku: 'MSH06',
+        name: 'Lono Yoga Short',
+        url:
+            'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/lono-yoga-short.html',
+        urlKey: 'lono-yoga-short',
+        images: [
+            {
+                label: '',
+                url:
+                    'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/media/catalog/product/m/s/msh06-gray_main_2.jpg'
+            },
+            {
+                label: '',
+                url:
+                    'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/media/catalog/product/m/s/msh06-gray_alt1_2.jpg'
+            },
+            {
+                label: '',
+                url:
+                    'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/media/catalog/product/m/s/msh06-gray_back_2.jpg'
+            }
+        ],
+        priceRange: {
+            maximum: {
+                final: {
+                    amount: {
+                        value: 32.0,
+                        currency: 'USD'
+                    }
+                },
+                regular: {
+                    amount: {
+                        value: 32.0,
+                        currency: 'USD'
+                    }
+                }
+            },
+            minimum: {
+                final: {
+                    amount: {
+                        value: 32.0,
+                        currency: 'USD'
+                    }
+                },
+                regular: {
+                    amount: {
+                        value: 32.0,
+                        currency: 'USD'
+                    }
+                }
+            }
+        },
+        options: [
+            {
+                id: 'size',
+                title: 'Size',
+                values: [
+                    {
+                        title: '32',
+                        id: 'Y29uZmlndXJhYmxlLzE4Ni8xODQ=',
+                        type: 'TEXT',
+                        value: '32'
+                    },
+                    {
+                        title: '33',
+                        id: 'Y29uZmlndXJhYmxlLzE4Ni8xODU=',
+                        type: 'TEXT',
+                        value: '33'
+                    },
+                    {
+                        title: '34',
+                        id: 'Y29uZmlndXJhYmxlLzE4Ni8xODY=',
+                        type: 'TEXT',
+                        value: '34'
+                    },
+                    {
+                        title: '36',
+                        id: 'Y29uZmlndXJhYmxlLzE4Ni8xODc=',
+                        type: 'TEXT',
+                        value: '36'
+                    }
+                ]
+            },
+            {
+                id: 'color',
+                title: 'Color',
+                values: [
+                    {
+                        title: 'Blue',
+                        id: 'Y29uZmlndXJhYmxlLzkzLzU5',
+                        type: 'COLOR_HEX',
+                        value: '#1857f7'
+                    },
+                    {
+                        title: 'Red',
+                        id: 'Y29uZmlndXJhYmxlLzkzLzY3',
+                        type: 'COLOR_HEX',
+                        value: '#ff0000'
+                    },
+                    {
+                        title: 'Gray',
+                        id: 'Y29uZmlndXJhYmxlLzkzLzYx',
+                        type: 'COLOR_HEX',
+                        value: '#8f8f8f'
+                    }
+                ]
+            }
+        ]
+    },
+    highlights: [
+        {
+            attribute: 'name',
+            value: 'Lono <em>Yoga</em> Short',
+            matched_words: []
+        }
+    ]
+};
+
+export const products = [
+    SimpleProduct,
+    SimpleProduct,
+    SimpleProduct,
+    SimpleProduct,
+    SimpleProduct,
+    SimpleProduct,
+    ComplexProduct
+];

package/src/components/ProductList/ProductList.jsx

@@ -0,0 +1,127 @@
+/*
+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, useMemo } from 'react';
+import './product-list.css';
+
+import { Alert } from '../../components/Alert';
+import { useProducts, useStore } from '../../context';
+import { ProductItem } from '../ProductItem';
+import { classNames } from '../../utils/dom';
+import { sanitizeProducts } from '../../utils/modifyResults';
+import { useResultsModifier } from '../../context/resultsModifierContext';
+
+
+const ProductList = ({ products, numberOfColumns, showFilters }) => {
+  const productsCtx = useProducts();
+  const {
+    currencySymbol,
+    currencyRate,
+    setRoute,
+    refineProduct,
+    refreshCart,
+    addToCart,
+  } = productsCtx;
+
+  const [cartUpdated, setCartUpdated] = useState(false);
+  const [itemAdded, setItemAdded] = useState('');
+  const { viewType } = useProducts();
+  const [error, setError] = useState(false);
+
+  const {
+    config: { listview },
+  } = useStore();
+
+  const { baseUrl, baseUrlWithoutProtocol } = useResultsModifier();
+  
+  const sanitizedProducts = useMemo(() => sanitizeProducts(products, baseUrl, baseUrlWithoutProtocol), [products]);  
+  
+  const className = showFilters
+    ? 'ds-sdk-product-list bg-body max-w-full pl-3 pb-2xl sm:pb-24'
+    : 'ds-sdk-product-list bg-body w-full mx-auto pb-2xl sm:pb-24';
+
+  useEffect(() => {
+    if (refreshCart) refreshCart();
+  }, [itemAdded]);
+
+  return (
+    <div
+      className={classNames(
+        'ds-sdk-product-list bg-body pb-2xl sm:pb-24',
+        className
+      )}
+    >
+      {cartUpdated && (
+        <div className="mt-8">
+          <Alert
+            title={`You added ${itemAdded} to your shopping cart.`}
+            type="success"
+            description=""
+            onClick={() => setCartUpdated(false)}
+          />
+        </div>
+      )}
+      {error && (
+        <div className="mt-8">
+          <Alert
+            title="Something went wrong trying to add an item to your cart."
+            type="error"
+            description=""
+            onClick={() => setError(false)}
+          />
+        </div>
+      )}
+
+      {listview && viewType === 'listview' ? (
+        <div className="w-full">
+          <div className="ds-sdk-product-list__list-view-default mt-md grid grid-cols-none pt-[15px] w-full gap-[10px]">
+            {sanitizedProducts?.map((product) => (
+              <ProductItem
+                key={product?.productView?.id}
+                item={product}
+                currencySymbol={currencySymbol}
+                currencyRate={currencyRate}
+                setRoute={setRoute}
+                refineProduct={refineProduct}
+                setCartUpdated={setCartUpdated}
+                setItemAdded={setItemAdded}
+                addToCart={addToCart}
+                setError={setError}
+              />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div
+          style={{
+            gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
+          }}
+          className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-2xl xl:gap-x-8"
+        >
+          {sanitizedProducts?.map((product) => (
+            <ProductItem
+              key={product?.productView?.id}
+              item={product}
+              currencySymbol={currencySymbol}
+              currencyRate={currencyRate}
+              setRoute={setRoute}
+              refineProduct={refineProduct}
+              setCartUpdated={setCartUpdated}
+              setItemAdded={setItemAdded}
+              addToCart={addToCart}
+              setError={setError}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductList;

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

package/src/components/ProductList/product-list.css

@@ -0,0 +1,18 @@
+/* https://cssguidelin.es/#bem-like-naming */
+.sfsdk-product-list {
+}
+
+/* Extra small devices (phones, 600px and down) */
+/* @media only screen and (max-width: 600px) { } */
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+/* @media only screen and (min-width: 600px) { } */
+
+/* Medium devices (landscape tablets, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large devices (laptops/desktops, 992px and up) */
+/* @media only screen and (min-width: 992px) { } */
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+/* @media only screen and (min-width: 1200px) { } */

package/src/components/SearchBar/SearchBar.jsx

@@ -0,0 +1,33 @@
+/*
+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 SearchBar = ({
+  phrase,
+  onKeyPress,
+  placeholder,
+  onClear, // included for completeness, though unused in this component
+  ...rest
+}) => {
+  return (
+    <div className="relative ds-sdk-search-bar">
+      <input
+        id="search"
+        type="text"
+        value={phrase}
+        onKeyPress={onKeyPress}
+        className="border border-gray-300 text-gray-800 text-sm block-display p-xs pr-lg ds-sdk-search-bar__input"
+        placeholder={placeholder}
+        autoComplete="off"
+        {...rest}
+      />
+    </div>
+  );
+};

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

package/src/components/Shimmer/Shimmer.css

@@ -0,0 +1,82 @@
+.card {
+    width: 250px;
+    margin: 10px auto;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+    padding: 20px;
+}
+@keyframes placeholderShimmer {
+    0% {
+        background-position: -468px 0;
+    }
+
+    100% {
+        background-position: 468px 0;
+    }
+}
+
+.shimmer-animation {
+    background-color: #f6f7f8;
+    background-image: linear-gradient(
+        to right,
+        #f6f7f8 0%,
+        #edeef1 20%,
+        #f6f7f8 40%,
+        #f6f7f8 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 800px 104px;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeholderShimmer;
+    animation-timing-function: linear;
+}
+
+.loader {
+    &-shimmer {
+        &-banner {
+            height: 22rem;
+            background-size: 800px 22rem;
+            border-radius: 5px;
+            margin-bottom: 12px;
+        }
+
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 5px;
+        }
+
+        &-title {
+            height: 25px;
+            flex: 0 0 auto;
+            width: 120px;
+        }
+
+        &-rating {
+            height: 25px;
+            flex: 0 0 auto;
+            width: 70px;
+        }
+
+        &-list {
+            height: 20px;
+            width: 190px;
+            margin-bottom: 5px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        &-info {
+            height: 20px;
+            width: 220px;
+            margin-bottom: 5px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}

package/src/components/Shimmer/Shimmer.jsx

@@ -0,0 +1,66 @@
+/*
+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 { useSensor } from '../../context'; // Adjust relative path if needed
+
+import ButtonShimmer from '../ButtonShimmer';
+import FacetsShimmer from '../FacetsShimmer';
+import ProductCardShimmer from '../ProductCardShimmer';
+
+const Shimmer = () => {
+  const productCardArray = Array.from({ length: 8 });
+  const facetsArray = Array.from({ length: 4 });
+  const { screenSize } = useSensor();
+  const numberOfColumns = screenSize.columns;
+
+  return (
+    <div className="ds-widgets bg-body py-2">
+      <div className="flex">
+        <div className="sm:flex ds-widgets-_actions relative max-w-[21rem] w-full h-full px-2 flex-col overflow-y-auto">
+          <div className="ds-widgets_actions_header flex justify-between items-center mb-md" />
+          <div className="flex pb-4 w-full h-full">
+            <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]">
+                <ButtonShimmer />
+              </button>
+            </div>
+          </div>
+          <div className="ds-plp-facets flex flex-col">
+            <form className="ds-plp-facets__list border-t border-gray-200">
+              {facetsArray.map((_, index) => (
+                <FacetsShimmer key={index} />
+              ))}
+            </form>
+          </div>
+        </div>
+        <div className="ds-widgets_results flex flex-col items-center pt-16 w-full h-full">
+          <div className="flex flex-col max-w-5xl lg:max-w-7xl ml-auto w-full h-full">
+            <div className="flex justify-end mb-[1px]">
+              <ButtonShimmer />
+            </div>
+          </div>
+          <div
+            className="ds-sdk-product-list__grid mt-md grid-cols-1 gap-y-8 gap-x-md sm:grid-cols-2 md:grid-cols-3 xl:gap-x-4 pl-8"
+            style={{
+              display: 'grid',
+              gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
+            }}
+          >
+            {productCardArray.map((_, index) => (
+              <ProductCardShimmer key={index} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Shimmer;

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

package/src/components/Slider/Slider.css

@@ -0,0 +1,61 @@
+.slider-container {
+    margin: 0 auto;
+    position: relative;
+    padding-top: 20px;
+}
+
+.range-slider {
+    appearance: none;
+    width: 100%;
+    height: 10px;
+    border-radius: 5px;
+    background: linear-gradient(to right, #dddddd 0%, #cccccc 100%);
+    outline: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.range-slider::-webkit-slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #ffffff;
+    cursor: pointer;
+}
+
+.range-slider::-moz-range-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #ffffff;
+    cursor: pointer;
+}
+
+.selected-price {
+    position: absolute;
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    text-align: center;
+}
+
+.price-range-display {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0px;
+}
+
+.min-price,
+.max-price {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+}