Working/upgrade without legacy peer deps

.eslintrc.js

@@ -27,7 +27,8 @@ module.exports = {
     "prettier",
     "prettier/@typescript-eslint",
     "plugin:prettier/recommended",
-    "prettier/react"
+    "prettier/react",
+    "plugin:@next/next/recommended"
   ],
   rules: {
     // this rule was deprecated in favor of another
@@ -82,7 +83,9 @@ module.exports = {
     "id-match": "error",
     "no-eval": "error",
     "no-redeclare": "error",
-    "no-var": "error"
+    "no-var": "error",
+    "@next/next/no-img-element": "off",
+    "react/no-unknown-property": ["error", { ignore: ["sx", "jsx", "global"] }]
   },
   settings: {
     react: {

.github/workflows/ci.yml

@@ -27,16 +27,16 @@ jobs:
     env:
       CI: true
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - id: nvmrc
         run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
 
       - name: Use Node Version from nvmrc
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with: { node-version: "${{ steps.nvmrc.outputs.NODE_VERSION }}" }
 
       - name: Cache node modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:
@@ -60,16 +60,16 @@ jobs:
     env:
       CI: true
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - id: nvmrc
         run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
 
       - name: Use Node Version from nvmrc
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with: { node-version: "${{ steps.nvmrc.outputs.NODE_VERSION }}" }
 
       - name: Cache node modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:
@@ -93,16 +93,16 @@ jobs:
     env:
       CI: true
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - id: nvmrc
         run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
 
       - name: Use Node Version from nvmrc
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with: { node-version: "${{ steps.nvmrc.outputs.NODE_VERSION }}" }
 
       - name: Cache node modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:

.github/workflows/integration.yml

@@ -13,7 +13,7 @@ jobs:
     name: Integration Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Trigger test with webhook
         uses: joelwmale/webhook-action@aed4f319dce44a4f73cdf0480b94df9e6dfc6cae
         # based on the following curl command from A1QA

.github/workflows/publish.yml

@@ -15,31 +15,31 @@ jobs:
 
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - id: nvmrc
         run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
 
       - name: Use Node Version from nvmrc
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with: { node-version: "${{ steps.nvmrc.outputs.NODE_VERSION }}" }
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v3
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v3
 
       - name: Login to the Docker registry
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY_HOST }}
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Generate tags for web-patron image
         id: web-patron-tags
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v5
         with:
           images: ${{ env.REGISTRY_HOST }}/${{ github.repository_owner }}/web-patron
           tags: |
@@ -49,7 +49,7 @@ jobs:
             type=sha,priority=40
 
       - name: Build and push web-patron image
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./Dockerfile

.github/workflows/sync.yml

@@ -1,7 +1,7 @@
 name: Sync branch with NYPL
 on:
   schedule:
-    - cron:  '0 7 * * *'
+    - cron: "0 7 * * *"
 
   workflow_dispatch:
 
@@ -17,18 +17,18 @@ jobs:
 
     steps:
       - name: Checkout repo to sync
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           path: code
 
       - name: Checkout CI scripts
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
-          repository: 'ThePalaceProject/ci-scripts'
+          repository: "ThePalaceProject/ci-scripts"
           path: ci
 
       - name: Set up Python
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v5
         with:
           python-version: 3.8
 

.gitignore

@@ -7,6 +7,7 @@
 # next.js
 /.next/
 /out/
+_next
 
 # production
 /build

.nvmrc

@@ -1 +1 @@
-v14.9.0
+v20.18.1

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { ThemeProvider } from "theme-ui";
-import { Provider as ReakitProvider } from "reakit";
+import { ThemeUIProvider } from "theme-ui";
+// import { Provider as ReakitProvider } from "@ariakit/react";
 import { LibraryProvider } from "../src/components/context/LibraryContext";
 import { UserContext, UserState } from "../src/components/context/UserContext";
 import makeTheme from "../src/theme";
@@ -61,15 +61,15 @@ export const decorators = [
     const theme = makeTheme(libraryData.colors);
     const library = libraryData;
     return (
-      <ThemeProvider theme={theme}>
-        <ReakitProvider>
+      <ThemeUIProvider theme={theme}>
+        {/* <ReakitProvider> */}
           <LibraryProvider library={library}>
             <UserContext.Provider value={user}>
                 <Story />
             </UserContext.Provider>
           </LibraryProvider>
-        </ReakitProvider>
-      </ThemeProvider>
+        {/* </ReakitProvider> */}
+      </ThemeUIProvider>
     )
   },
 ];

