[WB-1870] Adopt pnpm in Wonder Blocks (#2453)

## Summary:

- Switched to pnpm.
- Udpated most of the devDependencies to the latest version. Except `eslint` as
the latest version is not compatible with our current setup.
- Fixed TS errors in tests.
- Fixed stories, lint, prettier, etc.
- Updated rollup config to use pnpm (for builds).

Issue: WB-1870

## Test plan:

Verify that all the checks pass and that the Storybook site works fine.

Author: jandrade

Reviewers: jandrade, beaesguerra, jeresig

Required Reviewers:

Approved By: beaesguerra, jeresig

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ❌ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2453

.changeset/polite-pianos-serve.md

@@ -0,0 +1,40 @@
+---
+"@khanacademy/wonder-blocks-progress-spinner": minor
+"@khanacademy/wonder-blocks-birthday-picker": minor
+"@khanacademy/wonder-blocks-labeled-field": minor
+"@khanacademy/wonder-blocks-search-field": minor
+"@khanacademy/wonder-blocks-testing-core": minor
+"@khanacademy/wonder-blocks-breadcrumbs": minor
+"@khanacademy/wonder-blocks-icon-button": minor
+"@khanacademy/wonder-blocks-typography": minor
+"@khanacademy/wonder-blocks-accordion": minor
+"@khanacademy/wonder-blocks-clickable": minor
+"@khanacademy/wonder-blocks-dropdown": minor
+"@khanacademy/wonder-blocks-popover": minor
+"@khanacademy/wonder-blocks-testing": minor
+"@khanacademy/wonder-blocks-theming": minor
+"@khanacademy/wonder-blocks-toolbar": minor
+"@khanacademy/wonder-blocks-tooltip": minor
+"@khanacademy/wonder-blocks-banner": minor
+"@khanacademy/wonder-blocks-button": minor
+"@khanacademy/wonder-blocks-layout": minor
+"@khanacademy/wonder-blocks-switch": minor
+"@khanacademy/wonder-blocks-timing": minor
+"@khanacademy/wonder-blocks-tokens": minor
+"@khanacademy/wonder-blocks-modal": minor
+"@khanacademy/wonder-blocks-cell": minor
+"@khanacademy/wonder-blocks-core": minor
+"@khanacademy/wonder-blocks-data": minor
+"@khanacademy/wonder-blocks-form": minor
+"@khanacademy/wonder-blocks-grid": minor
+"@khanacademy/wonder-blocks-icon": minor
+"@khanacademy/wonder-blocks-link": minor
+"@khanacademy/wonder-blocks-pill": minor
+"@khanacademy/wb-dev-build-settings": minor
+"@khanacademy/wb-codemod": minor
+---
+
+Tooling:
+
+- Switching to `pnpm`.
+- Upgrading `rollup` to v4 and `@babel/runtime` to match the current webapp version.

.eslintignore

@@ -21,4 +21,6 @@ CODEOWNERS
 **/*.json
 **/*.jpg
 **/*.png
-**/*.svg
+**/*.svg
+
+types/

.eslintrc.js

@@ -54,9 +54,11 @@ module.exports = {
             },
         },
         {
-            files: ["**/*.test.ts", "**/*.test.tsx"],
+            files: ["**/*.test.*"],
             rules: {
                 "no-undef": "off",
+                "import/no-deprecated": "off",
+                "@typescript-eslint/no-require-imports": "off",
             },
         },
         {
@@ -65,6 +67,14 @@ module.exports = {
                 "testing-library/no-await-sync-events": "off",
             },
         },
