Fix/downgrade sb 6.4.2

.babelrc

@@ -1,7 +1,9 @@
 {
     "plugins": [
         "react-hot-loader/babel",
-        "@babel/plugin-proposal-class-properties",
+        ["@babel/plugin-proposal-class-properties",{"loose":true}],
+        ["@babel/plugin-transform-private-methods",{"loose":true}],
+        ["@babel/plugin-transform-private-property-in-object",{"loose":true}],
         "@babel/plugin-transform-destructuring",
         "@babel/plugin-proposal-object-rest-spread",
         "@babel/plugin-proposal-nullish-coalescing-operator",
@@ -20,6 +22,7 @@
     "env": {
         "testing": {
             "presets":[
+                "@babel/typescript",
                 "@babel/preset-env",
                 "@babel/preset-react"
             ]

.creevey/creevey.config.js

@@ -1,16 +1,21 @@
 const path = require("path");
+const { hybridStoriesProvider } = require("creevey");
 
 module.exports = {
+    storiesProvider: hybridStoriesProvider,
+    testsRegex: /.creevey.(t|j)s$/,
+    testsDir: path.join(__dirname, "src"),
     useDocker: true,
     storybookUrl: "http://localhost:9001",
+    storybookDir: path.join(__dirname, "../.storybook"),
     screenDir: path.join(__dirname, "images"),
     reportDir: path.join(__dirname, "report"),
     maxRetries: 2,
     browsers: {
         chrome: {
             browserName: "chrome",
             platformName: "linux",
-            viewport: { width: 1024, height: 720 },
-        }
+            viewport: { width: 1280, height: 720 },
+        },
     },
 };

.creevey/src/SearchSelector.creevey.ts

@@ -0,0 +1,16 @@
+import { kind, story, test } from "creevey";
+
+kind("SearchSelector", () => {
+    story("default", () => {
+        test("clickTest", async function () {
+            const simple = await this.takeScreenshot();
+
+            const selector = this.browser.findElement({ css: "#selector" });
+            await this.browser.actions().move({ origin: selector }).perform();
+            await this.browser.actions().click().perform();
+            const clicked = await this.takeScreenshot();
+
+            await this.expect({ simple, clicked }).to.matchImages();
+        });
+    });
+});

.creevey/src/TriggerListItem.creevey.ts

@@ -0,0 +1,57 @@
+import { kind, story, test } from "creevey";
+
+const moveToElement = async () => {
+    test("moveToElement", async function () {
+        const moveToElement = async (selector: string) => {
+            const element = await this.browser.findElement({
+                css: selector,
+            });
+            await this.browser.actions({ bridge: true }).move({ origin: element }).perform();
+        };
+
+        const simple = await this.browser.takeScreenshot();
+
+        await moveToElement('a[data-tid="TriggerListItem_header"]');
+        const headerHovered = await this.browser.takeScreenshot();
+
+        await moveToElement('button[data-tid^="tag_"]');
+        const tagHovered = await this.browser.takeScreenshot();
+
+        await moveToElement('div[data-tid="TriggerListItem_status"]');
+        const statusHovered = await this.browser.takeScreenshot();
+        await this.browser.actions().click().perform();
+        const statusClicked = await this.browser.takeScreenshot();
+
+        await this.browser.sleep(1000);
+        await this.expect({
+            simple,
+            statusHovered,
+            statusClicked,
+            headerHovered,
+            tagHovered,
+        }).to.matchImages();
+    });
+};
+
+kind("TriggerListItem", () => {
+    const storiesToTest = [
+        "Default",
+        "Long trigger name",
+        "Large counters",
+        "Few states",
+        "No metrics",
+        "Lot targets",
+        "One long target name",
+        "Short tags",
+        "Long tags",
+        "Lot tags",
+        "Throttling flag",
+        "Lot of all data",
+        "Exception state",
+    ];
+    return storiesToTest.map((storyName) => {
+        return story(`${storyName}`, () => {
+            moveToElement();
+        });
+    });
+});

.gitignore

@@ -5,3 +5,4 @@
 /build
 .idea/
 .vscode/
+storybook-static/

.storybook/main.js

@@ -1,15 +1,18 @@
 module.exports = {
-    stories: ['../src/Stories/**/*.stories.tsx'],
-    addons: [
-        "creevey",
-    ],
-    webpackFinal: async (config, { configType }) => {
-        config.module.rules = config.module.rules.filter(rule => rule.test.toString() !== "/\\.css$/");
+    stories: ["../src/**/*.stories.mdx", "../src/Stories/**/*.stories.tsx"],
+    addons: ["creevey"],
+    framework: "@storybook/react",
+    core: {
+        builder: "@storybook/builder-webpack5",
+    },
 
+    webpackFinal: async (config, { configType }) => {
+        config.module.rules = config.module.rules.filter(
+            (rule) => rule.toString().test !== "/\\.css$/"
+        );
         config.module.rules.push({
-            test: /\.(css|less)$/,
+            test: /\.less$/i,
             use: [
-                "classnames-loader",
                 "style-loader",
                 {
                     loader: "css-loader",
@@ -23,18 +26,17 @@ module.exports = {
 
         config.module.rules.push({
             test: /\.(ts|tsx)$/,
-            loader: require.resolve('babel-loader'),
+            loader: require.resolve("babel-loader"),
         });
 
         config.resolve.extensions.push(".ts", ".tsx");
         config.resolve.modules = ["node_modules", "local_modules"];
 
         return config;
     },
+
     typescript: {
-        check: false,
-        checkOptions: {},
-        reactDocgen: 'react-docgen-typescript',
+        reactDocgen: "react-docgen-typescript-plugin",
         reactDocgenTypescriptOptions: {
             shouldExtractLiteralValuesFromEnum: true,
             propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),

package.json

@@ -3,15 +3,15 @@
     "version": "1.1.0",
     "license": "MIT",
     "scripts": {
-        "serve": "webpack-dev-server --mode=development",
-        "start": "npm-run-all --parallel serve fakeapi",
+        "serve": "webpack-dev-server --mode=development --static ./dist",
+        "start": "npm-run-all --parallel serve fakeapi ",
         "start:dev-proxy": "yarn serve --config webpack.config.dev-proxy.js",
         "start:docker": "npm-run-all --parallel backend start:docker-proxy",
         "start:docker-proxy": "yarn serve --config webpack.config.docker-proxy.js",
         "backend": "docker-compose -f src/tests/core/api/docker-compose.yml up",
         "build": "webpack --mode=production",
-        "storybook": "cross-env NODE_ENV=development start-storybook -p 9001 -c .storybook --ci",
-        "storybook:ci": "yarn storybook -- --ci --quiet",
+        "storybook": "cross-env NODE_ENV=development start-storybook dev -p 9001 -c .storybook --ci ",
+        "storybook:ci": "yarn storybook --ci --quiet",
         "fakeapi": "json-server --watch fakeapi/db.json --routes fakeapi/routes.json --port 9002",
         "lint": "eslint --ext .tsx --ext .ts src/",
         "test": "cross-env NODE_ENV=testing jest \"./src\"",
@@ -28,16 +28,16 @@
         }
     },
     "dependencies": {
-        "@skbkontur/react-icons": "4.1.0",
+        "@skbkontur/react-icons": "^5.2.9",
         "@skbkontur/react-stack-layout": "1.0.3",
-        "@skbkontur/react-ui": "2.17.4",
+        "@skbkontur/react-ui": "^4.16.0",
         "@skbkontur/react-ui-validations": "1.1.3",
         "color-hash": "1.0.3",
         "date-fns": "2.9.0",
         "dompurify": "2.2.6",
         "file-saver": "2.0.2",
         "husky": "4.2.3",
-        "jest": "24.5.0",
+        "jest": "^29.7.0",
         "lodash": "^4.17.21",
         "npm-run-all": "4.1.5",
         "numeral": "2.0.6",
@@ -59,15 +59,19 @@
         "@babel/plugin-proposal-class-properties": "7.8.3",
         "@babel/plugin-proposal-object-rest-spread": "7.9.5",
         "@babel/plugin-transform-destructuring": "7.9.5",
+        "@babel/plugin-transform-private-methods": "7.22.5",
+        "@babel/plugin-transform-private-property-in-object": "7.22.11",
         "@babel/polyfill": "7.2.5",
         "@babel/preset-env": "7.9.5",
         "@babel/preset-react": "7.9.4",
         "@babel/preset-typescript": "7.13.0",
         "@babel/register": "7.9.0",
         "@hot-loader/react-dom": "16.13.0",
-        "@storybook/addon-actions": "^5.3.17",
-        "@storybook/addons": "^5.3.17",
-        "@storybook/react": "^5.3.17",
+        "@storybook/addon-actions": "6.4.22",
+        "@storybook/addons": "6.4.22",
+        "@storybook/builder-webpack5": "6.4.22",
+        "@storybook/manager-webpack5": "6.4.22",
+        "@storybook/react": "6.4.22",
         "@types/classnames": "2.2.10",
         "@types/color-hash": "^1.0.0",
         "@types/dompurify": "2.2.1",
@@ -89,10 +93,9 @@
         "babel-loader": "8.0.5",
         "babel-plugin-module-resolver": "4.0.0",
         "classnames": "2.2.6",
-        "classnames-loader": "2.1.0",
-        "creevey": "0.7.39",
+        "creevey": "0.9.0-non-webpack.2",
         "cross-env": "5.2.0",
-        "css-loader": "4.0.0",
+        "css-loader": "^6.8.1",
         "dotenv": "^16.3.1",
         "eslint": "7.7.0",
         "eslint-config-prettier": "6.11.0",
@@ -103,26 +106,28 @@
         "eslint-plugin-react": "7.20.6",
         "eslint-plugin-react-hooks": "4.1.0",
         "file-loader": "6.0.0",
-        "html-webpack-plugin": "3.2.0",
+        "html-loader": "^4.2.0",
+        "html-webpack-plugin": "^5.5.3",
         "jest-puppeteer": "4.4.0",
         "json-server": "0.16.3",
-        "less": "3.12.2",
-        "less-loader": "6.2.0",
-        "mini-css-extract-plugin": "^0.9.0",
+        "less": "^4.2.0",
+        "less-loader": "^11.1.3",
+        "mini-css-extract-plugin": "^2.7.6",
         "mockdate": "3.0.2",
         "prettier": "2.0.5",
         "puppeteer": "5.2.1",
         "react-docgen-typescript-plugin": "0.6.0",
         "react-window": "^1.8.9",
         "regenerator-runtime": "^0.13.5",
         "storybook-react-router": "1.0.8",
-        "style-loader": "^1.2.1",
+        "style-loader": "^3.3.3",
+        "terser-webpack-plugin": "^5.3.9",
         "typescript": "4.0.2",
         "wait-on": "^4.0.1",
-        "webpack": "4.44.0",
-        "webpack-bundle-analyzer": "^3.8.0",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "^3.11.0",
+        "webpack": "^5.88.2",
+        "webpack-bundle-analyzer": "^4.9.1",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1",
         "webpack-merge": "^5.9.0"
     },
     "resolutions": {

src/Components/A11yButtonWrapper/A11yButtonWrapper.tsx

@@ -1,5 +1,9 @@
 import * as React from "react";
-import cn from "./A11yButtonWrapper.less";
+import classNames from "classnames/bind";
+
+import styles from "./A11yButtonWrapper.less";
+
+const cn = classNames.bind(styles);
 
 type Props = {
     children: React.ReactNode;

src/Components/AddingButton/AddingButton.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
-import cn from "./AddingButton.less";
+import classNames from "classnames/bind";
+
+import styles from "./AddingButton.less";
+
+const cn = classNames.bind(styles);
 
 interface IAddingButtonProps {
     to: string;

src/Components/Bar/Bar.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 import WarningIcon from "@skbkontur/react-icons/Warning";
-import cn from "./Bar.less";
+import classNames from "classnames/bind";
+
+import styles from "./Bar.less";
+
+const cn = classNames.bind(styles);
 
 type Props = {
     message: string;

src/Components/CodeRef/CodeRef.tsx

@@ -1,5 +1,9 @@
 import * as React from "react";
-import cn from "./CodeRef.less";
+import classNames from "classnames/bind";
+
+import styles from "./CodeRef.less";
+
+const cn = classNames.bind(styles);
 
 export default function CodeRef({ children }: { children: React.ReactNode }): React.ReactElement {
     return <span className={cn("code-ref")}>{children}</span>;

src/Components/ContactEditForm/ContactEditForm.tsx

@@ -6,7 +6,11 @@ import { Remarkable } from "remarkable";
 import { ContactConfig } from "../../Domain/Config";
 import { Contact } from "../../Domain/Contact";
 import ContactTypeIcon from "../ContactTypeIcon/ContactTypeIcon";
-import cn from "./ContactEditForm.less";
+import classNames from "classnames/bind";
+
+import styles from "./ContactEditForm.less";
+
+const cn = classNames.bind(styles);
 
 const md = new Remarkable({ breaks: true });
 

src/Components/ContactList/ContactList.tsx

@@ -9,8 +9,11 @@ import { ContactConfig } from "../../Domain/Config";
 import NewContactModal from "../NewContactModal/NewContactModal";
 import ContactEditModal from "../ContactEditModal/ContactEditModal";
 import ContactTypeIcon from "../ContactTypeIcon/ContactTypeIcon";
+import classNames from "classnames/bind";
 
-import cn from "./ContactList.less";
+import styles from "./ContactList.less";
+
+const cn = classNames.bind(styles);
 
 type Props = {
     items: Array<Contact>;

src/Components/ContactSelect/ContactSelect.tsx

@@ -8,7 +8,11 @@ import { notUndefined } from "../../helpers/common";
 import A11yButtonWrapper from "../A11yButtonWrapper/A11yButtonWrapper";
 import ContactInfo from "../ContactInfo/ContactInfo";
 import ContactTypeIcon from "../ContactTypeIcon/ContactTypeIcon";
-import cn from "./ContactSelect.less";
+import classNames from "classnames/bind";
+
+import styles from "./ContactSelect.less";
+
+const cn = classNames.bind(styles);
 
 type Props = {
     contactIds: Array<string>;

src/Components/EventList/EventList.tsx

@@ -4,7 +4,11 @@ import ArrowBoldRightIcon from "@skbkontur/react-icons/ArrowBoldRight";
 import { Event } from "../../Domain/Event";
 import StatusIndicator from "../StatusIndicator/StatusIndicator";
 import MetricValues from "../MetricValues/MetricValues";
-import cn from "./EventList.less";
+import classNames from "classnames/bind";
+
+import styles from "./EventList.less";
+
+const cn = classNames.bind(styles);
 
 type Props = {
     items: {