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

docs/TRUSTED_PUBLISHING.md

@@ -50,7 +50,6 @@ To enable trusted publishing for this package on npm, you need to:
 
 1. **Log in to npm** and navigate to the package settings for `@databiosphere/findable-ui`
 2. **Add a GitHub Actions Publishing Workflow**:
-
    - Go to the package's publishing settings
    - Click "Add GitHub Actions Publishing Workflow"
    - Configure the trusted publisher with:

package.json

@@ -22,73 +22,72 @@
   "homepage": "https://github.com/DataBiosphere/findable-ui/tree/main/#readme",
   "main": "lib/index.js",
   "devDependencies": {
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
-    "@emotion/jest": "^11.13.0",
-    "@next/eslint-plugin-next": "^14.2.33",
-    "@storybook/nextjs-vite": "^10.1.7",
-    "@testing-library/react": "^16.0.1",
+    "@commitlint/cli": "^20.2.0",
+    "@commitlint/config-conventional": "^20.2.0",
+    "@emotion/jest": "^11.14.2",
+    "@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.4.0",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/jest": "^29.5.14",
+    "@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.49.0",
-    "eslint": "^8.33.0",
-    "eslint-config-next": "^14.2.33",
-    "eslint-config-prettier": "^8.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^15.5.9",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "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": "^10.1.7",
-    "eslint-plugin-typescript-sort-keys": "^3.2.0",
+    "eslint-plugin-jsdoc": "^61.5.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "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",
+    "eslint-plugin-typescript-sort-keys": "^3.3.0",
     "husky": "^8.0.3",
-    "jest": "^29.4.1",
-    "jest-environment-jsdom": "^29.4.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "prettier": "^2.8.3",
-    "prettier-plugin-organize-imports": "^3.2.2",
-    "storybook": "^10.1.7",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.5.4"
+    "prettier": "^3.7.4",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "storybook": "^10.1.10",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^7.0.1",
-    "@mui/material": "^7.0.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.6",
+    "@mui/material": "^7.3.6",
     "@observablehq/plot": "^0.6.17",
     "@tanstack/match-sorter-utils": "^8.19.4",
-    "@tanstack/react-table": "^8.19.2",
-    "@tanstack/react-virtual": "^3.13.12",
-    "copy-to-clipboard": "^3.3.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.13",
+    "copy-to-clipboard": "^3.3.3",
     "gray-matter": "^4.0.3",
-    "isomorphic-dompurify": "^2.22.0",
+    "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",
-    "react-dropzone": "^14.2.3",
+    "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.9",
+    "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",
-    "yup": "^1.6.1"
+    "unified": "^11.0.5",
+    "uuid": "^13.0.0",
+    "yup": "^1.7.1"
   },
   "overrides": {
     "glob": "^11.0.4"

src/apis/azul/common/filterTransformer.ts

@@ -52,7 +52,7 @@ export function transformFilters(filters: Filters): string {
 }
 
 export function transformAzulPagination(
-  azulPagination: AzulPaginationResponse | undefined
+  azulPagination: AzulPaginationResponse | undefined,
 ): PaginationResponse {
   if (!azulPagination) {
     return {
@@ -74,7 +74,7 @@ export function transformAzulPagination(
 
 function extractIndex(
   type: AzulSearchIndex,
-  urlString: string | undefined
+  urlString: string | undefined,
 ): PaginationIndex | null {
   if (!urlString) {
     return null;
@@ -95,7 +95,7 @@ function extractIndex(
  */
 export function transformTermFacets(
   termFacets: AzulTermFacets,
-  filterState: SelectedFilter[]
+  filterState: SelectedFilter[],
 ): SelectCategory[] {
   const categories: SelectCategory[] = [];
 
@@ -104,7 +104,7 @@ export function transformTermFacets(
     const termFacet = termFacets[key];
     // Build a set of filter state category values for the category.
     const setOfFilterStateValues = new Set(
-      filterState.find(({ categoryKey }) => categoryKey === key)?.value
+      filterState.find(({ categoryKey }) => categoryKey === key)?.value,
     );
 
     // Build category values from terms of term facet.
@@ -121,7 +121,7 @@ export function transformTermFacets(
           label: term.term ?? LABEL.UNSPECIFIED,
           selected: false, // Selected state updated in filter hook.
         };
-      }
+      },
     );
 
     // Add remaining filter state category values to the category values. This allows us to maintain the selected

src/common/analytics/analytics.ts

@@ -32,7 +32,7 @@ function isTrackingEnabled(): boolean {
  */
 export function track(
   eventName: EVENT_NAME,
-  params: EventParams[typeof eventName]
+  params: EventParams[typeof eventName],
 ): void {
   if (!isTrackingEnabled()) {
     return;

src/common/categories/config/range/typeGuards.ts

@@ -8,7 +8,7 @@ import { CategoryConfig } from "../types";
  * @returns True if the category config is a range category, false otherwise.
  */
 export function isRangeCategoryConfig(
-  categoryConfig: CategoryConfig
+  categoryConfig: CategoryConfig,
 ): categoryConfig is RangeCategoryView {
   return categoryConfig.viewKind === VIEW_KIND.RANGE;
 }

src/common/categories/config/types.ts

@@ -24,19 +24,17 @@ export interface CommonCategoryConfig {
  * Range category config.
  */
 export interface RangeCategoryConfig
-  extends CommonCategoryConfig,
-    RangeViewKind {
+  extends CommonCategoryConfig, RangeViewKind {
   unit?: string; // e.g. "kg"
 }
 
 /**
  * Select category config.
  */
 export interface SelectCategoryConfig
-  extends CommonCategoryConfig,
-    SelectViewKind {
+  extends CommonCategoryConfig, SelectViewKind {
   enableChartView?: boolean;
   mapSelectCategoryValue?: (
-    selectCategoryValue: SelectCategoryValueView
+    selectCategoryValue: SelectCategoryValueView,
   ) => SelectCategoryValueView;
 }

src/common/categories/config/utils.ts

@@ -12,14 +12,14 @@ import { CategoryConfig } from "./types";
 export function findCategoryConfig<V extends VIEW_KIND>(
   viewKind: V,
   key: Category["key"],
-  configs: CategoryConfig[]
+  configs: CategoryConfig[],
 ): Extract<CategoryConfig, { viewKind?: V }> | undefined {
   return configs.find(
     (c): c is Extract<CategoryConfig, { viewKind?: V }> =>
       // When `viewKind` is undefined, it corresponds to a `SelectCategoryConfig`.
       // This predicate ensures that `viewKind` is either explicitly matched or treated as undefined
       // for compatibility with `SelectCategoryConfig` and other explicitly defined view kinds.
-      (c.viewKind === undefined || c.viewKind === viewKind) && c.key === key
+      (c.viewKind === undefined || c.viewKind === viewKind) && c.key === key,
   );
 }
 
@@ -31,7 +31,7 @@ export function findCategoryConfig<V extends VIEW_KIND>(
  */
 export function findRangeCategoryConfig(
   key: Category["key"],
-  configs: CategoryConfig[]
+  configs: CategoryConfig[],
 ): Extract<CategoryConfig, { viewKind: VIEW_KIND.RANGE }> | undefined {
   return findCategoryConfig(VIEW_KIND.RANGE, key, configs);
 }
@@ -44,7 +44,7 @@ export function findRangeCategoryConfig(
  */
 export function findSelectCategoryConfig(
   key: Category["key"],
-  configs: CategoryConfig[]
+  configs: CategoryConfig[],
 ): Extract<CategoryConfig, { viewKind?: VIEW_KIND.SELECT }> | undefined {
   return findCategoryConfig(VIEW_KIND.SELECT, key, configs);
 }

src/common/categories/models/range/utils.ts

@@ -22,7 +22,7 @@ export function assertIsRange(value: unknown): asserts value is SelectedRange {
 export function buildNextRangeFilterState(
   nextCategorySelectedFilter: SelectedFilter,
   selectedValue: CategoryValueKey,
-  selected: boolean
+  selected: boolean,
 ): void {
   if (selected) {
     // Assert that the selected value is a range.
@@ -43,7 +43,7 @@ export function buildNextRangeFilterState(
  * @returns The selected filter (i.e. the set of selected values) for the given category.
  */
 export function getRangeSelectedValue(
-  categorySelectedFilter?: SelectedFilter
+  categorySelectedFilter?: SelectedFilter,
 ): SelectedRange {
   return isSelectedRange(categorySelectedFilter?.value)
     ? categorySelectedFilter?.value

src/common/categories/models/select/utils.ts

@@ -9,15 +9,15 @@ import { CategoryValueKey, SelectedFilter } from "../../../entities";
 export function buildNextSelectFilterState(
   nextCategorySelectedFilter: SelectedFilter,
   selectedValue: CategoryValueKey,
-  selected: boolean
+  selected: boolean,
 ): void {
   if (selected) {
     // Set the selected value.
     nextCategorySelectedFilter.value.push(selectedValue);
   } else {
     // Remove the selected value from the selected set of values.
     nextCategorySelectedFilter.value = nextCategorySelectedFilter.value.filter(
-      (value: CategoryValueKey) => value !== selectedValue
+      (value: CategoryValueKey) => value !== selectedValue,
     );
   }
 }

src/common/categories/views/range/typeGuards.ts

@@ -7,7 +7,7 @@ import { RangeCategoryView } from "./types";
  * @returns true if the category view is a range category view.
  */
 export function isRangeCategoryView(
-  view: CategoryView
+  view: CategoryView,
 ): view is RangeCategoryView {
   return "max" in view && "min" in view;
 }

src/common/categories/views/range/utils.ts

@@ -15,11 +15,11 @@ import { RangeCategoryView } from "../../views/range/types";
 export function buildRangeCategoryView(
   category: RangeCategory,
   categoryConfigs: CategoryConfig[],
-  categorySelectedFilter?: SelectedFilter
+  categorySelectedFilter?: SelectedFilter,
 ): RangeCategoryView {
   const categoryConfig = findRangeCategoryConfig(category.key, categoryConfigs);
   const [selectedMin, selectedMax] = getRangeSelectedValue(
-    categorySelectedFilter
+    categorySelectedFilter,
   );
   return {
     annotation: categoryConfig?.annotation,

src/common/categories/views/select/typeGuards.ts

@@ -7,7 +7,7 @@ import { CategoryView } from "../types";
  * @returns true if the category view is a select category view.
  */
 export function isSelectCategoryView(
-  view: CategoryView
+  view: CategoryView,
 ): view is SelectCategoryView {
   return "values" in view;
 }

src/common/filters/sort/models/utils.ts

@@ -10,7 +10,7 @@ import { FILTER_SORT } from "../config/types";
  */
 export function sortCategoryValueViews(
   categoryValueViews: SelectCategoryValueView[],
-  filterSort: FILTER_SORT
+  filterSort: FILTER_SORT,
 ): void {
   const sortFn =
     filterSort === FILTER_SORT.ALPHA
@@ -29,7 +29,7 @@ export function sortCategoryValueViews(
 
 export function sortCategoryValueViewsAlpha(
   cvv0: SelectCategoryValueView,
-  cvv1: SelectCategoryValueView
+  cvv1: SelectCategoryValueView,
 ): number {
   // Handle empty labels.
   if (!cvv0.label) return 1;
@@ -46,7 +46,7 @@ export function sortCategoryValueViewsAlpha(
  */
 export function sortCategoryValueViewsCount(
   cvv0: SelectCategoryValueView,
-  cvv1: SelectCategoryValueView
+  cvv1: SelectCategoryValueView,
 ): number {
   // Sort by count descending, then alphabetically.
   const countDiff = cvv1.count - cvv0.count;

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/Authentication/components/SessionController/components/NextSessionController/utils.ts

@@ -29,14 +29,14 @@ export function mapAuth(session: SessionContextValue): UpdateAuthStatePayload {
  * @returns authentication profile and status.
  */
 export function mapAuthentication(
-  session: SessionContextValue
+  session: SessionContextValue,
 ): UpdateAuthenticationPayload {
   return {
     profile: mapProfile(session.data),
     status: mapStatus(
       session.status,
       AUTHENTICATION_STATUS_MAP,
-      AUTHENTICATION_STATUS.SETTLED
+      AUTHENTICATION_STATUS.SETTLED,
     ),
   };
 }
@@ -68,7 +68,7 @@ function mapProfile(sessionData: Session | null): UserProfile | undefined {
 function mapStatus<S>(
   status: SessionContextValue["status"],
   statusBySessionStatus: Record<SessionContextValue["status"], S>,
-  defaultStatus: S
+  defaultStatus: S,
 ): S {
   return statusBySessionStatus[status] || defaultStatus;
 }