Updating Tailwind to V3 (#4196)

* Updating dependencies to tailwind v3.3, updating configurations with v3 changes, fixing issues in components following upgrade * Changing tokens to use tailwind config, refactor for border radius to make more configurable * Fixing self reference in config, fixing broken index.module.css, fixing B7 issues * WIP going through tailwind TODOs and changing to tailwind values, fixing index styles, adding more config values to fix TODOs * Fixing priority issues, adding new theme values, fixing theme and tokens * Changing all media queries to use config screen sizes, adding new screen sizes to config * Fixing lint and prettier * Fixing tailwind review comments, updating tailwind doc * fix prettier * Removing checkmo from tests * fix jest test for accout menu * fixing visibility priority issues * PWA-3174::[feature]: Tailwind v3 support --------- Co-authored-by: arpit khare <[email protected]> Co-authored-by: Aanchal Pawar <[email protected]> Co-authored-by: glo82145 <[email protected]>
magento · Mar 21, 2024 · d12b8c4 · d12b8c4
1 parent f58bed1
commit d12b8c4
Show file tree

Hide file tree

Showing 177 changed files with 43,110 additions and 1,439 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,6 @@
     "watch:venia": "yarn venia run watch"
   },
   "dependencies": {
-    "@material-ui/core": "~4.12.4",
     "caniuse-lite": "~1.0.30001335"
   },
   "devDependencies": {
@@ -88,7 +87,7 @@
     "lodash.debounce": "~4.0.8",
     "prettier": "~1.16.4",
     "rimraf": "~2.6.3",
-    "tailwindcss": "~2.2.7"
+    "tailwindcss": "~3.3.0"
   },
   "optionalDependencies": {
     "bundlesize": "~0.18.1",
@@ -116,4 +115,4 @@
       "maxSize": "100 kB"
     }
   ]
-}
+}
diff --git a/...s/extensions/experience-platform-connector/src/__tests__/__snapshots__/utils.spec.js.snap b/...s/extensions/experience-platform-connector/src/__tests__/__snapshots__/utils.spec.js.snap
@@ -47,7 +47,6 @@ Array [
       },
       "productType": "ConfigurableProduct",
       "sku": "VSK02",
-      "topLevelSku": "VSK02",
     },
     "quantity": 1,
   },
@@ -83,7 +82,6 @@ Array [
       },
       "productType": "SimpleProduct",
       "sku": "VA17-SI-NA",
-      "topLevelSku": "VA17-SI-NA",
     },
     "quantity": 2,
   },
@@ -132,7 +130,6 @@ Array [
       },
       "productType": "ConfigurableProduct",
       "sku": "VA04",
-      "topLevelSku": "VA04",
     },
     "quantity": 3,
   },

diff --git a/...platform-connector/src/handlers/__tests__/__snapshots__/shoppingMiniCartView.spec.js.snap b/...platform-connector/src/handlers/__tests__/__snapshots__/shoppingMiniCartView.spec.js.snap
@@ -47,7 +47,6 @@ Object {
         },
         "productType": "ConfigurableProduct",
         "sku": "VSK02",
-        "topLevelSku": "VSK02",
       },
       "quantity": 1,
     },
@@ -79,7 +78,6 @@ Object {
         },
         "productType": "SimpleProduct",
         "sku": "VA17-SI-NA",
-        "topLevelSku": "VA17-SI-NA",
       },
       "quantity": 2,
     },
@@ -124,7 +122,6 @@ Object {
         },
         "productType": "ConfigurableProduct",
         "sku": "VA04",
-        "topLevelSku": "VA04",
       },
       "quantity": 3,
     },

diff --git a/...ensions/experience-platform-connector/src/handlers/__tests__/shoppingCartPageView.spec.js b/...ensions/experience-platform-connector/src/handlers/__tests__/shoppingCartPageView.spec.js
@@ -81,7 +81,6 @@ describe('handle()', () => {
                     },
                     "productType": "ConfigurableProduct",
                     "sku": "VSK02",
-                    "topLevelSku": "VSK02",
                   },
                   "quantity": 1,
                 },
@@ -117,7 +116,6 @@ describe('handle()', () => {
                     },
                     "productType": "SimpleProduct",
                     "sku": "VA17-SI-NA",
-                    "topLevelSku": "VA17-SI-NA",
                   },
                   "quantity": 2,
                 },
@@ -166,7 +164,6 @@ describe('handle()', () => {
                     },
                     "productType": "ConfigurableProduct",
                     "sku": "VA04",
-                    "topLevelSku": "VA04",
                   },
                   "quantity": 3,
                 },

