@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+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 */