Merge pull request #75 from plesk/task-dmodin-update-dependencies-EXTPLESK-9730

Update dependencies

Author: xzwiex

.eslintrc

@@ -99,7 +99,7 @@ Create `package.json` file in the root of your project or use yarn init command:
 
 Since UI Library is based on React and browsers don't support jsx and ES6 syntax natively, first we need to transpile our code to native JS. We will use [Babel](http://babeljs.io/) for it. We will also use ES6 imports for importing functions and components from UI Library. We'll have to use [Webpack](https://webpack.js.org/) for handling ES6 imports because browsers don't support them natively. All these tools and some configs for integrating them are available in the package `@plesk/plesk-ext-sdk`. We will also need an HTTP client for retrieving data from the server, so let's install, for example, [axios](https://github.com/axios/axios) as a dependency.
 ```bash
-yarn add @plesk/plesk-ext-sdk@0.5.5 axios
+yarn add @plesk/plesk-ext-sdk axios
 ```
 Once Yarn has added these packages to `package.json`, install it and generate `yarn.lock`. The lock file should be added to Git – you can read more about this in the Yarn [documentation](https://yarnpkg.com/lang/en/docs/yarn-lock/).
 
@@ -139,37 +139,31 @@ Now we can write our first React component.
 `src/frontend/index.js`
 
 ```js
-import { createElement, Component, Alert, PropTypes } from '@plesk/plesk-ext-sdk';
+import { createElement, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from '@plesk/plesk-ext-sdk';
 import axios from 'axios';
 
-export default class extends Component {
-    static propTypes = {
-        baseUrl: PropTypes.string.isRequired,
-    };
+export default function MainPage({baseUrl}) {
+    const [date, setDate] = useState(null);
 
-    state = {
-        date: null,
-    };
-
-    componentDidMount() {
-        const { baseUrl } = this.props;
-        axios.get(`${baseUrl}/api/date`).then(({ data }) => this.setState({ date: data }));
-    }
-
-    render() {
-        const { date } = this.state;
-
-        if (!date) {
-            return null;
-        }
-
-        return (
-            <Alert intent="info">
-                {`Server time: ${date}`}
-            </Alert>
-        )
+    useEffect(() => {
+        axios.get(`${baseUrl}/api/date`).then(({ data }) => setDate(data));
+    }, []);
+    
+    if (!date) {
+        return null;
     }
+    return (
+        <Alert intent="info">
+            {`Server time: ${date}`}
+        </Alert>
+    );
 }
+
+MainPage.propTypes = {
+  baseUrl: PropTypes.string.isRequired,
+};
 ```
 
 Let's build the app to create the production code with `yarn build` command.

docs/01-getting-started.md

@@ -11,23 +11,27 @@ How to enable ESLint:
     ```json
     {
       "scripts": {
-        "lint": "eslint frontend"
-      }
-    }
-    ```
-2. Add `.eslintrc` file
-    `.eslintrc`
-    ```
-    {
-      "extends": "@plesk/eslint-config",
-      "settings": {
-        "react": {
-          "pragma": "createElement"
-        }
+        "lint": "eslint src/rontend"
       }
     }
     ```
 
+2. Add `eslint.config.mjs` file
+```js
+const pleskConfig = require('@plesk/eslint-config');
+
+module.exports = [
+    pleskConfig,
+];
+```
+
+3. Due to dependency bug in enzyme, add version override in your `package.json`
+```  
+"resolutions": {
+    "cheerio": "1.0.0-rc.12"
+  }
+```
+
 Now you can check your code with the following command:
 
 ```
@@ -38,9 +42,8 @@ Alternatively, you can run `yarn lint --fix` command to automatically fix all er
 
 You can also enable ESLint in your PhpStorm: Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint > Enable
 
-## StyleLint
+To know more about ESLint and it's configuration please check [ESLint documentation](https://eslint.org/docs/latest/use/getting-started)
 
-This section is under construction.
 
 ## Unit Testing
 
@@ -49,7 +52,7 @@ All your code should be covered by unit tests. We recommend using [Jest](https:/
 ### Installing Dependencies
 
 ```bash
-yarn add enzyme enzyme-adapter-react-16 --dev
+yarn add @cfaester/enzyme-adapter-react-18 --dev
 ```
 
 ### Adding Helper Scripts
@@ -71,10 +74,12 @@ yarn add enzyme enzyme-adapter-react-16 --dev
 
 ```js
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import { TextEncoder } from 'util';
+global.TextEncoder = TextEncoder;
+
 
 Enzyme.configure({ adapter: new Adapter() });
-Enzyme.configure({ disableLifecycleMethods: true });
 ```
 
 ### Writing Tests
@@ -107,17 +112,6 @@ describe('Overview', () => {
 });
 ```
 
-Add to `.eslintrc` section `env`:
-
-
-```
-{
-  "env": {
-    "jest": true
-  }
-}
-```
-
 ### Running Tests
 
 Now you can check your code via `yarn test` command.

docs/03-code-quality-tools.md

@@ -0,0 +1,18 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const pleskConfig = require('@plesk/eslint-config');
+
+module.exports = [
+    pleskConfig,
+    {
+        settings: {
+            react: {
+                pragma: "createElement",
+            },
+        },
+        rules: {
+            'jest/no-test-return-statement': 'off',
+            'react/require-default-props': 'off',
+        }
+    },
+];

eslint.config.cjs

@@ -1,4 +1,4 @@
-// Copyright 1999-2018. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 module.exports = () => ({
     babelrc: false,

lib/babel/createConfig.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2018. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 const createConfig = require('../webpack/createConfig');
 const build = require('../webpack/build');

lib/commands/build.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2018. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 const createConfig = require('../webpack/createConfig');
 const build = require('../webpack/build');

lib/commands/dev.js

@@ -1,6 +1,5 @@
-// Copyright 1999-2018. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-// eslint-disable-next-line jest/no-jest-import
 const jest = require('jest');
 const createConfig = require('../jest/createConfig');
 

lib/commands/test.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2018. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 const babelJest = require('babel-jest');
 const createConfig = require('../babel/createConfig');

lib/jest/babelTransform.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2018. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 const path = require('path');
 const fs = require('fs-extra');
@@ -10,7 +10,8 @@ module.exports = () => {
         : undefined;
 
     return {
-        setupTestFrameworkScriptFile: setupTestsFile,
+        testEnvironment: 'jsdom',
+        setupFilesAfterEnv: [setupTestsFile].filter(Boolean),
         testMatch: [
             '**/*.test.js?(x)',
         ],
@@ -23,5 +24,9 @@ module.exports = () => {
         snapshotSerializers: [
             'enzyme-to-json/serializer',
         ],
+        moduleNameMapper: {
+            '\\.(css|less|scss)$': path.resolve(__dirname, './styleMock.js'),
+            '\\.(png|jpg|gif|svg|woff|woff2|webp)$': path.resolve(__dirname, './fileMock.js'),
+        },
     };
 };