chore: upgrade nextui and rest libs, migrate to next config ts file

uigywnkiub · Dec 20, 2024 · 5ede79f · 5ede79f
1 parent 60733d3
commit 5ede79f
Show file tree

Hide file tree

Showing 14 changed files with 4,633 additions and 3,509 deletions.
diff --git a/.npmrc b/.npmrc
@@ -1,4 +1,5 @@
 public-hoist-pattern[]=*@nextui-org/*
 engine-strict=true
 package-manager-strict-version=true
-manage-package-manager-versions=true
+manage-package-manager-versions=true
+auto-install-peers=true
diff --git a/app/error.tsx b/app/error.tsx
@@ -21,7 +21,7 @@ export default function Error({
       <ClientButton
         title='Try Again'
         className='max-w-md bg-primary font-medium text-default-50'
-        onClick={() => [reset()]}
+        onPress={() => [reset()]}
       />
     </main>
   )

diff --git a/app/ui/categories/categories.tsx b/app/ui/categories/categories.tsx
@@ -221,7 +221,7 @@ function Categories({ userId, userCategories }: TProps) {
         <Button
           isDisabled={haveCategoriesChanged}
           className='mx-auto w-full bg-danger font-medium text-default-50'
-          onClick={onOpen}
+          onPress={onOpen}
           startContent={
             <HoverableElement
               uKey='reset-categories'

diff --git a/app/ui/categories/category-item.tsx b/app/ui/categories/category-item.tsx
@@ -93,7 +93,7 @@ function CategoryItem({
               />
             </div>
             <Button
-              onClick={() => onSaveItemClick(categoryIndex, itemIndex)}
+              onPress={() => onSaveItemClick(categoryIndex, itemIndex)}
               isLoading={isLoading.item}
               color='success'
               className='px-0 font-medium text-background'
@@ -133,7 +133,7 @@ function CategoryItem({
             </div>
           </div>
           <Button
-            onClick={() => onEditItemClick(categoryIndex, itemIndex, item.name)}
+            onPress={() => onEditItemClick(categoryIndex, itemIndex, item.name)}
             isDisabled={item.name === DEFAULT_CATEGORY}
             className='bg-foreground px-0 font-medium text-default-50'
           >

diff --git a/app/ui/categories/category.tsx b/app/ui/categories/category.tsx
@@ -87,7 +87,7 @@ function Category({
             }}
           />
           <Button
-            onClick={() => onSaveTargetClick(index)}
+            onPress={() => onSaveTargetClick(index)}
             isLoading={isLoading.subject}
             color='success'
             className='px-0 font-medium text-background'
@@ -114,7 +114,7 @@ function Category({
             </button>
           </h2>
           <Button
-            onClick={() => onEditTargetClick(index, category.subject)}
+            onPress={() => onEditTargetClick(index, category.subject)}
             className='bg-foreground px-0 font-medium text-default-50'
           >
             <HoverableElement

diff --git a/app/ui/home/transaction-form.tsx b/app/ui/home/transaction-form.tsx
@@ -329,6 +329,7 @@ function TransactionForm({ currency, userCategories }: TProps) {
                 }}
               >
                 <Select
+                  // isVirtualized={false}
                   isDisabled={pending || isLoadingAIData}
                   isLoading={isLoadingAIData}
                   items={userCategories}

diff --git a/app/ui/install-pwa-button.tsx b/app/ui/install-pwa-button.tsx
@@ -67,7 +67,7 @@ export default function InstallPWA() {
       animate={{ opacity: 1, ...DIV.ANIMATE(false, true, 1) }}
       transition={{ ...DIV.TRANSITION }}
     >
-      <Button variant='light' onClick={onInstall}>
+      <Button variant='light' onPress={onInstall}>
         Install
       </Button>
     </motion.div>

diff --git a/app/ui/monthly-report/month-picker.tsx b/app/ui/monthly-report/month-picker.tsx
@@ -20,8 +20,9 @@ function MonthPicker({
   minTransaction,
   maxTransaction,
 }: TProps) {
-  const [dateRange, setDateRange] =
-    useState<RangeValue<DateValue>>(selectedDate)
+  const [dateRange, setDateRange] = useState<RangeValue<DateValue> | null>(
+    selectedDate,
+  )
 
   const daysInMonth = getDaysInMonth(new Date())
   const maxTransactionDayOfMonth = toCalendarDate(
@@ -34,9 +35,11 @@ function MonthPicker({
   })
 
   // Docs https://github.com/streamich/react-use/blob/master/docs/useDebounce.md
-  const [isReady, cancel] = useDebounce(() => onDateSelection(dateRange), 300, [
-    dateRange,
-  ])
+  const [isReady, cancel] = useDebounce(
+    () => dateRange && onDateSelection(dateRange),
+    300,
+    [dateRange],
+  )
 
   useEffect(() => {
     if (!isReady()) cancel()
@@ -51,7 +54,9 @@ function MonthPicker({
           value={dateRange}
           minValue={minTransactionValue}
           maxValue={maxTransactionValue}
-          onChange={(range) => setDateRange(range)}
+          onChange={(range: RangeValue<DateValue> | null) =>
+            range && setDateRange(range)
+          }
         />
       </div>
     </div>

diff --git a/app/ui/monthly-report/monthly-report.tsx b/app/ui/monthly-report/monthly-report.tsx
@@ -225,7 +225,7 @@ function MonthlyReport({ transactions, currency }: TProps) {
         <Button
           isLoading={isLoadingTips}
           variant='flat'
-          onClick={getExpenseTipsAIData}
+          onPress={getExpenseTipsAIData}
           className='mx-auto mt-2 flex'
         >
           {!isLoadingTips && <AILogo asIcon iconSize='sm' />}{' '}

diff --git a/app/ui/settings/delete-account.tsx b/app/ui/settings/delete-account.tsx
@@ -58,7 +58,7 @@ function DeleteAccount({ userId }: TProps) {
   const buttonWithIcon = (icon: TIcon) => (
     <Button
       className='w-full bg-danger font-medium text-default-50'
-      onClick={onOpen}
+      onPress={onOpen}
       startContent={icon}
     >
       Delete account

diff --git a/app/ui/sign-in/sign-in.tsx b/app/ui/sign-in/sign-in.tsx
@@ -17,7 +17,7 @@ import {
 import { AuthError } from 'next-auth'
 import { signIn } from 'next-auth/react'
 
-import { Accordion, AccordionItem, Divider } from '@nextui-org/react'
+import { Accordion, AccordionItem, Button, Divider } from '@nextui-org/react'
 
 import {
   APP_DESCRIPTION,
@@ -60,10 +60,12 @@ function SignIn() {
     isLoading.notion
 
   const onSignIn = async (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    e: Parameters<
+      NonNullable<React.ComponentProps<typeof Button>['onPress']>
+    >[0],
     provider: TAuthProvider,
   ) => {
-    e.preventDefault()
+    // e.preventDefault()
     setIsLoading((prev) => ({ ...prev, [provider]: true }))
     try {
       await signIn(provider, {
@@ -159,7 +161,7 @@ function SignIn() {
                     isDisabled={isAnyLoading}
                     className='min-w-[220px] bg-foreground font-medium text-default-50'
                     isLoading={isLoading}
-                    onClick={(e) => onSignIn(e, provider)}
+                    onPress={(e) => onSignIn(e, provider)}
                     startContent={!isLoading && icon}
                   />
                 )
@@ -199,7 +201,7 @@ function SignIn() {
                           isDisabled={isAnyLoading}
                           className='min-w-[220px] bg-foreground font-medium text-default-50'
                           isLoading={isLoading}
-                          onClick={(e) => onSignIn(e, provider)}
+                          onPress={(e) => onSignIn(e, provider)}
                           startContent={!isLoading && icon}
                         />
                       )

diff --git a/next.config.mjs → next.config.ts b/next.config.mjs → next.config.ts
@@ -1,9 +1,12 @@
-// @ts-check
+import type { NextConfig } from 'next'
+
 import withPWAInit from '@ducanh2912/next-pwa'
 import { withSentryConfig } from '@sentry/nextjs'
+import { RuleSetRule } from 'webpack'
+
+import { IS_PROD } from './config/constants/main'
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   images: {
     remotePatterns: [
       {
@@ -22,8 +25,9 @@ const nextConfig = {
   },
   webpack: (config, _options) => {
     // Grab the existing rule that handles SVG imports.
-    const fileLoaderRule = config.module.rules.find((rule) =>
-      rule.test?.test?.('.svg'),
+    const fileLoaderRule = config.module.rules.find(
+      (rule: RuleSetRule) =>
+        rule.test instanceof RegExp && rule.test.test('.svg'),
     )
 
     config.module.rules.push(
@@ -73,7 +77,7 @@ const withPWA = withPWAInit({
   cacheOnFrontEndNav: true,
   aggressiveFrontEndNavCaching: true,
   extendDefaultRuntimeCaching: true,
-  disable: process.env.NODE_ENV === 'development',
+  disable: !IS_PROD,
 })
 
 const sentryConfig = {

diff --git a/package.json b/package.json
@@ -26,20 +26,21 @@
     "@auth/core": "^0.37.4",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@google/generative-ai": "^0.21.0",
-    "@internationalized/date": "^3.5.6",
+    "@internationalized/date": "^3.6.0",
     "@next/third-parties": "15.1.2",
-    "@nextui-org/react": "^2.4.8",
-    "@sentry/nextjs": "^8.35.0",
-    "@vercel/analytics": "^1.3.1",
-    "@vercel/speed-insights": "^1.0.13",
+    "@nextui-org/react": "^2.6.8",
+    "@sentry/nextjs": "^8.47.0",
+    "@vercel/analytics": "^1.4.1",
+    "@vercel/speed-insights": "^1.1.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.2.0",
     "emoji-picker-react": "^4.12.0",
     "emoji-regex": "^10.4.0",
     "framer-motion": "^11.15.0",
     "get-user-locale": "^2.3.2",
-    "mongoose": "^8.7.2",
+    "import-in-the-middle": "^1.12.0",
+    "mongoose": "^8.9.2",
     "mongoose-encryption-decryption": "^1.2.1",
     "next": "15.1.2",
     "next-auth": "5.0.0-beta.25",
@@ -49,40 +50,41 @@
     "react-confetti": "^6.1.0",
     "react-dom": "19.0.0",
     "react-hot-toast": "^2.4.1",
-    "react-icons": "^5.3.0",
-    "react-use": "^17.5.1",
+    "react-icons": "^5.4.0",
+    "react-use": "^17.6.0",
     "recharts": "^2.15.0",
-    "resend": "^4.0.0",
-    "tailwind-merge": "^2.5.4"
+    "require-in-the-middle": "^7.4.0",
+    "resend": "^4.0.1",
+    "tailwind-merge": "^2.5.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.1",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/node": "^22.7.8",
+    "@testing-library/react": "^16.1.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@types/node": "^22.10.2",
     "@types/react": "19.0.2",
     "@types/react-dom": "19.0.2",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/coverage-v8": "^2.1.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.8",
     "eslint": "^8.57.1",
-    "eslint-config-next": "15.1.1",
+    "eslint-config-next": "15.1.2",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jsx-a11y": "^6.10.1",
-    "husky": "^9.1.6",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "husky": "^9.1.7",
     "jsdom": "^25.0.1",
-    "knip": "^5.33.3",
-    "lint-staged": "^15.2.10",
-    "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3",
-    "vite-tsconfig-paths": "^5.0.1",
-    "vitest": "^2.1.3",
-    "webpack": "^5.95.0"
+    "knip": "^5.41.1",
+    "lint-staged": "^15.2.11",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^2.1.8",
+    "webpack": "^5.97.1"
   },
   "license": "MIT",
   "author": "Volodymyr <vgerun97@gmail.com> (https://volodymyr-g.vercel.app)",