@riosst100/pwa-marketplace 2.0.7 → 2.0.9

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

@@ -1,233 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import { ChevronDown as ArrowDown } from 'react-feather';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { array, arrayOf, shape, string } from 'prop-types';
-import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import SortItem from './sortItem';
-import defaultClasses from './productSort.module.css';
-import Button from '@magento/venia-ui/lib/components/Button';
-// import Icon from '@magento/venia-ui/lib/components/Icon';
-import { ArrowUp2 } from 'iconsax-react';
-import cn from 'classnames';
-
-const ProductSort = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-    const { availableSortMethods, sortProps } = props;
-    const [currentSort, setSort] = sortProps;
-    const { elementRef, expanded, setExpanded } = useDropdown();
-    const { formatMessage, locale } = useIntl();
-
-    const orderSortingList = useCallback(
-        list => {
-            return list.sort((a, b) => {
-                return a.text.localeCompare(b.text, locale, {
-                    sensitivity: 'base'
-                });
-            });
-        },
-        [locale]
-    );
-
-    const sortMethodsFromConfig = availableSortMethods
-        ? availableSortMethods
-            .map(method => {
-                const { value, label } = method;
-                if (value !== 'price' && value !== 'position') {
-                    return {
-                        id: `sortItem.${value}`,
-                        text: label,
-                        attribute: value,
-                        sortDirection: 'ASC'
-                    };
-                }
-            })
-            .filter(method => !!method)
-        : null;
-
-    // click event for menu items
-    const handleItemClick = useCallback(
-        sortAttribute => {
-            setSort(prevSort => {
-                return {
-                    sortText: sortAttribute.text,
-                    sortId: sortAttribute.id,
-                    sortAttribute: sortAttribute.attribute,
-                    sortDirection: sortAttribute.sortDirection,
-                    sortFromSearch: prevSort.sortFromSearch
-                };
-            });
-            setExpanded(false);
-        },
-        [setExpanded, setSort]
-    );
-
-    const sortElements = useMemo(() => {
-        // should be not render item in collapsed mode.
-        if (!expanded) {
-            return null;
-        }
-
-        const defaultSortMethods = [
-            {
-                id: 'sortItem.relevance',
-                text: formatMessage({
-                    id: 'sortItem.relevance',
-                    defaultMessage: 'Best Match'
-                }),
-                attribute: 'relevance',
-                sortDirection: 'DESC'
-            },
-            {
-                id: 'sortItem.priceDesc',
-                text: formatMessage({
-                    id: 'sortItem.priceDesc',
-                    defaultMessage: 'Price: High to Low'
-                }),
-                attribute: 'price',
-                sortDirection: 'DESC'
-            },
-            {
-                id: 'sortItem.priceAsc',
-                text: formatMessage({
-                    id: 'sortItem.priceAsc',
-                    defaultMessage: 'Price: Low to High'
-                }),
-                attribute: 'price',
-                sortDirection: 'ASC'
-            }
-        ];
-
-        // Do not display Position in Search
-        if (!currentSort.sortFromSearch) {
-            defaultSortMethods.push({
-                id: 'sortItem.position',
-                text: formatMessage({
-                    id: 'sortItem.position',
-                    defaultMessage: 'Position'
-                }),
-                attribute: 'position',
-                sortDirection: 'ASC'
-            });
-        }
-
-        const allSortingMethods = sortMethodsFromConfig
-            ? orderSortingList(
-                [sortMethodsFromConfig, defaultSortMethods].flat()
-            )
-            : defaultSortMethods;
-
-        const itemElements = Array.from(allSortingMethods, sortItem => {
-            const { attribute, sortDirection } = sortItem;
-            const isActive =
-                currentSort.sortAttribute === attribute &&
-                currentSort.sortDirection === sortDirection;
-
-            const key = `${attribute}--${sortDirection}`;
-            return (
-                <li key={key} className={classes.menuItem}>
-                    <SortItem
-                        sortItem={sortItem}
-                        active={isActive}
-                        onClick={handleItemClick}
-                    />
-                </li>
-            );
-        });
-
-        return (
-            <div className={classes.menu}>
-                <ul className='flex flex-col gap-2'>{itemElements}</ul>
-            </div>
-        );
-    }, [
-        classes.menu,
-        classes.menuItem,
-        currentSort.sortAttribute,
-        currentSort.sortDirection,
-        currentSort.sortFromSearch,
-        expanded,
-        formatMessage,
-        handleItemClick,
-        orderSortingList,
-        sortMethodsFromConfig
-    ]);
-
-    // expand or collapse on click
-    const handleSortClick = () => {
-        setExpanded(!expanded);
-    };
-
-    const handleKeypress = e => {
-        if (e.code == 'Enter') {
-            setExpanded(expanded);
-        }
-    };
-    const result = expanded
-        ? formatMessage({
-            id: 'productSort.sortButtonExpanded',
-            defaultMessage: 'Sort Button Expanded'
-        })
-        : formatMessage({
-            id: 'productSort.sortButtonCollapsed',
-            defaultMessage: 'Sort Button Collapsed'
-        });
-
-    return (
-        <div
-            ref={elementRef}
-            className={classes.root}
-            data-cy="ProductSort-root"
-            aria-busy="false"
-        >
-            <Button
-                priority={'low'}
-                classes={{
-                    root_lowPriority: classes.sortButton
-                }}
-                onClick={handleSortClick}
-                data-cy="ProductSort-sortButton"
-                onKeyDown={handleKeypress}
-                aria-label={result}
-                className='border border-gray-100 border-solid rounded-[5px] p-2.5 flex gap-x-[15px]'
-            >
-                <span className={classes.mobileText}>
-                    <FormattedMessage
-                        id={'productSort.sortButton'}
-                        defaultMessage={'Sort'}
-                    />
-                </span>
-                <span className={cn(classes.desktopText, 'flex items-center gap-[15px]')}>
-                    <span className={classes.sortText}>
-                        <FormattedMessage
-                            id={'productSort.sortByButton'}
-                            defaultMessage={'Sort by'}
-                        />
-                        &nbsp;{currentSort.sortText}
-                    </span>
-                    <ArrowUp2 size={15} className={cn('text-gray-900 transition-all stroke-[#292D32]', expanded ? 'rotate-0' : 'rotate-180')} />
-                </span>
-            </Button>
-            {sortElements}
-        </div>
-    );
-};
-
-ProductSort.propTypes = {
-    classes: shape({
-        menuItem: string,
-        menu: string,
-        root: string,
-        sortButton: string
-    }),
-    availableSortMethods: arrayOf(
-        shape({
-            label: string,
-            value: string
-        })
-    ),
-    sortProps: array
-};
-
-export default ProductSort;

