chore: upgrade nextjs to latest version 14 (#312) (#567)

* chore: updated node and storybook (#312) * chore: updated storybook (#312) * wip * fix: updated useRequestFileLocation hook to handle react 18 in dev mode rerenders (#312) * chore: udpated axios (#312) * chore: typescript 4.6.4 (#312) * chore: removed unwanted packages (#312) * chore: updated typescript (#312) * chore: reverted typescript to v4.6.4 (#312) * fix: storybook (#312) --------- Co-authored-by: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
clevercanary · Feb 26, 2024 · 1965ae4 · 1965ae4
1 parent 84e4537
commit 1965ae4
Show file tree

Hide file tree

Showing 24 changed files with 19,409 additions and 26,022 deletions.
diff --git a/packages/data-explorer-ui/.storybook/preview.js b/packages/data-explorer-ui/.storybook/preview.js
@@ -1,8 +1,8 @@
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import { ThemeProvider as Emotion10ThemeProvider } from "emotion-theming";
-import { RouterContext } from "next/dist/shared/lib/router-context";
-import { useConfig } from "../src//hooks/useConfig";
+import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtime";
+import { useConfig } from "../src/hooks/useConfig";
 import "../src/index";
 import { createAppTheme } from "../src/theme/theme";
 

diff --git a/packages/data-explorer-ui/package-lock.json b/packages/data-explorer-ui/package-lock.json
diff --git a/packages/data-explorer-ui/package.json b/packages/data-explorer-ui/package.json
@@ -21,39 +21,41 @@
   "homepage": "https://github.com/clevercanary/data-explorer/tree/main/packages/data-explorer-ui#readme",
   "main": "lib/index.js",
   "devDependencies": {
-    "@next/eslint-plugin-next": "^13.1.6",
-    "@storybook/addon-actions": "^7.0.7",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-interactions": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/addon-mdx-gfm": "^7.0.7",
-    "@storybook/nextjs": "^7.0.7",
-    "@storybook/react": "^7.0.7",
-    "@storybook/testing-library": "^0.1.0",
+    "@next/eslint-plugin-next": "^14.1.0",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-mdx-gfm": "^7.6.17",
+    "@storybook/nextjs": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/types": "^7.6.17",
     "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.15",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-window": "^1.8.5",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "eslint": "^8.33.0",
-    "eslint-config-next": "^13.1.6",
+    "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-jsdoc": "^39.7.4",
+    "eslint-plugin-jsdoc": "^48.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.18.0",
     "eslint-plugin-sort-destructure-keys": "^1.4.0",
-    "eslint-plugin-storybook": "^0.6.11",
-    "eslint-plugin-typescript-sort-keys": "^2.1.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-typescript-sort-keys": "^2.3.0",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
     "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
-    "storybook": "^7.0.7",
+    "storybook": "^7.6.17",
     "ts-jest": "^29.0.5",
-    "typescript": "^4.9.4"
+    "typescript": "^4.6.4"
   },
   "peerDependencies": {
     "@emotion/react": "11.11.1",
@@ -62,17 +64,20 @@
     "@mui/material": "5.14.1",
     "@tanstack/react-table": "8.5.11",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
-    "axios": "1.3.5",
+    "axios": "^1.6.7",
     "copy-to-clipboard": "3.3.1",
     "isomorphic-dompurify": "0.24.0",
-    "next": "12.3.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next": "^14.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-gtm-module": "2.0.11",
     "react-idle-timer": "^5.6.2",
     "react-window": "1.8.9",
     "uuid": "8.3.2",
     "validate.js": "^0.13.1"
+  },
+  "engines": {
+    "node": "20.10.0"
   }
 }
diff --git a/packages/data-explorer-ui/src/components/Error/error.tsx b/packages/data-explorer-ui/src/components/Error/error.tsx
@@ -81,7 +81,7 @@ export const Error = ({
           </SectionContent>
           {rootPath && (
             <SectionActions>
-              <Link href={rootPath} passHref>
+              <Link href={rootPath} legacyBehavior passHref>
                 <ButtonPrimary
                   onClick={handleToHomePageClicked}
                   href="passHref"

diff --git a/packages/data-explorer-ui/src/components/Export/components/ExportMethod/exportMethod.tsx b/packages/data-explorer-ui/src/components/Export/components/ExportMethod/exportMethod.tsx
@@ -39,7 +39,7 @@ export const ExportMethod = ({
         <SectionActions>
           <Tooltip arrow title={message}>
             <span>
-              <Link href={route} passHref>
+              <Link href={route} legacyBehavior passHref>
                 <ExportButton disabled={disabled || !isAccessible}>
                   {buttonLabel}
                 </ExportButton>

diff --git a/...explorer-ui/src/components/Index/components/Hero/components/ExportButton/exportButton.tsx b/...explorer-ui/src/components/Index/components/Hero/components/ExportButton/exportButton.tsx
@@ -9,7 +9,7 @@ export const ExportButton = (): JSX.Element => {
   return (
     <Tooltip arrow title={message}>
       <span>
-        <Link href="/export" passHref>
+        <Link href="/export" legacyBehavior passHref>
           <Button disabled={disabled || isLoading} href="passHref">
             Export
           </Button>

diff --git a/packages/data-explorer-ui/src/components/Layout/components/Footer/footer.stories.tsx b/packages/data-explorer-ui/src/components/Layout/components/Footer/footer.stories.tsx
@@ -20,7 +20,7 @@ export default {
     layout: "fullscreen",
   },
   title: "Components/Layout/Footer",
-} satisfies Meta<typeof Footer>;
+} as Meta<typeof Footer>;
 
 type Story = StoryObj<typeof Footer>;
 

diff --git a/...ns/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.tsx b/...ns/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.tsx
@@ -13,7 +13,7 @@ export default {
   },
   component: AuthenticationMenu,
   title: "Components/Navigation/AuthenticationMenu",
-} satisfies Meta<typeof AuthenticationMenu>;
+} as Meta<typeof AuthenticationMenu>;
 
 const AuthenticationMenuTemplate: StoryFn<typeof AuthenticationMenu> = (
   args

diff --git a/...er-ui/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx b/...er-ui/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx
@@ -30,7 +30,7 @@ export const Logo = ({
     <StaticImage alt={alt} height={height} src={src} width={width} />
   );
   return isClientSideNavigation(link) ? (
-    <Link href={link} passHref>
+    <Link href={link} legacyBehavior passHref>
       <a className={className} href="passHref" rel="noopener" target={target}>
         {logo}
       </a>

diff --git a/packages/data-explorer-ui/src/components/Layout/components/Header/header.stories.tsx b/packages/data-explorer-ui/src/components/Layout/components/Header/header.stories.tsx
@@ -28,7 +28,7 @@ export default {
     layout: "fullscreen",
   },
   title: "Components/Layout/Header",
-} satisfies Meta<typeof Header>;
+} as Meta<typeof Header>;
 
 type Story = StoryObj<typeof Header>;
 

diff --git a/packages/data-explorer-ui/src/components/Layout/components/Nav/nav.tsx b/packages/data-explorer-ui/src/components/Layout/components/Nav/nav.tsx
@@ -22,7 +22,7 @@ export const Nav = ({ Hero, navigation }: NavProps): JSX.Element => {
         {navigation.map(({ active, label, url }, i) => {
           return (
             <ListItem key={`${label}${i}`}>
-              <Link href={url ?? ""} passHref>
+              <Link href={url ?? ""} legacyBehavior passHref>
                 <ListItemButton disabled={!url} selected={active}>
                   <ListItemText disableTypography primary={label} />
                 </ListItemButton>

diff --git a/packages/data-explorer-ui/src/components/Links/components/Link/link.tsx b/packages/data-explorer-ui/src/components/Links/components/Link/link.tsx
@@ -29,7 +29,7 @@ export const Link = ({
     <>
       {isClientSideNavigation(url) ? (
         <>
-          <NLink href={url} passHref>
+          <NLink href={url} legacyBehavior passHref>
             <MLink
               className={className}
               rel="noopener"

diff --git a/packages/data-explorer-ui/src/components/Project/components/Contacts/contacts.tsx b/packages/data-explorer-ui/src/components/Project/components/Contacts/contacts.tsx
@@ -19,7 +19,7 @@ export const Contacts = ({ contacts }: ContactsProps): JSX.Element => {
             <Typography variant="text-body-500-2lines">{name}</Typography>
             {institution && <span>{institution}</span>}
             {email && (
-              <Link href={`mailto:${email}`} passHref>
+              <Link href={`mailto:${email}`} legacyBehavior passHref>
                 <EmailLink>{email}</EmailLink>
               </Link>
             )}

diff --git a/...ata-explorer-ui/src/components/Project/components/DataReleasePolicy/dataReleasePolicy.tsx b/...ata-explorer-ui/src/components/Project/components/DataReleasePolicy/dataReleasePolicy.tsx
@@ -8,7 +8,11 @@ export const DataReleasePolicy = (): JSX.Element => {
     <CollapsableSection title="Data Access Policy">
       <Typography>
         For information regarding data sharing and data use, please see our{" "}
-        <Link href="https://anvilproject.org/faq/data-security/" passHref>
+        <Link
+          href="https://anvilproject.org/faq/data-security/"
+          legacyBehavior
+          passHref
+        >
           <PolicyLink target="_blank">Data Access Policy</PolicyLink>
         </Link>
         .

diff --git a/...omponents/Support/components/SupportRequest/components/SupportRequestForm/common/utils.ts b/...omponents/Support/components/SupportRequest/components/SupportRequestForm/common/utils.ts
@@ -85,7 +85,7 @@ export async function uploadAttachment<T extends File>(
  * @returns response.
  */
 async function fetchWithErrorRejection(
-  input: RequestInfo | URL,
+  input: string,
   options?: RequestInit
 ): Promise<Response> {
   const res = await fetch(input, options);

diff --git a/packages/data-explorer-ui/src/components/common/Alert/alert.stories.tsx b/packages/data-explorer-ui/src/components/common/Alert/alert.stories.tsx
@@ -27,7 +27,7 @@ export default {
   },
   component: Alert,
   title: "Components/Common/Alert",
-} satisfies Meta<typeof Alert>;
+} as Meta<typeof Alert>;
 
 type Story = StoryObj<typeof Alert>;
 

diff --git a/packages/data-explorer-ui/src/components/common/Breadcrumbs/breadcrumbs.tsx b/packages/data-explorer-ui/src/components/common/Breadcrumbs/breadcrumbs.tsx
@@ -29,7 +29,7 @@ export const Breadcrumbs = ({
         <MBreadcrumbs className={className} separator={Separator}>
           {breadcrumbs.map(({ path, text }, b) =>
             path ? (
-              <Link key={`${path}${b}`} href={path} passHref>
+              <Link key={`${path}${b}`} href={path} legacyBehavior passHref>
                 <BreadcrumbLink>{text}</BreadcrumbLink>
               </Link>
             ) : (

diff --git a/...orer-ui/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx b/...orer-ui/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx
@@ -26,7 +26,7 @@ export const CallToActionButton = ({
   const { label, target, url } = callToAction;
   const isInternal = isClientSideNavigation(url);
   return isInternal ? (
-    <NLink href={url} passHref>
+    <NLink href={url} legacyBehavior passHref>
       <Button
         className={className}
         disabled={disabled}

diff --git a/...ata-explorer-ui/src/components/common/Button/components/HelpIconButton/helpIconButton.tsx b/...ata-explorer-ui/src/components/common/Button/components/HelpIconButton/helpIconButton.tsx
@@ -19,7 +19,7 @@ export const HelpIconButton = ({
 }: HelpIconButtonProps): JSX.Element => {
   const isInternal = isClientSideNavigation(url);
   return isInternal ? (
-    <Link href={url} passHref>
+    <Link href={url} legacyBehavior passHref>
       <Button
         href="passHref"
         rel="noopener"

diff --git a/packages/data-explorer-ui/src/components/common/Code/code.stories.tsx b/packages/data-explorer-ui/src/components/common/Code/code.stories.tsx
@@ -4,7 +4,7 @@ import { Code } from "./code";
 const meta = {
   component: Code,
   title: "Components/Common/Code",
-} satisfies Meta<typeof Code>;
+} as Meta<typeof Code>;
 
 export default meta;
 

diff --git a/packages/data-explorer-ui/src/components/common/CopyToClipboard/copyToClipboard.stories.tsx b/packages/data-explorer-ui/src/components/common/CopyToClipboard/copyToClipboard.stories.tsx
@@ -1,5 +1,4 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import * as React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { CopyToClipboard } from "./copyToClipboard";
 
 export default {
@@ -10,13 +9,12 @@ export default {
   },
   component: CopyToClipboard,
   title: "Components/Common/CopyToClipboard",
-} satisfies ComponentMeta<typeof CopyToClipboard>;
+} as Meta<typeof CopyToClipboard>;
 
-const CopyToClipboardTemplate: ComponentStory<typeof CopyToClipboard> = (
-  args
-) => <CopyToClipboard {...args} />;
+type Story = StoryObj<typeof CopyToClipboard>;
 
-export const CopyToClipboardStory = CopyToClipboardTemplate.bind({});
-CopyToClipboardStory.args = {
-  copyStr: "Copy me",
+export const CopyToClipboardStory: Story = {
+  args: {
+    copyStr: "Copy me",
+  },
 };
diff --git a/packages/data-explorer-ui/src/components/common/Socials/socials.stories.tsx b/packages/data-explorer-ui/src/components/common/Socials/socials.stories.tsx
@@ -14,7 +14,7 @@ export default {
   },
   component: Socials,
   title: "Components/Navigation/SocialLinks",
-} satisfies Meta<typeof Socials>;
+} as Meta<typeof Socials>;
 
 type Story = StoryObj<typeof Socials>;
 

diff --git a/packages/data-explorer-ui/src/entity/service/factory.ts b/packages/data-explorer-ui/src/entity/service/factory.ts
@@ -2,7 +2,6 @@ import * as apiEntityService from "../api/service";
 import * as apicfEntityService from "../apicf/service";
 import * as entityService from "../common/service";
 import * as tsvEntityService from "../tsv/service";
-
 import { EntityService, EntityServiceType } from "./model";
 
 const API_ENTITY_SERVICE: EntityService = {

diff --git a/packages/data-explorer-ui/src/hooks/useRequestFileLocation.ts b/packages/data-explorer-ui/src/hooks/useRequestFileLocation.ts
@@ -136,14 +136,14 @@ export const useRequestFileLocation = (
     isSuccess,
     run: runAsync,
   } = useAsync<FileLocation>();
-  const active = useRef(true);
+  const active = useRef<boolean>(true);
 
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    active.current = true;
+    return () => {
       active.current = false;
-    },
-    []
-  );
+    };
+  }, []);
 
   const run = useCallback(() => {
     if (url) {