[v13] Use pnpm for package management

.changeset/README.md

@@ -2,7 +2,7 @@
 
 Hello and welcome! To manage our change log and releases, we use [Changesets](https://github.com/changesets/changesets) to [version](https://semver.org/) and publish code.
 
-To add an entry to the change log for your pull request, from your feature branch run `yarn changeset` in your terminal. Use the arrow, spacebar, and return keys to answer the following Changesets CLI questions:
+To add an entry to the change log for your pull request, from your feature branch run `pnpm changeset` in your terminal. Use the arrow, spacebar, and return keys to answer the following Changesets CLI questions:
 
 `🦋 Which packages would you like to include?`
 

.changeset/flat-cougars-look.md

@@ -0,0 +1,10 @@
+---
+'polaris-for-vscode': major
+'@shopify/polaris-icons': major
+'@shopify/polaris-migrator': major
+'@shopify/polaris': major
+'polaris.shopify.com': major
+'@shopify/stylelint-polaris': major
+---
+
+[Internal] Migrate repo from yarn to pnpm. No action required.

.changeset/wise-vans-notice.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-icons': major
+---
+
+`react` is now a required peerDependency (even when importing non-React SVG assets). [More info](https://github.com/Shopify/polaris/pull/11825#pullrequestreview-1974881032)

.eslintrc.js

@@ -1,6 +1,9 @@
+const fs = require('fs');
 const path = require('path');
+const yaml = require('js-yaml');
 
-const packages = require('./package.json').workspaces.packages;
+const pnpmWorkspace = path.join(__dirname, './pnpm-workspace.yaml');
+const {packages} = yaml.load(fs.readFileSync(pnpmWorkspace, 'utf8'));
 
 module.exports = {
   root: true,

.github/CONTRIBUTING.md

@@ -85,14 +85,14 @@ We’ll review your pull request and either merge it, request changes to it, or
 **Before submitting a pull request**, please:
 
 1. Fork the repository and create your branch from `main`
-1. Run `yarn` in the repository root
+1. Run `pnpm` in the repository root
 1. If you’ve fixed a bug or added code, make sure to add tests
-1. Ensure the test suite passes with `yarn test` (protip: `yarn test:watch TestName` is helpful in development)
-1. Format your code with `yarn format`
-1. Make sure your code lints with `yarn lint`
-1. Run the TypeScript compiler with `yarn type-check`
-1. [Tophat 🎩](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) your changes locally in Storybook with `yarn dev`
-1. Create a changeset by running `yarn changeset`. [More info](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#adding-a-changeset).
+1. Ensure the test suite passes with `pnpm test` (protip: `pnpm test:watch TestName` is helpful in development)
+1. Format your code with `pnpm format`
+1. Make sure your code lints with `pnpm lint`
+1. Run the TypeScript compiler with `pnpm type-check`
+1. [Tophat 🎩](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) your changes locally in Storybook with `pnpm dev`
+1. Create a changeset by running `pnpm changeset`. [More info](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#adding-a-changeset).
 1. If you haven’t already, [sign a CLA](https://cla.shopify.com/)
 
 ### Changelog
@@ -109,14 +109,14 @@ A changeset describes changes made in a branch or commit. It holds three bits of
 
 Add a changeset if you have made any changes that will require a package version bump and release:
 
-1. Run `yarn changeset`.
+1. Run `pnpm changeset`.
 2. Select the packages you want to include using ↑ and ↓ to navigate to packages, and space to select a package. Hit enter when all desired packages are selected.
 3. Select a [bump type](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#semantic-versioning) for each selected package.
 4. Provide a message to be written into the changelog on the next release.
 
 #### Writing a changelog message
 
-Keep the following in mind when authoring your changelog entry (final prompt after running `yarn changeset`):
+Keep the following in mind when authoring your changelog entry (final prompt after running `pnpm changeset`):
 
 - Use a positive, conversational tone (for example, use “support” over “allow” and other authoritative verbs)
 - Avoid redundancy when possible (try to phrase a bug fix entry without the word “bug”)
@@ -137,7 +137,7 @@ Each contributor is required to [sign a CLA](https://cla.shopify.com/). This pro
 
 ### Contribution prerequisites
 
-- You have Node installed at v20.11.1+ and Yarn at v1.22.18+
+- You have Node installed at v20.11.1+ and Pnpm at v8+
 
 ### Best practices
 
@@ -153,8 +153,8 @@ See the [README.md file](https://github.com/Shopify/polaris/blob/main/README.md#
 
 We recommend running tests as well as trying your build of a package in a real project, to make sure you don’t introduce any regressions as you work on your change.
 
-- `yarn test` will run tests for all packages
-- `yarn turbo run test --filter="[HEAD^1]"` will test any package that has changed in the last commit
+- `pnpm test` will run tests for all packages
+- `pnpm turbo run test --filter="[HEAD^1]"` will test any package that has changed in the last commit
 
 You can test your changes in another project locally by creating a [snapshot release](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#snapshot-release).
 
@@ -163,16 +163,16 @@ On your feature branch PR, ensure you have a [changeset](https://github.com/Shop
 Once the snapshot is ready, there will be a new comment in your feature PR with the newly released versions. In your external project, add the snapshot package or packages. An example snapshot package should have the following format:
 
 ```sh
-yarn add @shopify/polaris@0.0.0-snapshot-release-20220525184558
+pnpm add @shopify/polaris@0.0.0-snapshot-release-20220525184558
 ```
 
 Run the project as usual to tophat local changes. If you need to make updates, push new package changes to your feature PR and create a new snapshot release.
 
 ### Code style
 
-We use an automatic code formatter called [Prettier](https://prettier.io/). Run `yarn format` after making any changes to the code.
+We use an automatic code formatter called [Prettier](https://prettier.io/). Run `pnpm format` after making any changes to the code.
 
-Linting will catch common issues that may exist in your code. You can check the status of your code styling by running `yarn lint`.
+Linting will catch common issues that may exist in your code. You can check the status of your code styling by running `pnpm lint`.
 
 Our code editor of choice is [VS Code](https://code.visualstudio.com/) which has [integrations with Prettier](https://github.com/prettier/prettier-vscode) and our linting tools which make this automatic. If you choose to use VS Code, these integrations will be listed as recommended extensions (or search for `@recommended`) in the extensions panel.
 

.github/workflows/changelog.yml

@@ -21,6 +21,9 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
       - name: Setup Node from .nvmrc
         uses: actions/setup-node@v4
         with:

.github/workflows/ci-a11y-vrt.yml

@@ -34,11 +34,14 @@ jobs:
           sudo rm -rf "/usr/local/share/boost"
           sudo rm -rf "$AGENT_TOOLSDIRECTORY"
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
       - name: Setup Node from .nvmrc
         uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: yarn
+          cache: pnpm
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -52,13 +55,13 @@ jobs:
             ${{ runner.os }}-accessibility-test-v2-
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Build packages
-        run: yarn build --filter=@shopify/polaris
+        run: pnpm build --filter=@shopify/polaris
 
       - name: Build Storybook
-        run: yarn workspace @shopify/polaris run storybook:build --quiet
+        run: pnpm --filter=@shopify/polaris run storybook:build --quiet
 
       - name: Run accessibility test
         run: node ./polaris-react/scripts/accessibility-check.js
@@ -74,11 +77,14 @@ jobs:
         with:
           fetch-depth: 0 # Chromatic git history to track changes
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
       - name: Setup Node from .nvmrc
         uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: yarn
+          cache: pnpm
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -92,13 +98,13 @@ jobs:
             ${{ runner.os }}-visual-regression-test-v2-
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Build packages
-        run: yarn build --filter=@shopify/polaris
+        run: pnpm build --filter=@shopify/polaris
 
       - name: Build Storybook
-        run: yarn workspace @shopify/polaris run storybook:build --quiet
+        run: pnpm --filter=@shopify/polaris run storybook:build --quiet
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
           STORYBOOK_GITHUB_REPO_URL: ${{ github.server_url }}/${{ github.repository }}

.github/workflows/ci-lint.yml

@@ -26,11 +26,14 @@ jobs:
           sudo rm -rf "/usr/local/share/boost"
           sudo rm -rf "$AGENT_TOOLSDIRECTORY"
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
       - name: Setup Node from .nvmrc
         uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: yarn
+          cache: pnpm
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -45,13 +48,13 @@ jobs:
             ${{ runner.os }}-lint-v3-
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Build packages
-        run: yarn build
+        run: pnpm build
 
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
 
       - name: Type check
-        run: yarn type-check
+        run: pnpm type-check

.github/workflows/ci-test.yml

@@ -34,12 +34,15 @@ jobs:
           sudo rm -rf "/usr/local/share/boost"
           sudo rm -rf "$AGENT_TOOLSDIRECTORY"
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
       - name: Setup Node with v${{ matrix.node-version }}
         uses: actions/setup-node@v4
         id: setup_node
         with:
           node-version: ${{ matrix.node-version }}
-          cache: yarn
+          cache: pnpm
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -54,10 +57,10 @@ jobs:
             ${{ runner.os }}-node${{ steps.setup_node.outputs.node-version }}-test-v4-
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Build packages
-        run: yarn build
+        run: pnpm build
 
       - name: Test
-        run: yarn test
+        run: pnpm test

.github/workflows/publish-polaris-for-vscode.yml

@@ -25,19 +25,22 @@ jobs:
           sudo rm -rf "/usr/local/share/boost"
           sudo rm -rf "$AGENT_TOOLSDIRECTORY"
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
       - name: Setup Node from .nvmrc
         uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: yarn
+          cache: pnpm
 
       - name: Install dependencies
-        run: yarn
+        run: pnpm
 
       - name: Build extension
-        run: yarn build --filter=polaris-for-vscode
+        run: pnpm build --filter=polaris-for-vscode
 
       - name: Publish extension in the marketplace
-        run: yarn workspace polaris-for-vscode vsce publish
+        run: pnpm --filter=polaris-for-vscode vsce publish
         env:
           VSCE_PAT: ${{ secrets.VSCE_PAT }}

.github/workflows/release.yml

@@ -26,24 +26,27 @@ jobs:
           sudo rm -rf "/usr/local/share/boost"
           sudo rm -rf "$AGENT_TOOLSDIRECTORY"
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
       - name: Setup Node from .nvmrc
         uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: 'yarn'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Build
-        run: yarn build:release
+        run: pnpm build:release
 
       - name: Create release Pull Request or publish to NPM
         id: changesets
         uses: changesets/action@v1
         with:
-          version: yarn version-packages
-          publish: yarn release-packages
+          version: pnpm version-packages
+          publish: pnpm release-packages
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.SHOPIFY_GH_ACCESS_TOKEN }}

.github/workflows/snapit.yml

@@ -15,10 +15,13 @@ jobs:
       - name: Checkout default branch
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
       - name: Create snapshot
         uses: Shopify/snapit@main
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         with:
-          build_script: yarn build:release
+          build_script: pnpm build:release

README.md

@@ -37,7 +37,7 @@ polaris/
 ### Install dependencies and build workspaces
 
 ```sh
-yarn && yarn build
+pnpm install && pnpm build
 ```
 
 ### Run a command
@@ -48,21 +48,21 @@ Run commands from a selected workspace using [`turbo run <command> --filter=<wor
 
 | Command                                           | Runs                                 |
 | ------------------------------------------------- | ------------------------------------ |
-| `yarn turbo run dev --filter=@shopify/polaris`    | Open the react component storybook   |
-| `yarn turbo run dev --filter=polaris.shopify.com` | Open polaris.shopify.com NextJS site |
+| `pnpm turbo run dev --filter=@shopify/polaris`    | Open the react component storybook   |
+| `pnpm turbo run dev --filter=polaris.shopify.com` | Open polaris.shopify.com NextJS site |
 
 **All workspaces**
 
 Run commands across all workspaces. This uses [`turbo run <command>`](https://turborepo.org/docs/reference/command-line-reference#turbo-run-task).
 
 | Command           | Runs                                                                                                                  |
 | ----------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `yarn changeset`  | Adds a new [changelog entry](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#adding-a-changeset) |
-| `yarn lint`       | Lints all workspaces                                                                                                  |
-| `yarn test`       | Tests all workspaces                                                                                                  |
-| `yarn type-check` | Build types and check for type errors                                                                                 |
-| `yarn clean`      | Remove generated files                                                                                                |
-| `yarn format`     | Format files with prettier                                                                                            |
+| `pnpm changeset`  | Adds a new [changelog entry](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#adding-a-changeset) |
+| `pnpm lint`       | Lints all workspaces                                                                                                  |
+| `pnpm test`       | Tests all workspaces                                                                                                  |
+| `pnpm type-check` | Build types and check for type errors                                                                                 |
+| `pnpm clean`      | Remove generated files                                                                                                |
+| `pnpm format`     | Format files with prettier                                                                                            |
 
 ## Contribute to this repo
 

dev.yml

@@ -1,12 +1,13 @@
 name: polaris
 up:
   - node:
-      yarn: v1.22.18
+      package_manager: pnpm@8.15.5
+      pnpm: 8.15.5
       version: v20.11.1 # to be kept in sync with .nvmrc
   - custom:
       name: Build monorepo
-      met?: yarn build --output-logs=none
+      met?: pnpm build --output-logs=none
       meet: 'true'
 
 commands:
-  server: yarn dev
+  server: pnpm dev

documentation/Component READMEs.md

@@ -94,7 +94,7 @@ This example is for all platforms (must contain React code).
 
 ## Troubleshooting
 
-When running `yarn dev` or CI tests you may run into errors.
+When running `pnpm dev` or CI tests you may run into errors.
 Here are some common fixes.
 
 ### No examples found