Merge pull request #15044 from artsy/damassi/turn-prettier-on

chore: Re-add prettier for formatting due to missing graphql support in Biome formatter

.prettierignore

@@ -0,0 +1,3 @@
+__generated__
+*.ejs
+hokusai/*.yml

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": false,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "parser": "typescript",
+  "semi": false,
+  "arrowParens": "avoid"
+}

.vscode/settings.json

@@ -14,13 +14,13 @@
     "editor.formatOnSave": false
   },
   "[typescript]": {
-    "editor.defaultFormatter": "biomejs.biome"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.biome": "explicit",
     "source.organizeImports.biome": "explicit"
   },
-  "editor.defaultFormatter": "biomejs.biome",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "typescript.tsdk": "./node_modules/typescript/lib"

package.json

@@ -33,8 +33,8 @@
     "docker:electron": "yarn docker --target electron-runner -t force:electron",
     "docker:force": "yarn docker -t force",
     "docker:clean": "docker rmi force force:builder force:electron",
-    "format-project": "yarn biome format --write src",
-    "format": "yarn biome format --write --no-errors-on-unmatched",
+    "format-project": "yarn prettier format --write 'src/**/*.{ts,tsx,js,jsx}'",
+    "format": "yarn prettier --write",
     "jest": "node_modules/.bin/jest --config jest.config.js",
     "jest:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "jest-enzyme": "node_modules/.bin/jest --config jest.legacy.config.js",
@@ -263,7 +263,7 @@
     "node-polyfill-webpack-plugin": "^1.1.4",
     "patch-package": "6.2.0",
     "postinstall-prepare": "1.0.1",
-    "prettier": "2.0.5",
+    "prettier": "^3.4.2",
     "pull-lock": "1.0.0",
     "react-test-renderer": "16.8.6",
     "relay-compiler": "^18.2.0",

src/Apps/About/AboutArtworksRail.tsx

@@ -57,7 +57,7 @@ export const AboutArtworksRailFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )
 
 export const AboutArtworksRailQueryRenderer: React.FC<

src/Apps/About/aboutRoutes.tsx

@@ -5,7 +5,7 @@ const AboutApp = loadable(
   () => import(/* webpackChunkName: "aboutBundle" */ "./AboutApp"),
   {
     resolveComponent: component => component.AboutApp,
-  }
+  },
 )
 
 export const aboutRoutes: RouteProps[] = [

src/Apps/Admin/Routes/AdminCacheManagementRoute.tsx

@@ -276,7 +276,7 @@ const reducer = (state: State, action: Action) => {
 
     case "deleteCacheKey": {
       const updatedCacheKeys = state.cacheKeys.filter(
-        cacheKey => JSON.stringify(cacheKey) !== JSON.stringify(action.payload)
+        cacheKey => JSON.stringify(cacheKey) !== JSON.stringify(action.payload),
       )
 
       return { ...state, cacheKeys: updatedCacheKeys }

src/Apps/Admin/adminRoutes.tsx

@@ -3,15 +3,15 @@ import type { RouteProps } from "System/Router/Route"
 
 const AdminApp = loadable(
   () => import(/* webpackChunkName: "adminBundle" */ "./AdminApp"),
-  { resolveComponent: component => component.AdminApp }
+  { resolveComponent: component => component.AdminApp },
 )
 
 const AdminNavigateToRoute = loadable(
   () =>
     import(
       /* webpackChunkName: "adminBundle" */ "./Routes/AdminNavigateToRoute"
     ),
-  { resolveComponent: component => component.AdminNavigateToRoute }
+  { resolveComponent: component => component.AdminNavigateToRoute },
 )
 
 export const adminRoutes: RouteProps[] = [

src/Apps/Alert/alertRoutes.tsx

@@ -5,7 +5,7 @@ const AlertApp = loadable(
   () => import(/* webpackChunkName: "alertBundle" */ "./AlertApp"),
   {
     resolveComponent: component => component.AlertApp,
-  }
+  },
 )
 
 export const alertRoutes: RouteProps[] = [

src/Apps/AppPreferences/__tests__/appPreferencesServerRoutes.jest.ts

@@ -104,7 +104,7 @@ describe("appPreferencesPost", () => {
         maxAge: 31536000000,
         httpOnly: false,
         secure: true,
-      }
+      },
     )
     expect(send).toHaveBeenCalledWith({ theme: "dark" })
   })

src/Apps/AppPreferences/appPreferencesMiddleware.ts

@@ -10,7 +10,7 @@ import type { NextFunction } from "express"
 export const appPreferencesMiddleware = async (
   req: ArtsyRequest,
   res: ArtsyResponse,
-  next: NextFunction
+  next: NextFunction,
 ) => {
   const preferences = getAppPreferences(req)
   updateSharifyAndContext(res, APP_PREFERENCES_SHARIFY_KEY, preferences)

src/Apps/AppPreferences/appPreferencesServerRoutes.ts

@@ -38,15 +38,15 @@ export const appPreferencesPost = (req: ArtsyRequest, res: ArtsyResponse) => {
 
     const updatedPreferences = appPreferencesSchema.validateSync(
       { ...previousPreferences, ...body },
-      { stripUnknown: true }
+      { stripUnknown: true },
     )
 
     const payload = JSON.stringify(updatedPreferences)
 
     res.cookie(
       APP_PREFERENCES_COOKIE_NAME,
       payload,
-      APP_PREFERENCES_COOKIE_CONFIGURATION
+      APP_PREFERENCES_COOKIE_CONFIGURATION,
     )
 
     res.send(body)

src/Apps/AppPreferences/useAppPreferences.tsx

@@ -90,7 +90,7 @@ export const AppPreferencesProvider: FC<
         }
       })
     },
