@riosst100/pwa-marketplace 1.3.3 → 1.3.5

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.js

@@ -0,0 +1,180 @@
+import React, { useMemo } from 'react';
+import { arrayOf, bool, number, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+import {
+    ChevronLeft as ChevronLeftIcon,
+    ChevronRight as ChevronRightIcon
+} from 'react-feather';
+
+import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
+import { useProductImageCarousel } from '@magento/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import AriaButton from '@magento/venia-ui/lib/components/AriaButton';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Image from '@magento/venia-ui/lib/components/Image';
+import defaultClasses from './carousel.module.css';
+import Thumbnail from './thumbnail';
+
+const IMAGE_WIDTH = 495;
+
+/**
+ * Carousel component for product images
+ * Carousel - Component that holds number of images
+ * where typically one image visible, and other
+ * images can be navigated through previous and next buttons
+ *
+ * @typedef ProductImageCarousel
+ * @kind functional component
+ *
+ * @param {props} props
+ *
+ * @returns {React.Element} React carousel component that displays a product image
+ */
+const ProductImageCarousel = props => {
+    const { images } = props;
+    const { formatMessage } = useIntl();
+    const talonProps = useProductImageCarousel({
+        images,
+        imageWidth: IMAGE_WIDTH
+    });
+
+    const {
+        currentImage,
+        activeItemIndex,
+        altText,
+        handleNext,
+        handlePrevious,
+        handleThumbnailClick,
+        sortedImages
+    } = talonProps;
+
+    // create thumbnail image component for every images in sorted order
+    const thumbnails = useMemo(
+        () =>
+            sortedImages.map((item, index) => (
+                <Thumbnail
+                    key={item.uid}
+                    item={item}
+                    itemIndex={index}
+                    isActive={activeItemIndex === index}
+                    onClickHandler={handleThumbnailClick}
+                />
+            )),
+        [activeItemIndex, handleThumbnailClick, sortedImages]
+    );
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    let image;
+    if (currentImage.file) {
+        image = (
+            <Image
+                alt={altText}
+                classes={{
+                    image: classes.currentImage,
+                    root: classes.imageContainer
+                }}
+                resource={currentImage.file}
+                width={IMAGE_WIDTH}
+            />
+        );
+    } else {
+        image = (
+            <Image
+                alt={altText}
+                classes={{
+                    image: classes.currentImage_placeholder,
+                    root: classes.imageContainer
+                }}
+                src={transparentPlaceholder}
+            />
+        );
+    }
+
+    const previousButton = formatMessage({
+        id: 'productImageCarousel.previousButtonAriaLabel',
+        defaultMessage: 'Previous Image'
+    });
+
+    const nextButton = formatMessage({
+        id: 'productImageCarousel.nextButtonAriaLabel',
+        defaultMessage: 'Next Image'
+    });
+
+    const chevronClasses = { root: classes.chevron };
+    return (
+        <div className={classes.root}>
+            <div className={classes.carouselContainer}>
+                <AriaButton
+                    className={classes.previousButton}
+                    onPress={handlePrevious}
+                    aria-label={previousButton}
+                    type="button"
+                >
+                    <Icon
+                        classes={chevronClasses}
+                        src={ChevronLeftIcon}
+                        size={40}
+                    />
+                </AriaButton>
+                {image}
+                <AriaButton
+                    className={classes.nextButton}
+                    onPress={handleNext}
+                    aria-label={nextButton}
+                    type="button"
+                >
+                    <Icon
+                        classes={chevronClasses}
+                        src={ChevronRightIcon}
+                        size={40}
+                    />
+                </AriaButton>
+            </div>
+            <div className={classes.thumbnailList}>{thumbnails}</div>
+        </div>
+    );
+};
+
+/**
+ * Props for {@link ProductImageCarousel}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the
+ * ProductImageCarousel component
+ * @property {string} classes.currentImage classes for visible image
+ * @property {string} classes.imageContainer classes for image container
+ * @property {string} classes.nextButton classes for next button
+ * @property {string} classes.previousButton classes for previous button
+ * @property {string} classes.root classes for root container
+ * @property {Object[]} images Product images input for Carousel
+ * @property {bool} images[].disabled Is image disabled
+ * @property {string} images[].file filePath of image
+ * @property {string} images[].uid the id of the image
+ * @property {string} images[].label label for image
+ * @property {string} images[].position Position of image in Carousel
+ */
+ProductImageCarousel.propTypes = {
+    classes: shape({
+        carouselContainer: string,
+        currentImage: string,
+        currentImage_placeholder: string,
+        imageContainer: string,
+        nextButton: string,
+        previousButton: string,
+        root: string
+    }),
+    images: arrayOf(
+        shape({
+            label: string,
+            position: number,
+            disabled: bool,
+            file: string.isRequired,
+            uid: string.isRequired
+        })
+    ).isRequired
+};
+
+export default ProductImageCarousel;

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.module.css

@@ -0,0 +1,102 @@
+.root {
+    composes: lg_gap-sm from global;
+    /* composes: grid from global;
+    composes: grid-cols-auto from global;
+    composes: grid-rows-auto from global; */
+    /* grid-template-areas:
+        'main'
+        'thumbs'; */
+}
+
+@media (min-width: 960px) {
+    .root {
+        grid-template-areas: 'thumbs main';
+        /* These values are mirrored in JS for image sizes. Keep them in sync. */
+        grid-template-columns: 17fr 80fr;
+    }
+}
+
+.carouselContainer {
+    composes: flex from global;
+    composes: max-h-[495px] from global;
+}
+
+.imageContainer {
+    composes: w-full from global;
+}
+
+.currentImage {
+    composes: block from global;
+    composes: h-full from global;
+    composes: object-center from global;
+    composes: object-cover from global;
+    composes: w-full from global;
+
+    composes: lg_object-top from global;
+}
+
+.currentImage_placeholder {
+    composes: currentImage;
+
+    composes: bg-subtle from global;
+}
+
+.previousButton,
+.nextButton {
+    composes: flex from global;
+    composes: outline-none from global;
+    composes: z-foreground from global;
+
+    composes: lg_hidden from global;
+}
+
+.previousButton {
+    composes: justify-start from global;
+    composes: ml-sm from global;
+    grid-area: 1 / 1 / 2 / 2;
+}
+
+.nextButton {
+    composes: justify-end from global;
+    composes: mr-sm from global;
+    grid-area: 1 / 3 / 2 / 4;
+}
+
+.chevron {
+    composes: items-center from global;
+    composes: inline-flex from global;
+    composes: justify-center from global;
+    touch-action: manipulation;
+
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: self-center from global;
+}
+
+/* TODO @TW: cannot compose */
+.nextButton:focus>.chevron,
+.previousButton:focus>.chevron {
+    box-shadow: 0 0 4px 2px rgb(var(--venia-global-color-teal));
+    border-radius: 0.5rem;
+}
+
+.thumbnailList {
+    composes: flex from global;
+    composes: py-5 from global;
+    composes: gap-x-[18px] from global;
+    /* composes: content-stretch from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-carouselThumbnailList from global;
+    composes: grid-flow-col from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: z-foreground from global;
+
+    composes: lg_content-start from global;
+    composes: lg_gap-sm from global;
+    composes: lg_grid-cols-[1fr] from global;
+    composes: lg_grid-flow-row from global;
+    composes: lg_mt-0 from global; */
+}

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.shimmer.js

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Image from '@magento/venia-ui/lib/components/Image';
+import defaultClasses from './carousel.module.css';
+import defaultShimmerClasses from './carousel.shimmer.module.css';
+
+const CarouselShimmer = props => {
+    const classes = useStyle(
+        defaultClasses,
+        defaultShimmerClasses,
+        props.classes
+    );
+
+    const thumbnails = useMemo(() => {
+        return Array.from({ length: 3 })
+            .fill(null)
+            .map((value, index) => {
+                return (
+                    <div
+                        className={classes.thumnailRoot}
+                        key={`thumbnail-${index}`}
+                    >
+                        <Image
+                            alt={'...'}
+                            classes={{ image: classes.thumbnailImage }}
+                            src={transparentPlaceholder}
+                        />
+                    </div>
+                );
+            });
+    }, [classes]);
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.carouselContainer}>
+                <Image
+                    alt={'...'}
+                    classes={{
+                        image: classes.currentImage_placeholder,
+                        root: classes.imageContainer
+                    }}
+                    src={transparentPlaceholder}
+                />
+            </div>
+            <div className={classes.thumbnailList}>{thumbnails}</div>
+        </div>
+    );
+};
+
+export default CarouselShimmer;

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.shimmer.module.css

