Refactor approach for BE And FE

.eslintrc.js

@@ -3,13 +3,21 @@ module.exports = {
         'plugin:react/recommended',
         'plugin:no-jquery/deprecated',
         'plugin:@wordpress/eslint-plugin/recommended-with-formatting',
+		'plugin:import/recommended',
+		'plugin:jsx-a11y/strict',
     ],
     plugins: [
         'babel',
         'react',
         'no-jquery',
-    ],
-     parser: '@babel/eslint-parser',
+		'@typescript-eslint',
+		'@elementor',
+		'import',
+		'react-hooks',
+		'prettier',
+	],
+	ignorePatterns: [ '!**/*' ],
+	parser: '@babel/eslint-parser',
     globals: {
         wp: true,
         window: true,
@@ -142,5 +150,7 @@ module.exports = {
         // 'react/jsx-tag-spacing': 'error',
         // 'react/no-children-prop': 'off',
         // 'react/prop-types': 'off',
+		'@elementor/eui-default-imports-only': 'error',
+		'react/no-unescaped-entities': 'warn',
     },
 };

.github/checkstyle-problem-matcher.json

@@ -0,0 +1,23 @@
+{
+	"problemMatcher": [
+		{
+			"owner": "phpcs",
+			"severity": "error",
+			"pattern": [
+				{
+					"regexp": "^<file name=\"(?:\\/github\\/workspace\\/)?(.*)\">$",
+					"file": 1
+				},
+				{
+					"regexp": "<error line=\"(\\d*)\" column=\"(\\d*)\" severity=\"(error|warning)\" message=\"(.*)\" source=\"(.*)(\"\\/>+)$",
+					"line": 1,
+					"column": 2,
+					"severity": 3,
+					"message": 4,
+					"code": 5,
+					"loop": true
+				}
+			]
+		}
+	]
+}

.github/workflows/js-ci.yml

@@ -0,0 +1,53 @@
+name: NPM CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  cancel-in-progress: true
+  group: ${{ github.workflow }}-${{ github.ref }}
+
+env:
+  token: ${{ secrets.CLOUD_DEVOPS_TOKEN }}
+  NODE_AUTH_TOKEN: ${{ secrets.CLOUD_DEVOPS_TOKEN }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - uses: actions/setup-node@v4
+        with:
+          registry-url: 'https://npm.pkg.github.com'  
+          scope: '@elementor'
+
+      - name: Install Dependencies
+        run: npm ci
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.CLOUD_DEVOPS_TOKEN }}
+
+      - name: Build
+        run: npm run build
+
+      - name: Lint
+        run: npm run lint:js
+
+#      - name: Test
+#        run: npm run test

.github/workflows/php-coding-standards.yml

@@ -0,0 +1,54 @@
+name: PHP Lint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  cancel-in-progress: true
+  group: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: read
+
+jobs:
+  PHP-Code-Standards:
+    name: Lint PHP files
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, '[skip PHPCS]') || !contains(github.event.head_commit.message, '[skip CI]')"
+    steps:
+      - name: Check out source code
+        uses: actions/checkout@v4
+
+      - name: Set up PHP
+        uses: shivammathur/setup-php@a36e1e52ff4a1c9e9c9be31551ee4712a6cb6bd0 # 2.27.1
+        with:
+          php-version: '7.4'
+          coverage: none
+          tools: composer, cs2pr, phpcs
+        env:
+          fail-fast: 'true'
+
+      - name: Log debug information
+        run: |
+          export PATH=$HOME/.composer/vendor/bin:$PATH
+          php --version
+          phpcs -i
+          composer --version
+
+      - name: Oauth Composer authentication
+        run: composer config -g github-oauth.github.com ${{ secrets.DEVOPS_TOKEN }}
+
+      - name: Install dependencies
+        uses: ramsey/composer-install@83af392bf5f031813d25e6fe4cd626cdba9a2df6 # 2.2.0
+
+      - name: Add error matcher
+        run: echo "::add-matcher::$(pwd)/.github/checkstyle-problem-matcher.json"
+
+      - name: Run style check
+        run: |
+          export PATH=$HOME/.composer/vendor/bin:$PATH
+          composer run lint -- --report=checkstyle

.npmrc

@@ -0,0 +1,2 @@
+//npm.pkg.github.com/:_authToken=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
+@elementor:registry=https://npm.pkg.github.com/elementor

assets/dev/js/editor/hooks/ui/controls-hook.js

