chore: Upgrade deps and use pnpm (#50)

* Upgrade dependencies and migrate to pnpm from yarn

* more clean ups

* Add step to install pnpm

* set pnpm version to latest

* change pnpm install order

* Add types/node to fix build

.github/actions/setup_workspace/action.yaml

@@ -4,22 +4,14 @@ description: setup Node, and install dependencies
 runs:
   using: composite
   steps:
-    - uses: actions/setup-node@v3
+    - uses: pnpm/action-setup@v2
       with:
-        node-version: 18
+        version: latest
 
-    - name: Get yarn cache directory path
-      id: yarn-cache-dir-path
-      shell: bash
-      run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-    - uses: actions/cache@v3
-      id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+    - uses: actions/setup-node@v4
       with:
-        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-
+        node-version: 20
+        cache: 'pnpm'
 
-    - run: yarn --frozen-lockfile
+    - run: pnpm install
       shell: bash

.github/workflows/deploy-storybook-gh-pages.yml

@@ -14,7 +14,7 @@ jobs:
       - id: setup
         uses: ./.github/actions/setup_workspace
 
-      - run: yarn build-storybook --quiet
+      - run: pnpm build-storybook --quiet
 
       - name: Deploy storybook
         uses: peaceiris/actions-gh-pages@v3

.github/workflows/npm-publish.yml

@@ -19,11 +19,11 @@ jobs:
       - id: setup
         uses: ./.github/actions/setup_workspace
 
-      - run: yarn type-check
+      - run: pnpm type-check
 
-      - run: yarn test
+      - run: pnpm test
 
-      - run: yarn build
+      - run: pnpm build
 
       - uses: actions/upload-artifact@v3
         with:
@@ -53,7 +53,7 @@ jobs:
 
       - name: Semantic Release
         id: semantic_release
-        uses: cycjimmy/semantic-release-action@v3
+        uses: cycjimmy/semantic-release-action@v4
         with: # You can specify specifying version range for the extra plugins if you prefer.
           extra_plugins: |
             @semantic-release/git
@@ -64,7 +64,7 @@ jobs:
 
       - id: publish
         if: steps.semantic_release.outputs.new_release_published == 'true'
-        uses: JS-DevTools/npm-publish@v1
+        uses: JS-DevTools/npm-publish@v3
         with:
           token: ${{ secrets.NPM_TOKEN }}
           package: ./dist/package.json

.github/workflows/pr_validate.yaml

@@ -16,9 +16,9 @@ jobs:
       - id: setup
         uses: ./.github/actions/setup_workspace
 
-      - run: yarn type-check
+      - run: pnpm type-check
 
-      - run: yarn test
+      - run: pnpm test
 
   build:
     name: Build the lib
@@ -32,7 +32,7 @@ jobs:
       - id: setup
         uses: ./.github/actions/setup_workspace
 
-      - run: yarn build
+      - run: pnpm build
 
   build-storybook:
     name: Build the storybook
@@ -46,4 +46,4 @@ jobs:
       - id: setup
         uses: ./.github/actions/setup_workspace
 
-      - run: yarn build-storybook --quiet
+      - run: pnpm build-storybook --quiet

.travis.yml

@@ -4,7 +4,7 @@ node_js:
 
 cache:
   directories:
-    - "node_modules"
+    - 'node_modules'
 
 notifications:
   email: false
@@ -14,7 +14,7 @@ branches:
     - master
 
 install:
-  - yarn --frozen-lockfile
+  - pnpm install
 
 script:
   - 'if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then make pr_validate; fi'

.vscode/settings.json

@@ -6,7 +6,7 @@
   "editor.rulers": [100],
   "files.eol": "\n",
   "javascript.format.enable": false,
-  "npm.packageManager": "yarn",
+  "npm.packageManager": "pnpm",
   "typescript.format.enable": false,
   "typescript.tsdk": "node_modules/typescript/lib",
   "jest.autoRun": {

Makefile

@@ -1,9 +1,9 @@
 .PHONY: pr_validate master
 
 pr_validate:
-	yarn test-with-coverage
-	yarn build
+	pnpm test-with-coverage
+	pnpm build
 
 master:
-	yarn test-with-coverage
-	yarn build
+	pnpm test-with-coverage
+	pnpm build

jest.config.js

@@ -2,7 +2,7 @@
  * For a detailed explanation regarding each configuration property and type check, visit:
  * https://jestjs.io/docs/configuration
  */
-
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // All imported modules in your tests should be mocked automatically
   // automock: false,
@@ -93,7 +93,7 @@ module.exports = {
   // notifyMode: "failure-change",
 
   // A preset that is used as a base for Jest's configuration
-  // preset: undefined,
+  preset: 'ts-jest',
 
   // Run tests from one or more projects
   // projects: undefined,
@@ -129,7 +129,7 @@ module.exports = {
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   // setupFilesAfterEnv: [],
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  setupFilesAfterEnv: ['./src/jest-setup.ts'],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,
@@ -174,9 +174,9 @@ module.exports = {
 
   // A map from regular expressions to paths to transformers
   // transform: undefined,
-  transform: {
-    '^.+\\.tsx?$': 'ts-jest',
-  },
+  // transform: {
+  //   '^.+\\.[jt]sx?$': 'ts-jest',
+  // },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [

package.json

@@ -11,7 +11,7 @@
     "build": "rimraf dist && cross-env NODE_ENV=production tsc -p ./tsconfig.prod.json && cross-env NODE_ENV=production tsc -p ./tsconfig.prod.json --module commonjs --outDir dist/node",
     "postbuild": "node ./scripts/clear-package-json.js && cp LICENSE README.md ./dist/",
     "test": "rimraf coverage && cross-env NODE_ENV=test jest",
-    "test-with-coverage": "yarn test --collect-coverage",
+    "test-with-coverage": "pnpm test --collect-coverage",
     "type-check": "cross-env NODE_ENV=production tsc --noEmit",
     "postversion": "node ./scripts/clear-package-json.js"
   },
@@ -20,52 +20,51 @@
   "types": "./index.d.ts",
   "dependencies": {
     "lodash.get": "^4.4.2",
-    "nanoid": "^3.3.6",
-    "react-number-format": "5.1.4"
+    "react-number-format": "5.3.1"
   },
   "peerDependencies": {
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.12.0",
-    "formik": "^2.2.9",
+    "@mui/icons-material": "^5.14.18",
+    "@mui/material": "^5.14.18",
+    "formik": "^2.4.5",
     "react": "^17.0.2 || ^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.12.0",
-    "@storybook/addon-actions": "^7.0.5",
-    "@storybook/addon-docs": "^7.0.5",
-    "@storybook/addon-links": "^7.0.5",
-    "@storybook/addon-mdx-gfm": "^7.0.5",
-    "@storybook/addons": "^7.0.5",
-    "@storybook/react": "^7.0.5",
-    "@storybook/react-webpack5": "^7.0.5",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.0",
-    "@types/lodash.get": "^4.4.7",
-    "@types/react": "^18.0.35",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.18",
+    "@mui/material": "^5.14.18",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-mdx-gfm": "^7.5.3",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.8",
+    "@types/lodash.get": "^4.4.9",
+    "@types/node": "^20",
+    "@types/react": "^18.2.37",
     "cross-env": "^7.0.3",
-    "formik": "^2.2.9",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "prettier": "^2.8.7",
+    "formik": "^2.4.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "rimraf": "^5.0.0",
-    "storybook": "^7.0.5",
-    "ts-jest": "^29.1.0",
-    "typescript": "^5.0.4",
-    "yup": "^1.1.1"
+    "rimraf": "^5.0.5",
+    "storybook": "^7.5.3",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2",
+    "yup": "^1.3.2"
   },
   "keywords": [
     "formik",