feat: migrate to pnpm

.github/actions/install-dependencies/action.yml

@@ -4,28 +4,31 @@ description: Installs npm packages and manages it's cache
 runs:
   using: composite
   steps:
-    - name: Install Yarn
-      run: npm install -g yarn
-      shell: bash
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      with:
+        version: latest
 
     - name: Cache setup for node modules
       uses: actions/cache@v3
       id: cache
       with:
         path: |
-          ~/.yarn
+          ~/.pnpm-store
           ./node_modules
           ./packages/**/node_modules
-        key: ${{ runner.os }}-blade-${{ hashFiles('**/yarn.lock') }}
+        key: ${{ runner.os }}-blade-${{ hashFiles('**/pnpm-lock.yaml') }}
 
-    # cache miss - install packages with `yarn --frozen-lockfile`
-    # cache hit - download packages from the cache and explicitly run postinstall script
+    # cache miss - install packages with pnpm install --frozen-lockfile
+    # cache hit - download packages from the cache
     - name: install packages if cache miss
-      run: yarn --frozen-lockfile
+      run: |
+        pnpm install --frozen-lockfile
       shell: bash
       if: steps.cache.outputs.cache-hit != 'true'
 
-    - name: Run postinstall script
-      run: yarn postinstall
+    - name: Run postinstall script and ensure dependencies
+      run: |
+        pnpm run postinstall
       shell: bash
       if: steps.cache.outputs.cache-hit == 'true'

.github/workflows/blade-bundle-size.yml

@@ -25,10 +25,10 @@ jobs:
       - name: Setup Cache & Install Dependencies
         uses: ./.github/actions/install-dependencies
       - name: Update Bundle Size Data
-        run: yarn generate-bundle-size-info
+        run: pnpm generate-bundle-size-info
         working-directory: packages/blade
       - name: Danger
-        run: yarn danger ci
+        run: pnpm danger ci
         working-directory: packages/blade
         env:
           DANGER_GITHUB_API_TOKEN: ${{ env.GITHUB_ACCESS_TOKEN }}
@@ -51,10 +51,10 @@ jobs:
       - name: Setup Cache & Install Dependencies
         uses: ./.github/actions/install-dependencies
       - name: Build Blade React Production
-        run: yarn run-s build:clean build:generate-types build:react-prod
+        run: pnpm run-s build:clean build:generate-types build:react-prod
         working-directory: packages/blade
       - name: Update Bundle Size Data
-        run: yarn generate-bundle-size-info
+        run: pnpm generate-bundle-size-info
         working-directory: packages/blade
         env:
           BUNDLE_SIZE_STATS_FILENAME: 'baseBundleSizeStats.json'

.github/workflows/blade-chromatic.yml

@@ -30,7 +30,7 @@ jobs:
           buildScriptName: react:storybook:build
           exitOnceUploaded: true
           onlyChanged: true
-          untraced: '**/package.json'
+          untraced: '**/package.json **/pnpm-lock.yaml'
           traceChanged: 'expanded'
         env:
           GITHUB_SHA: ${{ github.sha }}

.github/workflows/blade-icon-to-code.yml

@@ -20,45 +20,39 @@ jobs:
         with:
           fetch-depth: 0
 
-      # 2. decide what text we’ll put in the file
+      # 2. decide what text we'll put in the file
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
           node-version: '20'
 
-      - name: Install Yarn
-        run: npm install --global yarn
+      - name: Setup Cache & Install Dependencies
+        uses: ./.github/actions/install-dependencies
 
-      - name: Install dependencies
-        run: |
-         cd packages/blade
-         yarn install --frozen-lockfile
-
       - name: Update icons.json
         env:
           FIGMA_API_TOKEN: ${{ secrets.FIGMA_API_TOKEN }}
         run: |
           cd packages/blade
-          yarn run fetch-icons
+          pnpm run fetch-icons
 
-
-      - name : Update icons Script
+      - name: Update icons Script
         run: |
          cd packages/blade
