feat(many): migrate from npm to pnpm Phase 1

.github/workflows/deploy.yml

@@ -13,11 +13,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - name: Install Node 22
         uses: actions/setup-node@v4
         with:
           node-version: '22'
-      - run: npm ci && npm run bootstrap
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile && pnpm run bootstrap
       - name: Set build directory and deployment path based on branch
         id: set-build-dir
         run: |
@@ -37,7 +39,7 @@ jobs:
               ;;
           esac
       - name: Build docs-app
-        run: npm run build:docs
+        run: pnpm run build:docs
       - name: Deploy to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@v4
         with:
@@ -57,13 +59,15 @@ jobs:
     if: github.ref == 'refs/heads/master'
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - name: Install Node 22
         uses: actions/setup-node@v4
         with:
           node-version: '22'
-      - run: npm ci && npm run bootstrap
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile && pnpm run bootstrap
       - name: Build docs-app
-        run: npm run build:docs
+        run: pnpm run build:docs
       - name: Deploy to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@v4
         with:

.github/workflows/manual-release-from-pr.yml

@@ -8,20 +8,21 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: '22'
-          cache: 'npm'
+          cache: 'pnpm'
       - name: Install packages
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: Set up project
-        run: npm run bootstrap
+        run: pnpm run bootstrap
       - name: Release to NPM
         env:
           NPM_TOKEN: ${{secrets.NPM_TOKEN}}
           NPM_EMAIL: ${{secrets.NPM_EMAIL}}
           NPM_USERNAME: ${{secrets.NPM_USERNAME}}
-        run: npm run release -- --prRelease
+        run: pnpm run release -- --prRelease
       - name: Get commit message
         run: | # puts the first line of the last commit message to the commmit_message env var
           echo "commmit_message=$(git log --format=%B -n 1 ${{ github.event.after }} | head -n 1)" >> $GITHUB_ENV

.github/workflows/manual-release-to-npm.yml

@@ -8,20 +8,22 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - uses: pnpm/action-setup@v4
       - name: Install Node 22
         uses: actions/setup-node@v4
         with:
           node-version: '22'
+          cache: 'pnpm'
       - name: Install packages
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: Set up project
-        run: npm run bootstrap
+        run: pnpm run bootstrap
       - name: Release to NPM
         env:
           NPM_TOKEN: ${{secrets.NPM_TOKEN}}
           NPM_EMAIL: ${{secrets.NPM_EMAIL}}
           NPM_USERNAME: ${{secrets.NPM_USERNAME}}
-        run: npm run release
+        run: pnpm run release
       - name: Get commit message
         run: | # puts the first line of the last commit message to the commmit_message env var
           echo "commmit_message=$(git log --format=%B -n 1 ${{ github.event.after }} | head -n 1)" >> $GITHUB_ENV

.github/workflows/pr-validation.yml

@@ -8,46 +8,51 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: '22'
-          cache: 'npm'
+          cache: 'pnpm'
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: Bootstrap project
-        run: npm run bootstrap
+        run: pnpm run bootstrap
       - name: Lint commits
-        run: npm run lint:commits
+        run: pnpm run lint:commits
       - name: Lint code
-        run: npm run lint:changes
+        run: pnpm run lint:changes
   vitest-tests:
     name: Vitest unit tests
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: '22'
-          cache: 'npm'
+          cache: 'pnpm'
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: Bootstrap project
-        run: npm run bootstrap
+        run: pnpm run bootstrap
       - name: Run vitest unit tests
-        run: npm run test:vitest
+        run: pnpm run test:vitest
   cypress:
     name: Cypress component tests
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: '22'
-          cache: 'npm'
+          cache: 'pnpm'
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
+      - name: Install Cypress binary
+        run: npx cypress install
       - name: Bootstrap project
-        run: npm run bootstrap
+        run: pnpm run bootstrap
       - name: Run Cypress components tests
-        run: npm run cy:component
+        run: pnpm run cy:component
 

.github/workflows/preview.yml

@@ -14,15 +14,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - name: Install Node 22
         uses: actions/setup-node@v4
         with:
           node-version: '22'
-      - name: Npm install and bootstrap
-        run: npm ci && npm run bootstrap
+          cache: 'pnpm'
+      - name: Install and bootstrap
+        run: pnpm install --frozen-lockfile && pnpm run bootstrap
         if: github.event.action != 'closed' # don't run install and bootstrap unnecessarily when pr is closed
       - name: Build docs-app
-        run: npm run build:docs
+        run: pnpm run build:docs
         if: github.event.action != 'closed'
       - uses: rossjrw/pr-preview-action@v1
         with:

.github/workflows/release.yml

@@ -11,22 +11,23 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: '22'
-          cache: 'npm'
+          cache: 'pnpm'
       - name: Install packages.
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: Set up project.
-        run: npm run bootstrap
+        run: pnpm run bootstrap
       - name: Run tests.
-        run: USE_REACT_STRICT_MODE=0 npm run test:vitest
+        run: USE_REACT_STRICT_MODE=0 pnpm run test:vitest
       - name: Release to NPM
         env:
           NPM_TOKEN: ${{secrets.NPM_TOKEN}}
           NPM_EMAIL: ${{secrets.NPM_EMAIL}}
           NPM_USERNAME: ${{secrets.NPM_USERNAME}}
-        run: npm run release
+        run: pnpm run release
   tag:
     needs: release
     if: "startsWith(github.event.head_commit.message, 'chore(release)')"

.github/workflows/visual-regression.yml

