feat: update storybook 7 and creevey, update webpack in validations, update TestPages

packages/react-ui-testing/TestPages/package.json

@@ -5,33 +5,33 @@
   "private": true,
   "scripts": {
     "postinstall": "node install.js",
-    "start": "yarn webpack-dev-server -w -d",
+    "start": "webpack serve --watch --mode development",
     "print-versions": "node print-versions.js"
   },
   "dependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@babel/preset-react": "^7.16.5",
-    "@types/react": "^17.0.37",
-    "babel-loader": "^8.2.3",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@types/react": "^18.3.2",
+    "babel-loader": "^9.1.3",
     "babel-polyfill": "^6.26.0",
     "cross-env": "^7.0.3",
     "css": "^3.0.0",
-    "css-loader": "^5.2.7",
+    "css-loader": "^7.1.1",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "4.5.2",
-    "less": "4.1.1",
-    "less-loader": "7.3.0",
+    "html-webpack-plugin": "5.6.0",
+    "less": "4.2.0",
+    "less-loader": "12.2.0",
     "modify-babel-preset": "^3.2.1",
-    "prop-types": "^15.7.2",
-    "react-router": "^5.2.0",
+    "prop-types": "^15.8.1",
+    "react-router": "^6.23.1",
     "script-loader": "^0.7.2",
-    "semver": "^7.5.2",
+    "semver": "^7.6.2",
     "shelljs": "^0.8.5",
-    "style-loader": "^2.0.0",
-    "styled-components": "^5.2.1",
-    "webpack": "^4.41.2",
-    "webpack-dev-server": "^3.11.0"
+    "style-loader": "^4.0.0",
+    "styled-components": "^6.1.11",
+    "webpack": "^5.91.0",
+    "webpack-dev-server": "^5.0.4"
   }
 }

packages/react-ui-testing/TestPages/src/ReactTestApplication.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Router, Route, Switch } from 'react-router';
-import { createBrowserHistory } from 'history';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import Layout from './components/Layout';
 import TestPage from './components/TestPage';
@@ -36,46 +35,38 @@ import './styles/typography.less';
 import AutocompleteTestPage from './components/TestPages/AutocompleteTestPage';
 import ToastTestPage from './components/TestPages/ToastTestPage';
 import ToggleTestPage from './components/TestPages/ToggleTestPage';
-import SwitcherTestPage from "./components/TestPages/SwitcherTestPage";
-
-const customHistory = createBrowserHistory();
-const basePath = process.env.baseUrl + '/';
+import SwitcherTestPage from './components/TestPages/SwitcherTestPage';
 
 // eslint-disable-next-line import/no-default-export
 export default function ReactTestApplication() {
   return (
-    <Router history={customHistory}>
-      <Route
-        path={basePath}
-        render={({ match: { url } }) => (
-          <Layout>
-            <Switch>
-              <Route path={`${url}/TestPage`} component={TestPage} />
-              <Route path={`${url}/Input`} component={InputTestPage} />
-              <Route path={`${url}/Lists`} component={ListsTestPage} />
-              <Route path={`${url}/Modals`} component={ModalsTestPage} />
-              <Route path={`${url}/ComboBoxes`} component={ComboBoxTestPage} />
-              <Route path={`${url}/Select`} component={SelectTestPage} />
-              <Route path={`${url}/DatePicker`} component={DatePickerTestPage} />
-              <Route path={`${url}/Button`} component={ButtonTestPage} />
-              <Route path={`${url}/CheckBox`} component={CheckBoxTestPage} />
-              <Route path={`${url}/Link`} component={LinkTestPage} />
-              <Route path={`${url}/RadioGroup`} component={RadioGroupTestPage} />
-              <Route path={`${url}/Radio`} component={RadioTestPage} />
-              <Route path={`${url}/Textarea`} component={TextAreaTestPage} />
-              <Route path={`${url}/Tooltip`} component={TooltipTestPage} />
-              <Route path={`${url}/ExposeTidToDom`} component={ExposeTidToDomTestPage} />
-              <Route path={`${url}/Kebab`} component={KebabTestPage} />
-              <Route path={`${url}/Paging`} component={PagingTestPage} />
-              <Route path={`${url}/SidePage`} component={SidePageTestPage} />
-              <Route path={`${url}/Autocomplete`} component={AutocompleteTestPage} />
-              <Route path={`${url}/Toast`} component={ToastTestPage} />
-              <Route path={`${url}/Toggle`} component={ToggleTestPage} />
-              <Route path={`${url}/Switcher`} component={SwitcherTestPage} />
-            </Switch>
-          </Layout>
-        )}
-      ></Route>
+    <Router basename={process.env.baseUrl}>
+      <Layout>
+        <Routes>
+          <Route path="TestPage" element={<TestPage />} />
+          <Route path="Input" element={<InputTestPage />} />
+          <Route path="/Lists" element={<ListsTestPage />} />
+          <Route path="/Modals" element={<ModalsTestPage />} />
+          <Route path="/ComboBoxes" element={<ComboBoxTestPage />} />
+          <Route path="/Select" element={<SelectTestPage />} />
+          <Route path="/DatePicker" element={<DatePickerTestPage />} />
+          <Route path="/Button" element={<ButtonTestPage />} />
+          <Route path="/CheckBox" element={<CheckBoxTestPage />} />
+          <Route path="/Link" element={<LinkTestPage />} />
+          <Route path="/RadioGroup" element={<RadioGroupTestPage />} />
+          <Route path="/Radio" element={<RadioTestPage />} />
+          <Route path="/Textarea" element={<TextAreaTestPage />} />
+          <Route path="/Tooltip" element={<TooltipTestPage />} />
+          <Route path="/ExposeTidToDom" element={<ExposeTidToDomTestPage />} />
+          <Route path="/Kebab" element={<KebabTestPage />} />
+          <Route path="/Paging" element={<PagingTestPage />} />
+          <Route path="/SidePage" element={<SidePageTestPage />} />
+          <Route path="/Autocomplete" element={<AutocompleteTestPage />} />
+          <Route path="/Toast" element={<ToastTestPage />} />
+          <Route path="/Toggle" element={<ToggleTestPage />} />
+          <Route path="/Switcher" element={<SwitcherTestPage />} />
+        </Routes>
+      </Layout>
     </Router>
   );
 }

