chore: upgrade to polaris 11 and React 18.2.0

.changeset/fluffy-turtles-sniff.md

@@ -0,0 +1,5 @@
+---
+'@shopify/discount-app-components': minor
+---
+
+Upgrade dependencies Polaris to v11 and React to v18

package.json

@@ -60,19 +60,19 @@
   },
   "dependencies": {
     "@shopify/admin-graphql-api-utilities": "^2.0.0",
-    "@shopify/dates": "^1.1.5",
-    "@shopify/polaris-icons": "^4.18.3",
-    "@shopify/react-hooks": "^2.1.18",
-    "@shopify/react-i18n": "^6.3.13",
+    "@shopify/dates": "^2.0.3",
+    "@shopify/polaris-icons": "^7.1.0",
+    "@shopify/react-hooks": "^3.0.5",
+    "@shopify/react-i18n": "^7.8.0",
     "d3-time-format": "2.1.1",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "@shopify/app-bridge": "^3.1.0",
-    "@shopify/app-bridge-react": "^3.1.0",
-    "@shopify/polaris": "^9.7.0 || ^10.0.0",
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+    "@shopify/app-bridge": "^3.7.7",
+    "@shopify/app-bridge-react": "^3.7.7",
+    "@shopify/polaris": "^11.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
@@ -91,15 +91,15 @@
     "@shopify/eslint-plugin": "^41.2.0",
     "@shopify/jest-dom-mocks": "^3.0.5",
     "@shopify/loom": "^1.0.0",
-    "@shopify/loom-cli": "^1.0.0",
+    "@shopify/loom-cli": "^1.1.0",
     "@shopify/loom-plugin-build-library": "^1.0.0",
     "@shopify/loom-plugin-eslint": "^2.0.0",
     "@shopify/loom-plugin-prettier": "^2.0.0",
     "@shopify/loom-plugin-stylelint": "^2.0.0",
-    "@shopify/polaris": "^10.0.0",
+    "@shopify/polaris": "^11.2.2",
     "@shopify/postcss-plugin": "^5.0.1",
     "@shopify/prettier-config": "^1.1.2",
-    "@shopify/react-testing": "^3.2.4",
+    "@shopify/react-testing": "^5.1.3",
     "@shopify/stylelint-plugin": "^11.0.0",
     "@shopify/typescript-configs": "^5.0.0",
     "@size-limit/preset-small-lib": "^5.0.3",
@@ -109,8 +109,8 @@
     "@types/d3-time-format": "^4.0.0",
     "@types/lodash": "^4.14.181",
     "@types/node": "^16.11.11",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.11",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.1.0",
     "chalk": "^2.4.2",
@@ -128,8 +128,8 @@
     "postcss-pxtorem": "^5.1.1",
     "postcss-value-parser": "^4.2.0",
     "prettier": "^2.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
     "sass": "^1.50.0",
     "sass-loader": "^12.6.0",

src/components/ActiveDatesCard/ActiveDatesCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Card, Checkbox, FormLayout} from '@shopify/polaris';
+import {LegacyCard as Card, Checkbox, FormLayout} from '@shopify/polaris';
 import {isSameDay} from '@shopify/dates';
 import {useI18n} from '@shopify/react-i18n';
 

src/components/ActiveDatesCard/tests/ActiveDatesCard.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {clock} from '@shopify/jest-dom-mocks';
 import {mockField, mountWithApp} from 'tests/utilities';
-import {Card, Checkbox, FormLayout} from '@shopify/polaris';
+import {LegacyCard as Card, Checkbox, FormLayout} from '@shopify/polaris';
 import _ from 'lodash';
 
 import {ActiveDatesCard} from '../ActiveDatesCard';

src/components/CombinationCard/CombinationCard.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import {
-  Card,
+  LegacyCard as Card,
   ChoiceList,
-  Stack,
-  TextStyle,
+  LegacyStack as Stack,
+  Text,
   ChoiceListProps,
 } from '@shopify/polaris';
 import {I18n, useI18n} from '@shopify/react-i18n';
