chore: update Polaris to v11

Shopify · Jul 19, 2023 · 03025b4 · 03025b4
1 parent 2164875
commit 03025b4
Show file tree

Hide file tree

Showing 28 changed files with 5,411 additions and 5,107 deletions.
diff --git a/.changeset/fluffy-turtles-sniff.md b/.changeset/fluffy-turtles-sniff.md
@@ -0,0 +1,5 @@
+---
+'@shopify/discount-app-components': minor
+---
+
+Upgrade dependencies Polaris to v11 and React to v18
diff --git a/package.json b/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",
-    "d3-time-format": "2.1.1",
+    "@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": "4.1.0",
     "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.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
@@ -91,12 +91,12 @@
     "@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",

diff --git a/src/components/ActiveDatesCard/ActiveDatesCard.tsx b/src/components/ActiveDatesCard/ActiveDatesCard.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
-import {Card, Checkbox, FormLayout} from '@shopify/polaris';
-import {isSameDay} from '@shopify/dates';
-import {useI18n} from '@shopify/react-i18n';
+import { LegacyCard as Card, Checkbox, FormLayout } from '@shopify/polaris';
+import { isSameDay } from '@shopify/dates';
+import { useI18n } from '@shopify/react-i18n';
 
-import {DatePicker} from '../DatePicker';
-import {TimePicker} from '../TimePicker';
+import { DatePicker } from '../DatePicker';
+import { TimePicker } from '../TimePicker';
 
 import {
   getDateInUTC,
   getDateTimeInShopTimeZone,
   getNewDateAtEndOfDay,
 } from '~/utilities/dates';
