Merge pull request #820 from bluehost/update/react-app-cleanup

Clean up the React app

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+	extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ],
+	settings: {
+		'import/resolver': {
+			alias: {
+				map: [
+					[ 'App', './src/app' ],
+					[ 'Assets', './aseets' ],
+					[ '@modules', './vendor/newfold-labs' ],
+				],
+				extensions: [ '.js', '.jsx', '.json' ],
+			},
+		},
+	},
+	globals: {
+		__: true,
+		_camelCase: true,
+		_filter: true,
+		_n: true,
+		classNames: true,
+		useContext: true,
+		useEffect: true,
+		useState: true,
+	},
+	rules: {
+		'import/no-unresolved': [
+			'error',
+			{ ignore: [ '^App/', '^Assets/' ] },
+		],
+	},
+};

.github/workflows/eslint.yml

@@ -0,0 +1,91 @@
+name: ESLint
+
+on:
+  push:
+    branches:
+      - main
+      - master
+      - trunk
+      - develop
+      - release/*
+      - feature/*
+      - add/*
+      - update/*
+      - fix/*
+      - try/*'
+    paths:
+      - 'src/**/*.js'
+  pull_request:
+    types: [ opened, edited, reopened, ready_for_review ]
+    paths: 
+      - 'src/**/*.js'
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+  cancel-in-progress: true
+
+jobs:
+  ESLint:
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.1'
+          coverage: none
+          tools: composer, cs2pr
+
+      - name: Setup workflow context
+        id: workflow
+        working-directory: ${{ runner.temp }}
+        env:
+          REPO: ${{ github.repository }}
+        run: |
+          mkdir dist
+          echo "DIST=${PWD}/dist" >> $GITHUB_OUTPUT
+          echo "PACKAGE=${REPO##*/}" >> $GITHUB_OUTPUT
+
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 16.x
+          cache: 'npm'
+
+      - name: Get Composer cache directory
+        id: composer-cache
+        run: echo "dir=$(composer config cache-files-dir)" >> $GITHUB_OUTPUT
+
+      - name: Cache Composer vendor directory
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.composer-cache.outputs.dir }}
+          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-composer-
+
+      - name: Show versions
+        run: |
+          php --version
+          composer --version
+          node --version
+          npm --version
+
+      - name: Validate composer.json and composer.lock
+        run: composer validate
+
+      - name: Install PHP Dependencies
+        run: composer install --no-progress --no-dev --optimize-autoloader --prefer-dist
+
+      - name: Setup Registry
+        run: printf "\n//npm.pkg.github.com/:_authToken=${{ secrets.NEWFOLD_ACCESS_TOKEN }}" >> .npmrc
+
+      - name: NPM Install
+        run: npm ci --legacy-peer-deps
+
+      - name: ESLint
+        run: npm run lint:js

package.json

@@ -46,9 +46,12 @@
         "@tailwindcss/forms": "^0.5.6",
         "@testing-library/cypress": "^10.0.1",
         "@wordpress/env": "^8.11.0",
+        "@wordpress/eslint-plugin": "^17.3.0",
         "@wordpress/scripts": "^26.16.0",
         "cypress": "^13.4.0",
         "cypress-axe": "^1.5.0",
+        "eslint-import-resolver-alias": "^1.1.2",
+        "eslint-plugin-import": "^2.29.0",
         "tailwindcss": "^3.3.5"
     },
     "scripts": {

postcss.config.js

@@ -1,8 +1,8 @@
 module.exports = {
-    plugins: [
-      require("postcss-import"),
-      require("tailwindcss/nesting"),
-      require("tailwindcss"),
-      ...require("@wordpress/postcss-plugins-preset"),
-    ],
-  };
+	plugins: [
+		require( 'postcss-import' ),
+		require( 'tailwindcss/nesting' ),
+		require( 'tailwindcss' ),
+		...require( '@wordpress/postcss-plugins-preset' ),
+	],
+};

set-latest-wp-version.js

@@ -1,24 +1,26 @@
-const fs = require('fs')
-const fetch = require('node-fetch')
-const wpEnv = require('./.wp-env.json')
+const fs = require( 'fs' );
+const fetch = require( 'node-fetch' );
+const wpEnv = require( './.wp-env.json' );
 
-fetch('https://api.wordpress.org/core/stable-check/1.0/')
-	.then(res => res.json())
-	.then(
-		json => {
-			const wpVersion = Object.keys(json)[Object.keys(json).length - 1]
-			wpEnv.core = `WordPress/WordPress#tags/${ wpVersion }`
-			fs.writeFile(
-				'./.wp-env.json',
-				JSON.stringify(wpEnv, null, 2),
-				'utf8',
-				(err) => {
-					if (err) {
-						console.log('An error occurred while writing latest WordPress version to .wp-env.json file.')
-						return console.log(err)
-					}
-					console.log(`The .wp-env.json file was updated with the latest WordPress version (${wpVersion}).`)
+fetch( 'https://api.wordpress.org/core/stable-check/1.0/' )
+	.then( ( res ) => res.json() )
+	.then( ( json ) => {
+		const wpVersion = Object.keys( json )[ Object.keys( json ).length - 1 ];
+		wpEnv.core = `WordPress/WordPress#tags/${ wpVersion }`;
+		fs.writeFile(
+			'./.wp-env.json',
+			JSON.stringify( wpEnv, null, 2 ),
+			'utf8',
+			( err ) => {
+				if ( err ) {
+					console.log(
+						'An error occurred while writing latest WordPress version to .wp-env.json file.'
+					);
+					return console.log( err );
 				}
-			);
-		}
-	)
+				console.log(
+					`The .wp-env.json file was updated with the latest WordPress version (${ wpVersion }).`
+				);
+			}
+		);
+	} );