dev: fixed linting

eslint.config.js

@@ -1,13 +1,15 @@
 import doob from '@do-ob/eslint-config';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
+import reactCompiler from 'eslint-plugin-react-compiler';
+import { fixupPluginRules } from '@eslint/compat';
 
 export default [
   ...doob.configs.recommended,
   {
     files: [ '**/*.{jsx,tsx}' ],
     plugins: {
-      react,
+      'react': fixupPluginRules(react),
     },
     languageOptions: {
       parserOptions: {
@@ -23,10 +25,18 @@ export default [
   },
   {
     plugins: {
-      'react-hooks': reactHooks,
+      'react-hooks': fixupPluginRules(reactHooks),
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
     },
-  }
+  },
+  {
+    plugins: {
+      'react-compiler': fixupPluginRules(reactCompiler),
+    },
+    rules: {
+      'react-compiler/react-compiler': 'error',
+    },
+  },
 ];

package.json

@@ -23,6 +23,7 @@
     "@do-ob/eslint-config": "^2.3.0",
     "@do-ob/ts-config": "^2.0.0",
     "@do-ob/vite-lib-config": "^3.0.1",
+    "@eslint/compat": "^1.1.0",
     "@heroicons/react": "^2.1.3",
     "@nextui-org/react": "^2.4.2",
     "@storybook/addon-a11y": "8.2.0-alpha.9",
@@ -42,8 +43,8 @@
     "autoprefixer": "^10.4.19",
     "cssnano": "^7.0.2",
     "eslint": "^9.2.0",
-    "eslint-plugin-next": "^0.0.0",
     "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
     "eslint-plugin-react-hooks": "^4.6.2",
     "framer-motion": "^11.2.10",
     "postcss": "^8.4.38",

packages/ui/src/components/Form/Form.tsx

@@ -51,7 +51,7 @@ export function Form({
     debounceTimeout.current = setTimeout(() => {
       currentTarget.requestSubmit();
     }, changeDefer);
-  }, [ changeDefer, onChange ]);
+  }, [ changeDefer, changeSubmit, onChange ]);
 
   return (
     <form

packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { ThemeButton, SearchButton } from '@do-ob/ui/components';
 import { SocialIcons } from '@do-ob/ui/icons';

packages/ui/src/hooks/useMode.ts

@@ -26,7 +26,7 @@ export function useMode(prefer: ThemeMode = 'light') {
 
     // Clean up the observer
     return () => observer.disconnect();
-  }, []);
+  }, [ mode ]);
 
   const modeToggle = () => {
     const next = mode === 'light' ? 'dark' : 'light';