Refresh components, theme and tooltip for a modern instrument-panel look (v5.6.0)

.gitignore

@@ -11,3 +11,5 @@ coverage/
 dist
 coverage
 storybook-static/
+visual/test-results/
+visual/report/

.storybook/preview.js

@@ -5,6 +5,8 @@ import { DarkTheme } from "@/theme/dark"
 import { GlobalStyles } from "@/global-styles"
 import Flex from "@/components/templates/flex"
 
+const themes = { light: DefaultTheme, dark: DarkTheme }
+
 const preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -20,7 +22,18 @@ const preview = {
 
   decorators: [
     (Story, context) => {
-      const theme = context.globals.theme === "dark" ? DarkTheme : DefaultTheme
+      const theme = themes[context.globals.theme] || DefaultTheme
+
+      // Docs pages render many stories inline, so a full-viewport frame would give each one a screen of whitespace.
+      if (context.viewMode === "docs")
+        return (
+          <ThemeProvider theme={theme}>
+            <GlobalStyles />
+            <Flex background="mainBackground" padding={[6]} justifyContent="center" round={1.5}>
+              <Story />
+            </Flex>
+          </ThemeProvider>
+        )
 
       return (
         <ThemeProvider theme={theme}>
@@ -49,7 +62,10 @@ export const globalTypes = {
     toolbar: {
       title: "Theme",
       icon: "circlehollow",
-      items: ["light", "dark"],
+      items: [
+        { value: "light", title: "Light" },
+        { value: "dark", title: "Dark" },
+      ],
       dynamicTitle: true,
     },
   },

jest/config.js

@@ -28,7 +28,7 @@ module.exports = {
   },
   testPathIgnorePatterns: ["/node_modules/"],
   transformIgnorePatterns: [
-    "/node_modules/(?!(strip-indent|redent|@testing-library/jest-dom)/)",
+    "/node_modules/(?!(strip-indent|redent|@testing-library/jest-dom|@storybook|storybook)/)",
   ],
   reporters: ["default"],
   cacheDirectory: "<rootDir>/.jest-tmp",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.5.16",
+  "version": "5.6.0",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
@@ -30,7 +30,10 @@
     "prepublishOnly": "yarn clean && yarn build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "format": "prettier --write \"**/*.{js,mjs}\""
+    "format": "prettier --write \"**/*.{js,mjs}\"",
+    "visual:build": "storybook build -o storybook-static --quiet",
+    "test:visual": "yarn visual:build && docker run --rm --ipc=host -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.62.1-noble npx playwright test -c visual/playwright.config.js",
+    "test:visual:update": "yarn visual:build && docker run --rm --ipc=host -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.62.1-noble npx playwright test -c visual/playwright.config.js --update-snapshots"
   },
   "keywords": [
     "netdata",
@@ -43,6 +46,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@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",
     "@styled-system/css": "^5.1.5",
     "@tanstack/react-table": "^8.21.3",
@@ -69,6 +73,7 @@
     "@babel/plugin-transform-runtime": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
+    "@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",