@@ -0,0 +1,7 @@
+.thumbnailRoot {
+    composes: root from './thumbnail.module.css';
+}
+
+.thumbnailImage {
+    composes: image from './thumbnail.module.css';
+}

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/index.js

@@ -0,0 +1 @@
+export { default } from './carousel';

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/thumbnail.js

@@ -0,0 +1,108 @@
+import React, { useMemo } from 'react';
+import { bool, func, number, shape, string } from 'prop-types';
+
+import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
+import { useWindowSize } from '@magento/peregrine';
+import { useThumbnail } from '@magento/peregrine/lib/talons/ProductImageCarousel/useThumbnail';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './thumbnail.module.css';
+import Image from '@magento/venia-ui/lib/components/Image';
+
+const DEFAULT_THUMBNAIL_HEIGHT = 80;
+const DEFAULT_THUMBNAIL_WIDTH = 80;
+
+/**
+ * The Thumbnail Component is used for showing thumbnail preview image for ProductImageCarousel
+ * Shows up only in desktop devices
+ *
+ * @typedef Thumbnail
+ * @kind functional component
+ *
+ * @param {props} props
+ *
+ * @returns {React.Element} React thumbnail component that displays product thumbnail
+ */
+const Thumbnail = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        isActive,
+        item: { file, label },
+        onClickHandler,
+        itemIndex
+    } = props;
+
+    const talonProps = useThumbnail({
+        onClickHandler,
+        itemIndex
+    });
+
+    const { handleClick } = talonProps;
+    const selectedItem = isActive ? 'Current Image' : 'Next Image';
+    const windowSize = useWindowSize();
+    const isDesktop = windowSize.innerWidth >= 1024;
+
+    const thumbnailImage = useMemo(() => {
+        if (!isDesktop) {
+            return null;
+        }
+
+        return file ? (
+            <Image
+                alt={label}
+                classes={{ image: classes.image }}
+                height={DEFAULT_THUMBNAIL_HEIGHT}
+                resource={file}
+                width={DEFAULT_THUMBNAIL_WIDTH}
+            />
+        ) : (
+            <Image
+                alt={label}
+                classes={{ image: classes.image }}
+                src={transparentPlaceholder}
+            />
+        );
+    }, [file, isDesktop, label, classes.image]);
+
+    return (
+        <button
+            type="button"
+            className={isActive ? classes.rootSelected : classes.root}
+            onClick={handleClick}
+            aria-label={selectedItem}
+        >
+            {thumbnailImage}
+        </button>
+    );
+};
+
+/**
+ * Props for {@link Thumbnail}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the Thumbnail component
+ * @property {string} classes.root classes for root container
+ * @property {string} classes.rootSelected classes for the selected thumbnail item
+ * @property {bool} isActive is image associated is active in carousel
+ * @property {string} item.label label for image
+ * @property {string} item.file filePath of image
+ * @property {number} itemIndex index number of thumbnail
+ * @property {func} onClickHandler A callback for handling click events on thumbnail
+ */
+Thumbnail.propTypes = {
+    classes: shape({
+        root: string,
+        rootSelected: string
+    }),
+    isActive: bool,
+    item: shape({
+        label: string,
+        file: string.isRequired
+    }),
+    itemIndex: number,
+    onClickHandler: func.isRequired
+};
+
+export default Thumbnail;

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/thumbnail.module.css

