build: Swapping NPM for PNPM Step 5 of 5

.circleci/config.yml

@@ -5,11 +5,12 @@ version: 2.1
 orbs:
   aws-cli: circleci/aws-cli@0.1.1
   aws-s3: circleci/aws-s3@1.0.8
-
+  node: circleci/node@7.2.1
+
 references:
   container_config: &container_config
     docker:
-      - image: cimg/node:24.14.1
+      - image: node:24.14.1
     working_directory: ~/atlantis
 
   restore_repo: &restore_repo
@@ -19,11 +20,21 @@ references:
         - v1-repo-{{ .Branch }}
         - v1-repo
 
-  restore_npm_cache: &restore_npm_cache
+  restore_pnpm_cache: &restore_pnpm_cache
     restore_cache:
-      name: Restore npm cache
+      name: Restore pnpm cache
       keys:
-        - npm-cache-v1
+        - pnpm-cache-v1-{{ checksum "pnpm-lock.yaml" }}
+        - pnpm-cache-v1
+
+  setup_pnpm: &setup_pnpm
+    run:
+      name: Setup pnpm
+      command: |
+        npm install --global corepack@latest
+        corepack enable
+        corepack prepare pnpm@latest-10 --activate
+        pnpm config set store-dir ~/.pnpm-store
 
   attach_workspace: &attach_workspace
     attach_workspace:
@@ -35,10 +46,10 @@ references:
       paths:
         - '*'
 
-  npm_install: &npm_install
+  pnpm_install: &pnpm_install
     run:
       name: Install Dependencies
-      command: npm ci
+      command: pnpm install
 
   check_git_status: &check_git_status
     run:
@@ -48,7 +59,7 @@ references:
           echo "Found uncommitted changes which is unexpected. This likely means you forgot to commit generated files."
           echo "Here's the diff:"
           git status
-          echo "If the diff includes *.props.json files, run 'npm run generate' inside packages/site, review and commit the changes."
+          echo "If the diff includes *.props.json files, run 'pnpm run generate' inside packages/site, review and commit the changes."
           exit 1
         else
           echo "No uncommitted changes."
@@ -69,7 +80,7 @@ references:
 
   playwright_config: &playwright_config
     docker:
-      - image: mcr.microsoft.com/playwright:v1.58.2-noble
+      - image: mcr.microsoft.com/playwright:v1.59.1-noble
     working_directory: ~/atlantis
 
 jobs:
@@ -88,14 +99,20 @@ jobs:
     <<: *container_config
     steps:
       - *attach_workspace
-      - *restore_npm_cache
-      - *npm_install
+      - *setup_pnpm
+      - *restore_pnpm_cache
+      - *pnpm_install
+      - save_cache:
+          key: pnpm-cache-v1-{{ checksum "pnpm-lock.yaml" }}
+          paths:
+            - .pnpm-store
       - *persist_to_workspace
 
   check_for_manual_release:
     <<: *container_config
     steps:
       - *attach_workspace
+      - *setup_pnpm
       - run:
           name: Check for manual releases
           command: |
@@ -105,14 +122,15 @@ jobs:
             elif git log --max-count=1 --pretty=%s | grep -q "chore(release): Manual release"; then
               echo "Skipping run on manual release commit."
             else
-              npm run preventManualRelease
+              pnpm run preventManualRelease
             fi
 
   lint_javascript:
     <<: *container_config
     steps:
       - *attach_workspace
-      - run: npm run lint:js -- --quiet --format junit -o reports/junit/js-lint-results.xml
+      - *setup_pnpm
+      - run: pnpm run lint:js -- --quiet --format junit -o reports/junit/js-lint-results.xml
       - store_test_results:
           path: reports/junit
       - store_artifacts:
@@ -122,8 +140,9 @@ jobs:
     <<: *container_config
     steps:
       - *attach_workspace
+      - *setup_pnpm
       - run: mkdir -p reports/junit
-      - run: npm run lint:css -- --custom-formatter node_modules/stylelint-junit-formatter/index.js > reports/junit/css-lint-results.xml
+      - run: pnpm run lint:css -- --custom-formatter node_modules/stylelint-junit-formatter/index.js > reports/junit/css-lint-results.xml
       - store_test_results:
           path: reports/junit
       - store_artifacts:
@@ -133,10 +152,11 @@ jobs:
     <<: *container_config
     steps:
       - *attach_workspace
+      - *setup_pnpm
       - run:
           name: "Run tests with jest"
           command:
