@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItem.js

@@ -1,80 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { func, number, oneOfType, shape, string } from 'prop-types';
-import setValidator from '@magento/peregrine/lib/validators/set';
-
-import FilterDefault from './filterDefault';
-
-const FilterItem = props => {
-    const { filterApi, filterState, group, item, onApply } = props;
-    const { toggleItem } = filterApi;
-    const { title, value } = item;
-    const isSelected = filterState && filterState.has(item);
-
-    // create and memoize an item that matches the tile interface
-    const tileItem = useMemo(
-        () => ({
-            label: title,
-            value_index: value
-        }),
-        [title, value]
-    );
-
-    const handleClick = useCallback(
-        e => {
-            // use only left click for selection
-            if (e.button !== 0) return;
-
-            toggleItem({ group, item });
-
-            if (typeof onApply === 'function') {
-                onApply(group, item);
-            }
-        },
-        [group, item, toggleItem, onApply]
-    );
-
-    const handleKeyDown = useCallback(
-        e => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                toggleItem({ group, item });
-                if (typeof onApply === 'function') {
-                    onApply(group, item);
-                }
-            }
-        },
-        [group, item, onApply, toggleItem]
-    );
-
-    return (
-        <FilterDefault
-            isSelected={isSelected}
-            item={tileItem}
-            onMouseDown={handleClick}
-            onKeyDown={handleKeyDown}
-            group={group}
-            title={title}
-            value={value}
-        />
-    );
-};
-
-FilterItem.defaultProps = {
-    onChange: null
-};
-
-FilterItem.propTypes = {
-    filterApi: shape({
-        toggleItem: func.isRequired
-    }).isRequired,
-    filterState: setValidator,
-    group: string.isRequired,
-    item: shape({
-        title: string.isRequired,
-        value: oneOfType([number, string]).isRequired,
-        path: string
-    }).isRequired,
-    onChange: func
-};
-
-export default FilterItem;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadio.js

@@ -1,79 +0,0 @@
-import React, { useCallback } from 'react';
-import { func, number, oneOfType, shape, string, instanceOf } from 'prop-types';
-import Radio from '@magento/venia-ui/lib/components/RadioGroup/radio';
-import defaultClasses from './filterItemRadio.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import { useIntl } from 'react-intl';
-
-const FilterItemRadio = props => {
-    const { filterApi, group, item, onApply, labels } = props;
-    const { removeGroup, toggleItem } = filterApi;
-    const { title, value } = item;
-    const classes = useStyle(defaultClasses);
-    const { formatMessage } = useIntl();
-
-    const label = item.label ? item.label : item.title;
-
-    const ariaLabel = formatMessage(
-        {
-            id: 'filterModal.item.applyFilter',
-            defaultMessage: 'Apply filter "{optionName}".'
-        },
-        {
-            optionName: label
-        }
-    );
-
-    const handleOnchange = useCallback(
-        e => {
-            if (group != "category_uid") {
-                removeGroup({ group });
-                if (e.target.value === item.value) {
-                    toggleItem({ group, item });
-                }
-            }
-            if (typeof onApply === 'function') {
-                onApply(group, item);
-            }
-        },
-        [group, item, onApply, removeGroup, toggleItem]
-    );
-
-    const element = (
-        <Radio
-            classes={classes}
-            id={`item-${group}-${value}`}
-            label={title}
-            value={value}
-            onChange={handleOnchange}
-            data-cy="FilterDefault-radio"
-            ariaLabel={ariaLabel}
-        />
-    );
-
-    labels.set(element, label);
-
-    return element;
-};
-
-FilterItemRadio.defaultProps = {
-    onApply: null
-};
-
-FilterItemRadio.propTypes = {
-    filterApi: shape({
-        toggleItem: func.isRequired,
-        removeGroup: func.isRequired
-    }).isRequired,
-    group: string.isRequired,
-    item: shape({
-        title: string.isRequired,
-        value: oneOfType([number, string]).isRequired,
-        label: string,
-        path: string
-    }).isRequired,
-    onApply: func,
-    labels: instanceOf(Map).isRequired
-};
-
-export default FilterItemRadio;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadioGroup.js

