twentyhq · charlesBochet · Oct 14, 2023 · Oct 13, 2023 · Oct 14, 2023 · Oct 14, 2023
diff --git a/front/.eslintrc.js b/front/.eslintrc.js
@@ -16,7 +16,8 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'plugin:storybook/recommended',
-    'react-app',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
   ],
   root: true,
   env: {
@@ -33,6 +34,12 @@ module.exports = {
     {
       files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
       rules: {
+        'react/no-unescaped-entities': 'off',
+        'react/prop-types': 'off',
+        'react/jsx-key': 'off',
+        'react/display-name': 'off',
+        'react/jsx-uses-react': 'off',
+        'react/react-in-jsx-scope': 'off',
         'no-control-regex': 0,
         'simple-import-sort/imports': [
           'error',
@@ -72,6 +79,7 @@ module.exports = {
     'twenty/component-props-naming': 'error',
     'twenty/sort-css-properties-alphabetically': 'error',
     'twenty/styled-components-prefixed-with-styled': 'error',
+    'twenty/no-state-useref': 'error',
     'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
     "@typescript-eslint/no-unused-vars": "off",
     "no-unused-vars": "off",
@@ -108,5 +116,10 @@ module.exports = {
     ],
     "@typescript-eslint/consistent-type-imports": ["error", { "prefer": "no-type-imports" }],
     'no-console': ['error', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
+  },
+  settings: {
+    "react": {
+      "version": "detect"
+    }
   }
 };
diff --git a/front/package.json b/front/package.json
@@ -87,22 +87,6 @@
     "chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
     "install": "yarn eslint-plugin:setup"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
   "overrides": {
     "react-refresh": "0.14.0"
   },
@@ -157,7 +141,8 @@
     "@types/react-datepicker": "^4.11.2",
     "@types/scroll-into-view": "^1.16.0",
     "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
     "@typescript-eslint/utils": "^6.7.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "chromatic": "^6.18.0",
@@ -166,7 +151,6 @@
     "dotenv-cli": "^7.2.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "^7.0.1",
     "eslint-config-standard-with-typescript": "^23.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-n": "^15.5.1",

diff --git a/front/src/hooks/useFirstMountState.ts b/front/src/hooks/useFirstMountState.ts
@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 
 export const useFirstMountState = (): boolean => {
+  // eslint-disable-next-line twenty/no-state-useref
   const isFirst = useRef(true);
 
   if (isFirst.current) {

diff --git a/front/src/modules/apollo/hooks/useApolloFactory.ts b/front/src/modules/apollo/hooks/useApolloFactory.ts
@@ -13,6 +13,7 @@ import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 import { ApolloFactory } from '../services/apollo.factory';
 
 export const useApolloFactory = () => {
+  // eslint-disable-next-line twenty/no-state-useref
   const apolloRef = useRef<ApolloFactory<NormalizedCacheObject> | null>(null);
   const [isDebugMode] = useRecoilState(isDebugModeState);
 

diff --git a/front/src/modules/ui/data/field/meta-types/input/components/internal/DateInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/internal/DateInput.tsx
@@ -50,7 +50,7 @@ export const DateInput = ({
 
   const [internalValue, setInternalValue] = useState(value);
 
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom-start',

diff --git a/front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx
@@ -64,7 +64,7 @@ export const PhoneInput = ({
 }: PhoneInputProps) => {
   const [internalValue, setInternalValue] = useState<string | undefined>(value);
 
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setInternalValue(value);

diff --git a/front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx
@@ -36,7 +36,7 @@ export const TextInput = ({
 }: TextInputProps) => {
   const [internalText, setInternalText] = useState(value);
 
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLInputElement>(null);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setInternalText(event.target.value);

diff --git a/front/src/modules/ui/feedback/progress-bar/components/ProgressBar.tsx b/front/src/modules/ui/feedback/progress-bar/components/ProgressBar.tsx
@@ -49,7 +49,9 @@ export const ProgressBar = forwardRef<ProgressBarControls, ProgressBarProps>(
     const theme = useTheme();
 
     const controls = useAnimation();
+    // eslint-disable-next-line twenty/no-state-useref
     const startTimestamp = useRef<number>(0);
+    // eslint-disable-next-line twenty/no-state-useref
     const remainingTime = useRef<number>(duration);
 
     const start = useCallback(async () => {

diff --git a/front/src/modules/ui/feedback/snack-bar/components/SnackBar.tsx b/front/src/modules/ui/feedback/snack-bar/components/SnackBar.tsx
@@ -116,6 +116,7 @@ export const SnackBar = ({
 }: SnackBarProps) => {
   const theme = useTheme();
 
+  // eslint-disable-next-line twenty/no-state-useref
   const progressBarRef = useRef<ProgressBarControls | null>(null);
 
   const closeSnackbar = useCallback(() => {

diff --git a/front/src/modules/ui/feedback/snack-bar/hooks/usePausableTimeout.ts b/front/src/modules/ui/feedback/snack-bar/hooks/usePausableTimeout.ts
@@ -1,9 +1,13 @@
 import { useCallback, useEffect, useRef } from 'react';
 
 export const usePausableTimeout = (callback: () => void, delay: number) => {
+  // eslint-disable-next-line twenty/no-state-useref
   const savedCallback = useRef<() => void>(callback);
+  // eslint-disable-next-line twenty/no-state-useref
   const remainingTime = useRef<number>(delay);
+  // eslint-disable-next-line twenty/no-state-useref
   const startTime = useRef<number>(Date.now());
+  // eslint-disable-next-line twenty/no-state-useref
   const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const tick = () => {

diff --git a/front/src/modules/ui/layout/board/components/BoardColumnMenu.tsx b/front/src/modules/ui/layout/board/components/BoardColumnMenu.tsx
@@ -54,7 +54,7 @@ export const BoardColumnMenu = ({
   const [currentMenu, setCurrentMenu] = useState('actions');
   const column = useContext(BoardColumnContext);
 
-  const boardColumnMenuRef = useRef(null);
+  const boardColumnMenuRef = useRef<HTMLDivElement>(null);
 
   const { enqueueSnackBar } = useSnackBar();
   const createCompanyProgress = useCreateCompanyProgress();

diff --git a/front/src/modules/ui/layout/dropdown/components/DropdownMenuContainer.tsx b/front/src/modules/ui/layout/dropdown/components/DropdownMenuContainer.tsx
@@ -28,7 +28,7 @@ export const DropdownMenuContainer = ({
   onClose,
   width,
 }: DropdownMenuContainerProps) => {
-  const dropdownRef = useRef(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   useListenClickOutside({
     refs: [dropdownRef],

diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
@@ -51,7 +51,7 @@ export const RightDrawer = () => {
 
   const { closeRightDrawer } = useRightDrawer();
 
-  const rightDrawerRef = useRef(null);
+  const rightDrawerRef = useRef<HTMLDivElement>(null);
 
   useListenClickOutside({
     refs: [rightDrawerRef],

diff --git a/front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx b/front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx
@@ -37,7 +37,7 @@ export const ActionBar = ({ selectedIds }: ActionBarProps) => {
   const actionBarOpen = useRecoilValue(actionBarOpenState);
   const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
   const actionBarEntries = useRecoilValue(actionBarEntriesState);
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   if (selectedIds.length === 0 || !actionBarOpen || contextMenuIsOpen) {
     return null;

diff --git a/front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx b/front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx
@@ -47,7 +47,7 @@ export const ContextMenu = ({ selectedIds }: ContextMenuProps) => {
   const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
   const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
   const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   useListenClickOutside({
     refs: [wrapperRef],

diff --git a/...dules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx b/...dules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx
@@ -6,8 +6,8 @@ import { useListenClickOutside } from '../useListenClickOutside';
 const onOutsideClick = jest.fn();
 
 const TestComponentDomMode = () => {
-  const buttonRef = useRef(null);
-  const buttonRef2 = useRef(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const buttonRef2 = useRef<HTMLButtonElement>(null);
   useListenClickOutside({
     refs: [buttonRef, buttonRef2],
     callback: onOutsideClick,

diff --git a/front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx b/front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx
@@ -18,6 +18,7 @@ export const RecoilScope = ({
   scopeId?: string;
   CustomRecoilScopeContext?: RecoilScopeContextType;
 }) => {
+  // eslint-disable-next-line twenty/no-state-useref
   const currentScopeId = useRef(scopeId ?? v4());
 
   return CustomRecoilScopeContext ? (

diff --git a/front/yarn.lock b/front/yarn.lock
@@ -1863,6 +1863,11 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.6.2.tgz#1816b5f6948029c5eaacb0703b850ee0cb37d8f8"
   integrity sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==
 
+"@eslint-community/regexpp@^4.5.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.9.1.tgz#449dfa81a57a1d755b09aa58d826c1262e4283b4"
+  integrity sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==
+
 "@eslint/eslintrc@^2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
@@ -5932,7 +5937,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^5.45.0", "@typescript-eslint/eslint-plugin@^5.5.0":
+"@typescript-eslint/eslint-plugin@^5.5.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
   integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
@@ -5948,6 +5953,23 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/eslint-plugin@^6.7.5":
+  version "6.7.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.5.tgz#f4024b9f63593d0c2b5bd6e4ca027e6f30934d4f"
+  integrity sha512-JhtAwTRhOUcP96D0Y6KYnwig/MRQbOoLGXTON2+LlyB/N35SP9j1boai2zzwXb7ypKELXMx3DVk9UTaEq1vHEw==
+  dependencies:
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "6.7.5"
+    "@typescript-eslint/type-utils" "6.7.5"
+    "@typescript-eslint/utils" "6.7.5"
+    "@typescript-eslint/visitor-keys" "6.7.5"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/experimental-utils@^5.0.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.62.0.tgz#14559bf73383a308026b427a4a6129bae2146741"
@@ -5965,6 +5987,17 @@
     "@typescript-eslint/typescript-estree" "5.62.0"
     debug "^4.3.4"
 
+"@typescript-eslint/parser@^6.7.5":
+  version "6.7.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.7.5.tgz#8d7ca3d1fbd9d5a58cc4d30b2aa797a760137886"
+  integrity sha512-bIZVSGx2UME/lmhLcjdVc7ePBwn7CLqKarUBL4me1C5feOd663liTGjMBGVcGr+BhnSLeP4SgwdvNnnkbIdkCw==
+  dependencies:
+    "@typescript-eslint/scope-manager" "6.7.5"
+    "@typescript-eslint/types" "6.7.5"
+    "@typescript-eslint/typescript-estree" "6.7.5"
+    "@typescript-eslint/visitor-keys" "6.7.5"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
@@ -5981,6 +6014,14 @@
     "@typescript-eslint/types" "6.7.0"
     "@typescript-eslint/visitor-keys" "6.7.0"
 
+"@typescript-eslint/scope-manager@6.7.5":
+  version "6.7.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.7.5.tgz#1cf33b991043886cd67f4f3600b8e122fc14e711"
+  integrity sha512-GAlk3eQIwWOJeb9F7MKQ6Jbah/vx1zETSDw8likab/eFcqkjSD7BI75SDAeC5N2L0MmConMoPvTsmkrg71+B1A==
+  dependencies:
+    "@typescript-eslint/types" "6.7.5"
+    "@typescript-eslint/visitor-keys" "6.7.5"
+
 "@typescript-eslint/type-utils@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
@@ -5991,6 +6032,16 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
+"@typescript-eslint/type-utils@6.7.5":
+  version "6.7.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.7.5.tgz#0a65949ec16588d8956f6d967f7d9c84ddb2d72a"
+  integrity sha512-Gs0qos5wqxnQrvpYv+pf3XfcRXW6jiAn9zE/K+DlmYf6FcpxeNYN0AIETaPR7rHO4K2UY+D0CIbDP9Ut0U4m1g==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "6.7.5"
+    "@typescript-eslint/utils" "6.7.5"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/types@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
@@ -6001,6 +6052,11 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.7.0.tgz#8de8ba9cafadc38e89003fe303e219c9250089ae"
   integrity sha512-ihPfvOp7pOcN/ysoj0RpBPOx3HQTJTrIN8UZK+WFd3/iDeFHHqeyYxa4hQk4rMhsz9H9mXpR61IzwlBVGXtl9Q==
 
+"@typescript-eslint/types@6.7.5":
+  version "6.7.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.7.5.tgz#4571320fb9cf669de9a95d9849f922c3af809790"
+  integrity sha512-WboQBlOXtdj1tDFPyIthpKrUb+kZf2VroLZhxKa/VlwLlLyqv/PwUNgL30BlTVZV1Wu4Asu2mMYPqarSO4L5ZQ==
+
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
@@ -6027,6 +6083,19 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/typescript-estree@6.7.5":
+  version "6.7.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.7.5.tgz#4578de1a26e9f24950f029a4f00d1bfe41f15a39"
+  integrity sha512-NhJiJ4KdtwBIxrKl0BqG1Ur+uw7FiOnOThcYx9DpOGJ/Abc9z2xNzLeirCG02Ig3vkvrc2qFLmYSSsaITbKjlg==
+  dependencies:
+    "@typescript-eslint/types" "6.7.5"
+    "@typescript-eslint/visitor-keys" "6.7.5"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/utils@5.62.0", "@typescript-eslint/utils@^5.45.0", "@typescript-eslint/utils@^5.58.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
@@ -6041,6 +6110,19 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
+"@typescript-eslint/utils@6.7.5":
+  version "6.7.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.7.5.tgz#ab847b53d6b65e029314b8247c2336843dba81ab"
+  integrity sha512-pfRRrH20thJbzPPlPc4j0UNGvH1PjPlhlCMq4Yx7EGjV7lvEeGX0U6MJYe8+SyFutWgSHsdbJ3BXzZccYggezA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "6.7.5"
+    "@typescript-eslint/types" "6.7.5"
+    "@typescript-eslint/typescript-estree" "6.7.5"
+    semver "^7.5.4"
+
 "@typescript-eslint/utils@^6.7.0":
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.7.0.tgz#61b6f1f1b82ad529abfcee074d21764e880886fb"
@@ -6070,6 +6152,14 @@
     "@typescript-eslint/types" "6.7.0"
     eslint-visitor-keys "^3.4.1"
 
+"@typescript-eslint/visitor-keys@6.7.5":
+  version "6.7.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.7.5.tgz#84c68d6ceb5b12d5246b918b84f2b79affd6c2f1"
+  integrity sha512-3MaWdDZtLlsexZzDSdQWsFQ9l9nL8B80Z4fImSpyllFC/KLqWQRdEcB+gGGO+N3Q2uL40EsG66wZLsohPxNXvg==
+  dependencies:
+    "@typescript-eslint/types" "6.7.5"
+    eslint-visitor-keys "^3.4.1"
+
 "@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
@@ -11596,7 +11686,7 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.1.1, ignore@^5.2.0:
+ignore@^5.1.1, ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==