chore!: next.js to v15.x (step towards v16) (#714)

package.json

@@ -25,24 +25,23 @@
     "@commitlint/cli": "^20.2.0",
     "@commitlint/config-conventional": "^20.2.0",
     "@emotion/jest": "^11.14.2",
-    "@next/eslint-plugin-next": "^14.2.33",
+    "@next/eslint-plugin-next": "^15.5.9",
     "@storybook/nextjs-vite": "^10.1.10",
     "@testing-library/react": "^16.3.1",
     "@types/d3": "^7.4.3",
     "@types/jest": "^29.5.14",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-window": "^1.8.5",
-    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^8.50.0",
     "eslint": "^8.57.1",
-    "eslint-config-next": "^14.2.33",
+    "eslint-config-next": "^15.5.9",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jsdoc": "^61.5.0",
     "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-sonarjs": "^0.25.1",
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
     "eslint-plugin-storybook": "^10.1.10",
@@ -55,7 +54,7 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "storybook": "^10.1.10",
     "ts-jest": "^29.4.6",
-    "typescript": "^5.5.4"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
@@ -70,24 +69,24 @@
     "gray-matter": "^4.0.3",
     "isomorphic-dompurify": "^2.34.0",
     "ky": "^1.7.2",
-    "next": "^14.2.33",
+    "next": "^15.5.9",
     "next-auth": "^4.24.13",
-    "next-mdx-remote": "^4.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next-mdx-remote": "^5.0.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-dropzone": "^14.3.8",
     "react-gtm-module": "^2.0.11",
     "react-idle-timer": "^5.7.2",
     "react-window": "^1.8.11",
     "rehype-raw": "^7.0.0",
-    "rehype-react": "^7.2.0",
-    "rehype-sanitize": "^5.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-parse": "^10.0.2",
-    "remark-rehype": "^10.1.0",
+    "rehype-react": "^8.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
     "slugify": "^1.6.6",
-    "unified": "^10.1.2",
-    "uuid": "^8.3.2",
+    "unified": "^11.0.5",
+    "uuid": "^13.0.0",
     "yup": "^1.7.1"
   },
   "overrides": {

src/components/Authentication/components/SessionController/components/GoogleSessionController/SessionController.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from "react";
+import { JSX, Fragment, useEffect } from "react";
 import { authComplete } from "../../../../../../providers/authentication/auth/dispatch";
 import { useAuth } from "../../../../../../providers/authentication/auth/hook";
 import { authenticationComplete } from "../../../../../../providers/authentication/authentication/dispatch";

src/components/Authentication/components/SessionController/components/NextSessionController/SessionController.tsx

@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import React, { Fragment, useEffect } from "react";
+import { JSX, Fragment, useEffect } from "react";
 import { updateAuthState } from "../../../../../../providers/authentication/auth/dispatch";
 import { useAuth } from "../../../../../../providers/authentication/auth/hook";
 import { updateAuthentication } from "../../../../../../providers/authentication/authentication/dispatch";

src/components/ComponentCreator/ComponentCreator.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { JSX, createElement } from "react";
 import { ComponentsConfig, ViewContext } from "../../config/entities";
 import { useConfig } from "../../hooks/useConfig";
 import { useExploreState } from "../../hooks/useExploreState";
@@ -63,11 +63,9 @@ export const ComponentCreator = <T,>({
               systemStatus,
             })
           : {};
-        return React.createElement(
-          c.component,
-          { ...c.props, ...props, key: k },
-          [children ?? props.children],
-        );
+        return createElement(c.component, { ...c.props, ...props, key: k }, [
+          children ?? props.children,
+        ]);
       })}
     </>
   );

