Switch to pnpm (https://github.com/woocommerce/woocommerce-admin/pull/8349)

* Add pnpm-workspace.yaml

* Add missing dependencies & replace file: with workspace:* in
package.json

* Replace "npm" with "pnpm"

* Replace "npx" with "pnpx"

* Remove package-lock.json

* Add pnpm setup action to github workflows

* Update webpack babel exclude path

* Upgrade woo e2e and fix e2e test command

Update e2e.yml

Use pnpm run e2e:docker-up in e2e.yml

* Remove unused docker-compose.yaml

* Replace lerna with pnpm commands

Update publish commands

* Exclude _locutus_shared_bc.js in babel.config.js

* Add .npmrc to set enable-pre-post-scripts=true by default

* Fix storybook babel config

Update babel.config.js

* Add changelog

* Update pnpm-lock.yaml

* Replace pnpx with pnpm exec

* Update pnpm-lock.yaml

* Remove js-tests/package-lock.json

* Fix @woocommerce/tracks -> workspace:*

* Update pnpm-lock.yaml

* Add @woocommerce/experimental to onboarding/package.json

* Add "@woocommerce/component" to onboarding/package.json

* Update pnpm-lock.yaml

* Use || instead of && for "test:watch"

Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>

* Fix packages/number "clean" command

* Add root: true to .eslintrc.js to enforce it to use the root config file

* Exclude packages/**/node_modules from babel transpiling

* Fix js-tests build config

Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>

plugins/woocommerce-admin/.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
 			pragma: 'createElement',
 		},
 	},
+	root: true,
 	rules: {
 		// temporary conversion to warnings until the below are all handled.
 		'@wordpress/i18n-translator-comments': 'warn',

plugins/woocommerce-admin/.gitattributes

@@ -17,7 +17,6 @@
 /package-lock.json export-ignore
 /babel.config.js export-ignore
 /Gruntfile.js export-ignore
-/lerna.json export-ignore
 /packages* export-ignore
 /docs* export-ignore
 /config* export-ignore

plugins/woocommerce-admin/.github/PULL_REQUEST_TEMPLATE.md

@@ -24,4 +24,4 @@ Please add your test instructions to `/TESTING-INSTRUCTIONS.md`.
 
 <!--- Please add a Changelog note
 
-Enter a changelog note using the following CLI command `npm run changelogger -- add` and commit changes. --->
+Enter a changelog note using the following CLI command `pnpm run changelogger -- add` and commit changes. --->

plugins/woocommerce-admin/.github/actions/pr-labeler/README.md

@@ -11,7 +11,7 @@ via [@vercel/ncc](https://github.com/vercel/ncc).
 Run these commands from the root of the action before pushing an update to `dist/index.js`:
 
 ```
-npm i -g @vercel/ncc
+pnpm i -g @vercel/ncc
 ncc build index.js
 ```
 

plugins/woocommerce-admin/.github/autolabeler.yml

@@ -1,3 +1,3 @@
-Packages: [ "/packages/*", "lerna.json" ]
+Packages: [ "/packages/*" ]
 Components: /packages/components
-Build: [ "/.*", "*.config.js", "bin/*", "composer.json", "Gruntfile.js",  "lerna.json", "package.json" ]
+Build: [ "/.*", "*.config.js", "bin/*", "composer.json", "Gruntfile.js", "package.json" ]

plugins/woocommerce-admin/.github/workflows/daily-e2e.yml

@@ -23,18 +23,22 @@ jobs:
             - name: Setup Node.js
               uses: actions/setup-node@v2-beta
               with:
-                  node-version: '14'
+                  node-version: '14'      
+            - name: Install PNPM and install dependencies
+              uses: pnpm/action-setup@v2.2.1
+              with:
+                version: ^6.24.2
+                run_install: true
             - name: Build
               run: |
-                  npm i
                   composer require wp-cli/i18n-command
-                  npm run build:feature-config
-                  npm run build
+                  pnpm run build:feature-config
+                  pnpm run build
             - name: Setup wp-env
               env:
                   WP_ENV_CONFIG: '{ core: "${{ matrix.wordpress }}", plugins: [ ".", "${{ matrix.woocommerce }}" ] }'
               run: |
-                  npm -g i @wordpress/env
+                  pnpm -g i @wordpress/env
                   printf '%s\n' "$WP_ENV_CONFIG" > .wp-env-override.json
                   WP_ENV_TESTS_PORT=8084 wp-env start
                   wp-env run tests-cli "wp post create --post_type=page --post_status=publish --post_title='Ready' --post_content='E2E-tests.'"
@@ -42,7 +46,7 @@ jobs:
               env:
                   WC_E2E_SCREENSHOTS: 1
               run: |
-                  npx wc-e2e test:e2e
+                  pnpm exec wc-e2e test:e2e
             - name: Archive e2e test screenshots
               if: ${{ always() }}
               uses: actions/upload-artifact@v2

plugins/woocommerce-admin/.github/workflows/daily-php.yml

@@ -22,14 +22,19 @@ jobs:
               uses: actions/setup-node@v2-beta
               with:
                   node-version: '14'
+            - name: Install PNPM and install dependencies
+              uses: pnpm/action-setup@v2.2.1
+              with:
+                version: ^6.24.2
+                run_install: true
             - name: Build
               run: |
-                  npm run build:feature-config	
+                  pnpm run build:feature-config	
                   composer install  --no-dev
               shell: bash
             - name: Run the PHP unit tests
               env:
                   WP_VERSION: ${{ matrix.wordpress }}
                   WC_VERSION: ${{ matrix.woocommerce }}
-              run: npm run test:php
+              run: pnpm run test:php
               shell: bash

plugins/woocommerce-admin/.github/workflows/e2e.yml

@@ -23,6 +23,11 @@ jobs:
               uses: actions/setup-node@v2-beta
               with:
                   node-version: '14'
+            - name: Install PNPM and install dependencies
+              uses: pnpm/action-setup@v2.2.1
+              with:
+                version: ^6.24.2
+                run_install: true
             - name: Build and run E2E Tests
               env:
                   WC_E2E_SCREENSHOTS: 1
@@ -30,12 +35,11 @@ jobs:
                   E2E_SLACK_TOKEN: ${{ secrets.E2E_SLACK_TOKEN }}
                   WP_VERSION: '5.8.0'
               run: |
-                  npm i
                   composer require wp-cli/i18n-command
-                  npm run build
-                  npx wc-e2e docker:up
+                  pnpm run build
+                  pnpm run e2e:docker-up
                   sleep 10
-                  npx wc-e2e test:e2e
+                  pnpm exec wc-e2e test:e2e
             - name: Archive e2e test screenshots
               if: ${{ always() }}
               uses: actions/upload-artifact@v2

plugins/woocommerce-admin/.github/workflows/gh-pages.yml

@@ -14,11 +14,16 @@ jobs:
               with:
                   node-version: '14'
 
+            - name: Install PNPM and install dependencies
+              uses: pnpm/action-setup@v2.2.1
+              with:
+                version: ^6.24.2
+                run_install: true
+
             - name: Build
               run: |
-                  npm i
-                  npm run build
-                  npm run docs
+                  pnpm run build
+                  pnpm run docs
 
             - name: Deploy docs
               uses: peaceiris/actions-gh-pages@v3

plugins/woocommerce-admin/.github/workflows/lint-test-js.yml

@@ -15,6 +15,11 @@ jobs:
               uses: actions/setup-node@v2.1.5
               with:
                   node-version: '14'
+            - name: Install PNPM and install dependencies
+              uses: pnpm/action-setup@v2.2.1
+              with:
+                version: ^6.24.2
+                run_install: true
             - name: Lint and test the JS
               run: bin/js_lint_test.sh
               shell: bash

plugins/woocommerce-admin/.github/workflows/test-php.yml

@@ -49,6 +49,11 @@ jobs:
               uses: actions/setup-node@v2-beta
               with:
                   node-version: '14'
+            - name: Install PNPM and install dependencies
+              uses: pnpm/action-setup@v2.2.1
+              with:
+                version: ^6.24.2
+                run_install: true
             - name: Set up the tests
               env:
                   WP_VERSION: ${{matrix.wordpress}}
@@ -59,10 +64,10 @@ jobs:
                   sudo /etc/init.d/mysql start
                   bash bin/ci/gh-install-wp-tests.sh wc_admin_test root 'root' localhost
                   cd "$WP_CORE_DIR/wp-content/plugins/woocommerce-admin/"
-                  npm run build:feature-config	
+                  pnpm run build:feature-config	
                   composer install
                   node --version
-                  npm --version
+                  pnpm --version
                   timedatectl
             - name: Add PHP8 Compatibility.
               run: |

plugins/woocommerce-admin/.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

plugins/woocommerce-admin/CONTRIBUTING.md

@@ -21,8 +21,8 @@ Language packs are automatically generated once 95% of the plugin's strings are
 ### Testing translations in development without language packs
 
 1. Requires `WP-CLI` version 2.1.0 or greater.
-1. Generate a translation file with `npm run i18n xx_YY` (Where xx_YY is your locale, like it_IT).
-1. Generate needed JSON files for JavaScript-based strings: `npm run i18n:json`.
+1. Generate a translation file with `pnpm run i18n xx_YY` (Where xx_YY is your locale, like it_IT).
+1. Generate needed JSON files for JavaScript-based strings: `pnpm run i18n:json`.
 1. Generate needed `woocommerce-admin-xx_YY.mo` file using your translation tool.
 1. Move `.mo` and `.json` files to `/wp-content/languages/plugins`.
 
@@ -37,7 +37,7 @@ If you're a first-time code contributor to the repository, here's a quick guide
 1. Fork the repo to your own account.
 2. Clone your fork into the `wp-content/plugins` directory of your preferred WordPress development environment.
 3. Don't forget to create a branch to keep your changes. (`git checkout -b add/my-cool-thing`).
-4. From the `woocommerce-admin` plugin directory, build with `npm install` and `npm start`.
+4. From the `woocommerce-admin` plugin directory, build with `pnpm install` and `pnpm start`.
 5. Visit your dev environment in the browser to enable the `WooCommerce Admin` plugin and try it out.
 
 Tips:
@@ -47,7 +47,7 @@ Tips:
 
 After you've made your updates, you're ready to commit:
 
-1. Run a complete build via `npm run build`.
+1. Run a complete build via `pnpm run build`.
 2. Do a `composer install` to ensure PHP dependencies can run on the pre-commit hook.
 3. Create your commit. Write a descriptive, but short first line (e.g. "Reports: Reticulate the splines"), and add more details below. If your commit addresses a github issue, reference it by number here (e.g. "This commit fixes issue #123 by reticulating all the splines.")
 4. Push the branch up to your local fork, then create a PR via the GitHub web interface.
@@ -60,7 +60,7 @@ The pull request template will remind you of some of the details you need to fil
 
 For many pull requests a changelog entry is required. We make use of the [Jetpack Changelogger tool](https://packagist.org/packages/automattic/jetpack-changelogger) to handle our changelogs.
 
-To create a changelog entry run `npm run changelogger -- add` and answer the questions. This will create a changelog entry in the [./changelogs](./changelogs) directory with the data you provided. Upon our next release this will be added to our [changelog.txt](./changelog.txt).
+To create a changelog entry run `pnpm run changelogger -- add` and answer the questions. This will create a changelog entry in the [./changelogs](./changelogs) directory with the data you provided. Upon our next release this will be added to our [changelog.txt](./changelog.txt).
 
 In most cases you'll have to provide a changelog entry (the last question), be sure to add your PR number at the end, in the format below:
 
@@ -137,10 +137,10 @@ For example, to just run Order Report Stats tests:
 
 There are a number of helper scripts exposed via our `package.json` (below list is not exhaustive, you can view the [`package.json` file directly to see all](https://github.com/woocommerce/woocommerce-admin/blob/main/package.json)):
 
- - `npm run lint` : Run eslint over the javascript files
- - `npm run i18n` : A multi-step process, used to create a pot file from both the JS and PHP gettext calls. First it runs `i18n:js`, which creates a temporary `.pot` file from the JS files. Next it runs `i18n:php`, which converts that `.pot` file to a PHP file. Lastly, it runs `i18n:pot`, which creates the final `.pot` file from all the PHP files in the plugin (including the generated one with the JS strings).
- - `npm test` : Run the JS test suite
- - `npm run docs`: Runs the script for generating/updating docs.
+ - `pnpm run lint` : Run eslint over the javascript files
+ - `pnpm run i18n` : A multi-step process, used to create a pot file from both the JS and PHP gettext calls. First it runs `i18n:js`, which creates a temporary `.pot` file from the JS files. Next it runs `i18n:php`, which converts that `.pot` file to a PHP file. Lastly, it runs `i18n:pot`, which creates the final `.pot` file from all the PHP files in the plugin (including the generated one with the JS strings).
+ - `pnpm test` : Run the JS test suite
+ - `pnpm run docs`: Runs the script for generating/updating docs.
 
 ## Debugging
 
@@ -166,7 +166,7 @@ localStorage.setItem( 'debug', 'wc-admin:*' );
 
 WooCommerce Admin is licensed under [GNU General Public License v3 (or later)](/license.txt).
 
-All materials contributed should be compatible with the GPLv3. This means that if you own the material, you agree to license it under the GPLv3 license. If you are contributing code that is not your own, such as adding a component from another Open Source project, or adding an `npm` package, you need to make sure you follow these steps:
+All materials contributed should be compatible with the GPLv3. This means that if you own the material, you agree to license it under the GPLv3 license. If you are contributing code that is not your own, such as adding a component from another Open Source project, or adding an `pnpm` package, you need to make sure you follow these steps:
 
 1. Check that the code has a license. If you can't find one, you can try to contact the original author and get permission to use, or ask them to release under a compatible Open Source license.
 2. Check the license is compatible with [GPLv3](https://www.gnu.org/licenses/license-list.en.html#GPLCompatibleLicenses), note that the Apache 2.0 license is *not* compatible.

plugins/woocommerce-admin/README.md

@@ -12,16 +12,16 @@ For better debugging, it's also recommended you add `define( 'SCRIPT_DEBUG', tru
 
 After cloning the repo, install dependencies:
 
--   `npm install` to install JavaScript dependencies.
+-   `pnpm install` to install JavaScript dependencies.
 -   `composer install` to gather PHP dependencies.
 
 Now you can build the files using one of these commands:
 
--   `npm run build` : Build a production version
--   `npm run dev` : Build a development version
--   `npm start` : Build a development version, watch files for changes
--   `npm run build:release` : Build a WordPress plugin ZIP file (`woocommerce-admin.zip` will be created in the repository root)
--   `DRY_RUN=1 npm run build:release` : Builds a Wordpress plugin ZIP **without** pushing it to Github and creating a release.
+-   `pnpm run build` : Build a production version
+-   `pnpm run dev` : Build a development version
+-   `pnpm start` : Build a development version, watch files for changes
+-   `pnpm run build:release` : Build a WordPress plugin ZIP file (`woocommerce-admin.zip` will be created in the repository root)
+-   `DRY_RUN=1 pnpm run build:release` : Builds a Wordpress plugin ZIP **without** pushing it to Github and creating a release.
 
 For more helper scripts [see here](./CONTRIBUTING.md#helper-scripts)
 
@@ -44,30 +44,30 @@ across the entire repository even when they haven't been opened in the IDE.
 
 Tests live in `./tests/e2e`. An existing build is required prior running, please refer to the section above for steps. E2E tests use the `@woocommerce/e2e-environment` package which hosts a Docker container for testing, by default the container can be accessed at `http://localhost:8084`
 
-All the commands from `@woocommerce/e2e-environment` can be run through `npx`.
+All the commands from `@woocommerce/e2e-environment` can be run through `pnpm exec`.
 
 ```
 # Set up the e2e environment
-npm i
-npx wc-e2e docker:up
+pnpm i
+pnpm exec wc-e2e docker:up
 ```
 
 Run tests using:
 
 ```
-npx wc-e2e test:e2e-dev
+pnpm exec wc-e2e test:e2e-dev
 ```
 
 or in headless mode:
 
 ```
-npx wc-e2e test:e2e
+pnpm exec wc-e2e test:e2e
 ```
 
 Run a single test by adding the path to the file name:
 
 ```
-npx wc-e2e test:e2e-dev tests/e2e/specs/activate-and-setup/complete-onboarding-wizard.test.ts
+pnpm exec wc-e2e test:e2e-dev tests/e2e/specs/activate-and-setup/complete-onboarding-wizard.test.ts
 ```
 
 ### Documentation
@@ -77,18 +77,18 @@ There is documentation in 2 forms available in the repo. A static set of documen
 To view the docsify docs locally you can do:
 
 ```
-npm install
+pnpm install
 cd docs
-npx docsify serve
+pnpm exec docsify serve
 ```
 
 When deployed the docsify docs also host an embedded version of the storybook docs. To generate that and test it locally in docsify you'll need to run:
 
 ```
-npm install
-npm run docs
+pnpm install
+pnpm run docs
 cd docs
-npx docsify serve
+pnpm exec docsify serve
 ```
 
 Then navigate to `Components` from the left hand menu in the docs.
@@ -96,15 +96,15 @@ Then navigate to `Components` from the left hand menu in the docs.
 If you would like to view the storybook docs hosted standalone, then you can run:
 
 ```
-npm install
-npm run storybook
+pnpm install
+pnpm run storybook
 ```
 
 If you would like to view the storybook docs in right-to-left styling, you can run this instead:
 
 ```
-npm install
-npm run storybook-rtl
+pnpm install
+pnpm run storybook-rtl
 ```
 
 ## Common Issues

plugins/woocommerce-admin/babel.config.js

@@ -20,6 +20,7 @@ module.exports = function ( api ) {
 			 */
 			'@babel/plugin-proposal-class-properties',
 		],
+		ignore: [ 'packages/**/node_modules' ],
 		env: {
 			production: {
 				plugins: [
@@ -31,6 +32,28 @@ module.exports = function ( api ) {
 					],
 				],
 			},
+
+			storybook: {
+				plugins: [
+					/**
+					 * We need to set loose mode here because the storybook's default babel config enables the loose mode.
+					 * The 'loose' mode configuration must be the same for those babel plugins.
+					 *
+					 */
+					[
+						'@babel/plugin-proposal-class-properties',
+						{ loose: true },
+					],
+					[
+						'@babel/plugin-proposal-private-methods',
+						{ loose: true },
+					],
+					[
+						'@babel/plugin-proposal-private-property-in-object',
+						{ loose: true },
+					],
+				],
+			},
 		},
 	};
 };

plugins/woocommerce-admin/bin/build-plugin-zip.sh

@@ -107,7 +107,7 @@ composer install --no-dev
 
 # Build the plugin files.
 status "Generating the plugin build... 👷‍♀️"
- WC_ADMIN_PHASE=plugin npm run build
+ WC_ADMIN_PHASE=plugin pnpm run build
 
 # Make a Github release.
 status "Starting a Github release... 👷‍♀️"
@@ -130,7 +130,7 @@ if [ $IS_CUSTOM_BUILD = false ]; then
 
 	# Build the Core files.
 	status "Generating a Core build... 👷‍♀️"
-	WC_ADMIN_PHASE=core npm run build
+	WC_ADMIN_PHASE=core pnpm run build
 
 	# Make a Github release.
 	status "Starting a Github release... 👷‍♀️"

plugins/woocommerce-admin/bin/build-test-zip.sh

@@ -2,9 +2,9 @@
 #
 # Build a test zip from current branch for uploading to test site
 #
-phase=${WC_ADMIN_PHASE:-plugin} 
+phase=${WC_ADMIN_PHASE:-plugin}
 
-WC_ADMIN_PHASE=$phase npm run build
+WC_ADMIN_PHASE=$phase pnpm run build
 composer install --no-dev
 rm woocommerce-admin.zip
 ./bin/make-zip.sh woocommerce-admin.zip

plugins/woocommerce-admin/bin/generate-feature-config.php

@@ -15,7 +15,7 @@
 $phase = getenv( 'WC_ADMIN_PHASE' );
 
 if ( ! in_array( $phase, array( 'development', 'plugin', 'core' ), true ) ) {
-	$phase = 'plugin'; // Default to plugin when running `npm run build`.
+	$phase = 'plugin'; // Default to plugin when running `pnpm run build`.
 }
 $config_json = file_get_contents( 'config/' . $phase . '.json' );
 $config      = json_decode( $config_json );

plugins/woocommerce-admin/bin/github-deploy.sh

@@ -69,7 +69,7 @@ echo " • Ensure you have checked out the branch you wish to release"
 echo " • Ensure you have committed/pushed all local changes"
 echo " • Did you remember to update changelogs, the readme and plugin files?"
 echo " • Are there any changes needed to the readme file?"
-echo " • If you are running this script directly instead of via '$ npm run build:release', ensure you have built assets and installed composer in --no-dev mode."
+echo " • If you are running this script directly instead of via '$ pnpm run build:release', ensure you have built assets and installed composer in --no-dev mode."
 echo
 output 3 "Do you want to continue? [y/N]: "
 read -r PROCEED
@@ -109,17 +109,17 @@ git checkout -b $BRANCH
 git add includes/feature-config.php --force $DRY_RUN_ARG
 git add . $DRY_RUN_ARG
 git commit -m "Adding feature-config.php directory to release" --no-verify $DRY_RUN_ARG
-  
+
 # Force add language files
 git add languages/woocommerce-admin.pot --force $DRY_RUN_ARG
 git add . $DRY_RUN_ARG
 git commit -m "Adding translations to release" --no-verify $DRY_RUN_ARG
-  
+
 # Force add build directory and commit.
 git add dist/. --force $DRY_RUN_ARG
 git add . $DRY_RUN_ARG
 git commit -m "Adding /dist directory to release" --no-verify $DRY_RUN_ARG
-  
+
 # Force add vendor directory and commit.
 git add vendor/. --force $DRY_RUN_ARG
 git add . $DRY_RUN_ARG

plugins/woocommerce-admin/bin/hook-reference/README.md

@@ -7,7 +7,7 @@ Compile a publishable JSON object of WooCommerce's JavaScript filters and slotFi
 Generate a new reference found at `bin/hook-reference/data.json` by running the following command.
 
 ```
-npm run create-hook-reference
+pnpm run create-hook-reference
 ```
 
 The data includes references to code in the Github repository by commit hash, so it is essential to commit the resulting data in a pull request to `main` so code references are publicly available.

plugins/woocommerce-admin/bin/install-if-deps-outdated.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 /**
- * Performs an `npm install`. Since that's a costly operation,
+ * Performs an `pnpm install`. Since that's a costly operation,
  * it will only perform it if needed, that is, if the packages
  * installed at `node_modules` aren't in sync over what
  * `package-lock.json` has. For that, modification times of both
@@ -15,7 +15,7 @@ const spawnSync = require( 'child_process' ).spawnSync;
 
 const needsInstall = () => {
 	try {
-		const shrinkwrapTime = fs.statSync( 'package-lock.json' ).mtime;
+		const shrinkwrapTime = fs.statSync( 'pnpm-lock.yaml' ).mtime;
 		const nodeModulesTime = fs.statSync( 'node_modules' ).mtime;
 		return shrinkwrapTime - nodeModulesTime > 1000; // In Windows, directory mtime has less precision than file mtime
 	} catch ( e ) {
@@ -24,14 +24,14 @@ const needsInstall = () => {
 };
 
 if ( needsInstall() ) {
-	const installResult = spawnSync( 'npm', [ 'install' ], {
+	const installResult = spawnSync( 'pnpm', [ 'install' ], {
 		shell: true,
 		stdio: 'inherit',
 	} ).status;
-	
+
 	if ( installResult ) {
 		process.exit( installResult );
 	}
-	
+
 	fs.utimesSync( 'node_modules', new Date(), new Date() );
 }

plugins/woocommerce-admin/bin/install-if-no-packages.js

@@ -3,7 +3,7 @@ const fs = require( 'fs' );
 
 if ( ! fs.existsSync( 'node_modules' ) ) {
 	console.log( 'No "node_modules" present, installing dependencies...' );
-	const installResult = spawnSync( 'npm', [ 'install' ], {
+	const installResult = spawnSync( 'pnpm', [ 'install' ], {
 		shell: true,
 		stdio: 'inherit',
 	} ).status;

plugins/woocommerce-admin/bin/js_lint_test.sh

@@ -2,8 +2,8 @@
 
 set -o errexit
 
-npm run -s install-if-deps-outdated
-npm run lint
-npm run build
-npm test
+pnpm run -s install-if-deps-outdated
+pnpm run lint
+pnpm run build
+pnpm test
 

plugins/woocommerce-admin/bin/pre-release.sh

@@ -72,13 +72,13 @@ success "Release branch created: ${branch}"
 
 status "Bumping version to ${release}"
 
-npm --no-git-tag-version version $release || { error "ERROR: Invalid version number." ; exit 1; }
+pnpm --no-git-tag-version version $release || { error "ERROR: Invalid version number." ; exit 1; }
 
 success "Version bumped successfully"
 
 status "Run scripts to propagate version numbers and update dependencies."
 
-npm run bump-version
+pnpm run bump-version
 
 status "Here are the changes so far. Make sure the following changes are reflected."
 

plugins/woocommerce-admin/bin/starter-pack/README.md

@@ -13,12 +13,12 @@ Scaffold a modern JavaScript WordPress plugin with WooCommerce tooling.
 At the root of a [WooCommerce Admin](https://github.com/woocommerce/woocommerce-admin) installation, run the create extension command.
 
 ```
-npm run create-wc-extension
+pnpm run create-wc-extension
 ```
 
 The script will create a sibling directory by a name of your choosing. Once you change directories into the new folder, install dependencies and start a development build.
 
 ```
-npm install
-npm start
+pnpm install
+pnpm start
 ```

plugins/woocommerce-admin/bin/starter-pack/_README.md

@@ -7,8 +7,8 @@ A WooCommerce Admin Extension
 To get started, run the following commands:
 
 ```text
-npm install
-npm start
+pnpm install
+pnpm start
 ```
 
 See [wp-scripts](https://github.com/WordPress/gutenberg/tree/master/packages/scripts) for more usage information.

plugins/woocommerce-admin/bin/starter-pack/starter-pack.js

@@ -83,7 +83,7 @@ const maybeThrowError = ( error ) => {
 		)
 	);
 	process.stdout.write( '\n' );
-	console.log( 'npm install' );
-	console.log( 'npm start' );
+	console.log( 'pnpm install' );
+	console.log( 'pnpm start' );
 	process.stdout.write( '\n' );
 } )();

plugins/woocommerce-admin/bin/test-instruction-logger/README.md

@@ -7,12 +7,12 @@ Test Instruction Logger retrieves test instructions from the PRs in the `changel
 Test Instruction Logger requires Github username and a personal access token to use the Github REST API.
 
 1. Follow this [guide](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token) to create a new personal access token.
-2. Run `npm run test-instruction-logger github-credentials`. Enter your Github username and the perosnal access token. The data will be saved in `$HOME/.wca-test-instruction-logger.json`
+2. Run `pnpm run test-instruction-logger github-credentials`. Enter your Github username and the perosnal access token. The data will be saved in `$HOME/.wca-test-instruction-logger.json`
 
 ## Writing to TESTING-INSTRUCTION.md
 
 1. Update the `changelog.txt` 
-2. Run `npm run test-instruction-logger -- write :version`.
+2. Run `pnpm run test-instruction-logger -- write :version`.
 3. Verify `TESTING-INSTRUCTION.md`.
 
 ### Options
@@ -21,10 +21,10 @@ Test Instruction Logger requires Github username and a personal access token to
 
 A comma seperated list of changelog types to retrieve the testing instructions from.
 
-`npm run test-instruction-logger -- write :version --types=enhancement,add`
+`pnpm run test-instruction-logger -- write :version --types=enhancement,add`
 
 #### save-to
 
 Allows you to save the testing instructions to a different file. Default: TESTING-INSTRUCTIONS.md
 
-`npm run test-instruction-logger -- write :version --save-to=instructions.md`
+`pnpm run test-instruction-logger -- write :version --save-to=instructions.md`

plugins/woocommerce-admin/bin/travis.sh

@@ -3,10 +3,10 @@
 
 if [ "$1" == 'before' ]; then
 	cd "$WP_CORE_DIR/wp-content/plugins/woocommerce-admin/"
-	npm run build:feature-config
+	pnpm run build:feature-config
 
 	# This is a temporary solution for a breaking change in composer 2.0.7
-	# to the Jetpack autoloader. This can be removed when 
+	# to the Jetpack autoloader. This can be removed when
 	# https://github.com/Automattic/jetpack/pull/17813 is merged.
 	composer self-update 2.0.6
 	if [[ "$COMPOSER_DEV" == "1" ]]; then

plugins/woocommerce-admin/changelogs/dev-pnpm

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Dev
+
+Add missing dependencies. #8349

plugins/woocommerce-admin/docker-compose.yaml

@@ -1,14 +0,0 @@
-version: '3.3'
-
-services:
-
-  wordpress-www:
-    volumes:
-      # This path is relative to the first config file
-      # which is in tests/e2e/env or node_modules/@woocommerce/e2e-environment
-      - "../../../:/var/www/html/wp-content/plugins/woocommerce-admin"
-
-  wordpress-cli:
-    volumes:
-      - "../../../:/var/www/html/wp-content/plugins/woocommerce-admin"
-

plugins/woocommerce-admin/docker/wc-admin-php-test-suite/Dockerfile

@@ -12,12 +12,12 @@ RUN apk --no-cache add \
 	mariadb-client \
 	ncurses \
 	nodejs \
-	npm \
+	pnpm \
 	subversion \
 	unzip \
 	wget
-	
-COPY install-php-version.sh /tmp/  
+
+COPY install-php-version.sh /tmp/
 RUN chmod u+x /tmp/install-php-version.sh && /tmp/install-php-version.sh
 
 RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

plugins/woocommerce-admin/docker/wc-admin-php-test-suite/readme.md

@@ -4,10 +4,10 @@ A docker app to run the PHP Test Suite.
 
 ## Getting Started
 
-For convenience, the PHP Test Suite can be run from an npm script.
+For convenience, the PHP Test Suite can be run from an pnpm script.
 
 ```shell
-npm run test:php
+pnpm run test:php
 ```
 
 This runs the the `phpunit` container with `docker-compose -f run --rm phpunit`. On first use, the container will install the PHP Test Suite and perform the tests. Subsequent use will only perform the tests.
@@ -20,14 +20,14 @@ Re-installation is useful to update WordPress to the latest version. To do this,
 docker volume rm -f wc-admin-php-test-suite_test-suite
 ```
 
-Then run the test suite normally using the npm script. Installation will be automatically performed.
+Then run the test suite normally using the pnpm script. Installation will be automatically performed.
 
 ## Testing a single test case
 
-PHPUnit flags can be passed to the npm script. To limit testing to a single test case, use the `--filter` flag.
+PHPUnit flags can be passed to the pnpm script. To limit testing to a single test case, use the `--filter` flag.
 
 ```shell
-npm run test:php -- --filter=<name of test>
+pnpm run test:php -- --filter=<name of test>
 ```
 
 ## Selecting the WordPress and WooCommerce Versions
@@ -35,7 +35,7 @@ npm run test:php -- --filter=<name of test>
 By default, the minimum supported versions of WordPress and WooCommerce are used to build the test suite. This can be overridden with environment variables.
 
 ```shell
-WP_VERSION=5.6 WC_VERSION=4.9.0 npm run test:php
+WP_VERSION=5.6 WC_VERSION=4.9.0 pnpm run test:php
 ```
 
 ## Selecting PHP versions
@@ -47,7 +47,7 @@ As mentioned in the readme, when running tests in PHP 8 it will modify the compo
 To run tests using PHP 8:
 
 ```shell
-PHP_VERSION=8 npm run test:php
+PHP_VERSION=8 pnpm run test:php
 ```
 
 ## Development

plugins/woocommerce-admin/docker/wc-admin-wp-env/README.md

@@ -8,7 +8,7 @@ Please install WP-ENV before getting started. You can find more about WP-ENV on
 
 The following command installs WP-ENV globally.
 
-`npm -g i @wordpress/env`
+`pnpm -g i @wordpress/env`
 
 
 ## Starting WP-ENV
@@ -30,8 +30,8 @@ The port # might be different depending on your `.wp-env.override.json` configur
 
 Once you have WP-ENV container up, we need to run a few commands to start developing.
 
-1. Run `npm install` to install npm modules.
-2. Run `npm run dev`
+1. Run `pnpm install` to install pnpm modules.
+2. Run `pnpm run dev`
 3. Run `composer install` to install PHP dependencies.
 
 If you don't have Composer available locally, run the following command. It runs the command in WP-ENV container.
@@ -39,7 +39,7 @@ If you don't have Composer available locally, run the following command. It runs
 `wp-env run composer composer install`
 
 
-You might also want to run `npm start` to watch your CSS and JS changes if you are working on the frontend.
+You might also want to run `pnpm start` to watch your CSS and JS changes if you are working on the frontend.
 
 You're now ready to develop!
 
@@ -99,7 +99,7 @@ This method is simpler, but the plugin does not get activated on startup. You ne
 
 The Mysql port can change when you restart your container.
 
-You can get the current Mysql port with `npm run wp-env-mysql-port` command.
+You can get the current Mysql port with `pnpm run wp-env-mysql-port` command.
 
 1. Open your choice of Mysql tool.
 2. Use the following values to access the Mysql container.

plugins/woocommerce-admin/docs/README.md

@@ -12,15 +12,15 @@ For better debugging, it's also recommended you add `define( 'SCRIPT_DEBUG', tru
 
 After cloning the repo, install dependencies:
 
--   `npm install` to install JavaScript dependencies.
+-   `pnpm install` to install JavaScript dependencies.
 -   `composer install` to gather PHP dependencies.
 
 Now you can build the files using one of these commands:
 
--   `npm run build` : Build a production version
--   `npm run dev` : Build a development version
--   `npm start` : Build a development version, watch files for changes
--   `npm run build:release` : Build a WordPress plugin ZIP file (`woocommerce-admin.zip` will be created in the repository root)
+-   `pnpm run build` : Build a production version
+-   `pnpm run dev` : Build a development version
+-   `pnpm start` : Build a development version, watch files for changes
+-   `pnpm run build:release` : Build a WordPress plugin ZIP file (`woocommerce-admin.zip` will be created in the repository root)
 
 For more helper scripts [see here](./CONTRIBUTING.md#helper-scripts)
 

plugins/woocommerce-admin/docs/examples/extensions/README.md

@@ -7,13 +7,13 @@ Examples for extending WooCommerce Admin
 Install dependencies, if you haven't already.
 
 ```bash
-npm install
+pnpm install
 ```
 
-Build the example extension by running the npm script and passing the example name.
+Build the example extension by running the pnpm script and passing the example name.
 
 ```bash
-npm run example -- --ext=<example>
+pnpm run example -- --ext=<example>
 ```
 
 Go to your WordPress installation's plugins page and activate the plugin. WooCommerce Analytics reports will now reflect the changes made by the example extension.

plugins/woocommerce-admin/docs/features/feature-flags.md

@@ -6,9 +6,9 @@ We currently support the following environments:
 
 | Environment | Description                                                                                                                                                            |
 |-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| development | Development - All features should be enabled in development. These flags are also used in both JS and PHP tests. Ran using `npm start`.                                |
-| plugin      | Plugin - A packaged release of the featured plugin, for GitHub WordPress.org. Ran using `npm run-script build:release`. |                                    |
-| core        | Core - assets/files ready and stable enough for core merge. Ran using `npm pack`. (@todo update this with publish command).
+| development | Development - All features should be enabled in development. These flags are also used in both JS and PHP tests. Ran using `pnpm start`.                                |
+| plugin      | Plugin - A packaged release of the featured plugin, for GitHub WordPress.org. Ran using `pnpm run-script build:release`. |                                    |
+| core        | Core - assets/files ready and stable enough for core merge. Ran using `pnpm pack`. (@todo update this with publish command).
 
 
 ## Adding a new flag
@@ -24,7 +24,7 @@ You can use the `build:release` command with the `--slug` and `--features` argum
 
 For example, to create a `woocommerce-admin-onboarding.zip` build by enabling onboarding in addition to the feature flags defined in `config/plugin.json`, you would run:
 
-`npm run build:release -- --slug onboarding --features '{"onboarding":true}'`.
+`pnpm run build:release -- --slug onboarding --features '{"onboarding":true}'`.
 
 ## Basic Use - Client
 
@@ -46,7 +46,7 @@ We also expose CSS classes on the `body` tag, so that you can target specific fe
 
 ## Basic Use - Server
 
-Feature flags are also available via PHP. To ensure these are consistent with the built client assets, `includes/feature-config.php` is generated by the plugin build process or `npm start`. Do not edit `includes/feature-config.php` directly.
+Feature flags are also available via PHP. To ensure these are consistent with the built client assets, `includes/feature-config.php` is generated by the plugin build process or `pnpm start`. Do not edit `includes/feature-config.php` directly.
 
 To check if a feature is enabled, you can use the `Automattic\WooCommerce\Admin\Features\Features::is_enabled()`:
 

plugins/woocommerce-admin/docs/features/navigation.md

@@ -10,7 +10,7 @@ This feature is hidden behind a feature flag and can be turned on or off by visi
 
 The fastest way to get started is by creating an example plugin from WooCommerce Admin.  Inside your `woocommerce-admin` directory, enter the following command:
 
-`npm run example -- --ext=add-navigation-items`
+`pnpm run example -- --ext=add-navigation-items`
 
 This will create a new plugin that covers various features of the navigation and helps to register some intial items and categories within the new navigation menu.  After running the command above, you can make edits directly to the files at `docs/examples/extensions/add-navigation-items` and they will be built and copied to your `wp-content/add-navigation-items` folder on save.
 

plugins/woocommerce-admin/docs/features/onboarding.md

@@ -118,6 +118,6 @@ The `onboarding` feature flag is enabled in the main WooCommerce Admin plugin bu
 Sometimes, it may be necessary to generate a separate build of the plugin between public releases for internal testing or debugging. This can be done using the [building custom plugin builds](https://github.com/woocommerce/woocommerce-admin/blob/main/docs/feature-flags.md#building-custom-plugin-builds) feature of our build system.
 
 * Switch to the latest `main` branch and pull down any changes
-* Run `npm run build:release -- --slug onboarding --features '{"onboarding":true}'`
+* Run `pnpm run build:release -- --slug onboarding --features '{"onboarding":true}'`
 * A special `woocommerce-admin-onboarding.zip` release will be generated, containing the latest onboarding code
 * Make sure to follow the directions in the "enabling onboarding" section above to properly use the build

plugins/woocommerce-admin/docs/features/payment-gateway-suggestions.md

@@ -10,7 +10,7 @@ Gateway suggestions are retreived from a REST API and can be added via a remote
 
 To quickly get started with an example plugin, run the following from your `woocommerce-admin` directory:
 
-`npm run example -- --ext=payment-gateway-suggestions`
+`pnpm run example -- --ext=payment-gateway-suggestions`
 
 This will create a new plugin that when activated will add two new gateway suggestions.  The first is a simple gateway demonstrating how configuration fields can be pulled from the gateway class to create a configuration form.  The second gateway shows a more customized approach via SlotFill.
 

plugins/woocommerce-admin/languages/README.md

@@ -8,7 +8,7 @@ If you'd like to contribute a translation, please follow the Localizing section
 The generated POT template file is not included in this repository. To create this file locally, follow instructions from [README.md](https://github.com/woocommerce/woocommerce-admin/blob/main/README.md) to install the project, then run the following command:
 
 ```
-npm run i18n lang=xx_YY
+pnpm run i18n lang=xx_YY
 ```
 
 After the build completes, you'll find a `woocommerce-admin-xx_YY.po` (eg. `woocommerce-admin-fr_FR.po`) strings file in this directory. 
@@ -18,5 +18,5 @@ After the build completes, you'll find a `woocommerce-admin-xx_YY.po` (eg. `wooc
 To generate JSON from your translations, save your translation file in this directory then run the following command:
 
 ```
-npm run i18n:json
-```
+pnpm run i18n:json
+```

plugins/woocommerce-admin/lerna.json

@@ -1,10 +0,0 @@
-{
-	"command": {
-		"publish": {
-			"message": "chore(release): publish"
-		}
-	},
-	"ignoreChanges": [ "**/CHANGELOG.md", "**/test/**" ],
-	"packages": [ "packages/*" ],
-	"version": "independent"
-}

plugins/woocommerce-admin/lint-staged.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-	'*.scss': [ 'npm run lint:css-fix' ],
+	'*.scss': [ 'pnpm run lint:css-fix' ],
 	'client/**/*.(t|j)s?(x)': [
 		'wp-scripts format-js',
 		'wp-scripts lint-js',
-		'npm run test-staged',
+		'pnpm run test-staged',
 	],
 	'packages/**/*.(t|j)s?(x)': ( packageFiles ) => {
 		const globalScripts = [
@@ -36,7 +36,7 @@ module.exports = {
 
 		const workspaceScripts = Object.keys( filesByPackage ).map(
 			( packageName ) =>
-				`lerna --scope @woocommerce/${ packageName } run test-staged -- ${ filesByPackage[
+				`pnpm --filter @woocommerce/${ packageName } run test-staged -- ${ filesByPackage[
 					packageName
 				].join( ' ' ) }`
 		);

plugins/woocommerce-admin/package.json

@@ -18,68 +18,71 @@
 		"license.txt"
 	],
 	"scripts": {
-		"prebuild": "npm run install-if-deps-outdated",
-		"build": "npm run build:feature-config && npm run build:packages && cross-env NODE_ENV=production webpack",
+		"preinstall": "npx only-allow pnpm",
+		"prebuild": "pnpm run install-if-deps-outdated",
+		"run:packages": "pnpm run --filter ./packages",
+		"build": "pnpm run build:feature-config && pnpm run build:packages && cross-env NODE_ENV=production webpack",
 		"analyze": "cross-env NODE_ENV=production ANALYZE=true webpack",
-		"postbuild": "npm run -s i18n:pot && npm run -s i18n:build",
+		"postbuild": "pnpm run -s i18n:pot && pnpm run -s i18n:build",
 		"build:feature-config": "php bin/generate-feature-config.php",
-		"build:packages": "cross-env NODE_ENV=production lerna run build",
+		"build:packages": "cross-env NODE_ENV=production pnpm run:packages -- build",
 		"build:release": "./bin/build-plugin-zip.sh",
-		"clean": "rimraf ./dist && lerna run clean --parallel",
-		"predev": "npm run -s install-if-deps-outdated && php ./bin/update-version.php",
-		"dev": "cross-env WC_ADMIN_PHASE=development npm run build:feature-config && cross-env WC_ADMIN_PHASE=development npm run build:packages && cross-env WC_ADMIN_PHASE=development webpack",
-		"docs": "./bin/import-wp-css-storybook.sh && STORYBOOK=true npx build-storybook -c storybook/.storybook -o ./docs/components/storybook",
-		"i18n": "npm run -s i18n:js && npm run -s i18n:check && npm run -s i18n:pot && npm run -s i18n:build",
+		"clean": "rimraf ./dist && pnpm run:packages -- clean --parallel",
+		"predev": "pnpm run -s install-if-deps-outdated && php ./bin/update-version.php",
+		"dev": "cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && cross-env WC_ADMIN_PHASE=development pnpm run build:packages && cross-env WC_ADMIN_PHASE=development webpack",
+		"docs": "./bin/import-wp-css-storybook.sh && STORYBOOK=true pnpm exec build-storybook -c storybook/.storybook -o ./docs/components/storybook",
+		"i18n": "pnpm run -s i18n:js && pnpm run -s i18n:check && pnpm run -s i18n:pot && pnpm run -s i18n:build",
 		"i18n:build": "php bin/combine-pot-files.php languages/woocommerce-admin.po languages/woocommerce-admin.pot",
 		"i18n:check": "grunt checktextdomain",
-		"i18n:js": "npm run clean && cross-env NODE_ENV=production babel client packages -o /dev/null",
+		"i18n:js": "pnpm run clean && cross-env NODE_ENV=production babel client packages -o /dev/null",
 		"i18n:json": "./bin/make-i18n-json.sh",
 		"i18n:pot": "grunt makepot",
 		"install-if-deps-outdated": "node bin/install-if-deps-outdated.js",
 		"install-if-no-packages": "node bin/install-if-no-packages.js",
 		"labels:dry": "github-label-sync --labels ./.github/label-sync-config.json --allow-added-labels --dry-run woocommerce/woocommerce-admin",
 		"labels:sync": "github-label-sync --labels ./.github/label-sync-config.json --allow-added-labels woocommerce/woocommerce-admin",
-		"lint": "npm run lint:js && npm run lint:css",
+		"lint": "pnpm run lint:js && pnpm run lint:css",
 		"lint:css": "stylelint '**/*.scss'",
 		"lint:css-fix": "stylelint '**/*.scss' --fix --ip 'storybook/wordpress'",
 		"lint:js": "wp-scripts lint-js ./packages ./client --ext=js,ts,tsx",
 		"lint:js:packages": "wp-scripts lint-js ./packages --ext=js,ts,tsx",
 		"lint:js:client": "wp-scripts lint-js ./client --ext=js,ts,tsx",
-		"lint:js-fix": "npm run lint:js --fix --ext=js,ts,tsx",
+		"lint:js-fix": "pnpm run lint:js --fix --ext=js,ts,tsx",
 		"lint:php": "./vendor/bin/phpcs --standard=phpcs.xml.dist $(git ls-files | grep .php$)",
 		"lint:php-fix": "./vendor/bin/phpcbf --standard=phpcs.xml.dist $(git ls-files | grep .php$)",
 		"ts:check": "tsc --build ./tsconfig.json",
 		"ts:check:watch": "npm run ts:check -- --watch",
 		"reformat-files": "wp-scripts format-js -- --ignore-path .eslintignore",
-		"prepack": "npm install && npm run lint && npm run test && cross-env WC_ADMIN_PHASE=core npm run build",
-		"publish-packages:check": "npm run build:packages && lerna updated",
-		"publish-packages:dev": "npm run build:packages && lerna publish from-package --npm-tag next",
-		"publish-packages:prod": "npm run build:packages && lerna publish from-package",
-		"prestart": "npm run install-if-deps-outdated",
-		"start": "cross-env WC_ADMIN_PHASE=development npm run build:packages && cross-env WC_ADMIN_PHASE=development npm run build:feature-config && concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development lerna run start --parallel\"",
-		"start:package": "lerna run start --parallel --scope",
-		"pretest": "npm run -s install-if-no-packages",
+		"prepack": "pnpm install && pnpm run lint && pnpm run test && cross-env WC_ADMIN_PHASE=core pnpm run build",
+		"publish-packages:check": "pnpm run build:packages && pnpm publish --dry-run --filter ./packages --publish-branch main --report-summary && cat pnpm-publish-summary.json && rm pnpm-publish-summary.json",
+		"publish-packages:dev": "pnpm run build:packages && pnpm publish --filter ./packages --publish-branch main --tag next",
+		"publish-packages:prod": "pnpm run build:packages && pnpm publish --filter ./packages --publish-branch main",
+		"prestart": "pnpm run install-if-deps-outdated",
+		"start": "cross-env WC_ADMIN_PHASE=development pnpm run build:packages && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm run:packages -- start --parallel\"",
+		"start:package": "pnpm run:packages -- start --parallel",
+		"pretest": "pnpm run -s install-if-no-packages",
 		"test:debug": "node --inspect-brk ./node_modules/.bin/jest --config client/jest.config.js --watch --runInBand --no-cache",
 		"test:client": "jest --config client/jest.config.js",
-		"test:packages": "lerna run test",
-		"test": "lerna run build && npm run test:client && lerna run test:nobuild",
-		"test:e2e": "npm run build && test -z \"$(docker ps | grep woocommerce-admin-e2e)\" || npx wc-e2e docker:down && npx wc-e2e docker:up && npx wc-e2e test:e2e",
-		"test-staged": "npm run test:client -- --bail --findRelatedTests",
+		"test:packages": "pnpm run:packages -- test",
+		"test": "pnpm run:packages -- build && pnpm run test:client && pnpm run:packages -- test:nobuild",
+		"test:e2e": "pnpm run build && test -z \"$(docker ps | grep woocommerce-admin-e2e)\" || pnpm exec wc-e2e docker:down && pnpm run e2e:docker-up && pnpm exec wc-e2e test:e2e",
+		"e2e:docker-up": "WC_E2E_FOLDER=../../../ pnpm exec wc-e2e docker:up ./tests/e2e/docker/initialize.sh",
+		"test-staged": "pnpm run test:client -- --bail --findRelatedTests",
 		"test:help": "wp-scripts test-unit-js --help",
 		"test:php": "docker-compose -f docker/wc-admin-php-test-suite/docker-compose.yml run --rm phpunit",
 		"posttest:php": "docker-compose -f docker/wc-admin-php-test-suite/docker-compose.yml down",
 		"postinstall": "patch-package",
-		"test:update-snapshots": "npm run test:client --updateSnapshot && lerna --scope @woocommerce/components run test:update-snapshots",
-		"test:watch": "tsc --build && concurrently \"npm run test:client -- --watch\" \"lerna run test:nobuild --parallel -- -- --watch\"",
-		"test:zip": "npm run clean && composer i && ./bin/build-test-zip.sh",
+		"test:update-snapshots": "pnpm run test:client -- --updateSnapshot && pnpm run --filter @woocommerce/components test:update-snapshots",
+		"test:watch": "tsc --build || concurrently \"pnpm run test:client -- --watch\" \"pnpm run:packages -- test:nobuild --parallel -- --watch\"",
+		"test:zip": "pnpm run clean && composer i && ./bin/build-test-zip.sh",
 		"example": "webpack --config docs/examples/extensions/examples.config.js --watch",
 		"pre-release": "./bin/pre-release.sh",
 		"create-wc-extension": "node ./bin/starter-pack/starter-pack.js",
-		"storybook": "./bin/import-wp-css-storybook.sh && STORYBOOK=true start-storybook -c ./storybook/.storybook -p 6007 --ci",
-		"storybook-rtl": "USE_RTL_STYLE=true npm run storybook",
+		"storybook": "./bin/import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true start-storybook -c ./storybook/.storybook -p 6007 --ci",
+		"storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook",
 		"build-storybook": "build-storybook  -c ./storybook/.storybook",
 		"changelog": "node ./bin/changelog --changelogSrcType='ZENHUB_RELEASE'",
-		"bump-version": "npm run -s install-if-deps-outdated && php ./bin/update-version.php",
+		"bump-version": "pnpm run -s install-if-deps-outdated && php ./bin/update-version.php",
 		"wp-env-mysql-port": "node ./docker/wc-admin-wp-env/mysql-port.js",
 		"create-hook-reference": "node ./bin/hook-reference/index.js",
 		"changelogger": "./vendor/bin/changelogger",
@@ -95,9 +98,11 @@
 		"@automattic/explat-client": "0.0.2",
 		"@automattic/explat-client-react-helpers": "0.0.3",
 		"@automattic/interpolate-components": "1.2.0",
+		"@react-spring/web": "^9.2.4",
 		"@woocommerce/api": "0.2.0",
-		"@woocommerce/e2e-environment": "0.2.3",
+		"@woocommerce/e2e-environment": "0.3.0",
 		"@woocommerce/e2e-utils": "0.1.6",
+		"@wordpress/a11y": "^2.15.3",
 		"@wordpress/api-fetch": "6.0.1",
 		"@wordpress/base-styles": "3.3.0",
 		"@wordpress/components": "19.4.0",
@@ -107,6 +112,7 @@
 		"@wordpress/data-controls": "2.3.1",
 		"@wordpress/date": "4.3.1",
 		"@wordpress/dom": "3.3.1",
+		"@wordpress/dom-ready": "^3.3.0",
 		"@wordpress/element": "4.1.1",
 		"@wordpress/hooks": "2.11.0",
 		"@wordpress/html-entities": "3.3.1",
@@ -115,22 +121,27 @@
 		"@wordpress/keycodes": "3.3.1",
 		"@wordpress/notices": "3.3.0",
 		"@wordpress/plugins": "4.1.0",
+		"@wordpress/primitives": "^3.1.0",
 		"@wordpress/url": "3.4.1",
 		"@wordpress/viewport": "4.1.0",
+		"@wordpress/warning": "^2.3.0",
 		"classnames": "2.3.1",
 		"core-js": "3.9.1",
 		"debug": "4.3.1",
 		"dompurify": "2.2.9",
 		"github-label-sync": "2.0.0",
 		"gridicons": "3.4.0",
+		"history": "4.10.1",
+		"lodash": "^4.17.21",
 		"memize": "1.1.0",
 		"memoize-one": "5.1.1",
 		"qs": "6.9.6",
+		"react": "^17.0.0",
 		"react-dates": "17.2.0",
+		"react-dom": "^17.0.0",
 		"react-router-dom": "5.2.0",
 		"react-transition-group": "4.4.1",
 		"react-visibility-sensor": "5.1.1",
-		"@react-spring/web": "^9.2.4",
 		"redux": "4.1.2",
 		"typescript": "4.2.4"
 	},
@@ -140,10 +151,14 @@
 		"@babel/cli": "7.13.16",
 		"@babel/core": "7.14.0",
 		"@babel/plugin-proposal-class-properties": "7.14.5",
+		"@babel/plugin-proposal-private-methods": "^7.16.11",
+		"@babel/plugin-proposal-private-property-in-object": "^7.16.7",
 		"@babel/plugin-transform-async-to-generator": "^7.14.5",
 		"@babel/plugin-transform-react-jsx": "7.13.12",
 		"@babel/preset-env": "7.14.1",
 		"@babel/preset-typescript": "7.13.0",
+		"@babel/runtime": "^7.17.2",
+		"@octokit/core": ">=3",
 		"@storybook/addon-a11y": "6.2.9",
 		"@storybook/addon-actions": "6.2.9",
 		"@storybook/addon-console": "1.2.3",
@@ -153,11 +168,16 @@
 		"@storybook/addon-storysource": "6.2.9",
 		"@storybook/addon-viewport": "6.2.9",
 		"@storybook/addons": "6.2.9",
+		"@storybook/api": "6.2.9",
+		"@storybook/components": "6.2.9",
+		"@storybook/core-events": "6.2.9",
 		"@storybook/react": "6.2.9",
+		"@storybook/theming": "6.2.9",
+		"@testing-library/dom": "^8.2.0",
 		"@testing-library/jest-dom": "5.14.0",
-		"@testing-library/react": "12.0.0",
+		"@testing-library/react": "12.1.3",
 		"@testing-library/react-hooks": "7.0.1",
-		"@testing-library/user-event": "13.2.1",
+		"@testing-library/user-event": "13.5.0",
 		"@types/cookie": "0.4.1",
 		"@types/dompurify": "2.2.2",
 		"@types/expect-puppeteer": "4.4.6",
@@ -170,24 +190,25 @@
 		"@types/wordpress__components": "19.3.0",
 		"@types/wordpress__data-controls": "2.2.0",
 		"@typescript-eslint/eslint-plugin": "4.22.1",
-		"@woocommerce/admin-e2e-tests": "file:packages/admin-e2e-tests",
-		"@woocommerce/components": "file:packages/components",
-		"@woocommerce/csv-export": "file:packages/csv-export",
-		"@woocommerce/currency": "file:packages/currency",
-		"@woocommerce/customer-effort-score": "file:packages/customer-effort-score",
-		"@woocommerce/data": "file:packages/data",
-		"@woocommerce/date": "file:packages/date",
-		"@woocommerce/dependency-extraction-webpack-plugin": "file:packages/dependency-extraction-webpack-plugin",
-		"@woocommerce/eslint-plugin": "file:packages/eslint-plugin",
-		"@woocommerce/experimental": "file:packages/experimental",
-		"@woocommerce/explat": "file:packages/explat",
-		"@woocommerce/js-tests": "file:packages/js-tests",
-		"@woocommerce/navigation": "file:packages/navigation",
-		"@woocommerce/notices": "file:packages/notices",
-		"@woocommerce/number": "file:packages/number",
-		"@woocommerce/onboarding": "file:packages/onboarding",
-		"@woocommerce/style-build": "file:packages/style-build",
-		"@woocommerce/tracks": "file:packages/tracks",
+		"@typescript-eslint/parser": "4.0.0",
+		"@woocommerce/admin-e2e-tests": "workspace:*",
+		"@woocommerce/components": "workspace:*",
+		"@woocommerce/csv-export": "workspace:*",
+		"@woocommerce/currency": "workspace:*",
+		"@woocommerce/customer-effort-score": "workspace:*",
+		"@woocommerce/data": "workspace:*",
+		"@woocommerce/date": "workspace:*",
+		"@woocommerce/dependency-extraction-webpack-plugin": "workspace:*",
+		"@woocommerce/eslint-plugin": "workspace:*",
+		"@woocommerce/experimental": "workspace:*",
+		"@woocommerce/explat": "workspace:*",
+		"@woocommerce/js-tests": "workspace:*",
+		"@woocommerce/navigation": "workspace:*",
+		"@woocommerce/notices": "workspace:*",
+		"@woocommerce/number": "workspace:*",
+		"@woocommerce/onboarding": "workspace:*",
+		"@woocommerce/style-build": "workspace:*",
+		"@woocommerce/tracks": "workspace:*",
 		"@wordpress/babel-plugin-makepot": "2.1.3",
 		"@wordpress/babel-preset-default": "^6.5.1",
 		"@wordpress/browserslist-config": "4.0.1",
@@ -213,6 +234,7 @@
 		"cross-env": "7.0.3",
 		"css-loader": "3.6.0",
 		"docsify-cli": "4.4.3",
+		"eslint": "^7.32.0",
 		"eslint-import-resolver-typescript": "2.4.0",
 		"eslint-import-resolver-webpack": "0.13.1",
 		"eslint-plugin-import": "2.22.1",
@@ -226,18 +248,21 @@
 		"jest": "27.0.6",
 		"jest-environment-jsdom": "~27.0",
 		"jest-environment-node": "^27.0.6",
-		"lerna": "3.22.1",
 		"lint-staged": "10.5.4",
 		"md5": "2.3.0",
 		"merge-config": "2.0.0",
+		"moment": "^2.18.1",
+		"moment-timezone": ">= 0.1.0",
 		"moment-timezone-data-webpack-plugin": "1.3.0",
 		"node-watch": "0.7.1",
 		"patch-package": "^6.4.7",
+		"postcss": "^8.1.0",
 		"postcss-color-function": "4.1.0",
 		"postcss-loader": "3.0.0",
 		"prettier": "npm:wp-prettier@2.2.1-beta-1",
 		"promptly": "3.2.0",
 		"prop-types": "15.7.2",
+		"puppeteer": ">=1.19.0",
 		"raw-loader": "4.0.2",
 		"readline-sync": "1.4.10",
 		"replace": "1.2.1",
@@ -259,6 +284,6 @@
 	},
 	"engines": {
 		"node": ">=12.20.1 <15",
-		"npm": ">=6.14.10 <7"
+		"pnpm": "^6.24.2"
 	}
 }

plugins/woocommerce-admin/packages/README.md

@@ -11,7 +11,7 @@ Currently we have a small set of public-facing packages that can be dowloaded fr
 
 ## Working with existing packages
 
--   You can make changes to packages files as normal, and running `npm start` will compile and watch both app files and packages.
+-   You can make changes to packages files as normal, and running `pnpm start` will compile and watch both app files and packages.
 -   :warning: Make sure any dependencies you add to a package are also added to that package's `package.json`, not just the woocommerce-admin package.json
 -   :warning: Make sure you're not importing from any woocommerce-admin files outside of the package (you can import from other packages, just use the `import from @woocommerce/package` syntax).
 -   Add your change to the CHANGELOG for that package under the next version number, creating one if necessary (we use semantic versioning for packages, [see these guidelines](https://github.com/WordPress/gutenberg/blob/master/CONTRIBUTING.md#maintaining-changelogs)).
@@ -61,7 +61,7 @@ To create a new package, add a new folder to `/packages`, containing…
     - Package description
     - Installation details
     - Usage example
-4. A `src` directory for the source of your module, which will be built by default using the `npm run build:packages` command. Note that you'll want an `index.js` file that exports the package contents, see other packages for examples.
+4. A `src` directory for the source of your module, which will be built by default using the `pnpm run build:packages` command. Note that you'll want an `index.js` file that exports the package contents, see other packages for examples.
 
 5. Add the new package name to `packages/dependency-extraction-webpack-plugin/assets/packages.js` so that users of that plugin will also be able to use the new package without enqueuing it.
 
@@ -69,32 +69,17 @@ To create a new package, add a new folder to `/packages`, containing…
 
 ## Publishing packages
 
--   Run `npm run publish-packages:check` to see which packages will be published
+-   Run `pnpm run publish-packages:check` to run pnpm publish with the `--dry-run` option
 -   Create a PR with a CHANGELOG for each updated package (or try to add to the CHANGELOG with any PR editing `packages/`)
--   Run `npm run publish-packages:prod` to publish the package
--   _OR_ Run `npm run publish-packages:dev` to publish "next" releases (installed as `npm i @woocommerce/package@next`). Only use `:dev` if you have a reason to.
--   Both commands will run `build:packages` before the lerna task, just to catch any last updates.
-
-It will confirm with you once more before publishing:
-
-```
-Changes:
- - @woocommerce/components: 1.0.1 => 1.1.0
- - @woocommerce/date: 1.0.1 => 1.0.2
- - @woocommerce/navigation: 1.0.0 => 1.1.0
-
-? Are you sure you want to publish these packages?
-```
-
-If you accept, Lerna will create git tags, publish those to github, then push your packages to npm.
-
-🎉 You have a published package!
+-   Run `pnpm run publish-packages:prod` to publish the package
+-   _OR_ Run `pnpm run publish-packages:dev` to publish "next" releases (installed as `pnpm i @woocommerce/package@next`). Only use `:dev` if you have a reason to.
+-   Both commands will run `build:packages` before the publishing  task, just to catch any last updates.
 
 ### Publishing a single package
 
-Sometimes, its helpful to release a singular package. This can be done directly through npm. Be sure versions and builds are correct.
+Sometimes, its helpful to release a singular package. This can be done directly through pnpm. Be sure versions and builds are correct.
 
 -   Bump the version in the package's package.json as well as its CHANGELOG file.
--   `npm install && npm run build:packages` to build packages.
+-   `pnpm install && pnpm run build:packages` to build packages.
 -   `cd packages/<package-name>`
--   `npm publish`
+-   `pnpm publish`

plugins/woocommerce-admin/packages/admin-e2e-tests/CHANGELOG.md

@@ -10,6 +10,8 @@
 
 -   Add tests to Subscriptions inclusion. #7804
 
+-   Add missing dependencies. #8349
+
 # 0.1.2
 
 -   Add Customers to analytics pages tested #7573

plugins/woocommerce-admin/packages/admin-e2e-tests/README.md

@@ -7,7 +7,7 @@ An end-to-end test suite for WooCommerce setup, onboarding, home screen/task lis
 Install the module
 
 ```bash
-npm install @woocommerce/admin-e2e-tests --save
+pnpm install @woocommerce/admin-e2e-tests --save
 ```
 
 ## Usage

plugins/woocommerce-admin/packages/admin-e2e-tests/package.json

@@ -35,6 +35,7 @@
 		"@types/expect-puppeteer": "4.4.6",
 		"@types/puppeteer": "5.4.3",
 		"@typescript-eslint/eslint-plugin": "4.22.1",
+		"@woocommerce/api": "0.2.0",
 		"jest-mock-extended": "1.0.18",
 		"rimraf": "3.0.2",
 		"typescript": "4.2.4"
@@ -44,7 +45,7 @@
 	},
 	"scripts": {
 		"build": "tsc --build",
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
-		"prepack": "npm run clean && npm run build"
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
+		"prepack": "pnpm run clean && pnpm run build"
 	}
 }

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,12 +1,13 @@
 # Unreleased
 
-- Replace deprecated wp.compose.withState with wp.element.useState. #8338
+-   Replace deprecated wp.compose.withState with wp.element.useState. #8338
+-   Add missing dependencies. #8349
 
 # 9.0.0
 
-- Update line-height of SelectControl label to avoid truncated descenders in some typefaces and zoom levels. #8186
-- Made @woocommerce/components/Stepper a Typescript file. #8286
-- Added Typescript type declarations to build for @woocommerce/components #8282
+-   Update line-height of SelectControl label to avoid truncated descenders in some typefaces and zoom levels. #8186
+-   Made @woocommerce/components/Stepper a Typescript file. #8286
+-   Added Typescript type declarations to build for @woocommerce/components #8282
 ## Breaking changes
 
 -   Update dependencies to support react 17. #8305

plugins/woocommerce-admin/packages/components/README.md

@@ -7,7 +7,7 @@ This packages includes a library of components that can be used to create pages
 Install the module
 
 ```bash
-npm install @woocommerce/components --save
+pnpm install @woocommerce/components --save
 ```
 
 View [the full Component documentation](https://woocommerce.github.io/woocommerce-admin/#/components/) for usage information.

plugins/woocommerce-admin/packages/components/package.json

@@ -27,11 +27,11 @@
 	"types": "build-types",
 	"dependencies": {
 		"@storybook/addon-knobs": "^6.3.0",
-		"@woocommerce/csv-export": "file:../csv-export",
-		"@woocommerce/currency": "file:../currency",
-		"@woocommerce/data": "file:../data",
-		"@woocommerce/date": "file:../date",
-		"@woocommerce/navigation": "file:../navigation",
+		"@woocommerce/csv-export": "workspace:*",
+		"@woocommerce/currency": "workspace:*",
+		"@woocommerce/data": "workspace:*",
+		"@woocommerce/date": "workspace:*",
+		"@woocommerce/navigation": "workspace:*",
 		"@wordpress/api-fetch": "6.0.1",
 		"@wordpress/components": "19.4.0",
 		"@wordpress/compose":  "5.1.1",
@@ -45,6 +45,7 @@
 		"@wordpress/keycodes": "3.3.1",
 		"@wordpress/url": "3.4.1",
 		"@wordpress/viewport": "4.1.0",
+		"@wordpress/hooks": "2.11.0",
 		"classnames": "^2.3.1",
 		"core-js": "3.9.1",
 		"d3-axis": "1.0.12",
@@ -66,7 +67,8 @@
 		"react-transition-group": "4.4.1"
 	},
 	"peerDependencies": {
-		"lodash": "^4.17.0"
+		"lodash": "^4.17.0",
+		"@wordpress/data": "6.2.1"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -74,22 +76,25 @@
 	"devDependencies": {
 		"@storybook/addon-console": "1.2.3",
 		"@storybook/react": "6.2.9",
-		"@testing-library/react": "11.2.7",
-		"@testing-library/user-event": "13.2.1",
-		"@woocommerce/style-build": "file:../style-build",
+		"@storybook/addon-docs": "6.2.9",
+		"@storybook/addon-links": "6.2.9",
+		"@testing-library/react": "12.1.3",
+		"@testing-library/user-event": "13.5.0",
+		"@testing-library/jest-dom": "5.14.0",
+		"@woocommerce/style-build": "workspace:*",
 		"@wordpress/scripts": "12.6.1",
 		"concurrently": "5.3.0"
 	},
 	"scripts": {
-		"build": "npm run build:js && npm run build:css",
+		"build": "pnpm run build:js && pnpm run build:css",
 		"build:js": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"build:css": "webpack",
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
-		"prepack": "npm run clean && npm run build",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
+		"prepack": "pnpm run clean && pnpm run build",
 		"start": "concurrently \"tsc --build ./tsconfig.json --watch\" \"webpack --watch\"",
-		"test": "lerna run build && npm run test:nobuild",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
-		"test:update-snapshots": "npm run test:nobuild --updateSnapshot",
+		"test:update-snapshots": "pnpm run test:nobuild -- --updateSnapshot",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}
 }

plugins/woocommerce-admin/packages/csv-export/README.md

@@ -7,7 +7,7 @@ A set of functions to convert data into CSV values, and enable a browser downloa
 Install the module
 
 ```bash
-npm install @woocommerce/csv-export --save
+pnpm install @woocommerce/csv-export --save
 ```
 
 ## Usage

plugins/woocommerce-admin/packages/csv-export/package.json

@@ -28,11 +28,11 @@
 		"access": "public"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"start": "tsc --build --watch",
-		"prepack": "npm run clean && npm run build",
-		"test": "lerna run build && npm run test:nobuild",
+		"prepack": "pnpm run clean && pnpm run build",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}

plugins/woocommerce-admin/packages/currency/README.md

@@ -7,7 +7,7 @@ A collection of utilities to display and work with currency values.
 Install the module
 
 ```bash
-npm install @woocommerce/currency --save
+pnpm install @woocommerce/currency --save
 ```
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

plugins/woocommerce-admin/packages/currency/package.json

@@ -21,7 +21,7 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@woocommerce/number": "file:../number",
+		"@woocommerce/number": "workspace:*",
 		"@wordpress/deprecated": "^2.9.0",
 		"@wordpress/element": "4.1.1",
 		"@wordpress/html-entities": "3.3.1",
@@ -31,11 +31,11 @@
 		"access": "public"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"start": "tsc --build --watch",
-		"prepack": "npm run clean && npm run build",
-		"test": "lerna run build && npm run test:nobuild",
+		"prepack": "pnpm run clean && pnpm run build",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}

plugins/woocommerce-admin/packages/customer-effort-score/README.md

@@ -7,7 +7,7 @@ WooCommerce utility to measuring user satisfaction.
 Install the module
 
 ```bash
-npm install @woocommerce/customer-effort-score --save
+pnpm install @woocommerce/customer-effort-score --save
 ```
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

plugins/woocommerce-admin/packages/customer-effort-score/package.json

@@ -20,7 +20,7 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@woocommerce/experimental": "file:../experimental",
+		"@woocommerce/experimental": "workspace:*",
 		"@wordpress/components": "19.4.0",
 		"@wordpress/compose":  "5.1.1",
 		"@wordpress/data": "^6.2.1",
@@ -35,19 +35,19 @@
 		"access": "public"
 	},
 	"devDependencies": {
-		"@testing-library/react": "11.2.7",
+		"@testing-library/react": "12.1.3",
 		"@types/wordpress__components": "9.8.6",
-		"@woocommerce/style-build": "file:../style-build",
+		"@woocommerce/style-build": "workspace:*",
 		"concurrently": "5.3.0"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
-		"build": "npm run build:js && npm run build:css",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
+		"build": "pnpm run build:js && pnpm run build:css",
 		"build:js": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"build:css": "webpack",
 		"start": "concurrently \"tsc --build --watch\" \"webpack --watch\"",
-		"prepack": "npm run clean && npm run build",
-		"test": "lerna run build && npm run test:nobuild",
+		"prepack": "pnpm run clean && pnpm run build",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}

plugins/woocommerce-admin/packages/data/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Unreleased
 
+-   Add "moment" to peerDependencies. #8349
+
 # 3.0.0
 
 ## Breaking changes

plugins/woocommerce-admin/packages/data/README.md

@@ -7,7 +7,7 @@ WooCommerce Admin data store and utilities.
 Install the module
 
 ```bash
-npm install @woocommerce/data --save
+pnpm install @woocommerce/data --save
 ```
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

plugins/woocommerce-admin/packages/data/package.json

@@ -21,8 +21,8 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@woocommerce/date": "file:../date",
-		"@woocommerce/navigation": "file:../navigation",
+		"@woocommerce/date": "workspace:*",
+		"@woocommerce/navigation": "workspace:*",
 		"@wordpress/api-fetch": "6.0.1",
 		"@wordpress/compose":  "5.1.1",
 		"@wordpress/core-data": "4.1.0",
@@ -41,15 +41,20 @@
 	"publishConfig": {
 		"access": "public"
 	},
+	"devDependencies": {
+		"@testing-library/react-hooks": "7.0.1",
+		"@testing-library/react": "12.1.3"
+	},
 	"peerDependencies": {
-		"@wordpress/core-data": "^4.1.0"
+		"@wordpress/core-data": "^4.1.0",
+		"moment": "^2.18.1"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"start": "tsc --build --watch",
-		"prepack": "npm run clean && npm run build",
-		"test": "lerna run build && npm run test:nobuild",
+		"prepack": "pnpm run clean && pnpm run build",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}

plugins/woocommerce-admin/packages/date/README.md

@@ -7,11 +7,11 @@ A collection of utilities to display and work with date values.
 Install the module
 
 ```bash
-npm install @woocommerce/date --save
+pnpm install @woocommerce/date --save
 ```
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
 
 ## Usage
 
-The `date` package makes use of the global `window.wcSettings.timeZone`.  If a timezone is set, the current and last periods will be converted from your browser's timezone to the store timezone.  If none is set, these periods will be based on your browser's timezone.
+The `date` package makes use of the global `window.wcSettings.timeZone`.  If a timezone is set, the current and last periods will be converted from your browser's timezone to the store timezone.  If none is set, these periods will be based on your browser's timezone.

plugins/woocommerce-admin/packages/date/package.json

@@ -36,11 +36,11 @@
 		"access": "public"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"start": "tsc --build --watch",
-		"prepack": "npm run clean && npm run build",
-		"test": "lerna run build && npm run test:nobuild",
+		"prepack": "pnpm run clean && pnpm run build",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}

plugins/woocommerce-admin/packages/dependency-extraction-webpack-plugin/README.md

@@ -7,7 +7,7 @@ Extends Wordpress [Dependency Extraction Webpack Plugin](https://github.com/Word
 Install the module
 
 ```
-npm install @woocommerce/dependency-extraction-webpack-plugin --save-dev
+pnpm install @woocommerce/dependency-extraction-webpack-plugin --save-dev
 ```
 
 ## Usage

plugins/woocommerce-admin/packages/eslint-plugin/README.md

@@ -17,7 +17,7 @@ However, this ruleset does implement the following (which do not conflict with W
 Install the module
 
 ```
-npm install @woocommerce/eslint-plugin --save-dev
+pnpm install @woocommerce/eslint-plugin --save-dev
 ```
 
 ## Usage

plugins/woocommerce-admin/packages/experimental/README.md

@@ -11,7 +11,7 @@ It also contains several in-development components that are slated for inclusion
 Install the module
 
 ```bash
-npm install @woocommerce/experimental --save
+pnpm install @woocommerce/experimental --save
 ```
 
 ## Usage

plugins/woocommerce-admin/packages/experimental/package.json

@@ -25,8 +25,7 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@babel/runtime": "7.14.0",
-		"@woocommerce/components": "file:../components",
+		"@woocommerce/components": "workspace:*",
 		"@wordpress/components": "19.4.0",
 		"@wordpress/element": "4.1.1",
 		"@wordpress/i18n": "4.3.1",
@@ -43,23 +42,24 @@
 		"access": "public"
 	},
 	"devDependencies": {
+		"@babel/runtime": "^7.17.2",
 		"@storybook/addon-console": "1.2.3",
 		"@storybook/react": "6.2.9",
-		"@testing-library/react": "11.2.7",
-		"@testing-library/user-event": "13.1.9",
+		"@testing-library/react": "12.1.3",
+		"@testing-library/user-event": "13.5.0",
 		"@types/dompurify": "2.2.2",
 		"@types/react-transition-group": "4.4.1",
-		"@woocommerce/style-build": "file:../style-build",
+		"@woocommerce/style-build": "workspace:*",
 		"concurrently": "5.3.0"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
-		"build": "npm run build:js && npm run build:css",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
+		"build": "pnpm run build:js && pnpm run build:css",
 		"build:js": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"build:css": "webpack",
 		"start": "concurrently \"tsc --build --watch\" \"webpack --watch\"",
-		"prepack": "npm run clean && npm run build",
-		"test": "lerna run build && npm run test:nobuild",
+		"prepack": "pnpm run clean && pnpm run build",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}

plugins/woocommerce-admin/packages/explat/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Unreleased
 
+-   Add missing dependencies. #8349
+
 # 2.0.0
 
 - Make ExPlat request URL args filterable. Added woocommerce_explat_request_args filter #8231

plugins/woocommerce-admin/packages/explat/README.md

@@ -7,7 +7,7 @@ This packages includes a component and utility functions that can be used to run
 Install the module
 
 ```bash
-npm install @woocommerce/explat --save
+pnpm install @woocommerce/explat --save
 ```
 
 This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

plugins/woocommerce-admin/packages/explat/package.json

@@ -27,6 +27,7 @@
 	"dependencies": {
 		"@automattic/explat-client": "0.0.2",
 		"@automattic/explat-client-react-helpers": "0.0.3",
+		"@wordpress/hooks": "^2.11.0",
 		"cookie": "^0.4.1",
 		"qs": "6.9.6"
 	},
@@ -34,11 +35,11 @@
 		"@types/cookie": "0.4.1"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"start": "tsc --build --watch",
-		"prepack": "npm run clean && npm run build",
-		"test": "lerna run build && npm run test:nobuild",
+		"prepack": "pnpm run clean && pnpm run build",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}

plugins/woocommerce-admin/packages/js-tests/package-lock.json

@@ -1,14 +0,0 @@
-{
-	"name": "@woocommerce/js-tests",
-	"version": "1.1.0",
-	"lockfileVersion": 1,
-	"requires": true,
-	"dependencies": {
-		"typescript": {
-			"version": "4.2.4",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
-			"integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==",
-			"dev": true
-		}
-	}
-}

plugins/woocommerce-admin/packages/js-tests/package.json

@@ -15,11 +15,19 @@
 	},
 	"private": true,
 	"main": "build/util/index.js",
+	"module": "build-module/util/index.js",
 	"scripts": {
-		"build": "npm run ts:check && npm run build:cjs",
-		"build:cjs": "tsc --build ./tsconfig-cjs.json",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"ts:check": "tsc --noEmit --project ./tsconfig.json",
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
-		"prepack": "npm run clean && npm run build"
+		"clean": "pnpm exec rimraf *.tsbuildinfo build build-*",
+		"prepack": "pnpm run clean && pnpm run build"
+	},
+	"dependencies": {
+		"@testing-library/jest-dom": "^5.14.0",
+		"@testing-library/react": "12.1.3",
+		"@wordpress/i18n": "^4.3.1",
+		"@wordpress/data": "^6.2.1",
+		"@wordpress/jest-console": "^5.0.1",
+		"regenerator-runtime": "^0.13.4"
 	}
 }

plugins/woocommerce-admin/packages/js-tests/tsconfig-cjs.json

@@ -1,7 +1,6 @@
 {
     "extends": "../tsconfig-cjs",
     "compilerOptions": {
-		"rootDir": "src",
         "outDir": "build"
     }
-}
+}

plugins/woocommerce-admin/packages/js-tests/tsconfig.json

@@ -1,8 +1,8 @@
 {
     "extends": "../tsconfig.json",
     "compilerOptions": {
-		"rootDir": "src",
-        "outDir": "build",
+        "rootDir": "src",
+        "outDir": "build-module",
         "composite": true
     }
-}
+}

plugins/woocommerce-admin/packages/navigation/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Unreleased
 
+-   Add missing dependencies. #8349
+
 # 7.0.0
 
 ## Breaking changes

plugins/woocommerce-admin/packages/navigation/README.md

@@ -7,7 +7,7 @@ A collection of navigation-related functions for handling query parameter object
 Install the module
 
 ```bash
-npm install @woocommerce/navigation --save
+pnpm install @woocommerce/navigation --save
 ```
 
 ## Usage

plugins/woocommerce-admin/packages/navigation/package.json

@@ -25,6 +25,7 @@
 		"@wordpress/compose":  "5.1.1",
 		"@wordpress/notices": "3.3.0",
 		"@wordpress/components": "19.4.0",
+		"@wordpress/element": "4.1.1",
 		"@wordpress/hooks": "2.11.0",
 		"@wordpress/url": "3.4.1",
 		"history": "4.10.1",
@@ -37,11 +38,11 @@
 		"access": "public"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"start": "tsc --build --watch",
-		"prepack": "npm run clean && npm run build",
-		"test": "lerna run build && npm run test:nobuild",
+		"prepack": "pnpm run clean && pnpm run build",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}

plugins/woocommerce-admin/packages/notices/README.md

@@ -14,7 +14,7 @@ removed.
 Install the module
 
 ```bash
-npm install @wordpress/notices
+pnpm install @wordpress/notices
 ```
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

plugins/woocommerce-admin/packages/notices/package.json

@@ -34,9 +34,9 @@
 	},
 	"private": true,
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"start": "tsc --build --watch",
-		"prepack": "npm run clean && npm run build"
+		"prepack": "pnpm run clean && pnpm run build"
 	}
 }

plugins/woocommerce-admin/packages/number/README.md

@@ -7,7 +7,7 @@ A collection of utilities to propery localize numerical values in WooCommerce
 Install the module
 
 ```bash
-npm install @woocommerce/number --save
+pnpm install @woocommerce/number --save
 ```
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

plugins/woocommerce-admin/packages/number/package.json

@@ -26,11 +26,11 @@
 		"access": "public"
 	},
 	"scripts": {
-		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"start": "tsc --build --watch",
-		"prepack": "npm run clean && npm run build",
-		"test": "lerna run build && npm run test:nobuild",
+		"prepack": "pnpm run clean && pnpm run build",
+		"test": "pnpm run build && pnpm run test:nobuild",
 		"test:nobuild": "jest --config ./jest.config.json",
 		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	}

plugins/woocommerce-admin/packages/onboarding/README.md

@@ -7,5 +7,5 @@ A collection of onboarding related components and utilities.
 Install the module
 
 ```bash
-npm install @woocommerce/onboarding --save
+pnpm install @woocommerce/onboarding --save
 ```

plugins/woocommerce-admin/packages/onboarding/package.json

@@ -25,7 +25,9 @@
 	},
 	"dependencies": {
 		"@automattic/interpolate-components": "^1.2.0",
-		"@woocommerce/tracks": "file:../tracks",
+		"@woocommerce/tracks": "workspace:*",
+		"@woocommerce/experimental": "workspace:*",
+		"@woocommerce/components": "workspace:*",
 		"@wordpress/components": "19.4.0",
 		"@wordpress/element": "4.1.1",
 		"@wordpress/i18n": "^4.1.0",
@@ -33,14 +35,14 @@
 		"gridicons": "^3.3.1"
 	},
 	"devDependencies": {
-		"@woocommerce/style-build": "file:../style-build"
+		"@woocommerce/style-build": "workspace:*"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
-		"build": "npm run build:js && npm run build:css",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
+		"build": "pnpm run build:js && pnpm run build:css",
 		"build:js": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"build:css": "webpack",
 		"start": "concurrently \"tsc --build --watch\" \"webpack --watch\"",
-		"prepack": "npm run clean && npm run build"
+		"prepack": "pnpm run clean && pnpm run build"
 	}
 }

plugins/woocommerce-admin/packages/tracks/README.md

@@ -7,7 +7,7 @@ WooCommerce user event tracking utilities for Automattic based projects.
 Install the module
 
 ```bash
-npm install @woocommerce/tracks --save
+pnpm install @woocommerce/tracks --save
 ```
 
 ## Usage

plugins/woocommerce-admin/packages/tracks/package.json

@@ -27,9 +27,9 @@
 		"access": "public"
 	},
 	"scripts": {
-		"clean": "npx rimraf tsconfig.tsbuildinfo build build-*",
+		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
 		"start": "tsc --build --watch",
-		"prepack": "npm run clean && npm run build"
+		"prepack": "pnpm run clean && pnpm run build"
 	}
 }

plugins/woocommerce-admin/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  # all packages in subdirs of packages/
+  - 'packages/**'

plugins/woocommerce-admin/src/Features/OnboardingTasks/TaskList.php

@@ -200,7 +200,7 @@ class TaskList {
 				__( 'Task is not a subclass of `Task`', 'woocommerce-admin' )
 			);
 		}
-		if ( array_search( $task, $this->tasks ) ) {
+		if ( array_search( $task, $this->tasks, true ) ) {
 			return;
 		}
 

plugins/woocommerce-admin/webpack.config.js

@@ -91,7 +91,7 @@ const webpackConfig = {
 					// Exclude node_modules/ but not node_modules/debug* and node_modules/explat-client-react-helpers
 					// explat-client-react-helpers module contains optional chaining operators which need to be processed via babel loader for webpack 4.
 					// see webpack issue for details: https://github.com/webpack/webpack/issues/10227#issue-547480527
-					/node_modules(\/|\\)(?!(debug|@automattic\/explat-client-react-helpers))/,
+					/node_modules(\/|\\)\.pnpm(\/|\\)(?!(debug|\@automattic\+explat-client-react-helpers))/,
 				],
 				use: {
 					loader: 'babel-loader',

plugins/woocommerce-admin/woocommerce-admin.php

@@ -126,8 +126,8 @@ if ( ! woocommerce_admin_check_build_files() ) {
 				/* Translators: %1$s, %2$s, and %3$s are all build commands to be run in order.  */
 				esc_html__( 'You have installed a development version of WooCommerce Admin which requires files to be built. From the plugin directory, run %1$s and %2$s to install dependencies, then %3$s to build the files.', 'woocommerce-admin' ),
 				'<code>composer install</code>',
-				'<code>npm install</code>',
-				'<code>npm run build</code>'
+				'<code>pnpm install</code>',
+				'<code>pnpm run build</code>'
 			);
 			printf(
 				/* translators: 1: URL of GitHub Repository build page */