refactor: replaces npm with pnpm in pipeline (#2)

* chore(package.json): removes author

Removes author from package.json to be added to README

* chore: replaces npm with pnpm in CI workflow

* refactor: reverts ci pipeline to check result

* revert: change pipeline to use PNPM

* ci(CI.yaml): deletes in progress run when pushing new commits

It prevents from running multiple CI worflows by stopping previous running, NOT on Main branch

* ci: fixes react version to 18.2

React 19.3.1 introduces a conflict with Nextjs version that make the test suites fail

* ci: adds 22 Node Version

* ci: replaces pnpm dlx with npx for percy

* ci: adds cache for next builds

* ci: fixes npx percy executable

* ci: runs test job on self hosted runner

* ci: defines default bash for self hosted runner jobs

* ci: updates actions versions

* ci: revert default runner

* ci(CI): removes step that requires bash shell

* revert(CI.yaml): revert runners

* ci: tests with windows runner

* ci: adds dependency to build before running tests in CI

* ci: adds next cache

* ci: fix deps issue

* ci: updates storybook

* ci: upgrades node version for build job

* ci: change runner

* ci: re-adds SENTRY_AUTH_TOKEN env

* refactor: completes transition from npm to pnpm

* ci: updates action versions

* refactor: updates storybook

.github/workflows/CI.yml

@@ -6,86 +6,125 @@ on:
  pull_request:
  branches: [main]
 
+concurrency:
+ group: ${{ github.workflow }}-${{ github.ref }}
+ cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+
 jobs:
  build:
+ timeout-minutes: 5
  strategy:
  matrix:
- node-version: [18.x, 20.x]
+ node-version: [18.x, 20.x, 22.x]
  # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
  name: Build with ${{ matrix.node-version }}
  runs-on: ubuntu-latest
 
  steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v3
+ with:
+ version: 9
  - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
  with:
  node-version: ${{ matrix.node-version }}
- cache: "npm"
- - run: npm ci
- - run: npm run build
+ cache: "pnpm"
+ - name: Restore cache
+ uses: actions/cache@v4
+ with:
+ path: |
+ .next/cache
+ # Generate a new cache whenever packages or source files change.
+ key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock','**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+ # If source files changed but packages didn't, rebuild from a prior cache.
+ restore-keys: |
+ ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock','**/pnpm-lock.yaml') }}-
+ - run: pnpm install --frozen-lockfile
+ - run: pnpm run build
 
  test:
+ needs: build
+ timeout-minutes: 5 
  strategy:
  matrix:
- node-version: [20.x]
+ node-version: [22.x]
 
  name: Run all tests
+ # runs-on: windows-latest
  runs-on: ubuntu-latest
+ # defaults:
+ # run:
+ # shell: bash
+
 
  steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
  with:
  fetch-depth: 0 # Retrieve Git history, needed to verify commits
+ - uses: pnpm/action-setup@v3
+ with:
+ version: 9
  - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
  with:
  node-version: ${{ matrix.node-version }}
- cache: "npm"
- - run: npm ci
+ cache: "pnpm"
+ - name: Restore cache
+ uses: actions/cache@v4
+ with:
+ path: |
+ .next/cache
+ # Generate a new cache whenever packages or source files change.
+ key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock','**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+ # If source files changed but packages didn't, rebuild from a prior cache.
+ restore-keys: |
+ ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock','**/pnpm-lock.yaml') }}-
+ - run: pnpm install --frozen-lockfile
 
  - name: Set SENTRY_AUTH_TOKEN env if secret exists
+ shell: bash
  run: |
  if [[ -n "${{ secrets.SENTRY_AUTH_TOKEN }}" ]]; then
  echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> $GITHUB_ENV
  fi
 
  - name: Build Next.js for E2E tests
- run: npm run build
+ run: pnpm run build
 
  - if: github.event_name == 'pull_request'
  name: Validate all commits from PR
- run: npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose
+ run: pnpm dlx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose
 
  - name: Linter
- run: npm run lint
+ run: pnpm run lint
 
  - name: Type checking
- run: npm run check-types
+ run: pnpm run check-types
 
  - name: Run unit tests
- run: npm run test
+ run: pnpm run test
 
  - name: Upload coverage reports to Codecov
- uses: codecov/codecov-action@v3
+ uses: codecov/codecov-action@v4
  env:
  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
  - name: Install Playwright (used for Storybook and E2E tests)
  run: npx playwright install --with-deps
 
  - name: Run storybook tests
- run: npm run test-storybook:ci
+ run: pnpm run test-storybook:ci
 
  - name: Run E2E tests
- run: npx percy exec -- npm run test:e2e
+ run: npx percy exec -- pnpm run test:e2e
  env:
  PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
- - uses: actions/upload-artifact@v3
- if: always()
+ - uses: actions/upload-artifact@v4
+ if: ${{ !cancelled() }}
  with:
- name: test-results
- path: test-results/
- retention-days: 7
+ name: playwright-report
+ path: playwright-report/
+ retention-days: 5

.github/workflows/cleanup-cache-from-branch.yml

@@ -0,0 +1,29 @@
+name: cleanup caches by a branch
+on:
+ pull_request:
+ types:
+ - closed
+
+jobs:
+ cleanup:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Cleanup
+ run: |
+ gh extension install actions/gh-actions-cache
+
+ echo "Fetching list of cache key"
+ cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH -L 100 | cut -f 1 )
+
+ ## Setting this to not fail the workflow while deleting cache keys.
+ set +e
+ echo "Deleting caches..."
+ for cacheKey in $cacheKeysForPR
+ do
+ gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+ done
+ echo "Done"
+ env:
+ GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ REPO: ${{ github.repository }}
+ BRANCH: refs/pull/${{ github.event.pull_request.number }}/merge

