[DEV] Update NPM packages and JS build

.distignore

@@ -71,6 +71,7 @@ test-results
 playwright-report
 visual-regressions
 yarn.lock
+package-lock.json
 .ds_store
 .storybook
 stories

.eslintrc

@@ -14,7 +14,8 @@
 	  ],
 	  "rules": {
 		"@typescript-eslint/ban-ts-comment": "off",
-		"@wordpress/no-global-event-listener": "off"
+		"@wordpress/no-global-event-listener": "off",
+		"jsdoc/check-line-alignment": "off"
 	  },
 	  "settings": {
 		"import/parsers": {

.github/workflows/create-tag.yml

@@ -10,7 +10,7 @@ jobs:
     if: "! contains(github.event.head_commit.message, '[skip ci]')"
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@master
         with:
@@ -19,23 +19,23 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Get npm cache directory path
+        id: npm-cache-dir-path
+        run: echo "::set-output name=dir::$(npm config get cache)"
       - uses: actions/cache@v2
-        id: yarn-cache
+        id: npm-cache
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-npm-
       - name: Release new version
         id: release
         run: |
-          yarn install --frozen-lockfile
+          npm ci
           composer install --prefer-dist --no-progress --no-suggest
-          yarn run build
-          yarn run release
+          npm run build
+          npm run release
         env:
           CI: true
           GITHUB_TOKEN: ${{ secrets.BOT_TOKEN }}

.github/workflows/deploy-npm-package.yml

@@ -12,7 +12,7 @@ jobs:
     if: github.actor != 'pirate-bot'
     strategy:
       matrix:
-        node-version: [ 14.x ]
+        node-version: [ 18.x ]
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v2.3.1

.github/workflows/deploy-storybook.yml

@@ -12,25 +12,25 @@ jobs:
         uses: actions/checkout@v2.3.1
         with:
           persist-credentials: false
-      - name: Setup node 14
+      - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+          node-version: 18.x
+      - name: Get npm cache directory path
+        id: npm-cache-dir-path
+        run: echo "::set-output name=dir::$(npm config get cache)"
       - uses: actions/cache@v2
-        id: yarn-cache
+        id: npm-cache
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-npm-
       - name: Install and Build 🔧
         run: |
-          yarn install --frozen-lockfile
-          yarn run build
-          yarn run build-storybook
+          npm ci
+          npm run build
+          npm run build-storybook
           cp ./.storybook/readme.md ./storybook-static/readme.md
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@3.6.2

.github/workflows/deploy.yml

@@ -15,26 +15,26 @@ jobs:
       SSH_PATH: ${{ secrets.SSH_PATH }}
     steps:
       - uses: actions/checkout@master
-      - name: Setup node 14
+      - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+          node-version: 18.x
+      - name: Get npm cache directory path
+        id: npm-cache-dir-path
+        run: echo "::set-output name=dir::$(npm config get cache)"
       - uses: actions/cache@v2
-        id: yarn-cache
+        id: npm-cache
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-npm-
       - name: Build & create dist/artifact
         run: |
-          yarn install --frozen-lockfile
+          npm ci
           composer install --no-dev --prefer-dist --no-progress --no-suggest
-          yarn run build
-          yarn run dist
+          npm run build
+          npm run dist
       - name: Add SSH Key
         run: |
           mkdir $HOME/.ssh
@@ -51,8 +51,8 @@ jobs:
           AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.S3_AWS_KEY_ARTIFACTS }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_AWS_SECRET_ARTIFACTS }}
-          AWS_REGION: 'us-west-1'     # optional: defaults to us-east-1
-          SOURCE_DIR: 'artifact'      # optional: defaults to entire repository
+          AWS_REGION: "us-west-1" # optional: defaults to us-east-1
+          SOURCE_DIR: "artifact" # optional: defaults to entire repository
           DEST_DIR: ${{ secrets.AWS_PRODUCTS_FOLDER }}/$BUILD_NAME/latest
       - name: Upload Tagged Version to S3
         uses: jakejarvis/s3-sync-action@master
@@ -62,8 +62,8 @@ jobs:
           AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.S3_AWS_KEY_ARTIFACTS }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_AWS_SECRET_ARTIFACTS }}
-          AWS_REGION: 'us-west-1'     # optional: defaults to us-east-1
-          SOURCE_DIR: 'artifact'      # optional: defaults to entire repository
+          AWS_REGION: "us-west-1" # optional: defaults to us-east-1
+          SOURCE_DIR: "artifact" # optional: defaults to entire repository
           DEST_DIR: ${{ secrets.AWS_PRODUCTS_FOLDER }}/$BUILD_NAME/$BUILD_VERSION
       - name: Send update to the store
         env:

.github/workflows/diff-translations.yml

@@ -5,8 +5,8 @@ on:
   pull_request:
     types: [opened, edited, synchronize, ready_for_review]
     branches:
-      - 'development'
-      - 'new/**'
+      - "development"
+      - "new/**"
 
 jobs:
   translation:
@@ -16,37 +16,37 @@ jobs:
         uses: actions/checkout@v2
         with:
           path: neve-head
-      - name: Setup node 14
+      - name: Setup node 16
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - name: FRESH Makepot BASE
         run: |
