@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/overwrites/venia-ui/lib/components/Dialog/dialog.js

@@ -1,198 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { bool, func, shape, string, object, node } from 'prop-types';
-import { Form } from 'informed';
-import { X as CloseIcon } from 'react-feather';
-
-import { useScrollLock } from '@magento/peregrine';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-
-import Button from '@magento/venia-ui/lib/components/Button';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import { Portal } from '@magento/venia-ui/lib/components/Portal';
-import defaultClasses from './dialog.module.css';
-
-/**
- * The Dialog component shows its children content in a dialog,
- * encoding the look-and-feel and behavior in one place for consistency across the app.
- *
- * @typedef Dialog
- * @kind functional component
- *
- * @param {Object}  props
- * @param {Object}  props.classes - A set of class overrides to apply to elements.
- * @param {String}  props.cancelText - The text to display on the Dialog cancel button.
- * @param {String}  props.cancelTranslationId - The id to assign for the cancel button translation.
- * @param {String}  props.confirmText - The text to display on the Dialog confirm button.
- * @param {String}  props.confirmTranslationId - The id to assign for the confirm button translation.
- * @param {Object}  props.formProps - Props to apply to the internal form. @see https://joepuzzo.github.io/informed/?path=/story/form--props.
- * @param {Boolean} props.isModal - Determines behavior of clicking on the mask. False cancels Dialog.
- * @param {Boolean} props.isOpen - Whether the Dialog is currently showing.
- * @param {Func}    props.onCancel - A function to call when the user cancels the Dialog.
- * @param {Func}    props.onConfirm - A function to call when the user confirms the Dialog.
- * @param {Boolean} props.shouldDisableAllButtons - A toggle for whether the buttons should be disabled.
- * @param {Boolean} props.shouldDisableConfirmButton - A toggle for whether the confirm button should be disabled.
- *                                                     The final value is OR'ed with shouldDisableAllButtons.
- * @param {Boolean} props.shouldShowButtons - A toggle for whether the cancel and confirm buttons are visible.
- * @param {Boolean} props.shouldUnmountOnHide - A boolean to unmount child components on hide
- * @param {String}  props.title - The title of the Dialog.
- */
-const Dialog = props => {
-    const {
-        cancelText,
-        cancelTranslationId,
-        children,
-        confirmText,
-        confirmTranslationId,
-        formProps,
-        isModal,
-        isOpen,
-        onCancel,
-        onConfirm,
-        shouldDisableAllButtons,
-        shouldDisableConfirmButton,
-        shouldShowButtons = true,
-        shouldUnmountOnHide,
-        title
-    } = props;
-
-    // Prevent the page from scrolling in the background
-    // when the Dialog is open.
-    useScrollLock(isOpen);
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const rootClass = isOpen ? classes.root_open : classes.root;
-    const isMaskDisabled = shouldDisableAllButtons || isModal;
-    const confirmButtonDisabled =
-        shouldDisableAllButtons || shouldDisableConfirmButton;
-
-    const cancelButtonClasses = {
-        root_lowPriority: classes.cancelButton
-    };
-    const confirmButtonClasses = {
-        root_highPriority: classes.confirmButton
-    };
-
-    const maybeCloseXButton = !isModal ? (
-        <button
-            className={classes.headerButton}
-            disabled={shouldDisableAllButtons}
-            onClick={onCancel}
-            type="reset"
-        >
-            <Icon src={CloseIcon} />
-        </button>
-    ) : null;
-
-    const maybeButtons = shouldShowButtons ? (
-        <div className={classes.buttons}>
-            <Button
-                data-cy="Dialog-cancelButton"
-                classes={cancelButtonClasses}
-                disabled={shouldDisableAllButtons}
-                onClick={onCancel}
-                priority="low"
-                type="reset"
-            >
-                <FormattedMessage
-                    id={cancelTranslationId}
-                    defaultMessage={cancelText}
-                />
-            </Button>
-            <Button
-                data-cy="Dialog-confirmButton"
-                classes={confirmButtonClasses}
-                disabled={confirmButtonDisabled}
-                priority="high"
-                type="submit"
-            >
-                <FormattedMessage
-                    id={confirmTranslationId}
-                    defaultMessage={confirmText}
-                />
-            </Button>
-        </div>
-    ) : null;
-
-    const maybeForm =
-        isOpen || !shouldUnmountOnHide ? (
-            <Form
-                className={classes.form}
-                {...formProps}
-                onSubmit={onConfirm}
-                data-cy="Dialog-form"
-            >
-                {/* The Mask. */}
-                <button
-                    className={classes.mask}
-                    disabled={isMaskDisabled}
-                    onClick={onCancel}
-                    type="reset"
-                />
-                {/* The Dialog. */}
-                <div className={classes.dialog} data-cy={title}>
-                    <div className={classes.header}>
-                        <span
-                            className={classes.headerText}
-                            data-cy="Dialog-headerText"
-                        >
-                            {title}
-                        </span>
-                        {maybeCloseXButton}
-                    </div>
-                    <div className={classes.body}>
-                        <div className={classes.contents}>{children}</div>
-                        {maybeButtons}
-                    </div>
-                </div>
-            </Form>
-        ) : null;
-
-    return (
-        <Portal>
-            <aside className={rootClass} data-cy="Dialog-root">
-                {maybeForm}
-            </aside>
-        </Portal>
-    );
-};
-
-export default Dialog;
-
-Dialog.propTypes = {
-    cancelText: string,
-    cancelTranslationId: string,
-    classes: shape({
-        body: string,
-        cancelButton: string,
-        confirmButton: string,
-        container: string,
-        contents: string,
-        header: string,
-        headerText: string,
-        headerButton: string,
-        mask: string,
-        root: string,
-        root_open: string
-    }),
-    confirmText: string,
-    confirmTranslationId: string,
-    formProps: object,
-    isModal: bool,
-    isOpen: bool,
-    onCancel: func,
-    onConfirm: func,
-    shouldDisableAllButtons: bool,
-    shouldDisableSubmitButton: bool,
-    shouldUnmountOnHide: bool,
-    title: node
-};
-
-Dialog.defaultProps = {
-    cancelText: 'Cancel',
-    cancelTranslationId: 'global.cancelButton',
-    confirmText: 'Confirm',
-    confirmTranslationId: 'global.confirmButton',
-    isModal: false,
-    shouldUnmountOnHide: true
-};

