Update dependencies and fix ESLint warnings

.eslintrc.cjs

@@ -162,6 +162,7 @@ module.exports = {
       files: ['src/common/components/ui/**/*.ts?(x)'],
       rules: {
         'react/prop-types': 'off',
+        'tailwindcss/enforces-shorthand': 'off',
         '@typescript-eslint/consistent-type-definitions': 'off',
         '@typescript-eslint/no-empty-interface': 'off',
       },

package.json

@@ -49,8 +49,8 @@
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
     "@reflet/http": "1.0.0",
-    "@tanstack/react-query": "5.17.10",
-    "@tanstack/react-query-devtools": "5.17.10",
+    "@tanstack/react-query": "5.17.12",
+    "@tanstack/react-query-devtools": "5.17.12",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",
     "dayjs": "1.11.10",
@@ -85,8 +85,8 @@
     "@total-typescript/ts-reset": "0.5.1",
     "@tsconfig/strictest": "2.0.2",
     "@tsconfig/vite-react": "3.0.0",
-    "@types/node": "20.11.0",
-    "@types/react": "18.2.47",
+    "@types/node": "20.11.1",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "6.18.1",
     "@typescript-eslint/parser": "6.18.1",
@@ -103,7 +103,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-prefer-function-component": "3.3.0",
     "eslint-plugin-sonarjs": "0.23.0",
-    "eslint-plugin-tailwindcss": "3.13.1",
+    "eslint-plugin-tailwindcss": "3.14.0",
     "eslint-plugin-testing-library": "6.2.0",
     "eslint-plugin-unicorn": "50.0.1",
     "eslint-plugin-vitest": "0.3.20",
@@ -115,7 +115,7 @@
     "msw": "2.0.14",
     "postcss": "8.4.33",
     "postcss-nesting": "12.0.2",
-    "prettier": "3.2.1",
+    "prettier": "3.2.2",
     "prettier-plugin-packagejson": "2.4.9",
     "prettier-plugin-tailwindcss": "0.5.11",
     "rollup-plugin-visualizer": "5.12.0",

src/app/Root.tsx

@@ -38,7 +38,7 @@ export default Root;
 
 const TailwindIndicator = () =>
   import.meta.env.PROD ? null : (
-    <div className="fixed bottom-3 left-24 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-gray-800 font-mono text-white">
+    <div className="fixed bottom-3 left-24 z-50 flex size-14 items-center justify-center rounded-full bg-gray-800 font-mono text-white">
       <div className="block sm:hidden">xs</div>
       <div className="hidden sm:block md:hidden">sm</div>
       <div className="hidden md:block lg:hidden">md</div>

src/common/components/Loading/index.tsx

@@ -8,7 +8,7 @@ const Loading = () => {
 
   return (
     <div className="flex h-full items-center justify-center gap-x-2">
-      <Loader2 className="h-4 w-4 animate-spin" />
+      <Loader2 className="size-4 animate-spin" />
       <Typography variant="mutedText">{t('common:loading')}</Typography>
     </div>
   );

src/common/components/Logo/index.tsx

@@ -8,7 +8,7 @@ type Props = {
 const Logo = ({ to }: Props) => (
   <Link to={to}>
     <div className="flex gap-2">
-      <Rocket className="h-6 w-6" />
+      <Rocket className="size-6" />
       <span className="font-medium">React Starter</span>
     </div>
   </Link>

src/common/components/StickyHeader/index.tsx

@@ -75,7 +75,7 @@ const Drawer = ({ headerSlot, items }: DrawerProps) => {
     <Sheet open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
       <SheetTrigger asChild>
         <Button variant="ghost" size="icon">
-          <Menu className="h-5 w-5" />
+          <Menu className="size-5" />
           <span className="sr-only">{t('common:stickyHeader.toggleDrawer')}</span>
         </Button>
       </SheetTrigger>

src/features/auth/components/Header/LanguageDropdown.tsx

@@ -20,7 +20,7 @@ const LanguageDropdown = () => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon">
-          <Languages className="h-5 w-5" />
+          <Languages className="size-5" />
           <span className="sr-only">{t('auth:header.chooseLanguage')}</span>
         </Button>
       </DropdownMenuTrigger>

src/features/auth/components/Header/ThemeDropdown.tsx

@@ -20,8 +20,8 @@ const ThemeDropdown = () => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon">
-          <Sun className="h-5 w-5 dark:hidden" />
-          <Moon className="hidden h-5 w-5 dark:block" />
+          <Sun className="size-5 dark:hidden" />
+          <Moon className="hidden size-5 dark:block" />
           <span className="sr-only">{t('auth:header.chooseTheme')}</span>
         </Button>
       </DropdownMenuTrigger>

src/features/dashboard/components/Header/UserDropdown.tsx

@@ -36,7 +36,7 @@ const UserDropdown = ({ email }: Props) => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <div className="flex cursor-pointer items-center gap-2">
-          <Avatar className="h-8 w-8">
+          <Avatar className="size-8">
             <AvatarFallback>{email.slice(0, 2)}</AvatarFallback>
           </Avatar>
           <Typography variant="smallText">{email}</Typography>

src/features/dashboard/features/bookshelf/components/ActionButtons.tsx

@@ -41,7 +41,7 @@ export const AddToReadingListButton = ({ bookId }: { bookId: string }) => {
   return (
     <ActionButton
       isPending={isPending}
-      icon={<BookPlus className="h-5 w-5" />}
+      icon={<BookPlus className="size-5" />}
       label={t('bookshelf:action.addToReadingList')}
       onClick={() => mutate({ bookId, userId }, { onError })}
     />
@@ -58,7 +58,7 @@ export const RemoveFromReadingListButton = ({ bookId }: { bookId: string }) => {
     <ActionButton
       variant="destructive"
       isPending={isPending}
-      icon={<BookMinus className="h-5 w-5" />}
+      icon={<BookMinus className="size-5" />}
       label={t('bookshelf:action.removeFromReadingList')}
       onClick={() => mutate({ bookId, userId }, { onError })}
     />
@@ -74,7 +74,7 @@ export const MarkAsReadButton = ({ bookId }: { bookId: string }) => {
   return (
     <ActionButton
       isPending={isPending}
-      icon={<BookCheck className="h-5 w-5" />}
+      icon={<BookCheck className="size-5" />}
       label={t('bookshelf:action.markAsRead')}
       onClick={() => mutate({ bookId, userId, finished: true }, { onError })}
     />
@@ -90,7 +90,7 @@ export const MarkAsUnreadButton = ({ bookId }: { bookId: string }) => {
   return (
     <ActionButton
       isPending={isPending}
-      icon={<BookX className="h-5 w-5" />}
+      icon={<BookX className="size-5" />}
       label={t('bookshelf:action.markAsUnread')}
       onClick={() => mutate({ bookId, userId, finished: false }, { onError })}
     />

src/features/dashboard/features/bookshelf/components/List.tsx

@@ -27,7 +27,7 @@ type Props = {
 const List = ({ books }: Props) =>
   books.length === 0 ? (
     <div className="flex h-full items-center justify-center">
-      <CircleOff className="h-14 w-14" />
+      <CircleOff className="size-14" />
     </div>
   ) : (
     <div className="flex flex-col gap-4">