-    [processQueue]
+    [processQueue],
   )
 
   return (

src/Apps/ArtAppraisals/ArtAppraisalsApp.tsx

@@ -98,7 +98,7 @@ const WhyUseArtsy: React.FC<React.PropsWithChildren<unknown>> = () => {
     {
       width: 850,
       height: 887,
-    }
+    },
   )
 
   return (

src/Apps/ArtAppraisals/artAppraisalsRoutes.tsx

@@ -6,7 +6,7 @@ const ArtAppraisalsApp = loadable(
     import(/* webpackChunkName: "artAppraisalsBundle" */ "./ArtAppraisalsApp"),
   {
     resolveComponent: component => component.ArtAppraisalsApp,
-  }
+  },
 )
 
 export const artAppraisalsRoutes: RouteProps[] = [

src/Apps/ArtQuiz/Components/ArtQuizArtworksCard.tsx

@@ -72,5 +72,5 @@ export const ArtQuizArtworksCardFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )

src/Apps/ArtQuiz/Components/ArtQuizButton.tsx

@@ -38,7 +38,7 @@ export type ArtQuizButtonRef = { triggerAnimation(): void }
 export const ArtQuizButton = forwardRef(
   (
     { variant, children, onClick, ...rest }: ArtQuizButtonProps,
-    forwardedRef: Ref<ArtQuizButtonRef>
+    forwardedRef: Ref<ArtQuizButtonRef>,
   ) => {
     const [mode, setMode] = useMode<Mode>("Pending")
 
@@ -58,24 +58,20 @@ export const ArtQuizButton = forwardRef(
       // Animation plays on
       animationRef.current = nodeRef.current.animate(
         KEYFRAMES,
-        KEYFRAME_ANIMATION_OPTIONS
+        KEYFRAME_ANIMATION_OPTIONS,
       )
 
       await animationRef.current.finished
 
       setMode("Pending")
     }, [setMode])
 
-    useImperativeHandle(
-      forwardedRef,
-      () => {
-        return { triggerAnimation }
-      },
-      [triggerAnimation]
-    )
+    useImperativeHandle(forwardedRef, () => {
+      return { triggerAnimation }
+    }, [triggerAnimation])
 
     const handleClick = (
-      event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+      event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     ) => {
       // Click executes immediately
       onClick(event)
@@ -103,5 +99,5 @@ export const ArtQuizButton = forwardRef(
         )}
       </Clickable>
     )
-  }
+  },
 )

src/Apps/ArtQuiz/Components/ArtQuizCard.tsx

