feat: switch to pnpm, update dependancies, switch to dependabot (#116)

Author: TimMikeladze

.github/dependabot.yml

@@ -0,0 +1,14 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    target-branch: 'master'
+    directory: '/'
+    schedule:
+      interval: 'monthly'
+    groups:
+      minor-and-patch-updates:
+        patterns:
+          - '*'
+        update-types:
+          - 'minor'
+          - 'patch'

.github/workflows/main.yml

@@ -17,26 +17,25 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Set up Node
-        uses: actions/setup-node@v4
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
         with:
-          node-version: lts/*
-          cache: 'yarn'
+          version: latest
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Check types
-        run: yarn type-check
+        run: pnpm type-check
 
       - name: Check linting
-        run: yarn lint
+        run: pnpm lint
 
       - name: Run tests
-        run: yarn test:ci
+        run: pnpm test:ci
 
       - name: Build storybook
-        run: yarn build-storybook
+        run: pnpm build-storybook
 
       - name: Build package
-        run: yarn build
+        run: pnpm build

.github/workflows/publish.yml

@@ -22,25 +22,24 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Set up Node
-        uses: actions/setup-node@v4
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
         with:
-          node-version: lts/*
-          cache: 'yarn'
+          version: latest
 
       - name: Deploy Storybook
         uses: bitovi/github-actions-storybook-to-github-pages@v1.0.2
         with:
-          install_command: yarn install --frozen-lockfile
-          build_command: yarn build-storybook
+          install_command: pnpm install --frozen-lockfile
+          build_command: pnpm build-storybook
           path: storybook-static
         env:
           GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}
 
       # - name: Build and publish to npm
       #   if: github.ref == 'refs/tags/v*' # Only run on version tags
       #   run: |
-      #     yarn build
+      #     pnpm build
       #     npm login --registry=https://registry.npmjs.org/ --scope=your-scope
       #     npm publish
       #   env:

.husky/pre-commit

@@ -1,5 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-
-yarn lint-staged
+pnpm test:ci
+pnpm lint-staged

.prettierignore

@@ -3,6 +3,7 @@ coverage
 storybook-static
 .prettierignore
 yarn.lock
+pnpm-lock.yaml
 *.snap
 .npmrc
 .husky

README.md

@@ -7,30 +7,29 @@ A slightly opinionated starter kit for developing React and/or TypeScript packag
 ## 🏃 Getting started
 
 ```console
-npx degit TimMikeladze/tsup-react-package-starter my-react-package
+npx degit TimMikeladze/tsup-react-package-starter my-package
 
-cd my-react-package && git init
+cd my-package && git init
 
-yarn && yarn dev
+pnpm install && pnpm dev
 ```
 
-❗Important note: This project uses [yarn](https://yarnpkg.com/) for managing dependencies. If you want to use another package manager, remove the `yarn.lock` and control-f for usages of `yarn` in the project and replace them with your package manager of choice.
+❗Important note: This project uses [pnpm](https://pnpm.io/) for managing dependencies. If you want to use another package manager, remove the `pnpm-lock.yaml` and control-f for usages of `pnpm` in the project and replace them with your package manager of choice.
 
 ## What's included?
 
 - ⚡️[tsup](https://github.com/egoist/tsup) - The simplest and fastest way to bundle your TypeScript libraries. Used to bundle package as ESM and CJS modules. Supports TypeScript, Code Splitting, PostCSS, and more out of the box.
-- 🔗 [Yalc](https://github.com/wclr/yalc) - Better workflow then npm or yarn link for package authors.
 - 📖 [Storybook](https://storybook.js.org/) - Build UI components and pages in isolation. It streamlines UI development, testing, and documentation.
-- ⚡️ [Vitest](https://vitest.dev/) - A testing framework for JavaScript. Preconfigured to work with TypeScript and JSX.
+- 🧪 [Vitest](https://vitest.dev/) - A testing framework for JavaScript. Preconfigured to work with TypeScript and JSX.
 - 🔼 [Release-it](https://github.com/release-it/release-it/) - release-it is a command line tool to automatically generate a new GitHub Release and populates it with the changes (commits) made since the last release.
 - 🐙 [Test & Publish via Github Actions](https://docs.github.com/en/actions) - CI/CD workflows for your package. Run tests on every commit plus integrate with Github Releases to automate publishing package to NPM and Storybook to Github Pages.
 - 📄 [Commitizen](https://github.com/commitizen/cz-cli) — When you commit with Commitizen, you'll be prompted to fill out any required commit fields at commit time.
-- 🚓 [Commitlint](https://github.com/conventional-changelog/commitlint) — Checks that your commit messages meet the conventional commit format.
-- 🐶 [Husky](https://github.com/typicode/husky) — Running scripts before committing.
+- 🐶 [Husky](https://github.com/typicode/husky) — Run scripts before committing.
 - 🚫 [lint-staged](https://github.com/okonet/lint-staged) — Run linters on git staged files
-- 🖌 [Renovate](https://github.com/renovatebot/renovate) - Universal dependency update tool that fits into your workflows. Configured to periodically check your dependencies for updates and send automated pull requests.
+- 🤖 [Dependabot](https://docs.github.com/en/code-security/dependabot) - Github powered dependency update tool that fits into your workflows. Configured to periodically check your dependencies for updates and send automated pull requests.
 - ☑️ [ESLint](https://eslint.org/) - A linter for JavaScript. Includes a simple configuration for React projects based on the recommended ESLint and AirBnB configs.
 - 🎨 [Prettier](https://prettier.io/) - An opinionated code formatter.
+- 🏃‍♀️‍➡️ [TSX](https://github.com/privatenumber/tsx) - Execute TypeScript files with zero-config in a Node.js environment.
 
 ## Usage
 
@@ -39,29 +38,29 @@ yarn && yarn dev
 Watch and rebuild code with `tsup` and runs Storybook to preview your UI during development.
 
 ```console
-yarn dev
+pnpm dev
 ```
 
 Run all tests and watch for changes
 
 ```console
-yarn test
+pnpm test
 ```
 
 ### 🏗️ Building
 
 Build package with `tsup` for production.
 
 ```console
-yarn build
+pnpm build
 ```
 
 ### ▶️ Running files written in TypeScript
 
-To run a `.ts` file through Node.js you can simply the `ts` shorthand script in `package.json`.
+To execute a file written in TypeScript inside a Node.js environment, use the `tsx` command. This will detect your `tsconfig.json` and run the file with the correct configuration. This is perfect for running custom scripts while remaining type-safe.
 
 ```console
-yarn ts ./path/to/file.ts
+pnpm tsx ./path/to/file.ts
 ```
 
 This is useful for running scripts, starting a server, or any other code you want to run while remaining type-safe.
@@ -70,22 +69,20 @@ This is useful for running scripts, starting a server, or any other code you wan
 
 Often times you want to `link` this package to another project when developing locally, circumventing the need to publish to NPM to consume it.
 
-For this we use [yalc](https://github.com/wclr/yalc) which is a tool for local package development and simulating the publishing and installation of packages.
-
-In a project where you want to consume your package simply run:
+In a project where you want to consume your package run:
 
 ```console
-npx yalc link my-react-package
+pnpm link my-package --global
 ```
 
-Learn more about `yalc` [here](https://github.com/wclr/yalc).
+Learn more about package linking [here](https://pnpm.io/cli/link).
 
 ### 📩 Committing
 
 When you are ready to commit simply run the following command to get a well formatted commit message. All staged files will automatically be linted and fixed as well.
 
 ```console
-yarn commit
+pnpm commit
 ```
 
 ### 🔖 Releasing, tagging & publishing to NPM
@@ -95,13 +92,13 @@ Create a semantic version tag and publish to Github Releases. When a new release
 Learn more about how to use the `release-it` command [here](https://github.com/release-it/release-it).
 
 ```console
-yarn release
+pnpm release
 ```
 
 When you are ready to publish to NPM simply run the following command:
 
 ```console
-yarn publish
+pnpm publish
 ```
 
 #### 🤖 Auto publish after Github Release (or manually by dispatching the Publish workflow)
@@ -114,7 +111,7 @@ yarn publish
 
 Import CSS files works out of the box. Simply import your CSS files in your components and they will be bundled with your package.
 
-[tsup](https://github.com/egoist/tsup) supports PostCSS out of the box. Simply run `yarn add postcss -D` add a `postcss.config.js` file to the root of your project, then add any plugins you need. Learn more how to configure PostCSS [here](https://tsup.egoist.dev/#css-support).
+[tsup](https://github.com/egoist/tsup) supports PostCSS out of the box. Simply run `pnpm add postcss -D` add a `postcss.config.js` file to the root of your project, then add any plugins you need. Learn more how to configure PostCSS [here](https://tsup.egoist.dev/#css-support).
 
 Additionally consider using the [tsup](https://github.com/egoist/tsup) configuration option `injectStyle` to inject the CSS directly into your Javascript bundle instead of outputting a separate CSS file.
 

package.json

@@ -10,20 +10,19 @@
     "url": ""
   },
   "scripts": {
-    "dev": "concurrently \"yarn build --watch\" \"yarn storybook\" \"yarn test\" ",
-    "build": "tsup --onSuccess \"yarn link:self\"",
+    "dev": "concurrently \"pnpm build --watch\" \"pnpm storybook\" \"pnpm test\" ",
+    "build": "tsup --onSuccess \"pnpm link:self\"",
     "type-check": "tsc",
-    "lint": "eslint --ignore-path .gitignore \"{src,tests}/**/*.+(ts|js|tsx)\"",
-    "lint:fix": "yarn lint --fix && prettier --write .",
+    "lint": "eslint --ignore-path .gitignore \"{src,tests}/**/*.+(ts|js|tsx|jsx)\"",
+    "lint:fix": "pnpm lint --fix && prettier --write .",
     "test": "vitest",
     "test:ci": "vitest run --coverage",
-    "prepare": "husky install",
+    "prepare": "husky",
     "commit": "cz",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "yarn build && yarn release-it",
-    "link:self": "yarn yalc publish && yarn link",
-    "ts": "node node_modules/.bin/ts-node -r tsconfig-paths/register -O '{\"module\": \"commonjs\", \"moduleResolution\": \"classic\", \"resolveJsonModule\": false }' --transpile-only --project ./tsconfig.json"
+    "release": "pnpm build && pnpm release-it",
+    "link:self": "pnpm link --global"
   },
   "types": "./dist/index.d.ts",
   "exports": {
@@ -58,15 +57,13 @@
     }
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.9",
-    "@babel/preset-env": "7.23.9",
+    "@babel/core": "7.24.0",
+    "@babel/preset-env": "7.24.0",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@commitlint/cli": "19.0.3",
-    "@commitlint/config-conventional": "19.0.3",
     "@ryansonshine/commitizen": "4.2.8",
     "@ryansonshine/cz-conventional-changelog": "3.3.4",
     "@storybook/addon-essentials": "7.6.17",