package/src/overwrites/venia-ui/lib/components/Dialog/dialog.module.css

@@ -1,189 +0,0 @@
-/* The root aside element takes up the whole screen. */
-/* It is hidden by default. */
-/* It animates to being closed, and then moves off screen. */
-/* It sits over all background content. */
-.root {
-    composes: fixed from global;
-    composes: h-full from global;
-    composes: left-[-100vw] from global;
-    composes: opacity-0 from global;
-    composes: right-0 from global;
-    composes: top-0 from global;
-    composes: w-full from global;
-    composes: z-dialog from global;
-    transform: translate3d(-50%, 0, 0);
-    transition: opacity 192ms var(--venia-global-anim-out),
-        visibility 192ms var(--venia-global-anim-out), left 0s 192ms;
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
-
-    composes: lg_right-auto from global;
-}
-
-.root_open {
-    composes: root;
-
-    composes: left-auto from global;
-    composes: opacity-100 from global;
-
-    composes: lg_left-1/2 from global;
-    composes: rounded-md from global;
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
-
-    /* It animates to being open. */
-    transition: opacity 224ms var(--venia-global-anim-in),
-        visibility 224ms var(--venia-global-anim-in), left 0s;
-}
-
-/* The form fills the entire aside. */
-/* Its contents are centered horizontally and vertically. */
-.form {
-    composes: content-stretch from global;
-    composes: grid from global;
-    composes: h-full from global;
-    composes: justify-end from global;
-    composes: w-full from global;
-
-    composes: lg_content-center from global;
-    composes: lg_justify-center from global;
-}
-
-.mask {
-    /* The mask takes up the entire screen. */
-    composes: absolute from global;
-    composes: h-full from global;
-    composes: left-0 from global;
-    composes: top-0 from global;
-    composes: w-full from global;
-
-    /* The mask is a semi-transparent grey. */
-    composes: bg-gray-600 from global;
-    composes: opacity-50 from global;
-}
-
-/* The dialog is the only item in the form grid. */
-/* Nothing is allowed to overflow container itself. */
-/* Container is itself a grid container for its children. */
-/* Container can be the target of pointer events. */
-/* It sits on top of the mask. */
-.dialog {
-    /* It sets maximum sizes so its body can handle overflow. */
-    composes: h-full from global;
-    composes: max-h-full from global;
-    /* Minimum keeps a 16:9 aspect ratio and is 40rem x 22.5rem.  */
-    composes: min-h-[360px] from global;
-    composes: w-[640px] from global;
-
-    composes: bg-white from global;
-    composes: grid from global;
-    composes: grid-rows-autoFirst from global;
-    composes: max-w-modal from global;
-    composes: overflow-hidden from global;
-    composes: pointer-events-auto from global;
-    composes: rounded-md from global;
-    composes: shadow-dialog from global;
-    composes: z-dialog from global;
-
-    composes: lg_max-h-modal from global;
-    composes: lg_max-w-full from global;
-}
-
-/*
- *  Dialog Header styles.
- */
-
-.header {
-    composes: border-b from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: h-[3.5rem] from global;
-    composes: pl-4 from global;
-    composes: pr-3 from global;
-    composes: py-0 from global;
-
-    /* The Header is itself a grid container for its children. */
-    composes: gap-x-xs from global;
-    composes: grid from global;
-    composes: grid-cols-autoLast from global;
-    composes: grid-flow-col from global;
-    composes: items-center from global;
-}
-
-.headerText {
-    composes: capitalize from global;
-    composes: leading-tight from global;
-    composes: overflow-ellipsis from global;
-    composes: overflow-hidden from global;
-    composes: text-subtle from global;
-    composes: whitespace-nowrap from global;
-}
-
-.headerButton {
-    /* Horizontally align the close button to the right. */
-    composes: justify-self-end from global;
-}
-
-/*
- *  Dialog Body styles.
- */
-
-.body {
-    composes: overflow-auto from global;
-
-    /* The Body is itself a grid container for its children. */
-    composes: grid from global;
-    composes: grid-rows-autoLast from global;
-}
-
-.contents {
-    composes: p-xs from global;
-}
-
-.buttons {
-    composes: gap-xs from global;
-    composes: grid from global;
-    composes: grid-flow-row from global;
-    composes: justify-center from global;
-    composes: p-md from global;
-
-    composes: lg_grid-flow-col from global;
-}
-
-.confirmButton {
-    composes: root_highPriority from '../Button/button.module.css';
-
-    /* On mobile the confirm button should be first (on top). */
-    composes: order-first from global;
-
-    composes: lg_order-unset from global;
-}
-
-.cancelButton {
-    composes: root_lowPriority from '../Button/button.module.css';
-}
-
-/*
- * Mobile-specific styles.
- *
- * Instead of being a full-page modal,
- * dialogs slide out from the right.
- */
-
-@media (max-width: 959px) {
-    .root {
-        /* The Dialog starts off-screen on the right. */
-        transform: translate3d(100%, 0, 0);
-        /* For mobile, add position to the transitions. */
-        transition-property: opacity, transform, visibility;
-    }
-
-    .root_open {
-        /* The Dialog animates (slides) onto the screen. */
-        transform: translate3d(0, 0, 0);
-    }
-}

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

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

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