package/src/overwrites/venia-ui/lib/components/ProductSort/productSort.module.css

@@ -1,65 +0,0 @@
-.root {
-    composes: relative from global;
-    composes: ml-2xs from global;
-}
-
-.menu {
-    composes: absolute from global;
-    composes: bg-clip-padding from global;
-    composes: bg-white from global;
-    composes: border from global;
-    composes: border-solid from global;
-    composes: border-gray-100 from global;
-    composes: list-none from global;
-    composes: mb-0 from global;
-    composes: min-w-[10rem] from global;
-    composes: mt-0.5 from global;
-    composes: mx-0 from global;
-    composes: right-0 from global;
-    composes: rounded from global;
-    composes: shadow-menu from global;
-    composes: text-colorDefault from global;
-    composes: text-left from global;
-    composes: top-[110%] from global;
-    composes: z-menu from global;
-    composes: p-2.5 from global;
-}
-
-.menuItem {
-    composes: hover_bg-gray-100 from global;
-    composes: rounded-[5px] from global;
-    composes: relative from global;
-}
-
-.sortButton {
-    composes: rounded-[5px] from global;
-    composes: p-2.5 from global;
-
-    composes: min-w-[154px] from global;
-}
-
-.desktopText {
-    composes: hidden from global;
-
-    composes: lg_inline-flex from global;
-}
-
-.sortText {
-    composes: leading-normal from global;
-    composes: text-colorDefault from global;
-    composes: text-base from global;
-}
-
-.desktopIconWrapper {
-    transform: translateX(10px);
-}
-
-.desktopIcon {
-    /* composes: icon from '../Icon/icon.module.css'; */
-
-    composes: stroke-gray-500 from global;
-}
-
-.mobileText {
-    composes: lg_hidden from global;
-}

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { shape, string } from 'prop-types';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-import defaultClasses from './productSort.shimmer.module.css';
-
-const ProductSortShimmer = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-
-    return (
-        <div className={classes.root} aria-live="polite" aria-busy="true">
-            <Shimmer
-                classes={{ root_button: classes.sortButtonShimmer }}
-                type="button"
-            />
-        </div>
-    );
-};
-
-ProductSortShimmer.propTypes = {
-    classes: shape({
-        root: string,
-        sortButtonShimmer: string
-    })
-};
-
-export default ProductSortShimmer;

package/src/overwrites/venia-ui/lib/components/ProductSort/productSort.shimmer.module.css

