chore: upgrade prettier

package.json

@@ -78,12 +78,12 @@
     "@vitest/coverage-v8": "^1.4.0",
     "chokidar-cli": "^3.0.0",
     "deep-freeze-es6": "^1.4.1",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-no-unsanitized": "^4.0.2",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unicorn": "^45.0.2",
@@ -96,7 +96,7 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.1",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.6.1",

pages/dnd/engine-page-template.tsx

@@ -55,7 +55,7 @@ export function EnginePageTemplate({
             }
             if (removedItem) {
               setPaletteItems((prev) =>
-                [...prev, removedItem].sort((a, b) => a.data.title.localeCompare(b.data.title))
+                [...prev, removedItem].sort((a, b) => a.data.title.localeCompare(b.data.title)),
               );
             }
           }}

pages/dnd/items.tsx

@@ -228,29 +228,32 @@ export const demoPaletteItems: readonly ItemsPaletteProps.Item<ItemData>[] = Obj
     data: widget?.data ?? createDefaultWidget(key),
   }));
 
-export const letterWidgets = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"].reduce((acc, letter) => {
-  const definitions: { [letter: string]: BoardItemDefinitionBase["definition"] } = {
-    R: { defaultRowSpan: 1, defaultColumnSpan: 2, minRowSpan: 1, minColumnSpan: 2 },
-    S: { defaultRowSpan: 1, defaultColumnSpan: 2, minRowSpan: 1, minColumnSpan: 2 },
-    T: { defaultRowSpan: 1, defaultColumnSpan: 2, minRowSpan: 1, minColumnSpan: 2 },
-    U: { defaultRowSpan: 4, defaultColumnSpan: 1, minRowSpan: 4, minColumnSpan: 1 },
-    V: { defaultRowSpan: 4, defaultColumnSpan: 1, minRowSpan: 4, minColumnSpan: 1 },
-    W: { defaultRowSpan: 4, defaultColumnSpan: 1, minRowSpan: 4, minColumnSpan: 1 },
-    X: { defaultRowSpan: 4, defaultColumnSpan: 2, minRowSpan: 4, minColumnSpan: 2 },
-    Y: { defaultRowSpan: 4, defaultColumnSpan: 2, minRowSpan: 4, minColumnSpan: 2 },
-    Z: { defaultRowSpan: 4, defaultColumnSpan: 2, minRowSpan: 4, minColumnSpan: 2 },
-  };
-  acc[letter] = {
-    id: letter,
-    definition: definitions[letter],
-    data: {
-      title: `Widget ${letter}`,
-      description: "Empty widget",
-      content: "",
-    },
-  };
-  return acc;
-}, {} as { [id: string]: BoardItemDefinitionBase<ItemData> });
+export const letterWidgets = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"].reduce(
+  (acc, letter) => {
+    const definitions: { [letter: string]: BoardItemDefinitionBase["definition"] } = {
+      R: { defaultRowSpan: 1, defaultColumnSpan: 2, minRowSpan: 1, minColumnSpan: 2 },
+      S: { defaultRowSpan: 1, defaultColumnSpan: 2, minRowSpan: 1, minColumnSpan: 2 },
+      T: { defaultRowSpan: 1, defaultColumnSpan: 2, minRowSpan: 1, minColumnSpan: 2 },
+      U: { defaultRowSpan: 4, defaultColumnSpan: 1, minRowSpan: 4, minColumnSpan: 1 },
+      V: { defaultRowSpan: 4, defaultColumnSpan: 1, minRowSpan: 4, minColumnSpan: 1 },
+      W: { defaultRowSpan: 4, defaultColumnSpan: 1, minRowSpan: 4, minColumnSpan: 1 },
+      X: { defaultRowSpan: 4, defaultColumnSpan: 2, minRowSpan: 4, minColumnSpan: 2 },
+      Y: { defaultRowSpan: 4, defaultColumnSpan: 2, minRowSpan: 4, minColumnSpan: 2 },
+      Z: { defaultRowSpan: 4, defaultColumnSpan: 2, minRowSpan: 4, minColumnSpan: 2 },
+    };
+    acc[letter] = {
+      id: letter,
+      definition: definitions[letter],
+      data: {
+        title: `Widget ${letter}`,
+        description: "Empty widget",
+        content: "",
+      },
+    };
+    return acc;
+  },
+  {} as { [id: string]: BoardItemDefinitionBase<ItemData> },
+);
 
 export function createLetterItems(grid: null | string[][], palette?: string[]) {
   if (!grid) {
@@ -261,15 +264,15 @@ export function createLetterItems(grid: null | string[][], palette?: string[]) {
 
   const usedLetterItems = new Set(boardItems.map((item) => item.id));
   const paletteItems = Object.values(letterWidgets).filter(
-    (item) => !usedLetterItems.has(item.id) && (!palette || palette.includes(item.id))
+    (item) => !usedLetterItems.has(item.id) && (!palette || palette.includes(item.id)),
   );
 
   return { boardItems, paletteItems };
 }
 
 function applyLayout<D>(
   layout: GridLayout,
-  sourceItems: readonly (BoardItemDefinitionBase<D> | BoardItemDefinition<D>)[]
+  sourceItems: readonly (BoardItemDefinitionBase<D> | BoardItemDefinition<D>)[],
 ): readonly BoardItemDefinition<D>[] {
   const itemById = new Map(sourceItems.map((item) => [item.id, item]));
   const getItem = (itemId: string) => {

pages/dnd/revenue-chart.tsx

@@ -58,10 +58,10 @@ export function RevenueChart({ height }: { height: number }) {
           return Math.abs(value) >= 1e9
             ? (value / 1e9).toFixed(1).replace(/\.0$/, "") + "G"
             : Math.abs(value) >= 1e6
-            ? (value / 1e6).toFixed(1).replace(/\.0$/, "") + "M"
-            : Math.abs(value) >= 1e3
-            ? (value / 1e3).toFixed(1).replace(/\.0$/, "") + "K"
-            : value.toFixed(2);
+              ? (value / 1e6).toFixed(1).replace(/\.0$/, "") + "M"
+              : Math.abs(value) >= 1e3
+                ? (value / 1e3).toFixed(1).replace(/\.0$/, "") + "K"
+                : value.toFixed(2);
         },
       }}
       ariaLabel="Single data series bar chart"

pages/main.tsx

@@ -9,5 +9,5 @@ import App from "./app";
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );

pages/pages.ts

@@ -14,5 +14,5 @@ export const pagesMap = Object.fromEntries(
   Object.entries(pagesRaw).map(([path, dynamicImport]) => {
     const match = getPage(path);
     return [match, lazy(dynamicImport as ComponentFactory)];
-  })
+  }),
 );

