upgrade packages and use pnpm instead of bun

.github/workflows/firebase-release.yml

@@ -13,14 +13,22 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
 
       - name: Build, lint, and deploy
         run: |
-          bun install
-          bun run build
-          bun run lint
+          pnpm install
+          pnpm run build
+          pnpm run lint
       - name: Deploy to Firebase Hosting
         uses: FirebaseExtended/action-hosting-deploy@v0
         with:

.github/workflows/lint_and_build.yml

@@ -14,22 +14,24 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
         with:
-          node-version: 18
+          version: 9
 
-      - name: Set up bun
-        uses: oven-sh/setup-bun@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: bun install
+        run: pnpm install
 
       - name: Run lint
-        run: bun run lint
+        run: pnpm run lint
 
       - name: Build project
-        run: bun run build
+        run: pnpm run build

package.json

@@ -14,39 +14,40 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "generate-icons": "npx @svgr/cli src/Icons/svgs",
-    "deploy": "bun run build && firebase deploy --only hosting",
+    "force-deploy": "pnpm run build && firebase deploy --only hosting",
     "release": "bash scripts/create-release.sh"
   },
   "dependencies": {
-    "firebase": "^10.14.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-screen-wake-lock": "^3.0.2",
+    "firebase": "^12.6.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-screen-wake-lock": "^3.1.1",
     "react-swipeable": "^7.0.2",
-    "react-twc": "^1.4.2",
-    "semver": "^7.7.1",
-    "zod": "^3.24.2"
+    "react-twc": "^1.5.1",
+    "semver": "^7.7.3",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
     "@tailwindcss/postcss": "^4.1.17",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/semver": "^7.5.8",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react-swc": "^3.8.0",
+    "@types/prop-types": "^15.7.15",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/semver": "^7.7.1",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@vitejs/plugin-react-swc": "^4.2.2",
     "autoprefixer": "^10.4.22",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "firebase-tools": "^13.31.2",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "firebase-tools": "^14.25.0",
     "postcss": "^8.5.6",
-    "prettier": "2.8.8",
+    "prettier": "3.6.2",
     "prop-types": "^15.8.1",
     "tailwindcss": "^4.1.17",
-    "typescript": "^5.7.3",
-    "vite": "^5.4.14",
-    "vite-plugin-pwa": "^0.20.5"
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vite-plugin-pwa": "^1.1.0"
   }
 }

src/Components/Misc/IconCheckbox.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 export const IconCheckbox = ({
   name,
   icon,
@@ -7,14 +9,14 @@ export const IconCheckbox = ({
   className,
 }: {
   name: string;
-  icon: JSX.Element;
-  checkedIcon: JSX.Element;
+  icon: ReactElement;
+  checkedIcon: ReactElement;
   checked: boolean;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   className?: string;
 }) => {
   return (
-    <div className={className} >
+    <div className={className}>
       <label>
         <input
           name={name}