-         yarn run generate-icons
-      # 4. create the pull request
-      - name : Update React Tests 
+         pnpm run generate-icons
+
+      - name: Update React Tests 
         run: |
          cd packages/blade
-         yarn run test:react Icons --updateSnapshot 
+         pnpm run test:react Icons --updateSnapshot 
 
-      - name : Update React-Native Tests 
+      - name: Update React-Native Tests 
         run: |
           cd packages/blade
-          yarn run test:react-native Icons --updateSnapshot 
+          pnpm run test:react-native Icons --updateSnapshot 
 
       - name: Lint Source Code
-        run: yarn lint:fix
+        run: pnpm lint:fix
         continue-on-error: true
 
       - name: Create Pull Request
@@ -74,4 +68,3 @@ jobs:
             This PR was automatically generated by the **Create Random File PR** workflow.
             It adds `${{ github.event.inputs.filename }}` containing random or provided text.
           delete-branch: true
-      # cleans up after merge

.github/workflows/blade-interaction-tests.yml

@@ -39,5 +39,5 @@ jobs:
       - name: Run Interaction Tests
         run: |
           npx playwright install chromium firefox --with-deps
-          yarn test:react:interaction:ci
+          pnpm test:react:interaction:ci
         working-directory: packages/blade

.github/workflows/blade-validate.yml

@@ -22,17 +22,19 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18.12.1
-      - name: Pre-Generate Documentation Lock File
-        run: yarn generate-docs-lockfile
       - name: Setup Cache & Install Dependencies
         uses: ./.github/actions/install-dependencies
+      - name: Pre-Generate Documentation Lock File
+        run: pnpm generate-docs-lockfile
+      # check version of npm run all which is installed
+      - name: Check version of npm-run-all using pnpm
+        run: pnpm list npm-run-all
       - name: Build Blade
-        run: yarn build
-        working-directory: packages/blade
+        run:  pnpm --filter @razorpay/blade build
       - name: Lint Source Code
-        run: yarn lint
+        run: pnpm lint
       - name: Run TypeScript Checks
-        run: yarn typecheck
+        run: pnpm typecheck
         working-directory: packages/blade
 
   test:
@@ -53,7 +55,7 @@ jobs:
       - name: Setup Cache & Install Dependencies
         uses: ./.github/actions/install-dependencies
       - name: Run Unit Tests
-        run: yarn test
+        run: pnpm test
         working-directory: packages/blade
         env:
           SHARD: ${{ matrix.shard }}/${{ matrix.totalShards }}
@@ -110,10 +112,10 @@ jobs:
           ls -la .nyc_output/
 
           # Generate merged report and capture text-summary
-          yarn --silent nyc report --reporter=json --reporter=text-summary > coverage-summary.txt
+          pnpm --silent nyc report --reporter=json --reporter=text-summary > coverage-summary.txt
 
           # Generate full coverage report
-          yarn --silent nyc report --reporter=json --reporter=text > coverage-full.txt
+          pnpm --silent nyc report --reporter=json --reporter=text > coverage-full.txt
 
           # Ensure output directory exists
           mkdir -p packages/blade/coverage

.github/workflows/release.yml

@@ -32,7 +32,7 @@ jobs:
           BLADE_MCP_SENTRY_DSN: ${{ secrets.BLADE_MCP_SENTRY_DSN }}
           BLADE_SEGMENT_KEY: ${{ secrets.BLADE_SEGMENT_KEY }}
         with:
-          publish: yarn release
+          publish: pnpm release
           commit: 'build: update version'
           title: 'build: update version'
       - name: Publish to public npm registry
@@ -42,11 +42,11 @@ jobs:
           BLADE_MCP_SENTRY_DSN: ${{ secrets.BLADE_MCP_SENTRY_DSN }}
           BLADE_SEGMENT_KEY: ${{ secrets.BLADE_SEGMENT_KEY }}
           PUBLISHED_PACKAGES: ${{ steps.changesets.outputs.publishedPackages }}
-        run: yarn publish-npm
+        run: pnpm publish-npm
       - name: Build Blade if not built by changeset
         if: steps.changesets.outputs.published == 'false'
         working-directory: packages/blade