@@ -1,10 +0,0 @@
-.root {
-    composes: root from './productSort.module.css';
-}
-
-.sortButtonShimmer {
-    /* composes: root_button from '../Shimmer/shimmer.module.css'; */
-    composes: sortButton from './productSort.module.css';
-
-    composes: lg_min-w-[12rem] from global;
-}

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

@@ -1,57 +0,0 @@
-import React, { useCallback } from 'react';
-import { Check } from 'react-feather';
-import { bool, func, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './sortItem.module.css';
-import cn from 'classnames';
-
-const SortItem = props => {
-    const { active, onClick, sortItem } = props;
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const handleClick = useCallback(
-        e => {
-            // use only left click for selection
-            if (e.button === 0) {
-                onClick(sortItem);
-            }
-        },
-        [sortItem, onClick]
-    );
-
-    const handleKeyDown = useCallback(
-        e => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onClick(sortItem);
-            }
-        },
-        [onClick, sortItem]
-    );
-
-    return (
-        <button
-            className={cn(classes.root, active ? `before_block before_h-[100%] before_w-[3px] before_bg-blue-700 before_left-[-10px] before_absolute` : '')}
-            data-cy={active ? 'SortItem-activeButton' : 'SortItem-button'}
-            onMouseDown={handleClick}
-            onKeyDown={handleKeyDown}
-        >
-            <span className={classes.content}>
-                <span className={classes.text}>{sortItem.text}</span>
-            </span>
-        </button>
-    );
-};
-
-SortItem.propTypes = {
-    active: bool,
-    classes: shape({
-        content: string,
-        root: string,
-        text: string
-    }),
-    onClick: func
-};
-
-export default SortItem;

package/src/overwrites/venia-ui/lib/components/ProductSort/sortItem.module.css

@@ -1,23 +0,0 @@
-.root {
-    composes: flex from global;
-    composes: items-center from global;
-    composes: w-full from global;
-}
-
-.content {
-    composes: items-center from global;
-    composes: grid from global;
-    composes: grid-cols-[1fr] from global;
-    composes: grid-flow-col from global;
-    composes: gap-3 from global;
-    composes: h-[30px] from global;
-    composes: px-3 from global;
-    composes: py-0 from global;
-    composes: w-full from global;
-}
-
-.text {
-    composes: text-left from global;
-    composes: whitespace-nowrap from global;
-    composes: text-base from global;
-}

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

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

package/src/overwrites/venia-ui/lib/components/QuantityStepper/quantityStepper.js

@@ -1,113 +0,0 @@
-import React, { Fragment } from 'react';
-import { useIntl } from 'react-intl';
-import { Minus as MinusIcon, Plus as PlusIcon } from 'react-feather';
-import { useQuantityStepper } from '@magento/peregrine/lib/talons/QuantityStepper/useQuantityStepper';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import TextInput from '../TextInput';
-import { Message } from '@magento/venia-ui/lib/components/Field';
-import defaultClasses from './quantityStepper.module.css';
-import cn from 'classnames';
-
-const QuantityStepper = props => {
-    const { initialValue, itemId, label, min, onChange, message } = props;
-    const { formatMessage } = useIntl();
-    const classes = useStyle(defaultClasses, props.classes);
-    const iconClasses = { root: classes.icon };
-
-    const talonProps = useQuantityStepper({
-        initialValue,
-        min,
-        onChange
-    });
-
-    const {
-        isDecrementDisabled,
-        isIncrementDisabled,
-        handleBlur,
-        handleDecrement,
-        handleIncrement,
-        maskInput
-    } = talonProps;
-
-    const errorMessage = message ? <Message>{message}</Message> : null;
-
-    return (
-        <Fragment>
-            <div
-                className={cn(
-                    classes.root,
-                    'flex w-fit border border-gray-100 rounded-md',
-                    ''
-                )}
-            >
-                <label className={classes.label} htmlFor={itemId}>
-                    {label}
-                </label>
-                <button
-                    aria-label={formatMessage({
-                        id: 'quantity.buttonDecrement',
-                        defaultMessage: 'Decrease Quantity'
-                    })}
-                    className={cn(
-                        classes.button_decrement,
-                        '!h-full min-w-[40px] min-h-[40px] !rounded-l-md !rounded-r-none'
-                    )}
-                    disabled={isDecrementDisabled}
-                    onClick={handleDecrement}
-                    type="button"
-                    data-cy="Quantity-decrementButton"
-                >
-                    <Icon classes={iconClasses} src={MinusIcon} size={22} />
-                </button>
-                <TextInput
-                    aria-label={formatMessage({
-                        id: 'quantity.input',
-                        defaultMessage: 'Item Quantity'
-                    })}
-                    data-cy="QuantityStepper-input"
-                    classes={{
-                        input: cn(
-                            classes.input,
-                            '!border max-w-[60px] focus_shadow-none focus_outline-[1px]',
-                            '!border-t-0 !border-b-0 !rounded-none !border-gray-100'
-                        )
-                    }}
-                    field="quantity"
-                    id={itemId}
-                    inputMode="numeric"
-                    mask={maskInput}
-                    min={min}
-                    onBlur={handleBlur}
-                    pattern="[0-9]*"
-                />
-                <button
-                    aria-label={formatMessage({
-                        id: 'quantity.buttonIncrement',
-                        defaultMessage: 'Increase Quantity'
-                    })}
-                    className={cn(
-                        classes.button_increment,
-                        '!h-full min-w-[40px] min-h-[40px] !rounded-r-md !rounded-l-none'
-                    )}
-                    disabled={isIncrementDisabled}
-                    onClick={handleIncrement}
-                    type="button"
-                    data-cy="Quantity-incrementButton"
-                >
-                    <Icon classes={iconClasses} src={PlusIcon} size={20} />
-                </button>
-            </div>
-            {errorMessage}
-        </Fragment>
-    );
-};
-
-QuantityStepper.defaultProps = {
-    min: 0,
-    initialValue: 1,
-    onChange: () => { }
-};
-
-export default QuantityStepper;

