Chore(front): Create a custom eslint rule for Props naming (#1904)

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

packages/eslint-plugin-twenty/src/rules/component-props-naming.ts

@@ -0,0 +1,84 @@
+import {
+  AST_NODE_TYPES,
+  ESLintUtils,
+  TSESTree,
+} from "@typescript-eslint/utils";
+import { RuleContext } from "@typescript-eslint/utils/ts-eslint";
+
+const createRule = ESLintUtils.RuleCreator(
+  () => "https://docs.twenty.com/developer/frontend/style-guide#props",
+);
+
+const checkPropsTypeName = (
+  node: TSESTree.FunctionDeclaration | TSESTree.ArrowFunctionExpression,
+  context: Readonly<RuleContext<"invalidPropsTypeName", never[]>>,
+  functionName: string,
+) => {
+  const expectedPropTypeName = `${functionName}Props`;
+
+  if (/^[A-Z]/.test(functionName)) {
+    node.params.forEach((param) => {
+      if (
+        (param.type === AST_NODE_TYPES.ObjectPattern ||
+          param.type === AST_NODE_TYPES.Identifier) &&
+        param.typeAnnotation?.typeAnnotation?.type ===
+          AST_NODE_TYPES.TSTypeReference &&
+        param.typeAnnotation.typeAnnotation.typeName.type ===
+          AST_NODE_TYPES.Identifier
+      ) {
+        const { typeName } = param.typeAnnotation.typeAnnotation;
+        const actualPropTypeName = typeName.name;
+        if (actualPropTypeName !== expectedPropTypeName) {
+          context.report({
+            node: param,
+            messageId: "invalidPropsTypeName",
+            data: { expectedPropTypeName, actualPropTypeName },
+            fix: (fixer) => fixer.replaceText(typeName, expectedPropTypeName),
+          });
+        }
+      }
+    });
+  }
+};
+
+const componentPropsNamingRule = createRule({
+  create: (context) => {
+    return {
+      ArrowFunctionExpression: (node) => {
+        if (
+          node.parent.type === AST_NODE_TYPES.VariableDeclarator &&
+          node.parent.id.type === AST_NODE_TYPES.Identifier
+        ) {
+          const functionName = node.parent?.id?.name;
+
+          checkPropsTypeName(node, context, functionName);
+        }
+      },
+      FunctionDeclaration: (node) => {
+        if (node.id?.name) {
+          const functionName = node.id.name;
+
+          checkPropsTypeName(node, context, functionName);
+        }
+      },
+    };
+  },
+  name: "component-props-naming",
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Ensure component props follow naming convention",
+      recommended: "recommended",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      invalidPropsTypeName:
+        "Expected prop type to be '{{ expectedPropTypeName }}' but found '{{ actualPropTypeName }}'",
+    },
+  },
+  defaultOptions: [],
+});
+
+module.exports = componentPropsNamingRule;
+export default componentPropsNamingRule;

packages/eslint-plugin-twenty/src/tests/component-props-naming.spec.ts

@@ -0,0 +1,47 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+
+import componentPropsNamingRule from "../rules/component-props-naming";
+
+const ruleTester = new RuleTester({
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run("component-props-naming", componentPropsNamingRule, {
+  valid: [
+    {
+      code: "export const MyComponent= (props: MyComponentProps) => <div>{props.message}</div>;",
+    },
+    {
+      code: "export const MyComponent = ({ message }: MyComponentProps) => <div>{message}</div>;",
+    },
+  ],
+  invalid: [
+    {
+      code: "export const MyComponent = (props: OwnProps) => <div>{props.message}</div>;",
+      errors: [
+        {
+          messageId: "invalidPropsTypeName",
+        },
+      ],
+      output:
+        "export const MyComponent = (props: MyComponentProps) => <div>{props.message}</div>;",
+    },
+    {
+      code: "export const MyComponent = ({ message }: OwnProps) => <div>{message}</div>;",
+      errors: [
+        {
+          messageId: "invalidPropsTypeName",
+        },
+      ],
+      output:
+        "export const MyComponent = ({ message }: MyComponentProps) => <div>{message}</div>;",
+    },
+  ],
+});