Merge pull request #167 from newfold-labs/lint-test-js

Added JS and SASS Lint Checks

.eslintrc.js

@@ -0,0 +1,65 @@
+const restrictedImports = [
+	{
+		name: 'framer-motion',
+		message:
+			'Please use the Framer Motion API through `@wordpress/components` instead.',
+	},
+	{
+		name: 'lodash',
+        // [TODO] Update this list as we start moving away from lodash.
+		importNames: [
+            'memoize'
+		],
+		message:
+			'This Lodash method is not recommended. Please use native functionality instead. If using `memoize`, please use `memize` instead.',
+	},
+	{
+		name: 'reakit',
+		message:
+			'Please use Reakit API through `@wordpress/components` instead.',
+	},
+	{
+		name: 'redux',
+		importNames: [ 'combineReducers' ],
+		message: 'Please use `combineReducers` from `@wordpress/data` instead.',
+	},
+	{
+		name: 'puppeteer-testing-library',
+		message: '`puppeteer-testing-library` is still experimental.',
+	},
+	{
+		name: '@emotion/css',
+		message:
+			'Please use `@emotion/react` and `@emotion/styled` in order to maintain iframe support. As a replacement for the `cx` function, please use the `useCx` hook defined in `@wordpress/components` instead.',
+	},
+	{
+		name: '@wordpress/edit-post',
+		message:
+			"edit-post is a WordPress top level package that shouldn't be imported into other packages",
+	},
+	{
+		name: '@wordpress/edit-site',
+		message:
+			"edit-site is a WordPress top level package that shouldn't be imported into other packages",
+	},
+	{
+		name: '@wordpress/edit-widgets',
+		message:
+			"edit-widgets is a WordPress top level package that shouldn't be imported into other packages",
+	},
+];
+
+module.exports = {
+    root: true,
+    extends: [
+		'plugin:@wordpress/eslint-plugin/recommended',
+	],
+    rules: {
+        'no-restricted-imports': [
+			'error',
+			{
+				paths: restrictedImports,
+			},
+		],
+    }
+}

.github/workflows/lint.yml → .github/workflows/lint-check-php.yml

@@ -1,8 +1,6 @@
-name: Lint
+name: 'Lint Checker: PHP'
 on:
   push:
-    branches:
-      - '**'
     paths:
       - '**.php'
   pull_request:

.github/workflows/lint-check-spa.yml

@@ -0,0 +1,70 @@
+name: "Lint Checker: Onboarding SPA"
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - "src/**/*.js"
+      - "src/**/*.scss"
+  pull_request:
+    types: [opened, edited, reopened, ready_for_review]
+    paths:
+      - "src/**/*.js"
+      - "src/**/*.scss"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+  cancel-in-progress: true
+
+jobs:
+  lint-check-spa:
+    name: Run Lint Checks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      # Install Node.js 14.x and npm < 7.
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14.x
+          cache: 'npm'
+
+      # Checks if node_modules exists in the cache.
+      - name: Cache node_modules directory
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-
+
+      # Installs @wordpress/scripts for lint checks if it does not exist in the cache.
+      - name: Install dependencies
+        run: npm i @wordpress/scripts
+        if: steps.cache.outputs.cache-hit != 'true'
+
+      # Gets the files changed wrt to trunk and filters out the js files.
+      - uses: technote-space/get-diff-action@v6
+        with:
+          PATTERNS: |
+            +(src)/**/*.js
+
+      # Runs wp-scripts for checking JS coding issues.
+      - name: Run JS Lint
+        id: js-lint
+        run: npx wp-scripts lint-js ${{ env.GIT_DIFF }}
+        if: "!! env.GIT_DIFF"
+
+      # Gets the files changed wrt to trunk and filters out the SASS files.
+      - uses: technote-space/get-diff-action@v6
+        with:
+          PATTERNS: |
+            +(src)/**/*.scss
+        if: ${{ success() || steps.js-lint.conclusion == 'failure' }}
+
+      # Runs wp-scripts for checking SASS coding issues.
+      - name: Run SASS Lint
+        id: sass-lint
+        run: npx wp-scripts lint-style ${{ env.GIT_DIFF }}
+        if: ${{ (!! env.GIT_DIFF) && (success() || steps.js-lint.conclusion == 'failure') }}