package/src/overwrites/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css

@@ -1,74 +0,0 @@
-.root {
-    /* --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; */
-}
-
-.wrap {
-    composes: flex from global;
-    composes: items-center from global;
-    composes: justify-center from global;
-}
-
-/* TODO @TW: cannot compose */
-.label:not(:focus):not(:active) {
-    /* composes: sr-only from global; */
-    position: absolute;
-    overflow: hidden;
-    width: 1px;
-    height: 1px;
-    clip: rect(0 0 0 0);
-    clip-path: inset(100%);
-    white-space: nowrap;
-}
-
-.button {
-    composes: bg-white from global;
-    composes: h-[2rem] from global;
-    composes: inline-flex from global;
-    composes: items-center from global;
-    composes: justify-center from global;
-    composes: rounded-full from global;
-    composes: w-[2rem] from global;
-    stroke: rgb(var(--stroke));
-
-    composes: disabled_cursor-not-allowed from global;
-}
-
-.button:hover {
-    --stroke: rgb(var(--venia-global-color-gray-900));
-    border-color: rgb(var(--stroke));
-}
-
-/* TODO @TW: cannot compose */
-.button:disabled,
-.button:disabled:hover {
-    --stroke: rgb(var(--venia-global-color-gray-400));
-    /* composes: border-subtle from global; */
-    border-color: rgb(var(--venia-global-color-gray-400));
-}
-
-.button_decrement {
-    composes: button;
-}
-
-.button_increment {
-    composes: button;
-}
-
-.icon {
-    composes: items-center from global;
-    composes: inline-flex from global;
-    composes: justify-center from global;
-    touch-action: manipulation;
-}
-
-.input {
-    composes: input from '../TextInput/textInput.module.css';
-    composes: text-center from global;
-}

package/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { Circle } from 'react-feather';
-import { node, shape, string } from 'prop-types';
-import { Radio as InformedRadio } from 'informed';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './radio.module.css';
-
-/* TODO: change lint config to use `label-has-associated-control` */
-/* eslint-disable jsx-a11y/label-has-for */
-
-const RadioOption = props => {
-    const {
-        ariaLabel,
-        classes: propClasses,
-        id,
-        label,
-        value,
-        ...rest
-    } = props;
-    const classes = useStyle(defaultClasses, propClasses);
-
-    return (
-        <label
-            className={classes.root}
-            htmlFor={id}
-            aria-label={ariaLabel ? ariaLabel : ''}
-        >
-            <InformedRadio
-                {...rest}
-                className={classes.input}
-                id={id}
-                value={value}
-            />
-            <span className={classes.icon}>
-                <Circle />
-            </span>
-            <span className={classes.label}>
-                {label || (value != null ? value : '')}
-            </span>
-        </label>
-    );
-};
-
-export default RadioOption;
-
-RadioOption.propTypes = {
-    ariaLabel: string,
-    classes: shape({
-        icon: string,
-        input: string,
-        label: string,
-        root: string
-    }),
-    id: string.isRequired,
-    label: node.isRequired,
-    value: node.isRequired
-};
-
-/* eslint-enable jsx-a11y/label-has-for */