diff --git a/...ges/extensions/experience-platform-connector/src/handlers/__tests__/startCheckout.spec.js b/...ges/extensions/experience-platform-connector/src/handlers/__tests__/startCheckout.spec.js
@@ -96,7 +96,6 @@ describe('handle()', () => {
                     },
                     "productType": "ConfigurableProduct",
                     "sku": "VP08",
-                    "topLevelSku": "VP08",
                   },
                   "quantity": 3,
                 },
@@ -139,7 +138,6 @@ describe('handle()', () => {
                     },
                     "productType": "ConfigurableProduct",
                     "sku": "VA09",
-                    "topLevelSku": "VA09",
                   },
                   "quantity": 1,
                 },
@@ -175,7 +173,6 @@ describe('handle()', () => {
                     },
                     "productType": "SimpleProduct",
                     "sku": "VA22-SI-NA",
-                    "topLevelSku": "VA22-SI-NA",
                   },
                   "quantity": 1,
                 },

diff --git a/packages/extensions/experience-platform-connector/src/utils.js b/packages/extensions/experience-platform-connector/src/utils.js
@@ -82,7 +82,6 @@ export const getFormattedProducts = products => {
                   product: {
                       name: name,
                       sku: sku,
-                      topLevelSku: product.sku,
                       productType: type,
                       pricing: {
                           regularPrice: prices.price.value,

diff --git a/packages/extensions/venia-sample-payments-checkmo/src/components/summary.module.css b/packages/extensions/venia-sample-payments-checkmo/src/components/summary.module.css
@@ -35,7 +35,7 @@
 .payment_type {
 }
 
-@media (max-width: 960px) {
+@media screen(-lg) {
     .edit_text {
         display: none;
     }

diff --git a/packages/pagebuilder/lib/ContentTypes/Column/column.module.css b/packages/pagebuilder/lib/ContentTypes/Column/column.module.css
@@ -3,7 +3,7 @@
 
 @media only screen and (max-width: 768px) {
     .root {
-        background-attachment: scroll !important;
-        flex-basis: 100%;
+        @apply !bg-scroll;
+        @apply basis-full;
     }
 }
diff --git a/packages/pagebuilder/lib/ContentTypes/DynamicBlock/dynamicBlock.module.css b/packages/pagebuilder/lib/ContentTypes/DynamicBlock/dynamicBlock.module.css
@@ -1,8 +1,8 @@
-.root:empty {
-    display: none;
+.root {
+    composes: empty_hidden from global;
 }
 
 .root_inline {
     composes: root;
-    display: inline-block;
+    @apply inline-block;
 }
diff --git a/packages/pagebuilder/lib/ContentTypes/Tabs/tabs.module.css b/packages/pagebuilder/lib/ContentTypes/Tabs/tabs.module.css
@@ -125,16 +125,13 @@ ul.navigation::-webkit-scrollbar {
 
 .panel {
     min-height: inherit;
+    composes: !empty_hidden from global;
 }
 
 .panelSelected {
     display: block;
 }
 
-.panel:empty {
-    display: none !important; /* Necessary because of inline styles; to be fixed in MC-18326 */
-}
-
 .content {
     border: var(--tabs-border-width) var(--tabs-border) var(--tabs-border-color);
     overflow: hidden;

diff --git a/packages/peregrine/lib/hooks/useDropdown.js b/packages/peregrine/lib/hooks/useDropdown.js
@@ -14,7 +14,7 @@ export const useDropdown = () => {
     const triggerRef = useRef(null);
     const [expanded, setExpanded] = useState(false);
 
-    // collapse on mousedown or tab outside of the element and trigger.
+    // collapse on mousedown outside of the element and trigger.
     const maybeCollapse = useCallback(({ target }) => {
         const isOutsideElement =
             !elementRef.current || !elementRef.current.contains(target);
@@ -27,7 +27,7 @@ export const useDropdown = () => {
     }, []);
 
     // add listener to document, as an effect
-    useEventListener(globalThis.document, 'click', maybeCollapse);
+    useEventListener(globalThis.document, 'mousedown', maybeCollapse);
 
     /**
      * The object returned contains the pieces needed to add the dropdown logic to your components

diff --git a/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js b/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js
@@ -6,10 +6,6 @@ import { useFilterBlock } from '../useFilterBlock';
 
 const log = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-    useLocation: jest.fn(() => ({ search: '?a=b&c=d' }))
-}));
-
 let handleClickProp = null;
 let inputValues = {};
 

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js b/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js
@@ -1,20 +1,13 @@
 import { useCallback, useState, useEffect, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
 
 export const useFilterBlock = props => {
-    const { filterState, items, initialOpen, group } = props;
-    const location = useLocation();
+    const { filterState, items, initialOpen } = props;
 
     const hasSelected = useMemo(() => {
-        const params = new URLSearchParams(location.search);
-        //expansion of price filter dropdown
-        if (group == 'price') {
-            return params.get('price[filter]') ? true : false;
-        }
         return items.some(item => {
             return filterState && filterState.has(item);
         });
-    }, [filterState, items, group, location.search]);
+    }, [filterState, items]);
 
     const [isExpanded, setExpanded] = useState(hasSelected || initialOpen);
 

diff --git a/packages/peregrine/lib/talons/FilterSidebar/__tests__/useFilterSidebar.spec.js b/packages/peregrine/lib/talons/FilterSidebar/__tests__/useFilterSidebar.spec.js
@@ -68,7 +68,6 @@ jest.mock('react-router-dom', () => ({
     useHistory: jest.fn(() => ({ push: jest.fn() })),
     useLocation: jest.fn(() => ({ pathname: '', search: '' }))
 }));
-
 const mockPush = jest.fn();
 useHistory.mockImplementation(() => ({ push: mockPush }));
 

diff --git a/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js b/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js
@@ -182,10 +182,9 @@ export const useFilterSidebar = props => {
     }, [handleClose]);
 
     const handleReset = useCallback(() => {
-        // filterApi.clear();
-        // setIsApplying(true);
-        history.replace({ search: 'page=1' });
-    }, [history]);
+        filterApi.clear();
+        setIsApplying(true);
+    }, [filterApi, setIsApplying]);
 
     const handleKeyDownActions = useCallback(
         event => {

diff --git a/packages/peregrine/lib/talons/MagentoRoute/magentoRoute.gql.js b/packages/peregrine/lib/talons/MagentoRoute/magentoRoute.gql.js
@@ -12,7 +12,6 @@ export const RESOLVE_URL = gql`
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             ... on ProductInterface {
                 uid
-                sku
                 __typename
             }
             # eslint-disable-next-line @graphql-eslint/require-id-when-available

diff --git a/...ib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap b/...ib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
@@ -5,7 +5,6 @@ Object {
   "availableSortMethods": null,
   "categoryDescription": "Jewelry category",
   "categoryName": "Jewelry",
-  "filterOptions": undefined,
   "filters": null,
   "items": Array [
     null,
@@ -18,7 +17,6 @@ Object {
     null,
     null,
   ],
-  "setFilterOptions": [Function],
   "totalCount": null,
   "totalPagesFromData": null,
 }
@@ -34,7 +32,6 @@ Object {
   ],
   "categoryDescription": "Jewelry category",
   "categoryName": "Jewelry",
-  "filterOptions": undefined,
   "filters": Array [
     Object {
       "label": "Label",
@@ -50,7 +47,6 @@ Object {
       "name": "Necklace",
     },
   ],
-  "setFilterOptions": [Function],
   "totalCount": 2,
   "totalPagesFromData": 1,
 }

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
@@ -26,18 +26,6 @@ jest.mock('@apollo/client', () => {
     };
 });
 
-const mockGetFiltersAttributeCode = {
-    data: {
-        products: {
-            aggregations: [
-                {
-                    label: 'Label'
-                }
-            ]
-        }
-    }
-};
-
 const mockProductFiltersByCategoryData = {
     data: {
         products: {
@@ -103,22 +91,21 @@ const mockCategoryData = {
 
 const mockGetSortMethods = jest.fn();
 const mockGetFilters = jest.fn();
-const mockfilterData = jest.fn();
 
 jest.mock('@magento/peregrine/lib/context/eventing', () => ({
     useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
 }));
 
 const Component = props => {
     const talonprops = useCategoryContent(props);
+
     return <i {...talonprops} />;
 };
 
 useQuery.mockReturnValue({ data: mockCategoryData });
 describe('useCategoryContent tests', () => {
     it('returns the proper shape', () => {
         useLazyQuery
-            .mockReturnValueOnce([mockfilterData, mockGetFiltersAttributeCode])
             .mockReturnValueOnce([
                 mockGetFilters,
                 mockProductFiltersByCategoryData
@@ -137,7 +124,6 @@ describe('useCategoryContent tests', () => {
 
     it('handles default category id', () => {
         useLazyQuery
-            .mockReturnValueOnce([mockfilterData, mockGetFiltersAttributeCode])
             .mockReturnValueOnce([
                 mockGetFilters,
                 mockProductFiltersByCategoryData

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js b/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js
@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client';
 
-const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
+export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
         $categoryIdFilter: FilterEqualTypeInput!
     ) {
@@ -11,8 +11,9 @@ const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
                 attribute_code
                 options {
                     label
-                    count
+                    value
                 }
+                position
             }
         }
     }