-            npm test -- --runInBand --no-cache --coverage --reporters=jest-junit
+            pnpm test -- --runInBand --no-cache --coverage --reporters=jest-junit
           environment:
             JEST_JUNIT_OUTPUT_DIR: "reports/junit/"
             JEST_JUNIT_OUTPUT_NAME: "js-test-results.xml"
@@ -153,36 +173,40 @@ jobs:
     <<: *container_config
     steps:
       - *attach_workspace
+      - *setup_pnpm
       - run:
-          command: npm run --prefix packages/components storybook:build
+          command: pnpm --dir packages/components run storybook:build
       - *check_git_status
 
   build_storybook_mobile:
     <<: *container_config
     steps:
       - *attach_workspace
+      - *setup_pnpm
       - run:
-          command: npm run --prefix packages/components-native storybook:build
+          command: pnpm --dir packages/components-native run storybook:build
       - *check_git_status
 
   build_new_docs:
     <<: *container_config
     steps:
       - *attach_workspace
+      - *setup_pnpm
       - run:
-          command: cd packages/site && npm run generate && npm run build
+          command: cd packages/site && pnpm run generate && pnpm run build
       - *check_git_status
 
   release:
     <<: *container_config
     steps:
       - *attach_workspace
+      - *setup_pnpm
       - *github_authenticity
       - add_ssh_keys:
           fingerprints:
             - "0a:70:b5:5e:87:c1:05:50:cc:54:c6:59:3b:43:77:63"
       - run:
-          name: Authenticate with npm
+          name: Authenticate with npm registry
           # Store auth information in per-user config instead of project-level to avoid accidentally committing it.
           command: echo "//registry.npmjs.org/:_authToken=\${JOBBER_NPM_PUBLISH_TOKEN}" > ~/.npmrc
       - run:
@@ -191,17 +215,18 @@ jobs:
             if git log --max-count=1 --pretty=%s | grep -q "chore(release): Publish"; then
               echo "Skipping run on release commit."
             else
-              npm run ci:release
+              pnpm run ci:release
             fi
 
   e2e_tests:
     <<: *playwright_config
     resource_class: medium+
     steps:
       - *attach_workspace
+      - *setup_pnpm
       - run:
           name: Start dev server for e2e tests
-          command: cd packages/site && npm run dev
+          command: cd packages/site && pnpm run dev
           background: true
       - run:
           name: Wait for dev server to be ready
@@ -219,7 +244,7 @@ jobs:
             done
       - run:
           name: Run Playwright tests
-          command: cd packages/site && npm run test:visual:ci
+          command: cd packages/site && pnpm run test:visual:ci
           env:
             CI: 'true'
       - store_test_results:

.github/workflows/diff-outputs.yml

@@ -5,7 +5,9 @@ on:
     inputs:
       # This is just a reminder. You can choose to ignore this, but you might see unexpected differences if you're behind master.
       confirm_branch_synced:
-        description: Is your branch up to date with master? Otherwise output diffs can be misleading.
+        description:
+          Is your branch up to date with master? Otherwise output diffs can be
+          misleading.
         required: true
         type: boolean
         default: false
@@ -19,6 +21,12 @@ jobs:
       - uses: actions/setup-node@v6
         with:
           node-version-file: package.json
+          cache: "pnpm"
+          cache-dependency-path: "pnpm-lock.yaml"
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.33.0
+          run_install: false
 
       - name: Configure git author
         run: |