-         cd neve-head
-         ls languages/
-         composer install --no-dev --prefer-dist --no-progress --no-suggest
-         yarn install --frozen-lockfile
-         yarn run build
-         ls languages/
+          cd neve-head
+          ls languages/
+          composer install --no-dev --prefer-dist --no-progress --no-suggest
+          npm ci
+          npm run build
+          ls languages/
       - name: Checkout Ref Head
         uses: actions/checkout@v2
         with:
           ref: development
           path: neve-base
       - name: FRESH Makepot HEAD
         run: |
-         cd neve-base
-         ls languages/
-         composer install --no-dev --prefer-dist --no-progress --no-suggest
-         yarn install --frozen-lockfile
-         yarn run build
-         ls languages/
+          cd neve-base
+          ls languages/
+          composer install --no-dev --prefer-dist --no-progress --no-suggest
+          yarn install --frozen-lockfile
+          yarn run build
+          ls languages/
       - name: Find Comment
         uses: peter-evans/find-comment@v1
         id: find_coomment
         with:
           issue-number: ${{ github.event.pull_request.number }}
-          comment-author: 'pirate-bot'
+          comment-author: "pirate-bot"
           body-includes: PR has POT difference
       - name: Install PODiff
         run: |
@@ -72,4 +72,4 @@ jobs:
               teams:
                 - "admin-neve"
           status: Has translation changes, a review admin-neve team is required
-          token:  ${{ secrets.BOT_TOKEN }}
+          token: ${{ secrets.BOT_TOKEN }}

.github/workflows/e2e-storybook.yml

@@ -4,13 +4,13 @@ on:
   pull_request:
     types: [opened, synchronize, ready_for_review]
     branches-ignore:
-      - 'update_dependencies'
+      - "update_dependencies"
     paths:
-      - '.storybook/**'
-      - 'e2e-tests/**'
-      - '.github/e2e-storybook.yml'
-      - 'package.json'
-      - 'stories/**'
+      - ".storybook/**"
+      - "e2e-tests/**"
+      - ".github/e2e-storybook.yml"
+      - "package.json"
+      - "stories/**"
 concurrency:
   group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.ref }}
   cancel-in-progress: true
@@ -25,27 +25,27 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
-      - name: Setup node 14
+      - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+          node-version: 18.x
+      - name: Get npm cache directory path
+        id: npm-cache-dir-path
+        run: echo "::set-output name=dir::$(npm config get cache)"
       - uses: actions/cache@v2
-        id: yarn-cache
+        id: npm-cache
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-npm-
       - name: Build Cypress
         working-directory: ./e2e-tests
-        run:  yarn install --frozen-lockfile
+        run: npm ci
       - name: Start Storybook
         run: |
-          yarn install --frozen-lockfile
-          yarn run build
+          npm ci
+          npm run build
           yarn storybook &
       - name: Run Storybook Cypress tests 🚀 -  ${{ matrix.container }}
         env:

.github/workflows/playwright.yml

@@ -2,7 +2,7 @@ name: Build and test Playwright
 
 on:
   pull_request:
-    types: [ opened, synchronize, ready_for_review ]
+    types: [opened, synchronize, ready_for_review]
     branches-ignore:
       - "update_dependencies"
 
@@ -20,20 +20,20 @@ jobs:
     steps:
       - name: Check out source files
         uses: actions/checkout@v2
-      - name: Setup node 14
+      - name: Setup node 18
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+          node-version: 18.x
+      - name: Get npm cache directory path
+        id: npm-cache-dir-path
+        run: echo "::set-output name=dir::$(npm config get cache)"
       - uses: actions/cache@v2
-        id: yarn-cache
+        id: npm-cache
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-npm-
       - name: Get Composer Cache Directory
         id: composer-cache
         run: |
@@ -47,12 +47,12 @@ jobs:
             ${{ runner.os }}-composer-
       - name: Install composer deps
         run: composer install --no-dev --prefer-dist --no-progress --no-suggest
-      - name: Install yarn deps
-        run: yarn install --frozen-lockfile
+      - name: Install NPM deps
+        run: npm ci
       - name: Build files
-        run: yarn run build
+        run: npm run build
       - name: Create zip
-        run: yarn run dist
+        run: npm run dist
       - name: Retrieve branch name
         id: retrieve-branch-name
         run: echo "::set-output name=branch_name::$(REF=${GITHUB_HEAD_REF:-$GITHUB_REF} && echo ${REF#refs/heads/} | sed 's/\//-/g')"
@@ -150,18 +150,28 @@ jobs:
       ZIP_URL: "https://verti-artifacts.s3.amazonaws.com/${{ github.event.pull_request.base.repo.name }}-${{ needs.dev-zip.outputs.branch-name }}-${{ needs.dev-zip.outputs.git-sha-8 }}/neve.zip"
     steps:
       - uses: actions/checkout@v3
-      - name: Setup node 16
+      - name: Setup node 18
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
+      - name: Get npm cache directory path
+        id: npm-cache-dir-path
+        run: echo "::set-output name=dir::$(npm config get cache)"
+      - uses: actions/cache@v2
+        id: npm-cache
+        with:
+          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
       - name: Install ${{ matrix.envs }} env for ${{ matrix.specs }} specs
         run: bash ./bin/envs/init.sh ${{ matrix.envs }} latest no "$ZIP_URL"
       - name: Install dependencies
-        run: yarn
+        run: npm ci
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps chromium
       - name: Run Playwright tests
-        run: yarn run test:playwright e2e-tests/specs/${{ matrix.specs }}
+        run: npm run test:playwright e2e-tests/specs/${{ matrix.specs }}
       - name: Upload trace file
         if: failure()
         uses: actions/upload-artifact@v3