src/components/ComponentCreator/components/ConditionalComponent/conditionalComponent.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 
 /**
  * Basic component to conditionally render children.

src/components/ComponentCreator/components/RenderComponent/renderComponent.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType } from "react";
+import { JSX, ElementType } from "react";
 import { v4 as uuid4 } from "uuid";
 
 /**

src/components/DataDictionary/components/Description/description.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { JSX } from "react";
 import { StyledFluidPaper, StyledMarkdownRenderer } from "./description.styles";
 import { DescriptionProps } from "./types";
 

src/components/DataDictionary/components/Entities/entities.tsx

@@ -1,6 +1,6 @@
 import { Grid } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React from "react";
+import { JSX } from "react";
 import { Attribute } from "../../../../common/entities";
 import { NoResults } from "../../../NoResults/noResults";
 import { Entity } from "../Entity/entity";

src/components/DataDictionary/components/Entity/entity.tsx

@@ -1,6 +1,6 @@
 import { Grid, Typography } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React from "react";
+import { JSX } from "react";
 import { Attribute } from "../../../../common/entities";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { AnchorLink } from "../../../common/AnchorLink/anchorLink";

src/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.tsx

@@ -1,6 +1,6 @@
 import { Button, Theme, useMediaQuery } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React from "react";
+import { JSX } from "react";
 import { Attribute } from "../../../../../../common/entities";
 import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
 import { ColumnFilterTag } from "../../../../../Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag";

src/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, Theme, useMediaQuery } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React, { ComponentProps } from "react";
+import { JSX, ComponentProps } from "react";
 import { Attribute } from "../../../../../../common/entities";
 import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
 import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";

src/components/DataDictionary/components/Filters/filters.tsx

@@ -1,5 +1,5 @@
 import { RowData } from "@tanstack/react-table";
-import React from "react";
+import { JSX } from "react";
 import { Attribute } from "../../../../common/entities";
 import { GlobalFilter } from "../../../Table/components/TableFeatures/GlobalFilter/globalFilter";
 import { ColumnFilters } from "./components/ColumnFilters/columnFilters";

src/components/DataDictionary/components/Filters/stories/filters.stories.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { functionalUpdate, Table } from "@tanstack/react-table";
-import React from "react";
+import { JSX } from "react";
 import { action } from "storybook/actions";
 import { Filters } from "../filters";
 import { COLUMNS } from "./constants";

src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { JSX, forwardRef } from "react";
 import { Layout } from "./entitiesLayout.styles";
 import { EntitiesLayoutProps } from "./types";
 

src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { JSX, forwardRef } from "react";
 import { Layout } from "./filtersLayout.styles";
 import { FiltersLayoutProps } from "./types";
 

src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { JSX } from "react";
 import { Layout, LayoutScroller } from "./outlineLayout.styles";
 import { OutlineLayoutProps } from "./types";
 

src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { JSX } from "react";
 import { Layout } from "./titleLayout.styles";
 import { TitleLayoutProps } from "./types";
 

src/components/DataDictionary/components/Outline/components/ContentsTab/contentsTab.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { JSX } from "react";
 import { TAB_PROPS } from "./constants";
 import { StyledContentsTab } from "./contentsTab.styles";
 

src/components/DataDictionary/components/Outline/outline.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { JSX } from "react";
 import { ContentsTab } from "./components/ContentsTab/contentsTab";
 import { StyledOutline } from "./outline.styles";
 import { OutlineProps } from "./types";

src/components/DataDictionary/components/Table/components/BasicCell/basicCell.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import { CellContext, RowData } from "@tanstack/react-table";
-import React, { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { parseValue } from "./utils";
 

src/components/DataDictionary/components/Table/table.tsx

@@ -1,6 +1,6 @@
 import { TableContainer } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React from "react";
+import { JSX } from "react";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint";
 import { TableBody } from "../../../Detail/components/Table/components/TableBody/tableBody";
 import { ROW_DIRECTION } from "../../../Table/common/entities";

src/components/DataDictionary/components/Title/title.tsx

@@ -1,5 +1,5 @@
 import { TypographyProps } from "@mui/material";
-import React from "react";
+import { JSX } from "react";
 import { StyledTitle } from "./title.styles";
 
 export const Title = ({

src/components/DataDictionary/components/Tooltip/components/Title/title.tsx

@@ -1,5 +1,5 @@
 import { Stack, Typography } from "@mui/material";
-import React from "react";
+import { JSX } from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { BaseComponentProps } from "../../../../../types";
 import { STACK_PROPS } from "./constants";

src/components/DataDictionary/components/Tooltip/tooltip.tsx

@@ -1,5 +1,5 @@
 import { Tooltip as MTooltip } from "@mui/material";
-import React from "react";
+import { JSX } from "react";
 import { BaseComponentProps } from "../../../types";
 import { Title } from "./components/Title/title";
 import { TitleProps } from "./components/Title/types";

src/components/DataDictionary/dataDictionary.tsx

@@ -1,6 +1,6 @@
 import { Fade } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React from "react";
+import { JSX } from "react";
 import { Attribute } from "../../common/entities";
 import { PROPERTY } from "../../hooks/useHtmlStyle/constants";
 import { useHtmlStyle } from "../../hooks/useHtmlStyle/hook";

src/components/DataDictionary/hooks/UseMeasureFilters/types.ts

@@ -2,5 +2,5 @@ import { RefObject } from "react";
 
 export interface UseMeasureFilters {
   dimensions: { height: number };
-  filtersRef: RefObject<HTMLElement> | null;
+  filtersRef: RefObject<HTMLElement | null>;
 }

src/components/Detail/components/AccessibilityBadge/accessibilityBadge.tsx

@@ -3,7 +3,7 @@ import {
   Fade as MFade,
   FadeProps as MFadeProps,
 } from "@mui/material";
-import React from "react";
+import { JSX } from "react";
 import { StatusBadge } from "../../../common/StatusBadge/statusBadge";
 
 const DEFAULT_FADE_PROPS: Partial<MFadeProps> = {

src/components/Detail/components/DetailViewTable/detailViewTable.tsx

@@ -1,5 +1,5 @@
 import { ColumnDef, RowData } from "@tanstack/react-table";
-import React, { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import {
   FlatPaper,
   FluidPaper,

src/components/Detail/components/Table/components/TableBody/tableBody.tsx

@@ -1,6 +1,6 @@
 import { TableBody as MTableBody } from "@mui/material";
 import { Row, RowData, Table } from "@tanstack/react-table";
-import React from "react";
+import { JSX } from "react";
 import { ROW_DIRECTION } from "../../../../../Table/common/entities";
 import { TableView } from "../../table";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";

src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -1,5 +1,5 @@
 import { Row, RowData, Table } from "@tanstack/react-table";
-import React, { Fragment } from "react";
+import { Fragment, JSX } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 import { StyledTableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";

src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,6 +1,6 @@
 import { TableCell } from "@mui/material";
 import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
-import React, { Fragment } from "react";
+import { Fragment, JSX } from "react";
 import {
   getTableCellAlign,
   getTableCellPadding,

src/components/Detail/components/Table/table.tsx

@@ -11,7 +11,7 @@ import {
   TableOptions,
   useReactTable,
 } from "@tanstack/react-table";
-import React from "react";
+import { JSX } from "react";
 import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,

src/components/Detail/detail.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import React from "react";
 import { CollaboratingOrganizations } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
 import { CollaboratingOrganizationsStory } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
 import { Contacts } from "../Project/components/Contacts/contacts";

src/components/Detail/detail.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { BackPageView } from "../Layout/components/BackPage/backPageView";
 
 export interface DetailProps {

src/components/Error/error.tsx

@@ -1,6 +1,6 @@
 import { Divider, Typography } from "@mui/material";
 import Link from "next/link";
-import React from "react";
+import { JSX } from "react";
 import { useExploreState } from "../../hooks/useExploreState";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
@@ -86,14 +86,13 @@ export const Error = ({
           </SectionContent>
           {rootPath && (
             <SectionActions>
-              <Link href={rootPath} legacyBehavior passHref>
-                <ButtonPrimary
-                  onClick={handleToHomePageClicked}
-                  href="passHref"
-                >
-                  To Homepage
-                </ButtonPrimary>
-              </Link>
+              <ButtonPrimary
+                component={Link}
+                href={rootPath}
+                onClick={handleToHomePageClicked}
+              >
+                To Homepage
+              </ButtonPrimary>
             </SectionActions>
           )}
         </ErrorSection>

src/components/ErrorBoundary/errorBoundary.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, PropsWithRef } from "react";
+import { Component, ReactNode, PropsWithChildren, PropsWithRef } from "react";
 
 interface ErrorBoundaryState {
   error?: Error;
@@ -10,14 +10,14 @@ interface FallbackRenderProps {
 }
 
 interface ErrorBoundaryProps {
-  fallbackRender: (props: FallbackRenderProps) => React.ReactNode;
+  fallbackRender: (props: FallbackRenderProps) => ReactNode;
 }
 
 type ErrorBoundaryPropsType = PropsWithRef<
   PropsWithChildren<ErrorBoundaryProps>
 >;
 
-export class ErrorBoundary extends React.Component<
+export class ErrorBoundary extends Component<
   ErrorBoundaryPropsType,
   ErrorBoundaryState
 > {

src/components/Export/components/DownloadCurlCommand/components/DownloadCurlCommandForm/downloadCurlCommandForm.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from "react";
+import { JSX, Dispatch, SetStateAction } from "react";
 import { ExecutionEnvironment, FormFacet } from "../../../../common/entities";
 import { ExportButton } from "../../../ExportForm/components/ExportButton/exportButton";
 import { ExportExecutionEnvironmentForm } from "../../../ExportForm/components/ExportExecutionEnvironmentForm/exportExecutionEnvironmentForm";

src/components/Export/components/DownloadCurlCommand/components/DownloadCurlCommandNotStarted/downloadCurlCommandNotStarted.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, ElementType, SetStateAction } from "react";
+import { JSX, Dispatch, ElementType, SetStateAction } from "react";
 import { FileManifestState } from "../../../../../../providers/fileManifestState";
 import { PAPER_PANEL_STYLE } from "../../../../../common/Paper/paper";
 import { FluidPaper } from "../../../../../common/Paper/paper.styles";

src/components/Export/components/DownloadCurlCommand/components/DownloadCurlCommandReady/downloadCurlCommandReady.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType } from "react";
+import { JSX, ElementType } from "react";
 import { Code } from "../../../../../common/Code/code";
 import { FluidPaper } from "../../../../../common/Paper/paper.styles";
 import { Section, SectionContent } from "../../../../export.styles";

src/components/Export/components/DownloadCurlCommand/downloadCurlCommand.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, useState } from "react";
+import { JSX, ElementType, useState } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
 import { Filters } from "../../../../common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";