@@ -186,7 +186,6 @@ export default class ControlsHook extends $e.modules.hookUI.After {
 	 * @param {string} classPrefix
 	 * @param {Object} inputOptions
 	 * @param {string} inputValue
-	 *
 	 */
 	toggleLayoutClass( element, classPrefix, inputOptions, inputValue ) {
 		// Loop through the possible classes and remove the one that's not in use

composer.json

@@ -0,0 +1,17 @@
+{
+	"name": "elementor/hello-plus",
+	"require": {
+		"squizlabs/php_codesniffer": "^3.10.2",
+		"dealerdirect/phpcodesniffer-composer-installer": "^v1.0.0",
+		"wp-coding-standards/wpcs": "^3.1.0"
+	},
+	"config": {
+		"allow-plugins": {
+			"dealerdirect/phpcodesniffer-composer-installer": true
+		}
+	},
+	"scripts": {
+		"lint": "vendor/bin/phpcs --standard=./phpcs.xml --ignore=node_modules,vendor,build .",
+		"lint:fix": "vendor/bin/phpcbf --ignore=node_modules,vendor,build ."
+	}
+}

includes/module-base.php

@@ -46,7 +46,7 @@ abstract class Module_Base {
 	 *
 	 * @var Module_Base[]
 	 */
-	protected static array $_instances = [];
+	protected static array $instances = [];
 
 	/**
 	 * Get module name.
@@ -79,11 +79,11 @@ abstract protected function get_component_ids(): array;
 	public static function instance(): Module_Base {
 		$class_name = static::class_name();
 
-		if ( empty( static::$_instances[ $class_name ] ) ) {
-			static::$_instances[ $class_name ] = new static(); // @codeCoverageIgnore
+		if ( empty( static::$instances[ $class_name ] ) ) {
+			static::$instances[ $class_name ] = new static(); // @codeCoverageIgnore
 		}
 
-		return static::$_instances[ $class_name ];
+		return static::$instances[ $class_name ];
 	}
 
 	/**
@@ -125,7 +125,7 @@ public function get_reflection(): \ReflectionClass {
 				$this->reflection = new \ReflectionClass( $this );
 			} catch ( \ReflectionException $e ) {
 				if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
-					error_log( $e->getMessage() );
+					error_log( $e->getMessage() ); //phpcs:ignore
 				}
 			}
 		}
@@ -196,7 +196,7 @@ public static function namespace_name(): string {
 	 * @param ?array $components_ids => component's class name.
 	 * @return void
 	 */
-	protected function register_components( array $components_ids  = null ):void {
+	protected function register_components( array $components_ids = null ): void {
 		if ( empty( $components_ids ) ) {
 			$components_ids = $this->get_component_ids();
 		}
@@ -216,7 +216,7 @@ protected function register_components( array $components_ids  = null ):void {
 	 * @param \Elementor\Widgets_Manager $widgets_manager
 	 * @return void
 	 */
-	public function register_widgets( \Elementor\Widgets_Manager $widgets_manager ):void {
+	public function register_widgets( \Elementor\Widgets_Manager $widgets_manager ): void {
 		$widget_ids = $this->get_widget_ids();
 		$namespace = static::namespace_name();
 

index.php

@@ -28,10 +28,8 @@
 	if ( ! $is_elementor_theme_exist || ! elementor_theme_do_location( 'archive' ) ) {
 		get_template_part( 'template-parts/search' );
 	}
-} else {
-	if ( ! $is_elementor_theme_exist || ! elementor_theme_do_location( 'single' ) ) {
-		get_template_part( 'template-parts/404' );
-	}
+} elseif ( ! $is_elementor_theme_exist || ! elementor_theme_do_location( 'single' ) ) {
+	get_template_part( 'template-parts/404' );
 }
 
 get_footer();

modules/admin/assets/js/components/link/promotion-link.js

@@ -1,6 +1,6 @@
-import { Stack } from '@elementor/ui/Stack';
-import { Typography } from '@elementor/ui/Typography';
-import { Button } from '@elementor/ui/Button';
+import Stack from '@elementor/ui/Stack';
+import Typography from '@elementor/ui/Typography';
+import Button from '@elementor/ui/Button';
 
 export const PromotionLink = ( { image, alt, title, message, button, link } ) => {
 	return (

modules/admin/assets/js/components/link/top-bar-link.js

@@ -0,0 +1,23 @@
+import Typography from '@elementor/ui/Typography';
+import IconButton from '@elementor/ui/IconButton';
+
+export const TopBarLink = ( { linkData } ) => {
+	const { label, hrefStr, children, color, aria } = linkData;
+	return (
+		<IconButton
+			size="medium"
+			edge="end"
+			color={ color }
+			aria-label={ aria }
+			href={ hrefStr }
+		>
+			{ children }
+			<Typography
+				fontSize="medium"
+				align="center"
+			>
+				{ label }
+			</Typography>
+		</IconButton>
+	);
+};