@riosst100/pwa-marketplace 1.3.3 → 1.3.4

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.shimmer.js

@@ -0,0 +1,24 @@
+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 '@magento/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css';
+
+const BreadcrumbsShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width={5} />
+        </div>
+    );
+};
+
+BreadcrumbsShimmer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default BreadcrumbsShimmer;

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

@@ -0,0 +1,2 @@
+export { default } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs';
+export { default as BreadcrumbShimmer } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.shimmer';

package/src/overwrites/venia-ui/lib/components/Checkbox/checkbox.js

@@ -0,0 +1,78 @@
+import React, { Fragment, useEffect } from 'react';
+import { node, shape, string } from 'prop-types';
+import { Checkbox as InformedCheckbox, useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { Message } from '@magento/venia-ui/lib/components/Field';
+import { CheckSquare, Square } from 'react-feather';
+import defaultClasses from './checkbox.module.css';
+
+/* TODO: change lint config to use `label-has-associated-control` */
+/* eslint-disable jsx-a11y/label-has-for */
+
+const checkedIcon = <CheckSquare size={14} />;
+const uncheckedIcon = <Square size={14} />;
+
+const Checkbox = props => {
+    const {
+        ariaLabel,
+        classes: propClasses,
+        field,
+        fieldValue,
+        id,
+        label,
+        message,
+        ...rest
+    } = props;
+    const fieldApi = useFieldApi(field);
+    const fieldState = useFieldState(field);
+    const classes = useStyle(defaultClasses, propClasses);
+    const icon = fieldState.value ? checkedIcon : uncheckedIcon;
+
+    useEffect(() => {
+        if (fieldValue != null && fieldValue !== fieldState.value) {
+            fieldApi.setValue(fieldValue);
+        }
+    }, [fieldApi, fieldState.value, fieldValue]);
+
+    return (
+        <Fragment>
+            <label
+                data-cy="Checkbox-label"
+                aria-label={ariaLabel}
+                className={classes.root}
+                htmlFor={id}
+            >
+                <InformedCheckbox
+                    {...rest}
+                    className={classes.input}
+                    field={field}
+                    id={id}
+                />
+                <span className={classes.icon}>{icon}</span>
+                <span className={classes.label}>{label}</span>
+            </label>
+            <Message fieldState={fieldState}>{message}</Message>
+        </Fragment>
+    );
+};
+
+export default Checkbox;
+
+Checkbox.propTypes = {
+    ariaLabel: string,
+    classes: shape({
+        icon: string,
+        input: string,
+        label: string,
+        message: string,
+        root: string
+    }),
+    field: string.isRequired,
+    id: string,
+    label: node.isRequired,
+    message: node
+};
+
+/* eslint-enable jsx-a11y/label-has-for */

package/src/overwrites/venia-ui/lib/components/Checkbox/checkbox.module.css

@@ -0,0 +1,73 @@
+.root {
+    --stroke: var(--venia-global-color-gray-600);
+
+    composes: gap-[8px] from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: leading-normal from global;
+    composes: text-colorDefault from global;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+}
+
+.input {
+    composes: appearance-none from global;
+    composes: bg-transparent from global;
+    composes: border-1 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: cursor-pointer from global;
+    composes: h-[14px] from global;
+    composes: rounded from global;
+    composes: w-[14px] from global;
+    grid-area: input;
+
+    /* TODO @TW: review, replaces input:disabled. Check if working. */
+    composes: disabled_cursor-not-allowed from global;
+}
+
+.icon {
+    composes: h-[14px] from global;
+    composes: pointer-events-none from global;
+    composes: w-[14px] from global;
+    grid-area: input;
+}
+
+.icon svg {
+    stroke: rgb(var(--stroke));
+}
+
+.label {
+    composes: cursor-pointer from global;
+    composes: justify-self-start from global;
+    composes: text-colorDefault from global;
+    grid-area: label;
+    composes: text-[13px] from global;
+}
+
+/* When the input is disabled, update the cursor on the sibling label element. */
+/* TODO @TW: cannot compose */
+.input:disabled~.label {
+    cursor: default;
+}
+
+.input:checked:enabled+.icon {
+    /* --stroke: var(--venia-brand-color-1-700); */
+}
+
+/* TODO @TW: cannot compose, needs "checked" variant enabled. Cannot combine variants. */
+.input:active:enabled,
+.input:focus:enabled {
+    /* composes: active_shadow-radioActive from global; */
+    /* composes: focus_shadow-radioFocus from global; */
+    /* box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100)); */
+    /* outline: none; */
+}
+
+.input_shimmer {
+    composes: h-[14px] from global;
+    composes: rounded from global;
+    composes: w-[14px] from global;
+}

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

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

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

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { shape, string, func } from 'prop-types';
+import { X as Remove } from 'react-feather';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Trigger from '@magento/venia-ui/lib/components/Trigger';
+import defaultClasses from './currentFilter.module.css';
+
+const CurrentFilter = props => {
+    const { group, item, removeItem, onRemove } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+
+    const handleClick = useCallback(() => {
+        removeItem({ group, item });
+        if (typeof onRemove === 'function') {
+            onRemove(group, item);
+        }
+    }, [group, item, removeItem, onRemove]);
+
+    const ariaLabel = formatMessage(
+        {
+            id: 'filterModal.action.clearFilterItem.ariaLabel',
+            defaultMessage: 'Clear filter "{name}"'
+        },
+        {
+            name: item.label ? item.label : item.title
+        }
+    );
+
+    return (
+        <span className={classes.root} data-cy="CurrentFilter-root">
+            <Trigger
+                action={handleClick}
+                ariaLabel={ariaLabel}
+                data-cy="CurrentFilter-trigger"
+            >
+                <Icon size={20} src={Remove} />
+            </Trigger>
+            <span className={classes.text}>
+                {item.label ? item.label : item.title}
+            </span>
+        </span>
+    );
+};
+
+export default CurrentFilter;
+
+CurrentFilter.defaultProps = {
+    onRemove: null
+};
+
+CurrentFilter.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    onRemove: func
+};

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

