upgrade Prettier to 3.x (#598)

[#185995187]

bundles/admin/app.js

@@ -81,9 +81,10 @@ function DropdownMenu({ name, path }) {
   const match = useRouteMatch();
 
   const events = useSelector(state => state.models.event);
-  const sortedEvents = React.useMemo(() => [...(events || [])].sort((a, b) => b.datetime.localeCompare(a.datetime)), [
-    events,
-  ]);
+  const sortedEvents = React.useMemo(
+    () => [...(events || [])].sort((a, b) => b.datetime.localeCompare(a.datetime)),
+    [events],
+  );
 
   return (
     <Dropdown closeOnClick={true} label={name}>

bundles/admin/interstitials/Editor/Body.tsx

@@ -29,24 +29,33 @@ export default React.memo(function Body({ sortedItems, saveItem, canEdit }: Body
           editing={editing === fullKey(item)}
           saveItem={
             canEdit(item)
-              ? cachedCallback((fields: ModelFields) => {
-                  saveItem(fullKey(item), fields);
-                  setEditing(null);
-                }, `save-${fullKey(item)}`)
+              ? cachedCallback(
+                  (fields: ModelFields) => {
+                    saveItem(fullKey(item), fields);
+                    setEditing(null);
+                  },
+                  `save-${fullKey(item)}`,
+                )
               : null
           }
           editItem={
             canEdit(item)
-              ? cachedCallback(() => {
-                  setEditing(fullKey(item));
-                }, `edit-${fullKey(item)}`)
+              ? cachedCallback(
+                  () => {
+                    setEditing(fullKey(item));
+                  },
+                  `edit-${fullKey(item)}`,
+                )
               : null
           }
           cancelEdit={
             canEdit(item)
-              ? cachedCallback(() => {
-                  setEditing(null);
-                }, `cancel-${fullKey(item)}`)
+              ? cachedCallback(
+                  () => {
+                    setEditing(null);
+                  },
+                  `cancel-${fullKey(item)}`,
+                )
               : null
           }
         />

bundles/processing/modules/processing/ConnectionStatus.tsx

@@ -18,8 +18,7 @@ const STATUS_CONTENT = {
   },
   disconnected: {
     heading: 'Socket Disconnected',
-    body:
-      'You can still take action on donations, but you will not see new donations in real time. Please refresh the page to reconnect.',
+    body: 'You can still take action on donations, but you will not see new donations in real time. Please refresh the page to reconnect.',
   },
 };
 

bundles/processing/pages/ReadDonations.tsx

@@ -153,9 +153,10 @@ export default function ReadDonations() {
   useDonationGroupSyncOnLoad();
 
   const groups = useDonationGroupsStore(state => state.groups);
-  const groupItems = React.useMemo(() => groups.map((group): GroupTabItem => ({ type: 'group', id: group.id })), [
-    groups,
-  ]);
+  const groupItems = React.useMemo(
+    () => groups.map((group): GroupTabItem => ({ type: 'group', id: group.id })),
+    [groups],
+  );
 
   const [selectedTab, setSelectedTab] = React.useState<FilterGroupTabItem>(FILTER_ITEMS[0]);
   const tabDonations = useDonationsForFilterGroupTab(selectedTab, READING_DONATION_STATE);

bundles/public/hooks/useCachedCallback.ts

@@ -49,7 +49,7 @@ type MemoDict<R1> = {
 
 export function useCachedCallback<R1>(callback: (...args: any[]) => R1, dependencies: any[], key = JSONKey) {
   /* eslint-disable react-hooks/exhaustive-deps */
-  const memo = useMemo(() => ({} as MemoDict<R1>), dependencies);
+  const memo = useMemo(() => ({}) as MemoDict<R1>, dependencies);
   const keyFunc = useRef(key);
   return useCallback(
     (...bound: any[]) => {

bundles/public/hooks/useFetchDonorsSpec.tsx

@@ -14,13 +14,7 @@ const mockStore = configureMockStore([thunk]);
 function TestComponent({ eventId }: { eventId: number }) {
   const donors = useSelector((state: any) => state.models.donors);
   useFetchDonors(eventId);
-  return (
-    <div>
-      {donors?.map((d: any) => (
-        <div key={d.pk}>{d.public}</div>
-      ))}
-    </div>
-  );
+  return <div>{donors?.map((d: any) => <div key={d.pk}>{d.public}</div>)}</div>;
 }
 
 describe('useFetchDonors', () => {

bundles/public/util/http.ts

@@ -67,7 +67,7 @@ export const get = (url: string, queryParams?: object, opts: GetOptions = {}) =>
 
 type PostOptions = {
   headers?: { [header: string]: any };
-  encoder?: typeof Encoders[keyof typeof Encoders];
+  encoder?: (typeof Encoders)[keyof typeof Encoders];
 };
 
 export const post = (url: string, data: object, opts: PostOptions = {}) => {

bundles/tracker/donation/components/Donate.tsx

@@ -89,9 +89,10 @@ const Donate = (props: DonateProps) => {
     [updateDonation],
   );
   const updateAmount = React.useCallback((amount: number) => updateDonation({ amount }), [updateDonation]);
-  const updateAmountPreset = useCachedCallback(amountPreset => updateDonation({ amount: amountPreset }), [
-    updateDonation,
-  ]);
+  const updateAmountPreset = useCachedCallback(
+    amountPreset => updateDonation({ amount: amountPreset }),
+    [updateDonation],
+  );
   const updateComment = React.useCallback((comment: string) => updateDonation({ comment }), [updateDonation]);
 
   return (

bundles/uikit/Button.tsx

@@ -19,9 +19,9 @@ const ButtonSizes = {
 };
 
 type ButtonProps = {
-  color?: typeof ButtonColors[keyof typeof ButtonColors];
-  size?: typeof ButtonSizes[keyof typeof ButtonSizes];
-  look?: typeof ButtonLooks[keyof typeof ButtonLooks];
+  color?: (typeof ButtonColors)[keyof typeof ButtonColors];
+  size?: (typeof ButtonSizes)[keyof typeof ButtonSizes];
+  look?: (typeof ButtonLooks)[keyof typeof ButtonLooks];
   fullwidth?: boolean;
   disabled?: boolean;
   tabIndex?: -1 | 0;

bundles/uikit/Checkbox.tsx

@@ -28,7 +28,7 @@ const CheckboxHeader = (props: CheckboxHeaderProps) => {
 };
 
 type CheckboxProps = {
-  look?: typeof CheckboxLooks[keyof typeof CheckboxLooks];
+  look?: (typeof CheckboxLooks)[keyof typeof CheckboxLooks];
   label?: React.ReactNode;
   name?: string;
   checked: boolean;

bundles/uikit/Container.tsx

@@ -10,7 +10,7 @@ const ContainerSizes = {
 };
 
 type ContainerProps = {
-  size?: typeof ContainerSizes[keyof typeof ContainerSizes];
+  size?: (typeof ContainerSizes)[keyof typeof ContainerSizes];
   className?: string;
   children: React.ReactNode;
 };

bundles/uikit/Header.tsx

@@ -19,8 +19,8 @@ const HeaderColors = {
 };
 
 type HeaderProps = {
-  size?: typeof HeaderSizes[keyof typeof HeaderSizes];
-  color?: typeof HeaderColors[keyof typeof HeaderColors];
+  size?: (typeof HeaderSizes)[keyof typeof HeaderSizes];
+  color?: (typeof HeaderColors)[keyof typeof HeaderColors];
   marginless?: boolean;
   oneline?: boolean;
   className?: string;

bundles/uikit/Icon.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { IconTypes } from './IconTypes';
 
 type IconProps = {
-  name: typeof IconTypes[keyof typeof IconTypes];
+  name: (typeof IconTypes)[keyof typeof IconTypes];
   color?: string;
   className?: string;
 };

bundles/uikit/InputWrapper.tsx

@@ -11,7 +11,7 @@ const InputWrapperSizes = {
 };
 
 type InputWrapperProps = {
-  size?: typeof InputWrapperSizes[keyof typeof InputWrapperSizes];
+  size?: (typeof InputWrapperSizes)[keyof typeof InputWrapperSizes];
   label?: React.ReactNode;
   name: string;
   required?: boolean;

bundles/uikit/RadioGroup.tsx

@@ -39,7 +39,7 @@ const RadioItem = (props: RadioItemProps) => {
 };
 
 type RadioGroupProps = {
-  look?: typeof RadioGroupLooks[keyof typeof RadioGroupLooks];
+  look?: (typeof RadioGroupLooks)[keyof typeof RadioGroupLooks];
   options: any[];
   value: any;
   className?: string;

bundles/uikit/Text.tsx

@@ -18,8 +18,8 @@ const TextColors = {
 };
 
 type TextProps = {
-  size?: typeof TextSizes[keyof typeof TextSizes];
-  color?: typeof TextColors[keyof typeof TextColors];
+  size?: (typeof TextSizes)[keyof typeof TextSizes];
+  color?: (typeof TextColors)[keyof typeof TextColors];
   marginless?: boolean;
   oneline?: boolean;
   className?: string;

bundles/uikit/TextInput.tsx

@@ -12,7 +12,7 @@ const TextInputTypes = {
 };
 
 type TextInputProps = InputWrapperPassthroughProps & {
-  type?: typeof TextInputTypes[keyof typeof TextInputTypes];
+  type?: (typeof TextInputTypes)[keyof typeof TextInputTypes];
   value?: string;
   placeholder?: string;
   multiline?: boolean;

design/generated/Themes.tsx

@@ -107,10 +107,10 @@ export const rawColors = {
 export type RawColorName = keyof typeof rawColors;
 
 export const Themes = ['dark', 'light'] as const;
-export type Theme = typeof Themes[number];
+export type Theme = (typeof Themes)[number];
 
 export const Accents = ['purple', 'blue'] as const;
-export type Accent = typeof Accents[number];
+export type Accent = (typeof Accents)[number];
 
 export type ThemeTokenValue = { rawColor: string; opacity: number; rgba: string; hsla: string };
 

package.json

@@ -124,7 +124,7 @@
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^2.0.1",
     "karma-webpack": "^5.0.0",
-    "prettier": "^2.1.2",
+    "prettier": "^3.0.3",
     "process": "^0.11.10",
     "puppeteer": "^19.8.5",
     "react-refresh": "^0.14.0",

prettier.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   ...require('@gamesdonequick/prettier-config'),
+  bracketSameLine: true,
   arrowParens: 'avoid',
 };

yarn.lock

@@ -9763,7 +9763,7 @@ __metadata:
     postcss-loader: ^7.2.4
     postcss-nesting: ^11.2.2
     postcss-preset-env: ^8.3.0
-    prettier: ^2.1.2
+    prettier: ^3.0.3
     process: ^0.11.10
     prop-types: ^15.8.1
     puppeteer: ^19.8.5
@@ -17460,15 +17460,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "prettier@npm:2.1.2"
-  bin:
-    prettier: bin-prettier.js
-  checksum: 7bc5a2ff5e6caf585b003fbdb1645719d5f5fcd2a03b08bae75a5608a7155fd6f84bda146104b3b6b0d9dc06720ffbfab716eade2eaae771ce4817bcee745928
-  languageName: node
-  linkType: hard
-
 "prettier@npm:^2.8.3":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
@@ -17478,6 +17469,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "prettier@npm:3.0.3"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: e10b9af02b281f6c617362ebd2571b1d7fc9fb8a3bd17e371754428cda992e5e8d8b7a046e8f7d3e2da1dcd21aa001e2e3c797402ebb6111b5cd19609dd228e0
+  languageName: node
+  linkType: hard
+
 "pretty-error@npm:^2.1.1":
   version: 2.1.1
   resolution: "pretty-error@npm:2.1.1"