Replaced eslint rule twenty/no-spread-props to react/jsx-props-no-spreading (#1976)

* Replaced eslint rule twenty/no-spread-props to react/jsx-props-no-spreading

* Disable props spread on external libraries

---------

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

front/.eslintrc.js

@@ -68,7 +68,6 @@ module.exports = {
     'simple-import-sort/exports': 'error',
     'twenty/effect-components': 'error',
     'twenty/no-hardcoded-colors': 'error',
-    'twenty/no-spread-props': 'error',
     'twenty/matching-state-variable': 'error',
     'twenty/component-props-naming': 'error',
     'twenty/sort-css-properties-alphabetically': 'error',
@@ -76,6 +75,11 @@ module.exports = {
     'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
     "@typescript-eslint/no-unused-vars": "off",
     "no-unused-vars": "off",
+    "react/jsx-props-no-spreading": [
+      "error", {
+        "explicitSpread": "ignore",
+      }
+    ],
     "react-hooks/exhaustive-deps": [
       "warn", {
         "additionalHooks": "useRecoilCallback"

front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx

@@ -28,6 +28,7 @@ export const SpreadsheetImportProvider = (
         <SpreadsheetImport
           isOpen={true}
           onClose={handleClose}
+          // eslint-disable-next-line react/jsx-props-no-spreading
           {...spreadsheetImport.options}
         />
       )}

front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx

@@ -125,9 +125,15 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
   });
 
   return (
-    <StyledContainer {...getRootProps()}>
+    <StyledContainer
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...getRootProps()}
+    >
       {isDragActive && <StyledOverlay />}
-      <input {...getInputProps()} />
+      <input
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...getInputProps()}
+      />
       {isDragActive ? (
         <StyledText>Drop file here...</StyledText>
       ) : loading || isLoading ? (

front/src/modules/ui/board/components/EntityBoardCard.tsx

@@ -36,7 +36,9 @@ export const EntityBoardCard = ({
       {(draggableProvided) => (
         <div
           ref={draggableProvided?.innerRef}
+          // eslint-disable-next-line react/jsx-props-no-spreading
           {...draggableProvided?.dragHandleProps}
+          // eslint-disable-next-line react/jsx-props-no-spreading
           {...draggableProvided?.draggableProps}
           className="entity-board-card"
           data-selectable-id={cardId}

front/src/modules/ui/board/components/EntityBoardColumn.tsx

@@ -46,6 +46,7 @@ const BoardColumnCardsContainer = ({
   return (
     <StyledColumnCardsContainer
       ref={droppableProvided?.innerRef}
+      // eslint-disable-next-line react/jsx-props-no-spreading
       {...droppableProvided?.droppableProps}
     >
       {children}
@@ -105,6 +106,7 @@ export const EntityBoardColumn = ({
               {(draggableProvided) => (
                 <div
                   ref={draggableProvided?.innerRef}
+                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...draggableProvided?.draggableProps}
                 >
                   <StyledNewCardButtonContainer>

front/src/modules/ui/draggable-list/components/DraggableItem.tsx

@@ -29,22 +29,22 @@ export const DraggableItem = ({
         return (
           <div
             ref={draggableProvided.innerRef}
-            {...{
-              ...draggableProvided.draggableProps,
-              style: {
-                ...draggableStyle,
-                left: 'auto',
-                top: 'auto',
-                transform: draggableStyle?.transform?.replace(
-                  /\(-?\d+px,/,
-                  '(0,',
-                ),
-                background: isDragged
-                  ? theme.background.transparent.light
-                  : 'none',
-              },
-            }}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...draggableProvided.draggableProps}
+            // eslint-disable-next-line react/jsx-props-no-spreading
             {...draggableProvided.dragHandleProps}
+            style={{
+              ...draggableStyle,
+              left: 'auto',
+              top: 'auto',
+              transform: draggableStyle?.transform?.replace(
+                /\(-?\d+px,/,
+                '(0,',
+              ),
+              background: isDragged
+                ? theme.background.transparent.light
+                : 'none',
+            }}
           >
             {itemComponent}
           </div>

front/src/modules/ui/draggable-list/components/DraggableList.tsx

@@ -26,7 +26,11 @@ export const DraggableList = ({
       <StyledDragDropItemsWrapper>
         <Droppable droppableId={v4Persistable}>
           {(provided) => (
-            <div ref={provided.innerRef} {...provided.droppableProps}>
+            <div
+              ref={provided.innerRef}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...provided.droppableProps}
+            >
               {draggableItems}
               {provided.placeholder}
             </div>