Change to using arrow functions (#1603)

* Change to using arrow functions Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Add lint rule --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2023-09-16 02:41:10 +01:00
parent 549335054a
commit 00a3c8ca2b
575 changed files with 2848 additions and 3063 deletions
--- a/packages/eslint-plugin-twenty-ts/src/rules/effect-components.ts
+++ b/packages/eslint-plugin-twenty-ts/src/rules/effect-components.ts
@ -2,11 +2,11 @@ import { TSESTree, ESLintUtils } from "@typescript-eslint/utils";

 const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);

-function checkIsPascalCase(input: string): boolean {
+const checkIsPascalCase = (input: string): boolean => {
  const pascalCaseRegex = /^(?:\p{Uppercase_Letter}\p{Letter}*)+$/u;

  return pascalCaseRegex.test(input);
-}
+};

 const effectComponentsRule = createRule({
  create(context) {
--- a/packages/eslint-plugin-twenty-ts/src/tests/all.spec.ts
+++ b/packages/eslint-plugin-twenty-ts/src/tests/all.spec.ts
@ -16,44 +16,32 @@ const ruleTester = new RuleTester({
 ruleTester.run("effect-components", effectComponentsRule, {
  valid: [
    {
-      code: `function TestComponentEffect() { 
-        return <></>; 
-      }`,
+      code: `const TestComponentEffect = () => <></>;`,
    },
    {
-      code: `function TestComponent() { 
-        return <div></div>; 
-      }`,
+      code: `const TestComponent = () => <div></div>;`,
    },
    {
-      code: `export function useUpdateEffect() { 
-        return null;
-      }`,
+      code: `export const useUpdateEffect = () => null;`,
    },
    {
-      code: `export function useUpdateEffect() { 
-        return <></>;
-      }`,
+      code: `export const useUpdateEffect = () => <></>;`,
    },
    {
-      code: `function TestComponent() { 
-        return <><div></div></>; 
-      }`,
+      code: `const TestComponent = () => <><div></div></>;`,
    },
    {
-      code: `function TestComponentEffect() { 
-        return null; 
-      }`,
+      code: `const TestComponentEffect = () => null;`,
    },
    {
-      code: `function TestComponentEffect() { 
+      code: `const TestComponentEffect = () => { 
        useEffect(() => {}, []);

        return null; 
      }`,
    },
    {
-      code: `function TestComponentEffect() { 
+      code: `const TestComponentEffect = () => { 
        useEffect(() => {}, []);
        
        return <></>; 
@ -76,8 +64,8 @@ ruleTester.run("effect-components", effectComponentsRule, {
  ],
  invalid: [
    {
-      code: "function TestComponent() { return <></>; }",
-      output: 'function TestComponentEffect() { return <></>; }',
+      code: "const TestComponent = () => <></>;",
+      output: 'const TestComponentEffect = () => <></>;',
      errors: [
        {
          messageId: "effectSuffix",
@ -85,8 +73,8 @@ ruleTester.run("effect-components", effectComponentsRule, {
      ],
    },
    {
-      code: "function TestComponentEffect() { return <><div></div></>; }",
-      output: 'function TestComponent() { return <><div></div></>; }',
+      code: "const TestComponentEffect = () => <><div></div></>;",
+      output: 'const TestComponent = () => <><div></div></>;',
      errors: [
        {
          messageId: "noEffectSuffix",
--- a/packages/eslint-plugin-twenty/rules/matching-state-variable.js
+++ b/packages/eslint-plugin-twenty/rules/matching-state-variable.js
@ -12,89 +12,87 @@ module.exports = {
    fixable: "code",
    schema: [],
  },
-  create: function (context) {
-    return {
-      VariableDeclarator(node) {
-        if (
-          node?.init?.callee?.name &&
-          typeof node.init.callee.name === "string" &&
-          [
-            'useRecoilState',
-            'useRecoilFamilyState',
-            'useRecoilSelector',
-            'useRecoilScopedState',
-            'useRecoilScopedFamilyState',
-            'useRecoilScopedSelector',
-            'useRecoilValue',
-          ].includes(node.init.callee.name)
-        ) {
-          const stateNameBase = node.init.arguments?.[0].name;
+  create: (context) => ({
+    VariableDeclarator(node) {
+      if (
+        node?.init?.callee?.name &&
+        typeof node.init.callee.name === "string" &&
+        [
+          "useRecoilState",
+          "useRecoilFamilyState",
+          "useRecoilSelector",
+          "useRecoilScopedState",
+          "useRecoilScopedFamilyState",
+          "useRecoilScopedSelector",
+          "useRecoilValue",
+        ].includes(node.init.callee.name)
+      ) {
+        const stateNameBase = node.init.arguments?.[0].name;

-          if (!stateNameBase) {
+        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;
          }

-          let expectedVariableNameBase = stateNameBase.replace(
-            /(State|FamilyState|Selector|ScopedState|ScopedFamilyState|ScopedSelector)$/,
-            ""
-          );
+          if (node.id.elements?.[1]?.name) {
+            const actualSetterName = node.id.elements[1].name;
+            const expectedSetterName = `set${expectedVariableNameBase
+              .charAt(0)
+              .toUpperCase()}${expectedVariableNameBase.slice(1)}`;

-          if (node.id.type === "Identifier") {
-            const actualVariableName = node.id.name;
-            if (actualVariableName !== expectedVariableNameBase) {
+            if (actualSetterName !== expectedSetterName) {
              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}'.`,
+                message: `Invalid usage of ${node.init.callee.name}: Expected setter '${expectedSetterName}' but found '${actualSetterName}'.`,
                fix(fixer) {
                  return fixer.replaceText(
-                    node.id.elements[0],
-                    expectedVariableNameBase
+                    node.id.elements[1],
+                    expectedSetterName
                  );
                },
              });
-              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
-                    );
-                  },
-                });
-              }
            }
          }
        }