packages/react-ui-testing/TestPages/webpack.config.js

@@ -7,7 +7,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const reactUiPath = path.resolve(__dirname, '../../react-ui/build');
 const { versions, reactUiLocalVersionStub } = require('./versions');
 
-const versionsDependencies = versions.map(x => Object.keys(x.dependencies)).reduce((a, c) => a.concat(c), []);
+const versionsDependencies = versions.map((x) => Object.keys(x.dependencies)).reduce((a, c) => a.concat(c), []);
 
 const dependencies = ['react', '@skbkontur/react-ui', ...new Set(versionsDependencies)];
 
@@ -23,7 +23,6 @@ function createConfig(reactVersion, reactUIVersion) {
   return {
     entry: {
       [`index_${reactVersion}_${reactUIVersion}`]: [
-        'babel-polyfill',
         './react-selenium-testing-custom-props.js',
         '../react-selenium-testing.js',
         `./${targetDir}/index.js`,
@@ -37,29 +36,35 @@ function createConfig(reactVersion, reactUIVersion) {
     module: {
       rules: [
         {
-          test: /\.(css)$/,
-          loaders: ['style-loader', 'css-loader'],
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  namedExport: false,
+                },
+              },
+            },
+          ],
         },
         {
           test: /\.(less)$/,
-          loaders: ['style-loader', 'css-loader', 'less-loader'],
+          use: ['style-loader', 'css-loader', 'less-loader'],
         },
         {
           test: /\.(woff|eot|png|gif|ttf|woff2)$/,
-          loader: 'file-loader',
+          use: 'file-loader',
         },
         {
           test: /\.jsx?$/,
           exclude: /node_modules/,
-          loader: 'babel-loader',
-          query: {
-            babelrc: false,
-            // presets: [
-            //   require.resolve('babel-preset-react'),
-            //   require.resolve('babel-preset-es2015'),
-            //   require.resolve('babel-preset-stage-0'),
-            // ],
-            presets: ['@babel/preset-react', '@babel/preset-env'],
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-react', '@babel/preset-env'],
+            },
           },
         },
       ],
@@ -70,6 +75,7 @@ function createConfig(reactVersion, reactUIVersion) {
     },
     plugins: [
       new webpack.DefinePlugin({
+        'process.env.retailUIVersion': JSON.stringify(process.env.RETAIL_UI_VERSION),
         'process.env.enableReactTesting': JSON.stringify(true),
         'process.env.hasKebab': JSON.stringify(semver.satisfies(reactUIVersion, '>=0.9.0')),
         'process.env.hasPaging': JSON.stringify(semver.satisfies(reactUIVersion, '>=0.9.0')),
@@ -84,16 +90,20 @@ function createConfig(reactVersion, reactUIVersion) {
       }),
     ],
     devServer: {
+      static: {
+        directory: path.join(__dirname, 'dist'),
+      },
       host: '0.0.0.0',
       port: 8083,
       historyApiFallback: {
-        rewrites: versions.map(version => ({
+        rewrites: versions.map((version) => ({
           from: new RegExp(`^/${version['react']}/${version['@skbkontur/react-ui']}/.*`),
           to: `/${version['react']}/${version['@skbkontur/react-ui']}/index.html`,
         })),
       },
+      hot: true,
     },
   };
 }
 
-module.exports = versions.map(version => createConfig(version['react'], version['@skbkontur/react-ui']));
+module.exports = versions.map((version) => createConfig(version['react'], version['@skbkontur/react-ui']));