@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/overwrites/venia-ui/lib/index.module.css

@@ -0,0 +1,137 @@
+@import './tokens.module.css';
+
+:global(*) {
+    /* composes: box-border from global; */
+    box-sizing: border-box;
+}
+
+/* TODO @TW: cannot compose */
+:global(html) {
+    /* composes: text-[100%] from global; */
+    font-size: 100%;
+    /* composes: text-normal from global; */
+    font-weight: 400;
+    /* composes: leading-none from global; */
+    line-height: 1;
+    /* composes: antialiased from global; */
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+
+:global(html[data-scroll-lock='true']),
+:global(html[data-scroll-lock='true'] body) {
+    height: 100%;
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+}
+
+/* TODO @TW: cannot compose */
+:global(body),
+:global(button),
+:global(input),
+:global(select),
+:global(textarea) {
+    /* composes: text-gray-900 from global; */
+    /* color: rgb(var(--venia-global-color-text)); */
+    color: rgb(23 32 38);
+}
+
+:global(body) {
+    /* composes: m-0 from global; */
+    margin: 0;
+    /* composes: p-0 from global; */
+    padding: 0;
+}
+
+:global(h1),
+:global(h2),
+:global(h3),
+:global(h4),
+:global(h5),
+:global(h6) {
+    /* composes: font-base from global; */
+    font-size: 1rem;
+    /* composes: font-normal from global; */
+    font-weight: 400;
+    /* composes: m-0 from global; */
+    margin: 0;
+}
+
+:global(h1) {
+    /* composes: text-xl from global; */
+    font-size: 1.5rem;
+}
+
+:global(h2) {
+    /* composes: text-lg from global; */
+    font-size: 1.25rem;
+}
+
+:global(a) {
+    /* composes: text-current from global; */
+    color: currentColor;
+    /* composes: no-underline from global; */
+    text-decoration: none;
+}
+
+:global(p) {
+    /* composes: m-0 from global; */
+    margin: 0;
+}
+
+:global(dl),
+:global(ol),
+:global(ul) {
+    /* composes: list-none from global; */
+    list-style-type: none;
+    /* composes: m-0 from global; */
+    margin: 0;
+    /* composes: p-0 from global; */
+    padding: 0;
+}
+
+:global(dd),
+:global(dt) {
+    /* composes: m-0 from global; */
+    margin: 0;
+}
+
+/* TODO @TW: cannot compose */
+:global(button) {
+    /* composes: bg-transparent from global; */
+    background: none;
+    /* composes: border-0 from global; */
+    border: 0;
+    /* composes: cursor-pointer from global; */
+    cursor: pointer;
+    /* composes: text-[100%] from global; */
+    font-size: 100%;
+    /* composes: p-0 from global; */
+    padding: 0;
+    touch-action: manipulation;
+    /* composes: select-none from global; */
+    user-select: none;
+    /* composes: appearance-none from global; */
+    -webkit-appearance: none;
+}
+
+:global(button:disabled) {
+    /* composes: cursor-default from global; */
+    cursor: default;
+    touch-action: none;
+}
+
+:global(.braintree-sheet__content--form
+        .braintree-form__field-group
+        .braintree-form__field
+        .braintree-form__hosted-field
+        input.braintree-form__raw-input) {
+    color: #8f8f8f !important;
+}
+
+:global(.braintree-sheet__content--form
+        .braintree-form__field-group
+        .braintree-form__descriptor) {
+    color: #757575 !important;
+}

package/src/overwrites/venia-ui/lib/tokens.module.css

@@ -0,0 +1,167 @@
+/* global tokens */
+:global(:root) {
+    /* animation */
+    --venia-global-anim-bounce: cubic-bezier(0.5, 1.8, 0.9, 0.8);
+    --venia-global-anim-in: cubic-bezier(0, 0, 0.2, 1);
+    --venia-global-anim-out: cubic-bezier(0.4, 0, 1, 1);
+    --venia-global-anim-standard: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* color */
+    --venia-global-color-blue-100: 194 200 255;
+    --venia-global-color-blue-400: 71 139 255;
+    /* --venia-global-color-blue-500: 51 109 255; */
+    /* --venia-global-color-blue-600: 41 84 255; */
+    --venia-global-color-blue-700: 31 57 255;
+    /* --venia-global-color-blue-800: 23 43 196; */
+    --venia-global-color-gray-50: 255 255 255;
+    /* --venia-global-color-gray-75: 250 250 250; */
+    --venia-global-color-gray-100: 244 245 245;
+    /* --venia-global-color-gray-200: 234 235 235; */
+    --venia-global-color-gray-300: 161 151 145;
+    --venia-global-color-gray-400: 181 184 186;
+    --venia-global-color-gray-500: 149 154 157;
+    --venia-global-color-gray-600: 118 123 127;
+    --venia-global-color-gray-700: 84 93 99;
+    /* --venia-global-color-gray-800: 51 63 71; */
+    --venia-global-color-gray-900: 23 32 38;
+    --venia-global-color-gray: var(--venia-global-color-gray-100);
+    --venia-global-color-gray-dark: var(--venia-global-color-gray-300);
+    --venia-global-color-gray-darker: var(--venia-global-color-gray-600);
+    /* --venia-global-color-green-400: 51 171 132; */
+    --venia-global-color-green-500: 45 157 120;
+    /* --venia-global-color-green-600: 38 142 108; */
+    /* --venia-global-color-green-700: 18 128 92; */
+    --venia-global-color-orange: 241 99 33;
+    --venia-global-color-red-400: 236 91 98;
+    /* --venia-global-color-red-500: 227 72 80; */
+    /* --venia-global-color-red-600: 215 55 63; */
+    --venia-global-color-red-700: 201 37 45;
+    /* --venia-global-color-red-800: 161 30 36; */
+    --venia-global-color-teal: var(--venia-global-color-blue-400);
+    /* --venia-global-color-teal-dark: var(--venia-global-color-blue-600); */
+    --venia-global-color-teal-light: var(--venia-global-color-gray-100);
+
+    /* color by semantics */
+    /* --venia-global-color-background: var(--venia-global-color-gray-50); */
+    --venia-global-color-border: var(--venia-global-color-gray-300);
+    --venia-global-color-error: var(--venia-global-color-red-700);
+    --venia-global-color-text: var(--venia-global-color-gray-900);
+    /* --venia-global-color-text-alt: var(--venia-global-color-gray-darker); */
+    --venia-global-color-text-hint: var(--venia-global-color-gray-500);
+    /* --venia-global-color-warning-dark: var(--venia-global-color-red-700); */
+    /* --venia-global-color-warning-light: var(--venia-global-color-gray-100); */
+
+    /* font family */
+    /* --venia-global-fontFamily-sansSerif: 'Muli', sans-serif; */
+    /* --venia-global-fontFamily-serif: 'Source Serif Pro', serif; */
+
+    /* font size */
+    /* --venia-global-fontSize-50: 0.6875rem; */
+    /* 11px */
+    /* --venia-global-fontSize-75: 0.75rem; */
+    /* 12px */
+    /* --venia-global-fontSize-100: 0.875rem; */
+    /* 14px */
+    /* --venia-global-fontSize-200: 1rem; */
+    /* 16px */
+    /* --venia-global-fontSize-300: 1.125rem; */
+    /* 18px */
+    /* --venia-global-fontSize-400: 1.25rem; */
+    /* 20px */
+    /* --venia-global-fontSize-500: 1.375rem; */
+    /* 22px */
+    /* --venia-global-fontSize-600: 1.5rem; */
+    /* 24px */
+    /* --venia-global-fontSize-700: 1.75rem; */
+    /* 28px */
+    /* --venia-global-fontSize-800: 2rem; */
+    /* 32px */
+    /* --venia-global-fontSize-900: 2.25rem; */
+    /* 36px */
+    /* --venia-global-fontSize-1000: 2.5rem; */
+    /* 40px */
+    /* --venia-global-fontSize-1100: 3rem; */
+    /* 48px */
+    /* --venia-global-fontSize-1200: 3.5rem; */
+    /* 56px */
+
+    /* font weight */
+    /* --venia-global-fontWeight-normal: 400; */
+    /* --venia-global-fontWeight-medium: 600; */
+    /* --venia-global-fontWeight-bold: 700; */
+
+    /* line height */
+    /* --venia-global-lineHeight-100: 1; */
+    /* --venia-global-lineHeight-200: 1.25; */
+    /* --venia-global-lineHeight-300: 1.5; */
+    /* --venia-global-lineHeight-400: 1.75; */
+    /* --venia-global-lineHeight-500: 2; */
+
+    /* dimensions */
+    --venia-global-maxWidth: 1180px;
+    --venia-global-header-minHeight: 5rem;
+}
+
+@media (max-width: 959px) {
+    :global(:root) {
+        --venia-global-header-minHeight: 3.5rem;
+    }
+}
+
+/* alias tokens */
+:global(:root) {
+    /* colors */
+    --venia-brand-color-1-100: var(--venia-global-color-blue-100);
+    /* --venia-brand-color-1-400: var(--venia-global-color-blue-400); */
+    /* --venia-brand-color-1-500: var(--venia-global-color-blue-500); */
+    /* --venia-brand-color-1-600: var(--venia-global-color-blue-600); */
+    --venia-brand-color-1-700: var(--venia-global-color-blue-700);
+    /* --venia-brand-color-1-800: var(--venia-global-color-blue-800); */
+
+    /* typography - heading */
+    /*
+    --venia-global-typography-heading-XL-fontSize: var(
+        --venia-global-fontSize-600
+    );
+    --venia-global-typography-heading-L-fontSize: var(
+        --venia-global-fontSize-400
+    );
+    --venia-global-typography-heading-M-fontSize: var(
+        --venia-global-fontSize-300
+    );
+    --venia-global-typography-heading-S-fontSize: var(
+        --venia-global-fontSize-200
+    );
+    --venia-global-typography-heading-XS-fontSize: var(
+        --venia-global-fontSize-100
+    );
+    --venia-global-typography-heading-lineHeight: calc(
+        var(--venia-global-lineHeight-200) * 1em
+    );
+    */
+
+    /* typography - body */
+    /* --venia-typography-body-XXXL-fontSize: var(--venia-global-fontSize-600); */
+    /* --venia-typography-body-XXL-fontSize: var(--venia-global-fontSize-500); */
+    /* --venia-typography-body-XL-fontSize: var(--venia-global-fontSize-400); */
+    /* --venia-typography-body-L-fontSize: var(--venia-global-fontSize-300); */
+    /* --venia-typography-body-M-fontSize: var(--venia-global-fontSize-200); */
+    /* --venia-typography-body-S-fontSize: var(--venia-global-fontSize-100); */
+    /* --venia-typography-body-XS-fontSize: var(--venia-global-fontSize-50); */
+    /*
+    --venia-typography-body-lineHeight: calc(
+        var(--venia-global-lineHeight-300) * 1em
+    );
+    */
+
+    /* typography - detail */
+    /*
+    --venia-typography-detail-XL-fontSize: var(--venia-global-fontSize-200);
+    --venia-typography-detail-L-fontSize: var(--venia-global-fontSize-100);
+    --venia-typography-detail-M-fontSize: var(--venia-global-fontSize-75);
+    --venia-typography-detail-S-fontSize: var(--venia-global-fontSize-50);
+    --venia-typography-detail-lineHeight: calc(
+        var(--venia-global-lineHeight-200) * 1em
+    );
+    */
+}

package/src/overwrites/venia-ui/venia-static/manifest.json

@@ -0,0 +1,32 @@
+{
+    "name": "Venia",
+    "short_name": "Venia",
+    "start_url": "/",
+    "theme_color": "#1F39FF",
+    "display": "standalone",
+    "background_color": "#fff",
+    "description": "Shop the look",
+    "icons": [
+        {
+            "src": "/venia-static/icons/venia_circle_144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "/venia-static/icons/venia_circle_192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/venia-static/icons/venia_circle_512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "/venia-static/icons/venia_maskable_512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}

package/src/static-files/manifest.json

@@ -0,0 +1,32 @@
+{
+    "name": "Venia",
+    "short_name": "Venia",
+    "start_url": "/",
+    "theme_color": "#1F39FF",
+    "display": "standalone",
+    "background_color": "#fff",
+    "description": "Shop the look",
+    "icons": [
+        {
+            "src": "/venia-static/icons/venia_circle_144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "/venia-static/icons/venia_circle_192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/venia-static/icons/venia_circle_512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "/venia-static/icons/venia_maskable_512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}

package/src/static-files/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/src/talons/ArraySearchInput/useArraySearchInput.js

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
+
+const initialValues = { search_query: '' };
+
+export const useArraySearchInput = props => {
+    const { active } = props
+    const [valid, setValid] = useState(false);
+    const {
+        elementRef,
+        expanded: isAutoCompleteOpen,
+        setExpanded: setIsAutoCompleteOpen
+    } = useDropdown();
+    const history = useHistory();
+    const { push } = history;
+
+    // expand or collapse on input change
+    const handleChange = useCallback(
+        value => {
+            const hasValue = !!value;
+            const isValid = hasValue && value.length > 2;
+
+            setValid(isValid);
+            setIsAutoCompleteOpen(hasValue);
+        },
+        [setIsAutoCompleteOpen, setValid]
+    );
+
+    // expand on focus
+    const handleFocus = useCallback(() => {
+        setIsAutoCompleteOpen(true);
+    }, [setIsAutoCompleteOpen]);
+
+    // navigate on submit
+    const handleSubmit = useCallback(
+        ({ search_query }) => {
+            if (search_query != null && search_query.trim().length > 0) {
+                push(`/search.html?query=${search_query}`);
+                setIsAutoCompleteOpen(false);
+            }
+        },
+        [push, setIsAutoCompleteOpen]
+    );
+
+    return {
+        containerRef: elementRef,
+        handleChange,
+        handleFocus,
+        handleSubmit,
+        initialValues,
+        isAutoCompleteOpen,
+        setIsAutoCompleteOpen,
+        setValid,
+        valid
+    };
+};

package/src/talons/AttributesBlock/attributesBlock.gql.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/AttributesBlock/useAttributesBlock.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './attributesBlock.gql';
+
+const getPath = (path, suffix) => {
+    if (path) {
+        return `/${path}${suffix || ''}`;
+    }
+
+    // If there is no path this is just a dead link.
+    return '#';
+};
+
+export const useAttributesBlock = props => {
+    const { attributesBlock } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    return {
+        categoryUrlSuffix,
+        getPath
+    };
+};

package/src/talons/CollectibleGameSets/collectibleGameSets.gql.js

@@ -0,0 +1,47 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_COLLECTIBLE_GAME_QUERY = gql`
+    query getCollectibleGameSets($categoryUrlKey: String!, $productType: String) {
+        collectibleGameSets(categoryUrlKey: $categoryUrlKey, productType: $productType) {
+            release_type
+            sets {
+                set_name
+                option_id
+                set_abbreviation
+                release_date
+                release_year
+                release_number
+            }
+        }
+    }
+`;
+
+export const GET_SPORT_CARDS_SETS_QUERY = gql`
+    query getSportCardsSets($categoryUrlKey: String!, $setType: String) {
+        sportCardsSets(categoryUrlKey: $categoryUrlKey, setType: $setType) {
+            group
+            sets {
+                set_name
+                option_id
+                release_year
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getCollectibleGameQuery: GET_COLLECTIBLE_GAME_QUERY,
+    getSportCardsSetsQuery: GET_SPORT_CARDS_SETS_QUERY
+};