@@ -13,16 +13,30 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+      - name: Cache Cypress binary
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/Cypress
+          key: ${{ runner.os }}-cypress-${{ hashFiles('regression-test/package-lock.json') }}
       - name: Build InstUI
-        run: npm ci && npm run bootstrap
-      - name: Install dependencies
+        run: pnpm install --frozen-lockfile && pnpm run bootstrap
+      - name: Install regression-test dependencies
         run: npm ci
         working-directory: regression-test
+      - name: Install Cypress binary
+        run: npx cypress install
+        working-directory: regression-test
       - name: Run Cypress tests
         uses: cypress-io/github-action@v6
         env:
           ELECTRON_EXTRA_LAUNCH_ARGS: "--remote-debugging-port=9222"
         with:
+          install: false
           build: npm run build
           start: npm start
           working-directory: regression-test
@@ -42,10 +56,14 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-      - name: Install dependencies
+          cache: 'pnpm'
+      - name: Build InstUI
+        run: pnpm install --frozen-lockfile && pnpm run bootstrap
+      - name: Install regression-test dependencies
         run: npm ci
         working-directory: regression-test
       - name: Download Cypress test results

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 npm-debug.log
+pnpm-debug.log
 lerna-debug.log
 ./build-storybook.log
 coverage/
@@ -9,10 +10,10 @@ __build__
 .idea
 .DS_Store
 .viminfo
-.npmrc
 .env
 .env.test
 .tmp/
+.pnpm-store/
 
 tsconfig.build.tsbuildinfo
 
@@ -31,3 +32,6 @@ tsconfig.build.tsbuildinfo
 .claude/commands/*
 !.claude/commands/commit.md
 !.claude/commands/pr.md
+
+# Playwright MCP
+.playwright-mcp

.husky/pre-commit

@@ -1 +1 @@
-npm run husky:pre-commit
+pnpm run husky:pre-commit

.npmrc

@@ -0,0 +1,13 @@
+# Strict peer dependencies (recommended)
+auto-install-peers=false
+strict-peer-dependencies=true
+
+# Workspace protocol
+link-workspace-packages=true
+
+# Use hoisted node linker initially for compatibility
+node-linker=hoisted
+
+# Can enable later for stricter isolation:
+# node-linker=isolated
+# shamefully-hoist=false

CLAUDE.md

@@ -12,7 +12,7 @@ InstUI is a React component library and design system. **Lerna 8 monorepo** with
   - Example: https://instructure.design/markdowns/Alert.md
   - Example: https://instructure.design/markdowns/Button.md
 
-**Tech Stack:** Node.js >=22, npm, React 18.3.1+, TypeScript 5.8.3, Emotion (CSS-in-JS), Vitest, Cypress, Chromatic
+**Tech Stack:** Node.js >=22, pnpm, React 18.3.1+, TypeScript 5.8.3, Emotion (CSS-in-JS), Vitest, Cypress, Chromatic
 
 ## Repository Structure
 
@@ -38,8 +38,8 @@ InstUI is a React component library and design system. **Lerna 8 monorepo** with
 ## Quick Start
 
 ```bash
-npm run bootstrap  # First time setup (clean, build icons, compile, generate tokens)
-npm run dev        # Start dev server at http://localhost:9090
+pnpm run bootstrap  # First time setup (clean, build icons, compile, generate tokens)
+pnpm run dev        # Start dev server at http://localhost:9090
 ```
 
 Most changes hot-reload automatically when dev server is running.
@@ -48,20 +48,20 @@ Most changes hot-reload automatically when dev server is running.
 
 ```bash
 # Development
-npm run dev          # Dev server (http://localhost:9090)
-npm run build:types  # Build TypeScript declarations
+pnpm run dev          # Dev server (http://localhost:9090)
+pnpm run build:types  # Build TypeScript declarations
 
 # Testing
-npm run test:vitest  # Unit tests
-npm run cy:component # Cypress component tests
+pnpm run test:vitest  # Unit tests
+pnpm run cy:component # Cypress component tests
 
 # Linting
-npm run lint:fix     # Auto-fix linting issues
-npm run ts:check     # TypeScript references check
+pnpm run lint:fix     # Auto-fix linting issues
+pnpm run ts:check     # TypeScript references check
 
 # Troubleshooting
-npm run clean && npm run bootstrap       # Fix build issues
-npm run clean-node && npm install        # Nuclear option (removes all node_modules)
+pnpm run clean && pnpm run bootstrap       # Fix build issues
+pnpm run clean-node && pnpm install        # Nuclear option (removes all node_modules)
 ```
 
 ## Code Style
@@ -102,7 +102,7 @@ npm run clean-node && npm install        # Nuclear option (removes all node_modu
 1. Find component in `/packages/ui-[name]/src/[Component]/`
 2. Check Component README for API details
 3. Make changes
-4. Run tests: `npm run test:vitest`
+4. Run tests: `pnpm run test:vitest`
 5. Update README if the functionality has changed (e.g., a new prop was added)
 6. Use `/commit` to create commit
 
@@ -150,13 +150,13 @@ All components **MUST**:
 ### Running Tests
 
 ```bash
-npm run test:vitest  # Unit tests
-npm run cy:component # Cypress tests
+pnpm run test:vitest  # Unit tests
+pnpm run cy:component # Cypress tests
 
 # Visual regression tests (in regression-test directory)
 cd regression-test
-npm run dev              # Start at localhost:3000
-npm run cypress-chrome   # Run with GUI
+pnpm run dev              # Start at localhost:3000
+pnpm run cypress-chrome   # Run with GUI
 ```
 
 ### Adding Visual Regression Test