chore: update findable-ui to v48 and node to 22.12.0 (#2877)

.github/workflows/run-checks.yml

@@ -8,7 +8,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "20.10.0"
+          node-version: "22.12.0"
       - name: Cache npm cache
         uses: actions/cache@v4
         with:

.gitignore

@@ -44,4 +44,7 @@ next-env.d.ts
 # python
 __pycache__
 .ipynb_checkpoints
-venv
+venv
+
+# claude
+.claude/rules*

README.md

@@ -4,7 +4,7 @@
 
 ### Requirements
 
-* `Node.js` ([https://nodejs.org/en/](https://nodejs.org/en/)), version 20.10.0. 
+* `Node.js` ([https://nodejs.org/en/](https://nodejs.org/en/)), version 22.12.0. 
 
 * We recommend using `n` ([https://github.com/tj/n](https://github.com/tj/n)) as the Node.js package manger. 
 

cc-data.humancellatlas.dev.next.sh

@@ -8,7 +8,7 @@ rm -rf ./out
 echo \"Deleting ./build/\"
 rm -rf ./build
 
-n 20.10.0
+n 22.12.0
 npm ci
 
 mkdir -p build

cgl-data.humancellatlas.prod.next.sh

@@ -8,7 +8,7 @@ rm -rf ./out
 echo \"Deleting ./build/\"
 rm -rf ./build
 
-n 20.10.0
+n 22.12.0
 npm ci
 
 mkdir -p build

components/About/components/Attributions/attributions.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { Figure } from "../../../common/Figure/figure";
 import { Grid } from "./attributions.styles";
 

components/DataDictionary/components/TableCell/components/DetailCell/detailCell.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { CellContext } from "@tanstack/react-table";
 import { Attribute } from "../../../../../../viewModelBuilders/dataDictionaryMapper/types";
 import { Collapse, Typography } from "@mui/material";

components/DataDictionary/components/TableCell/components/FieldCell/fieldCell.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { CellContext } from "@tanstack/react-table";
 import { Attribute } from "../../../../../../viewModelBuilders/dataDictionaryMapper/types";
 import { Chip, Grid } from "@mui/material";

components/HCABioNetworks/Network/Atlas/components/Datasets/components/MainColumn/mainColumn.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 import { BackPageContentSingleColumn } from "@databiosphere/findable-ui/lib/components/Layout/components/BackPage/backPageView.styles";
 import { AtlasDatasetsDescription } from "../../../../../../../../content";

components/HCABioNetworks/Network/Atlas/components/Overview/components/MainColumn/components/AnalysisPortalCell/analysisPortalCell.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { JSX, Fragment } from "react";
 import { AnalysisPortal } from "../../../../../../../../../../@types/network";
 import { IconLink } from "../../../../../../../../../common/IconLink/iconLink";
 

components/HCABioNetworks/Network/Atlas/components/Overview/components/MainColumn/mainColumn.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import {
   FluidPaper,
   GridPaper,

components/HCABioNetworks/Network/Atlas/components/Overview/components/SideColumn/sideColumn.tsx

@@ -1,6 +1,6 @@
 import { Sections } from "@databiosphere/findable-ui/lib/components/common/Sections/sections";
 import { useAtlas } from "contexts/atlasContext";
-import { Fragment } from "react";
+import { JSX, Fragment } from "react";
 import { Coordinators } from "../../../../../../../common/Section/components/Coordinators/coordinators";
 import { HCABiologicalNetwork } from "../../../../../../../common/Section/components/HCABiologicalNetwork/HCABiologicalNetwork";
 import { Publications } from "../../../../../../../common/Section/components/Publications/publications";

components/HCABioNetworks/Network/Atlas/components/common/DataReleasePolicy/dataReleasePolicy.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
 import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 

components/HCABioNetworks/Network/Atlas/components/common/Hero/hero.tsx

@@ -1,7 +1,7 @@
 import { BackPageHero } from "@databiosphere/findable-ui/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero";
 import { NETWORKS_ROUTE } from "constants/routes";
 import { useAtlas } from "contexts/atlasContext";
-import { useMemo } from "react";
+import { JSX, useMemo } from "react";
 
 export const Hero = (): JSX.Element => {
   const { atlas, network } = useAtlas();

components/HCABioNetworks/Network/Atlas/components/common/Tabs/tabs.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import {
   Tabs as DXTabs,
   TabValue,

components/HCABioNetworks/Network/components/Overview/components/MainColumn/components/NetworkAtlasesEmpty/networkAtlasesEmpty.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 import { SectionTitle } from "@databiosphere/findable-ui/lib/components/common/Section/components/SectionTitle/sectionTitle";
 import {

components/HCABioNetworks/Network/components/Overview/components/MainColumn/mainColumn.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import {
   FluidPaper,
   GridPaper,

components/HCABioNetworks/Network/components/Overview/components/SideColumn/components/Summary/components/KeyElType/keyElType.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@mui/material";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
 
 export interface KeyElTypeProps {

components/HCABioNetworks/Network/components/Overview/components/SideColumn/components/Summary/components/KeyValuesElType/keyValuesElType.tsx

@@ -1,5 +1,5 @@
 import { Grid } from "@databiosphere/findable-ui/lib/components/common/Grid/grid";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 
 export interface KeyValuesElTypeProps {
   children: ReactNode;

components/HCABioNetworks/Network/components/Overview/components/SideColumn/components/Summary/components/ValueElType/valueElType.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@mui/material";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
 
 export interface ValueElTypeProps {

components/HCABioNetworks/Network/components/Overview/components/SideColumn/sideColumn.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { KeyValuePairs } from "@databiosphere/findable-ui/lib/components/common/KeyValuePairs/keyValuePairs";
 import { Sections } from "@databiosphere/findable-ui/lib/components/common/Sections/sections";
 import { useNetwork } from "../../../../../../../contexts/networkContext";

components/HCABioNetworks/Network/components/Publications/components/MainColumn/components/Outline/outline.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { SyntheticEvent, useState } from "react";
+import { JSX, SyntheticEvent, useState } from "react";
 import { Tab, Tabs, TabTitle } from "./outline.styles";
 import { useLayoutDimensions } from "@databiosphere/findable-ui/lib/providers/layoutDimensions/hook";
 

components/HCABioNetworks/Network/components/Publications/components/MainColumn/components/Publication/publication.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { CardContent } from "@databiosphere/findable-ui/lib/components/common/Card/card.styles";
 import { CardActionArea } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardActionArea/cardActionArea";
 import { CardTitle } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardTitle/cardTitle";

components/HCABioNetworks/Network/components/Publications/components/MainColumn/components/PublicationDetail/publicationDetail.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import {
   Link,
   LinkProps,

components/HCABioNetworks/Network/components/Publications/components/MainColumn/mainColumn.tsx

@@ -1,5 +1,5 @@
 import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
-import { Fragment } from "react";
+import { JSX, Fragment } from "react";
 import { BICCNPublication } from "../../../../../../../@types/network";
 import {
   useNetwork,

components/HCABioNetworks/Network/components/common/Hero/hero.tsx

@@ -1,5 +1,5 @@
 import { BackPageHero } from "@databiosphere/findable-ui/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero";
-import { useMemo } from "react";
+import { JSX, useMemo } from "react";
 import { NETWORKS_ROUTE } from "../../../../../../constants/routes";
 import { useNetwork } from "../../../../../../contexts/networkContext";
 import { HeroTitle } from "../../../../../common/Hero/components/Title/components/HeroTitle/heroTitle";

components/HCABioNetworks/Network/components/common/Tabs/tabs.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
 import {
   Tabs as DXTabs,

components/HCABioNetworks/components/Index/components/MainColumn/mainColumn.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 import { BackPageContentSingleColumn } from "@databiosphere/findable-ui/lib/components/Layout/components/BackPage/backPageView.styles";
 import { useNetworkList } from "../../../../../../hooks/useNetworkList";

components/Home/components/SectionBioNetworkAtlases/sectionBioNetworkAtlases.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
 import { Tooltip, Typography } from "@mui/material";
 import { useRouter } from "next/router";

components/Home/components/SectionHero/components/SummaryCounts/summaryCounts.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { formatCountSize } from "@databiosphere/findable-ui/lib/utils/formatCountSize";
 import { Divider } from "@mui/material";
 import { useSummary } from "../../../../../../contexts/summaryContext";

components/Home/components/SectionHero/sectionHero.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import {
   ANCHOR_TARGET,
   REL_ATTRIBUTE,

components/Home/components/SectionStayUpToDate/sectionStayUpToDate.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import {
   ANCHOR_TARGET,
   REL_ATTRIBUTE,

components/Layout/components/Content/components/Link/link.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { TypographyWordBreak } from "@databiosphere/findable-ui/lib/components/common/Typography/TypographyWordBreak/TypographyWordBreak";
 import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 import { replaceParameters } from "@databiosphere/findable-ui/lib/utils/replaceParameters";

components/Layout/components/Content/components/Table/table.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { Table as MTable } from "@mui/material";
 import { TableContainer } from "./table.styles";
 

components/Layout/components/Content/content.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { Content as MDXContent } from "./content.styles";
 import { useLayoutDimensions } from "@databiosphere/findable-ui/lib/providers/layoutDimensions/hook";
 

components/common/Button/components/ButtonOutline/buttonOutline.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { ButtonProps as DXButtonProps } from "@databiosphere/findable-ui/lib/components/common/Button/button";
 import { ButtonOutline as DXButtonOutline } from "@databiosphere/findable-ui/lib/components/common/Button/components/ButtonOutline/buttonOutline";
 

components/common/CustomIcon/components/BiotechIcon/biotechIcon.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { CustomSVGIconProps } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/common/entities";
 import { SvgIcon } from "@mui/material";
 

components/common/Figure/figure.tsx

@@ -2,7 +2,7 @@ import {
   StaticImage,
   StaticImageProps,
 } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { Figure as FigureWithCaption } from "./figure.styles";
 
 export interface ImageProps extends StaticImageProps {

components/common/Head/head.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import NextHead from "next/head";
 
 export interface HeadProps {

components/common/Hero/components/Title/components/HeroTitle/heroTitle.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
 import { Typography } from "@mui/material";
 import { NetworkKey } from "../../../../../../../@types/network";

components/common/IconLink/iconLink.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import {
   StaticImage,
   StaticImageProps,

components/common/NTagCell/components/PinnedNTagCell/pinnedNTagCell.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import {
   MetadataValue,
   NTagCell,

components/common/Section/components/Coordinators/coordinators.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { SectionTitle } from "@databiosphere/findable-ui/lib/components/common/Section/components/SectionTitle/sectionTitle";
 import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 import { Typography } from "@mui/material";

components/common/Section/components/HCABiologicalNetwork/HCABiologicalNetwork.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { SectionTitle } from "@databiosphere/findable-ui/lib/components/common/Section/components/SectionTitle/sectionTitle";
 import { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
 import { Network } from "../../../../../@types/network";

components/common/Section/components/Publications/publications.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { SectionTitle } from "@databiosphere/findable-ui/lib/components/common/Section/components/SectionTitle/sectionTitle";
 import { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
 import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";

components/common/Section/components/References/references.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { SectionTitle } from "@databiosphere/findable-ui/lib/components/common/Section/components/SectionTitle/sectionTitle";
 import {
   Link,

components/common/Table/components/Actions/components/Dialog/components/DialogContent/components/DialogContentSection/dialogContentSection.tsx

@@ -1,6 +1,6 @@
 import { Grid } from "@databiosphere/findable-ui/lib/components/common/Grid/grid";
 import { Typography } from "@mui/material";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
 
 export interface DialogContentSectionProps {

components/common/Table/components/Cell/components/BioNetworkCell/bioNetworkCell.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
 import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 import { Network } from "../../../../../../../@types/network";

components/common/Table/components/Cell/components/CXGDownloadCell/components/CXGDownloadDialog/cxgDownloadDialog.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { DatasetAsset } from "../../../../../../../../../@types/network";
 import {
   Dialog,

components/common/Table/components/Cell/components/CXGDownloadCell/components/CXGDownloadDialogForm/components/CXGDownloadCaption/cxgDownloadCaption.tsx

@@ -1,5 +1,5 @@
 import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
-import { Fragment } from "react";
+import { JSX, Fragment } from "react";
 import { Typography } from "@mui/material";
 import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
 

components/common/Table/components/Cell/components/CXGDownloadCell/components/CXGDownloadDialogForm/components/CXGDownloadFileSize/cxgDownloadFileSize.tsx

@@ -1,5 +1,5 @@
 import { formatFileSize } from "@databiosphere/findable-ui/lib/utils/formatFileSize";
-import { Fragment } from "react";
+import { JSX, Fragment } from "react";
 import { DatasetAsset } from "../../../../../../../../../../../@types/network";
 import { FileSize } from "./cxgDownloadFileSize.styles";
 

components/common/Table/components/Cell/components/CXGDownloadCell/components/CXGDownloadDialogForm/components/CXGDownloadRadio/cxgDownloadRadio.tsx

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { Grid } from "@databiosphere/findable-ui/lib/components/common/Grid/grid";
 import { Typography } from "@mui/material";
 import {

components/common/Table/components/Cell/components/CXGDownloadCell/components/CXGDownloadDialogForm/cxgDownloadDialogForm.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { JSX, useState } from "react";
 import {
   CXG_DATASET_FILE_TYPE,
   DatasetAsset,

components/common/Table/components/Cell/components/CXGDownloadCell/cxgDownloadCell.tsx

@@ -1,5 +1,5 @@
 import { DownloadIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/DownloadIcon/downloadIcon";
-import { useState } from "react";
+import { JSX, useState } from "react";
 import { DatasetAsset } from "../../../../../../../@types/network";
 import { CXGDownloadDialog } from "./components/CXGDownloadDialog/cxgDownloadDialog";
 import { StyledIconButton } from "./cxgDownloadCell.styles";

components/common/Typography/components/Heading/heading.tsx

@@ -1,6 +1,7 @@
+import { JSX } from "react";
 import { AnchorLink } from "@databiosphere/findable-ui/lib/components/common/AnchorLink/anchorLink";
 import { Typography } from "@mui/material";
-import { slugifyHeading } from "../../../../../plugins/common/utils";
+import { slugifyHeading } from "@databiosphere/findable-ui/lib/utils/mdx/plugins/utils";
 import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
 
 export interface HeadingProps {