Upgrade dependencies, Babel 8 and Node 24 (v5.7.0)

.github/workflows/tests.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: "22"
+          node-version: "24"
           cache: "yarn"
 
       - name: Get yarn cache directory path

.nvmrc

@@ -1 +1 @@
-22
+24

babel.config.js

@@ -3,12 +3,11 @@ const isTest = process.env.NODE_ENV === "test"
 
 module.exports = {
   presets: [
-    ["@babel/env", { loose: true, modules: isES6 ? false : "commonjs" }],
-    "@babel/preset-react",
+    ["@babel/env", { modules: isES6 ? false : "commonjs" }],
+    ["@babel/preset-react", { runtime: "automatic", development: false }],
   ],
   plugins: [
     ["styled-components", { ssr: !isTest, displayName: !isTest }],
-    "@babel/plugin-transform-spread",
     [
       "module-resolver",
       {

eslint.config.js

@@ -1,6 +1,6 @@
 import globals from "globals"
 import pluginJs from "@eslint/js"
-import pluginReact from "eslint-plugin-react"
+import eslintReact from "@eslint-react/eslint-plugin"
 import storybook from "eslint-plugin-storybook"
 import translationSafeText from "./eslint/rules/translationSafeText.js"
 
@@ -18,13 +18,11 @@ export default [
     },
   },
   pluginJs.configs.recommended,
-  pluginReact.configs.flat.recommended,
+  eslintReact.configs.recommended,
   ...storybook.configs["flat/recommended"],
   {
     rules: {
-      "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
-      "react/prop-types": "off",
-      "react/display-name": "off",
+      "@eslint-react/exhaustive-deps": "off",
     },
   },
   {

jest/config.js

@@ -1,6 +1,6 @@
 module.exports = {
   rootDir: "../",
-  moduleDirectories: ["<rootDir>/node_modules", "./node_modules", "<rootDir>/jest"],
+  moduleDirectories: ["node_modules", "<rootDir>/jest"],
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/$1",
     "^.+\\.(css|less|scss)$": "identity-obj-proxy",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
@@ -24,7 +24,7 @@
     "clean": "rimraf lib dist es coverage",
     "test": "jest --config ./jest/config.js",
     "lint": "eslint src",
-    "cp-cloud": "cp -R ./dist ../cloud-frontend/node_modules/@netdata/netdata-ui/",
+    "cp-cloud": "cp -R ./dist ${CLOUD_DIR:-../cloud-frontend}/node_modules/@netdata/netdata-ui/",
     "to-cloud": "yarn build:cjs && yarn build:es6 && yarn cp-cloud",
     "cp-charts": "cp -R ./dist ../charts/node_modules/@netdata/netdata-ui/",
     "to-charts": "yarn build && yarn cp-charts",
@@ -48,11 +48,11 @@
     "@elastic/react-search-ui": "^1.24.2",
     "@elastic/search-ui-site-search-connector": "^1.24.2",
     "@fontsource/ibm-plex-sans": "^5.3.0",
-    "@prismicio/client": "^7.21.6",
+    "@prismicio/client": "^7.23.0",
     "@styled-system/css": "^5.1.5",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.18",
-    "axios": "^1.13.5",
+    "@tanstack/react-virtual": "^3.14.26",
+    "axios": "^1.21.1",
     "polished": "^4.3.1",
     "react-portal": "^4.3.0",
     "react-select": "^5.10.2",
@@ -67,55 +67,56 @@
     "styled-components": ">=5.3.9"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.6",
-    "@babel/core": "^7.29.0",
-    "@babel/eslint-parser": "^7.28.6",
-    "@babel/plugin-transform-modules-umd": "^7.27.1",
-    "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.29.0",
-    "@babel/preset-react": "^7.28.5",
-    "@eslint/js": "^9.39.4",
-    "@playwright/test": "1.62.1",
-    "@storybook/addon-docs": "10.2.10",
-    "@storybook/addon-links": "10.2.10",
-    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-    "@storybook/react-webpack5": "10.2.10",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "babel-loader": "^10.0.0",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "babel-plugin-styled-components": "^2.1.4",
+    "@babel/cli": "^8.1.0",
+    "@babel/core": "^8.1.0",
+    "@babel/plugin-transform-runtime": "^8.0.6",
+    "@babel/preset-env": "^8.0.7",
+    "@babel/preset-react": "^8.0.1",
+    "@eslint-react/eslint-plugin": "^5.30.1",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "1.65.0",
+    "@storybook/addon-docs": "10.6.6",
+    "@storybook/addon-links": "10.6.6",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
+    "@storybook/react-webpack5": "10.6.6",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.9",
+    "babel-loader": "^10.1.1",
+    "babel-plugin-module-resolver": "^5.0.3",
+    "babel-plugin-styled-components": "^2.4.0",
     "clean-webpack-plugin": "^4.0.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^9.39.4",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.0",
-    "eslint-plugin-storybook": "10.2.10",
-    "globals": "^17.3.0",
+    "eslint": "^10.14.0",
+    "eslint-plugin-storybook": "10.6.6",
+    "globals": "^17.14.0",
     "html-loader": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
     "install-peers-cli": "^2.2.0",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "jest-styled-components": "^7.2.0",
-    "jsdom": "^28.1.0",
-    "lodash": "^4.17.23",
+    "jest": "^30.5.2",
+    "jest-environment-jsdom": "^30.5.2",
+    "jest-styled-components": "^7.4.1",
+    "lodash": "^4.18.1",
     "markdown-loader": "^8.0.0",
-    "prettier": "^3.8.1",
+    "prettier": "^3.9.10",
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "rimraf": "^6.1.3",
-    "sass-loader": "^16.0.7",
-    "storybook": "10.2.10",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "rimraf": "^6.1.4",
+    "sass-loader": "^17.1.0",
+    "storybook": "10.6.6",
     "styled-components": "^6.3.10",
     "svg-sprite-loader": "^6.0.11",
-    "svgo-loader": "^4.0.0",
+    "svgo-loader": "^5.0.0",
+    "typescript": "^6.0.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.105.2",
-    "webpack-cli": "^6.0.1"
-  }
+    "webpack": "^5.112.2",
+    "webpack-cli": "^7.3.1"
+  },
+  "browserslist": [
+    "> 0.25%",
+    "not dead"
+  ]
 }

src/__mocks__/filemock.js

@@ -1,5 +1,3 @@
-import React from "react"
-
 const Mock = () => <>test</>
 
 export default Mock

src/components/animation/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from "react"
+import { useMemo, useRef } from "react"
 import styled from "styled-components"
 import { Transition } from "react-transition-group"
 import makeAnimations from "./makeAnimations"

src/components/animation/index.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { render, waitForElementToBeRemoved } from "testUtilities"
 import { config } from "react-transition-group"
 import Animation from "."

src/components/button/button.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { StyledButton } from "./styled"
 import { Icon } from "@/components/icon"
 import { LoaderIcon } from "@/components/icon/components"

src/components/button/button.stories.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { Button, IconButton, ButtonGroup, useRovingFocus } from "."
 import Select from "@/components/select"
 import Search from "@/components/search"

src/components/button/buttonGroup.js

@@ -1,4 +1,4 @@
-import React, { Children, isValidElement, cloneElement } from "react"
+import { Children, isValidElement, cloneElement } from "react"
 import Flex from "@/components/templates/flex"
 import { Button } from "./button"
 import { SegmentedTrack, SegmentedItem, RaisedSegmentedItem } from "./segmented"

src/components/button/buttonGroup.stories.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { Button, ButtonGroup } from "."
 import Flex from "@/components/templates/flex"
 import { TextSmall } from "@/components/typography"

src/components/button/expanded.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { renderWithProviders, screen } from "testUtilities"
 import { DefaultTheme, DarkTheme } from "@/theme"
 import IconButton from "./iconButton"

src/components/button/iconButton.js

@@ -1,4 +1,3 @@
-import React from "react"
 import Box from "@/components/templates/box"
 import Tooltip from "@/components/drops/tooltip"
 import { controlSizeOf } from "@/mixins/controlSize"

src/components/button/inline.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { renderWithProviders, screen } from "testUtilities"
 import { DefaultTheme, DarkTheme } from "@/theme"
 import { Button } from "./button"

src/components/button/interactionProps.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { renderWithProviders, screen, userEvent } from "testUtilities"
 import { DefaultTheme, DarkTheme } from "@/theme"
 import { Button } from "./button"

src/components/button/layoutProps.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import styled from "styled-components"
 import { renderWithProviders, screen } from "testUtilities"
 import { Button } from "./button"

src/components/button/surface.test.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { renderWithProviders, fireEvent, screen, user } from "testUtilities"
 import { DefaultTheme, DarkTheme } from "@/theme"
 import { Button } from "./button"

src/components/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import useForwardRef from "@/hooks/useForwardRef"
 import { Text } from "@/components/typography"
 import { Icon } from "@/components/icon"

src/components/checkbox/checkbox.mock.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import styled from "styled-components"
 import { Checkbox, useCheckboxesList } from "."
 

src/components/checkbox/checkbox.stories.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { Checkbox } from "."
 import Flex from "@/components/templates/flex"
 import { MockedCheckboxList } from "./checkbox.mock"

src/components/checkbox/checkbox.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { renderWithProviders, user, screen } from "testUtilities"
 import { css } from "styled-components"
 import { DarkTheme } from "@/theme/dark"

src/components/checkbox/filled.test.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { renderWithProviders, screen, user } from "testUtilities"
 import { DefaultTheme } from "@/theme/default"
 import { DarkTheme } from "@/theme/dark"

src/components/checkbox/indicator.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import { forwardRef } from "react"
 import { Checkbox as StyledCheckbox } from "./styled"
 
 export const CheckboxIndicator = forwardRef(function CheckboxIndicator(

src/components/checkbox/indicator.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { createRef } from "react"
 import { fireEvent, renderWithProviders, screen } from "testUtilities"
 import { DefaultTheme, DarkTheme } from "@/theme"

src/components/collapsible/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useState, useEffect } from "react"
+import { memo, useMemo, useState, useEffect } from "react"
 import styled from "styled-components"
 import useUpdateEffect from "@/hooks/useUpdateEffect"
 import useForwardRef from "@/hooks/useForwardRef"

src/components/collapsible/index.stories.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import useToggle from "@/hooks/useToggle"
 import Flex from "@/components/templates/flex"
 import { H2, Text } from "@/components/typography"

src/components/collapsible/index.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { renderWithProviders, waitForElementToBeRemoved } from "testUtilities"
 import Collapsible from "./index"
 

src/components/confirmation-dialog/confirmation-dialog.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { useTheme } from "styled-components"
 import Flex from "@/components/templates/flex"
 import { Button } from "@/components/button"

src/components/confirmation-dialog/confirmation-dialog.stories.js

@@ -1,4 +1,3 @@
-import React from "react"
 import ConfirmationDialog from "./confirmation-dialog"
 
 export const Basic = args => <ConfirmationDialog {...args} />

src/components/confirmation-dialog/confirmation-dialog.stories.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { composeStories, setProjectAnnotations } from "@storybook/react"
 import { render, screen } from "testUtilities"
 import preview from "../../../.storybook/preview"

src/components/confirmation-dialog/confirmation-dialog.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { fireEvent } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { renderWithProviders, screen } from "testUtilities"

src/components/copyToClipboard/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react"
+import { useState, useCallback } from "react"
 import ReactDOM from "react-dom"
 import styled, { css, keyframes } from "styled-components"
 import { TextSmall } from "@/components/typography"

src/components/copyToClipboard/index.stories.js

@@ -1,4 +1,3 @@
-import React from "react"
 import CopyToClipboard from "./index"
 import { Text, TextSmall, H3 } from "@/components/typography"
 import Box from "@/components/templates/box"

src/components/copyToClipboard/index.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { renderWithProviders, screen, fireEvent, act } from "testUtilities"
 import { DefaultTheme } from "@/theme"
 import CopyToClipboard from "./index"

src/components/drops/container.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react"
+import { Fragment } from "react"
 import styled from "styled-components"
 import Flex from "@/components/templates/flex"
 import { Text } from "@/components/typography"

src/components/drops/container.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { renderWithProviders, screen } from "testUtilities"
 import { DefaultTheme } from "@/theme"
 import DropContainer from "./container"

src/components/drops/drop/index.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from "react"
+import { useLayoutEffect } from "react"
 import ReactDOM from "react-dom"
 import Box from "@/components/templates/box"
 import useDropElement from "@/hooks/useDropElement"

src/components/drops/drop/index.stories.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef } from "react"
 import { action } from "storybook/actions"
 import Flex from "@/components/templates/flex"
 import { Text, TextSmall } from "@/components/typography"

src/components/drops/drop/index.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { renderWithProviders, fireEvent, waitFor } from "testUtilities"
 import { DefaultTheme } from "@/theme"
 import Drop from "./index"

src/components/drops/dropdownSelectionCheck.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { Icon } from "@/components/icon"
 
 const DropdownSelectionCheck = () => (

src/components/drops/dropdownStyles.test.js

@@ -1,4 +1,3 @@
-import React from "react"
 import styled from "styled-components"
 import { renderWithProviders } from "testUtilities"
 import { DefaultTheme, DarkTheme } from "@/theme"

src/components/drops/menu/dropdown.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useRef } from "react"
+import { useMemo, useState, useRef } from "react"
 import styled from "styled-components"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import Flex from "@/components/templates/flex"

src/components/drops/menu/dropdownItem.js

@@ -1,4 +1,3 @@
-import React from "react"
 import styled, { css } from "styled-components"
 import { getColor, getSizeBy } from "@/theme"
 import Flex from "@/components/templates/flex"