Clean up the React app

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+	extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ],
+	settings: {
+		'import/resolver': {
+			alias: {
+				map: [
+					[ 'App', './src/app' ],
+					[ 'Assets', './aseets' ],
+				],
+				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,49 @@
+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: Use Node.js 16.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 16.x
+          cache: 'npm'
+
+      - 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

@@ -34,6 +34,7 @@
         "@wordpress/i18n": "^4.45.0",
         "@wordpress/icons": "^9.36.0",
         "classnames": "^2.3.2",
+        "eslint-import-resolver-alias": "^1.1.2",
         "jquery": "^3.7.1",
         "lodash": "^4.17.21",
         "react": "^18.2.0",
@@ -47,9 +48,11 @@
         "@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-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' ),
+	],
+};