-      },
-    };
-  },
+      }
+    },
+  }),
 };
--- a/packages/eslint-plugin-twenty/rules/no-hardcoded-colors.js
+++ b/packages/eslint-plugin-twenty/rules/no-hardcoded-colors.js
@ -1,24 +1,22 @@
 module.exports = {
-  create: function (context) {
-    return {
-      TaggedTemplateExpression(node) {
-        if (context.getFilename().endsWith('themes.ts')) {
-          return;
+  create: (context) => ({
+    TaggedTemplateExpression(node) {
+      if (context.getFilename().endsWith("themes.ts")) {
+        return;
+      }
+
+      node.quasi.quasis.forEach((quasi) => {
+        const colorRegex =
+          /(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*\d+\.?\d*)?\))|(?:#[0-9a-fA-F]{6})/i;
+
+        if (colorRegex.test(quasi.value.raw)) {
+          context.report({
+            node,
+            message:
+              "Do not use hardcoded RGBA or Hex colors. Please use a color from the theme file.",
+          });
        }
-
-        node.quasi.quasis.forEach((quasi) => {
-          const colorRegex =
-            /(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*\d+\.?\d*)?\))|(?:#[0-9a-fA-F]{6})/i;
-
-          if (colorRegex.test(quasi.value.raw)) {
-            context.report({
-              node,
-              message:
-                'Do not use hardcoded RGBA or Hex colors. Please use a color from the theme file.',
-            });
-          }
-        });
-      },
-    };
-  },
+      });
+    },
+  }),
 };
--- a/packages/eslint-plugin-twenty/rules/sort-css-properties-alphabetically.js
+++ b/packages/eslint-plugin-twenty/rules/sort-css-properties-alphabetically.js
@ -1,26 +1,22 @@
 "use strict";
 const postcss = require("postcss");

