Merge pull request #345 from nulib/deploy/staging

Push to production

Author: adamjarling

.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

.husky/pre-commit

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

.prettierrc

@@ -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

README.md

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

components/About/CollectionGrid.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.test.tsx

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

components/Clover/ViewerWrapper.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.test.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/Collection/Tabs/Explore.tsx

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