chore(yarn) : migrated yarn to modern yarn berry (#842)

* chore(yarn): migrated yarn to modern yarn: version:[email protected]

* chore(package.json): add missing peer deps for cypress/coverage

* chore(github-actions): updated workflow with corepack to use modern yarn

* chore(ci.yml): update workflow to run on push & unauthorised file job to run on pull only

* chore(docs): Add docs for corepack for modern yarn

* Add corepack in deploy-preview

Author: aialok

.github/workflows/build-preview.yml

@@ -18,10 +18,13 @@ jobs:
         uses: actions/checkout@v4
         with:
             submodules: 'recursive'
+
+      - name: Corepack enable
+        run: corepack enable
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
 
       - name: Cache Node dependencies
         uses: actions/cache@v4
@@ -48,7 +51,7 @@ jobs:
          node-version: 20
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
 
       - name: Build Site
         run: yarn run build

.github/workflows/ci.yml

@@ -2,6 +2,9 @@ name: CI
 on:
   pull_request:
     types: [opened, reopened, synchronize]
+  push:
+    branches:
+      - main
 
 env:
   CODECOV_UNIQUE_NAME: CODECOV_UNIQUE_NAME-${{ github.run_id }}-${{ github.run_number }}
@@ -13,43 +16,64 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-        
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-    
-      - name: Cache Node dependencies
-        uses: actions/cache@v4
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      
-      - if: ${{ steps.yarn-cache.outputs.cache-hit != 'true' }}
-        name: List the state of node modules
-        continue-on-error: true
-        run: yarn list
 
+      - name: Corepack enable 
+        run: corepack enable
+        
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
+          cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
+        run: yarn install --immutable
 
       - name: Linting and Formatting checks
         run: yarn run lint
 
       - name: Type checking
         run: yarn run typecheck
 
+  testing-and-coverage:
+    name: Testing and Coverage
+    needs: [code-quality-checks]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Corepack enable
+        run: corepack enable
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Run development server
+        run: yarn run dev &
+
+      - name: Run tests and generate coverage report
+        run: yarn run test:coverage:all
+
+      - name: Upload coverage report to Codecov
+        uses: codecov/[email protected]
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          name: ${{ env.CODECOV_UNIQUE_NAME }}
+          verbose: true
+          fail_ci_if_error: true
+          
   check-unauthorized-file-changes:
     name: Check Unauthorized File Changes
-    if: ${{github.actor != 'dependabot[bot]'}} 
+    if: ${{github.actor != 'dependabot[bot]'}} && ${{github.event_name == 'pull_request'}}
     runs-on: ubuntu-latest
     steps: 
       - name: Checkout code
@@ -94,36 +118,3 @@ jobs:
             echo "$file is unauthorized to change/delete"
           done
           exit 1
-
-  testing-and-coverage:
-    name: Testing and Coverage
-    needs: [code-quality-checks]
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          submodules: recursive
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'yarn'
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Run development server
-        run: yarn run dev &
-
-      - name: Run tests and generate coverage report
-        run: yarn run test:coverage:all
-
-      - name: Upload coverage report to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          name: ${{ env.CODECOV_UNIQUE_NAME }}
-          verbose: true
-          fail_ci_if_error: true

.github/workflows/link-checker.yml

@@ -13,9 +13,11 @@ jobs:
     steps:
       - name: Checkout Repository  
         uses: actions/checkout@v4
+        with:
+          submodules: 'recursive'
 
-      - name: Submodule
-        run: git submodule update --init --recursive
+      - name: Corepack enable
+        run: corepack enable
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
@@ -30,8 +32,8 @@ jobs:
           private-key: ${{ secrets.PRIVATE_KEY }}
 
       - name: Install Dependencies
-        run: yarn install --frozen-lockfile
-
+        run: yarn install --immutable
+        
       - name: Serve App Locally
         run: yarn run dev &
 

.github/workflows/production-deployment.yml

@@ -18,19 +18,13 @@ jobs:
               uses: actions/checkout@v4
               with:
                 submodules: 'recursive'
+                
+            - name: Corepack enable
+              run: corepack enable
 
             - name: Get yarn cache directory path
               id: yarn-cache-dir-path
-              run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-        
-            - name: Cache Node dependencies
-              uses: actions/cache@v4
-              id: yarn-cache
-              with:
-                path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                restore-keys: |
-                    ${{ runner.os }}-yarn-
+              run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
 
             - name: Cache Next Build
               uses: actions/cache@v4
@@ -46,9 +40,10 @@ jobs:
               uses: actions/setup-node@v4
               with:
                 node-version: 20
+                cache: 'yarn'
 
             - name: Install dependencies
-              run: yarn install --frozen-lockfile
+              run: yarn install --immutable
 
             - name: Build Site
               run: yarn run build

.gitignore

@@ -49,4 +49,14 @@ yarn-error.log*
 .vscode/*
 !.vscode/launch.json
 
-.idea/*
+.idea/*
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -52,6 +52,68 @@ cp .env.example .env
 
 4. Ensure .env is in your .gitignore.
 
+### Setup Corepack
+
+This project uses modern Yarn ([email protected]), which requires Corepack for proper setup and management of package managers. Corepack is a tool that comes with Node.js 14.19.0 and later, allowing for consistent package manager versions across your project.
+
+#### What is Corepack?
+
+Corepack is an experimental tool to help with managing versions of your package managers. It exposes binary proxies for each supported package manager that, when called, will identify whatever package manager is configured for the current project, download it if needed, and finally run it.
+
+
+#### Installing Corepack
+
+If you're using Node.js version 14.19.0 or later, Corepack is included but might need to be enabled. For Node.js 16.10 or later, Corepack is available by default but might still need to be enabled.
+
+To enable Corepack, run:
+
+```bash
+corepack enable
+```
+
+If you're using an older version of Node.js or if the above command doesn't work, you can install Corepack globally using npm:
+
+```bash
+npm install -g corepack
+```
+
+#### Using Corepack with This Project
+
+Once Corepack is enabled or installed, it will automatically use the correct version of Yarn specified in the project's `package.json` file. You don't need to manually install Yarn.
+
+To use Yarn commands, simply run them as usual:
+
+```bash
+yarn install
+yarn run build
+yarn run dev
+```
+
+Corepack will ensure that the correct version of Yarn is used for these commands.
+
+#### Updating Yarn Version
+
+If you need to update the Yarn version used in the project:
+
+1. Update the `packageManager` field in `package.json`:
+   ```json
+   {
+     "packageManager": "[email protected]"
+   }
+   ```
+2. Run `yarn set version x.y.z` to update the local Yarn version.
+
+#### Troubleshooting
+
+If you encounter any issues with Yarn commands, try running:
+
+```bash
+corepack prepare
+```
+
+This will ensure that the correct version of Yarn is downloaded and prepared for use.
+
+For more information about Corepack, refer to the [official Node.js documentation](https://nodejs.org/api/corepack.html).
 
 #### Install dependencies
 

package.json

@@ -54,8 +54,12 @@
     "zustand": "^4.0.0-rc.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@cypress/code-coverage": "^3.12.44",
     "@next/eslint-plugin-next": "^14.0.1",
+    "@types/babel__core": "^7",
+    "@types/babel__preset-env": "^7",
     "@types/file-saver": "^2.0.7",
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^20.14.10",
@@ -84,7 +88,8 @@
     "postcss": "^8.4.40",
     "prettier": "3.3.3",
     "tailwindcss": "^3.3.5",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "webpack": "^5.93.0"
   },
   "babel": {
     "presets": [
@@ -93,5 +98,6 @@
     "plugins": [
       "istanbul"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.91d93b445d9284e7ed52931369bc89a663414e5582d00eea45c67ddc459a2582919eece27c412d6ffd1bd0793ff35399381cb229326b961798ce4f4cc60ddfdb"
 }