-function isStyledTagname(node) {
-  return (
-    (node.tag.type === "Identifier" && node.tag.name === "css") ||
-    (node.tag.type === "MemberExpression" &&
-      node.tag.object.name === "styled") ||
-    (node.tag.type === "CallExpression" &&
-      (node.tag.callee.name === "styled" ||
-        (node.tag.callee.object &&
-          ((node.tag.callee.object.callee &&
-            node.tag.callee.object.callee.name === "styled") ||
-            (node.tag.callee.object.object &&
-              node.tag.callee.object.object.name === "styled")))))
-  );
-}
+const isStyledTagname = (node) =>
+  (node.tag.type === "Identifier" && node.tag.name === "css") ||
+  (node.tag.type === "MemberExpression" && node.tag.object.name === "styled") ||
+  (node.tag.type === "CallExpression" &&
+    (node.tag.callee.name === "styled" ||
+      (node.tag.callee.object &&
+        ((node.tag.callee.object.callee &&
+          node.tag.callee.object.callee.name === "styled") ||
+          (node.tag.callee.object.object &&
+            node.tag.callee.object.object.name === "styled")))));

 /**
 * An atomic rule is a rule without nested rules.
 */
-function isValidAtomicRule(rule) {
-  const decls = rule.nodes.filter(node => node.type === "decl");
+const isValidAtomicRule = (rule) => {
+  const decls = rule.nodes.filter((node) => node.type === "decl");
  if (decls.length < 0) {
    return { isValid: true };
  }
@ -32,12 +28,12 @@ function isValidAtomicRule(rule) {
      const loc = {
        start: {
          line: decls[i - 1].source.start.line,
-          column: decls[i - 1].source.start.column - 1
+          column: decls[i - 1].source.start.column - 1,
        },
        end: {
          line: decls[i].source.end.line,
-          column: decls[i].source.end.column - 1
-        }
+          column: decls[i].source.end.column - 1,
+        },
      };

      return { isValid: false, loc };
@ -45,9 +41,9 @@ function isValidAtomicRule(rule) {
  }

  return { isValid: true };
-}
+};

