fix(deps): update dependency prettier to v3

.changeset/shiny-seahorses-buy.md

@@ -0,0 +1,24 @@
+---
+'@commercetools-applications/merchant-center-custom-view-template-starter-typescript': patch
+'@commercetools-applications/merchant-center-template-starter-typescript': patch
+'@commercetools-frontend/application-shell-connectors': patch
+'@commercetools-backend/eslint-config-node': patch
+'@commercetools-frontend/application-components': patch
+'@commercetools-applications/merchant-center-custom-view-template-starter': patch
+'@commercetools-applications/merchant-center-template-starter': patch
+'@commercetools-frontend/eslint-config-mc-app': patch
+'@commercetools-frontend/application-config': patch
+'@commercetools-frontend/application-shell': patch
+'@commercetools-backend/express': patch
+'@commercetools-frontend/actions-global': patch
+'@commercetools-frontend/create-mc-app': patch
+'@commercetools-frontend/permissions': patch
+'@commercetools-frontend/mc-scripts': patch
+'@commercetools-frontend/constants': patch
+'@commercetools-local/visual-testing-app': patch
+'@commercetools-frontend/codemod': patch
+'@commercetools-frontend/l10n': patch
+'@commercetools-local/playground': patch
+---
+
+Ugrade prettier to v3

application-templates/starter-typescript/package.json

@@ -84,7 +84,7 @@
     "moment": "^2.29.4",
     "msw": "0.49.3",
     "omit-empty-es": "1.2.0",
-    "prettier": "2.8.8",
+    "prettier": "3.3.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-intl": "^6.4.7",

application-templates/starter-typescript/src/components/channel-details/channel-details.spec.tsx

