Add an ESLint rule to prevent the usage of useRef other than for HTML elements. (#2014)

* Add an ESLint rule to prevent the usage of useRef other than for HTML elements

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Bump eslint version and rewrite rule

* Fix

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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 () => {

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(() => {

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 = () => {