.github/workflows/crowdin.yml

@@ -13,7 +13,7 @@ jobs:
  runs-on: ubuntu-latest
 
  steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
 
  - name: crowdin action
  uses: crowdin/github-action@v1

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
  release:
  strategy:
  matrix:
- node-version: [20.x]
+ node-version: [22.x]
 
  name: Create a new release
  runs-on: ubuntu-latest
@@ -23,15 +23,16 @@ jobs:
  pull-requests: write # to be able to comment on released pull requests
 
  steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
  with:
  fetch-depth: 0
+
  - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
  with:
  node-version: ${{ matrix.node-version }}
  cache: "npm"
- - run: HUSKY=0 npm ci
+ - run: HUSKY=0 npm install --frozen-lockfile
 
  - name: Release
  env:

.github/workflows/update-deps.yml

@@ -15,19 +15,22 @@ jobs:
  runs-on: ubuntu-latest
 
  steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
  - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
  with:
  node-version: ${{ matrix.node-version }}
- cache: "npm"
- - run: npm ci
+ cache: "pnpm"
+ - uses: pnpm/action-setup@v3
+ with:
+ version: 9
+ - run: pnpm update
 
- - run: npx npm-check-updates -u # Update dependencies
- - run: rm -Rf node_modules package-lock.json
- - run: npm install
+ - run: pnpm dlx npm-check-updates -u # Update dependencies
+ - run: rm -Rf node_modules pnpm-lock.yaml
+ - run: pnpm install
  - name: Create Pull Request
- uses: peter-evans/create-pull-request@v4
+ uses: peter-evans/create-pull-request@v6
  with:
  commit-message: "build: update dependencies to the latest version"
  title: Update dependencies to the latest version

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # Database
 *.db

.storybook/main.ts

@@ -1,22 +1,23 @@
-import type { StorybookConfig } from '@storybook/nextjs';
-
-const config: StorybookConfig = {
- stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
- addons: [
- '@storybook/addon-links',
- '@storybook/addon-essentials',
- '@storybook/addon-interactions',
- ],
- framework: {
- name: '@storybook/nextjs',
- options: { builder: { useSWC: true } },
- },
- docs: {
- autodocs: 'tag',
- },
- core: {
- disableTelemetry: true,
- },
-};
-
-export default config;
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@chromatic-com/storybook',
+ ],
+ framework: {
+ name: '@storybook/nextjs',
+ options: { builder: {} },
+ },
+ docs: {
+ autodocs: 'tag',
+ },
+ core: {
+ disableTelemetry: true,
+ },
+};
+
+export default config;

.storybook/preview.ts

@@ -4,7 +4,6 @@ import type { Preview } from '@storybook/react';
 
 const preview: Preview = {
  parameters: {
- actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
  matchers: {
  color: /(background|color)$/i,