From 03025b4ce9c623edc43cfd6509507b41f9905fc2 Mon Sep 17 00:00:00 2001 From: Mathius Date: Wed, 19 Jul 2023 15:13:53 -0700 Subject: [PATCH 1/2] chore: update Polaris to v11 --- .changeset/fluffy-turtles-sniff.md | 5 + package.json | 24 +- .../ActiveDatesCard/ActiveDatesCard.tsx | 14 +- .../tests/ActiveDatesCard.test.tsx | 14 +- .../CombinationCard/CombinationCard.tsx | 26 +- .../components/HelpText/HelpText.tsx | 39 +- .../tests/CombinationCard.test.tsx | 22 +- .../CountriesAndRatesCard.tsx | 48 +- .../tests/CountriesAndRatesCard.test.tsx | 30 +- .../CurrencyField/CurrencyField.tsx | 8 +- .../CustomerEligibilityCard.tsx | 24 +- .../tests/CustomerEligibilityCard.test.tsx | 24 +- src/components/MethodCard/MethodCard.tsx | 19 +- .../MethodCard/tests/MethodCard.test.tsx | 14 +- .../MinimumRequirementsCard.tsx | 34 +- .../PurchaseTypeCard/PurchaseTypeCard.tsx | 10 +- .../tests/PurchaseTypeList.test.tsx | 12 +- src/components/SummaryCard/SummaryCard.tsx | 10 +- .../SummaryCard/components/Header/Header.tsx | 26 +- .../components/Performance/Performance.tsx | 22 +- .../SummaryCard/tests/SummaryCard.test.tsx | 10 +- .../UsageLimitsCard/UsageLimitsCard.tsx | 24 +- .../RecurringPayment/RecurringPayment.tsx | 27 +- .../tests/RecurringPayment.test.tsx | 20 +- .../tests/UsageLimitsCard.test.tsx | 24 +- src/utilities/merge.ts | 62 - tsconfig.json | 29 +- yarn.lock | 9897 +++++++++-------- 28 files changed, 5411 insertions(+), 5107 deletions(-) create mode 100644 .changeset/fluffy-turtles-sniff.md delete mode 100644 src/utilities/merge.ts diff --git a/.changeset/fluffy-turtles-sniff.md b/.changeset/fluffy-turtles-sniff.md new file mode 100644 index 00000000..16fe56b8 --- /dev/null +++ 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 index 069e0003..fc288dd0 100644 --- 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 index 7e3bd719..fba9af97 100644 --- 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 index 81b705e2..21271254 100644 --- 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('', () => { const mockProps = { diff --git a/src/components/CombinationCard/CombinationCard.tsx b/src/components/CombinationCard/CombinationCard.tsx index fef11c44..8d0c1abb 100644 --- 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({

{trimmedDescriptor ? ( <> - {trimmedDescriptor}{' '} + {trimmedDescriptor}{' '} {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 index d0cdec0d..f8e1c4ae 100644 --- 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 ? ( - + {i18n.translate( 'combinations.info', - {scope}, + { scope }, { count, discountCountLink: (