@@ -1,87 +0,0 @@
-import React, { useMemo, useEffect } from 'react';
-import {
-    arrayOf,
-    func,
-    number,
-    oneOfType,
-    shape,
-    string,
-    instanceOf
-} from 'prop-types';
-import setValidator from '@magento/peregrine/lib/validators/set';
-import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
-import FilterItemRadio from './filterItemRadio';
-import { useFieldApi } from 'informed';
-import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
-
-const FilterItemRadioGroup = props => {
-    const { filterApi, filterState, group, items, onApply, labels } = props;
-
-    const radioItems = useMemo(() => {
-        return items.map(item => {
-            const code = `item-${group}-${item.value}`;
-            return (
-                <FilterItemRadio
-                    key={code}
-                    filterApi={filterApi}
-                    filterState={filterState}
-                    group={group}
-                    item={item}
-                    onApply={onApply}
-                    labels={labels}
-                />
-            );
-        });
-    }, [filterApi, filterState, group, items, labels, onApply]);
-
-    const fieldValue = useMemo(() => {
-        if (filterState) {
-            for (const item of items) {
-                if (filterState.has(item)) {
-                    return item.value;
-                }
-            }
-        }
-
-        return null;
-    }, [filterState, items]);
-    const field = `item-${group}`;
-    const fieldApi = useFieldApi(field);
-    const fieldState = useFieldState(field);
-    useEffect(() => {
-        if (field && fieldValue === null) {
-            fieldApi.reset();
-        } else if (field && fieldValue !== fieldState.value) {
-            fieldApi.setValue(fieldValue);
-        }
-    }, [field, fieldApi, fieldState.value, fieldValue]);
-
-    return (
-        <RadioGroup field={field} data-cy="FilterDefault-radioGroup">
-            {radioItems}
-        </RadioGroup>
-    );
-};
-
-FilterItemRadioGroup.defaultProps = {
-    onApply: null
-};
-
-FilterItemRadioGroup.propTypes = {
-    filterApi: shape({
-        toggleItem: func.isRequired
-    }).isRequired,
-    filterState: setValidator,
-    group: string.isRequired,
-    items: arrayOf(
-        shape({
-            title: string.isRequired,
-            value: oneOfType([number, string]).isRequired,
-            path: string
-        })
-    ).isRequired,
-    onApply: func,
-    labels: instanceOf(Map).isRequired
-};
-
-export default FilterItemRadioGroup;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -1,265 +0,0 @@
-import React, { Fragment, Suspense, useMemo } from 'react';
-import { array, func, number, shape, string } from 'prop-types';
-import { useIntl } from 'react-intl';
-import setValidator from '@magento/peregrine/lib/validators/set';
-import { useFilterList } from '@magento/peregrine/lib/talons/FilterModal';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import FilterItem from './filterItem';
-import defaultClasses from './filterList.module.css';
-import FilterItemRadioGroup from './filterItemRadioGroup';
-
-const labels = new WeakMap();
-const labels2 = new WeakMap();
-
-const FilterOptionModal = React.lazy(() => import('@riosst100/pwa-marketplace/src/components/FilterOption/filterOptionModal'));
-
-const FilterList = props => {
-    const {
-        filterApi,
-        filterState,
-        filterFrontendInput,
-        name,
-        group,
-        itemCountToShow,
-        items,
-        onApply
-    } = props;
-    const classes = useStyle(defaultClasses, props.classes);
-    const talonProps = useFilterList({ filterState, items, itemCountToShow });
-    const { isListExpanded, handleListToggle, handleShowMore, activeFilter, setActiveFilter } = talonProps;
-    const { formatMessage } = useIntl();
-
-    let data = items.reduce((r, e) => {
-        // get first letter of name of current element
-        let grouping = e.title[0];
-        // if there is no property in accumulator with this letter create it
-        if(!r[grouping]) r[grouping] = {grouping, children: [e]}
-        // if there is push current element to children array for that letter
-        else r[grouping].children.push(e);
-        // return accumulator
-        return r;
-    }, {})
-    
-    // since data at this point is an object, to get array of values
-    // we use Object.values method
-    let items2 = Object.values(data)
-
-    items2 = items2.sort((a, b) => a.grouping.localeCompare(b.grouping));
-
-    const groupingItemElements = useMemo(() => {
-        return items2.map((data, index) => {
-            const { grouping, children } = data;
-
-            const elements1 = [];
-
-            children.map((item, index) => {
-                const { title, value } = item;
-
-                const key = `item-${group}-${value}`;
-
-                // create an element for each item
-                elements1.push(
-                    <li
-                        key={key}
-                        className={classes.popupFilterItem}
-                        data-cy="FilterList-item"
-                    >
-                        <FilterItem
-                            filterApi={filterApi}
-                            filterState={filterState}
-                            group={group}
-                            item={item}
-                            onApply={onApply}
-                        />
-                    </li>
-                );
-
-                // associate each element with its normalized title
-                // titles are not unique, so use the element as the key
-                // labels2.set(element1, title.toUpperCase());
-
-                // return element2;
-            });
-
-            const element2 = <><ul><div><b>{grouping}</b></div>{elements1}</ul><br /></>;
-
-            return element2;
-        });
-    }, [
-        classes,
-        filterApi,
-        filterState,
-        filterFrontendInput,
-        name,
-        group,
-        items,
-        isListExpanded,
-        itemCountToShow,
-        onApply
-    ]);
-
-    // memoize item creation
-    // search value is not referenced, so this array is stable
-    const itemElements = useMemo(() => {
-        // if (filterFrontendInput === 'boolean') {
-            const key = `item-${group}`;
-            return (
-                <li
-                    key={key}
-                    className={classes.item}
-                    data-cy="FilterList-item"
-                >
-                    <FilterItemRadioGroup
-                        filterApi={filterApi}
-                        filterState={filterState}
-                        group={group}
-                        name={name}
-                        items={items}
-                        onApply={onApply}
-                        labels={labels}
-                    />
-                </li>
-            );
-        // }
-
-        return items.map((item, index) => {
-            const { title, value } = item;
-            const key = `item-${group}-${value}`;
-
-            if (!isListExpanded && index >= itemCountToShow) {
-                return null;
-            }
-
-            // create an element for each item
-            const element = (
-                <li
-                    key={key}
-                    className={classes.item}
-                    data-cy="FilterList-item"
-                >
-                    <FilterItem
-                        filterApi={filterApi}
-                        filterState={filterState}
-                        group={group}
-                        item={item}
-                        onApply={onApply}
-                    />
-                </li>
-            );
-
-            // associate each element with its normalized title
-            // titles are not unique, so use the element as the key
-            labels.set(element, title.toUpperCase());
-            return element;
-        });
-    }, [
-        classes,
-        filterApi,
-        filterState,
-        filterFrontendInput,
-        name,
-        group,
-        items,
-        isListExpanded,
-        itemCountToShow,
-        onApply
-    ]);
-
-    const showMoreLessItem = useMemo(() => {
-        if (items.length <= itemCountToShow) {
-            return null;
-        }
-
-        const label = isListExpanded
-            ? formatMessage({
-                id: 'filterList.showLess',
-                defaultMessage: 'Show Less'
-            })
-            : formatMessage({
-                id: 'filterList.showAll',
-                defaultMessage: 'Show All'
-            });
-
-        return (
-            <li className={classes.showMoreLessItem}>
-                <button
-                    onClick={handleListToggle}
-                    className={classes.showMoreLessButton}
-                    data-cy="FilterList-showMoreLessButton"
-                >
-                    {label}
-                </button>
-            </li>
-        );
-    }, [
-        isListExpanded,
-        handleListToggle,
-        items,
-        itemCountToShow,
-        formatMessage,
-        classes
-    ]);
-
-    const showMoreItem = useMemo(() => {
-        if (items.length <= itemCountToShow) {
-            return null;
-        }
-
-        const label = formatMessage({
-            id: 'filterList.viewAll',
-            defaultMessage: 'View All'
-        });
-
-        return (
-            <li className={classes.showMoreLessItem}>
-                <button
-                    onClick={handleShowMore}
-                    className={classes.showMoreLessButton}
-                    data-cy="FilterList-showMoreLessButton"
-                >
-                    {label}
-                </button>
-            </li>
-        );
-    }, [
-        handleShowMore,
-        items,
-        itemCountToShow,
-        formatMessage,
-        classes
-    ]);
-
-    return (
-        <Fragment>
-            <ul className={classes.items}>
-                {itemElements}
-                {showMoreItem}
-            </ul>
-            <Suspense fallback={null}>
-                {activeFilter && <FilterOptionModal groupingItemElements={groupingItemElements} setActiveFilter={setActiveFilter} />}
-            </Suspense>
-        </Fragment>
-    );
-};
-
-FilterList.defaultProps = {
-    onApply: null,
-    itemCountToShow: 5
-};
-
-FilterList.propTypes = {
-    classes: shape({
-        item: string,
-        items: string
-    }),
-    filterApi: shape({}),
-    filterState: setValidator,
-    name: string,
-    group: string,
-    items: array,
-    onApply: func,
-    itemCountToShow: number
-};
-
-export default FilterList;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.module.css

@@ -1,28 +0,0 @@
-.items {
-    composes: gap-[15px] from global;
-    composes: grid from global;
-    /* composes: -ml-1.5 from global; */
-    composes: py-2.5 from global;
-    grid-template-columns: 100%;
-    composes: border-t from global;
-    composes: border-gray-100 from global;
-}
-
-.showMoreLessItem {
-    composes: pl-1 from global;
-}
-
-.showMoreLessButton {
-    composes: text-base from global;
-    composes: underline from global;
-
-    composes: hover_no-underline from global;
-}
-
-.popupFilterItem {
-    border: 1px solid #e1e1e1;
-    padding: 10px;
-    border-radius: 5px;
-    width: 100%;
-    margin-top: 10px;
-}

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

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

package/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock.js

@@ -1,135 +0,0 @@
-import React from 'react';
-import { arrayOf, shape, string, func, bool } from 'prop-types';
-import { useIntl } from 'react-intl';
-import { ChevronDown as ArrowDown, ChevronUp as ArrowUp } from 'react-feather';
-import { Form } from 'informed';
-
-import { useFilterBlock } from '@magento/peregrine/lib/talons/FilterModal';
-import setValidator from '@magento/peregrine/lib/validators/set';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import FilterList from './FilterList';
-import defaultClasses from './filterBlock.module.css';
-import { ArrowUp2 } from 'iconsax-react';
-import cn from 'classnames';
-
-const FilterBlock = props => {
-    const {
-        filterApi,
-        filterState,
-        filterFrontendInput,
-        group,
-        items,
-        name,
-        onApply,
-        initialOpen
-    } = props;
-
-    const { formatMessage } = useIntl();
-    const talonProps = useFilterBlock({
-        filterState,
-        items,
-        initialOpen
-    });
-    const { handleClick, isExpanded } = talonProps;
-    const iconSrc = isExpanded ? ArrowUp : ArrowDown;
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const itemAriaLabel = formatMessage(
-        {
-            id: 'filterModal.item.ariaLabel',
-            defaultMessage: 'Filter products by "{itemName}"'
-        },
-        {
-            itemName: name
-        }
-    );
-
-    const toggleItemOptionsAriaLabel = isExpanded
-        ? formatMessage(
-            {
-                id: 'filterModal.item.hideOptions',
-                defaultMessage: 'Hide "{itemName}" filter item options.'
-            },
-            {
-                itemName: name
-            }
-        )
-        : formatMessage(
-            {
-                id: 'filterModal.item.showOptions',
-                defaultMessage: 'Show "{itemName}" filter item options.'
-            },
-            {
-                itemName: name
-            }
-        );
-
-    const list = isExpanded ? (
-        <Form className={classes.list}>
-            <FilterList
-                filterApi={filterApi}
-                filterState={filterState}
-                name={name}
-                filterFrontendInput={filterFrontendInput}
-                group={group}
-                items={items}
-                onApply={onApply}
-            />
-        </Form>
-    ) : null;
-
-    return (
-        <li
-            className={classes.root}
-            aria-label={itemAriaLabel}
-            data-cy="FilterBlock-root"
-        >
-            <button
-                className={classes.trigger}
-                onClick={handleClick}
-                data-cy="FilterBlock-triggerButton"
-                type="button"
-                aria-expanded={isExpanded}
-                aria-label={toggleItemOptionsAriaLabel}
-            >
-                <span className={classes.header}>
-                    <span className={classes.name}>{name}</span>
-                    {/* <Icon src={iconSrc} /> */}
-                    <ArrowUp2
-                        size={15}
-                        className={cn('text-gray-900 transition-all stroke-[#292D32]', isExpanded ? 'rotate-0' : 'rotate-180')}
-                        variant="Outline"
-                    />
-                </span>
-            </button>
-            {list}
-        </li>
-    );
-};
-
-FilterBlock.defaultProps = {
-    onApply: null,
-    initialOpen: false
-};
-
-FilterBlock.propTypes = {
-    classes: shape({
-        header: string,
-        list: string,
-        name: string,
-        root: string,
-        trigger: string
-    }),
-    filterFrontendInput: string,
-    filterApi: shape({}).isRequired,
-    filterState: setValidator,
-    group: string.isRequired,
-    items: arrayOf(shape({})),
-    name: string.isRequired,
-    onApply: func,
-    initialOpen: bool
-};
-
-export default FilterBlock;

package/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock.module.css

@@ -1,25 +0,0 @@
-.root {
-    composes: grid from global;
-}
-
-.header {
-    composes: grid from global;
-    composes: grid-cols-autoLast from global;
-    composes: grid-flow-col from global;
-    composes: items-center from global;
-    composes: py-2.5 from global;
-}
-
-.name {
-    composes: leading-[14px] from global;
-    composes: text-left from global;
-    composes: text-base from global;
-    composes: font-medium from global;
-}
-
-.list {}
-
-/* TODO @TW: cannot compose */
-.list:empty {
-    display: none;
-}