Remove the {...props} pattern and props coupling, and create an eslint rule for that (#1733)

* Remove the {...props} pattern and props coupling, and create an eslint rule for that

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

* Add another test to the new rule

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

---------

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

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

@@ -4,6 +4,7 @@ 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

@@ -0,0 +1,31 @@
+"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/developer/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/developer/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

@@ -0,0 +1,34 @@
+"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,6 +2,7 @@ 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

@@ -0,0 +1,36 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+const createRule = ESLintUtils.RuleCreator(
+  () =>
+    "https://docs.twenty.com/developer/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/developer/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

@@ -0,0 +1,35 @@
+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",
+        },
+      ],
+    },
+  ],
+});