Merge pull request #286 from rimorin/ci/upgrade

ci: update packages

package.json

@@ -5,26 +5,26 @@
   "dependencies": {
     "@ebay/nice-modal-react": "^1.2.13",
     "@rollbar/react": "^0.11.2",
-    "@types/node": "^16.18.94",
-    "@types/react": "^18.2.74",
+    "@types/node": "^20.12.11",
+    "@types/react": "^18.3.2",
     "@types/react-calendar": "^3.9.0",
-    "@types/react-dom": "^18.2.24",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "bootstrap": "^5.3.3",
-    "firebase": "^9.23.0",
-    "nanoid": "^4.0.2",
-    "react": "^18.2.0",
+    "firebase": "^10.11.1",
+    "nanoid": "^5.0.7",
+    "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
     "react-bootstrap-range-slider": "^3.0.8",
-    "react-calendar": "^3.9.0",
+    "react-calendar": "^5.0.0",
     "react-confirm-alert": "^3.0.6",
     "react-countdown": "^2.3.5",
-    "react-dom": "^18.2.0",
-    "react-password-checklist": "^1.5.1",
-    "react-router-dom": "^6.22.3",
+    "react-dom": "^18.3.1",
+    "react-password-checklist": "^1.6.0",
+    "react-router-dom": "^6.23.1",
     "react-select": "^5.8.0",
     "rollbar": "^2.26.4",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^3.5.2"
   },
   "scripts": {
     "start": "vite",
@@ -57,54 +57,56 @@
     ]
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@eslint/js": "^9.2.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-onboarding": "^8.0.10",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.4.5",
+    "@storybook/blocks": "^8.0.10",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/test-runner": "^0.13.0",
+    "@storybook/manager-api": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
+    "@storybook/test-runner": "^0.18.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.4.5",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@storybook/theming": "^8.0.10",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "chromatic": "^7.6.0",
+    "chromatic": "^11.3.2",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "husky": "^8.0.3",
-    "jest-worker": "^28.1.3",
-    "jsdom": "^22.1.0",
-    "lint-staged": "^13.3.0",
-    "prettier": "^2.8.8",
-    "pretty-quick": "^3.3.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.0.11",
+    "jest-worker": "^29.7.0",
+    "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "pretty-quick": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.72.0",
-    "semantic-release": "^20.1.3",
-    "sharp": "^0.32.6",
-    "storybook": "^7.6.17",
+    "sass": "^1.77.1",
+    "semantic-release": "^23.1.1",
+    "sharp": "^0.33.3",
+    "storybook": "^8.0.10",
     "storybook-mock-date-decorator": "^1.0.2",
