chore: upgrade deps and add linter rule

.eslintrc.yml

@@ -1,6 +1,8 @@
 ---
 extends:
   - "@ci7lus/eslint-config"
+  - "plugin:react/recommended"
+  - "plugin:eslint-plugin-react-hooks/recommended"
 parserOptions:
   project:
     - "./tsconfig.eslint.json"

annict-schema.gql

@@ -25,7 +25,9 @@ type ActivityEdge {
   annictId: Int!
   # A cursor for use in pagination.
   cursor: String!
-  node: ActivityItem
+  item: ActivityItem
+  # Deprecated: Use `item` instead.
+  node: ActivityItem @deprecated(reason: "Use `item` instead.")
   user: User!
 }
 
@@ -823,7 +825,9 @@ type SeriesWorkConnection {
 type SeriesWorkEdge {
   # A cursor for use in pagination.
   cursor: String!
-  node: Work!
+  item: Work!
+  # Deprecated: Use `item` instead.
+  node: Work! @deprecated(reason: "Use `item` instead.")
   summary: String
   summaryEn: String
 }

package.json

@@ -20,41 +20,47 @@
     "codegen:anilist": "graphql-codegen --config ./anilist-codegen.yml && yarn format:prettier"
   },
   "devDependencies": {
-    "@graphql-codegen/add": "^3.2.3",
-    "@graphql-codegen/cli": "^2.16.4",
-    "@graphql-codegen/typescript": "^2.8.7",
-    "@graphql-codegen/typescript-graphql-request": "^4.5.8",
-    "@graphql-codegen/typescript-operations": "^2.5.12",
-    "@types/cookie": "^0.5.1",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^3.0.1",
-    "concurrently": "^7.6.0",
-    "eslint": "^8.32.0",
+    "@graphql-codegen/add": "^5.0.0",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/typescript": "^4.0.1",
+    "@graphql-codegen/typescript-graphql-request": "^6.0.0",
+    "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@types/cookie": "^0.5.3",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
+    "@vitejs/plugin-react": "^4.1.0",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.52.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.0",
-    "prettier": "^2.8.3",
+    "lint-staged": "^15.0.2",
+    "postcss": "^8.4.31",
+    "postcss-preset-mantine": "^1.9.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --max-warnings 0 --cache",
     "*.{js,ts,tsx,md}": "prettier"
   },
   "dependencies": {
-    "@ci7lus/eslint-config": "^1.1.1",
-    "@emotion/react": "^11.10.5",
-    "@mantine/core": "^5.10.1",
-    "@mantine/hooks": "^5.10.1",
-    "@netlify/functions": "^1.4.0",
-    "axios": "^1.2.3",
+    "@ci7lus/eslint-config": "^1.2.1",
+    "@emotion/react": "^11.11.1",
+    "@mantine/core": "^7.1.5",
+    "@mantine/hooks": "^7.1.5",
+    "@mantine/notifications": "^7.1.5",
+    "@netlify/functions": "^2.3.0",
+    "axios": "^1.5.1",
     "cookie": "^0.5.0",
-    "graphql": "^16.6.0",
-    "mal-ts": "^1.0.1",
+    "graphql": "^16.8.1",
+    "mal-ts": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-query": "^3.39.2",
+    "react-query": "^3.39.3",
     "tabler-icons-react": "^1.56.0"
   }
 }

postcss.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+}

src/App.tsx

@@ -6,18 +6,21 @@ import {
   Anchor,
   Center,
 } from "@mantine/core"
+import { Notifications } from "@mantine/notifications"
+import React from "react"
 import { QueryClientProvider } from "react-query"
 import { Main } from "./components/Main"
 import { queryClient } from "./query"
+// eslint-disable-next-line import/no-unresolved
+import "@mantine/core/styles.css"
+// eslint-disable-next-line import/no-unresolved
+import "@mantine/notifications/styles.css"
 
 export const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <MantineProvider
-        withGlobalStyles
-        withNormalizeCSS
-        theme={{ colorScheme: "dark" }}
-      >
+      <MantineProvider forceColorScheme="dark">
+        <Notifications />
         <Container>
           <Space h="xl" />
           <Main />