@@ -73,7 +73,9 @@ export function CombinationCard({
         <p>
           {trimmedDescriptor ? (
             <>
-              <TextStyle variation="strong">{trimmedDescriptor}</TextStyle>{' '}
+              <Text as="span" fontWeight="semibold">
+                {trimmedDescriptor}
+              </Text>{' '}
               {i18n.translate('discountNameFilled', I18N_SCOPE)}
             </>
           ) : (

src/components/CombinationCard/components/HelpText/HelpText.tsx

@@ -1,5 +1,5 @@
 import React, {useRef} from 'react';
-import {Button, TextStyle, Stack, Link} from '@shopify/polaris';
+import {Button, Text, LegacyStack as Stack, Link} from '@shopify/polaris';
 import {useI18n} from '@shopify/react-i18n';
 import {useAppBridge} from '@shopify/app-bridge-react';
 import {Modal} from '@shopify/app-bridge/actions';
@@ -60,7 +60,7 @@ export function HelpText({
 
   return count > 0 ? (
     <Stack spacing="none" vertical>
-      <TextStyle variation="subdued">
+      <Text as="span" color="subdued">
         {i18n.translate(
           'combinations.info',
           {scope},
@@ -85,16 +85,16 @@ export function HelpText({
             ),
           },
         )}
-      </TextStyle>
+      </Text>
       {productCombinesWithProduct && (
-        <TextStyle variation="subdued">
+        <Text as="span" color="subdued">
           {i18n.translate('combinations.multipleEligibleDiscounts', {scope})}
-        </TextStyle>
+        </Text>
       )}
     </Stack>
   ) : (
     <>
-      <TextStyle variation="subdued">
+      <Text as="span" color="subdued">
         {i18n.translate('title', {
           scope: `${scope}.emptyState.${currentDiscountClass.toLowerCase()}`,
         })}{' '}
@@ -107,7 +107,7 @@ export function HelpText({
         >
           {i18n.translate(`${scope}.emptyState.link`)}
         </Link>
-      </TextStyle>
+      </Text>
     </>
   );
 }

src/components/CombinationCard/tests/CombinationCard.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Card, ChoiceList} from '@shopify/polaris';
+import {LegacyCard as Card, ChoiceList} from '@shopify/polaris';
 import {mockField, mountWithApp} from 'tests/utilities';
 import {composeGid} from '@shopify/admin-graphql-api-utilities';
 

src/components/CountriesAndRatesCard/CountriesAndRatesCard.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import {Card, ChoiceList, Checkbox, InlineError} from '@shopify/polaris';
+import {
+  LegacyCard as Card,
+  ChoiceList,
+  Checkbox,
+  InlineError,
+} from '@shopify/polaris';
 import {CurrencyCode, useI18n} from '@shopify/react-i18n';
 
 import {SelectedItemsList} from '../SelectedItemsList';

src/components/CountriesAndRatesCard/tests/CountriesAndRatesCard.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import {
-  Heading,
+  LegacyCard,
   ChoiceList,
   Checkbox,
   InlineError,
   Button,
-  Subheading,
+  Text,
 } from '@shopify/polaris';
 import {CurrencyCode} from '@shopify/react-i18n';
 import {mountWithApp, mockField} from 'tests/utilities';
@@ -38,8 +38,8 @@ describe('<CountriesAndRatesCard />', () => {
       <CountriesAndRatesCard {...mockProps} />,
     );
 
-    expect(countriesAndRatesCard).toContainReactComponent(Heading, {
-      children: 'Countries',
+    expect(countriesAndRatesCard).toContainReactComponent(LegacyCard.Header, {
+      title: 'Countries',
     });
     expect(countriesAndRatesCard).toContainReactComponent(ChoiceList, {
       title: 'Countries and rates',
@@ -52,7 +52,7 @@ describe('<CountriesAndRatesCard />', () => {
         },
       ]),
     });
-    expect(countriesAndRatesCard).toContainReactComponent(Subheading, {
+    expect(countriesAndRatesCard).toContainReactComponent(Text, {
       children: 'Shipping rates',
     });
     expect(countriesAndRatesCard).toContainReactComponent(Checkbox, {

src/components/CurrencyField/CurrencyField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {useI18n, CurrencyCode, I18n} from '@shopify/react-i18n';
-import {Stack} from '@shopify/polaris';
+import {LegacyStack as Stack} from '@shopify/polaris';
 
 import {
   FormattedNumberField,

src/components/CustomerEligibilityCard/CustomerEligibilityCard.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import {Card, ChoiceList, Stack} from '@shopify/polaris';
+import {
+  LegacyCard as Card,
+  ChoiceList,
+  LegacyStack as Stack,
+} from '@shopify/polaris';
 import {useI18n} from '@shopify/react-i18n';
 import {Action} from '@shopify/app-bridge/actions/Navigation/Redirect';
 import {parseGid} from '@shopify/admin-graphql-api-utilities';

src/components/CustomerEligibilityCard/tests/CustomerEligibilityCard.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {mockField, mountWithApp} from 'tests/utilities';
 import {Action} from '@shopify/app-bridge/actions/Navigation/Redirect';
 import {composeGid, parseGid} from '@shopify/admin-graphql-api-utilities';
-import {Card, ChoiceList} from '@shopify/polaris';
+import {LegacyCard as Card, ChoiceList} from '@shopify/polaris';
 
 import {
   CustomerEligibilityCard,

src/components/MethodCard/MethodCard.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import {
-  Card,
+  LegacyCard as Card,
   ChoiceList,
-  Heading,
-  Stack,
+  LegacyStack as Stack,
   TextField,
-  TextStyle,
+  Text,
 } from '@shopify/polaris';
 import {I18n, useI18n} from '@shopify/react-i18n';
 
@@ -77,10 +76,12 @@ export function MethodCard({
     <Card>
       <Card.Section>
         <Stack distribution="equalSpacing" alignment="center">
-          <Heading>{title}</Heading>
-          <TextStyle variation="subdued">
+          <Text variant="headingMd" as="h2">
+            {title}
+          </Text>
+          <Text as="span" color="subdued">
             {getDiscountClassLabel(discountClass, i18n)}
-          </TextStyle>
+          </Text>
         </Stack>
       </Card.Section>
       <Card.Section

src/components/MethodCard/tests/MethodCard.test.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import {Card, ChoiceList, Heading, TextField} from '@shopify/polaris';
+import {
+  LegacyCard as Card,
+  ChoiceList,
+  Text,
+  TextField,
+} from '@shopify/polaris';
 import {mockField, mountWithApp} from 'tests/utilities';
 
 import {MethodCard} from '../MethodCard';
@@ -64,7 +69,7 @@ describe('<MethodCard />', () => {
   it('displays a Heading with title prop as the content', () => {
     const methodCard = mountWithApp(<MethodCard {...mockProps} />);
 
-    expect(methodCard).toContainReactComponent(Heading, {
+    expect(methodCard).toContainReactComponent(Text, {
       children: mockProps.title,
     });
   });

src/components/MinimumRequirementsCard/MinimumRequirementsCard.tsx

@@ -1,11 +1,11 @@
 import React, {useEffect} from 'react';
 import {
-  Card,
+  LegacyCard as Card,
   TextField,
   ChoiceList,
   InlineError,
-  TextStyle,
-  Stack,
+  Text,
+  LegacyStack as Stack,
 } from '@shopify/polaris';
 import {CurrencyCode, I18n, useI18n} from '@shopify/react-i18n';
 
@@ -102,9 +102,9 @@ export function MinimumRequirementsCard({
   );
 
   const fieldHelpTextMarkup = (
-    <TextStyle variation="subdued">
+    <Text as="span" color="subdued">
       {getFieldHelpText(isRecurring, appliesTo, i18n)}
-    </TextStyle>
+    </Text>
   );
 
   const allMinimumRequirementChoices = [

src/components/MinimumRequirementsCard/tests/MinimumRequirementsCard.test.tsx

@@ -19,7 +19,7 @@ describe('<MinimumRequirementsCard>', () => {
     isRecurring: false,
     currencyCode: CurrencyCode.Cad,
   };
-  const currencySymbol = 'CA$';
+  const currencySymbol = '$';
 
   it('renders list of minimum requirements', () => {
     const minimumRequirementsCard = mountWithApp(
@@ -33,18 +33,10 @@ describe('<MinimumRequirementsCard>', () => {
         expect.objectContaining({
           label: 'No minimum requirements',
         }),
-      ]),
-    });
-    expect(choiceList).toHaveReactProps({
-      choices: expect.arrayContaining([
         expect.objectContaining({
           label: `Minimum purchase amount (${currencySymbol})`,
           renderChildren: expect.any(Function),
         }),
-      ]),
-    });
-    expect(choiceList).toHaveReactProps({
-      choices: expect.arrayContaining([
         expect.objectContaining({
           label: 'Minimum quantity of items',
           renderChildren: expect.any(Function),

src/components/PurchaseTypeCard/PurchaseTypeCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {ChoiceList, Card} from '@shopify/polaris';
+import {ChoiceList, LegacyCard as Card} from '@shopify/polaris';
 import {useI18n} from '@shopify/react-i18n';
 
 import type {Field} from '../../types';

src/components/PurchaseTypeCard/tests/PurchaseTypeList.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Card, ChoiceList} from '@shopify/polaris';
+import {LegacyCard as Card, ChoiceList} from '@shopify/polaris';
 import {mountWithApp, mockField} from 'tests/utilities';
 
 import {PurchaseTypeCard} from '../PurchaseTypeCard';

src/components/SummaryCard/SummaryCard.tsx

@@ -1,7 +1,12 @@
 /* eslint-disable @shopify/typescript/prefer-pascal-case-enums */
 import React from 'react';
 import {useI18n} from '@shopify/react-i18n';
-import {List, Card, Stack, Subheading} from '@shopify/polaris';
+import {
+  List,
+  LegacyCard as Card,
+  LegacyStack as Stack,
+  Text,
+} from '@shopify/polaris';
 
 import {
   ActiveDates,
@@ -122,9 +127,9 @@ export function SummaryCard(props: SummaryCardProps) {
 
           {showDetailsSection && (
             <Stack vertical spacing="tight">
-              <Subheading element="h3">
+              <Text variant="headingXs" as="h3">
                 {i18n.translate('details', I18N_SCOPE)}
-              </Subheading>
+              </Text>
 
               <List type="bullet">
                 {props.additionalDetails?.map((detail) => (