@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css

@@ -1,199 +0,0 @@
-.root {
-    composes: lg_grid from global;
-    composes: lg_grid-flow-row from global;
-    composes: lg_items-start from global;
-    composes: gap-x-10 from global;
-}
-
-@media (min-width: 1024px) {
-    .root {
-        grid-template-areas:
-            'left-container right-container';
-        grid-template-columns: minmax(0, 495px) minmax(0, 1fr);
-        grid-template-rows: repeat(5, min-content) 1fr [fold];
-    }
-
-    .title {
-        grid-template-columns: 1fr max-content;
-    }
-}
-
-.section {
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: border-t-0 from global;
-    composes: border-r-0 from global;
-    composes: border-b from global;
-    composes: border-l-0 from global;
-}
-
-.sectionTitle {
-    composes: flex from global;
-    composes: font-medium from global;
-    composes: items-center from global;
-    composes: leading-normal from global;
-    composes: mb-sm from global;
-    composes: text-colorDefault from global;
-}
-
-.title {
-    /* composes: section;
-    composes: gap-2 from global;
-    composes: grid from global;
-    composes: items-center from global;
-    composes: leading-normal from global;
-    composes: px-sm from global;
-    composes: py-xs from global;
-    grid-area: title; */
-}
-
-.productName {
-    composes: font-medium from global;
-    composes: text-colorDefault from global;
-
-    composes: lg_font-normal from global;
-    composes: lg_text-xl from global;
-}
-
-.productPrice {
-    composes: block from global;
-    composes: mb-2 from global;
-}
-
-.leftContainer {
-    grid-area: left-container;
-    grid-column: 1 / 2;
-    grid-row: 1 / fold;
-    composes: max-w-[495px] from global;
-}
-
-.rightContainer {
-    grid-area: right-container;
-}
-
-.options {
-    grid-area: options;
-}
-
-.formErrors {
-    composes: section;
-    grid-area: errors;
-}
-
-.quantity {
-    composes: section;
-    grid-area: quantity;
-}
-
-.quantityTitle {
-    composes: block from global;
-    composes: font-medium from global;
-    composes: leading-normal from global;
-    composes: mb-sm from global;
-    composes: text-colorDefault from global;
-}
-
-.actions {
-    composes: gap-y-sm from global;
-    composes: grid from global;
-    composes: items-center from global;
-    composes: justify-items-center from global;
-    composes: section;
-    grid-area: cart;
-
-    composes: lg_border-b-0 from global;
-}
-
-.description {
-    composes: section;
-    grid-column: 1 / span 1;
-    grid-row: fold / span 1;
-
-    composes: lg_border-t from global;
-    composes: lg_m-0 from global;
-    composes: lg_pl-sm from global;
-    composes: lg_pr-sm from global;
-    composes: lg_self-stretch from global;
-}
-
-.descriptionTitle {
-    composes: sectionTitle;
-}
-
-.details {
-    composes: section;
-    grid-column: 2 / span 1;
-    grid-row: fold / span 1;
-
-    composes: lg_border-t from global;
-    composes: lg_m-0 from global;
-    composes: lg_pl-sm from global;
-    composes: lg_pr-sm from global;
-    composes: lg_self-stretch from global;
-}
-
-.detailsPageBuilder {
-    composes: my-0 from global;
-    composes: mx-sm from global;
-    composes: px-0 from global;
-    composes: py-sm from global;
-    grid-column: 1 / span 2;
-}
-
-.detailsPageBuilderList {
-    list-style: none;
-}
-
-@media (min-width: 1024px) {
-    .details {
-        align-self: stretch;
-        border-top-width: 1px;
-        margin: 0;
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
-}
-
-.detailsTitle {
-    composes: sectionTitle;
-}
-
-.related {
-    composes: border-b-0 from global;
-    composes: section;
-    grid-column: 1 / span 2;
-}
-
-.relatedTitle {
-    composes: sectionTitle;
-}
-
-.quantityRoot {
-    --stroke: var(--venia-global-color-gray-600);
-
-    composes: gap-x-2xs from global;
-    composes: grid from global;
-    composes: items-center from global;
-    composes: justify-items-center from global;
-    composes: text-center from global;
-    grid-template-columns: 1fr 4rem 1fr;
-    grid-template-columns: auto 4rem auto;
-    composes: justify-start from global;
-}
-
-.unavailableContainer {
-    composes: bg-subtle from global;
-    composes: gap-x-2xs from global;
-    composes: grid from global;
-    composes: grid-flow-col from global;
-    composes: italic from global;
-    composes: items-center from global;
-    composes: justify-start from global;
-    composes: p-3 from global;
-    composes: text-subtle from global;
-    composes: w-full from global;
-}
-
-.actButton {
-    composes: mt-sm from global;
-}

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

@@ -1,180 +0,0 @@
-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

@@ -1,102 +0,0 @@
-.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

@@ -1,51 +0,0 @@
-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

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

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

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

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

@@ -1,108 +0,0 @@
-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

@@ -1,47 +0,0 @@
-/** 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 #f76b1c;
-}
-
-.root:nth-child(-n+5) {
-    display: block;
-}

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

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