Chore/source maps

.babelrc

@@ -1,29 +1,8 @@
-{
-    "plugins": [
-        "react-hot-loader/babel",
-        ["@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"
-    ],
-    "presets": [
-        [
-            "@babel/preset-env",
-            {
-                "modules": false
-            }
-        ],
-        "@babel/typescript",
-        "@babel/preset-react"
-    ],
-    "env": {
-        "testing": {
-            "presets":[
-                "@babel/typescript",
-                "@babel/preset-env",
-                "@babel/preset-react"
-            ]
-        }
+{"env": {
+    "testing": {
+        "presets":[
+            "@babel/typescript",
+            "@babel/preset-env"
+        ]
     }
-}
+}}

.gitignore

@@ -6,3 +6,4 @@
 .idea/
 .vscode/
 storybook-static/
+yarn-error.log

.storybook/main.js

@@ -26,7 +26,7 @@ module.exports = {
 
         config.module.rules.push({
             test: /\.(ts|tsx)$/,
-            loader: require.resolve("babel-loader"),
+            loader: require.resolve("ts-loader"),
         });
 
         config.resolve.extensions.push(".ts", ".tsx");

.storybook/preview.js

@@ -1,5 +1,14 @@
 import "reflect-metadata";
 import "../src/style.less";
+import { MemoryRouter } from "react-router";
+
+export const decorators = [
+    (Story) => (
+        <MemoryRouter initialEntries={["/"]}>
+            <Story />
+        </MemoryRouter>
+    ),
+];
 
 export const parameters = {
     actions: { argTypesRegex: "^on[A-Z].*" },

package.json

@@ -27,7 +27,6 @@
     },
     "dependencies": {
         "@clavinjune/codemirror-metricsql": "^0.0.1-dev.1010230001",
-        "@codemirror/basic-setup": "^0.20.0",
         "@lezer/highlight": "^1.1.6",
         "@skbkontur/react-icons": "^5.2.9",
         "@skbkontur/react-stack-layout": "1.0.3",
@@ -46,7 +45,6 @@
         "query-string": "6.4.0",
         "react": "^16.14.0",
         "react-animate-height": "^2.0.23",
-        "react-codemirror2": "^7.2.1",
         "react-dom": "^16.14.0",
         "react-foco": "1.2.0",
         "react-hot-loader": "4.13.0",
@@ -60,19 +58,10 @@
         "uuid": "^9.0.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.23.0",
-        "@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.22.20",
-        "@babel/preset-react": "7.9.4",
-        "@babel/preset-typescript": "7.13.0",
-        "@babel/register": "7.9.0",
+        "@babel/core": "^7.23.3",
+        "@babel/preset-env": "^7.23.3",
         "@hot-loader/react-dom": "16.13.0",
-        "@lezer/generator": "^1.5.1",
+        "@lezer/generator": "1.0.0",
         "@storybook/addon-actions": "6.4.22",
         "@storybook/addons": "6.4.22",
         "@storybook/builder-webpack5": "6.4.22",
@@ -91,13 +80,9 @@
         "@types/react-dom": "16.9.8",
         "@types/react-router-dom": "5.1.5",
         "@types/react-window": "^1.8.5",
-        "@types/storybook-react-router": "1.0.4",
         "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^6.9.0",
         "@typescript-eslint/parser": "^6.9.0",
-        "babel-eslint": "10.1.0",
-        "babel-loader": "^9.1.3",
-        "babel-plugin-module-resolver": "5.0.0",
         "classnames": "2.2.6",
         "creevey": "0.9.0-non-webpack.2",
         "cross-env": "5.2.0",
@@ -126,9 +111,9 @@
         "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": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",
+        "ts-loader": "^9.5.1",
         "typescript": "^5.2.2",
         "wait-on": "^4.0.1",
         "webpack": "^5.88.2",

src/Components/HighlightInput/CodeEditor.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { EditorState, basicSetup } from "@codemirror/basic-setup";
-import { EditorView, keymap } from "@codemirror/view";
+import { keymap } from "@codemirror/view";
 import { defaultKeymap } from "@codemirror/commands";
 import { indentOnInput, foldAll } from "@codemirror/language";
 import { graphiteLanguage } from "../../TriggerGrammar/graphiteLanguage";
@@ -11,7 +10,8 @@ import TriggerSource, { TriggerTargetProblem } from "../../Domain/Trigger";
 import { formatQuery } from "./formatQuery";
 import { TargetQueryEntityColors } from "../../Domain/Target";
 import { PromQLExtension } from "@clavinjune/codemirror-metricsql";
-import { TransactionSpec, EditorSelection } from "@codemirror/state";
+import { basicSetup, EditorView } from "codemirror";
+import { TransactionSpec, EditorSelection, EditorState } from "@codemirror/state";
 import classNames from "classnames/bind";
 
 import styles from "./HighlightInput.less";

src/Components/TriggerInfo/TriggerInfo.less

@@ -48,7 +48,7 @@
             overflow: hidden;
         }
         &.codeEditor {
-            margin-left: -14px;
+            margin-left: -16px;
         }
     }
 }
@@ -60,7 +60,7 @@
 .copyButton{
     position: absolute;
     top: 5px;
-    left: -20px;
+    left: -18px;
 }
 
 .maintenance-info {

src/Stories/AddingButton.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
-import StoryRouter from "storybook-react-router";
 import AddingButton from "../Components/AddingButton/AddingButton";
 
-storiesOf("AddingButton", module)
-    .addDecorator(StoryRouter())
-    .add("Default", () => <AddingButton to="/" />);
+storiesOf("AddingButton", module).add("Default", () => <AddingButton to="/" />);

src/Stories/Bar.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
-import StoryRouter from "storybook-react-router";
 import Bar from "../Components/Bar/Bar";
 
-storiesOf("Bar", module)
-    .addDecorator(StoryRouter())
-    .add("Default", () => <Bar message="You message here" />);
+storiesOf("Bar", module).add("Default", () => <Bar message="You message here" />);

src/Stories/Header.stories.tsx

@@ -1,8 +1,5 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
-import StoryRouter from "storybook-react-router";
 import Header from "../Components/Header/Header";
 
-storiesOf("Header", module)
-    .addDecorator(StoryRouter())
-    .add("Default", () => <Header />);
+storiesOf("Header", module).add("Default", () => <Header />);

src/Stories/MetricList.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import StoryRouter from "storybook-react-router";
 import MetricList from "../Components/MetricList/MetricList";
 import { MetricItemList } from "../Domain/Metric";
 import { Status } from "../Domain/Status";
@@ -55,7 +54,6 @@ const items: MetricItemList = {
 };
 
 storiesOf("MetricList", module)
-    .addDecorator(StoryRouter())
     .add("Default", () => (
         <MetricList
             items={items}

src/Stories/Mobile/MobileMetricsListItem.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import StoryRouter from "storybook-react-router";
 import { Metric } from "../../Domain/Metric";
 import { Status } from "../../Domain/Status";
 import MobileMetricsListItem from "../../Components/Mobile/MobileMetricsListItem/MobileMetricsListItem";
@@ -21,7 +20,6 @@ const metricData: Metric = {
 };
 
 storiesOf("Mobile/MetricsListItem", module)
-    .addDecorator(StoryRouter())
     .add("With Status Indicator", () => (
         <MobileMetricsListItem
             name={metricName}

src/Stories/Mobile/MobileTriggerInfo.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import StoryRouter from "storybook-react-router";
 import MobileTriggerInfo from "../../Components/Mobile/MobileTriggerInfo/MobileTriggerInfo";
 import { Trigger, TriggerSource, TriggerState } from "../../Domain/Trigger";
 import { DaysOfWeek } from "../../Domain/Schedule";
@@ -147,7 +146,7 @@ const stories: Array<{
     },
 ];
 
-const story = storiesOf("Mobile/TriggerInfo", module).addDecorator(StoryRouter());
+const story = storiesOf("Mobile/TriggerInfo", module);
 
 stories.forEach(({ title, data, triggerState: state }) => {
     story.add(title, () => (

src/Stories/Mobile/MobileTriggerInfoPage.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import StoryRouter from "storybook-react-router";
 import MobileTriggerInfoPage from "../../Components/Mobile/MobileTriggerInfoPage/MobileTriggerInfoPage";
 import { Trigger, TriggerSource, TriggerState } from "../../Domain/Trigger";
 import { DaysOfWeek } from "../../Domain/Schedule";
@@ -121,15 +120,13 @@ const stories: Array<{
     },
 ];
 
-const story = storiesOf("Mobile/TriggerInfoPage", module)
-    .addDecorator(StoryRouter())
-    .addParameters({
-        creevey: {
-            skip: {
-                flacky: { stories: "Loading" },
-            },
+const story = storiesOf("Mobile/TriggerInfoPage", module).addParameters({
+    creevey: {
+        skip: {
+            flacky: { stories: "Loading" },
         },
-    });
+    },
+});
 
 story.add("Loading", () => (
     <MobileTriggerInfoPage

src/Stories/Mobile/MobileTriggerListItem.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
-import StoryRouter from "storybook-react-router";
 import MobileTriggerListItem from "../../Components/Mobile/MobileTriggerListItem/MobileTriggerListItem";
 import { DaysOfWeek } from "../../Domain/Schedule";
 import { Trigger, TriggerSource } from "../../Domain/Trigger";
@@ -435,7 +434,7 @@ const stories: Array<{
     },
 ];
 
-const story = storiesOf("Mobile/TriggerListItem", module).addDecorator(StoryRouter());
+const story = storiesOf("Mobile/TriggerListItem", module);
 
 stories.forEach(({ title, data }) => {
     story.add(title, () => <MobileTriggerListItem data={data} />);

src/Stories/Mobile/MobileTriggerListPage.stories.tsx

@@ -1,12 +1,10 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import StoryRouter from "storybook-react-router";
 import MobileTriggerListPage from "../../Components/Mobile/MobileTriggerListPage/MobileTriggerListPage";
 import data from "../Data/Triggers";
 
 storiesOf("Mobile/TriggerListPage", module)
-    .addDecorator(StoryRouter())
     .add("Default", () => (
         <MobileTriggerListPage
             triggers={data}

src/Stories/NotificationList.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import StoryRouter from "storybook-react-router";
 import NotificationList from "../Components/NotificationList/NotificationList";
 import { Notification } from "../Domain/Notification";
 import { Status } from "../Domain/Status";
@@ -71,6 +70,5 @@ const items: { [id: string]: Array<Notification> } = {
 };
 
 storiesOf("NotificationList", module)
-    .addDecorator(StoryRouter())
     .add("Default", () => <NotificationList items={items} onRemove={action("onRemove")} />)
     .add("Empty", () => <NotificationList items={{}} onRemove={action("onRemove")} />);

src/Stories/PatternList.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import StoryRouter from "storybook-react-router";
 import PatternList from "../Components/PatternList/PatternList";
 import { Pattern } from "../Domain/Pattern";
 import { DaysOfWeek } from "../Domain/Schedule";
@@ -107,8 +106,6 @@ const items: Pattern[] = [
     },
 ];
 
-storiesOf("PatternList", module)
-    .addDecorator(StoryRouter())
-    .add("Default", () => (
-        <PatternList items={items} onRemove={action("onRemove")} sortingColumn="metric" />
-    ));
+storiesOf("PatternList", module).add("Default", () => (
+    <PatternList items={items} onRemove={action("onRemove")} sortingColumn="metric" />
+));

src/Stories/RouterLink.stories.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
-import StoryRouter from "storybook-react-router";
 import OkIcon from "@skbkontur/react-icons/Ok";
 import RouterLink from "../Components/RouterLink/RouterLink";
 
 storiesOf("RouterLink", module)
-    .addDecorator(StoryRouter())
     .add("Default", () => <RouterLink to="/">Link</RouterLink>)
     .add("With icon", () => (
         <RouterLink to="/" icon={<OkIcon />}>

src/Stories/TriggerEditForm.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import StoryRouter from "storybook-react-router";
 import { ValidationContainer } from "@skbkontur/react-ui-validations";
 import TriggerEditForm from "../Components/TriggerEditForm/TriggerEditForm";
 import { Status } from "../Domain/Status";
@@ -135,7 +134,7 @@ const stories: Array<{ title: string; data: Partial<Trigger> }> = [
     },
 ];
 
-const story = storiesOf("TriggerEditForm", module).addDecorator(StoryRouter());
+const story = storiesOf("TriggerEditForm", module);
 
 stories.forEach(({ title, data }) => {
     story.add(title, () => (

src/Stories/TriggerInfo.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import StoryRouter from "storybook-react-router";
 import TriggerInfo from "../Components/TriggerInfo/TriggerInfo";
 import { DaysOfWeek } from "../Domain/Schedule";
 import { Trigger, TriggerSource, TriggerState } from "../Domain/Trigger";
@@ -147,7 +146,7 @@ const stories: Array<{
     },
 ];
 
-const story = storiesOf("TriggerInfo", module).addDecorator(StoryRouter());
+const story = storiesOf("TriggerInfo", module);
 
 stories.forEach(({ title, data, triggerState: state }) => {
     story.add(title, () => (