chore: switch to pnpm (#371)

* chore: switch to pnpm * chore: version * fix: lockfile
Kong · Aug 12, 2024 · 0af1f9e · 0af1f9e
1 parent 14d457e
commit 0af1f9e
Show file tree

Hide file tree

Showing 16 changed files with 7,963 additions and 8,692 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -16,9 +16,8 @@
 # Existing component list
 /src/component-list.ts @adamdehaven @jillztom
 
-# ================================================
-# Renovate Bot approvals
-# Allow Kongponents BOT to approve dependency updates
+# Renovate approvals
+# Allow Kongponents BOT to approve renovate updates
 # These rules MUST remain at the bottom as the last entry
-package.json @kongponents-bot @Kong/team-core-ui @adamdehaven @jillztom
-yarn.lock @kongponents-bot @Kong/team-core-ui @adamdehaven @jillztom
+package.json @kongponents-bot @adamdehaven @jillztom @portikM
+pnpm-lock.yaml @kongponents-bot @Kong/team-core-ui
diff --git a/.github/actions/setup-pnpm-with-dependencies/action.yaml b/.github/actions/setup-pnpm-with-dependencies/action.yaml
@@ -0,0 +1,60 @@
+name: Setup PNPM with Dependencies
+description: Reusable composition of setup-node, cache, and pnpm install actions
+inputs:
+  nodejs-version:
+    description: 'Version of NodeJS to use (ex: 20.16.0)'
+    default: '20.16.0'
+  force-install:
+    description: When 'true', pnpm install will be executed regardless of a cache hit
+    required: false
+    default: 'false'
+  frozen-lockfile:
+    description: When false, pnpm install will use the --no-frozen-lockfile flag
+    required: false
+    default: 'true'
+outputs:
+  cache-hit:
+    description: Whether or not there was a cache hit
+    value: ${{ steps.dependency-cache.outputs.cache-hit }}
+runs:
+  using: composite
+  steps:
+
+    - name: get Node version
+      id: node-version
+      shell: bash
+      run: |
+        voltaNodeVersion=$(cat package.json|jq -r ".volta.node")
+        if [[ $voltaNodeVersion == null ]]; then
+          voltaNodeVersion="${{ inputs.nodejs-version }}"
+        fi
+        packageManagerVersion=$(cat package.json|jq -r ".packageManager")
+        if [[ $packageManagerVersion == null ]]; then
+          packageManagerVersion="9.7.0"
+        fi
+
+        echo "node-version=${voltaNodeVersion}">> $GITHUB_OUTPUT
+        echo "package-manager-version=${packageManagerVersion}">> $GITHUB_OUTPUT
+
+    - name: Setup Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ steps.node-version.outputs.node-version }}
+
+    - name: Install PNPM
+      shell: bash
+      run: |
+        npm i -g ${{ steps.node-version.outputs.package-manager-version }}
+        pnpm --version
+
+    - name: Dependency Cache
+      id: dependency-cache
+      uses: actions/cache@v4
+      with:
+        path: '**/node_modules'
+        key: ${{ steps.node-version.outputs.package-manager-version }}-${{ steps.node-version.outputs.node-version }}-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+    - name: Install Dependencies
+      if: ${{ inputs.force-install == 'true' || steps.dependency-cache.outputs.cache-hit != 'true' }}
+      shell: bash
+      run: pnpm i${{ inputs.frozen-lockfile == 'false' && ' --no-frozen-lockfile' || '' }}
diff --git a/.github/workflows/github-pages.yaml b/.github/workflows/github-pages.yaml
@@ -38,14 +38,16 @@ jobs:
         with:
           node-version-file: '.nvmrc'
 
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+      - name: Setup PNPM with Dependencies
+        uses: ./.github/actions/setup-pnpm-with-dependencies/
+        with:
+          force-install: true
 
       - name: Build Sandbox
         env:
           # Tell the script to use the sandbox directory
           USE_SANDBOX: true
-        run: yarn build:sandbox
+        run: pnpm build:sandbox
 
       - name: Setup Pages
         uses: actions/configure-pages@v5

diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
@@ -40,24 +40,26 @@ jobs:
           with:
             node-version-file: '.nvmrc'
 
-        - name: Install dependencies
-          run: yarn install --frozen-lockfile
+        - name: Setup PNPM with Dependencies
+          uses: ./.github/actions/setup-pnpm-with-dependencies/
+          with:
+            force-install: true
 
         - name: Build
           # Since we lint in the Tests job, we can just build the components here
-          run: yarn build:components
+          run: pnpm build:components
 
         # Since everything was successful, update the src/component-list.ts file to compare
         # against in future runs. Since this file is modified here in the CI, it is written back
         # to the repository via the `/package.json` file `@semantic-release/git` => `assets` config
         - name: Update component-list.ts
