[ESLint rule]: recoil value and setter should be named after their at… (#1402)

* Override unwanted changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>

* Fix the tests

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

packages/eslint-plugin-twenty/index.js

@@ -2,11 +2,13 @@
 const noHardcodedColors = require('./rules/no-hardcoded-colors');
 const cssAlphabetically = require('./rules/sort-css-properties-alphabetically');
 const styledComponentsPrefixedWithStyled = require('./rules/styled-components-prefixed-with-styled');
+const matchingStateVariable = require('./rules/matching-state-variable');
 
 module.exports = {
   rules: {
     'no-hardcoded-colors': noHardcodedColors,
     'sort-css-properties-alphabetically': cssAlphabetically,
     'styled-components-prefixed-with-styled': styledComponentsPrefixedWithStyled,
+    'matching-state-variable': matchingStateVariable
   },
 };

packages/eslint-plugin-twenty/rules/matching-state-variable.js

@@ -0,0 +1,92 @@
+"use strict";
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Ensure recoil value and setter are named after their atom name",
+      category: "Possible Errors",
+      recommended: true,
+    },
+    fixable: "code",
+    schema: [],
+  },
+  create: function (context) {
+    return {
+      VariableDeclarator(node) {
+        if (
+          node?.init?.callee?.name &&
+          typeof node.init.callee.name === "string" &&
+          node.init.callee.name.startsWith("useRecoil")
+        ) {
+          const stateNameBase = node.init.arguments?.[0].name;
+
+          if (!stateNameBase) {
+            return;
+          }
+
+          let expectedVariableNameBase = stateNameBase.replace(
+            /(State|FamilyState|Selector|ScopedState|ScopedFamilyState|ScopedSelector)$/,
+            ""
+          );
+
+          if (node.id.type === "Identifier") {
+            const actualVariableName = node.id.name;
+            if (actualVariableName !== expectedVariableNameBase) {
+              context.report({
+                node,
+                message: `Invalid usage of ${node.init.callee.name}: the value should be named '${expectedVariableNameBase}' but found '${actualVariableName}'.`,
+                fix(fixer) {
+                  return fixer.replaceText(node.id, expectedVariableNameBase);
+                },
+              });
+            }
+            return;
+          }
+
+          if (node.id.type === "ArrayPattern") {
+            const actualVariableName = node.id.elements?.[0]?.name;
+
+            if (
+              actualVariableName &&
+              actualVariableName !== expectedVariableNameBase
+            ) {
+              context.report({
+                node,
+                message: `Invalid usage of ${node.init.callee.name}: the value should be named '${expectedVariableNameBase}' but found '${actualVariableName}'.`,
+                fix(fixer) {
+                  return fixer.replaceText(
+                    node.id.elements[0],
+                    expectedVariableNameBase
+                  );
+                },
+              });
+              return;
+            }
+
+            if (node.id.elements?.[1]?.name) {
+              const actualSetterName = node.id.elements[1].name;
+              const expectedSetterName = `set${expectedVariableNameBase
+                .charAt(0)
+                .toUpperCase()}${expectedVariableNameBase.slice(1)}`;
+
+              if (actualSetterName !== expectedSetterName) {
+                context.report({
+                  node,
+                  message: `Invalid usage of ${node.init.callee.name}: Expected setter '${expectedSetterName}' but found '${actualSetterName}'.`,
+                  fix(fixer) {
+                    return fixer.replaceText(
+                      node.id.elements[1],
+                      expectedSetterName
+                    );
+                  },
+                });
+              }
+            }
+          }
+        }
+      },
+    };
+  },
+};