chore: update to react 19 and add react compiler

.eslintrc.cjs

@@ -1,16 +1,18 @@
 module.exports = {
   extends: ['@it-incubator/eslint-config', 'plugin:storybook/recommended'],
-  plugins: ['myPlugin'],
-  rules: {
-    'myPlugin/no-wrong-redux-import': 'error',
-  },
   overrides: [
     {
       files: ['**/*.stories.tsx'],
       rules: {
-        'react-hooks/rules-of-hooks': 'off',
         'no-console': 'off',
+        'react-hooks/rules-of-hooks': 'off',
       },
     },
   ],
+  plugins: [
+    'eslint-plugin-react-compiler',
+  ],
+  rules: {
+    'react-compiler/react-compiler': "error",
+  },
 }

package.json

@@ -28,9 +28,11 @@
     "@reduxjs/toolkit": "^2.0.1",
     "@storybook/theming": "^7.6.6",
     "async-mutex": "^0.4.0",
+    "babel-plugin-react-compiler": "0.0.0-experimental-c23de8d-20240515",
     "clsx": "^2.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-53bb89e-20240515",
+    "react": "19.0.0-beta-26f2496093-20240514",
+    "react-dom": "19.0.0-beta-26f2496093-20240514",
     "react-hook-form": "^7.49.2",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.1",
@@ -52,8 +54,8 @@
     "@storybook/react-vite": "^7.6.6",
     "@storybook/testing-library": "^0.2.2",
     "@types/node": "^20.10.5",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "npm:types-react@beta",
+    "@types/react-dom": "npm:types-react-dom@beta",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
     "@vitejs/plugin-react": "^4.2.1",
@@ -67,5 +69,9 @@
     "stylelint": "^16.1.0",
     "typescript": "^5.3.3",
     "vite": "5.0.10"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@beta",
+    "@types/react-dom": "npm:types-react-dom@beta"
   }
 }

src/styles/_boilerplate.scss

@@ -14,16 +14,20 @@ html {
 
 button {
   all: unset;
+
   cursor: pointer;
+  user-select: none;
+
   display: inline-flex;
   align-items: center;
+
+  box-sizing: border-box;
+
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   font-style: inherit;
   color: inherit;
-  user-select: none;
-  box-sizing: border-box;
 
   &:focus-visible {
     outline: var(--outline-focus);

vite.config.ts

@@ -3,9 +3,19 @@ import * as path from 'path'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 
+const ReactCompilerConfig = {
+  /* ... */
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
+      },
+    }),
+  ],
   resolve: {
     alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
   },