feat: migrate yarn v1 to pnpm v9

.github/workflows/push.yml

@@ -18,12 +18,10 @@ jobs:
     steps:
       - name: Check out Git repository
         uses: actions/checkout@v4
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install dependencies
-        run: yarn && npx playwright install --with-deps
+      - name: Setup pnpm and node
+        uses: ./setup-pnpm.yml
+      - name: Install playwright
+        run: pnpm exec playwright install --with-deps
       - name: Lint
         uses: wearerequired/lint-action@v2
         with:
@@ -36,4 +34,4 @@ jobs:
           prettier_extensions: js,ts,tsx
           prettier_auto_fix: false
       - name: Run Storybook test-runner
-        run: yarn test
+        run: pnpm test

.github/workflows/release.yml

@@ -18,10 +18,14 @@ jobs:
       - uses: actions/checkout@v2
         with:
           ref: "main"
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Verify pnpm installation
+        run: pnpm --version
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-      - run: npm install -g yarn
+          cache: "pnpm"
       - name: Release latest Ably UI version
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -39,8 +43,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Build
-        run: yarn && yarn build-storybook
+      - name: Setup pnpm and node
+        uses: ./setup-pnpm.yml
+      - name: Build storybook
+        run: pnpm build-storybook
       - name: Upload
         uses: actions/[email protected]
         with:

.github/workflows/review.yml

@@ -20,8 +20,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Build
-        run: yarn && yarn build-storybook
+      - name: Setup pnpm and node
+        uses: ./setup-pnpm.yml
+      - name: Build storybook
+        run: pnpm build-storybook
       - name: Upload
         uses: actions/[email protected]
         with:

.github/workflows/setup-pnpm.yml

@@ -0,0 +1,21 @@
+name: Setup pnpm
+
+on: workflow_call
+
+jobs:
+  setup-pnpm:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Verify pnpm installation
+        run: pnpm --version
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install dependencies
+        run: |
+          pnpm config set store-dir ~/.pnpm-store  
+          pnpm i --frozen-lockfile

.gitignore

@@ -1,7 +1,6 @@
 .bundle
 .DS_Store
 node_modules
-yarn-error.log
 /dist
 /preview
 /core
@@ -10,4 +9,3 @@ yarn-error.log
 types
 index.d.ts
 computed-icons.ts
-computed-colors.json

.npmrc

@@ -1 +1,2 @@
+public-hoist-pattern[]=*storybook*
 //registry.npmjs.org/:_authToken=${NPM_TOKEN}

.tool-versions

@@ -1,2 +1,2 @@
 nodejs 20.13.1
-yarn 1.22.22
+pnpm 9.14.2

package.json

@@ -2,6 +2,7 @@
   "name": "@ably/ui",
   "version": "15.0.2",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
+  "packageManager": "[email protected]",
   "repository": {
     "type": "git",
     "url": "git+ssh://[email protected]/ably/ably-ui.git"
@@ -33,6 +34,7 @@
     "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash.throttle": "^4.1.9",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
@@ -47,6 +49,7 @@
     "http-server": "14.1.1",
     "msw": "2.6.1",
     "msw-storybook-addon": "^2.0.2",
+    "playwright": "^1.49.0",
     "prettier": "^3.2.5",
     "react-syntax-highlighter": "^15.6.1",
     "storybook": "^8.4.0",
@@ -63,19 +66,19 @@
     "build:tsc": "tsc && node tsc.js && rm -r types",
     "build:cleanup": "mv dist/* . && rm -r dist",
     "build:sprites": "ts-node scripts/generate-sprites.ts",
-    "build": "yarn build:prebuild && yarn build:sprites && yarn build:swc && yarn build:tsc && yarn build:cleanup",
-    "watch": "yarn build:swc -w",
+    "build": "pnpm build:prebuild && pnpm build:sprites && pnpm build:swc && pnpm build:tsc && pnpm build:cleanup",
+    "watch": "pnpm build:swc -w",
     "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
     "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx}",
     "lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx}",
     "update:all": "./scripts/update-dependents.sh",
     "pre-release": "./scripts/pre-release.sh",
     "release": "./scripts/release.sh",
     "start": "vite --port 5000",
-    "storybook": "yarn build && storybook dev -p 6006",
-    "build-storybook": "yarn build && storybook build --quiet -o preview",
-    "test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
-    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
+    "storybook": "pnpm build && storybook dev -p 6006",
+    "build-storybook": "pnpm build && storybook build --quiet -o preview",
+    "test": "pnpx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build-storybook && pnpm http-server preview --port 6007 --silent\" \"pnpx wait-on tcp:6007 && pnpm test-storybook --url http://127.0.0.1:6007\"",
+    "test:update-snapshots": "pnpx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build-storybook && pnpm http-server preview --port 6007 --silent\" \"pnpx wait-on tcp:6007 && pnpm test-storybook -u --url http://127.0.0.1:6007\""
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.1",
@@ -87,7 +90,7 @@
     "highlightjs-curl": "^1.3.0",
     "js-cookie": "^3.0.5",
     "lodash.throttle": "^4.1.1",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4",