@riosst100/pwa-marketplace 1.2.6 → 1.2.7

package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.js

@@ -1,172 +1,172 @@
-import React from 'react';
-import { gql } from '@apollo/client';
-import { bool, func, shape, string } from 'prop-types';
-import { useAutocomplete } from '@magento/peregrine/lib/talons/SearchBar';
-import { useIntl } from 'react-intl';
-
-import defaultClasses from './autocomplete.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Suggestions from './suggestions';
-
-const GET_AUTOCOMPLETE_RESULTS = gql`
-    query getAutocompleteResults($inputText: String!) {
-        # Limit results to first three.
-        products(search: $inputText, currentPage: 1, pageSize: 3) {
-            aggregations {
-                label
-                count
-                attribute_code
-                options {
-                    label
-                    value
-                }
-                position
-            }
-            # eslint-disable-next-line @graphql-eslint/require-id-when-available
-            items {
-                id
-                uid
-                sku
-                name
-                small_image {
-                    url
-                }
-                url_key
-                url_suffix
-                price {
-                    regularPrice {
-                        amount {
-                            value
-                            currency
-                        }
-                    }
-                }
-                price_range {
-                    maximum_price {
-                        final_price {
-                            currency
-                            value
-                        }
-                        discount {
-                            amount_off
-                        }
-                    }
-                }
-            }
-            page_info {
-                total_pages
-            }
-            total_count
-        }
-    }
-`;
-
-const Autocomplete = props => {
-    const { setVisible, valid, visible } = props;
-    const talonProps = useAutocomplete({
-        queries: {
-            getAutocompleteResults: GET_AUTOCOMPLETE_RESULTS
-        },
-        valid,
-        visible
-    });
-    const {
-        displayResult,
-        filters,
-        messageType,
-        products,
-        resultCount,
-        value
-    } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const rootClassName = visible ? classes.root_visible : classes.root_hidden;
-
-    const { formatMessage } = useIntl();
-    const MESSAGES = new Map()
-        .set(
-            'ERROR',
-            formatMessage({
-                id: 'autocomplete.error',
-                defaultMessage: 'An error occurred while fetching results.'
-            })
-        )
-        .set(
-            'LOADING',
-            formatMessage({
-                id: 'autocomplete.loading',
-                defaultMessage: 'Fetching results...'
-            })
-        )
-        .set(
-            'PROMPT',
-            formatMessage({
-                id: 'autocomplete.prompt',
-                defaultMessage: 'Search for a product'
-            })
-        )
-        .set(
-            'EMPTY_RESULT',
-            formatMessage({
-                id: 'autocomplete.emptyResult',
-                defaultMessage: 'No results were found.'
-            })
-        )
-        .set('RESULT_SUMMARY', (_, resultCount) =>
-            formatMessage(
-                {
-                    id: 'autocomplete.resultSummary',
-                    defaultMessage: '{resultCount} items'
-                },
-                { resultCount: resultCount }
-            )
-        )
-        .set(
-            'INVALID_CHARACTER_LENGTH',
-            formatMessage({
-                id: 'autocomplete.invalidCharacterLength',
-                defaultMessage: 'Search term must be at least three characters'
-            })
-        );
-
-    const messageTpl = MESSAGES.get(messageType);
-    const message =
-        typeof messageTpl === 'function'
-            ? messageTpl`${resultCount}`
-            : messageTpl;
-
-    return (
-        <div data-cy="Autocomplete-root" className={rootClassName}>
-            <label
-                id="search_query"
-                data-cy="Autocomplete-message"
-                className={classes.message}
-            >
-                {message}
-            </label>
-            <div className={classes.suggestions}>
-                <Suggestions
-                    displayResult={displayResult}
-                    products={products || {}}
-                    filters={filters}
-                    searchValue={value}
-                    setVisible={setVisible}
-                    visible={visible}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default Autocomplete;
-
-Autocomplete.propTypes = {
-    classes: shape({
-        message: string,
-        root_hidden: string,
-        root_visible: string,
-        suggestions: string
-    }),
-    setVisible: func,
-    visible: bool
-};
+import React from 'react';
+import { gql } from '@apollo/client';
+import { bool, func, shape, string } from 'prop-types';
+import { useAutocomplete } from '@magento/peregrine/lib/talons/SearchBar';
+import { useIntl } from 'react-intl';
+
+import defaultClasses from './autocomplete.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Suggestions from './suggestions';
+
+const GET_AUTOCOMPLETE_RESULTS = gql`
+    query getAutocompleteResults($inputText: String!) {
+        # Limit results to first three.
+        products(search: $inputText, currentPage: 1, pageSize: 3) {
+            aggregations {
+                label
+                count
+                attribute_code
+                options {
+                    label
+                    value
+                }
+                position
+            }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                id
+                uid
+                sku
+                name
+                small_image {
+                    url
+                }
+                url_key
+                url_suffix
+                price {
+                    regularPrice {
+                        amount {
+                            value
+                            currency
+                        }
+                    }
+                }
+                price_range {
+                    maximum_price {
+                        final_price {
+                            currency
+                            value
+                        }
+                        discount {
+                            amount_off
+                        }
+                    }
+                }
+            }
+            page_info {
+                total_pages
+            }
+            total_count
+        }
+    }
+`;
+
+const Autocomplete = props => {
+    const { setVisible, valid, visible } = props;
+    const talonProps = useAutocomplete({
+        queries: {
+            getAutocompleteResults: GET_AUTOCOMPLETE_RESULTS
+        },
+        valid,
+        visible
+    });
+    const {
+        displayResult,
+        filters,
+        messageType,
+        products,
+        resultCount,
+        value
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClassName = visible ? classes.root_visible : classes.root_hidden;
+
+    const { formatMessage } = useIntl();
+    const MESSAGES = new Map()
+        .set(
+            'ERROR',
+            formatMessage({
+                id: 'autocomplete.error',
+                defaultMessage: 'An error occurred while fetching results.'
+            })
+        )
+        .set(
+            'LOADING',
+            formatMessage({
+                id: 'autocomplete.loading',
+                defaultMessage: 'Fetching results...'
+            })
+        )
+        .set(
+            'PROMPT',
+            formatMessage({
+                id: 'autocomplete.prompt',
+                defaultMessage: 'Search for a product'
+            })
+        )
+        .set(
+            'EMPTY_RESULT',
+            formatMessage({
+                id: 'autocomplete.emptyResult',
+                defaultMessage: 'No results were found.'
+            })
+        )
+        .set('RESULT_SUMMARY', (_, resultCount) =>
+            formatMessage(
+                {
+                    id: 'autocomplete.resultSummary',
+                    defaultMessage: '{resultCount} items'
+                },
+                { resultCount: resultCount }
+            )
+        )
+        .set(
+            'INVALID_CHARACTER_LENGTH',
+            formatMessage({
+                id: 'autocomplete.invalidCharacterLength',
+                defaultMessage: 'Search term must be at least three characters'
+            })
+        );
+
+    const messageTpl = MESSAGES.get(messageType);
+    const message =
+        typeof messageTpl === 'function'
+            ? messageTpl`${resultCount}`
+            : messageTpl;
+
+    return (
+        <div data-cy="Autocomplete-root" className={rootClassName}>
+            <label
+                id="search_query"
+                data-cy="Autocomplete-message"
+                className={classes.message}
+            >
+                {message}
+            </label>
+            <div className={classes.suggestions}>
+                <Suggestions
+                    displayResult={displayResult}
+                    products={products || {}}
+                    filters={filters}
+                    searchValue={value}
+                    setVisible={setVisible}
+                    visible={visible}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Autocomplete;
+
+Autocomplete.propTypes = {
+    classes: shape({
+        message: string,
+        root_hidden: string,
+        root_visible: string,
+        suggestions: string
+    }),
+    setVisible: func,
+    visible: bool
+};

package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css

@@ -1,62 +1,62 @@
-.root {
-    composes: absolute from global;
-    composes: bg-white from global;
-    composes: border-2 from global;
-    composes: border-input from global;
-    composes: border-solid from global;
-    composes: border-t-0 from global;
-    composes: gap-3 from global;
-    composes: grid from global;
-    composes: left-0 from global;
-    composes: p-xs from global;
-    composes: right-0 from global;
-    composes: rounded-b-md from global;
-    composes: rounded-t-none from global;
-    composes: shadow-inputFocus from global;
-    composes: text-sm from global;
-    composes: top-9 from global;
-    composes: z-menu from global;
-    transition-property: opacity, transform, visibility;
-}
-
-.root_hidden {
-    composes: root;
-
-    composes: invisible from global;
-    composes: opacity-0 from global;
-    transform: translate3d(0, -2rem, 0);
-    transition-duration: 192ms;
-    transition-timing-function: var(--venia-global-anim-out);
-}
-
-.root_visible {
-    composes: root;
-
-    composes: opacity-100 from global;
-    composes: visible from global;
-    transform: translate3d(0, 0, 0);
-    transition-duration: 224ms;
-    transition-timing-function: var(--venia-global-anim-in);
-}
-
-.message {
-    composes: px-3 from global;
-    composes: py-0 from global;
-    composes: text-center from global;
-    composes: text-subtle from global;
-}
-
-/* TODO @TW: cannot compose */
-.message:empty {
-    padding: 0;
-}
-
-.suggestions {
-    composes: gap-2xs from global;
-    composes: grid from global;
-}
-
-/* TODO @TW: cannot compose */
-.suggestions:empty {
-    display: none;
-}
+.root {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: border-2 from global;
+    composes: border-input from global;
+    composes: border-solid from global;
+    composes: border-t-0 from global;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: left-0 from global;
+    composes: p-xs from global;
+    composes: right-0 from global;
+    composes: rounded-b-md from global;
+    composes: rounded-t-none from global;
+    composes: shadow-inputFocus from global;
+    composes: text-sm from global;
+    composes: top-9 from global;
+    composes: z-menu from global;
+    transition-property: opacity, transform, visibility;
+}
+
+.root_hidden {
+    composes: root;
+
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    transform: translate3d(0, -2rem, 0);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
+}
+
+.root_visible {
+    composes: root;
+
+    composes: opacity-100 from global;
+    composes: visible from global;
+    transform: translate3d(0, 0, 0);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+}
+
+.message {
+    composes: px-3 from global;
+    composes: py-0 from global;
+    composes: text-center from global;
+    composes: text-subtle from global;
+}
+
+/* TODO @TW: cannot compose */
+.message:empty {
+    padding: 0;
+}
+
+.suggestions {
+    composes: gap-2xs from global;
+    composes: grid from global;
+}
+
+/* TODO @TW: cannot compose */
+.suggestions:empty {
+    display: none;
+}

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

@@ -1 +1 @@
-export { default } from './searchBar';
+export { default } from './searchBar';

package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.js

@@ -1,74 +1,74 @@
-import React from 'react';
-import { bool, shape, string } from 'prop-types';
-import { Form } from 'informed';
-import { useIntl } from 'react-intl';
-import { useSearchBar } from '@magento/peregrine/lib/talons/SearchBar';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Autocomplete from './autocomplete';
-import SearchField from './searchField';
-import defaultClasses from './searchBar.module.css';
-
-const SearchBar = React.forwardRef((props, ref) => {
-    const { isOpen } = props;
-    const talonProps = useSearchBar();
-    const {
-        containerRef,
-        handleChange,
-        handleFocus,
-        handleSubmit,
-        initialValues,
-        isAutoCompleteOpen,
-        setIsAutoCompleteOpen,
-        valid
-    } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const rootClassName = isOpen ? classes.root_open : classes.root;
-    const { formatMessage } = useIntl();
-    return (
-        <div className={rootClassName} data-cy="SearchBar-root" ref={ref}>
-            <div ref={containerRef} className={classes.container}>
-                <Form
-                    autoComplete="off"
-                    className={classes.form}
-                    initialValues={initialValues}
-                    onSubmit={handleSubmit}
-                >
-                    <div className={classes.search}>
-                        <SearchField
-                            addLabel={formatMessage({
-                                id: 'global.clearText',
-                                defaultMessage: 'Clear Text'
-                            })}
-                            isSearchOpen={isAutoCompleteOpen}
-                            onChange={handleChange}
-                            onFocus={handleFocus}
-                        />
-                        <div className={classes.autocomplete}>
-                            <Autocomplete
-                                setVisible={setIsAutoCompleteOpen}
-                                valid={valid}
-                                visible={isAutoCompleteOpen}
-                            />
-                        </div>
-                    </div>
-                </Form>
-            </div>
-        </div>
-    );
-});
-
-export default SearchBar;
-
-SearchBar.propTypes = {
-    classes: shape({
-        autocomplete: string,
-        container: string,
-        form: string,
-        root: string,
-        root_open: string,
-        search: string
-    }),
-    isOpen: bool
-};
+import React from 'react';
+import { bool, shape, string } from 'prop-types';
+import { Form } from 'informed';
+import { useIntl } from 'react-intl';
+import { useSearchBar } from '@magento/peregrine/lib/talons/SearchBar';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Autocomplete from './autocomplete';
+import SearchField from './searchField';
+import defaultClasses from './searchBar.module.css';
+
+const SearchBar = React.forwardRef((props, ref) => {
+    const { isOpen } = props;
+    const talonProps = useSearchBar();
+    const {
+        containerRef,
+        handleChange,
+        handleFocus,
+        handleSubmit,
+        initialValues,
+        isAutoCompleteOpen,
+        setIsAutoCompleteOpen,
+        valid
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClassName = isOpen ? classes.root_open : classes.root;
+    const { formatMessage } = useIntl();
+    return (
+        <div className={rootClassName} data-cy="SearchBar-root" ref={ref}>
+            <div ref={containerRef} className={classes.container}>
+                <Form
+                    autoComplete="off"
+                    className={classes.form}
+                    initialValues={initialValues}
+                    onSubmit={handleSubmit}
+                >
+                    <div className={classes.search}>
+                        <SearchField
+                            addLabel={formatMessage({
+                                id: 'global.clearText',
+                                defaultMessage: 'Clear Text'
+                            })}
+                            isSearchOpen={isAutoCompleteOpen}
+                            onChange={handleChange}
+                            onFocus={handleFocus}
+                        />
+                        <div className={classes.autocomplete}>
+                            <Autocomplete
+                                setVisible={setIsAutoCompleteOpen}
+                                valid={valid}
+                                visible={isAutoCompleteOpen}
+                            />
+                        </div>
+                    </div>
+                </Form>
+            </div>
+        </div>
+    );
+});
+
+export default SearchBar;
+
+SearchBar.propTypes = {
+    classes: shape({
+        autocomplete: string,
+        container: string,
+        form: string,
+        root: string,
+        root_open: string,
+        search: string
+    }),
+    isOpen: bool
+};