Skip to content

Commit

Permalink
feat: switch from yarn to pnpm (#2231)
Browse files Browse the repository at this point in the history
* feat(pnpm): switch from yarn to pnpm

* fix: lint

* fix: lockfile

* fix: remove invalid types

* fix: global-component types

* fix: package preview

* fix: lockfile
  • Loading branch information
adamdehaven committed Jun 15, 2024
1 parent 88490c9 commit 9f846b7
Show file tree
Hide file tree
Showing 15 changed files with 9,309 additions and 9,070 deletions.
2 changes: 1 addition & 1 deletion .github/CODEOWNERS
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,4 @@
# Allow Kongponents BOT to approve dependabot updates
# These rules MUST remain at the bottom as the last entry
package.json @kongponents-bot @Kong/team-core-ui @adamdehaven @jillztom @kaiarrowood
yarn.lock @kongponents-bot @Kong/team-core-ui @adamdehaven @jillztom @kaiarrowood
pnpm-lock.yaml @kongponents-bot @Kong/team-core-ui @adamdehaven @jillztom @kaiarrowood
60 changes: 60 additions & 0 deletions .github/actions/setup-pnpm-with-dependencies/action.yaml
Original file line number Diff line number Diff line change
@@ -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: 18.19.1)'
default: '18.19.1'
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
voltaPnpmVersion=$(cat package.json|jq -r ".volta.pnpm")
if [[ $voltaPnpmVersion == null ]]; then
voltaPnpmVersion="9.3.0"
fi
echo "node-version=${voltaNodeVersion}">> $GITHUB_OUTPUT
echo "pnpm-version=${voltaPnpmVersion}">> $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 pnpm@${{ steps.node-version.outputs.pnpm-version }}
pnpm --version
- name: Dependency Cache
id: dependency-cache
uses: actions/cache@v4
with:
path: '**/node_modules'
key: pnpm-${{ steps.node-version.outputs.pnpm-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' || '' }}
14 changes: 7 additions & 7 deletions .github/workflows/get-changed-files.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ on:
components-or-docs-or-cypress-files-changed:
description: Check if src or docs (`src` or `docs` directories) files have changed
value: ${{ jobs.get-changed-files.outputs.components-or-docs-or-cypress-files-changed }}
package-json-yarn-lock-files-changed:
description: Check if package.json or yarn.lock files changed
value: ${{ jobs.get-changed-files.outputs.package-json-yarn-lock-files-changed }}
package-json-pnpm-lock-files-changed:
description: Check if package.json or pnpm.lock files changed
value: ${{ jobs.get-changed-files.outputs.package-json-pnpm-lock-files-changed }}

jobs:
get-changed-files:
Expand All @@ -25,7 +25,7 @@ jobs:
component-files-changed: ${{ steps.component-files-changed.outputs.any_modified }}
docs-files-changed: ${{ steps.docs-files-changed.outputs.any_modified }}
components-or-docs-or-cypress-files-changed: ${{ steps.components-or-docs-or-cypress-files-changed.outputs.any_modified }}
package-json-yarn-lock-files-changed: ${{ steps.package-json-yarn-lock-files-changed.outputs.any_modified }}
package-json-pnpm-lock-files-changed: ${{ steps.package-json-pnpm-lock-files-changed.outputs.any_modified }}

steps:
- uses: actions/checkout@v4
Expand Down Expand Up @@ -58,11 +58,11 @@ jobs:
docs/**
cypress/**
- name: Check if package.json or yarn.lock files changed
- name: Check if package.json or pnpm.lock files changed
uses: tj-actions/changed-files@v43
id: package-json-yarn-lock-files-changed
id: package-json-pnpm-lock-files-changed
# Return 'true' for any directories listed here that changed
with:
files: |
package.json
yarn.lock
pnpm-lock.yaml
19 changes: 7 additions & 12 deletions .github/workflows/publish.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ jobs:
- run-tests
# Only run the publish action (including semantic-release) if files in the /src/ directory changed.
# Should only run if files in the `src/` directory were changed
if: needs.get-changed-files.outputs.component-files-changed == 'true' || needs.get-changed-files.outputs.package-json-yarn-lock-files-changed == 'true'
if: needs.get-changed-files.outputs.component-files-changed == 'true' || needs.get-changed-files.outputs.package-json-pnpm-lock-files-changed == 'true'
runs-on: ubuntu-latest
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN_PUBLIC_PUBLISH }}
Expand All @@ -40,7 +40,7 @@ jobs:
with:
token: ${{ secrets.KONGPONENTS_BOT_PAT }}

- name: setup git
- name: Setup git
run: |
git config --global user.name 'kongponents-bot'
git config --global user.email '[email protected]'
Expand All @@ -49,16 +49,11 @@ jobs:
# Reference the env variable NPM_TOKEN here, not the secret
run: echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc

- name: Use Node.js
uses: actions/setup-node@v4
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/

- name: Build
run: yarn build:kongponents
run: pnpm build:kongponents

- name: Semantic Release
uses: cycjimmy/semantic-release-action@v4
Expand All @@ -70,7 +65,7 @@ jobs:
name: No Component Tests needed
needs:
- get-changed-files
if: needs.get-changed-files.outputs.component-files-changed == 'false' && needs.get-changed-files.outputs.package-json-yarn-lock-files-changed == 'false'
if: needs.get-changed-files.outputs.component-files-changed == 'false' && needs.get-changed-files.outputs.package-json-pnpm-lock-files-changed == 'false'
runs-on: ubuntu-latest
steps:
- name: Skip component tests
Expand All @@ -80,7 +75,7 @@ jobs:
name: No Build and Publish needed
needs:
- get-changed-files
if: needs.get-changed-files.outputs.components-or-docs-or-cypress-files-changed == 'false' && needs.get-changed-files.outputs.package-json-yarn-lock-files-changed == 'false'
if: needs.get-changed-files.outputs.components-or-docs-or-cypress-files-changed == 'false' && needs.get-changed-files.outputs.package-json-pnpm-lock-files-changed == 'false'
runs-on: ubuntu-latest
steps:
- name: Skip new release
Expand Down
41 changes: 14 additions & 27 deletions .github/workflows/test.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -47,26 +47,26 @@ jobs:
with:
fetch-depth: 0

- name: Use Node.js
uses: actions/setup-node@v4
- name: Setup PNPM with Dependencies
uses: ./.github/actions/setup-pnpm-with-dependencies/
with:
node-version-file: '.nvmrc'

- name: Install dependencies
run: yarn install --frozen-lockfile
force-install: true

- name: Stylelint
run: yarn stylelint
run: pnpm stylelint

- name: Lint
run: yarn lint
run: pnpm lint

- name: Build components and docs
run: yarn build:ci
run: pnpm build:ci

- name: Publish Package Preview
id: package-preview
# Do not run for `alpha` or `beta` branches
if: github.event_name == 'pull_request' && (github.actor != 'renovate[bot]' || contains(github.event.pull_request.labels.*.name, 'create preview package'))
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN_PUBLIC_PUBLISH }}
run: |
git config user.email "[email protected]"
git config user.name "Kong UI Bot"
Expand All @@ -75,11 +75,10 @@ jobs:
tag="pr-${{ github.event.pull_request.number }}"
echo "preid=${preid}"
git checkout ${{ github.head_ref }}
echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN_PUBLIC_PUBLISH }}" > .npmrc
echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
yarn version --prerelease --preid ${preid} --allow-branch ${{ github.head_ref }} --no-git-tag-version --yes --amend
# Use pnpm to bump the version for the prerelease
pnpm version prerelease --preid ${preid} --no-git-tag-version --yes --amend
package_version=$(jq -r ".version" package.json)
package=@kong/kongponents@"${package_version}"
Expand All @@ -92,7 +91,7 @@ jobs:
npm_instructions=""
pkg=$(npm publish --no-git-checks --access public --report-summary --tag "${tag}" | grep "+ "| sed 's/+ //')
pkg=$(pnpm publish --no-git-checks --access public --report-summary --tag "${tag}" | grep "+ "| sed 's/+ //')
if [[ -z "${pkg}" ]]; then
echo "Error publishing package"
Expand Down Expand Up @@ -122,7 +121,7 @@ jobs:
uses: cypress-io/github-action@v6
with:
install: false
command: yarn test
command: pnpm test

- name: Upload Cypress screenshots (on failure)
uses: actions/upload-artifact@v4
Expand All @@ -137,15 +136,3 @@ jobs:
with:
name: cypress-videos
path: cypress/videos

# This step will be skipped if being ran from the publish action with PREVENT_PERCY_TESTS: 'true'
# - name: Trigger Percy visual regression test for docs
# timeout-minutes: 5
# env:
# PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
# PREVENT_PERCY_TESTS: ${{ secrets.PREVENT_PERCY_TESTS }}
# # TODO: Change branch as branch name changes
# PERCY_TARGET_BRANCH: alpha
# if: "${{ env.PREVENT_PERCY_TESTS != 'true' }}"
# run: |
# npx @percy/cli snapshot docs/.vitepress/dist/ --exclude "**/404.html"
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,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.
Expand Down
30 changes: 16 additions & 14 deletions docs/guide/contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,48 +10,50 @@ Clone the Kongponents repository
git clone https://github.com/Kong/kongponents.git
```

Install `pnpm`. We recommend installing via the command shown here, substituting `9.3.0` with the version listed in the `package.json > volta.pnpm` field. For example, for version `9.3.0` you would use the command `curl -fsSL https://get.pnpm.io/install.sh | env PNPM_VERSION=9.3.0 sh -`

Install dependencies

```sh
cd kongponents && yarn install --frozen-lockfile
cd kongponents && pnpm install
```

Next, let's generate [the CLI](#cli) that can be used to easy scaffold new Kongponent components. _This likely was ran automatically after installing dependencies._

```sh
yarn build:cli
pnpm build:cli
```

Run the docs local dev server with hot-module reload

```sh
yarn docs:dev
pnpm docs:dev
```

Build the docs and preview the built files locally

```sh
yarn docs:preview
pnpm docs:preview
```

Perform a full build of all Kongponents and the Docs site

```sh
yarn build
pnpm build
```

Perform a full build of all Kongponents and output a `/bundle-analyzer/stats-treemap.html` to view the output.

```sh
yarn build:visualize
pnpm build:visualize
```

## CLI

It is **highly recommended** to utilize the included CLI when creating new Kongponents as it will scaffold all the necessary files.

```sh
yarn create-kongponent
pnpm create-kongponent
```

## Create a new Kongponent
Expand Down Expand Up @@ -84,7 +86,7 @@ Once ran, this will be the resulting file structure:
### Important: Type Exports

:::tip TIP
As long as you create the new Kongponent via `yarn create-package` this step is automated.
As long as you create the new Kongponent via `pnpm create-package` this step is automated.
:::

You **must** manually add the new component type to the module export located at `src/global-components.ts`. Just add your new component to the bottom of the list.
Expand Down Expand Up @@ -237,7 +239,7 @@ Then you must use the [`v-bind-once` directive](https://github.com/danielroe/vue

## Testing your component

You're free to play around with your component on the local instance of the docs site by running `yarn docs:dev`; however, you may also want to test your local changes in a consuming application.
You're free to play around with your component on the local instance of the docs site by running `pnpm docs:dev`; however, you may also want to test your local changes in a consuming application.

1. Run `yarn link` from the root of the Kongponents repository

Expand All @@ -253,14 +255,14 @@ You're free to play around with your component on the local instance of the docs
1. Build the Kongponents package

```sh
yarn build:kongponents
pnpm build:kongponents
```

:::tip Note
Alternatively, if you do not need to rebuild the types and would prefer to watch for changes, you can run just the `vite build` command with the `--watch` flag to automatically rebuild when you save changes.

```sh
yarn vite build --watch
pnpm vite build --watch
```
:::

Expand Down Expand Up @@ -305,7 +307,7 @@ You're free to play around with your component on the local instance of the docs
✨ Done in 0.04s.
```

1. At this point it is recommended you delete the `node_modules` folder in your consuming app and rerun `yarn install --frozen-lockfile` to fully clear the linkage.
2. At this point it is recommended you delete the `node_modules` folder in your consuming app and rerun `pnpm install` to fully clear the linkage.

## Sandbox

Expand All @@ -314,7 +316,7 @@ The sandbox mode in Kongponents provides developers with a controlled environmen
By using the sandbox mode, you can have confidence that components maintain their visual consistency, regardless of the context in which they are used.

```sh
yarn dev:sandbox
pnpm dev:sandbox
```

## Committing Changes
Expand All @@ -326,7 +328,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 and will allow you to preview your commit.
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ Kongponents is a Vue component library of frequently needed UI elements. They we
To begin using Kongponents, start by installing the package into your project.

```sh
yarn add @kong/kongponents
pnpm add @kong/kongponents
```

If you choose to utilize any of the [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) included in the `@kong/kongponents` package and your project uses [PostCSS](https://postcss.org/), you will likely need use the [`postcss-custom-properties` PostCSS plugin](https://github.com/postcss/postcss-custom-properties) so that the variables are preserved in their original form.

```sh
yarn add postcss-custom-properties --dev
pnpm add postcss-custom-properties --dev
```

Next, add a `postcss.config.js` file to your project with the following content
Expand Down
Loading

0 comments on commit 9f846b7

Please sign in to comment.