-        run: yarn build
+        run: pnpm build
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         if: steps.changesets.outputs.published == 'true' || github.event_name == 'workflow_dispatch' # run when the package is published via changeset or if a release is triggered manually.
@@ -58,7 +58,7 @@ jobs:
           buildScriptName: react:storybook:build
           exitOnceUploaded: true
           onlyChanged: true
-          untraced: '**/package.json'
+          untraced: '**/package.json **/pnpm-lock.yaml'
           traceChanged: 'expanded'
         env:
           GITHUB_SHA: ${{ github.sha }}

.npmrc

@@ -1 +1,2 @@
 @razorpay:registry=https://registry.npmjs.org/
+shared-workspace-lockfile=true

lerna.json

@@ -1,7 +1,6 @@
 {
   "version": "independent",
-  "npmClient": "yarn",
-  "useWorkspaces": true,
+  "npmClient": "pnpm",
   "command": {
     "bootstrap": {
       "ignoreScripts": true

package.json

@@ -6,6 +6,11 @@
   "engines": {
     "node": ">=18.12.1"
   },
+    "pnpm": {
+      "overrides": {
+        "canvas": "npm:@napi-rs/[email protected]"
+      }
+    },
   "workspaces": {
     "packages": [
       "packages/blade",
@@ -23,8 +28,8 @@
     "lint:fix": "eslint --ext js,jsx,ts,tsx packages --fix && stylelint '**/*.{js,jsx,ts,tsx}' --fix",
     "publish-npm": "node ./scripts/publishToNpm.js",
     "release": "node ./scripts/generateGitHubRegistryNpmrc.js && changeset publish",
-    "postinstall": "yarn build:eslint-plugin-blade",
-    "build": "npm-run-all --parallel build:*",
+    "postinstall": "pnpm run build:eslint-plugin-blade",
+    "build": "npm-run-all build:*",
     "build:blade": "lerna run --scope @razorpay/blade build",
     "build:blade-mcp": "lerna run --scope @razorpay/blade-mcp build",
     "build:eslint-plugin-blade": "lerna run --scope eslint-plugin-blade build",

packages/blade-mcp/package.json

@@ -19,7 +19,7 @@
     "base-blade-template"
   ],
   "scripts": {
-    "prepare": "yarn build",
+    "prepare": "pnpm build",
     "build": "cross-env NODE_ENV=production sh -c \"tsc && chmod +x dist/server.js && node src/replaceEnv.js\"",
     "dev": "tsx src/server.ts",
     "inspect": "npx -y @modelcontextprotocol/inspector node dist/server.js",

packages/blade/.storybook/react/main.ts

@@ -48,6 +48,10 @@ const config: StorybookConfig = {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Add the devtool configuration here
+    config.devtool = 'eval'; 
+
     config.resolve.extensions = [
       '.web.tsx',
       '.web.ts',

packages/blade/jest.native.config.js

@@ -19,7 +19,7 @@ module.exports = {
   },
   testEnvironment: 'node', // Ref: https://github.com/callstack/react-native-testing-library/issues/896#issuecomment-1190249878
   transformIgnorePatterns: [
-    'node_modules/(?!(react-native.*|@react-native.*|@?react-navigation.*|@?react-navigation-stack)/)',
+    'node_modules/.pnpm/(?!(react-native.*|@react-native.*|@?react-navigation.*|@?react-navigation-stack)/)',
   ],
   setupFilesAfterEnv: [
     '@testing-library/jest-native/extend-expect',

packages/blade/jest.web.config.js

@@ -17,7 +17,7 @@ const baseConfig = {
   transform: {
     '\\.(js|ts|tsx)?$': './jest-preprocess.js',
   },
-  transformIgnorePatterns: ['/node_modules/(?!(@table-library)/)'],
+  transformIgnorePatterns: ['/node_modules/(?!(.pnpm/)?@table-library.*)'],
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', './jest-setup.web.js'],
   moduleNameMapper: {