Library updates

.eslintrc.json

@@ -9,7 +9,8 @@
     // Is not enabled right now to avoid issues with the Next.js repo
     "prettier",
     "plugin:jsx-a11y/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended"
   ],
   "env": {
     "es6": true,

.github/workflows/build-docs.yml

@@ -14,7 +14,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v1
       with:
-        node-version: '14.x'
+        node-version: '20.x'
     - name: Install Dependencies
       run: |
         npm ci

.github/workflows/build-main.yml

@@ -19,7 +19,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v1
       with:
-        node-version: '14.x'
+        node-version: '20.x'
     - name: Install Dependencies
       run: |
         npm ci
@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "20.x"
       - name: Install Dependencies
         run: |
           npm ci
@@ -54,7 +54,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "20.x"
       - name: Install Dependencies
         run: |
           npm ci

.github/workflows/test-lint-and-build.yml

@@ -11,7 +11,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v1
       with:
-        node-version: '14.x'
+        node-version: '20.x'
     - name: Install Dependencies
       run: |
         npm ci
@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "20.x"
       - name: Install Dependencies
         run: |
           npm ci
@@ -46,7 +46,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "20.x"
       - name: Install Dependencies
         run: |
           npm ci

.gitignore

@@ -38,3 +38,7 @@ storybook-static
 
 # vscode
 .vscode
+
+# JetBrains IDE
+.idea
+.junie

.prettierignore

@@ -5,3 +5,5 @@ package-lock.json
 public
 .github
 storybook-static
+next-env.d.ts
+tsconfig.tsbuildinfo

.storybook/annoRepTheme.js

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming"
+import { create } from "storybook/theming"
 
 export default create({
   base: "light",

.storybook/main.js

@@ -1,8 +1,16 @@
 module.exports = {
   stories: [
-    "../stories/**/*.stories.mdx",
+    "../stories/**/*.mdx",
     "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-    "../**/*.stories.@(tsx|mdx)",
+    "../**/*.@(mdx|stories.@(tsx))",
   ],
-  addons: ["@storybook/addon-essentials", "@storybook/addon-a11y", "storybook-css-modules-preset"],
+
+  addons: ["@storybook/addon-docs", "@storybook/addon-a11y"],
+
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+
+  staticDirs: ["../public"],
 }

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons"
+import { addons } from "storybook/manager-api"
 import theme from "./annoRepTheme"
 
 addons.setConfig({

.storybook/preview.js

@@ -1,5 +1,5 @@
 import "../styles/globals.css"
-import "carbon-components/css/carbon-components.min.css"
+import "@carbon/styles/css/styles.css"
 
 export const parameters = {
   actions: { argTypesRegex: "^(on|handle)[A-Z].*" },

Dockerfile

@@ -1,13 +1,13 @@
 # Install dependencies only when needed
-FROM node:14-alpine AS deps
+FROM node:20-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 
 # Rebuild the source code only when needed
-FROM node:14-alpine AS builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 COPY . .
 COPY --from=deps /app/node_modules ./node_modules
@@ -17,7 +17,7 @@ ENV NEXT_PUBLIC_MATOMO_SITE_ID=$MATOMO_SITE_ID
 RUN npm run build
 
 # Production image, copy all the files and run next
-FROM node:14-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 ENV NODE_ENV production
 RUN addgroup -g 1001 -S nodejs

constants/ati.ts

@@ -15,4 +15,4 @@ export const tabs = [
 ]
 
 export const ATI_HEADER_HTML =
-  '<a href="https://qdr.syr.edu/ati"><img src="https://qdr.syr.edu/drupal_data/public/ati_banner_long.png" align="left"/></a><br>'
+  '<a href="https://qdr.syr.edu/ati"><img src="https://qdr.syr.edu/drupal_data/public/ati_banner_long.png" style="float: left;" alt="Annotation for Transparent Inquiry (ATI) at a Glance"/></a><br>'

constants/dataverse.ts

@@ -1,5 +1,3 @@
-import { TagTypeName } from "carbon-components-react"
-
 export const DATAVERSE_HEADER_NAME = "X-Dataverse-Key"
 
 export const SOURCE_MANUSCRIPT_TAG = "Source manuscript"
@@ -28,7 +26,21 @@ export const PUBLICATION_STATUSES = [
   "Deaccessioned",
 ]
 
-export const PUBLICATION_STATUSES_COLOR: Record<string, TagTypeName> = {
+export const PUBLICATION_STATUSES_COLOR: Record<
+  string,
+  | "red"
+  | "magenta"
+  | "purple"
+  | "blue"
+  | "cyan"
+  | "teal"
+  | "green"
+  | "gray"
+  | "cool-gray"
+  | "warm-gray"
+  | "high-contrast"
+  | "outline"
+> = {
   [PUBLICATION_STATUSES[0]]: "green",
   [PUBLICATION_STATUSES[1]]: "red",
   [PUBLICATION_STATUSES[2]]: "blue",

features/ati/AtiExportAnnotations/AtiExportAnnotations.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from "@storybook/react"
+import { Story, Meta } from "@storybook/nextjs"
 
 import AtiExportAnnotations, { AtiExportAnnotationstProps } from "."
 

features/ati/AtiExportAnnotations/DeleteAnnotationsModal/DeleteAnnnotationsModal.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from "@storybook/react"
+import { Story, Meta } from "@storybook/nextjs"
 
 import DeleteAnnotationsModal, { DeleteAnnotationsModalProps } from "."
 

features/ati/AtiExportAnnotations/DeleteAnnotationsModal/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react"
 
-import { ComposedModal, ModalBody, ModalHeader, ModalFooter } from "carbon-components-react"
+import { ComposedModal, ModalBody, ModalHeader, ModalFooter } from "@carbon/react"
 
 export interface DeleteAnnotationsModalProps {
   /** The manuscript name */
@@ -27,21 +27,16 @@ const DeleteAnnotations: FC<DeleteAnnotationsModalProps> = ({
       size="xs"
       aria-label="Delete annotations confirmation"
     >
-      <ModalHeader
-        id="delete-annotations-modal-header"
-        title={`Delete annotations from ${manuscriptName}`}
-        iconDescription="Close"
-      />
-      <ModalBody id="delete-annotations-modal-body">
-        Are you sure you want to delete annotations from this manuscript?
-      </ModalBody>
+      <ModalHeader title={`Delete annotations from ${manuscriptName}`} iconDescription="Close" />
+      <ModalBody>Are you sure you want to delete annotations from this manuscript?</ModalBody>
       <ModalFooter
-        id="delete-annotations-modal-footer"
         danger
         primaryButtonText="Continue"
         secondaryButtonText="Cancel"
         onRequestSubmit={onRequestSubmit}
-      />
+      >
+        {null}
+      </ModalFooter>
     </ComposedModal>
   )
 }

features/ati/AtiExportAnnotations/index.tsx

@@ -1,6 +1,6 @@
 import { FC, useState, FormEventHandler, useEffect, useRef } from "react"
 
-import { Export16, TrashCan16 } from "@carbon/icons-react"
+import { Export, TrashCan } from "@carbon/react/icons"
 import {
   Link,
   TextInput,
@@ -11,7 +11,7 @@ import {
   SelectItem,
   Toggle,
   CopyButton,
-} from "carbon-components-react"
+} from "@carbon/react"
 import CopyToClipboard from "react-copy-to-clipboard"
 
 import { axiosClient } from "../../app"
@@ -289,32 +289,32 @@ const AtiExportAnnotations: FC<AtiExportAnnotationstProps> = ({
                 hideCloseButton
                 lowContrast
                 kind={getTaskNotificationKind(exportTaskState)}
-                subtitle={exportTaskState.desc}
                 title={getTaskStatus(exportTaskState)}
-                actions={
-                  exportTaskState.status === "finished" ? (
-                    <div className={styles.copyAction}>
-                      <CopyToClipboard text={exportHypothesisUrl.current}>
-                        <CopyButton
-                          className={styles.copyButton}
-                          feedback="Copied!"
-                          feedbackTimeout={3000}
-                          iconDescription="Copy URL to clipboard"
-                        />
-                      </CopyToClipboard>
-                    </div>
-                  ) : undefined
-                }
-              />
+              >
+                {exportTaskState.desc}
+                {exportTaskState.status === "finished" && (
+                  <div className={styles.copyAction}>
+                    <CopyToClipboard text={exportHypothesisUrl.current}>
+                      <CopyButton
+                        className={styles.copyButton}
+                        feedback="Copied!"
+                        feedbackTimeout={3000}
+                        iconDescription="Copy URL to clipboard"
+                      />
+                    </CopyToClipboard>
+                  </div>
+                )}
+              </InlineNotification>
             )}
             {createTitleAnnotationState.status === "error" && (
               <InlineNotification
                 hideCloseButton
                 lowContrast
                 kind={getTaskNotificationKind(createTitleAnnotationState)}
-                subtitle={createTitleAnnotationState.desc}
                 title={getTaskStatus(createTitleAnnotationState)}
-              />
+              >
+                {createTitleAnnotationState.desc}
+              </InlineNotification>
             )}
           </div>
           <div className={formStyles.item}>
@@ -326,7 +326,7 @@ const AtiExportAnnotations: FC<AtiExportAnnotationstProps> = ({
               value={`${appUrl}/ati/${dataset.id}/${AtiTab.manuscript.id}`}
               type="url"
               labelText="Source URL"
-              size="xl"
+              size="lg"
             />
           </div>
           <div className={formStyles.item}>
@@ -357,7 +357,7 @@ const AtiExportAnnotations: FC<AtiExportAnnotationstProps> = ({
               helperText="Enter the URL of where you want to export the annotations"
               required={true}
               aria-required={true}
-              size="xl"
+              size="lg"
             />
           </div>
           <div className={formStyles.item}>
@@ -410,7 +410,7 @@ const AtiExportAnnotations: FC<AtiExportAnnotationstProps> = ({
           <Button
             className={formStyles.submitBtn}
             type="submit"
-            renderIcon={Export16}
+            renderIcon={Export}
             disabled={
               exportTaskState.status === "active" || createTitleAnnotationState.status === "active"
             }
@@ -429,9 +429,10 @@ const AtiExportAnnotations: FC<AtiExportAnnotationstProps> = ({
                 hideCloseButton
                 lowContrast
                 kind={getTaskNotificationKind(deleteTaskState)}
-                subtitle={<span>{deleteTaskState.desc}</span>}
                 title={getTaskStatus(deleteTaskState)}
-              />
+              >
+                {deleteTaskState.desc}
+              </InlineNotification>
             </div>
           )}
           <div className={formStyles.item}>
@@ -443,7 +444,7 @@ const AtiExportAnnotations: FC<AtiExportAnnotationstProps> = ({
               value={`${appUrl}/ati/${dataset.id}/${AtiTab.manuscript.id}`}
               type="url"
               labelText="Source URL"
-              size="xl"
+              size="lg"
             />
           </div>
           <div className={formStyles.item}>
@@ -474,7 +475,7 @@ const AtiExportAnnotations: FC<AtiExportAnnotationstProps> = ({
             kind="danger"
             className={formStyles.submitBtn}
             type="submit"
-            renderIcon={TrashCan16}
+            renderIcon={TrashCan}
             disabled={deleteTaskState.status === "active"}
           >
             Delete annotations

features/ati/AtiManuscript/AtiManuscript.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from "@storybook/react"
+import { Story, Meta } from "@storybook/nextjs"
 
 import AtiManuscript, { AtiManuscriptProps } from "."
 

features/ati/AtiManuscript/DatasourceModal/DatasourceModal.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from "@storybook/react"
+import { Story, Meta } from "@storybook/nextjs"
 
 import DatasourceModal, { DatasourceModalProps } from "."