-    "svgo": "^3.2.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.5.3",
+    "svgo": "^3.3.2",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.8.0",
+    "unplugin-turbo-console": "^1.8.6",
+    "vite": "^5.2.11",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-image-optimizer": "^1.1.7",
-    "vite-plugin-svgr": "^3.3.0",
-    "vite-plugin-turbo-console": "^0.1.0",
-    "vitest": "^0.34.6"
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^1.6.0"
   },
   "release": {
     "plugins": [

src/components/modal/slipdetails.tsx

@@ -7,6 +7,7 @@ import ModalFooter from "../form/footer";
 import GenericInputField from "../form/input";
 import HelpButton from "../navigation/help";
 import { ConfirmSlipDetailsModalProps } from "../../utils/interface";
+import { Value } from "react-calendar/dist/cjs/shared/types";
 
 const ConfirmSlipDetails = NiceModal.create(
   ({
@@ -31,9 +32,11 @@ const ConfirmSlipDetails = NiceModal.create(
     return (
       <Modal {...bootstrapDialog(modal)}>
         <Modal.Header>
-          <Modal.Title>{`Confirm ${
-            isPersonalSlip ? "personal" : ""
-          } slip details for ${addressName}`}</Modal.Title>
+          <Modal.Title>
+            {`Confirm ${
+              isPersonalSlip ? "personal" : ""
+            } slip details for ${addressName}`}
+          </Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.CREATE_PERSONAL_SLIPS} />
         </Modal.Header>
         <Form onSubmit={handleSubmitPersonalSlip}>
@@ -42,9 +45,10 @@ const ConfirmSlipDetails = NiceModal.create(
               <Calendar
                 //Block selection for current day and days before.
                 minDate={new Date(Date.now() + 3600 * 1000 * 24)}
-                onChange={(selectedDate: Date) => {
+                onChange={(selectedDate: Value) => {
+                  const selectedDateValue = selectedDate as Date;
                   const expiryInHours = Math.floor(
-                    (selectedDate.getTime() - new Date().getTime()) /
+                    (selectedDateValue.getTime() - new Date().getTime()) /
                       (1000 * 60 * 60)
                   );
                   setLinkExpiryHrs(expiryInHours);

src/components/modal/updatestatus.tsx

@@ -160,7 +160,8 @@ const UpdateUnitStatus = NiceModal.create(
                 <DncDateField
                   changeDate={hhDnctime}
                   handleDateChange={(date) => {
-                    setHhDnctime(date.getTime());
+                    const dateValue = date as Date;
+                    setHhDnctime(dateValue.getTime());
                   }}
                 />
               </div>

src/components/navigation/backtotop.tsx

@@ -1,7 +1,7 @@
 import { memo } from "react";
 import { Fade } from "react-bootstrap";
 import { backToTopProp } from "../../utils/interface";
-import { ReactComponent as TopArrowImage } from "../../assets/top-arrow.svg";
+import TopArrowImage from "../../assets/top-arrow.svg?react";
 
 const BackToTopButton = memo(({ showButton }: backToTopProp) => (
   <Fade in={showButton}>

src/components/navigation/help.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import { HelpButtonProps } from "../../utils/interface";
-import { ReactComponent as QuestionImage } from "../../assets/question.svg";
+import QuestionImage from "../../assets/question.svg?react";
 const HelpButton = memo(
   ({ link, isWarningButton = false }: HelpButtonProps) => (
     <QuestionImage

src/pages/territory/slip.tsx

@@ -30,7 +30,7 @@ import {
 } from "../../utils/constants";
 import "../../css/slip.css";
 import Countdown from "react-countdown";
-import { ReactComponent as InfoImg } from "../../assets/information.svg";
+import InfoImg from "../../assets/information.svg?react";
 import ModalManager from "@ebay/nice-modal-react";
 import UpdateAddressFeedback from "../../components/modal/updateaddfeedback";
 import UpdateAddressInstructions from "../../components/modal/instructions";

src/utils/interface.tsx

@@ -1,5 +1,6 @@
 import { User } from "firebase/auth";
 import { LinkSession, Policy } from "./policies";
+import { Value } from "react-calendar/dist/cjs/shared/types";
 
 interface userInterface {
   user: User;
@@ -106,7 +107,7 @@ export interface FormProps {
     event: React.ChangeEvent<HTMLElement>
   ) => void;
   handleChangeValues?: (values: string[]) => void;
-  handleDateChange?: (date: Date) => void;
+  handleDateChange?: (date: Value) => void;
   changeDate?: number;
   changeValue?: string;
   changeValues?: string[];

src/utils/policies.tsx

@@ -54,11 +54,16 @@ export class Policy {
     const userClaims = userData.claims;
     // check for customised user max tries and countable types
     if (!userClaims) return;
-    if (userClaims.maxTries !== undefined) {
-      this.maxTries = userClaims.maxTries;
+    const policyCountableTypes = userClaims.countableTypes;
+    const policyMaxTries = userClaims.maxTries;
+    if (typeof policyMaxTries === "number" && policyMaxTries > 0) {
+      this.maxTries = policyMaxTries;
     }
-    if (userClaims.countableTypes !== undefined) {
-      this.countableTypes = userClaims.countableTypes;
+    if (
+      Array.isArray(policyCountableTypes) &&
+      policyCountableTypes.length > 0
+    ) {
+      this.countableTypes = policyCountableTypes;
     }
   }
   isCountable(unit: unitDetails): boolean {

vite.config.js

@@ -4,7 +4,7 @@ import svgr from "vite-plugin-svgr";
 import visualizer from "rollup-plugin-visualizer";
 import checker from "vite-plugin-checker";
 import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
-import TurboConsole from "vite-plugin-turbo-console";
+import TurboConsole from "unplugin-turbo-console/vite";
 export default defineConfig(() => {
   return {
     build: {
@@ -14,11 +14,11 @@ export default defineConfig(() => {
           manualChunks: {
             react: ["react", "react-dom", "react-router", "react-router-dom"],
             rollbar: ["rollbar"],
-            fbApp: ["@firebase/app"],
-            fbAuth: ["@firebase/auth"],
-            fbCheck: ["@firebase/app-check"],
-            fbDb: ["@firebase/database"],
-            fbFunctions: ["@firebase/functions"]
+            fbApp: ["firebase/app"],
+            fbAuth: ["firebase/auth"],
+            fbCheck: ["firebase/app-check"],
+            fbDb: ["firebase/database"],
+            fbFunctions: ["firebase/functions"]
           }
         }
       }