CHANGELOG.md

@@ -1,6 +1,9 @@
 ## CHANGELOG
 
 ### UNRELEASED CHANGES
+
+- replace reakit with ariakit
+- Update nextjs to v15, react to v18
 - Fix check on redirect URL to make sure it doesn't start with HTTP, instead of contain HTTP, since it was falsely matching some legitimate URLs.
 - Change font to Open Sans.
 - Update iOS App Store badge to link to Palace app.

Dockerfile

@@ -1,5 +1,5 @@
 # build environment
-FROM node:12.2.0-alpine as builder	
+FROM node:20.18.1-alpine AS builder
 
 RUN apk update
 RUN apk add git
@@ -9,12 +9,7 @@ RUN apk add git
 ENV NPM_CONFIG_LOGLEVEL=warn
 COPY package*.json ./
 COPY .npmrc ./
-COPY install-deps.sh ./
-# conditionally login to github package registry
-# and install dependencies
-ARG github_token=""
-RUN chmod +x ./install-deps.sh
-RUN sh ./install-deps.sh
+RUN npm install
 
 # then copy the rest of the files
 COPY . ./

README.md

@@ -11,9 +11,11 @@
 
 An OPDS web catalog client for library patrons.
 
+This app supports discovery, borrowing, downloading, and returning of material. It does not directly support viewing.
+
 ## Background
 
-The `web-patron` application serves as a way for libraries to publish their collections to the web. A library *must* be part of a [Circulation Manager](https://github.com/ThePalaceProject/circulation) and *can* be registered to a [Library Registry](https://github.com/ThePalaceProject/library-registry). A Library Registry provides details about a library, and a Circulation Manager provides a library's collection of eBooks and audiobooks in OPDS format. Registering with The Palace Project's Library Registry is how libraries can show up in the Palace mobile application and the [Community Demo](#demo) of this app. In order to have a web version of your library catalog, you can deploy this app.
+The `web-patron` application serves as a way for libraries to publish their collections to the web. A library _must_ be part of a [Circulation Manager](https://github.com/ThePalaceProject/circulation) and _can_ be registered to a [Library Registry](https://github.com/ThePalaceProject/library-registry). A Library Registry provides details about a library, and a Circulation Manager provides a library's collection of eBooks and audiobooks in OPDS format. Registering with The Palace Project's Library Registry is how libraries can show up in the Palace mobile application and the [Community Demo](#demo) of this app. In order to have a web version of your library catalog, you can deploy this app.
 
 This app can support many libraries, each at their own url: `http://example.com/library1` can be one library, and `http://example.com/library2` another library. You configure the libraries for the app in the [config file](#configuration-file).
 
@@ -33,32 +35,30 @@ __To have your library added to the demo, register it with NYPL's Library Regist
 # Table of Contents
 
 - [web-patron](#web-patron)
-  * [Background](#background)
+  - [Background](#background)
   <!-- * [Demo](#community-demo) -->
 - [Configuring the App](#configuring-the-app)
-  * [Configuration File](#configuration-file)
-  * [Environment Variables](#environment-variables)
-  * [Manager, Registry, and Application Configurations](#manager--registry--and-application-configurations)
+  - [Configuration File](#configuration-file)
+  - [Environment Variables](#environment-variables)
+  - [Manager, Registry, and Application Configurations](#manager--registry--and-application-configurations)
 - [Development](#development)
-  * [Contributing](#contributing)
-  * [Installing Dependencies](#installing-dependencies)
-  * [Running the Application](#running-the-application)
-    + [Running with Decryption](#running-with-decryption)
-    + [ENV Vars and Building](#env-vars-and-building)
-    + [Useful Scripts](#useful-scripts)
-  * [Testing](#testing)
-    + [Context and useful spies](#context-and-useful-spies)
-    + [Running tests](#running-tests)
-    + [Example](#example)
-  * [Links and Routing](#links-and-routing)
+  - [Contributing](#contributing)
+  - [Installing Dependencies](#installing-dependencies)
+  - [Running the Application](#running-the-application)
+    - [ENV Vars and Building](#env-vars-and-building)
+    - [Useful Scripts](#useful-scripts)
+  - [Testing](#testing)
+    - [Context and useful spies](#context-and-useful-spies)
+    - [Running tests](#running-tests)
+    - [Example](#example)
+  - [Links and Routing](#links-and-routing)
 - [Deploying](#deploying)
-  * [Build a docker container](#build-a-docker-container)
-    + [Building With AxisNow Decryptor](#building-with-axisnow-decryptor)
-    + [Running the docker container](#running-the-docker-container)
-    + [From the command line](#from-the-command-line)
-    + [Using `docker-compose`](#using--docker-compose-)
-    + [Helpful commands](#helpful-commands)
-    + [Credits](#credits)
+  - [Build a docker container](#build-a-docker-container)
+    - [Running the docker container](#running-the-docker-container)
+    - [From the command line](#from-the-command-line)
+    - [Using `docker-compose`](#using--docker-compose-)
+    - [Helpful commands](#helpful-commands)
+    - [Credits](#credits)
 
 # Configuring the App
 
@@ -124,16 +124,6 @@ Once the dependencies are installed and application environments configured, the
 
 The application will start at the base URL of `localhost:3000`. (NOTE: `npm run dev:https` will also make the site available using your computer's IP address. For example, https://192.168.1.15:3000.)
 
-### Running with Decryption
-
-This app supports read online for encrypted books only in the AxisNow format, and if you have access to the [Decryptor](https://github.com/nypl-simplified-packages/axisnow-access-control-web)
-
-To run with decryption:
-
-- Run `npm login --registry=https://npm.pkg.github.com`. You will need a Github Personal Access Token to use as your password.
-- Run `npm install` as normal.
-- The app will automatically pick up the installed optional `@nypl-simplified-packages/axisnow-access-control-web` package, and run with decryption enabled.
-
 ### ENV Vars and Building
 
 When building for production using `npm run build`, the env vars are set at build time. This means whatever you have in your `.env` or `.env.local` or set in the command line when running `npm run build` will be taken as the env for the app when you run it. Overriding env vars like this `CONFIG_FILE=config.yml npm run start` will not work, you have to set them at build time.
@@ -145,7 +135,6 @@ This project uses [Theme UI](https://theme-ui.com/) which provides a simple Java
 ### Useful Scripts
 
 - `npm run test` - This will launch the test runner (jest) and run all tests.
-- `npm run test:watch` - This will run jest in watch mode, rerunning and affected tests whenever you save a file. It's recommended to have this running when developing, that way you know immediately when a change causes some test to fail.
 - `npm run dev:axe` - Will run the dev script with react-axe enabled for viewing accessibility issues.
 - `npm run lint` - Will lint all code and show errors/warnings in the console.
 - `npm run lint:ts:fix` - Will lint the ts and tsx files and apply automatic fixes where possible.
@@ -165,7 +154,7 @@ Inside of `src/test-utils/fixtures` are some useful data fixtures. Typically the
 
 ### Running tests
 
-You can run `npm run test` to run the test suite once. Alternatively, and recommended, is keeping the test suite running in watch mode while developing with `npm run test:watch`. The CLI output for that function will also provide instructions to filter the tests to a specific file for speed, if you'd like.
+You can run `npm run test` to run the test suite once. The CLI output for that function will also provide instructions to filter the tests to a specific file for speed, if you'd like.
 
 ### Example
 
@@ -222,24 +211,13 @@ When you have code changes you wish to review locally, you will need to build a
 1. Clone this repository and make some changes.
 2. Build the image
 
-    ```
-    docker build -t webpatron  .
+   ```
+   docker build -t webpatron  .
 
-    ```
+   ```
 
 If you wanted to customize the image, you could create an additional Dockerfile (e.g., Dockerfile.second) and simply specify its name in the docker build commands. The Docker file you specify will guide the image build. For this image, the build takes about 4-6 minutes, depending on your Internet speed and load on the Node package servers, to complete the final image. Eg: `docker build -f Dockerfile.second -t webpatron .`
 
-### Building With AxisNow Decryptor
-
-To build the docker image with the AxisNow Decryptor included, you must provide a `github_token` build arg to the docker build command:
-
-```
-docker build --build-arg github_token=xxx .
-
-```
-
-This will set the correct permissions for when the app runs `npm install` while building the image.
-
 ### Running the docker container
 
 Whether running the container from a Docker Hub image, or a local one, you will need to provide at least one environment variable to specify the circulation manager backend, as described in [Application Startup Configurations](#Application-Startup-Configurations). You can also provide the other optional environment variables when running your docker container. There are two ways to run the container: (1) via the command line, and (2) via `docker-compose` with a `docker-compose.yml` file.