@@ -0,0 +1,47 @@
+/** The "thumbnail" is a round pil button below the product image in mobile or
+ * as a thumbnail to the left of the product image in desktop.
+ */
+.root {
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-strong from global;
+    composes: min-w-[80px] from global;
+    composes: min-h-[80px] from global;
+    composes: max-w-[80px] from global;
+    composes: max-h-[80px] from global;
+    composes: rounded-[4px] from global;
+
+    composes: lg_border-0 from global;
+    composes: lg_h-auto from global;
+    composes: lg_w-auto from global;
+    composes: hidden from global;
+    box-shadow: 0 0 0 1px #E6E9EA;
+}
+
+.rootSelected {
+    composes: root;
+
+    /* composes: bg-gray-900 from global; */
+}
+
+.image {
+    composes: hidden from global;
+    composes: max-w-[80px] from global;
+    composes: max-h-[80px] from global;
+    composes: lg_bg-subtle from global;
+    composes: lg_block from global;
+    composes: lg_h-full from global;
+    composes: lg_object-center from global;
+    composes: lg_object-cover from global;
+    composes: rounded-[4px] from global;
+    composes: lg_w-full from global;
+}
+
+.rootSelected {
+    composes: root;
+    box-shadow: 0 0 0 2px #4E31DB;
+}
+
+.root:nth-child(-n+5) {
+    display: block;
+}

package/src/overwrites/venia-ui/lib/components/ProductSort/index.js

@@ -0,0 +1,2 @@
+export { default } from './productSort';
+export { default as ProductSortShimmer } from './productSort.shimmer';