From 0926b922765ca1c51b698f21dcd157947994deb6 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Thu, 20 Jun 2024 21:54:29 +0200
Subject: [PATCH] Style(web-react): Warn about fast refresh problems for
 Storybook speed up

  * @see: https://github.com/ArnaudBarre/eslint-plugin-react-refresh
  * @see: https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works
  * @see: https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react
          #consistent-components-exports
---
 packages/web-react/.eslintrc.js | 14 +++++++++++++-
 packages/web-react/package.json |  1 +
 yarn.lock                       | 10 ++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/web-react/.eslintrc.js b/packages/web-react/.eslintrc.js
index 043067e23e..0a9553d451 100644
--- a/packages/web-react/.eslintrc.js
+++ b/packages/web-react/.eslintrc.js
@@ -14,8 +14,20 @@ module.exports = {
     project: './config/tsconfig.eslint.json',
   },
 
-  plugins: ['promise', 'react', 'prettier'],
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.md'],
+      },
+    },
+  },
+
+  plugins: ['promise', 'react', '@typescript-eslint', 'prettier', 'react-refresh'],
   rules: {
+    // @see: https://github.com/ArnaudBarre/eslint-plugin-react-refresh
+    'react-refresh/only-export-components': 'warn',
+    // @TODO: add to typescript config
+    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
     // we like to use props spreading for additional props in this case
     'react/jsx-props-no-spreading': 'off', // Used inside HOC, that is fine.
     // prefer arrow function over function expression
diff --git a/packages/web-react/package.json b/packages/web-react/package.json
index b59f8c3eba..33278b3f86 100644
--- a/packages/web-react/package.json
+++ b/packages/web-react/package.json
@@ -60,6 +60,7 @@
     "eslint-plugin-promise": "6.2.0",
     "eslint-plugin-react": "7.34.3",
     "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-standard": "5.0.0",
     "glob": "10.4.2",
     "jest": "29.7.0",
diff --git a/yarn.lock b/yarn.lock
index e3e1828d0d..95b47033e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3725,6 +3725,7 @@ __metadata:
     eslint-plugin-promise: "npm:6.2.0"
     eslint-plugin-react: "npm:7.34.3"
     eslint-plugin-react-hooks: "npm:4.6.2"
+    eslint-plugin-react-refresh: "npm:^0.4.7"
     eslint-plugin-standard: "npm:5.0.0"
     glob: "npm:10.4.2"
     html-dom-parser: "npm:5.0.8"
@@ -14623,6 +14624,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react-refresh@npm:^0.4.7":
+  version: 0.4.7
+  resolution: "eslint-plugin-react-refresh@npm:0.4.7"
+  peerDependencies:
+    eslint: ">=7"
+  checksum: 10/acbbe24e40b2b6fe96656e9407e275fdda6db031814674117e7a65d49a7a713f05b0d79dc6426d927b7622ce310a261cff385821c80b2e97089068dcd30bda52
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react@npm:7.34.3":
   version: 7.34.3
   resolution: "eslint-plugin-react@npm:7.34.3"