+        {
+            files: ["**/*.typestest.*"],
+            rules: {
+                "@typescript-eslint/no-unused-vars": "off",
+                "@typescript-eslint/no-require-imports": "off",
+                "@typescript-eslint/no-unused-expressions": "off",
+            },
+        },
     ],
     globals: {
         // `no-undef` doesn't support `globalThis`, for details see

.github/actions/shared-node-cache/action.yml

@@ -0,0 +1,33 @@
+name: 'Shared Node Cache'
+description: 'Install & cache our npm dependencies'
+
+# The inputs this action expects.
+inputs:
+  node-version:
+    description: 'Node version to use'
+    required: false
+    default: '20.x'
+  cache-bust:
+    description: 'A unique string to bust the cache'
+    required: true
+
+# The steps this action runs.
+runs:
+  using: "composite"
+  steps:
+
+    - uses: pnpm/action-setup@v4
+      name: Install pnpm
+      with:
+        run_install: false
+
+    - name: Use Node.js ${{ inputs.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: 'pnpm'
+        cache-dependency-path: 'pnpm-lock.yaml'
+
+    - name: Install Dependencies
+      shell: bash
+      run: pnpm install --frozen-lockfile

.github/workflows/chromatic-build.yml

@@ -75,15 +75,15 @@ jobs:
 
     # Cache and install dependencies
     - name: Install & cache node_modules
-      uses: Khan/actions@shared-node-cache-v2
+      uses: ./.github/actions/shared-node-cache
       with:
         node-version: ${{ matrix.node-version }}
 
     # Build the project
     - name: Build
-      run: yarn build
+      run: pnpm build
     - name: Build Storybook
-      run: yarn build:storybook
+      run: pnpm build:storybook
 
     # (if) Run this step on non-dependabot PRs.
     - name: Publish to Chromatic for visual testing (review PRs only)
@@ -101,10 +101,10 @@ jobs:
     # Install Playwright browsers so Vitest browser mode can run story tests
     - name: Install playwright dependencies
       if: ${{ inputs.target == 'review' }}
-      run: yarn exec playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
     - name: Run Storybook tests
       if: ${{ inputs.target == 'review' }}
-      run: yarn test:storybook
+      run: pnpm test:storybook
       env:
         SB_URL: '${{ steps.chromatic_publish.outputs.storybookUrl }}'
 

.github/workflows/deploy.yml

@@ -19,17 +19,17 @@ jobs:
           fetch-depth: 0
 
       - name: Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
+        uses: ./.github/actions/shared-node-cache
         with:
           node-version: 20.x
 
       - name: Build all packages
         # Build all WB packages that Storybook depends on.
-        run: yarn build
+        run: pnpm build
 
       - name: Build Storybook
         # Generate a static version of storybook inside "storybook-static/"
-        run: yarn build:storybook
+        run: pnpm build:storybook
 
       - name: Upload Storybook artifact
         uses: actions/upload-pages-artifact@v3

.github/workflows/node-ci-lint.yml

@@ -23,7 +23,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
 
       - name: Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
+        uses: ./.github/actions/shared-node-cache
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -43,34 +43,34 @@ jobs:
         name: Files that would trigger a full eslint run
         with:
           changed-files: ${{ steps.changed.outputs.files }}
-          files: '.eslintrc.js,yarn.lock,.eslintignore'
+          files: '.eslintrc.js,pnpm-lock.yaml,.eslintignore'
 
       - id: typecheck-reset
         uses: Khan/actions@filter-files-v1
         name: Files that would trigger a typecheck run
         with:
           changed-files: ${{ steps.changed.outputs.files }}
-          files: '.yarn.lock'
+          files: '.pnpm-lock.yaml'
 
       # Linting / type checking
       - name: Eslint
         uses: Khan/actions@full-or-limited-v0
         with:
           full-trigger: ${{ steps.eslint-reset.outputs.filtered }}
-          full: yarn lint:ci .
+          full: pnpm lint:ci .
           limited-trigger: ${{ steps.js-ts-files.outputs.filtered }}
-          limited: yarn lint:ci {}
+          limited: pnpm lint:ci {}
 
       - name: Typecheck
         if: always() # always run this check until we update the eslint config
         # if: steps.js-ts-files.outputs.filtered != '[]' || steps.typecheck-reset.outputs.filtered != '[]'
-        run: yarn typecheck
+        run: pnpm typecheck
 
       - name: Build .js bundles
-        run: yarn build
+        run: pnpm build
 
       - name: Build .d.ts types
-        run: yarn build:types
+        run: pnpm build:types
 
       - name: Check package.json files
         run: ./utils/publish/pre-publish-check-ci.ts

.github/workflows/node-ci-pr.yml

@@ -31,7 +31,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
+        uses: ./.github/actions/shared-node-cache
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -49,29 +49,12 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Setup node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Get changed files
-        uses: Khan/actions@get-changed-files-v2
-        id: changed
-
-      - name: Filter out files that don't need a changeset
-        uses: Khan/actions@filter-files-v1
-        id: match
-        with:
-            changed-files: ${{ steps.changed.outputs.files }}
-            files: packages/ # Only look for changes in packages
-            globs: "!(**/__tests__/**), !(**/dist/*), !(**/*.test.{ts,tsx})" # Ignore test files
-            matchAllGlobs: true # All globs must match (disjunction is the default)
-            conjunctive: true # Only return files that match all of the above
-
-      - name: Verify changeset entries
-        uses: Khan/changeset-per-package@v1.0.2-pre
+      - uses: Khan/actions@check-for-changeset-v1
+        if: github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]'
         with:
-            changed_files: ${{ steps.match.outputs.filtered }}
+          exclude: .github/,.storybook/
+          exclude_extensions: .test.ts, .test.tsx, .stories.ts, .stories.tsx, .mdx
+          exclude_globs: "**/__tests__/*, **/__docs__/*"
 
   lint:
     name: Lint
@@ -101,7 +84,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
 
       - name: Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
+        uses: ./.github/actions/shared-node-cache
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -169,7 +152,7 @@ jobs:
             fi
 
       - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
+        uses: ./.github/actions/shared-node-cache
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -215,7 +198,7 @@ jobs:
 
             Packages can also be installed manually by running:
             ```sh
-            yarn add @khanacademy/wonder-blocks-<package-name>@${{
+            pnpm add @khanacademy/wonder-blocks-<package-name>@${{
             steps.publish-snapshot.outputs.npm_snapshot_tag }}
             ```
       - name: Create or update npm snapshot comment - Failure

.github/workflows/node-ci-push.yml

@@ -32,7 +32,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
+        uses: ./.github/actions/shared-node-cache
         with:
           node-version: ${{ matrix.node-version }}
 

.github/workflows/node-ci-test.yml

@@ -24,12 +24,12 @@ jobs:
           node-version: ${{ matrix.node-version }}
 
       - name: Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
+        uses: ./.github/actions/shared-node-cache
         with:
           node-version: ${{ matrix.node-version }}
       # Testing and coverage
       - name: Run jest tests with coverage
-        run: yarn coverage:ci --shard ${{ matrix.shard }}
+        run: pnpm coverage:ci --shard ${{ matrix.shard }}
       - name: Upload Coverage
         uses: codecov/codecov-action@v4
         with:

.github/workflows/release.yml

@@ -37,15 +37,15 @@ jobs:
           fetch-depth: 0
 
       - name: Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
+        uses: ./.github/actions/shared-node-cache
         with:
           node-version: 20.x
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1
         with:
-          publish: yarn publish:ci
+          publish: pnpm publish:ci
         env:
           GITHUB_TOKEN: ${{ secrets.KHAN_ACTIONS_BOT_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -7,4 +7,6 @@ storybook-static
 utils/**/*.d.ts
 !.vscode
 .DS_Store
-yarn-error.log
+changeset-status.json
+# Pnpm errors
+pnpm-debug.log

.storybook/.babelrc.js

@@ -16,13 +16,13 @@ module.exports = {
     ...config,
     plugins: [
         ...config.plugins,
-        // NOTE(kevinb): `plugin-proposal-class-properties` must come before
+        // NOTE(kevinb): `plugin-transform-class-properties` must come before
         // `plugin-transform-classes`.
-        ["@babel/plugin-proposal-class-properties", {loose: true}],
+        ["@babel/plugin-transform-class-properties", {loose: true}],
         ["@babel/plugin-transform-classes", {loose: true}],
         // NOTE(kevinb): these are here just to quiet warnings about these
         // plugins not using `loose: true`.
-        ["@babel/plugin-proposal-private-property-in-object", {loose: true}],
-        ["@babel/plugin-proposal-private-methods", {loose: true}],
+        ["@babel/plugin-transform-private-property-in-object", {loose: true}],
+        ["@babel/plugin-transform-private-methods", {loose: true}],
     ],
 };

.storybook/main.ts

@@ -9,7 +9,6 @@ const config: StorybookConfig = {
     addons: [
         "@storybook/addon-essentials",
         "@storybook/addon-a11y",
-        "@storybook/addon-designs",
         "storybook-addon-pseudo-states",
         "@storybook/experimental-addon-test",
         {
@@ -25,9 +24,21 @@ const config: StorybookConfig = {
     ],
     staticDirs: ["../static"],
     core: {
+        builder: "@storybook/builder-vite",
         disableTelemetry: true,
     },
     framework: "@storybook/react-vite",
+    async viteFinal(config, options) {
+        // Merge custom configuration into the default config
+        const {mergeConfig} = await import("vite");
+
+        return mergeConfig(config, {
+            // Prevent Vite from inlining phosphor-icons
+            build: {
+                assetsInlineLimit: 0,
+            },
+        });
+    },
 };
 
 export default config;

.vscode/settings.json

@@ -14,5 +14,5 @@
         "*.flow": "plaintext",
     },
     "flow.enabled": false,
-    "jest.jestCommandLine": "yarn jest"
+    "jest.jestCommandLine": "pnpm jest"
 }