-          run: yarn update-component-list
+          run: pnpm update-component-list
 
         # Since everything was successful, update the Vitest snapshot files to compare
         # against for future runs. Since the snapshot files are modified here in the CI, they are written back
         # to the repository via the `/package.json` file `@semantic-release/git` => `assets` config
         - name: Update test snapshots
-          run: yarn test -u
+          run: pnpm test -u
 
         - name: Semantic Release
           uses: cycjimmy/semantic-release-action@v4

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -42,14 +42,16 @@ jobs:
         with:
           node-version-file: '.nvmrc'
 
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+      - name: Setup PNPM with Dependencies
+        uses: ./.github/actions/setup-pnpm-with-dependencies/
+        with:
+          force-install: true
 
       - name: Lint and Build
-        run: yarn build
+        run: pnpm build
 
       - name: Unit and Component Tests
-        run: yarn test
+        run: pnpm test
 
       - name: Publish package preview
         id: package-preview
@@ -67,7 +69,7 @@ jobs:
 
           echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
 
-          yarn version --prerelease --preid ${preid} --allow-branch ${{ github.head_ref }} --no-git-tag-version --yes --amend
+          pnpm version prerelease --preid ${preid} --no-git-tag-version --yes --amend
 
           package_version=$(jq -r ".version" package.json)
           package=@kong/icons@"${package_version}"
@@ -87,7 +89,7 @@ jobs:
             exit -1
           fi
 
-          npm_instructions="yarn add @$(echo ${pkg}|cut -d'@' -f2)@${tag}"
+          npm_instructions="pnpm add @$(echo ${pkg}|cut -d'@' -f2)@${tag}"
 
           echo "npm_instructions<<EOF" >> $GITHUB_OUTPUT
           echo -e "$npm_instructions" >> $GITHUB_OUTPUT

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,5 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+auto-install-peers=true
+side-effects-cache=false # Ensure the postinstall script of the lefthook package is executed and hooks are installed
+manage-package-manager-versions=true
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ Kong's open-source, Vue icon component library, partially sourced from [Google's
 Install the `@kong/icons` package in your host project.
 
 ```sh
-yarn add @kong/icons
+pnpm add @kong/icons
 ```
 
 ### Import
@@ -114,7 +114,7 @@ The HTML tag to use in place of the default wrapper `<span>` tag.
 To get started, install the package dependencies
 
 ```sh
-yarn install --frozen-lockfile
+pnpm install --frozen-lockfile
 ```
 
 The exported Vue components are generated from SVG source files located in the `/svg/` child directories.
@@ -141,30 +141,30 @@ To add a new SVG:
    1. Icons **must** follow the viewbox and color guidelines to match the standard of existing icons. New icons can be requested on Slack in `#ask-kong-design-system`
 2. Ensure the filename is lowercase and kebab-case
 3. Place the SVG file into the corresponding `/svg/*` subdirectory.
