chore: replace yarn with pnpm (#4405)

* chore: replace yarn with pnpm * chore(deps): replace workspace dep versions * chore(deps): add design-tokens for SB * chore(deps): add highlight.js * chore: get storybook running * chore: set auto-install-peers to true * chore: exclude multi-entry package.jsons as workspace * chore: update tool-versions * ci: remove yarn-integrity check * ci: update GHA setup action * chore: stop KAIO clean deleting node_modules * chore: update test-runner config * ci: update setup action * ci: use pnpm in place of npx to install playwright * docs: abstract KAIO installation * add testing changeset for canary * empty changeset because no packages are technically being released * ci: upgrade actions/checkout to v4 * chore(deps): install playwright --------- Co-authored-by: Geoffrey Chong <[email protected]>
cultureamp · Feb 1, 2024 · 50d77de · 50d77de
1 parent f84bc4c
commit 50d77de
Show file tree

Hide file tree

Showing 155 changed files with 20,919 additions and 18,947 deletions.
diff --git a/.buildkite/scripts/build-storybook.sh b/.buildkite/scripts/build-storybook.sh
@@ -4,8 +4,8 @@ set -e
 # shellcheck source=setup-registry.sh
 . ".buildkite/scripts/helpers/setup-registry.sh"
 
-yarn install --frozen-lockfile
-yarn workspace @kaizen/design-tokens prepublishOnly
-yarn workspace @kaizen/tailwind prepublishOnly
-yarn storybook:build
+pnpm install --frozen-lockfile
+pnpm -F @kaizen/design-tokens prepublishOnly
+pnpm -F @kaizen/tailwind prepublishOnly
+pnpm storybook:build
 tar -czf ./storybook.tar.gz ./storybook/public
diff --git a/.buildkite/scripts/helpers/setup-registry.sh b/.buildkite/scripts/helpers/setup-registry.sh
@@ -3,7 +3,7 @@ set -e
 
 echo "Authenticating against the GitHub package registry"
 # NOTE: we are adding a literal ${GITHUB_REGISTRY_TOKEN} to the npm config here;
-#       npm/yarn will interpret it and sub in the environment variable for us,
+#       npm/pnpm will interpret it and sub in the environment variable for us,
 #       meaning we don't have to store the secret on disk.
 npm config set "//npm.pkg.github.com/:_authToken" '${GITHUB_REGISTRY_TOKEN}'
 

diff --git a/.changeset/config.json b/.changeset/config.json
@@ -5,7 +5,7 @@
     { "repo": "cultureamp/kaizen-design-system" }
   ],
   "access": "public",
-  "baseBranch": "main",
+  "baseBranch": "origin/main",
   "updateInternalDependencies": "patch",
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true

diff --git a/.changeset/eleven-parrots-pay.md b/.changeset/eleven-parrots-pay.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -7,30 +7,38 @@ description: Sets this repository up to allow efficient run of various github ac
 runs:
   using: composite
   steps:
-    # setup node
-    - uses: actions/setup-node@v3
+    - name: Install Node.js
+      uses: actions/setup-node@v3
       with:
         node-version-file: .nvmrc
-        cache: "yarn"
         registry-url: https://npm.pkg.github.com/
 
-    # yarn install with use of cache
-    # this is bit duplicate to cache: "yarn" above, but from testing the best performance is when both are used.
-    - name: Cache node modules
-      id: cache-node-modules
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      with:
+        version: 8
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - name: Setup pnpm cache
       uses: actions/cache@v3
-      env:
-        cache-name: cache-node-modules
       with:
-        path: ./node_modules
-        key: kaizen-${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('./yarn.lock') }}
-    - name: yarn install
+        path: ${{ env.STORE_PATH }}
+        key: kaizen-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
       shell: bash
       env:
         GITHUB_TOKEN: ${{ github.token }}
       run: |
         npm config set "//npm.pkg.github.com/:_authToken" "$GITHUB_TOKEN"
-        yarn install --frozen-lockfile
+        pnpm install --frozen-lockfile
 