-import {DEFAULT_WEEK_START_DAY, Weekday} from '~/constants';
-import type {DateTime, Field} from '~/types';
+import { DEFAULT_WEEK_START_DAY, Weekday } from '~/constants';
+import type { DateTime, Field } from '~/types';
 
 export interface ActiveDatesCardProps {
   /**

diff --git a/src/components/ActiveDatesCard/tests/ActiveDatesCard.test.tsx b/src/components/ActiveDatesCard/tests/ActiveDatesCard.test.tsx
@@ -1,14 +1,14 @@
 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 { clock } from '@shopify/jest-dom-mocks';
+import { mockField, mountWithApp } from 'tests/utilities';
+import { LegacyCard as Card, Checkbox, FormLayout } from '@shopify/polaris';
 import _ from 'lodash';
 
-import {ActiveDatesCard} from '../ActiveDatesCard';
-import {DatePicker} from '../../DatePicker';
-import {TimePicker} from '../../TimePicker';
+import { ActiveDatesCard } from '../ActiveDatesCard';
+import { DatePicker } from '../../DatePicker';
+import { TimePicker } from '../../TimePicker';
 
-import {Weekday} from '~/constants';
+import { Weekday } from '~/constants';
 
 describe('<ActiveDatesCard />', () => {
   const mockProps = {

diff --git a/src/components/CombinationCard/CombinationCard.tsx b/src/components/CombinationCard/CombinationCard.tsx
@@ -1,16 +1,16 @@
 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';
+import { I18n, useI18n } from '@shopify/react-i18n';
 
-import {HelpText} from './components';
+import { HelpText } from './components';
 
-import {DiscountClass} from '~/constants';
+import { DiscountClass } from '~/constants';
 import type {
   CombinableDiscountTypes,
   CombinableDiscountCounts,
@@ -73,7 +73,7 @@ export function CombinationCard({
         <p>
           {trimmedDescriptor ? (
             <>
-              <TextStyle variation="strong">{trimmedDescriptor}</TextStyle>{' '}
+              <Text as="span" fontWeight="semibold">{trimmedDescriptor}</Text>{' '}
               {i18n.translate('discountNameFilled', I18N_SCOPE)}
             </>
           ) : (
@@ -214,9 +214,9 @@ function getActualCombiningDiscountsCount(
 const getSelectedChoices = (
   combinableDiscountTypes: CombinableDiscountTypes,
 ): ChoiceListProps['selected'] => [
-  ...(combinableDiscountTypes.productDiscounts ? [DiscountClass.Product] : []),
-  ...(combinableDiscountTypes.orderDiscounts ? [DiscountClass.Order] : []),
-  ...(combinableDiscountTypes.shippingDiscounts
-    ? [DiscountClass.Shipping]
-    : []),
-];
+    ...(combinableDiscountTypes.productDiscounts ? [DiscountClass.Product] : []),
+    ...(combinableDiscountTypes.orderDiscounts ? [DiscountClass.Order] : []),
+    ...(combinableDiscountTypes.shippingDiscounts
+      ? [DiscountClass.Shipping]
+      : []),
+  ];
diff --git a/src/components/CombinationCard/components/HelpText/HelpText.tsx b/src/components/CombinationCard/components/HelpText/HelpText.tsx
@@ -1,11 +1,11 @@
-import React, {useRef} from 'react';
-import {Button, TextStyle, 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';
-import {Action} from '@shopify/app-bridge/actions/Modal';
+import React, { useRef } from 'react';
+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';
+import { Action } from '@shopify/app-bridge/actions/Modal';
 
-import {DiscountClass} from '~/constants';
+import { DiscountClass } from '~/constants';
 
 const DISCOUNT_COMBINATION_MODAL_APP_BRIDGE_URL =
   'shopify://app-bridge/modal/discounts-combinations';
@@ -60,22 +60,21 @@ export function HelpText({
 
   return count > 0 ? (
     <Stack spacing="none" vertical>
-      <TextStyle variation="subdued">
+      <Text as="span" color="subdued">
         {i18n.translate(
           'combinations.info',
-          {scope},
+          { scope },
           {
             count,
             discountCountLink: (
               <span ref={buttonWrapperRef}>
                 <Button onClick={handleModalOpen} plain>
                   {i18n.translate(
-                    `combinations.counts.${
-                      productCombinesWithProduct
-                        ? 'productOther'
-                        : targetDiscountClassLabel
+                    `combinations.counts.${productCombinesWithProduct
+                      ? 'productOther'
+                      : targetDiscountClassLabel
                     }`,
-                    {scope},
+                    { scope },
                     {
                       count,
                     },
@@ -85,16 +84,16 @@ export function HelpText({
             ),
           },
         )}
-      </TextStyle>
+      </Text>
       {productCombinesWithProduct && (
-        <TextStyle variation="subdued">
-          {i18n.translate('combinations.multipleEligibleDiscounts', {scope})}
-        </TextStyle>
+        <Text as="span" color="subdued">
+          {i18n.translate('combinations.multipleEligibleDiscounts', { scope })}
+        </Text>
       )}
     </Stack>
   ) : (
     <>
-      <TextStyle variation="subdued">
+      <Text as="span" color="subdued">
         {i18n.translate('title', {
           scope: `${scope}.emptyState.${currentDiscountClass.toLowerCase()}`,
         })}{' '}
@@ -107,7 +106,7 @@ export function HelpText({
         >
           {i18n.translate(`${scope}.emptyState.link`)}
         </Link>
-      </TextStyle>
+      </Text>
     </>
   );
 }
diff --git a/src/components/CombinationCard/tests/CombinationCard.test.tsx b/src/components/CombinationCard/tests/CombinationCard.test.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import {Card, ChoiceList} from '@shopify/polaris';
-import {mockField, mountWithApp} from 'tests/utilities';
-import {composeGid} from '@shopify/admin-graphql-api-utilities';
+import { LegacyCard as Card, ChoiceList } from '@shopify/polaris';
+import { mockField, mountWithApp } from 'tests/utilities';
+import { composeGid } from '@shopify/admin-graphql-api-utilities';
 
-import {CombinationCard} from '../CombinationCard';
-import {HelpText} from '../components';
-import type {CombinationCardProps} from '../CombinationCard';
+import { CombinationCard } from '../CombinationCard';
+import { HelpText } from '../components';
+import type { CombinationCardProps } from '../CombinationCard';
 
-import {DiscountClass} from '~/constants';
+import { DiscountClass } from '~/constants';
 
 describe('<CombinationCard />', () => {
   const mockProps: CombinationCardProps = {
@@ -122,7 +122,7 @@ describe('<CombinationCard />', () => {
     ${DiscountClass.Shipping}
   `(
     'renders a default label based on the discount class $discountClass when the discountDescriptor has a value',
-    ({discountClass}) => {
+    ({ discountClass }) => {
       const combinationCard = mountWithApp(
         <CombinationCard
           {...mockProps}
@@ -158,14 +158,14 @@ describe('<CombinationCard />', () => {
     ${DiscountClass.Shipping} | ${[mockProductOption, mockOrderOption]}
   `(
     'renders choices for $discountClass discount',
-    ({discountClass, expectedChoiceOptions}) => {
+    ({ discountClass, expectedChoiceOptions }) => {
       const combinationCard = mountWithApp(
         <CombinationCard {...mockProps} discountClass={discountClass} />,
       );
 
       expect(combinationCard).toContainReactComponent(ChoiceList, {
         choices: expectedChoiceOptions.map(
-          (choice: {label: string; value: DiscountClass}) => ({
+          (choice: { label: string; value: DiscountClass }) => ({
             value: choice.value,
             label: choice.label,
             renderChildren: expect.any(Function),
@@ -240,7 +240,7 @@ describe('<CombinationCard />', () => {
     ${DiscountClass.Shipping} | ${DiscountClass.Order}    | ${2}
   `(
     'adjusts the HelpText count to $expectedCount based on the currentDiscountClass of $currentDiscountClass and targetDiscountClass of $targetDiscountClass',
-    ({currentDiscountClass, targetDiscountClass, expectedCount}) => {
+    ({ currentDiscountClass, targetDiscountClass, expectedCount }) => {
       const combinationCard = mountWithApp(
         <CombinationCard
           {...mockProps}

diff --git a/src/components/CountriesAndRatesCard/CountriesAndRatesCard.tsx b/src/components/CountriesAndRatesCard/CountriesAndRatesCard.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import {Card, ChoiceList, Checkbox, InlineError} from '@shopify/polaris';
-import {CurrencyCode, useI18n} from '@shopify/react-i18n';
+import { LegacyCard as Card, ChoiceList, Checkbox, InlineError } from '@shopify/polaris';
+import { CurrencyCode, useI18n } from '@shopify/react-i18n';
 
-import {SelectedItemsList} from '../SelectedItemsList';
-import {CurrencyField} from '../CurrencyField';
+import { SelectedItemsList } from '../SelectedItemsList';
+import { CurrencyField } from '../CurrencyField';
 
 import styles from './CountriesAndRatesCard.scss';
-import {useLocalizeCountry} from './utilities';
+import { useLocalizeCountry } from './utilities';
 
-import type {Field, PositiveNumericString, CountryCode, Country} from '~/types';
-import {CountrySelectionType} from '~/constants';
+import type { Field, PositiveNumericString, CountryCode, Country } from '~/types';
+import { CountrySelectionType } from '~/constants';
 
 const EXCLUDE_SHIPPING_RATES_FIELD_ID = 'excludeShippingRatesOverTextField';
 
@@ -89,23 +89,23 @@ export function CountriesAndRatesCard({
         />
         {countrySelectionType.value ===
           CountrySelectionType.SelectedCountries && (
-          <>
-            <div className={styles.countrySelectorActivator}>
-              {countrySelector}
-            </div>
-            <SelectedItemsList
-              items={selectedCountries.value.map(localizeCountry)}
-              renderItem={(item: Country) => <div>{item.name}</div>}
-              onRemoveItem={(itemId: string) =>
-                selectedCountries.onChange(
-                  selectedCountries.value.filter(
-                    (countryCode) => countryCode !== itemId,
-                  ),
-                )
-              }
-            />
-          </>
-        )}
+            <>
+              <div className={styles.countrySelectorActivator}>
+                {countrySelector}
+              </div>
+              <SelectedItemsList
+                items={selectedCountries.value.map(localizeCountry)}
+                renderItem={(item: Country) => <div>{item.name}</div>}
+                onRemoveItem={(itemId: string) =>
+                  selectedCountries.onChange(
+                    selectedCountries.value.filter(
+                      (countryCode) => countryCode !== itemId,
+                    ),
+                  )
+                }
+              />
+            </>
+          )}
       </Card.Section>
       <Card.Section
         title={i18n.translate(