@@ -78,28 +75,28 @@
     "@storybook/testing-library": "0.2.2",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
-    "@types/node": "20.11.19",
-    "@types/react": "18.2.57",
-    "@types/react-dom": "18.2.19",
+    "@types/node": "20.11.25",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
     "@types/react-test-renderer": "18.0.7",
-    "@typescript-eslint/eslint-plugin": "7.0.2",
-    "@typescript-eslint/parser": "7.0.2",
+    "@typescript-eslint/eslint-plugin": "7.1.1",
+    "@typescript-eslint/parser": "7.1.1",
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/coverage-v8": "1.3.1",
     "babel-loader": "9.1.3",
     "concurrently": "8.2.2",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.34.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-sort-class-members": "1.20.0",
     "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-typescript-sort-keys": "3.1.0",
+    "eslint-plugin-typescript-sort-keys": "3.2.0",
     "eslint-plugin-unused-imports": "3.1.0",
     "husky": "9.0.11",
     "jsdom": "24.0.0",
@@ -114,20 +111,13 @@
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tsup": "8.0.2",
-    "typescript": "5.3.3",
-    "vitest": "1.3.1",
-    "yalc": "1.0.0-pre.53"
+    "tsx": "4.7.1",
+    "typescript": "5.4.2",
+    "vitest": "1.3.1"
   },
   "peerDependencies": {
     "react": ">=17",
     "react-dom": ">=17"
   },
-  "resolutions": {
-    "glob-parent": ">=5.1.2",
-    "parse-url": ">=8.1.0",
-    "semver": ">=7.5.2",
-    "trim": ">=0.0.3",
-    "trim-newlines": ">=3.0.1",
-    "yaml": ">=2.2.2"
-  }
+  "resolutions": {}
 }