refactor: update eslint config

Author: Rel1cx

.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = defineConfig({
   extends: [
     "with-tsconfig",
     "plugin:react-hooks/recommended",
-    "plugin:@eslint-react/recommended-legacy",
+    "plugin:@eslint-react/all-legacy",
   ],
   rules: {
     "no-console": [
@@ -20,7 +20,6 @@ module.exports = defineConfig({
       },
     ],
     "sonarjs/no-duplicate-string": "warn",
-    "react/no-unused-prop-types": "off",
     "@typescript-eslint/no-redeclare": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "tailwindcss/no-custom-classname": "off",

src/app.tsx

@@ -8,11 +8,11 @@ import { mantineTheme } from "@/theme/mantine.config";
 
 import * as css from "./app.css";
 
-const Main = lazy(() => import("./pages/Main/Main"));
-const About = lazy(() => import("./pages/About/About"));
-const Preferences = lazy(() => import("./pages/Preferences/Preferences"));
+const Main = lazy(() => import("./pages/main/main"));
+const About = lazy(() => import("./pages/about/about"));
+const Preferences = lazy(() => import("./pages/preferences/preferences"));
 
-export const App = React.memo(() => {
+export const App = React.memo(function App() {
   const preferredColorScheme = useColorScheme();
 
   const theme = useMemo(() => ({ ...mantineTheme, colorScheme: preferredColorScheme }), [preferredColorScheme]);

src/components/Button/Button.tsx

@@ -8,7 +8,7 @@ type ButtonProps =
     onClick?: () => void;
   };
 
-export const Button = React.memo(({ children, ...rest }: ButtonProps) => {
+export const Button = React.memo(function Button({ children, ...rest }: ButtonProps) {
   return (
     <MTButton
       style={{

src/components/Title/Title.tsx

@@ -6,7 +6,7 @@ type TitleProps = {
   children?: React.ReactNode;
 };
 
-export const Title = React.memo(({ children, ...rest }: TitleProps) => {
+export const Title = React.memo(function Title({ children, ...rest }: TitleProps) {
   return (
     <div className={css.title} {...rest}>
       {children}

src/components/button/button.tsx

@@ -0,0 +1,25 @@
+import { Button as MTButton, type ButtonProps as MTButtonProps } from "@mantine/core";
+import React from "react";
+
+type ButtonProps =
+  & MTButtonProps
+  & React.PropsWithChildren
+  & {
+    onClick?: () => void;
+  };
+
+export const Button = React.memo(function Button({ children, ...rest }: ButtonProps) {
+  return (
+    <MTButton
+      style={{
+        transition: "all 120ms ease-out",
+      }}
+      gradient={{ deg: 35, from: "#ed6ea0", to: "#ec8c69" }}
+      size="compact-xs"
+      variant="gradient"
+      {...rest}
+    >
+      {children}
+    </MTButton>
+  );
+});

src/components/title/styles.css.ts

@@ -0,0 +1,15 @@
+import { style } from "@vanilla-extract/css";
+
+export const title = style({
+  margin: "0",
+  padding: "0",
+  color: "rgb(18, 18, 18)",
+  fontWeight: "500",
+  fontSize: "15px",
+
+  "@media": {
+    "(prefers-color-scheme: dark)": {
+      color: "rgb(240, 240, 240)",
+    },
+  },
+});

src/components/title/title.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import * as css from "./styles.css";
+
+type TitleProps = {
+  children?: React.ReactNode;
+};
+
+export const Title = React.memo(function Title({ children, ...rest }: TitleProps) {
+  return (
+    <div className={css.title} {...rest}>
+      {children}
+    </div>
+  );
+});

src/pages/About/About.tsx

@@ -5,7 +5,7 @@ import { suspend } from "suspend-react";
 
 import * as css from "./styles.css";
 
-const About = React.memo(() => {
+const About = React.memo(function App() {
   const name = suspend(getName);
   const version = suspend(getVersion);
 

src/pages/Main/Main.tsx

@@ -5,8 +5,8 @@ import { useAtom, useSetAtom } from "jotai";
 import React from "react";
 
 import { accEnabledAtom, loadDefaultConfig, senAtom, setAccEnabledAtom, setSenAtom } from "@/atoms";
-import { Button } from "@/components/Button/Button";
-import { Title } from "@/components/Title/Title";
+import { Button } from "@/components/button/button";
+import { Title } from "@/components/title/title";
 import { useTranslation } from "@/hooks/useTranslation";
 
 import * as css from "./styles.css";
@@ -31,7 +31,7 @@ const handleOpenPreferences = async () => {
   console.error("Failed to get preferences window");
 };
 
-const Main = React.memo(() => {
+const Main = React.memo(function Main() {
   const T = useTranslation();
 
   const [sen] = useAtom(senAtom);

src/pages/Preferences/Preferences.tsx

@@ -3,7 +3,7 @@ import { useAtom, useSetAtom } from "jotai";
 import React from "react";
 
 import { launchAtLoginAtom, localeAtom } from "@/atoms";
-import { Title } from "@/components/Title/Title";
+import { Title } from "@/components/title/title";
 import { useTranslation } from "@/hooks/useTranslation";
 import { type Locales } from "@/i18n/i18n-types";
 import { isLocale } from "@/i18n/i18n-util";
@@ -31,7 +31,7 @@ const languages: { label: string; value: Locales }[] = [
   { label: "繁體中文", value: "zh-TW" },
 ];
 
-const Preferences = React.memo(() => {
+const Preferences = React.memo(function Preferences() {
   const T = useTranslation();
 
   const [locale, setLocale] = useAtom(localeAtom);