@@ -167,9 +167,8 @@ describe('rendering', () => {
     useMockServerHandlers([fetchChannelDetailsQueryHandler]);
     renderApp();
 
-    const keyInput: HTMLInputElement = await screen.findByLabelText(
-      /channel key/i
-    );
+    const keyInput: HTMLInputElement =
+      await screen.findByLabelText(/channel key/i);
     expect(keyInput.value).toBe(TEST_CHANNEL_KEY);
 
     screen.getByRole('combobox', { name: /channel roles/i });
@@ -184,9 +183,8 @@ describe('rendering', () => {
     });
     expect(resetButton).toBeDisabled();
 
-    const keyInput: HTMLInputElement = await screen.findByLabelText(
-      /channel key/i
-    );
+    const keyInput: HTMLInputElement =
+      await screen.findByLabelText(/channel key/i);
     expect(keyInput.value).toBe(TEST_CHANNEL_KEY);
 
     fireEvent.change(keyInput, {
@@ -238,9 +236,8 @@ describe('rendering', () => {
     ]);
     renderApp();
 
-    const keyInput: HTMLInputElement = await screen.findByLabelText(
-      /channel key/i
-    );
+    const keyInput: HTMLInputElement =
+      await screen.findByLabelText(/channel key/i);
 
     fireEvent.change(keyInput, {
       target: { value: TEST_CHANNEL_NEW_KEY },
@@ -262,9 +259,8 @@ describe('notifications', () => {
     ]);
     renderApp();
 
-    const keyInput: HTMLInputElement = await screen.findByLabelText(
-      /channel key/i
-    );
+    const keyInput: HTMLInputElement =
+      await screen.findByLabelText(/channel key/i);
     expect(keyInput.value).toBe(TEST_CHANNEL_KEY);
 
     fireEvent.change(keyInput, {

application-templates/starter/package.json

@@ -82,7 +82,7 @@
     "moment": "^2.29.4",
     "msw": "0.49.3",
     "omit-empty-es": "1.2.0",
-    "prettier": "2.8.8",
+    "prettier": "3.3.3",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",

application-templates/starter/src/components/channel-details/index.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 
-const ChannelDetails = lazy(() =>
-  import('./channel-details' /* webpackChunkName: "channel-details" */)
+const ChannelDetails = lazy(
+  () => import('./channel-details' /* webpackChunkName: "channel-details" */)
 );
 
 export default ChannelDetails;

application-templates/starter/src/components/channels/index.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 
-const Channels = lazy(() =>
-  import('./channels' /* webpackChunkName: "channels" */)
+const Channels = lazy(
+  () => import('./channels' /* webpackChunkName: "channels" */)
 );
 
 export default Channels;

application-templates/starter/src/components/welcome/index.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 
-const Welcome = lazy(() =>
-  import('./welcome' /* webpackChunkName: "welcome" */)
+const Welcome = lazy(
+  () => import('./welcome' /* webpackChunkName: "welcome" */)
 );
 
 export default Welcome;

custom-views-templates/starter-typescript/package.json

@@ -84,7 +84,7 @@
     "moment": "^2.29.4",
     "msw": "0.49.3",
     "omit-empty-es": "1.2.0",
-    "prettier": "2.8.8",
+    "prettier": "3.3.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-intl": "^6.4.7",

custom-views-templates/starter/package.json

@@ -82,7 +82,7 @@
     "moment": "^2.29.4",
     "msw": "0.49.3",
     "omit-empty-es": "1.2.0",
-    "prettier": "2.8.8",
+    "prettier": "3.3.3",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",

custom-views-templates/starter/src/components/channels/index.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 
-const Channels = lazy(() =>
-  import('./channels' /* webpackChunkName: "channels" */)
+const Channels = lazy(
+  () => import('./channels' /* webpackChunkName: "channels" */)
 );
 
 export default Channels;

package.json

@@ -153,7 +153,7 @@
     "lint-staged": "11.2.6",
     "postcss": "8.4.38",
     "postcss-load-config": "3.1.4",
-    "prettier": "2.8.8",
+    "prettier": "3.3.3",
     "puppeteer": "20.9.0",
     "qss": "2.0.3",
     "react": "17.0.2",

packages-backend/eslint-config-node/package.json

@@ -22,12 +22,12 @@
     "@rushstack/eslint-patch": "^1.3.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-n": "^17.1.0",
-    "eslint-plugin-prettier": "^4.2.1"
+    "eslint-plugin-prettier": "^5.2.1"
   },
   "peerDependencies": {
     "eslint": "8.x"

packages-backend/express/src/auth.ts

@@ -161,8 +161,8 @@ function createSessionAuthVerifier<Request extends TBaseRequest>(
 
     let issuer =
       options.inferIssuer && cloudIdentifierHeader
-        ? mapCloudIdentifierToIssuer<Request>(cloudIdentifierHeader) ??
-          configuredDefaultIssuer
+        ? (mapCloudIdentifierToIssuer<Request>(cloudIdentifierHeader) ??
+          configuredDefaultIssuer)
         : configuredDefaultIssuer;
 
     // Get the `Accept-version` header, forwarded by the `/proxy/forward-to` endpoint.
@@ -179,7 +179,7 @@ function createSessionAuthVerifier<Request extends TBaseRequest>(
 
     const requestUrlPath = options.getRequestUrl
       ? options.getRequestUrl(request)
-      : request.originalUrl ?? request.url;
+      : (request.originalUrl ?? request.url);
 
     if (!requestUrlPath || !requestUrlPath.startsWith('/')) {
       throw new Error(

packages/actions-global/src/actions/show-notification.ts

@@ -11,7 +11,7 @@ import { addNotification } from '@commercetools-frontend/notifications';
 import type { TShowNotification } from '../types';
 
 export default function showNotification<
-  Notification extends TShowNotification
+  Notification extends TShowNotification,
 >(notification: Notification, meta: TNotificationMetaOptions = {}) {
   if (process.env.NODE_ENV !== 'production')
     if (notification.domain) {

packages/actions-global/src/hooks/use-show-notification.ts

@@ -25,7 +25,7 @@ type TNotificationHook<Notification extends TShowNotification> = (
  * });
  */
 function useShowNotification<
-  Notification extends TShowNotification
+  Notification extends TShowNotification,
 >(): TNotificationHook<Notification>;
 /**
  * Dispatch a notification.

packages/application-components/src/components/custom-views/custom-views-selector/custom-views-selector.tsx

@@ -40,7 +40,9 @@ type TWrapperProps = {
 const Wrapper = styled.div<TWrapperProps>`
   height: ${(props) => (props.shouldRender ? COMPONENT_HEIGHT : '0')};
   overflow: hidden;
-  transition: margin 0.3s ease-in-out, height 0.3s ease-in-out;
+  transition:
+    margin 0.3s ease-in-out,
+    height 0.3s ease-in-out;
   margin: ${(props) => (props.shouldRender ? props.margin : '0')};
 `;
 

packages/application-config/src/formatters.ts

@@ -3,7 +3,7 @@ import { CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH } from '@commercetools-frontend/c
 import type { CamelCase } from './types';
 
 type TImplicitCustomApplicationResourceAccesses<
-  PermissionGroupName extends string = ''
+  PermissionGroupName extends string = '',
 > = Record<
   | `view`
   | `manage`
@@ -13,11 +13,11 @@ type TImplicitCustomApplicationResourceAccesses<
 >;
 
 type TImplicitCustomViewResourceAccesses<
-  PermissionGroupName extends string = ''
+  PermissionGroupName extends string = '',
 > = TImplicitCustomApplicationResourceAccesses<PermissionGroupName>;
 
 type TImplicitCustomApplicationPermissionKeys<
-  PermissionGroupName extends string = ''
+  PermissionGroupName extends string = '',
 > = Record<
   | `View`
   | `Manage`
@@ -82,13 +82,13 @@ function entryPointUriPathToResourceAccesses(
   entryPointUriPath: string
 ): TImplicitCustomApplicationResourceAccesses<''>;
 function entryPointUriPathToResourceAccesses<
-  PermissionGroupName extends string
+  PermissionGroupName extends string,
 >(
   entryPointUriPath: string,
   permissionGroupNames: PermissionGroupName[]
 ): TImplicitCustomApplicationResourceAccesses<PermissionGroupName>;
 function entryPointUriPathToResourceAccesses<
-  PermissionGroupName extends string
+  PermissionGroupName extends string,
 >(
   entryPointUriPath: string,
   permissionGroupNames?: PermissionGroupName[]

packages/application-config/src/transformers.ts

@@ -44,15 +44,18 @@ const getPermissions = (
 ) => {
   const additionalResourceAccessKeyToOauthScopeMap = (
     appConfig.additionalOAuthScopes || []
-  ).reduce((previousOauthScope, { name, view, manage }) => {
-    const formattedResourceKey =
-      formatEntryPointUriPathToResourceAccessKey(name);
-    return {
-      ...previousOauthScope,
-      [`view${formattedResourceKey}`]: view,
-      [`manage${formattedResourceKey}`]: manage,
-    };
-  }, {} as Record<string, string[]>);
+  ).reduce(
+    (previousOauthScope, { name, view, manage }) => {
+      const formattedResourceKey =
+        formatEntryPointUriPathToResourceAccessKey(name);
+      return {
+        ...previousOauthScope,
+        [`view${formattedResourceKey}`]: view,
+        [`manage${formattedResourceKey}`]: manage,
+      };
+    },
+    {} as Record<string, string[]>
+  );
 
   const additionalPermissionNames =
     appConfig.additionalOAuthScopes?.map(({ name }) => name) || [];

packages/application-config/src/types.ts

@@ -62,7 +62,7 @@ export type CustomViewData = {
 
 // The object result after processing the config file
 export type ApplicationRuntimeConfig<
-  AdditionalEnvironmentProperties extends {} = {}
+  AdditionalEnvironmentProperties extends {} = {},
 > = {
   data: CustomApplicationData | CustomViewData;
   env: AdditionalEnvironmentProperties & ApplicationWindow['app'];
@@ -93,12 +93,12 @@ array = split(items, ',');
 */
 export type Split<
   S extends string,
-  Delimiter extends string
+  Delimiter extends string,
 > = S extends `${infer Head}${Delimiter}${infer Tail}`
   ? [Head, ...Split<Tail, Delimiter>]
   : S extends Delimiter
-  ? []
-  : [S];
+    ? []
+    : [S];
 
 /**
 Step by step takes the first item in an array literal, formats it and adds it to a string literal, and then recursively appends the remainder.
@@ -108,18 +108,18 @@ source: https://github.com/sindresorhus/type-fest/blob/fedbc441a314c1f9f5f6225c9
 */
 type InnerCamelCaseStringArray<
   Parts extends readonly unknown[],
-  PreviousPart
+  PreviousPart,
 > = Parts extends [`${infer FirstPart}`, ...infer RemainingParts]
   ? FirstPart extends undefined
     ? ''
     : FirstPart extends ''
-    ? InnerCamelCaseStringArray<RemainingParts, PreviousPart>
-    : `${PreviousPart extends ''
-        ? FirstPart
-        : Capitalize<FirstPart>}${InnerCamelCaseStringArray<
-        RemainingParts,
-        FirstPart
-      >}`
+      ? InnerCamelCaseStringArray<RemainingParts, PreviousPart>
+      : `${PreviousPart extends ''
+          ? FirstPart
+          : Capitalize<FirstPart>}${InnerCamelCaseStringArray<
+          RemainingParts,
+          FirstPart
+        >}`
   : '';
 
 /**
@@ -130,7 +130,7 @@ source: https://github.com/sindresorhus/type-fest/blob/fedbc441a314c1f9f5f6225c9
 */
 type CamelCaseStringArray<Parts extends readonly string[]> = Parts extends [
   `${infer FirstPart}`,
-  ...infer RemainingParts
+  ...infer RemainingParts,
 ]
   ? Uncapitalize<`${FirstPart}${InnerCamelCaseStringArray<
       RemainingParts,

packages/application-shell-connectors/src/components/application-context/application-context.tsx

@@ -121,7 +121,7 @@ export const mapUserToApplicationContextUser = (user?: TFetchedUser) => {
 
 // Adjust certain fields which depend e.g. on the origin
 export const mapEnvironmentToApplicationContextEnvironment = <
-  AdditionalEnvironmentProperties extends {}
+  AdditionalEnvironmentProperties extends {},
 >(
   environment: AdditionalEnvironmentProperties & TApplicationContextEnvironment,
   origin?: string
@@ -235,7 +235,7 @@ function withApplicationContext<
   AdditionalEnvironmentProperties extends {},
   MappedProps extends {} = {
     applicationContext?: TApplicationContext<AdditionalEnvironmentProperties>;
-  }
+  },
 >(
   mapApplicationContextToProps?: (
     context: TApplicationContext<AdditionalEnvironmentProperties>
@@ -264,11 +264,11 @@ function withApplicationContext<
 // Use function overloading to declare two possible signatures with two
 // distict return types, based on the selector function argument.
 function useApplicationContextHook<
-  AdditionalEnvironmentProperties extends {} = {}
+  AdditionalEnvironmentProperties extends {} = {},
 >(): TApplicationContext<AdditionalEnvironmentProperties>;
 function useApplicationContextHook<
   SelectedContext,
-  AdditionalEnvironmentProperties extends {} = {}
+  AdditionalEnvironmentProperties extends {} = {},
 >(
   selector: (
     context: TApplicationContext<AdditionalEnvironmentProperties>
@@ -279,7 +279,7 @@ function useApplicationContextHook<
 // based on the function arguments.
 function useApplicationContextHook<
   SelectedContext,
-  AdditionalEnvironmentProperties extends {} = {}
+  AdditionalEnvironmentProperties extends {} = {},
 >(
   selector?: (
     context: TApplicationContext<AdditionalEnvironmentProperties>