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>

packages/eslint-plugin-twenty-ts/dist/index.js

@@ -4,7 +4,6 @@ module.exports = {
     rules: {
         "effect-components": require("./src/rules/effect-components"),
         "no-hardcoded-colors": require("./src/rules/no-hardcoded-colors"),
-        "no-spread-props": require('./src/rules/no-spread-props'),
         "matching-state-variable": require("./src/rules/matching-state-variable"),
         "sort-css-properties-alphabetically": require("./src/rules/sort-css-properties-alphabetically"),
         "styled-components-prefixed-with-styled": require("./src/rules/styled-components-prefixed-with-styled"),

packages/eslint-plugin-twenty-ts/dist/src/rules/no-spread-props.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const utils_1 = require("@typescript-eslint/utils");
-const createRule = utils_1.ESLintUtils.RuleCreator(() => "https://docs.twenty.com/contributor/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements");
-const noSpreadPropsRule = createRule({
-    create: (context) => ({
-        JSXSpreadAttribute: (node) => {
-            if (node.argument.type === "Identifier") {
-                context.report({
-                    node,
-                    messageId: "noSpreadProps",
-                });
-            }
-        },
-    }),
-    name: "no-spread-props",
-    meta: {
-        docs: {
-            description: "Disallow passing props as {...props} in React components.",
-        },
-        messages: {
-            noSpreadProps: `Single variable prop spreading is disallowed in JSX elements.\nPrefer explicitly listing out all props or using an object expression like so: \`{...{ prop1, prop2 }}\`.\nSee https://docs.twenty.com/contributor/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements for more information.`,
-        },
-        type: "suggestion",
-        schema: [],
-        fixable: "code",
-    },
-    defaultOptions: [],
-});
-module.exports = noSpreadPropsRule;
-exports.default = noSpreadPropsRule;

packages/eslint-plugin-twenty-ts/dist/src/tests/no-spread-props.spec.js

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const rule_tester_1 = require("@typescript-eslint/rule-tester");
-const no_spread_props_1 = __importDefault(require("../rules/no-spread-props"));
-const ruleTester = new rule_tester_1.RuleTester({
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-      project: "./tsconfig.json",
-      tsconfigRootDir: __dirname,
-      ecmaFeatures: {
-        jsx: true,
-      },
-    },
-  });
-ruleTester.run("no-spread-props", no_spread_props_1.default, {
-    valid: [
-        {
-          code: "<MyComponent prop1={value} prop2={value} />",
-        },
-      ],
-      invalid: [
-        {
-          code: "<MyComponent {...props} />",
-          errors: [
-            {
-              messageId: "noSpreadProps",
-            },
-          ],
-        },
-      ],
-});

packages/eslint-plugin-twenty/index.ts

@@ -2,7 +2,6 @@ module.exports = {
   rules: {
     "effect-components": require("./src/rules/effect-components"),
     "no-hardcoded-colors": require("./src/rules/no-hardcoded-colors"),
-    "no-spread-props": require("./src/rules/no-spread-props"),
     "matching-state-variable": require("./src/rules/matching-state-variable"),
     "sort-css-properties-alphabetically": require("./src/rules/sort-css-properties-alphabetically"),
     "styled-components-prefixed-with-styled": require("./src/rules/styled-components-prefixed-with-styled"),

packages/eslint-plugin-twenty/src/rules/no-spread-props.ts

@@ -1,36 +0,0 @@
-import { ESLintUtils } from "@typescript-eslint/utils";
-
-const createRule = ESLintUtils.RuleCreator(
-  () =>
-    "https://docs.twenty.com/contributor/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements",
-);
-
-const noSpreadPropsRule = createRule({
-  create: (context) => ({
-    JSXSpreadAttribute: (node) => {
-      if (node.argument.type === "Identifier") {
-        context.report({
-          node,
-          messageId: "noSpreadProps",
-        });
-      }
-    },
-  }),
-  name: "no-spread-props",
-  meta: {
-    docs: {
-      description: "Disallow passing props as {...props} in React components.",
-    },
-    messages: {
-      noSpreadProps: `Single variable prop spreading is disallowed in JSX elements.\nPrefer explicitly listing out all props or using an object expression like so: \`{...{ prop1, prop2 }}\`.\nSee https://docs.twenty.com/contributor/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements for more information.`,
-    },
-    type: "suggestion",
-    schema: [],
-    fixable: "code",
-  },
-  defaultOptions: [],
-});
-
-module.exports = noSpreadPropsRule;
-
-export default noSpreadPropsRule;

packages/eslint-plugin-twenty/src/tests/no-spread-props.spec.ts

@@ -1,35 +0,0 @@
-import { RuleTester } from "@typescript-eslint/rule-tester";
-
-import noSpreadPropsRule from "../rules/no-spread-props";
-
-const ruleTester = new RuleTester({
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: "./tsconfig.json",
-    tsconfigRootDir: __dirname,
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-});
-
-ruleTester.run("no-spread-props", noSpreadPropsRule, {
-  valid: [
-    {
-      code: "<MyComponent prop1={value} prop2={value} />",
-    },
-    {
-      code: "<MyComponent {...{prop1, prop2}} />",
-    },
-  ],
-  invalid: [
-    {
-      code: "<MyComponent {...props} />",
-      errors: [
-        {
-          messageId: "noSpreadProps",
-        },
-      ],
-    },
-  ],
-});