source maps (#462)

* source map, webpack, stories, babel * fixed jest tests * hot reload
moira-alert · Nov 30, 2023 · b3cdbae · b3cdbae
1 parent 2431886
commit b3cdbae
Show file tree

Hide file tree

Showing 23 changed files with 780 additions and 1,731 deletions.
diff --git a/.babelrc b/.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"
+        ]
     }
-}
+}}
diff --git a/.storybook/main.js b/.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");

diff --git a/.storybook/preview.js b/.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].*" },

diff --git a/package.json b/package.json
@@ -60,17 +60,8 @@
         "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",
         "@storybook/addon-actions": "6.4.22",
@@ -91,13 +82,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 +113,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",

diff --git a/src/Stories/AddingButton.stories.tsx b/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="/" />);
diff --git a/src/Stories/Bar.stories.tsx b/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" />);
diff --git a/src/Stories/Header.stories.tsx b/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 />);
diff --git a/src/Stories/MetricList.stories.tsx b/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}

diff --git a/src/Stories/Mobile/MobileMetricsListItem.stories.tsx b/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}

diff --git a/src/Stories/Mobile/MobileTriggerInfo.stories.tsx b/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, () => (

diff --git a/src/Stories/Mobile/MobileTriggerInfoPage.stories.tsx b/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

diff --git a/src/Stories/Mobile/MobileTriggerListItem.stories.tsx b/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} />);

diff --git a/src/Stories/Mobile/MobileTriggerListPage.stories.tsx b/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}

diff --git a/src/Stories/NotificationList.stories.tsx b/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")} />);
diff --git a/src/Stories/PatternList.stories.tsx b/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" />
+));
diff --git a/src/Stories/RouterLink.stories.tsx b/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 />}>

diff --git a/src/Stories/TriggerEditForm.stories.tsx b/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, () => (

diff --git a/src/Stories/TriggerInfo.stories.tsx b/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, () => (

diff --git a/src/Stories/TriggerList.stories.tsx b/src/Stories/TriggerList.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 { createMemoryHistory } from "history";
 import TriggerList from "../Components/TriggerList/TriggerList";
 import data from "./Data/Triggers";
@@ -10,7 +9,6 @@ const history = createMemoryHistory();
 history.push = action("history.push");
 
 storiesOf("TriggerList", module)
-    .addDecorator(StoryRouter())
     .add("Default", () => (
         <TriggerList
             searchMode={false}

diff --git a/src/Stories/TriggerListItem.stories.tsx b/src/Stories/TriggerListItem.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 { createMemoryHistory } from "history";
 import TriggerListItem from "../Components/TriggerListItem/TriggerListItem";
 import { DaysOfWeek } from "../Domain/Schedule";
@@ -435,7 +434,7 @@ const stories: Array<{
     },
 ];
 
-const story = storiesOf("TriggerListItem", module).addDecorator(StoryRouter());
+const story = storiesOf("TriggerListItem", module);
 
 stories.forEach(({ title, data }) => {
     story.add(title, () => (

diff --git a/tsconfig.json b/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "es2015",                          
     "module": "commonjs",                     
     "lib": ["dom", "es2020"],                                            
-    "jsx": "preserve",                    
+    "jsx": "react",                    
     "strict": true,                           
     "noImplicitAny": true,                 
     "noUnusedLocals": true,