-function isValidRule(rule) {
+const isValidRule = (rule) => {
  // check each rule recursively
  const { isValid, loc } = rule.nodes.reduce(
    (map, node) => {
@ -63,9 +59,9 @@ function isValidRule(rule) {

  // check declarations
  return isValidAtomicRule(rule);
-}
+};

-function getNodeStyles(node) {
+const getNodeStyles = (node) => {
  const [firstQuasi, ...quasis] = node.quasi.quasis;
  // remove line break added to the first quasi
  const lineBreakCount = node.quasi.loc.start.line - 1;
@ -87,49 +83,47 @@ function getNodeStyles(node) {
  });

  return styles;
-}
+};

-function create(context) {
-  return {
-    TaggedTemplateExpression(node) {
-      if (isStyledTagname(node)) {
-        try {
-          const root = postcss.parse(getNodeStyles(node));
+const create = (context) => ({
+  TaggedTemplateExpression(node) {
+    if (isStyledTagname(node)) {
+      try {
+        const root = postcss.parse(getNodeStyles(node));

-          const { isValid, loc } = isValidRule(root);
+        const { isValid, loc } = isValidRule(root);

-          if (!isValid) {
-            return context.report({
-              node,
-              messageId: "sort-css-properties-alphabetically",
-              loc,
-              fix: fixer =>
-                fix({
-                  rule: root,
-                  fixer,
-                  src: context.getSourceCode()
-                })
-            });
-          }
-        } catch (e) {
-          return true;
+        if (!isValid) {
+          return context.report({
+            node,
+            messageId: "sort-css-properties-alphabetically",
+            loc,
+            fix: (fixer) =>
+              fix({
+                rule: root,
+                fixer,
+                src: context.getSourceCode(),
+              }),
+          });
        }
+      } catch (e) {
+        return true;
      }
    }
-  };
-}
+  },
+});

-function fix({ rule, fixer, src }) {
+const fix = ({ rule, fixer, src }) => {
  let fixings = [];

  // concat fixings recursively
-  rule.nodes.forEach(node => {
+  rule.nodes.forEach((node) => {
    if (node.type === "rule") {
      fixings = [...fixings, ...fix({ rule: node, fixer, src })];
    }
  });

-  const declarations = rule.nodes.filter(node => node.type === "decl");
+  const declarations = rule.nodes.filter((node) => node.type === "decl");
  const sortedDeclarations = sortDeclarations(declarations);

  declarations.forEach((decl, idx) => {
@ -138,7 +132,7 @@ function fix({ rule, fixer, src }) {
        const range = getDeclRange({ decl, src });
        const sortedDeclText = getDeclText({
          decl: sortedDeclarations[idx],
-          src
+          src,
        });

        fixings.push(fixer.removeRange([range.startIdx, range.endIdx + 1]));
@ -154,55 +148,51 @@ function fix({ rule, fixer, src }) {
    }
  });
  return fixings;
-}
+};

-function areSameDeclarations(a, b) {
-  return (
-    a.source.start.line === b.source.start.line &&
-    a.source.start.column === b.source.start.column
-  );
-}
+const areSameDeclarations = (a, b) =>
+  a.source.start.line === b.source.start.line &&
+  a.source.start.column === b.source.start.column;

-function getDeclRange({ decl, src }) {
+const getDeclRange = ({ decl, src }) => {
  const loc = {
    start: {
      line: decl.source.start.line,
-      column: decl.source.start.column - 1
+      column: decl.source.start.column - 1,
    },
    end: {
      line: decl.source.end.line,
-      column: decl.source.end.column - 1
-    }
+      column: decl.source.end.column - 1,
+    },
  };

  const startIdx = src.getIndexFromLoc(loc.start);
  const endIdx = src.getIndexFromLoc(loc.end);
  return { startIdx, endIdx };
-}
+};

-function getDeclText({ decl, src }) {
+const getDeclText = ({ decl, src }) => {
  const { startIdx, endIdx } = getDeclRange({ decl, src });
  return src.getText().substring(startIdx, endIdx + 1);
-}
+};

-function sortDeclarations(declarations) {
-  return declarations
+const sortDeclarations = (declarations) =>
+  declarations
    .slice()
    .sort((declA, declB) => (declA.prop > declB.prop ? 1 : -1));
-}

 module.exports = {
  meta: {
    docs: {
      description: "Styles are sorted alphabetically.",
      category: "Fill me in",
-      recommended: false
+      recommended: false,
    },
    messages: {
      "sort-css-properties-alphabetically":
-        "Declarations should be sorted alphabetically."
+        "Declarations should be sorted alphabetically.",
    },
-    fixable: "code"
+    fixable: "code",
  },
-  create
-};
+  create,
+};
--- a/packages/twenty-cli/src/config.ts
+++ b/packages/twenty-cli/src/config.ts
@ -1,7 +1,7 @@
 import { exec } from 'child_process';

-export function execShell(cmd: string): Promise<string> {
-  return new Promise((resolve, reject) => {
+export const execShell = (cmd: string): Promise<string> =>
+  new Promise((resolve, reject) => {
    exec(cmd, (error, stdout, stderr) => {
      if (error) {
        console.warn(`Error: ${error.message}`);
@ -11,7 +11,6 @@ export function execShell(cmd: string): Promise<string> {
      resolve(stdout ? stdout : stderr);
    });
  });
-}

 export const REPO_URL = 'https://github.com/twentyhq/twenty.git';
 export const CLONE_DIR = 'twenty';
--- a/packages/twenty-cli/src/install/index.ts
+++ b/packages/twenty-cli/src/install/index.ts
@ -2,7 +2,7 @@ import gradient from 'gradient-string';
 import chalk from 'chalk';
 import { PromptObject } from 'prompts';

-export function showWelcomeScreen() {
+export const showWelcomeScreen = () => {
  const logo = `
                                                                                        
  &&&&&&&&&&&&&      &&&&&&&&&&&&&           
@ -31,7 +31,7 @@ export function showWelcomeScreen() {
  );
  console.log(chalk.bold(`Let's get you started!\n\n`));
  /* eslint-enable  no-console */
-}
+};

 export const firstQuestion: PromptObject = {
  type: 'select',