@@ -27,7 +27,9 @@ export const ArtQuizCard: FC<React.PropsWithChildren<ArtQuizCardProps>> = ({
 }
 
 const Container = styled(Box)<{ mode: Mode }>`
-  transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
+  transition:
+    transform 300ms ease-in-out,
+    opacity 300ms ease-in-out;
 
   ${({ mode }) => {
     switch (mode) {

src/Apps/ArtQuiz/Components/ArtQuizLikedArtworks.tsx

@@ -43,7 +43,7 @@ const ArtQuizLikedArtworksFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )
 
 const ArtQuizLikedArtworksPlaceholder: FC<

src/Apps/ArtQuiz/Components/ArtQuizRecommendedArtists.tsx

@@ -18,7 +18,7 @@ const ArtQuizRecommendedArtists: FC<
   React.PropsWithChildren<ArtQuizRecommendedArtistsProps>
 > = ({ me }) => {
   const likedArtists = compact(
-    uniq(me.quiz.savedArtworks.map(artwork => artwork.artist))
+    uniq(me.quiz.savedArtworks.map(artwork => artwork.artist)),
   )
 
   return (
@@ -51,7 +51,7 @@ const ArtQuizRecommendedArtistsFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )
 
 const ArtQuizRecommendedArtistsPlaceholder = () => {

src/Apps/ArtQuiz/Components/ArtQuizResultsLoader.tsx

@@ -22,7 +22,7 @@ export const ArtQuizResultsLoader: FC<
       setTimeout(() => {
         setLoading(false)
         timeouts.push(setTimeout(onReady, 1000))
-      }, 2000)
+      }, 2000),
     )
 
     return () => {

src/Apps/ArtQuiz/Components/ArtQuizTrendingArtists.tsx

@@ -48,7 +48,7 @@ const ArtQuizTrendingArtistsFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )
 
 const ArtQuizTrendingArtistsPlaceholder = () => {

src/Apps/ArtQuiz/Routes/ArtQuizArtworks.tsx

@@ -171,7 +171,7 @@ export const ArtQuizArtworks: FC<
       submitSave,
       trackEvent,
       submitDislike,
-    ]
+    ],
   )
 
   const dislikeRef = useRef<ArtQuizButtonRef | null>(null)
@@ -318,5 +318,5 @@ export const ArtQuizArtworksFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )

src/Apps/ArtQuiz/Routes/ArtQuizResults.tsx

@@ -30,5 +30,5 @@ export const ArtQuizResultsFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )

src/Apps/ArtQuiz/__tests__/ArtQuizResults.jest.tsx

@@ -30,7 +30,7 @@ describe("ArtQuizResults", () => {
       })
 
       expect(
-        screen.getByText("Explore Trending Collections and Artists")
+        screen.getByText("Explore Trending Collections and Artists"),
       ).toBeInTheDocument()
     })
   })
@@ -44,12 +44,12 @@ describe("ArtQuizResults", () => {
       })
 
       expect(
-        screen.getByText("Explore Art We Think You’ll Love")
+        screen.getByText("Explore Art We Think You’ll Love"),
       ).toBeInTheDocument()
       expect(
         screen.getByText(
-          "Based on your responses, we think you’ll enjoy these artworks and artists. Keep saving and following to continue tailoring Artsy to you."
-        )
+          "Based on your responses, we think you’ll enjoy these artworks and artists. Keep saving and following to continue tailoring Artsy to you.",
+        ),
       ).toBeInTheDocument()
 
       expect(screen.getByText("Email My Results")).toBeInTheDocument()

src/Apps/ArtQuiz/artQuizRoutes.tsx

@@ -15,25 +15,25 @@ const artQuizServerSideRedirect = ({ res }: { res: ArtsyResponse }) => {
 
 const ArtQuizApp = loadable(
   () => import(/* webpackChunkName: "artQuizBundle" */ "./ArtQuizApp"),
-  { resolveComponent: component => component.ArtQuizApp }
+  { resolveComponent: component => component.ArtQuizApp },
 )
 
 const ArtQuizWelcome = loadable(
   () =>
     import(/* webpackChunkName: "artQuizBundle" */ "./Routes/ArtQuizWelcome"),
-  { resolveComponent: component => component.ArtQuizWelcome }
+  { resolveComponent: component => component.ArtQuizWelcome },
 )
 
 const ArtQuizArtworks = loadable(
   () =>
     import(/* webpackChunkName: "artQuizBundle" */ "./Routes/ArtQuizArtworks"),
-  { resolveComponent: component => component.ArtQuizArtworksFragmentContainer }
+  { resolveComponent: component => component.ArtQuizArtworksFragmentContainer },
 )
 
 const ArtQuizResults = loadable(
   () =>
     import(/* webpackChunkName: "artQuizBundle" */ "./Routes/ArtQuizResults"),
-  { resolveComponent: component => component.ArtQuizResultsFragmentContainer }
+  { resolveComponent: component => component.ArtQuizResultsFragmentContainer },
 )
 
 export const artQuizRoutes: RouteProps[] = [

src/Apps/Article/Components/ArticleAd/ArticleAd.tsx

@@ -60,7 +60,7 @@ export const ArticleAd: FC<React.PropsWithChildren<ArticleAdProps>> = memo(
         </Text>
       </Box>
     )
-  }
+  },
 )
 
 ArticleAd.displayName = "ArticleAd"

src/Apps/Article/Components/ArticleBody.tsx

@@ -95,7 +95,7 @@ const ArticleBody: FC<React.PropsWithChildren<ArticleBodyProps>> = ({
               >
                 {!!article.publishedAt &&
                   DateTime.fromISO(article.publishedAt).toFormat(
-                    "MMM d, yyyy h:mma"
+                    "MMM d, yyyy h:mma",
                   )}
 
                 <ArticleNewsSourceFragmentContainer article={article} />
@@ -293,5 +293,5 @@ export const ArticleBodyFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )

src/Apps/Article/Components/ArticleByline.tsx

@@ -80,5 +80,5 @@ export const ArticleBylineFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )

src/Apps/Article/Components/ArticleHero.tsx

@@ -262,7 +262,7 @@ export const ArticleHeroFragmentContainer = createFragmentContainer(
         }
       }
     `,
-  }
+  },
 )
 
 const Embed = styled.div`