@griddo/ax 12.3.0-beta.0 → 12.4.0

package/config/webpackDevServer.config.js

@@ -1,5 +1,4 @@
 const fs = require("fs");
-const errorOverlayMiddleware = require("react-dev-utils/errorOverlayMiddleware");
 const evalSourceMapMiddleware = require("react-dev-utils/evalSourceMapMiddleware");
 const noopServiceWorkerMiddleware = require("react-dev-utils/noopServiceWorkerMiddleware");
 const ignoredFiles = require("react-dev-utils/ignoredFiles");
@@ -9,122 +8,93 @@ const getHttpsConfig = require("./getHttpsConfig");
 
 const host = process.env.HOST || "0.0.0.0";
 const sockHost = process.env.WDS_SOCKET_HOST;
-const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPath = process.env.WDS_SOCKET_PATH;
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function (proxy, allowedHost) {
 	// Merge `public` and `static` paths for development
 	paths.prepareAssetsFolders();
 
+	const disableFirewall = !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === "true";
+
+	// Wire the WDS_SOCKET_* env vars into WDS4's client. In WDS3 these were read at
+	// runtime by CRA's `webpackHotDevClient` (now removed); WDS4 reads them from
+	// `client.webSocketURL` instead. Only override the fields that are actually set so
+	// WDS4 keeps auto-detecting the rest (host/port behind a proxy still works).
+	const webSocketURL = {};
+	if (sockHost) webSocketURL.hostname = sockHost;
+	if (sockPath) webSocketURL.pathname = sockPath;
+	if (sockPort) webSocketURL.port = sockPort;
+	const hasWebSocketOverrides = Object.keys(webSocketURL).length > 0;
+
 	return {
-		// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
-		// websites from potentially accessing local content through DNS rebinding:
-		// https://github.com/webpack/webpack-dev-server/issues/887
-		// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-		// However, it made several existing use cases such as development in cloud
-		// environment or subdomains in development significantly more complicated:
-		// https://github.com/facebook/create-react-app/issues/2271
-		// https://github.com/facebook/create-react-app/issues/2233
-		// While we're investigating better solutions, for now we will take a
-		// compromise. Since our WDS configuration only serves files in the `public`
-		// folder we won't consider accessing them a vulnerability. However, if you
-		// use the `proxy` feature, it gets more dangerous because it can expose
-		// remote code execution vulnerabilities in backends like Django and Rails.
-		// So we will disable the host check normally, but enable it if you have
-		// specified the `proxy` setting. Finally, we let you override it if you
-		// really know what you're doing with a special environment variable.
-		disableHostCheck: !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === "true",
 		// Enable gzip compression of generated files.
 		compress: true,
-		// Silence WebpackDevServer's own logs since they're generally not useful.
-		// It will still show compile warnings and errors with this setting.
-		clientLogLevel: "none",
-		// By default WebpackDevServer serves physical files from current directory
-		// in addition to all the virtual build products that it serves from memory.
-		// This is confusing because those files won’t automatically be available in
-		// production build folder unless we copy them. However, copying the whole
-		// project directory is dangerous because we may expose sensitive files.
-		// Instead, we establish a convention that only files in `public` directory
-		// get served. Our build script will copy `public` into the `build` folder.
-		// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-		// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-		// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-		// Note that we only recommend to use `public` folder as an escape hatch
-		// for files like `favicon.ico`, `manifest.json`, and libraries that are
-		// for some reason broken when imported through webpack. If you just want to
-		// use an image, put it in `src` and `import` it from JavaScript instead.
-		contentBase: paths.appStaticAssetsCache,
-		contentBasePublicPath: paths.publicUrlOrPath,
-		// By default files from `contentBase` will not trigger a page reload.
-		watchContentBase: true,
-		// Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
-		// for the WebpackDevServer client so it can learn when the files were
-		// updated. The WebpackDevServer client is included as an entry point
-		// in the webpack development configuration. Note that only changes
-		// to CSS are currently hot reloaded. JS changes will refresh the browser.
-		hot: true,
-		// Use 'ws' instead of 'sockjs-node' on server since we're using native
-		// websockets in `webpackHotDevClient`.
-		transportMode: "ws",
-		// Prevent a WS client from getting injected as we're already including
-		// `webpackHotDevClient`.
-		injectClient: false,
-		// Enable custom sockjs pathname for websocket connection to hot reloading server.
-		// Enable custom sockjs hostname, pathname and port for websocket connection
-		// to hot reloading server.
-		sockHost,
-		sockPath,
-		sockPort,
-		// It is important to tell WebpackDevServer to use the same "publicPath" path as
-		// we specified in the webpack config. When homepage is '.', default to serving
-		// from the root.
-		// remove last slash so user can land on `/test` instead of `/test/`
-		publicPath: paths.publicUrlOrPath.slice(0, -1),
-		// WebpackDevServer is noisy by default so we emit custom message instead
-		// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-		quiet: true,
-		// Reportedly, this avoids CPU overload on some systems.
-		// https://github.com/facebook/create-react-app/issues/293
-		// src/node_modules is not ignored to support absolute imports
-		// https://github.com/facebook/create-react-app/issues/1065
-		watchOptions: {
-			ignored: ignoredFiles(paths.appSrc),
+		allowedHosts: disableFirewall ? "all" : [allowedHost],
+		static: {
+			directory: paths.appStaticAssetsCache,
+			publicPath: paths.publicUrlOrPath,
+			watch: {
+				ignored: ignoredFiles(paths.appSrc),
+			},
+		},
+		client: {
+			logging: "none",
+			// WDS4's native error overlay is a separate implementation from CRA's
+			// `react-error-overlay` (which used to freeze the page/iframe on runtime
+			// errors — that client is now removed). We keep the compile-error overlay,
+			// which is the useful one, and disable the runtime-error overlay to avoid
+			// blocking the iframe preview.
+			overlay: {
+				errors: true,
+				warnings: false,
+				runtimeErrors: false,
+			},
+			...(hasWebSocketOverrides && { webSocketURL }),
+		},
+		devMiddleware: {
+			publicPath: paths.publicUrlOrPath.slice(0, -1),
+			// webpack-dev-middleware prints stats.toString() with a raw
+			// console.log (not the infrastructure logger), so this is the only
+			// switch that silences the per-build stats dump.
+			stats: "none",
 		},
 		https: getHttpsConfig(),
 		host,
-		overlay: false,
+		hot: true,
+		// Use 'ws' instead of 'sockjs-node' on server since we're using native websockets.
+		webSocketServer: "ws",
 		historyApiFallback: {
 			// Paths with dots should still use the history fallback.
 			// See https://github.com/facebook/create-react-app/issues/387.
 			disableDotRule: true,
 			index: paths.publicUrlOrPath,
 		},
-		public: allowedHost,
-		// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
 		proxy,
-		before(app, server) {
-			// Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
-			// middlewares before `redirectServedPath` otherwise will not have any effect
-			// This lets us fetch source contents from webpack for the error overlay
-			app.use(evalSourceMapMiddleware(server));
-			// This lets us open files from the runtime error overlay.
-			app.use(errorOverlayMiddleware());
+		setupMiddlewares(middlewares, devServer) {
+			// `evalSourceMapMiddleware` must run BEFORE `historyApiFallback`, so unshift it.
+			// This lets us fetch source contents from webpack for the error overlay.
+			middlewares.unshift(evalSourceMapMiddleware(devServer));
 
 			if (fs.existsSync(paths.proxySetup)) {
 				// This registers user provided middleware for proxy reasons
-				require(paths.proxySetup)(app);
+				require(paths.proxySetup)(devServer.app);
 			}
-		},
-		after(app) {
-			// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-			app.use(redirectServedPath(paths.publicUrlOrPath));
 
-			// This service worker file is effectively a 'no-op' that will reset any
-			// previous service worker registered for the same host:port combination.
-			// We do this in development to avoid hitting the production cache if
-			// it used the same host and port.
-			// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-			app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+			// These must run AFTER `historyApiFallback` (push to end), otherwise SPA routes
+			// loaded inside the preview iframe receive the raw JS bundle instead of index.html.
+			middlewares.push(
+				// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+				redirectServedPath(paths.publicUrlOrPath),
+				// This service worker file is effectively a 'no-op' that will reset any
+				// previous service worker registered for the same host:port combination.
+				// We do this in development to avoid hitting the production cache if
+				// it used the same host and port.
+				// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+				noopServiceWorkerMiddleware(paths.publicUrlOrPath),
+			);
+
+			return middlewares;
 		},
 	};
 };

package/config/webpackSchemas.config.js

@@ -6,7 +6,9 @@ const createConfig = ({ input, output }) => ({
 	entry: input,
 	output: {
 		...output,
-		library: "griddo",
+		// No library name on purpose: webpack 4 ignored it for commonjs2, but webpack 5
+		// appends it to the prefix (module.exports.griddo = ...), which would break the
+		// `_griddoConfig.default` read in scripts/griddo-sync-schemas.js.
 		libraryTarget: "commonjs2",
 	},
 	resolve: {
@@ -47,6 +49,9 @@ module.exports = (withExternalConfig) => {
 
 	return new Promise((resolve, reject) => {
 		compiler.run((err, stats) => {
+			// Flush webpack 5's persistent cache before resolving/rejecting.
+			compiler.close(() => {});
+
 			if (err) {
 				console.log(err);
 				return reject(err);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.3.0-beta.0",
+	"version": "12.4.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -26,15 +26,15 @@
 		"start:dev": "node --env-file=./env/.env.development ./scripts/start.js",
 		"start:staging": "node --env-file=./env/.env.staging ./scripts/start.js",
 		"// BUILD": "",
-		"build": "NODE_OPTIONS=--openssl-legacy-provider node ./scripts/build.js",
-		"build:dev": "NODE_OPTIONS=--openssl-legacy-provider node --env-file=./env/.env.development ./scripts/build.js",
+		"build": "node ./scripts/build.js",
+		"build:dev": "node --env-file=./env/.env.development ./scripts/build.js",
 		"// TEST": "",
-		"test": "jest",
-		"test:watch": "jest --watch",
-		"test:ci": "jest --runInBand",
-		"test:coverage": "jest --coverage ",
-		"test:dev": "npm run test -- --watch",
-		"test:dev:coverage": "npm run test:coverage -- --watch",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:ci": "vitest run --no-file-parallelism",
+		"test:coverage": "vitest run --coverage",
+		"test:dev": "vitest",
+		"test:dev:coverage": "vitest --coverage",
 		"// LINT": "",
 		"lint": "biome check",
 		"format:write": "biome format --write"
@@ -46,7 +46,7 @@
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.16",
 		"@styled-system/prop-types": "5.1.5",
 		"@styled-system/theme-get": "5.1.2",
-		"@svgr/webpack": "5.5.0",
+		"@svgr/webpack": "^8.1.0",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/user-event": "14.6.1",
@@ -68,17 +68,16 @@
 		"@types/uuid": "8.3.4",
 		"@types/webpack-env": "1.18.0",
 		"axios": "0.19.0",
-		"babel-loader": "8.2.2",
+		"babel-loader": "^9.2.1",
 		"babel-plugin-named-asset-import": "0.3.8",
-		"babel-plugin-require-context-hook": "1.0.0",
 		"babel-plugin-root-import": "6.6.0",
 		"babel-plugin-styled-components": "2.1.4",
 		"babel-preset-react-app": "10.1.0",
 		"case-sensitive-paths-webpack-plugin": "2.4.0",
 		"compress.js": "1.2.2",
 		"connected-react-router": "6.9.3",
-		"css-loader": "4.3.0",
-		"css-minimizer-webpack-plugin": "3.0.2",
+		"css-loader": "^6.11.0",
+		"css-minimizer-webpack-plugin": "^5.0.0",
 		"date-fns": "2.30.0",
 		"dotenv": "6.2.0",
 		"dotenv-expand": "5.1.0",
@@ -87,34 +86,30 @@
 		"draftjs-to-html": "0.9.1",
 		"enhanced-resolve": "5.18.1",
 		"env-cmd": "10.1.0",
-		"file-loader": "6.2.0",
 		"find-up": "5.0.0",
 		"fs-extra": "7.0.1",
 		"html-to-draftjs": "1.5.0",
 		"html-to-image": "1.11.7",
-		"html-webpack-plugin": "4.5.0",
-		"identity-obj-proxy": "3.0.0",
+		"html-webpack-plugin": "^5.5.0",
 		"ignore-loader": "0.1.2",
 		"is-wsl": "3.1.0",
 		"jsdom": "20.0.3",
 		"jsdom-global": "3.0.2",
 		"lodash.isequal": "4.5.0",
 		"markdown-draft-js": "2.4.0",
-		"mini-css-extract-plugin": "0.11.3",
-		"optimize-css-assets-webpack-plugin": "6.0.1",
+		"mini-css-extract-plugin": "^2.7.0",
+		"node-polyfill-webpack-plugin": "^3.0.0",
 		"pkg-dir": "5.0.0",
-		"pnp-webpack-plugin": "1.7.0",
 		"polished": "3.4.1",
 		"postcss": "8.5.3",
-		"postcss-flexbugs-fixes": "4.1.0",
-		"postcss-loader": "3.0.0",
+		"postcss-flexbugs-fixes": "^5.0.2",
+		"postcss-loader": "^7.3.0",
 		"postcss-normalize": "7.0.1",
 		"postcss-preset-env": "6.7.0",
-		"postcss-safe-parser": "6.0.0",
 		"react": "18.2.0",
 		"react-app-polyfill": "1.0.6",
 		"react-datepicker": "4.25.0",
-		"react-dev-utils": "11.0.4",
+		"react-dev-utils": "^12.0.1",
 		"react-dom": "18.2.0",
 		"react-draft-wysiwyg": "1.15.0",
 		"react-easy-crop": "5.5.7",
@@ -135,24 +130,21 @@
 		"resolve": "1.22.10",
 		"resolve-url-loader": "4.0.0",
 		"sass-alias": "1.0.5",
-		"sass-loader": "10.4.1",
+		"sass-loader": "^16.0.7",
 		"semver": "7.6.3",
 		"slick-carousel": "1.8.1",
 		"source-map-loader": "1.1.3",
 		"string-replace-loader": "3.1.0",
-		"style-loader": "1.3.0",
+		"style-loader": "^3.3.0",
 		"styled-components": "5.3.11",
 		"styled-reset": "4.0.1",
 		"styled-system": "5.1.5",
-		"terser-webpack-plugin": "1.4.1",
-		"ts-pnp": "1.1.4",
+		"terser-webpack-plugin": "^5.3.0",
 		"typescript": "4.9.5",
-		"url-loader": "4.1.1",
 		"uuid": "8.3.2",
-		"webpack": "4.47.0",
-		"webpack-dev-server": "3.11.1",
-		"webpack-manifest-plugin": "2.2.0",
-		"workbox-webpack-plugin": "5.1.4"
+		"webpack": "^5.88.0",
+		"webpack-dev-server": "^4.15.0",
+		"webpack-manifest-plugin": "^5.0.0"
 	},
 	"devDependencies": {
 		"@babel/core": "7.26.10",
@@ -165,35 +157,23 @@
 		"@babel/preset-react": "7.26.3",
 		"@babel/preset-typescript": "7.26.0",
 		"@biomejs/biome": "2.3.8",
-		"@types/jest": "27.5.2",
 		"@types/redux-mock-store": "1.0.3",
+		"@vitest/coverage-v8": "4.1.6",
 		"axios-mock-adapter": "1.22.0",
-		"babel-jest": "27.5.1",
-		"jest": "27.5.1",
-		"jest-environment-jsdom": "27.5.1",
-		"jest-environment-jsdom-fourteen": "0.1.0",
-		"jest-mock-extended": "2.0.9",
-		"jest-resolve": "24.9.0",
-		"jest-styled-components": "7.1.1",
-		"jest-watch-typeahead": "0.4.0",
 		"prettier": "3.4.2",
 		"react-test-renderer": "18.2.0",
 		"redux-mock-store": "1.5.5",
 		"redux-thunk": "2.4.2",
-		"ts-jest": "27.1.5",
-		"ts-node": "10.9.2"
+		"ts-node": "10.9.2",
+		"vite": "7.0.2",
+		"vitest": "4.1.6",
+		"vitest-mock-extended": "5.1.1",
+		"vitest-styled-components": "1.0.0"
 	},
 	"babel": {
 		"presets": [
 			"react-app"
-		],
-		"env": {
-			"test": {
-				"plugins": [
-					"require-context-hook"
-				]
-			}
-		}
+		]
 	},
 	"browserslist": {
 		"production": [
@@ -219,5 +199,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "073925ad301a49b5b44f3d838fb4259cb9681a3c"
+	"gitHead": "e78fd612e55753bf9a04aa1e4020b582be9026af"
 }

package/public/img/icons/markdown.svg

@@ -0,0 +1,6 @@
+<svg width="72" height="81" viewBox="0 0 72 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C8.79086 0 7 1.79086 7 4V77C7 79.2091 8.79086 81 11 81H62C64.2091 81 66 79.2091 66 77V21.5663C66 20.5593 65.6202 19.5894 64.9364 18.8502L48.6875 1.28383C47.9304 0.465349 46.8661 0 45.7511 0H11Z" fill="#9BB320"/>
+<path d="M46.5 20.5V3L62.5 20.5H46.5Z" fill="white"/>
+<rect y="28" width="72" height="33" rx="5" fill="#9BB320"/>
+<path d="M14.7738 34.1364H20.0835L25.6914 47.8182H25.93L31.538 34.1364H36.8477V54.5H32.6715V41.2457H32.5025L27.2326 54.4006H24.3888L19.119 41.196H18.9499V54.5H14.7738V34.1364ZM47.6136 54.5H40.3949V34.1364H47.6733C49.7216 34.1364 51.4848 34.544 52.9631 35.3594C54.4413 36.1681 55.5781 37.3314 56.3736 38.8494C57.1757 40.3674 57.5767 42.1837 57.5767 44.2983C57.5767 46.4195 57.1757 48.2424 56.3736 49.767C55.5781 51.2917 54.4347 52.4616 52.9432 53.277C51.4583 54.0923 49.6818 54.5 47.6136 54.5ZM44.7003 50.8111H47.4347C48.7074 50.8111 49.7779 50.5857 50.6463 50.1349C51.5213 49.6776 52.1776 48.9716 52.6151 48.017C53.0592 47.0559 53.2812 45.8163 53.2812 44.2983C53.2812 42.7936 53.0592 41.5639 52.6151 40.6094C52.1776 39.6548 51.5246 38.9522 50.6562 38.5014C49.7879 38.0507 48.7173 37.8253 47.4446 37.8253H44.7003V50.8111Z" fill="white"/>
+</svg>

package/scripts/build.js

@@ -143,6 +143,10 @@ function build(previousFileSizes) {
 			} else {
 				messages = formatWebpackMessages(stats.toJson({ all: false, warnings: true, errors: true }));
 			}
+
+			// Flush webpack 5's persistent filesystem cache to disk before resolving.
+			compiler.close(() => {});
+
 			if (messages.errors.length) {
 				// Only keep the first error. Others are often indicative
 				// of the same problem, but confuse the reader with noise.

package/scripts/start.js

@@ -62,29 +62,58 @@ checkBrowsers(paths.appPath, isInteractive)
 		const useTypeScript = fs.existsSync(paths.appTsConfig);
 		const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === "true";
 		const urls = prepareUrls(protocol, HOST, port, paths.publicUrlOrPath.slice(0, -1));
-		const devSocket = {
-			warnings: (warnings) => devServer.sockWrite(devServer.sockets, "warnings", warnings),
-			errors: (errors) => devServer.sockWrite(devServer.sockets, "errors", errors),
-		};
 		// Create a webpack compiler that is configured with custom messages.
 		const compiler = createCompiler({
 			appName,
 			config,
-			devSocket,
 			urls,
 			useYarn,
 			useTypeScript,
 			tscCompileOnError,
 			webpack,
 		});
+		// Replace CRA's "You can now view..." block with the Griddo banner.
+		// Registered after createCompiler so it runs after CRA's done-hook:
+		// clean builds clear that output, builds with warnings keep it visible.
+		const { version } = require(paths.appPackageJson);
+		const banner = [
+			chalk.cyan(" ██████╗ ██████╗ ██╗██████╗ ██████╗  ██████╗    █████╗ ██╗  ██╗"),
+			chalk.cyan("██╔════╝ ██╔══██╗██║██╔══██╗██╔══██╗██╔═══██╗  ██╔══██╗╚██╗██╔╝"),
+			chalk.cyan("██║  ███╗██████╔╝██║██║  ██║██║  ██║██║   ██║  ███████║ ╚███╔╝"),
+			chalk.cyan("██║   ██║██╔══██╗██║██║  ██║██║  ██║██║   ██║  ██╔══██║ ██╔██╗"),
+			chalk.cyan("╚██████╔╝██║  ██║██║██████╔╝██████╔╝╚██████╔╝  ██║  ██║██╔╝ ██╗"),
+			chalk.cyan(" ╚═════╝ ╚═╝  ╚═╝╚═╝╚═════╝ ╚═════╝  ╚═════╝   ╚═╝  ╚═╝╚═╝  ╚═╝"),
+			chalk.dim(`v${version}`),
+			"",
+			chalk.dim("─".repeat(63)),
+			"",
+			`${chalk.bold("Local:")}            ${urls.localUrlForTerminal}`,
+			...(urls.lanUrlForTerminal ? [`${chalk.bold("On Your Network:")}  ${urls.lanUrlForTerminal}`] : []),
+		]
+			.map((line) => `  ${line}`)
+			.join("\n");
+		compiler.hooks.done.tap("griddoStartBanner", (stats) => {
+			const statsData = stats.toJson({ all: false, errors: true, warnings: true });
+			if (statsData.errors.length) {
+				return;
+			}
+			if (isInteractive && !statsData.warnings.length) {
+				clearConsole();
+			}
+			console.log(`\n${banner}\n`);
+		});
 		// Load proxy config
 		const proxySetting = require(paths.appPackageJson).proxy;
 		const proxyConfig = prepareProxy(proxySetting, paths.appPublic, paths.publicUrlOrPath);
 		// Serve webpack assets generated by the compiler over a web server.
-		const serverConfig = createDevServerConfig(proxyConfig, urls.lanUrlForConfig);
-		const devServer = new WebpackDevServer(compiler, serverConfig);
-		// Launch WebpackDevServer.
-		devServer.listen(port, HOST, (err) => {
+		const serverConfig = {
+			...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+			host: HOST,
+			port,
+		};
+		const devServer = new WebpackDevServer(serverConfig, compiler);
+		// Launch WebpackDevServer (WDS4 replaces `listen(port, host, cb)` with `startCallback(cb)`).
+		devServer.startCallback((err) => {
 			if (err) {
 				return console.log(err);
 			}

package/src/__tests__/components/ActionMenu/ActionMenu.test.tsx

@@ -17,12 +17,12 @@ describe("Action menu component rendering", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -48,12 +48,12 @@ describe("Action menu events", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -82,7 +82,7 @@ describe("Action menu events", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 					helpText,
 				},
 			],
@@ -111,13 +111,13 @@ describe("Action menu events", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 					color: true,
 				},
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -146,12 +146,12 @@ describe("Action menu events", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -178,7 +178,7 @@ describe("Action menu events", () => {
 	});
 
 	it("should call action on item click and hide component", () => {
-		const actionMock = jest.fn();
+		const actionMock = vi.fn();
 		const defaultProps: IActionMenuProps = {
 			icon: "more",
 			options: [
@@ -210,7 +210,7 @@ describe("Action menu events", () => {
 	});
 
 	it("should show disabled item", () => {
-		const actionMock = jest.fn();
+		const actionMock = vi.fn();
 		const defaultProps: IActionMenuProps = {
 			icon: "more",
 			options: [
@@ -223,7 +223,7 @@ describe("Action menu events", () => {
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};

package/src/__tests__/components/Breadcrumb/Breadcrumb.test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
 import { render, cleanup, screen, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import "@testing-library/jest-dom";
 
 import { parseTheme } from "@ax/helpers";
@@ -83,7 +83,7 @@ describe("Breadcrumb component rendering", () => {
 		];
 
 		defaultProps.breadcrumb = breadcrumbItemMock;
-		const setSelectedContentMock = jest.fn();
+		const setSelectedContentMock = vi.fn();
 		defaultProps.setSelectedContent = setSelectedContentMock;
 
 		render(