@@ -1,60 +0,0 @@
-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}
-                aria-label={ariaLabel}
-                data-cy="CurrentFilter-trigger"
-            >
-                <Icon size={14} 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

@@ -1,22 +0,0 @@
-.root {
-    min-height: 24px;
-    composes: border from global;
-    composes: border-gray-100 from global;
-    composes: font-medium 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-1 from global;
-    composes: rounded-md from global;
-    /* composes: text-white from global; */
-    composes: text-base 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

@@ -1,69 +0,0 @@
-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}`;
-
-                const customAttributeLandingPage = ['card_set', 'sc_baseball_release','auction','special_price','lof_preorder','sc_baseball_inserts','sc_baseball_parallel','sc_set_type'];
-
-                // if (!customAttributeLandingPage.includes(group)) {
-                    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

@@ -1,21 +0,0 @@
-.root {
-    composes: px-[10px] from global;
-    composes: py-2 from global;
-    composes: overflow-auto from global;
-    composes: flex from global;
-    composes: flex-wrap from global;
-    composes: gap-2 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;
-    composes: pt-2 from global;
-}

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

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

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

@@ -1,84 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-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 './filterDefault.module.css';
-import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
-
-const FilterDefault = props => {
-    const {
-        classes: propsClasses,
-        isSelected,
-        item,
-        onMouseDown,
-        group,
-        ...restProps
-    } = props;
-
-    const { label, value_index } = item || {};
-    const classes = useStyle(defaultClasses, propsClasses);
-    const { currentCurrencyCode } = useCurrencySwitcher();
-    const currencySymbolMap = {
-        USD: '$',
-        EUR: '€'
-    };
-    const currencySymbol = currencySymbolMap[currentCurrencyCode] != undefined ? currencySymbolMap[currentCurrencyCode] : currentCurrencyCode;
-    const title =
-        group === 'price'
-            ? label.replace('-', ' - ') 
-            : label;
-    const { formatMessage } = useIntl();
-
-    const ariaLabel = !isSelected
-        ? formatMessage(
-            {
-                id: 'filterModal.item.applyFilter',
-                defaultMessage: 'Apply filter "{optionName}".'
-            },
-            {
-                optionName: label
-            }
-        )
-        : formatMessage(
-            {
-                id: 'filterModal.item.clearFilter',
-                defaultMessage: 'Remove filter "{optionName}".'
-            },
-            {
-                optionName: label
-            }
-        );
-
-    return (
-        <Checkbox
-            classes={classes}
-            field={`${label}-${value_index}`}
-            fieldValue={!!isSelected}
-            label={title}
-            ariaLabel={ariaLabel}
-            data-cy="FilterDefault-checkbox"
-            onClick={onMouseDown}
-            {...restProps}
-        />
-    );
-};
-
-export default FilterDefault;
-
-FilterDefault.propTypes = {
-    classes: shape({
-        root: string,
-        icon: string,
-        label: string,
-        checked: string
-    }),
-    group: string,
-    isSelected: bool,
-    item: shape({
-        label: string.isRequired,
-        value_index: string.isRequired
-    }).isRequired,
-    label: string
-};