-4. Locally, run `yarn generate` to create the corresponding Vue component
-5. Locally, run `yarn test -u` to run the tests and update the test snapshots
+4. Locally, run `pnpm generate` to create the corresponding Vue component
+5. Locally, run `pnpm test -u` to run the tests and update the test snapshots
 6. [Commit your changes](#committing-changes) and push up a Pull Request for review
 
 ### Development Sandbox
 
 This repository includes a Vue sandbox app (see the `/sandbox` directory) to allow you to experiment with icons.
 
-The `yarn dev` command will automatically call the `generate` command to generate the icon components.
+The `pnpm dev` command will automatically call the `generate` command to generate the icon components.
 
 To compile the icon components and start the sandbox:
 
 ```sh
 # Generate the Icon Components and start the sandbox
-yarn dev
+pnpm dev
 ```
 
 #### Build and Preview the Development Sandbox
 
 To run a local preview of the Sandbox site that will be deployed to GitHub Pages:
 
 ```sh
-yarn build:sandbox
-yarn preview:sandbox
+pnpm build:sandbox
+pnpm preview:sandbox
 ```
 
 ### Lint and fix
@@ -173,10 +173,10 @@ Lint package files, and optionally auto-fix detected issues.
 
 ```sh
 # Lint only
-yarn lint
+pnpm lint
 
 # Lint and fix
-yarn lint:fix
+pnpm lint:fix
 ```
 
 ### Testing
@@ -187,23 +187,23 @@ The Vitest settings are pre-configured to regenerate the icon components before
 
 ```sh
 # Run tests
-yarn test
+pnpm test
 
 # Run tests in the Vitest UI
-yarn test:open
+pnpm test:open
 
 # Update test snapshots
-yarn test -u
+pnpm test -u
 ```
 
-When SVG files are added or removed, this will cause the test(s) that compare snapshots to fail. If the snapshot change is expected, run `yarn test -u` to update the test snapshots accordingly, then commit those changes to your branch.
+When SVG files are added or removed, this will cause the test(s) that compare snapshots to fail. If the snapshot change is expected, run `pnpm test -u` to update the test snapshots accordingly, then commit those changes to your branch.
 
 ### Build for production
 
 Process the `/svg/` directory, generate the icon components and associated files, and build for production.
 
 ```sh
-yarn build
+pnpm build
 ```
 
 ### Committing Changes
@@ -217,7 +217,7 @@ This repo uses [Conventional Commits](https://www.conventionalcommits.org/en/v1.
 It is **highly recommended** to use the following command in order to create your commits:
 
 ```sh
-yarn commit
+pnpm commit
 ```
 
 This will trigger the Commitizen interactive prompt for building your commit message.

diff --git a/lefthook.yaml b/lefthook.yaml
@@ -8,17 +8,17 @@ pre-push:
       skip:
         - merge
         - rebase
-      run: yarn stylelint
+      run: pnpm stylelint
     eslint:
       skip:
         - merge
         - rebase
-      run: yarn lint
+      run: pnpm lint
     typecheck:
       skip:
         - merge
         - rebase
-      run: yarn typecheck
+      run: pnpm typecheck
 
 commit-msg:
   parallel: true
@@ -27,4 +27,4 @@ commit-msg:
       skip:
         - merge
         - rebase
-      run: yarn commitlint --edit "$1"
+      run: pnpm commitlint --edit "$1"
diff --git a/package.json b/package.json
@@ -24,14 +24,14 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "yarn generate && USE_SANDBOX=true vite",
-    "build": "yarn delete:generated && yarn stylelint && yarn lint && yarn build:components",
-    "build:components": "yarn generate && yarn typecheck && vite build && rimraf ./dist/style.css && vue-tsc -p './tsconfig.build.json' --emitDeclarationOnly && tsc-alias -p './tsconfig.build.json'",
-    "build:visualize": "yarn generate && cross-env BUILD_VISUALIZER=true vite build -m production",
-    "generate": "yarn delete:generated && npx --yes tsx --tsconfig './scripts/tsconfig.json' './scripts/generate.ts' && yarn fix:generated",
-    "update-component-list": "npx --yes tsx --tsconfig './scripts/tsconfig.json' './scripts/component-list.ts' && yarn fix:generated",
+    "dev": "pnpm generate && USE_SANDBOX=true vite",
+    "build": "pnpm delete:generated && pnpm stylelint && pnpm lint && pnpm build:components",
+    "build:components": "pnpm generate && pnpm typecheck && vite build && rimraf ./dist/style.css && vue-tsc -p './tsconfig.build.json' --emitDeclarationOnly && tsc-alias -p './tsconfig.build.json'",
+    "build:visualize": "pnpm generate && cross-env BUILD_VISUALIZER=true vite build -m production",
+    "generate": "pnpm delete:generated && npx --yes tsx --tsconfig './scripts/tsconfig.json' './scripts/generate.ts' && pnpm fix:generated",
+    "update-component-list": "npx --yes tsx --tsconfig './scripts/tsconfig.json' './scripts/component-list.ts' && pnpm fix:generated",
     "delete:generated": "rimraf './src/components' && rimraf './dist'",
-    "build:sandbox": "yarn generate && yarn typecheck && cross-env USE_SANDBOX=true vite build",
+    "build:sandbox": "pnpm generate && pnpm typecheck && cross-env USE_SANDBOX=true vite build",
     "preview:sandbox": "cross-env USE_SANDBOX=true vite preview",
     "test": "cross-env FORCE_COLOR=1 vitest run",
     "test:open": "vitest --ui",
@@ -42,7 +42,7 @@
     "stylelint": "stylelint './src/**/*.{css,scss,vue}'",
     "stylelint:fix": "stylelint './src/**/*.{css,scss,vue}' --fix",
     "stylelint:fix:generated": "stylelint './src/components/**/*.vue' --fix",
-    "fix:generated": "yarn lint:fix:generated && yarn stylelint:fix:generated",
+    "fix:generated": "pnpm lint:fix:generated && pnpm stylelint:fix:generated",
     "semantic-release": "semantic-release",
     "commit": "cz"
   },
@@ -145,12 +145,13 @@
       "@semantic-release/github"
     ]
   },
+  "packageManager": "[email protected]",
   "engines": {
-    "node": ">=18.17.0"
+    "node": ">=18.17.0",
+    "pnpm": ">=9.7.0"
   },
   "volta": {
-    "node": "20.16.0",
-    "yarn": "1.22.22"
+    "node": "20.16.0"
   },
   "config": {
     "commitizen": {