diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 1ff94f7..0000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["next/babel"] -} diff --git a/.eslintrc.json b/.eslintrc.json index 2a47bc3..d24b734 100644 --- a/.eslintrc.json +++ b/.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, diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index 319c2eb..ef36b4a 100644 --- a/.github/workflows/build-docs.yml +++ b/.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 diff --git a/.github/workflows/build-main.yml b/.github/workflows/build-main.yml index 6e289de..b956112 100644 --- a/.github/workflows/build-main.yml +++ b/.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 diff --git a/.github/workflows/test-lint-and-build.yml b/.github/workflows/test-lint-and-build.yml index 9c74856..b3ced3e 100644 --- a/.github/workflows/test-lint-and-build.yml +++ b/.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 diff --git a/.gitignore b/.gitignore index fd7ae29..89df4a5 100644 --- a/.gitignore +++ b/.gitignore @@ -38,3 +38,7 @@ storybook-static # vscode .vscode + +# JetBrains IDE +.idea +.junie diff --git a/.prettierignore b/.prettierignore index 5619abb..0e94614 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,3 +5,5 @@ package-lock.json public .github storybook-static +next-env.d.ts +tsconfig.tsbuildinfo diff --git a/.storybook/annoRepTheme.js b/.storybook/annoRepTheme.js index 29e78ba..f98e8e5 100644 --- a/.storybook/annoRepTheme.js +++ b/.storybook/annoRepTheme.js @@ -1,4 +1,4 @@ -import { create } from "@storybook/theming" +import { create } from "storybook/theming" export default create({ base: "light", diff --git a/.storybook/main.js b/.storybook/main.js index 28138a8..668ce93 100644 --- a/.storybook/main.js +++ b/.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"], } diff --git a/.storybook/manager.js b/.storybook/manager.js index c47ceb1..3ed5577 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,4 +1,4 @@ -import { addons } from "@storybook/addons" +import { addons } from "storybook/manager-api" import theme from "./annoRepTheme" addons.setConfig({ diff --git a/.storybook/preview.js b/.storybook/preview.js index e85be82..3bbccdc 100644 --- a/.storybook/preview.js +++ b/.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].*" }, diff --git a/Dockerfile b/Dockerfile index 104afa9..c74b22e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,5 @@ # 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 @@ -7,7 +7,7 @@ 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 diff --git a/constants/ati.ts b/constants/ati.ts index c2fbf4c..d61ebdb 100644 --- a/constants/ati.ts +++ b/constants/ati.ts @@ -15,4 +15,4 @@ export const tabs = [ ] export const ATI_HEADER_HTML = - '
' + 'Annotation for Transparent Inquiry (ATI) at a Glance
' diff --git a/constants/dataverse.ts b/constants/dataverse.ts index 3c50b92..c8155ca 100644 --- a/constants/dataverse.ts +++ b/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 = { +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", diff --git a/features/ati/AtiExportAnnotations/AtiExportAnnotations.stories.tsx b/features/ati/AtiExportAnnotations/AtiExportAnnotations.stories.tsx index 4020622..a2fb42a 100644 --- a/features/ati/AtiExportAnnotations/AtiExportAnnotations.stories.tsx +++ b/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 "." diff --git a/features/ati/AtiExportAnnotations/DeleteAnnotationsModal/DeleteAnnnotationsModal.stories.tsx b/features/ati/AtiExportAnnotations/DeleteAnnotationsModal/DeleteAnnnotationsModal.stories.tsx index 2ff2c06..9e93bc1 100644 --- a/features/ati/AtiExportAnnotations/DeleteAnnotationsModal/DeleteAnnnotationsModal.stories.tsx +++ b/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 "." diff --git a/features/ati/AtiExportAnnotations/DeleteAnnotationsModal/index.tsx b/features/ati/AtiExportAnnotations/DeleteAnnotationsModal/index.tsx index 3d839bf..cfb8d91 100644 --- a/features/ati/AtiExportAnnotations/DeleteAnnotationsModal/index.tsx +++ b/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 = ({ size="xs" aria-label="Delete annotations confirmation" > - - - Are you sure you want to delete annotations from this manuscript? - + + Are you sure you want to delete annotations from this manuscript? + > + {null} + ) } diff --git a/features/ati/AtiExportAnnotations/index.tsx b/features/ati/AtiExportAnnotations/index.tsx index ee09526..ea45bcd 100644 --- a/features/ati/AtiExportAnnotations/index.tsx +++ b/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 = ({ hideCloseButton lowContrast kind={getTaskNotificationKind(exportTaskState)} - subtitle={exportTaskState.desc} title={getTaskStatus(exportTaskState)} - actions={ - exportTaskState.status === "finished" ? ( -
- - - -
- ) : undefined - } - /> + > + {exportTaskState.desc} + {exportTaskState.status === "finished" && ( +
+ + + +
+ )} + )} {createTitleAnnotationState.status === "error" && ( + > + {createTitleAnnotationState.desc} + )}
@@ -326,7 +326,7 @@ const AtiExportAnnotations: FC = ({ value={`${appUrl}/ati/${dataset.id}/${AtiTab.manuscript.id}`} type="url" labelText="Source URL" - size="xl" + size="lg" />
@@ -357,7 +357,7 @@ const AtiExportAnnotations: FC = ({ helperText="Enter the URL of where you want to export the annotations" required={true} aria-required={true} - size="xl" + size="lg" />
@@ -410,7 +410,7 @@ const AtiExportAnnotations: FC = ({
)}
@@ -443,7 +444,7 @@ const AtiExportAnnotations: FC = ({ value={`${appUrl}/ati/${dataset.id}/${AtiTab.manuscript.id}`} type="url" labelText="Source URL" - size="xl" + size="lg" />
@@ -474,7 +475,7 @@ const AtiExportAnnotations: FC = ({ kind="danger" className={formStyles.submitBtn} type="submit" - renderIcon={TrashCan16} + renderIcon={TrashCan} disabled={deleteTaskState.status === "active"} > Delete annotations diff --git a/features/ati/AtiManuscript/AtiManuscript.stories.tsx b/features/ati/AtiManuscript/AtiManuscript.stories.tsx index 33f073e..7aa2a80 100644 --- a/features/ati/AtiManuscript/AtiManuscript.stories.tsx +++ b/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 "." diff --git a/features/ati/AtiManuscript/DatasourceModal/DatasourceModal.stories.tsx b/features/ati/AtiManuscript/DatasourceModal/DatasourceModal.stories.tsx index 18807fb..a917068 100644 --- a/features/ati/AtiManuscript/DatasourceModal/DatasourceModal.stories.tsx +++ b/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 "." diff --git a/features/ati/AtiManuscript/DatasourceModal/index.tsx b/features/ati/AtiManuscript/DatasourceModal/index.tsx index 9c1185b..d7daa5d 100644 --- a/features/ati/AtiManuscript/DatasourceModal/index.tsx +++ b/features/ati/AtiManuscript/DatasourceModal/index.tsx @@ -1,7 +1,7 @@ import React, { FC, useState } from "react" import axios from "axios" -import { Renew20 } from "@carbon/icons-react" +import { Renew } from "@carbon/react/icons" import { ComposedModal, ModalBody, @@ -11,7 +11,7 @@ import { CopyButton, Button, InlineLoading, -} from "carbon-components-react" +} from "@carbon/react" import CopyToClipboard from "react-copy-to-clipboard" import useTask, { TaskActionType } from "../../../../hooks/useTask" @@ -73,16 +73,11 @@ const DatasourceModal: FC = ({ onClose={closeModal} > - +
= ({ iconDescription="Refresh" tooltipPosition="bottom" tooltipAlignment="center" - renderIcon={Renew20} + renderIcon={Renew} onClick={() => handleRefreshDatasources()} /> )} diff --git a/features/ati/AtiManuscript/DeleteManuscriptModal/DeleteManuscriptModal.stories.tsx b/features/ati/AtiManuscript/DeleteManuscriptModal/DeleteManuscriptModal.stories.tsx index 18fda3c..82dad1f 100644 --- a/features/ati/AtiManuscript/DeleteManuscriptModal/DeleteManuscriptModal.stories.tsx +++ b/features/ati/AtiManuscript/DeleteManuscriptModal/DeleteManuscriptModal.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import DeleteManuscriptModal, { DeleteManuscriptModalProps } from "." diff --git a/features/ati/AtiManuscript/DeleteManuscriptModal/index.tsx b/features/ati/AtiManuscript/DeleteManuscriptModal/index.tsx index d26432d..06d8db4 100644 --- a/features/ati/AtiManuscript/DeleteManuscriptModal/index.tsx +++ b/features/ati/AtiManuscript/DeleteManuscriptModal/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 DeleteManuscriptModalProps { /** The manuscript name */ @@ -27,21 +27,16 @@ const DeleteManuscriptModal: FC = ({ size="xs" aria-label="Delete manuscript confirmation" > - - - Are you sure you want to delete this manuscript? - + + Are you sure you want to delete this manuscript? + > + {null} + ) } diff --git a/features/ati/AtiManuscript/IngestPdf/IngestPdf.stories.tsx b/features/ati/AtiManuscript/IngestPdf/IngestPdf.stories.tsx index 96ff063..c65dbfb 100644 --- a/features/ati/AtiManuscript/IngestPdf/IngestPdf.stories.tsx +++ b/features/ati/AtiManuscript/IngestPdf/IngestPdf.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import IngestPdf, { IngestPdfProps } from "." diff --git a/features/ati/AtiManuscript/IngestPdf/index.tsx b/features/ati/AtiManuscript/IngestPdf/index.tsx index d7fc279..62600a7 100644 --- a/features/ati/AtiManuscript/IngestPdf/index.tsx +++ b/features/ati/AtiManuscript/IngestPdf/index.tsx @@ -1,6 +1,6 @@ import { FC, useState } from "react" -import { InlineNotification } from "carbon-components-react" +import { InlineNotification } from "@carbon/react" import DOMPurify from "isomorphic-dompurify" import { Document, Page, pdfjs } from "react-pdf" @@ -38,13 +38,9 @@ const IngestPdf: FC = ({ pdf }) => { file={`data:application/pdf;base64,${pdf}`} onLoadSuccess={onDocumentLoadSuccess} loading={ - Loading manuscript...} - title="Status" - /> + + Loading manuscript... + } > {Array.from({ length: numPages }, (_, index) => ( diff --git a/features/ati/AtiManuscript/UploadManuscriptModal/UploadManuscriptModal.stories.tsx b/features/ati/AtiManuscript/UploadManuscriptModal/UploadManuscriptModal.stories.tsx index 1ca6b48..2a5296e 100644 --- a/features/ati/AtiManuscript/UploadManuscriptModal/UploadManuscriptModal.stories.tsx +++ b/features/ati/AtiManuscript/UploadManuscriptModal/UploadManuscriptModal.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import UploadManuscriptModal, { UploadManuscriptModalProps } from "." diff --git a/features/ati/AtiManuscript/UploadManuscriptModal/index.tsx b/features/ati/AtiManuscript/UploadManuscriptModal/index.tsx index 2572ccf..dc4be9c 100644 --- a/features/ati/AtiManuscript/UploadManuscriptModal/index.tsx +++ b/features/ati/AtiManuscript/UploadManuscriptModal/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 UploadManuscriptModalProps { /** The manuscript name */ @@ -31,23 +31,23 @@ const UploadManuscriptModal: FC = ({ aria-label="Upload manuscript confirmation" > - + {uploadAnnotations ? `All your current annotations will be deleted and replaced with the annotations found in ${manuscriptName}.` : `No annotations from ${manuscriptName} will be uploaded.`} + > + {null} + ) } diff --git a/features/ati/AtiManuscript/index.tsx b/features/ati/AtiManuscript/index.tsx index d8905f3..2e0cbd9 100644 --- a/features/ati/AtiManuscript/index.tsx +++ b/features/ati/AtiManuscript/index.tsx @@ -1,8 +1,8 @@ -import { FC, FormEventHandler, useReducer, ChangeEvent } from "react" +import { FC, FormEventHandler, useReducer } from "react" -import { Button, Form, FileUploader, InlineNotification, Toggle } from "carbon-components-react" +import { Button, Form, FileUploader, InlineNotification, Toggle } from "@carbon/react" import FormData from "form-data" -import { DocumentAdd20, TrashCan20, Upload16 } from "@carbon/icons-react" +import { DocumentAdd, TrashCan, Upload } from "@carbon/react/icons" import { useRouter } from "next/router" import { axiosClient } from "../../app" @@ -91,11 +91,15 @@ const AtiManuscript: FC = ({ }) } - const onChangeFileUpload = (e: ChangeEvent) => { - if (e.target.files && e.target.files.length > 0) { + const onChangeFileUpload = ( + _e: React.SyntheticEvent, + data?: { addedFiles: any[] } + ) => { + const file = data?.addedFiles?.[0]?.file + if (file) { uploadManuscriptTaskDispatch({ type: UploadManuscriptActionType.SAVE_FILE_SELECTION, - payload: e.target.files[0], + payload: file, }) } else { uploadManuscriptTaskDispatch({ type: UploadManuscriptActionType.CLEAR_FILE_SELECTION }) @@ -238,21 +242,11 @@ const AtiManuscript: FC = ({
- {manuscript.id && ( - )} @@ -262,21 +256,18 @@ const AtiManuscript: FC = ({ hideCloseButton lowContrast kind={getTaskNotificationKind(taskState)} - subtitle={{taskState.desc}} title={getTaskStatus(taskState)} - /> + > + {taskState.desc} + )} {manuscript.id ? ( manuscript.ingest ? ( ) : ( - Ingest PDF of manuscript not found.} - title="Error!" - /> + + Ingest PDF of manuscript not found. + ) ) : (
@@ -311,7 +302,7 @@ const AtiManuscript: FC = ({ name="uploadAnnotations" />
- diff --git a/features/ati/AtiProject/AtiProject.stories.tsx b/features/ati/AtiProject/AtiProject.stories.tsx index 5596dd0..d779295 100644 --- a/features/ati/AtiProject/AtiProject.stories.tsx +++ b/features/ati/AtiProject/AtiProject.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import AtiProject, { AtiProjectProps } from "." diff --git a/features/ati/AtiProject/index.tsx b/features/ati/AtiProject/index.tsx index 6dd80bf..b461927 100644 --- a/features/ati/AtiProject/index.tsx +++ b/features/ati/AtiProject/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react" -import { Link, Tag } from "carbon-components-react" +import { Link, Tag } from "@carbon/react" import NextLink from "next/link" import DOMPurify from "isomorphic-dompurify" @@ -50,7 +50,7 @@ const AtiProject: FC = ({

- + {name} diff --git a/features/ati/AtiProjects/AtiProjects.stories.tsx b/features/ati/AtiProjects/AtiProjects.stories.tsx index b62e9d2..ef16f05 100644 --- a/features/ati/AtiProjects/AtiProjects.stories.tsx +++ b/features/ati/AtiProjects/AtiProjects.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import AtiProjects, { AtiProjectsProps } from "." diff --git a/features/ati/AtiProjects/index.tsx b/features/ati/AtiProjects/index.tsx index 9734db4..f422674 100644 --- a/features/ati/AtiProjects/index.tsx +++ b/features/ati/AtiProjects/index.tsx @@ -1,13 +1,6 @@ import React, { FC, FormEventHandler } from "react" -import { - PaginationNav, - Search, - Form, - FormGroup, - Checkbox, - InlineLoading, -} from "carbon-components-react" +import { PaginationNav, Search, Form, FormGroup, Checkbox, InlineLoading } from "@carbon/react" import AtiProject from "../AtiProject" import useSearch from "./useSearch" @@ -74,14 +67,20 @@ const AtiProjects: FC = ({ const onSearch: FormEventHandler = (e) => { e.preventDefault() const target = e.target as typeof e.target & { - atiSearch: { value: string } + elements: { "ati-search": { value: string } } } - dispatch({ type: SearchActionType.UPDATE_Q, payload: target.atiSearch.value.trim() }) + dispatch({ + type: SearchActionType.UPDATE_Q, + payload: target.elements["ati-search"].value.trim(), + }) } - const onFacetFieldChange = (checked: boolean, id: string) => + const onFacetFieldChange = ( + _evt: React.ChangeEvent, + data: { checked: boolean; id: string } + ) => dispatch({ type: SearchActionType.UPDATE_SELECTED_PUBLICATION_STATUS, - payload: { id, checked }, + payload: { id: data.id, checked: data.checked }, }) const totalPages = getTotalPages(state) @@ -94,11 +93,11 @@ const AtiProjects: FC = ({
diff --git a/features/ati/AtiProjects/state.ts b/features/ati/AtiProjects/state.ts index f7faca9..579be97 100644 --- a/features/ati/AtiProjects/state.ts +++ b/features/ati/AtiProjects/state.ts @@ -1,4 +1,4 @@ -import { InlineLoadingStatus } from "carbon-components-react" +export type InlineLoadingStatus = "inactive" | "active" | "finished" | "error" import { IMyDataSearch } from "../../../types/api" import { IAtiProject } from "../../../types/ati" diff --git a/features/ati/AtiSettings/AtiSettings.stories.tsx b/features/ati/AtiSettings/AtiSettings.stories.tsx index ebe4ee4..f3eb86e 100644 --- a/features/ati/AtiSettings/AtiSettings.stories.tsx +++ b/features/ati/AtiSettings/AtiSettings.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import AtiSettings, { AtiSettingsProps } from "." diff --git a/features/ati/AtiSettings/DeleteAtiModal/DeleteAtiModal.stories.tsx b/features/ati/AtiSettings/DeleteAtiModal/DeleteAtiModal.stories.tsx index 1e13159..872b738 100644 --- a/features/ati/AtiSettings/DeleteAtiModal/DeleteAtiModal.stories.tsx +++ b/features/ati/AtiSettings/DeleteAtiModal/DeleteAtiModal.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import DeleteAtiModal, { DeleteAtiModalProps } from "." diff --git a/features/ati/AtiSettings/DeleteAtiModal/index.tsx b/features/ati/AtiSettings/DeleteAtiModal/index.tsx index 9e0ac0f..2c38675 100644 --- a/features/ati/AtiSettings/DeleteAtiModal/index.tsx +++ b/features/ati/AtiSettings/DeleteAtiModal/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 DeleteAtiModalProps { /** The ati project name */ @@ -27,21 +27,16 @@ const DeleteAtiModal: FC = ({ size="xs" aria-label="Delete ATI project confirmation" > - - - Are you sure you want to delete this project? - + + Are you sure you want to delete this project? + > + {null} + ) } diff --git a/features/ati/AtiSettings/index.tsx b/features/ati/AtiSettings/index.tsx index 10f40bf..d2b26ff 100644 --- a/features/ati/AtiSettings/index.tsx +++ b/features/ati/AtiSettings/index.tsx @@ -1,7 +1,7 @@ import { FC, FormEventHandler } from "react" -import { TrashCan16 } from "@carbon/icons-react" -import { Button, Form, InlineNotification } from "carbon-components-react" +import { TrashCan } from "@carbon/react/icons" +import { Button, Form, InlineNotification } from "@carbon/react" import { useRouter } from "next/router" import { axiosClient } from "../../app" @@ -105,12 +105,13 @@ const AtiSettings: FC = ({ dataset, manuscript }) => { hideCloseButton lowContrast kind={getTaskNotificationKind(taskState)} - subtitle={{taskState.desc}} title={getTaskStatus(taskState)} - /> + > + {taskState.desc} +
)} - diff --git a/features/ati/AtiSummary/AtiSummary.stories.tsx b/features/ati/AtiSummary/AtiSummary.stories.tsx index 8d0b4db..9f1cc22 100644 --- a/features/ati/AtiSummary/AtiSummary.stories.tsx +++ b/features/ati/AtiSummary/AtiSummary.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import AtiSummary, { AtiSummaryProps } from "." diff --git a/features/ati/AtiSummary/index.tsx b/features/ati/AtiSummary/index.tsx index 115bd2f..4eb9907 100644 --- a/features/ati/AtiSummary/index.tsx +++ b/features/ati/AtiSummary/index.tsx @@ -1,13 +1,6 @@ import { FC } from "react" -import { - UnorderedList, - ListItem, - Link, - Tag, - Button, - InlineNotification, -} from "carbon-components-react" -import { Launch16 } from "@carbon/icons-react" +import { UnorderedList, ListItem, Link, Tag, Button, InlineNotification } from "@carbon/react" +import { Launch } from "@carbon/react/icons" import { useRouter } from "next/router" import { axiosClient } from "../../app" @@ -111,9 +104,10 @@ const AtiSummary: FC = ({ hideCloseButton lowContrast kind={getTaskNotificationKind(taskState)} - subtitle={{taskState.desc}} title={getTaskStatus(taskState)} - /> + > + {taskState.desc} + )}

@@ -122,7 +116,7 @@ const AtiSummary: FC = ({ target="_blank" rel="noopener noreferrer" size="lg" - renderIcon={Launch16} + renderIcon={Launch} > {title} diff --git a/features/ati/AtiTab/AtiTab.stories.tsx b/features/ati/AtiTab/AtiTab.stories.tsx index 36601d8..df9489f 100644 --- a/features/ati/AtiTab/AtiTab.stories.tsx +++ b/features/ati/AtiTab/AtiTab.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import AtiTab, { AtiTabProps } from "." diff --git a/features/ati/AtiTab/index.tsx b/features/ati/AtiTab/index.tsx index 59a9fc0..2a6415b 100644 --- a/features/ati/AtiTab/index.tsx +++ b/features/ati/AtiTab/index.tsx @@ -1,6 +1,6 @@ import { FC, ReactNode } from "react" -import { InlineNotification, Tabs, Tab } from "carbon-components-react" +import { InlineNotification, Tabs, Tab, TabList, TabPanels, TabPanel } from "@carbon/react" import Layout from "../../components/Layout" @@ -34,36 +34,34 @@ const AtiTab: FC = ({ dataset, children, user, selectedTab }: AtiTa hideCloseButton lowContrast kind={dataset === null ? "error" : "info"} - subtitle={ - - {dataset === null ? "You don't have access to this ATI project." : "Please login."} - - } title={dataset === null ? "Error!" : "Unauthorized!"} - /> + > + {dataset === null ? "You don't have access to this ATI project." : "Please login."} + ) } else { content = ( <>

{dataset?.title}

- - - {selectedTab === AtiTabs.summary.id && <>{children}} - - - {selectedTab === AtiTabs.manuscript.id && <>{children}} - - - {selectedTab === AtiTabs.exportAnnotations.id && <>{children}} - - - {selectedTab === AtiTabs.settings.id && <>{children}} - - +
+ onSelectionChange(selectedIndex)} + > + + {AtiTabs.summary.label} + {AtiTabs.manuscript.label} + {AtiTabs.exportAnnotations.label} + {AtiTabs.settings.label} + + + {selectedTab === AtiTabs.summary.id && <>{children}} + {selectedTab === AtiTabs.manuscript.id && <>{children}} + {selectedTab === AtiTabs.exportAnnotations.id && <>{children}} + {selectedTab === AtiTabs.settings.id && <>{children}} + + +
) } diff --git a/features/ati/NewAtiProjectForm/NewAtiProjectForm.stories.tsx b/features/ati/NewAtiProjectForm/NewAtiProjectForm.stories.tsx index 9d1c443..b678d6a 100644 --- a/features/ati/NewAtiProjectForm/NewAtiProjectForm.stories.tsx +++ b/features/ati/NewAtiProjectForm/NewAtiProjectForm.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import NewAtiProjectForm, { NewAtiProjectFormProps } from "." diff --git a/features/ati/NewAtiProjectForm/index.tsx b/features/ati/NewAtiProjectForm/index.tsx index 112f424..f69e14f 100644 --- a/features/ati/NewAtiProjectForm/index.tsx +++ b/features/ati/NewAtiProjectForm/index.tsx @@ -1,15 +1,7 @@ -import React, { - FC, - FormEventHandler, - useState, - ChangeEvent, - useCallback, - useMemo, - useEffect, -} from "react" +import React, { FC, FormEventHandler, useState, useCallback, useMemo, useEffect } from "react" import FormData from "form-data" -import { Add16, OverflowMenuVertical24 } from "@carbon/icons-react" +import { Add, OverflowMenuVertical } from "@carbon/react/icons" import { Button, Form, @@ -19,7 +11,7 @@ import { InlineLoading, OrderedList, ListItem, -} from "carbon-components-react" +} from "@carbon/react" import { debounce } from "lodash" import { useRouter } from "next/router" @@ -104,9 +96,12 @@ const NewAtiProjectForm: FC = ({ setSelectedDataset(data.selectedItem) } - const [selectedManuscript, setSelectedManuscript] = useState(null) - const onChangeFileUpload = (e: ChangeEvent) => { - setSelectedManuscript(e.target.files) + const [selectedManuscript, setSelectedManuscript] = useState(null) + const onChangeFileUpload = ( + _e: React.SyntheticEvent, + data?: { addedFiles: any[] } + ) => { + setSelectedManuscript(data?.addedFiles.map((f) => f.file) || []) } const onClearFile = () => { setSelectedManuscript(null) @@ -199,13 +194,14 @@ const NewAtiProjectForm: FC = ({ hideCloseButton lowContrast kind={getTaskNotificationKind(taskState)} - subtitle={{taskState.desc}} title={getTaskStatus(taskState)} - /> + > + {taskState.desc} +

)}
- + 1. QDR data project
@@ -254,12 +250,12 @@ const NewAtiProjectForm: FC = ({ tooltipAlignment="end" onClick={onShowMore} > - + )}
-

+

Don't have a QDR data project?

@@ -300,7 +296,7 @@ const NewAtiProjectForm: FC = ({ onChange={onChangeFileUpload} />
-
- diff --git a/features/components/AppBar/AppBar.stories.tsx b/features/components/AppBar/AppBar.stories.tsx index bbdfc59..60b3944 100644 --- a/features/components/AppBar/AppBar.stories.tsx +++ b/features/components/AppBar/AppBar.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import AppBar, { AppBarProps } from "." diff --git a/features/components/AppBar/index.tsx b/features/components/AppBar/index.tsx index 1d83bac..3d4fae0 100644 --- a/features/components/AppBar/index.tsx +++ b/features/components/AppBar/index.tsx @@ -1,8 +1,8 @@ import { FC } from "react" -import { User24, Login24, Information24 } from "@carbon/icons-react" -import { Button, OverflowMenu, OverflowMenuItem } from "carbon-components-react" -import { signOut } from "next-auth/client" +import { User, Login, Information } from "@carbon/react/icons" +import { Button, OverflowMenu, OverflowMenuItem } from "@carbon/react" +import { signOut } from "next-auth/react" import { IAnnoRepUser } from "../../../types/auth" @@ -34,12 +34,12 @@ const AppBar: FC = ({ user }) => { as="a" href="/guide" > - + {user ? ( = ({ user }) => { requireTitle itemText={user.dataverse.name} href={user.dataverse.link} - target="_blank" - rel="noopener noreferrer" + {...({ target: "_blank", rel: "noopener noreferrer" } as any)} /> @@ -73,7 +71,7 @@ const AppBar: FC = ({ user }) => { as="a" href="/auth/login" > - + )}

diff --git a/features/components/AppDesc/AppDesc.stories.tsx b/features/components/AppDesc/AppDesc.stories.tsx index 0cac050..c7bdda9 100644 --- a/features/components/AppDesc/AppDesc.stories.tsx +++ b/features/components/AppDesc/AppDesc.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import AppDesc, { AppDescProps } from "." diff --git a/features/components/AppDesc/index.tsx b/features/components/AppDesc/index.tsx index 7f38046..cbceedb 100644 --- a/features/components/AppDesc/index.tsx +++ b/features/components/AppDesc/index.tsx @@ -1,6 +1,6 @@ import { FC } from "react" -import { ArrowRight16, Launch16 } from "@carbon/icons-react" -import { Button } from "carbon-components-react" +import { ArrowRight, Launch } from "@carbon/react/icons" +import { Button } from "@carbon/react" import styles from "./AppDesc.module.css" @@ -23,7 +23,7 @@ const AppDesc: FC = ({ isLoggedIn }) => { target="_blank" rel="noopener noreferrer" kind="tertiary" - renderIcon={Launch16} + renderIcon={Launch} > Learn more about ATI @@ -31,7 +31,7 @@ const AppDesc: FC = ({ isLoggedIn }) => { as="a" href={isLoggedIn ? "/new" : "/auth/login"} kind="primary" - renderIcon={ArrowRight16} + renderIcon={ArrowRight} > {isLoggedIn ? "Create a new ATI project" : "Login to create a new ATI project"} diff --git a/features/components/AppGuide/AppGuide.stories.tsx b/features/components/AppGuide/AppGuide.stories.tsx index 93438a2..25ed571 100644 --- a/features/components/AppGuide/AppGuide.stories.tsx +++ b/features/components/AppGuide/AppGuide.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import AppGuide, { AppGuideProps } from "." diff --git a/features/components/AppGuide/index.tsx b/features/components/AppGuide/index.tsx index aff5afd..73ff94b 100644 --- a/features/components/AppGuide/index.tsx +++ b/features/components/AppGuide/index.tsx @@ -1,7 +1,7 @@ import { FC } from "react" -import { Launch16 } from "@carbon/icons-react" -import { Link } from "carbon-components-react" +import { Launch } from "@carbon/react/icons" +import { Link } from "@carbon/react" import AppDesc from "../AppDesc" @@ -59,7 +59,7 @@ const AppGuide: FC = ({ isLoggedIn }) => { href="https://web.hypothes.is/help/annotation-basics" target="_blank" rel="noopener noreferrer" - renderIcon={Launch16} + renderIcon={Launch} > Hypothes.is annotation basics diff --git a/features/components/HomePageTitle/HomePageTitle.stories.tsx b/features/components/HomePageTitle/HomePageTitle.stories.tsx index 80db694..301b58c 100644 --- a/features/components/HomePageTitle/HomePageTitle.stories.tsx +++ b/features/components/HomePageTitle/HomePageTitle.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from "@storybook/react" +import { Story, Meta } from "@storybook/nextjs" import HomePageTitle from "." diff --git a/features/components/HomePageTitle/index.tsx b/features/components/HomePageTitle/index.tsx index 806278d..011c904 100644 --- a/features/components/HomePageTitle/index.tsx +++ b/features/components/HomePageTitle/index.tsx @@ -2,8 +2,8 @@ import { FC } from "react" import Link from "next/link" -import { Add16 } from "@carbon/icons-react" -import { Button } from "carbon-components-react" +import { Add } from "@carbon/react/icons" +import { Button } from "@carbon/react" import styles from "./HomePageTitle.module.css" @@ -15,7 +15,7 @@ const HomePageTitle: FC = () => { ATI Projects -