@@ -37,7 +45,7 @@ jobs:
 
           install_and_build() {
             echo "Clean installing dependencies..."
-            npm install
+            pnpm install
           }
 
           stage_built_assets() {

.github/workflows/trigger-qa-build.yml

@@ -4,26 +4,26 @@ on:
   workflow_dispatch:
     inputs:
       workflow:
-        description: 'Desired Workflow'
+        description: "Desired Workflow"
         required: true
-        default: 'Publish Pre-release (Recommended)'
+        default: "Publish Pre-release (Recommended)"
         type: choice
         options:
-        - Publish Pre-release (Recommended)
-        - Force Publish Components
-        - Force Publish Design
-        - Force Publish Components & Design
-        - Force Publish Hooks
-        - Force Publish All
-        - Force Publish Components-native
-        - Force Publish Stylelint-config
+          - Publish Pre-release (Recommended)
+          - Force Publish Components
+          - Force Publish Design
+          - Force Publish Components & Design
+          - Force Publish Hooks
+          - Force Publish All
+          - Force Publish Components-native
+          - Force Publish Stylelint-config
 
 jobs:
   trigger_pre_release_build:
     name: Trigger Pre-release Build
     runs-on: ubuntu-latest
     outputs:
-      lernaSummary: ${{ steps.summaryFile.outputs.releaseSummary}}
+      lernaSummary: ${{ steps.summaryFile.outputs.releaseSummary }}
     steps:
       - uses: actions/checkout@v6
         with:
@@ -33,14 +33,20 @@ jobs:
 
       - uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
-          registry-url: 'https://registry.npmjs.org'
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+          cache-dependency-path: "pnpm-lock.yaml"
+          registry-url: "https://registry.npmjs.org"
           # Defaults to the user or organization that owns the workflow file
-          scope: '@jobber'
-      - name: NPM CI
-        run: npm ci
-      - name: NPM Publish
-        id: npmPublish
+          scope: "@jobber"
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.33.0
+          run_install: false
+      - name: pnpm install
+        run: pnpm install 
+      - name: pnpm publish
+        id: pnpmPublish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.JOBBER_NPM_PUBLISH_TOKEN }}
           ATLANTIS_BRANCH_NAME_RAW: ${{ github.ref_name }}
@@ -50,7 +56,7 @@ jobs:
           # Generates a preId from the branch name. Removes characters that can't be used in a preId
           ATLANTIS_BRANCH_NAME=$(echo "${ATLANTIS_BRANCH_NAME_RAW:0:10}-${COMMIT_SHA:0:7}" | sed 's/[_\/]//g')
           if [ "$PUBLISH_SETTING" == "Publish Pre-release (Recommended)" ]; then
-            npm run publish:prerelease:githubAction -- --y --preid $ATLANTIS_BRANCH_NAME
+            pnpm run publish:prerelease:githubAction -- --y --preid $ATLANTIS_BRANCH_NAME
           else
             if [ "$PUBLISH_SETTING" == "Force Publish Components" ]; then
             FORCE_PUBLISH_SETTINGS="--force-publish @jobber/components"
@@ -67,12 +73,14 @@ jobs:
             else
             FORCE_PUBLISH_SETTINGS="--force-publish"
             fi
-            npm run publish:prerelease:githubAction -- --y --preid $ATLANTIS_BRANCH_NAME $FORCE_PUBLISH_SETTINGS
+            pnpm run publish:prerelease:githubAction -- --y --preid $ATLANTIS_BRANCH_NAME $FORCE_PUBLISH_SETTINGS
           fi
 
       - name: Send Summary File
         id: summaryFile
-        run: echo "releaseSummary=$(cat ./lerna-publish-summary.json)" >> $GITHUB_OUTPUT
+        run:
+          'echo "releaseSummary=$(cat ./lerna-publish-summary.json)" >>
+          $GITHUB_OUTPUT'
   send_build_information:
     permissions: write-all
     runs-on: ubuntu-latest
@@ -86,7 +94,8 @@ jobs:
       - uses: actions/github-script@v8
         name: Comment on PR
         env:
-          SUMMARY_JSON_STRING: ${{ needs.trigger_pre_release_build.outputs.lernaSummary }}
+          SUMMARY_JSON_STRING:
+            "${{ needs.trigger_pre_release_build.outputs.lernaSummary }}"
           COMMIT_SHA: ${{ github.sha }}
         with:
           script: |

.gitignore

@@ -18,3 +18,5 @@ packages/site/public/staticContent/
 # Ignore local Cursor rules
 .cursor/rules/local-*
 .cursor/worktrees.json
+.pnpm-store
+.pnpm-store/*

jest.web.config.js

@@ -29,5 +29,6 @@ module.exports = {
     "/packages/generators/templates/",
     "/packages/components-native/",
   ],
+  modulePathIgnorePatterns: ["<rootDir>/packages/components-native/dist/"],
   transformIgnorePatterns: ["node_modules/(?!@codesandbox/sandpack-react)/"],
 };

lint-staged.config.js

@@ -6,7 +6,11 @@ module.exports = {
     "git add",
     "jest --bail --findRelatedTests --passWithNoTests",
   ],
-  "*.css": ["stylelint --fix --allow-empty-input", "git add"],
+  "*.css": [
+    "stylelint --fix --allow-empty-input",
+    "prettier --write",
+    "git add",
+  ],
   "*.{md,mdx}": ["prettier --write", "git add"],
   "./packages/design/assets/icons/*.svg": [
     "svgo --config ./svgo.config.js",