Merge pull request #345 from nulib/deploy/staging

Push to production

.github/workflows/run-tests.yml

@@ -15,18 +15,18 @@ jobs:
 
     steps:
       - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
+        uses: styfle/cancel-workflow-action@0.12.1
 
       - name: Get files
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup NodeJS
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "lts/*"
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --force
 
       - name: Run tests
         run: npm run test:ci

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "tabWidth": 2
+}

README.md

@@ -103,7 +103,22 @@ The API endpoint is an environment variable which is accessed in a local dev env
 
 ## Code Quality
 
-The app uses ESLint with a plugin for TypeScript support.
+### Prettier
+
+There are no pre-commit hooks, however deploy CI will run a Prettier check on all files to ensure code quality. It's recommended to:
+
+- Install the [Prettier VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- Enable the "Format on Save" setting in VSCode
+- Manually validate and/or fix, by running Prettier locally using the following commands:
+
+```bash
+npm run prettier:check # Check for formatting issues
+npm run prettier:fix # Fix formatting issues
+```
+
+### ESLint
+
+The app uses ESLint with a plugin for TypeScript support. Note currently with NextJS `v14`, this command won't run due to a dependency issue with ESLint `v9` support. Hopefully resolved by NextJS soon.
 
 ```bash
 npm run lint

components/About/CollectionGrid.tsx

@@ -1,6 +1,7 @@
 import PhotoFeature, {
   PhotoFeatureProps,
 } from "@/components/Shared/PhotoFeature/PhotoFeature";
+
 import { CollectionGridStyled } from "components/About/CollectionGridStyled";
 
 interface Props {

components/Clover/ViewerWrapper.test.tsx

@@ -34,7 +34,7 @@ describe("WorkViewerWrapper", () => {
           isWorkRestricted={true}
           manifestId="http://testing.com"
         />
-      </UserContext.Provider>
+      </UserContext.Provider>,
     );
 
     expect(await screen.findByText(readingRoomMessage)).toBeInTheDocument();
@@ -50,7 +50,7 @@ describe("WorkViewerWrapper", () => {
           isWorkRestricted={false}
           manifestId="http://testing.com"
         />
-      </UserContext.Provider>
+      </UserContext.Provider>,
     );
 
     let el;

components/Clover/ViewerWrapper.tsx

@@ -18,7 +18,7 @@ export const CloverViewer = dynamic(
   () => import("@samvera/clover-iiif/viewer"),
   {
     ssr: false,
-  }
+  },
 );
 
 interface WrapperProps {

components/Collection/Tabs/Explore.test.tsx

@@ -17,7 +17,7 @@ const topMetadata = [
 describe("CollectionTabsExplore", () => {
   it("renders the description", async () => {
     render(
-      <CollectionTabsExplore collectionId="abc123" topMetadata={topMetadata} />
+      <CollectionTabsExplore collectionId="abc123" topMetadata={topMetadata} />,
     );
     expect(screen.getByTestId("explore-wrapper"));
   });

components/Collection/Tabs/Explore.tsx

@@ -28,7 +28,7 @@ const CollectionTabsExplore: React.FC<CollectionTabsExploreProps> = ({
       subject.value.map((subjectValue) => {
         const str = `${url}/search?query=collection.id:"${collectionId}" AND ${subject.field}:"${subjectValue}"&collectionLabel=${subjectValue}&collectionSummary=${""}&as=iiif`;
         return str;
-      })
+      }),
     );
   }, [collectionId, topMetadata]);
 

components/Facets/Facet/GenericFacet.test.tsx

@@ -83,7 +83,7 @@ describe("Facet GenericFacet UI component", () => {
           id: "genre",
           label: "Genre",
         }}
-      />
+      />,
     );
   }
   it("renders facet title", async () => {

components/Facets/Facet/GenericFacet.tsx

@@ -22,7 +22,7 @@ const GenericFacet: React.FC<GenericFacetProps> = ({ facet }) => {
   /* eslint-disable */
   const debouncedHandler = React.useCallback(
     debounce(handleFindChange, 200),
-    []
+    [],
   );
   /* eslint-enable */
 

components/Facets/Facet/Option.tsx

@@ -40,7 +40,10 @@ const Option: React.FC<FacetOption> = ({ bucket, facet, index }) => {
        */
       const facetObject = getFacetById(facet);
       if (facetObject) {
-        filterDispatch({ facet: facetObject, type: "updateRecentFacet" });
+        filterDispatch({
+          facet: facetObject,
+          type: "updateRecentFacet",
+        });
       }
     } else {
       /**

components/Facets/Filter/GroupList.test.tsx

@@ -75,7 +75,7 @@ describe("FacetsGroupList component", () => {
         }}
       >
         <FacetsGroupList />
-      </FilterProvider>
+      </FilterProvider>,
     );
     /**
      * Looks like Radix puts this active state data attribute

components/Facets/Filter/Modal.test.tsx

@@ -72,7 +72,7 @@ describe("FilterModal component while `open`", () => {
             <FilterModal q="joan" setIsModalOpen={() => false} />
           </Dialog.Content>
         </Dialog.Portal>
-      </Dialog.Root>
+      </Dialog.Root>,
     );
 
   it("Has text rendering the search query param.", async () => {
@@ -81,7 +81,7 @@ describe("FilterModal component while `open`", () => {
 
     const content = await screen.findByTestId("modal-content");
     expect(content).toContainHTML(
-      `<em>Results for “<strong>joan</strong>”</em>`
+      `<em>Results for “<strong>joan</strong>”</em>`,
     );
     expect(singletonRouter).toMatchObject({
       asPath: "/search?q=joan",

components/Facets/Filter/Preview.test.tsx

@@ -10,7 +10,7 @@ describe("Submit component", () => {
   it("renders the component with heading 3", () => {
     renderHelper();
     expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
-      "Preview Results"
+      "Preview Results",
     );
   });
 
@@ -29,7 +29,7 @@ describe("Submit component", () => {
     expect(links.length).toBe(2);
     links.forEach((link, index) => {
       expect(link.getAttribute("href")).toBe(
-        `/items/${sampleSearchShape[index].id}`
+        `/items/${sampleSearchShape[index].id}`,
       );
     });
   });

components/Facets/UserFacets/UserFacets.test.tsx

@@ -43,7 +43,7 @@ describe("UserFacet UI component", () => {
         <FilterProvider initialState={filterStateDefault}>
           <UserFacets screen="search" urlFacets={{}} />
         </FilterProvider>
-      </SearchProvider>
+      </SearchProvider>,
     );
     const userFacets = screen.queryByText(`facet-user-component`);
 
@@ -72,7 +72,7 @@ describe("UserFacet UI component", () => {
             }}
           />
         </FilterProvider>
-      </SearchProvider>
+      </SearchProvider>,
     );
     const userFacets = await screen.findByTestId(`facet-user-component`);
     expect(userFacets).toBeInTheDocument();
@@ -101,7 +101,7 @@ describe("UserFacet UI component", () => {
             }}
           />
         </FilterProvider>
-      </SearchProvider>
+      </SearchProvider>,
     );
     const userFacets = screen.getByTestId(`facet-user-component`);
     expect(userFacets).toBeInTheDocument();

components/Facets/UserFacets/UserFacets.tsx

@@ -51,7 +51,7 @@ const FacetsCurrentUser: React.FC<FacetsCurrentUserProps> = ({
       break;
     default:
       console.error(
-        `Screen value "${screen} is not valid on <FacetsCurrentUser>"`
+        `Screen value "${screen} is not valid on <FacetsCurrentUser>"`,
       );
       break;
   }

components/Facets/UserFacets/Value.test.tsx

@@ -16,7 +16,7 @@ describe("UserFacet UI component", () => {
         handleRemoval={() => {
           // nada
         }}
-      />
+      />,
     );
 
     const value = screen.getByRole("button");

components/Facets/WorkType/RadioGroup.tsx

@@ -25,7 +25,7 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
 
   const repositionHighlight = (
     e: MouseEvent<HTMLButtonElement>,
-    option: string
+    option: string,
   ) => {
     if (!option || !wrapperRef?.current) return;
 

components/Footer/SiteContentMessage/SiteContentMessage.tsx

@@ -18,7 +18,7 @@ const SiteContentMessage = () => {
   const [status, setStatus] = useSessionStorage("message_status", true);
   const [timestamp, setTimestamp] = useSessionStorage(
     "message_timestamp",
-    current
+    current,
   );
 
   const handleDismiss = () => {

components/Grid/Item.test.tsx

@@ -35,19 +35,19 @@ describe("GridItem component", () => {
     render(<GridItem item={mockItem as SearchShape} />);
 
     expect(screen.getByAltText(mockItem.title).getAttribute("src")).toContain(
-      mockItem.thumbnail
+      mockItem.thumbnail,
     );
   });
 
   it("renders the full resolution image source is featured", () => {
     render(<GridItem item={mockItem as SearchShape} isFeatured />);
 
     expect(
-      screen.getByAltText(mockItem.title).getAttribute("src")
+      screen.getByAltText(mockItem.title).getAttribute("src"),
     ).not.toContain(mockItem.thumbnail);
 
     expect(screen.getByAltText(mockItem.title).getAttribute("src")).toContain(
-      "https://iiif.stack.rdc-staging.library.northwestern.edu/iiif/2/b92874a0-72b7-4479-979e-38860c412a13/square/512,/0/default.jpg"
+      "https://iiif.stack.rdc-staging.library.northwestern.edu/iiif/2/b92874a0-72b7-4479-979e-38860c412a13/square/512,/0/default.jpg",
     );
   });
 });

components/Header/Header.tsx

@@ -2,6 +2,7 @@ import {
   HeaderStyled,
   HeaderVariants,
 } from "@/components/Header/Header.styled";
+
 import HeaderLockup from "@/components/Header/Lockup";
 import HeaderPrimary from "@/components/Header/Primary";
 import HeaderSuper from "@/components/Header/Super";

components/Header/Primary.tsx

@@ -32,7 +32,7 @@ const HeaderPrimary: React.FC = () => {
         searchFixed: scrollPosition > 0,
         type: "updateSearchFixed",
       }),
-    [searchDispatch, scrollPosition]
+    [searchDispatch, scrollPosition],
   );
 
   const handleIsSearchActive = (status: boolean) => {

components/Search/JumpTo.test.tsx

@@ -17,7 +17,7 @@ describe("SearchJumpTo component", () => {
       <div data-testid="page">
         <span>Outside search form</span>
         <SearchJumpTo isSearchActive={mockIsSearchActive} />
-      </div>
+      </div>,
     );
     const form = screen.getByTestId("search-jump-to-form");
 

components/Search/JumpToList.test.tsx

@@ -20,15 +20,18 @@ const mockSetShowJumpTo = jest.fn();
 describe("SearchJumpToList component", () => {
   it("renders search value in list items", () => {
     render(
-      <SearchJumpToList searchValue="Dylan" setShowJumpTo={mockSetShowJumpTo} />
+      <SearchJumpToList
+        searchValue="Dylan"
+        setShowJumpTo={mockSetShowJumpTo}
+      />,
     );
     expect(screen.getByTestId("jump-to-wrapper"));
     expect(screen.getAllByText("Dylan")).toHaveLength(2);
   });
 
   it("renders Helper components in each JumpTo item", () => {
     render(
-      <SearchJumpToList searchValue="foo" setShowJumpTo={mockSetShowJumpTo} />
+      <SearchJumpToList searchValue="foo" setShowJumpTo={mockSetShowJumpTo} />,
     );
     const helpers = screen.getAllByTestId("helper");
     expect(helpers[0]).toHaveTextContent(/in this collection/i);
@@ -37,7 +40,7 @@ describe("SearchJumpToList component", () => {
 
   it.only("renders route query params in JumpTo items", async () => {
     render(
-      <SearchJumpToList searchValue="foo" setShowJumpTo={mockSetShowJumpTo} />
+      <SearchJumpToList searchValue="foo" setShowJumpTo={mockSetShowJumpTo} />,
     );
 
     await act(async () => {
@@ -48,19 +51,19 @@ describe("SearchJumpToList component", () => {
     });
 
     expect(
-      await screen.findByTestId("helper-anchor-collection")
+      await screen.findByTestId("helper-anchor-collection"),
     ).toHaveAttribute("href", `/search?collection=Best+Collection+Ever&q=foo`);
 
     expect(screen.getByTestId("helper-anchor-all")).toHaveAttribute(
       "href",
-      "/search?q=foo"
+      "/search?q=foo",
     );
   });
 
   it("selects items correctly on arrow key presses", async () => {
     const user = userEvent.setup();
     render(
-      <SearchJumpToList searchValue="foo" setShowJumpTo={mockSetShowJumpTo} />
+      <SearchJumpToList searchValue="foo" setShowJumpTo={mockSetShowJumpTo} />,
     );
     const listItems = await screen.findAllByRole("option");
 
@@ -86,7 +89,7 @@ describe("SearchJumpToList component", () => {
   it("handles the Escape key press", async () => {
     const user = userEvent.setup();
     render(
-      <SearchJumpToList searchValue="foo" setShowJumpTo={mockSetShowJumpTo} />
+      <SearchJumpToList searchValue="foo" setShowJumpTo={mockSetShowJumpTo} />,
     );
 
     await user.keyboard("{Escape}");

components/Search/JumpToList.tsx

@@ -88,7 +88,7 @@ const SearchJumpToList: React.FC<SearchJumpToListProps> = ({
       } catch (err) {
         console.error(
           "Error getting Collection title in JumpTo component",
-          err
+          err,
         );
       }
     }