-    # setup turborepo cache
-    - uses: dtinth/setup-github-actions-caching-for-turbo@v1
+    - name: Setup turborepo cache
+      uses: dtinth/setup-github-actions-caching-for-turbo@v1
diff --git a/.github/workflows/canary-release.yml b/.github/workflows/canary-release.yml
@@ -16,7 +16,7 @@ jobs:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       LABEL: ${{ github.event.inputs.label }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Set npm token
         run: |
@@ -25,10 +25,10 @@ jobs:
         id: changesets
         run: |
           echo "🥚 Building canary-$LABEL"
-          yarn build
+          pnpm build
           echo "🐣 Releasing canary-$LABEL"
-          yarn changeset version --snapshot "canary-$LABEL"
-          yarn changeset publish --tag "canary-$LABEL"
+          pnpm changeset version --snapshot "canary-$LABEL"
+          pnpm changeset publish --tag "canary-$LABEL"
       - name: Push tags
         run: |
           git push --follow-tags
diff --git a/.github/workflows/changeset.yaml b/.github/workflows/changeset.yaml
@@ -16,7 +16,7 @@ jobs:
       GITHUB_TOKEN: ${{ github.token }}
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Create Release Pull Request or Publish to npm
         run: |
@@ -26,15 +26,15 @@ jobs:
         with:
           title: "Changeset: Version packages"
           commit: "version packages"
-          version: yarn ci:version
-          publish: yarn ci:publish
+          version: pnpm ci:version
+          publish: pnpm ci:publish
   # deployment:
   #   runs-on: ubuntu-latest
   #   needs: version
   #   permissions:
   #     deployments: write
   #   steps:
-  #     - uses: actions/checkout@v3
+  #     - uses: actions/checkout@v4
   #     - uses: ./.github/actions/setup
   #     - uses: chrnorm/deployment-action@v2
   #       name: Create GitHub deployment

diff --git a/.github/workflows/check-files.yml b/.github/workflows/check-files.yml
@@ -23,24 +23,16 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: ./.github/actions/setup
-      - run: yarn changeset status --since=origin/main
-
-  yarn-integrity:
-    if: github.head_ref != 'changeset-release/main'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup
-      - run: yarn check --integrity
+      - run: pnpm changeset status --since=origin/main
 
   verify-build:
     if: github.head_ref != 'changeset-release/main'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: yarn build && yarn test:treeshake
+      - run: pnpm build && pnpm test:treeshake
diff --git a/.github/workflows/chromatic-main.yaml b/.github/workflows/chromatic-main.yaml
@@ -13,13 +13,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: ./.github/actions/setup
       - name: Build Storybook
-        run: |
-          yarn storybook:build --webpack-stats-json
+        run: pnpm storybook:build --webpack-stats-json
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         with:

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -23,42 +23,42 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: yarn compile
+      - run: pnpm compile
 
   eslint:
     if: github.head_ref != 'changeset-release/main'
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: yarn lint:ts && yarn lint:md
+      - run: pnpm lint:ts && pnpm lint:md
 
   prettier:
     if: github.head_ref != 'changeset-release/main'
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: yarn lint:format
+      - run: pnpm lint:format
 
   stylelint:
     if: github.head_ref != 'changeset-release/main'
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: yarn lint:styles
+      - run: pnpm lint:styles
 
   jest:
     if: github.head_ref != 'changeset-release/main'
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: yarn test:ci
+      - run: pnpm test:ci
diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
@@ -14,7 +14,7 @@ jobs:
     permissions:
       deployments: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: chrnorm/deployment-action@v2
         name: Create GitHub deployment
         id: deployment

diff --git a/.github/workflows/test-stories.yaml b/.github/workflows/test-stories.yaml
@@ -31,9 +31,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: yarn storybook:build --webpack-stats-json
+      - run: pnpm storybook:build --webpack-stats-json
       - name: Upload Storybook build as artifact
         uses: actions/upload-artifact@v3
         with:
@@ -47,47 +47,47 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Install Playwright
-        run: npx playwright install --with-deps
+        run: pnpm dlx playwright install --with-deps
       - uses: ./.github/actions/run-storybook
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (1/3)
-        run: yarn test:storybook --shard 1/3
+        run: pnpm test:storybook --shard 1/3
 
   storybook-tests-2:
     name: "test-storybook"
     needs: build-storybook
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Install Playwright
-        run: npx playwright install --with-deps
+        run: pnpm dlx playwright install --with-deps
       - uses: ./.github/actions/run-storybook
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (2/3)
-        run: yarn test:storybook --shard 2/3
+        run: pnpm test:storybook --shard 2/3
 
   storybook-tests-3:
     name: "test-storybook"
     needs: build-storybook
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Install Playwright
-        run: npx playwright install --with-deps
+        run: pnpm dlx playwright install --with-deps
       - uses: ./.github/actions/run-storybook
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (3/3)
-        run: yarn test:storybook --shard 3/3
+        run: pnpm test:storybook --shard 3/3
 
   chromatic:
     needs: build-storybook
@@ -96,7 +96,7 @@ jobs:
       storybookUrl: ${{ steps.publishChromatic.outputs.storybookUrl }}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Download Storybook build artifact
@@ -126,7 +126,7 @@ jobs:
     env:
       COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: ${{ env.COMMIT_SHA }}
       - name: Get commit message

diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,4 @@
 unsafe-perm=true
 @cultureamp:registry=https://npm.pkg.github.com/
+
+auto-install-peers=true
diff --git a/.prettierignore b/.prettierignore
@@ -13,6 +13,7 @@
 !*.css
 
 # Explicitly ignore...
+pnpm-lock.yaml
 **/node_modules/
 /storybook/public/
 /packages/**/dist

diff --git a/.tool-versions b/.tool-versions
@@ -1,2 +1,2 @@
 nodejs 18.16.0
-yarn 1.22.19
+pnpm 8.11.0
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -103,7 +103,7 @@ Kaizen utilises [Changesets](https://github.com/changesets/changesets) to outlin
 
 Creating a changeset is straight forward:
 
-1. Run `yarn changeset` (or `yarn commit`)
+1. Run `pnpm changeset`
 2. Select the packages you have made changes to with spacebar, followed by enter
 3. You will then be asked which packages should have a Major, Minor or Patch. So following [Semantic Versioning](#semantic-versioning), select the packages that apply and hit enter (you can also hit enter to skip)
 4. Add a short [description](#description).
@@ -140,9 +140,9 @@ This will run a build and publish a snapshot and its tag with a name that is con
 
 ## Using new package releases
 
-To use a newly released version of the Kaizen Component Library (or any other package) in a front-end codebase, run `yarn upgrade --latest <scoped package name>` (e.g. `yarn upgrade --latest @kaizen/components`).
+To use a newly released version of the Kaizen Component Library (or any other package) in a front-end codebase, run `pnpm update --latest <scoped package name>` (e.g. `pnpm update --latest @kaizen/components`).
 
-Remember to always check the CHANGELOG (e.g. [`/packages/component-library/CHANGELOG.md`](./packages/component-library/CHANGELOG.md) or the [releases page](https://github.com/cultureamp/kaizen-design-system/releases)) for any package you wish to upgrade, paying extra attention to any breaking changes which have been introduced since the last version used in your project.
+Remember to always check the CHANGELOG (e.g. [`/packages/components/CHANGELOG.md`](./packages/components/CHANGELOG.md) or the [releases page](https://github.com/cultureamp/kaizen-design-system/releases)) for any package you wish to upgrade, paying extra attention to any breaking changes which have been introduced since the last version used in your project.
 
 ## Contributing components
 
@@ -157,14 +157,14 @@ Refer to the [docs folder](docs) for code guidelines and patterns.
 To generate a new component and package, new component within an existing package, or a subcomponent,
 run the following command and follow the prompts:
 ```
-yarn plop
+pnpm plop
 ```
 
 ## Adding icons
 
 1. Find the new svg in our [figma file](https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=35882-93662&mode=design&t=X18YN2TWqlxEIFc3-0)
 2. Export the svg in kebab-case with `.icon` suffix (eg. `zoom-out.icon.svg`), and save it in `/packages/components/assets/svgs/icons`
-3. In the root of Kaizen, run `yarn update-icons`
+3. In the root of Kaizen, run `pnpm update-icons`
 
 This process will: