@riosst100/pwa-marketplace 1.3.2 → 1.3.4

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

@@ -0,0 +1,265 @@
+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.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
+                // labels2.set(element1, title.toUpperCase());
+
+                // return element2;
+            });
+
+            const element2 = <ul><div><b>{grouping}</b></div>{elements1}</ul>;
+
+            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.showMore',
+                defaultMessage: 'Show More'
+            });
+
+        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.showMore',
+            defaultMessage: 'Show More'
+        });
+
+        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: 2
+};
+
+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

@@ -0,0 +1,20 @@
+.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-sm from global;
+    composes: underline from global;
+
+    composes: hover_no-underline from global;
+}

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

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

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

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

@@ -0,0 +1,25 @@
+.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-[14px] from global;
+    composes: font-semibold from global;
+}
+
+.list {}
+
+/* TODO @TW: cannot compose */
+.list:empty {
+    display: none;
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { bool, func, shape, string } from 'prop-types';
+import { useFilterFooter } from '@magento/peregrine/lib/talons/FilterModal';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Button from '@magento/venia-ui/lib/components/Button';
+import defaultClasses from './filterFooter.module.css';
+
+const FilterFooter = props => {
+    const { applyFilters, hasFilters, isOpen } = props;
+    const { formatMessage } = useIntl();
+    const { touched } = useFilterFooter({
+        hasFilters,
+        isOpen
+    });
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const buttonLabel = formatMessage({
+        id: 'filterFooter.results',
+        defaultMessage: 'See Results'
+    });
+
+    return (
+        <div className={classes.root}>
+            <Button
+                disabled={!touched}
+                onClick={applyFilters}
+                data-cy="FilterFooter-button"
+                aria-label={buttonLabel}
+                aria-disabled={!touched}
+                priority="high"
+            >
+                {buttonLabel}
+            </Button>
+        </div>
+    );
+};
+
+FilterFooter.propTypes = {
+    applyFilters: func.isRequired,
+    classes: shape({
+        root: string
+    }),
+    hasFilters: bool,
+    isOpen: bool
+};
+
+export default FilterFooter;

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

@@ -0,0 +1,10 @@
+.root {
+    composes: bg-white from global;
+    composes: content-center from global;
+    composes: gap-y-1 from global;
+    composes: grid from global;
+    composes: h-[7rem] from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: relative from global;
+}

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

@@ -0,0 +1,166 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { FocusScope } from 'react-aria';
+import { array, arrayOf, shape, string } from 'prop-types';
+import { X as CloseIcon } from 'react-feather';
+import { useFilterModal } from '@magento/peregrine/lib/talons/FilterModal';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import { Portal } from '@magento/venia-ui/lib/components/Portal';
+import CurrentFilters from './CurrentFilters';
+import FilterBlock from './filterBlock';
+import FilterFooter from './filterFooter';
+import defaultClasses from './filterModal.module.css';
+
+/**
+ * A view that displays applicable and applied filters.
+ *
+ * @param {Object} props.filters - filters to display
+ */
+const FilterModal = props => {
+    const { filters } = props;
+    const { formatMessage } = useIntl();
+    const talonProps = useFilterModal({ filters });
+    const {
+        filterApi,
+        filterItems,
+        filterNames,
+        filterFrontendInput,
+        filterState,
+        handleApply,
+        handleClose,
+        handleReset,
+        handleKeyDownActions,
+        isOpen
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const modalClass = isOpen ? classes.root_open : classes.root;
+
+    const filtersList = useMemo(
+        () =>
+            Array.from(filterItems, ([group, items]) => {
+                const blockState = filterState.get(group);
+                const groupName = filterNames.get(group);
+                const frontendInput = filterFrontendInput.get(group);
+                return (
+                    <FilterBlock
+                        key={group}
+                        filterApi={filterApi}
+                        filterState={blockState}
+                        filterFrontendInput={frontendInput}
+                        group={group}
+                        items={items}
+                        name={groupName}
+                    />
+                );
+            }),
+        [filterApi, filterItems, filterNames, filterState, filterFrontendInput]
+    );
+
+    const filtersAriaLabel = formatMessage({
+        id: 'filterModal.filters.ariaLabel',
+        defaultMessage: 'Filters'
+    });
+
+    const closeAriaLabel = formatMessage({
+        id: 'filterModal.filters.close.ariaLabel',
+        defaultMessage: 'Close filters popup.'
+    });
+
+    const clearAllAriaLabel = formatMessage({
+        id: 'filterModal.action.clearAll.ariaLabel',
+        defaultMessage: 'Clear all applied filters'
+    });
+
+    const clearAll = filterState.size ? (
+        <div className={classes.action}>
+            <LinkButton
+                type="button"
+                onClick={handleReset}
+                ariaLabel={clearAllAriaLabel}
+                data-cy="FilterModal-clearButton"
+            >
+                <FormattedMessage
+                    id={'filterModal.action'}
+                    defaultMessage={'Clear all'}
+                />
+            </LinkButton>
+        </div>
+    ) : null;
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <Portal>
+            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
+            <FocusScope contain restoreFocus autoFocus>
+                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+                <aside
+                    className={modalClass}
+                    onKeyDown={handleKeyDownActions}
+                    data-cy="FilterModal-root"
+                >
+                    <div className={classes.body}>
+                        <div className={classes.header}>
+                            <h2 className={classes.headerTitle}>
+                                <FormattedMessage
+                                    id={'filterModal.headerTitle'}
+                                    defaultMessage={'Filters'}
+                                />
+                            </h2>
+                            <button
+                                onClick={handleClose}
+                                aria-disabled={false}
+                                aria-label={closeAriaLabel}
+                            >
+                                <Icon src={CloseIcon} />
+                            </button>
+                        </div>
+                        <CurrentFilters
+                            filterApi={filterApi}
+                            filterNames={filterNames}
+                            filterState={filterState}
+                        />
+                        {clearAll}
+                        <ul
+                            className={classes.blocks}
+                            aria-label={filtersAriaLabel}
+                        >
+                            {filtersList}
+                        </ul>
+                    </div>
+                    <FilterFooter
+                        applyFilters={handleApply}
+                        hasFilters={!!filterState.size}
+                        isOpen={isOpen}
+                    />
+                </aside>
+            </FocusScope>
+        </Portal>
+    );
+};
+
+FilterModal.propTypes = {
+    classes: shape({
+        action: string,
+        blocks: string,
+        body: string,
+        header: string,
+        headerTitle: string,
+        root: string,
+        root_open: string
+    }),
+    filters: arrayOf(
+        shape({
+            attribute_code: string,
+            items: array
+        })
+    )
+};
+
+export default FilterModal;