Fix eslint-plugin-twenty (#1640)

* Fixed color rule

* Fixed naming

* Fix effect component rule

* Deactivated broken rules

* Fixed lint

* Complete eslint-plugin-twenty work

---------

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

front/src/modules/ui/checkmark/components/AnimatedCheckmark.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import { motion } from 'framer-motion';
 
 export type CheckmarkProps = React.ComponentProps<typeof motion.path> & {
@@ -9,28 +10,31 @@ export type CheckmarkProps = React.ComponentProps<typeof motion.path> & {
 
 export const AnimatedCheckmark = ({
   isAnimating = false,
-  color = '#FFF',
+  color,
   duration = 0.5,
   size = 28,
   ...restProps
-}: CheckmarkProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 52 52"
-    width={size}
-    height={size}
-  >
-    <motion.path
-      {...restProps}
-      fill="none"
-      stroke={color}
-      strokeWidth={4}
-      d="M14 27l7.8 7.8L38 14"
-      pathLength="1"
-      strokeDasharray="1"
-      strokeDashoffset={isAnimating ? '1' : '0'}
-      animate={{ strokeDashoffset: isAnimating ? '0' : '1' }}
-      transition={{ duration }}
-    />
-  </svg>
-);
+}: CheckmarkProps) => {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 52 52"
+      width={size}
+      height={size}
+    >
+      <motion.path
+        {...restProps}
+        fill="none"
+        stroke={color ?? theme.grayScale.gray0}
+        strokeWidth={4}
+        d="M14 27l7.8 7.8L38 14"
+        pathLength="1"
+        strokeDasharray="1"
+        strokeDashoffset={isAnimating ? '1' : '0'}
+        animate={{ strokeDashoffset: isAnimating ? '0' : '1' }}
+        transition={{ duration }}
+      />
+    </svg>
+  );
+};

front/src/modules/ui/input/components/DoubleTextInputEdit.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 
 import { StyledInput } from '@/ui/input/components/TextInput';
-import { ComputeNodeDimensionsEffect } from '@/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect';
+import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions';
 
 export type DoubleTextInputEditProps = {
   firstValue: string;
@@ -40,7 +40,7 @@ export const DoubleTextInputEdit = ({
   onChange,
 }: DoubleTextInputEditProps) => (
   <StyledDoubleTextContainer>
-    <ComputeNodeDimensionsEffect node={firstValue || firstValuePlaceholder}>
+    <ComputeNodeDimensions node={firstValue || firstValuePlaceholder}>
       {(nodeDimensions) => (
         <StyledTextInput
           width={nodeDimensions?.width}
@@ -51,8 +51,8 @@ export const DoubleTextInputEdit = ({
           }}
         />
       )}
-    </ComputeNodeDimensionsEffect>
-    <ComputeNodeDimensionsEffect node={secondValue || secondValuePlaceholder}>
+    </ComputeNodeDimensions>
+    <ComputeNodeDimensions node={secondValue || secondValuePlaceholder}>
       {(nodeDimensions) => (
         <StyledTextInput
           width={nodeDimensions?.width}
@@ -64,6 +64,6 @@ export const DoubleTextInputEdit = ({
           }}
         />
       )}
-    </ComputeNodeDimensionsEffect>
+    </ComputeNodeDimensions>
   </StyledDoubleTextContainer>
 );

front/src/modules/ui/input/components/Toggle.tsx

@@ -20,7 +20,7 @@ const StyledContainer = styled.div<ContainerProps>`
 `;
 
 const StyledCircle = styled(motion.div)`
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.background.primary};
   border-radius: 50%;
   height: 16px;
   width: 16px;

front/src/modules/ui/input/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx

@@ -35,7 +35,7 @@ const meta: Meta<typeof SingleEntitySelect> = {
   },
   render: (args) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const searchFilter = useRecoilScopedValue(
+    const relationPickerSearchFilter = useRecoilScopedValue(
       relationPickerSearchFilterScopedState,
     );
 
@@ -45,7 +45,7 @@ const meta: Meta<typeof SingleEntitySelect> = {
         entitiesToSelect={entities.filter(
           (entity) =>
             entity.id !== args.selectedEntity?.id &&
-            entity.name.includes(searchFilter),
+            entity.name.includes(relationPickerSearchFilter),
         )}
       />
     );

front/src/modules/ui/theme/constants/colors.ts

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/no-hardcoded-colors */
 import hexRgb from 'hex-rgb';
 
 export const grayScale = {

front/src/modules/ui/theme/constants/theme.ts

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/no-hardcoded-colors */
 import { accentDark, accentLight } from './accent';
 import { animation } from './animation';
 import { backgroundDark, backgroundLight } from './background';

front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx

@@ -14,7 +14,7 @@ const StyledNodeWrapper = styled.span`
   visibility: hidden;
 `;
 
-export const ComputeNodeDimensionsEffect = ({
+export const ComputeNodeDimensions = ({
   children,
   node = children(undefined),
 }: ComputeNodeDimensionsEffectProps) => {

front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -3,6 +3,9 @@ import {
   boxesIntersect,
   useSelectionContainer,
 } from '@air/react-drag-to-select';
+import { useTheme } from '@emotion/react';
+
+import { rgba } from '@/ui/theme/constants/colors';
 
 import { useDragSelect } from '../hooks/useDragSelect';
 
@@ -17,6 +20,7 @@ export const DragSelect = ({
   onDragSelectionChange,
   onDragSelectionStart,
 }: OwnProps) => {
+  const theme = useTheme();
   const { isDragSelectionStartEnabled } = useDragSelect();
   const { DragSelection } = useSelectionContainer({
     shouldStartSelecting: (target) => {
@@ -56,8 +60,8 @@ export const DragSelect = ({
     },
     selectionProps: {
       style: {
-        border: '1px solid #4C85D8',
-        background: 'rgba(155, 193, 239, 0.4)',
+        border: `1px solid ${theme.color.blue10}`,
+        background: rgba(theme.color.blue30, 0.4),
         position: `absolute`,
         zIndex: 99,
       },