deps(ui): Upgrade to prettier v3, formatting changes (#56356)

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "bracketSpacing": false,
+  "bracketSameLine": false,
+  "printWidth": 90,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "arrowParens": "avoid"
+}

.vercelignore

@@ -13,7 +13,7 @@
 !jest.config.js
 !now.json
 !package.json
-!prettier.config.js
+!.prettierrc
 !stylelint.config.js
 !tsconfig.json
 !config

package.json

@@ -132,7 +132,7 @@
     "pegjs-loader": "^0.5.6",
     "platformicons": "^5.6.1",
     "po-catalog-loader": "2.0.0",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
     "prismjs": "^1.29.0",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
@@ -181,8 +181,8 @@
     "babel-jest": "^29.6.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "benchmark": "^2.1.4",
-    "eslint": "8.44.0",
-    "eslint-config-sentry-app": "1.123.0",
+    "eslint": "8.49.0",
+    "eslint-config-sentry-app": "1.124.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "29.6.2",
     "jest-canvas-mock": "^2.5.2",

prettier.config.js

@@ -1,12 +0,0 @@
-/* eslint-env node */
-module.exports = {
-  bracketSpacing: false,
-  bracketSameLine: false,
-  printWidth: 90,
-  semi: true,
-  singleQuote: true,
-  tabWidth: 2,
-  trailingComma: 'es5',
-  useTabs: false,
-  arrowParens: 'avoid',
-};

scripts/extract-ios-device-names.ts

@@ -85,7 +85,7 @@ const template = (contents: string) => {
 const formatOutput = async (unformatted: string) => {
   const config = await prettier.resolveConfig(outputPath);
   if (config) {
-    return prettier.format(unformatted, {...config, parser: 'babel'});
+    return prettier.format(unformatted, {...config, parser: 'typescript'});
   }
 
   return unformatted;

static/app/actionCreators/organization.tsx

@@ -49,7 +49,7 @@ async function fetchProjectsAndTeams(
 ): Promise<
   [
     [Project[], string | undefined, XMLHttpRequest | ResponseMeta | undefined],
-    [Team[], string | undefined, XMLHttpRequest | ResponseMeta | undefined]
+    [Team[], string | undefined, XMLHttpRequest | ResponseMeta | undefined],
   ]
 > {
   // Create a new client so the request is not cancelled

static/app/api.tsx

@@ -47,7 +47,7 @@ export class Request {
 export type ApiResult<Data = any> = [
   data: Data,
   statusText: string | undefined,
-  resp: ResponseMeta | undefined
+  resp: ResponseMeta | undefined,
 ];
 
 export type ResponseMeta<R = any> = {

static/app/components/avatarUploader.tsx

@@ -441,7 +441,11 @@ const ImageCropper = styled('div')<{resizeDirection: Position | null}>`
   text-align: center;
   margin-bottom: 20px;
   background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  background-position:
+    0 0,
+    0 10px,
+    10px -10px,
+    -10px 0px;
   background-color: ${p => p.theme.background};
   background-image: linear-gradient(
       45deg,

static/app/components/button.tsx

@@ -498,7 +498,10 @@ const StyledButton = styled(
   ${getBoxShadow};
   cursor: ${p => (p.disabled ? 'not-allowed' : 'pointer')};
   opacity: ${p => (p.busy || p.disabled) && '0.65'};
-  transition: background 0.1s, border 0.1s, box-shadow 0.1s;
+  transition:
+    background 0.1s,
+    border 0.1s,
+    box-shadow 0.1s;
 
   ${p =>
     p.priority === 'link' &&

static/app/components/charts/baseChart.tsx

@@ -544,7 +544,7 @@ function BaseChartUnwrapped({
         rendered: (props, instance) => onRendered?.(props, instance),
         legendselectchanged: (props, instance) =>
           onLegendSelectChanged?.(props, instance),
-      } as ReactEchartProps['onEvents']),
+      }) as ReactEchartProps['onEvents'],
     [
       onClick,
       onHighlight,