pages/shared/i18n.ts

@@ -73,7 +73,7 @@ export const itemsPaletteI18nStrings: ItemsPaletteProps.I18nStrings<ItemData> =
 function createAnnouncement(
   operationAnnouncement: string,
   conflicts: readonly BoardProps.Item<ItemData>[],
-  disturbed: readonly BoardProps.Item<ItemData>[]
+  disturbed: readonly BoardProps.Item<ItemData>[],
 ) {
   const conflictsAnnouncement =
     conflicts.length > 0 ? `Conflicts with ${conflicts.map((c) => c.data.title).join(", ")}.` : "";
@@ -91,7 +91,7 @@ export const boardI18nStrings: BoardProps.I18nStrings<ItemData> = {
     return createAnnouncement(
       `Item moved to ${op.direction === "horizontal" ? columns : rows}.`,
       op.conflicts,
-      op.disturbed
+      op.disturbed,
     );
   },
   liveAnnouncementDndItemResized(op) {

scripts/environment.js

@@ -21,13 +21,13 @@ writeFile(
   `${basePath}.js`,
   Object.entries(values)
     .map(([key, value]) => `export var ${key} = ${JSON.stringify(value)};`)
-    .join("\n")
+    .join("\n"),
 );
 writeFile(
   `${basePath}.d.ts`,
   Object.keys(values)
     .map((key) => `export const ${key}: string;`)
-    .join("\n")
+    .join("\n"),
 );
 
 function writeFile(filepath, content) {

scripts/prepare-package-lock.js

@@ -25,7 +25,7 @@ function unlock(packages) {
       delete packages[dependencyName];
     } else if (dependency.resolved && dependency.resolved.includes("codeartifact.us-west-2.amazonaws.com")) {
       throw Error(
-        "package-lock.json file contains a reference to CodeArtifact. Use regular npm to update the packages."
+        "package-lock.json file contains a reference to CodeArtifact. Use regular npm to update the packages.",
       );
     }
   });

scripts/test-utils.js

@@ -8,7 +8,7 @@ import { globbySync } from "globby";
 import { pascalCase, writeSourceFile } from "./utils.js";
 
 const components = globbySync(["src/test-utils/dom/**/index.ts", "!src/test-utils/dom/index.ts"]).map((fileName) =>
-  fileName.replace("src/test-utils/dom/", "").replace("/index.ts", "")
+  fileName.replace("src/test-utils/dom/", "").replace("/index.ts", ""),
 );
 
 generateSelectorUtils();
@@ -71,7 +71,7 @@ function generateIndexFileContent({ testUtilType, buildFinderInterface }) {
           // casting to 'any' is needed to avoid this issue with generics
           // https://github.com/microsoft/TypeScript/issues/29132
           return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ${pascalCase(
-            componentName
+            componentName,
           )}Wrapper);
       };`;
     }),

scripts/themeable-source.js

@@ -22,9 +22,9 @@ function copyStyles() {
       path.join(stylesTargetDir, file),
       content.replace(
         /@use "(\.\.\/)+node_modules\/@cloudscape-design\/design-tokens\/index.scss"/,
-        '@use "awsui:tokens"'
+        '@use "awsui:tokens"',
       ),
-      "utf-8"
+      "utf-8",
     );
   }
 }

scripts/utils.js

@@ -27,7 +27,7 @@ export function listPublicDirs(baseDir) {
         elem !== "internal" &&
         elem !== "index.tsx" &&
         elem !== "index.ts" &&
-        elem !== "test-utils"
+        elem !== "test-utils",
     );
 }
 

src/board-item/__tests__/board-item.test.tsx

@@ -33,7 +33,7 @@ describe("WidgetContainer", () => {
         <BoardItem header="Header" footer="Footer" settings="Settings" i18nStrings={i18nStrings}>
           Content
         </BoardItem>
-      </div>
+      </div>,
     );
     const itemWrapper = createWrapper().findBoardItem()!;
     expect(itemWrapper.findHeader()!.getElement().textContent).toBe("Header");

src/board/__tests__/board-acquisition.test.tsx

@@ -22,15 +22,15 @@ test("renders acquired item", () => {
       draggableItem,
       collisionRect: { top: 0, bottom: 0, left: 0, right: 0 },
       coordinates: new Coordinates({ x: 0, y: 0 }),
-    } as DragAndDropData)
+    } as DragAndDropData),
   );
 
   act(() =>
     mockController.acquire({
       droppableId: "awsui-placeholder-1-0",
       draggableItem,
       renderAcquiredItem: () => <div data-testid="acquired-item"></div>,
-    })
+    }),
   );
   expect(screen.queryByTestId("acquired-item")).toBeInTheDOM();
 

src/board/__tests__/board.test.tsx

@@ -164,7 +164,7 @@ describe("Board", () => {
             { id: "1", data: { title: "Item 1" }, columnOffset: { 1: 0 } },
           ],
         },
-      })
+      }),
     );
   });
 
@@ -188,7 +188,7 @@ describe("Board", () => {
             { id: "2", data: { title: "Item 2" }, columnOffset: { 1: 0 } },
           ],
         },
-      })
+      }),
     );
   });
 
@@ -207,8 +207,8 @@ describe("Board", () => {
             removedItem: expect.objectContaining({ id: "1" }),
             items: [{ id: "2", data: { title: "Item 2" }, columnOffset: { 1: 0 } }],
           },
-        })
-      )
+        }),
+      ),
     );
   });
 });

src/board/internal.tsx

@@ -249,8 +249,8 @@ export function InternalBoard<D>({
                     state={transition ? (transition.collisionIds?.has(placeholder.id) ? "hover" : "active") : "default"}
                     gridContext={gridContext}
                     columns={itemsLayout.columns}
-                  />
-                )
+                  />,
+                ),
               );
 
               items.forEach((item) => {
@@ -293,7 +293,7 @@ export function InternalBoard<D>({
                     {item.id === acquiredItem?.id && acquiredItemElement
                       ? () => acquiredItemElement
                       : () => renderItem(item, { removeItem: () => removeItemAction(item) })}
-                  </ItemContainer>
+                  </ItemContainer>,
                 );
               });
 

src/board/transition.ts

@@ -200,7 +200,7 @@
 
 function updateTransitionWithPointerEvent<D>(
   state: TransitionState<D>,
-  { collisionIds, positionOffset, draggableRect }: UpdateWithPointerAction
+  { collisionIds, positionOffset, draggableRect }: UpdateWithPointerAction,
 ): TransitionState<D> {
   const { transition } = state;
 
@@ -255,7 +255,7 @@
 
 function updateTransitionWithKeyboardEvent<D>(
   state: TransitionState<D>,
-  { direction }: UpdateWithKeyboardAction
+  { direction }: UpdateWithKeyboardAction,
 ): TransitionState<D> {
   const { transition } = state;
 
@@ -311,7 +311,7 @@
 
 function acquireTransitionItem<D>(
   state: TransitionState<D>,
-  { position, layoutElement, acquiredItemElement }: AcquireItemAction
+  { position, layoutElement, acquiredItemElement }: AcquireItemAction,
 ): TransitionState<D> {
   const { transition } = state;
 

src/board/utils/__tests__/layout.test.ts

@@ -12,7 +12,7 @@ import { getLayoutRows } from "../layout";
 function createMockTransition(
   operation: Operation,
   itemsLayout: GridLayout,
-  layoutShift: LayoutShift
+  layoutShift: LayoutShift,
 ): Transition<null> {
   return {
     operation,
@@ -48,7 +48,7 @@ describe("getLayoutRows", () => {
         ]),
         moves: [],
         conflicts: [],
-      }
+      },
     );
     const rows = getLayoutRows(transition);
     expect(rows).toBe(2);
@@ -72,7 +72,7 @@ describe("getLayoutRows", () => {
         ]),
         moves: [],
         conflicts: [],
-      }
+      },
     );
     const rows = getLayoutRows(transition);
     expect(rows).toBe(3);

src/board/utils/announcements.ts

@@ -16,7 +16,7 @@ import {
  */
 export function createOperationAnnouncement<D>(
   transition: Transition<D>,
-  direction: null | Direction
+  direction: null | Direction,
 ): null | DndActionAnnouncement {
   const { operation, layoutShift, itemsLayout } = transition;
   const targetItem = itemsLayout.items.find((it) => it.id === transition.draggableItem.id) ?? null;
@@ -63,7 +63,7 @@ export function announcementToString<D>(
   announcement: TransitionAnnouncement,
   items: readonly BoardProps.Item<D>[],
   i18nStrings: BoardProps.I18nStrings<D>,
-  columns: number
+  columns: number,
 ): string {
   if (!announcement) {
     return "";

src/board/utils/events.ts

@@ -8,7 +8,7 @@ import { BoardProps } from "../interfaces";
 
 export function createItemsChangeEvent<D>(
   items: readonly BoardProps.Item<D>[],
-  layoutShift: LayoutShift
+  layoutShift: LayoutShift,
 ): CustomEvent<BoardProps.ItemsChangeDetail<D>> {
   const insertTarget = layoutShift.moves.find((move) => move.type === "INSERT")?.itemId ?? null;
   const moveTarget = layoutShift.moves.find((move) => move.type === "MOVE")?.itemId ?? null;

src/board/utils/get-hovered-rect.ts

@@ -20,6 +20,6 @@ export function getHoveredRect(collisionsIds: readonly ItemId[], placeholders: r
       left: Number.POSITIVE_INFINITY,
       bottom: Number.NEGATIVE_INFINITY,
       right: Number.NEGATIVE_INFINITY,
-    }
+    },
   );
 }

src/board/utils/layout.ts

@@ -63,7 +63,7 @@ export function getInsertionDirection(cursorOffset: Coordinates): Direction {
 export function getLayoutShift<D>(
   transition: Transition<D>,
   path: readonly Position[],
-  insertionDirection?: Direction
+  insertionDirection?: Direction,
 ): null | LayoutShift {
   if (path.length === 0) {
     return null;