@@ -0,0 +1,21 @@
+.root {
+    min-height: 24px;
+    composes: bg-blue-700 from global;
+    composes: font-semibold from global;
+    composes: gap-2xs from global;
+    composes: grid-flow-col from global;
+    composes: inline-grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: px-2 from global;
+    composes: py-2 from global;
+    composes: rounded-md from global;
+    /* composes: text-white from global; */
+    composes: text-[13px] from global;
+}
+
+/* TODO @TW: cannot compose */
+.root svg {
+    /* composes: stroke-white from global; */
+    stroke: rgb(var(--venia-global-color-gray-600));
+}

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

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react';
+import { func, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CurrentFilter from './currentFilter';
+import defaultClasses from './currentFilters.module.css';
+
+const CurrentFilters = props => {
+    const { filterApi, filterState, onRemove } = props;
+    const { removeItem } = filterApi;
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+
+    // create elements and params at the same time for efficiency
+    const filterElements = useMemo(() => {
+        const elements = [];
+        for (const [group, items] of filterState) {
+            for (const item of items) {
+                const { title, value } = item || {};
+                const key = `${group}::${title}_${value}`;
+
+                elements.push(
+                    <li key={key} className={classes.item}>
+                        <CurrentFilter
+                            group={group}
+                            item={item}
+                            removeItem={removeItem}
+                            onRemove={onRemove}
+                        />
+                    </li>
+                );
+            }
+        }
+
+        return elements;
+    }, [classes.item, filterState, removeItem, onRemove]);
+
+    const currentFiltersAriaLabel = formatMessage({
+        id: 'filterModal.currentFilters.ariaLabel',
+        defaultMessage: 'Current Filters'
+    });
+
+    return (
+        <ul className={classes.root} aria-label={currentFiltersAriaLabel}>
+            {filterElements}
+        </ul>
+    );
+};
+
+CurrentFilters.defaultProps = {
+    onRemove: null
+};
+
+CurrentFilters.propTypes = {
+    classes: shape({
+        root: string,
+        item: string,
+        button: string,
+        icon: string
+    }),
+    onRemove: func
+};
+
+export default CurrentFilters;

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

@@ -0,0 +1,17 @@
+.root {
+    composes: px-[10px] from global;
+    composes: py-2 from global;
+    composes: overflow-auto from global;
+}
+
+/* TODO @TW: cannot compose */
+.root:empty {
+    display: none;
+}
+
+.item {
+    composes: float-left from global;
+    composes: pb-0 from global;
+    composes: pl-0 from global;
+    composes: pr-2 from global;
+}

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

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

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

@@ -4,7 +4,7 @@ import { bool, shape, string } from 'prop-types';
 
 import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from '@magento/venia-ui/lib/components/FilterModal/FilterList/filterDefault.module.css';
+import defaultClasses from './filterDefault.module.css';
 import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
 
 const FilterDefault = props => {
@@ -27,29 +27,29 @@ const FilterDefault = props => {
     const currencySymbol = currencySymbolMap[currentCurrencyCode] != undefined ? currencySymbolMap[currentCurrencyCode] : currentCurrencyCode;
     const title =
         group === 'price'
-            ? currencySymbol + label.replace('-', ' - ' + currencySymbol) 
+            ? label.replace('-', ' - ') 
             : label;
     const { formatMessage } = useIntl();
 
     const ariaLabel = !isSelected
         ? formatMessage(
-              {
-                  id: 'filterModal.item.applyFilter',
-                  defaultMessage: 'Apply filter "{optionName}".'
-              },
-              {
-                  optionName: label
-              }
-          )
+            {
+                id: 'filterModal.item.applyFilter',
+                defaultMessage: 'Apply filter "{optionName}".'
+            },
+            {
+                optionName: label
+            }
+        )
         : formatMessage(
-              {
-                  id: 'filterModal.item.clearFilter',
-                  defaultMessage: 'Remove filter "{optionName}".'
-              },
-              {
-                  optionName: label
-              }
-          );
+            {
+                id: 'filterModal.item.clearFilter',
+                defaultMessage: 'Remove filter "{optionName}".'
+            },
+            {
+                optionName: label
+            }
+        );
 
     return (
         <Checkbox

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

@@ -0,0 +1,79 @@
+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
+    }).isRequired,
+    onChange: func
+};
+
+export default FilterItem;

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

@@ -0,0 +1,76 @@
+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 => {
+            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
+    }).isRequired,
+    onApply: func,
+    labels: instanceOf(Map).isRequired
+};
+
+export default FilterItemRadio;

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

@@ -0,0 +1,86 @@
+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
+        })
+    ).isRequired,
+    onApply: func,
+    labels: instanceOf(Map).isRequired
+};
+
+export default FilterItemRadioGroup;