Fix eslint-plugin-twenty (#1640)

* Fixed color rule

* Fixed naming

* Fix effect component rule

* Deactivated broken rules

* Fixed lint

* Complete eslint-plugin-twenty work

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
     'unused-imports',
     'simple-import-sort',
     'prefer-arrow',
-    'twenty-ts',
+    'twenty',
   ],
   extends: [
     'plugin:@typescript-eslint/recommended',
@@ -60,11 +60,11 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     'simple-import-sort/imports': 'error',
     'simple-import-sort/exports': 'error',
-    'twenty-ts/effect-components': 'error',
+    'twenty/effect-components': 'error',
-    'twenty-ts/no-hardcoded-colors': 'error',
+    'twenty/no-hardcoded-colors': 'error',
-    'twenty-ts/matching-state-variable': 'error',
+    'twenty/matching-state-variable': 'error',
-    'twenty-ts/sort-css-properties-alphabetically': 'error',
+    'twenty/sort-css-properties-alphabetically': 'error',
-    'twenty-ts/styled-components-prefixed-with-styled': 'error',
+    'twenty/styled-components-prefixed-with-styled': 'error',
     'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
     "@typescript-eslint/no-unused-vars": "off",
     "no-unused-vars": "off",

front/package.json

@@ -69,7 +69,7 @@
     "test": "craco test",
     "coverage": "craco test --coverage .",
     "lint": "eslint src --max-warnings=0",
-    "lint:setup": "cd ../packages/eslint-plugin-twenty-ts/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty-ts",
+    "lint:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty",
     "storybook:dev": "storybook dev -p 6006 -s ../public",
     "storybook:test": "test-storybook",
     "storybook:test-slow": "test-storybook --maxWorkers=3",
@@ -167,7 +167,7 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-twenty-ts": "file:../packages/eslint-plugin-twenty-ts",
+    "eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
     "eslint-plugin-unused-imports": "^3.0.0",
     "http-server": "^14.1.1",
     "mock-apollo-client": "^1.2.1",

front/src/modules/apollo/utils/format-title.ts

@@ -1,10 +1,15 @@
 import { OperationType } from '../types/operation-type';
 
 const operationTypeColors = {
+  // eslint-disable-next-line twenty/no-hardcoded-colors
   query: '#03A9F4',
+  // eslint-disable-next-line twenty/no-hardcoded-colors
   mutation: '#61A600',
+  // eslint-disable-next-line twenty/no-hardcoded-colors
   subscription: '#61A600',
+  // eslint-disable-next-line twenty/no-hardcoded-colors
   error: '#F51818',
+  // eslint-disable-next-line twenty/no-hardcoded-colors
   default: '#61A600',
 };
 

front/src/modules/apollo/utils/index.ts

@@ -66,6 +66,7 @@ export const loggerLink = (getSchemaName: (operation: Operation) => string) =>
           errors.forEach((err: any) => {
             console.log(
               `%c${err.message}`,
+              // eslint-disable-next-line twenty/no-hardcoded-colors
               'color: #F51818; font-weight: lighter',
             );
           });

front/src/modules/people/components/PeopleEntityTableDataEffect.tsx

@@ -6,7 +6,7 @@ import {
 
 import { useSetPeopleEntityTable } from '../hooks/useSetPeopleEntityTable';
 
-export const PeopleEntityTableData = ({
+export const PeopleEntityTableDataEffect = ({
   orderBy = [
     {
       createdAt: SortOrder.Desc,

front/src/modules/ui/checkmark/components/AnimatedCheckmark.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import { motion } from 'framer-motion';
 
 export type CheckmarkProps = React.ComponentProps<typeof motion.path> & {
@@ -9,11 +10,13 @@ export type CheckmarkProps = React.ComponentProps<typeof motion.path> & {
 
 export const AnimatedCheckmark = ({
   isAnimating = false,
-  color = '#FFF',
+  color,
   duration = 0.5,
   size = 28,
   ...restProps
-}: CheckmarkProps) => (
+}: CheckmarkProps) => {
+  const theme = useTheme();
+  return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 52 52"
@@ -23,7 +26,7 @@ export const AnimatedCheckmark = ({
       <motion.path
         {...restProps}
         fill="none"
-      stroke={color}
+        stroke={color ?? theme.grayScale.gray0}
         strokeWidth={4}
         d="M14 27l7.8 7.8L38 14"
         pathLength="1"
@@ -34,3 +37,4 @@ export const AnimatedCheckmark = ({
       />
     </svg>
   );
+};

front/src/modules/ui/input/components/DoubleTextInputEdit.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 
 import { StyledInput } from '@/ui/input/components/TextInput';
-import { ComputeNodeDimensionsEffect } from '@/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect';
+import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions';
 
 export type DoubleTextInputEditProps = {
   firstValue: string;
@@ -40,7 +40,7 @@ export const DoubleTextInputEdit = ({
   onChange,
 }: DoubleTextInputEditProps) => (
   <StyledDoubleTextContainer>
-    <ComputeNodeDimensionsEffect node={firstValue || firstValuePlaceholder}>
+    <ComputeNodeDimensions node={firstValue || firstValuePlaceholder}>
       {(nodeDimensions) => (
         <StyledTextInput
           width={nodeDimensions?.width}
@@ -51,8 +51,8 @@ export const DoubleTextInputEdit = ({
           }}
         />
       )}
-    </ComputeNodeDimensionsEffect>
+    </ComputeNodeDimensions>
-    <ComputeNodeDimensionsEffect node={secondValue || secondValuePlaceholder}>
+    <ComputeNodeDimensions node={secondValue || secondValuePlaceholder}>
       {(nodeDimensions) => (
         <StyledTextInput
           width={nodeDimensions?.width}
@@ -64,6 +64,6 @@ export const DoubleTextInputEdit = ({
           }}
         />
       )}
-    </ComputeNodeDimensionsEffect>
+    </ComputeNodeDimensions>
   </StyledDoubleTextContainer>
 );

front/src/modules/ui/input/components/Toggle.tsx

@@ -20,7 +20,7 @@ const StyledContainer = styled.div<ContainerProps>`
 `;
 
 const StyledCircle = styled(motion.div)`
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.background.primary};
   border-radius: 50%;
   height: 16px;
   width: 16px;

front/src/modules/ui/input/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx

@@ -35,7 +35,7 @@ const meta: Meta<typeof SingleEntitySelect> = {
   },
   render: (args) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const searchFilter = useRecoilScopedValue(
+    const relationPickerSearchFilter = useRecoilScopedValue(
       relationPickerSearchFilterScopedState,
     );
 
@@ -45,7 +45,7 @@ const meta: Meta<typeof SingleEntitySelect> = {
         entitiesToSelect={entities.filter(
           (entity) =>
             entity.id !== args.selectedEntity?.id &&
-            entity.name.includes(searchFilter),
+            entity.name.includes(relationPickerSearchFilter),
         )}
       />
     );

front/src/modules/ui/theme/constants/colors.ts

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/no-hardcoded-colors */
 import hexRgb from 'hex-rgb';
 
 export const grayScale = {

front/src/modules/ui/theme/constants/theme.ts

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/no-hardcoded-colors */
 import { accentDark, accentLight } from './accent';
 import { animation } from './animation';
 import { backgroundDark, backgroundLight } from './background';

front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx

@@ -14,7 +14,7 @@ const StyledNodeWrapper = styled.span`
   visibility: hidden;
 `;
 
-export const ComputeNodeDimensionsEffect = ({
+export const ComputeNodeDimensions = ({
   children,
   node = children(undefined),
 }: ComputeNodeDimensionsEffectProps) => {

front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -3,6 +3,9 @@ import {
   boxesIntersect,
   useSelectionContainer,
 } from '@air/react-drag-to-select';
+import { useTheme } from '@emotion/react';
+
+import { rgba } from '@/ui/theme/constants/colors';
 
 import { useDragSelect } from '../hooks/useDragSelect';
 
@@ -17,6 +20,7 @@ export const DragSelect = ({
   onDragSelectionChange,
   onDragSelectionStart,
 }: OwnProps) => {
+  const theme = useTheme();
   const { isDragSelectionStartEnabled } = useDragSelect();
   const { DragSelection } = useSelectionContainer({
     shouldStartSelecting: (target) => {
@@ -56,8 +60,8 @@ export const DragSelect = ({
     },
     selectionProps: {
       style: {
-        border: '1px solid #4C85D8',
+        border: `1px solid ${theme.color.blue10}`,
-        background: 'rgba(155, 193, 239, 0.4)',
+        background: rgba(theme.color.blue30, 0.4),
         position: `absolute`,
         zIndex: 99,
       },

front/yarn.lock

@@ -9829,8 +9829,8 @@ eslint-plugin-testing-library@^5.0.1:
   dependencies:
     "@typescript-eslint/utils" "^5.58.0"
 
-"eslint-plugin-twenty-ts@file:../packages/eslint-plugin-twenty-ts":
+"eslint-plugin-twenty@file:../packages/eslint-plugin-twenty":
-  version "1.0.2"
+  version "1.0.3"
 
 eslint-plugin-unused-imports@^3.0.0:
   version "3.0.0"

packages/eslint-plugin-twenty-ts/src/rules/effect-components.ts

@@ -1,114 +0,0 @@
-import { TSESTree, ESLintUtils } from "@typescript-eslint/utils";
-
-const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
-
-const checkIsPascalCase = (input: string): boolean => {
-  const pascalCaseRegex = /^(?:\p{Uppercase_Letter}\p{Letter}*)+$/u;
-
-  return pascalCaseRegex.test(input);
-};
-
-const effectComponentsRule = createRule({
-  create(context) {
-    const checkThatNodeIsEffectComponent = (node: TSESTree.FunctionDeclaration | TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression) => {
-      const isPascalCase = checkIsPascalCase(node.id?.name ?? "");
-
-      if(!isPascalCase) {
-        return;
-      }
-    
-      const isReturningFragmentOrNull = (
-        // Direct return of JSX fragment, e.g., () => <></>
-        (node.body.type === 'JSXFragment' && node.body.children.length === 0) ||
-        // Direct return of null, e.g., () => null
-        (node.body.type === 'Literal' && node.body.value === null) ||
-        // Return JSX fragment or null from block
-        (node.body.type === 'BlockStatement' && 
-         node.body.body.some(statement => 
-           statement.type === 'ReturnStatement' && 
-           (
-             // Empty JSX fragment return, e.g., return <></>;
-             (statement.argument?.type === 'JSXFragment' && statement.argument.children.length === 0) || 
-             // Empty React.Fragment return, e.g., return <React.Fragment></React.Fragment>;
-             (statement.argument?.type === 'JSXElement' && 
-              statement.argument.openingElement.name.type === 'JSXIdentifier' && 
-              statement.argument.openingElement.name.name === 'React.Fragment' &&
-              statement.argument.children.length === 0) ||
-             // Literal null return, e.g., return null;
-             (statement.argument?.type === 'Literal' && statement.argument.value === null)
-           )
-         ))
-      );      
-    
-      const hasEffectSuffix = node.id?.name.endsWith("Effect");
-
-      const hasEffectSuffixButIsNotEffectComponent = hasEffectSuffix && !isReturningFragmentOrNull
-      const isEffectComponentButDoesNotHaveEffectSuffix = !hasEffectSuffix && isReturningFragmentOrNull;
-    
-      if(isEffectComponentButDoesNotHaveEffectSuffix) {
-        context.report({
-          node,
-          messageId: "effectSuffix",
-          data: {
-            componentName: node.id?.name,
-          },
-          fix(fixer) {
-            if (node.id) {
-              return fixer.replaceText(
-                node.id,
-                node.id?.name + "Effect",
-              );
-            }
-    
-            return null;
-          },
-        });
-      } else if(hasEffectSuffixButIsNotEffectComponent) {
-        context.report({
-          node,
-          messageId: "noEffectSuffix",
-          data: {
-            componentName: node.id?.name,
-          },
-          fix(fixer) {
-            if (node.id) {
-              return fixer.replaceText(
-                node.id,
-                node.id?.name.replace("Effect", ""),
-              );
-            }
-    
-            return null;
-          },
-        });
-      }
-    }
-
-    return {
-      ArrowFunctionExpression: checkThatNodeIsEffectComponent,
-      FunctionDeclaration: checkThatNodeIsEffectComponent,
-      FunctionExpression: checkThatNodeIsEffectComponent,
-    };
-  },
-  name: "effect-components",
-  meta: {
-    docs: {
-      description:
-        "Effect components should end with the Effect suffix. This rule checks only components that are in PascalCase and that return a JSX fragment or null. Any renderProps or camelCase components are ignored.",
-    },
-    messages: {
-      effectSuffix:
-        "Effect component {{ componentName }} should end with the Effect suffix.",
-      noEffectSuffix:
-        "Component {{ componentName }} shouldn't end with the Effect suffix because it doesn't return a JSX fragment or null.",
-    },
-    type: "suggestion",
-    schema: [],
-    fixable: "code",
-  },
-  defaultOptions: [],
-});
-
-module.exports = effectComponentsRule;
-
-export default effectComponentsRule;

packages/eslint-plugin-twenty-ts/src/rules/no-hardcoded-colors.ts

@@ -1,49 +0,0 @@
-import { TSESTree, ESLintUtils } from "@typescript-eslint/utils";
-
-const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
-
-const noHardcodedColorsRule = createRule({
-  create(context) {
-    return {
-      TaggedTemplateExpression(node: TSESTree.TaggedTemplateExpression) {
-        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,
-              messageId: "hardcodedColor",
-              data: {
-                color: quasi.value.raw,
-              },
-            });
-          }
-        });
-      },
-    };
-  },
-  name: "no-hardcoded-colors",
-  meta: {
-    docs: {
-      description:
-        "Do not use hardcoded RGBA or Hex colors. Please use a color from the theme file.",
-    },
-    messages: {
-      hardcodedColor:
-        "Hardcoded color {{ color }} found. Please use a color from the theme file.",
-    },
-    type: "suggestion",
-    schema: [],
-    fixable: "code",
-  },
-  defaultOptions: [],
-});
-
-module.exports = noHardcodedColorsRule;
-
-export default noHardcodedColorsRule;

packages/eslint-plugin-twenty-ts/src/rules/styled-components-prefixed-with-styled.ts

@@ -1,51 +0,0 @@
-import { TSESTree, ESLintUtils, AST_NODE_TYPES } from "@typescript-eslint/utils";
-
-const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
-
-const styledComponentsPrefixedWithStyledRule = createRule({
-  create(context) {
-    return {
-      VariableDeclarator: (node: TSESTree.VariableDeclarator) => {
-        const templateExpr = node.init
-        if (templateExpr?.type !== AST_NODE_TYPES.TaggedTemplateExpression) {
-          return;
-        }
-        const tag = templateExpr.tag
-        const tagged = tag.type === AST_NODE_TYPES.MemberExpression ? tag.object
-                          : tag.type === AST_NODE_TYPES.CallExpression ? tag.callee
-                          : null 
-        if (tagged?.type === AST_NODE_TYPES.Identifier && tagged.name === 'styled') {
-          const variable = node.id as TSESTree.Identifier;
-          if (variable.name.startsWith('Styled')) {
-            return;
-          }
-          context.report({
-            node,
-            messageId: 'noStyledPrefix',
-            data: {
-              componentName: variable.name
-            }
-          });
-        }
-      },
-    }
-  },
-  name: 'styled-components-prefixed-with-styled',
-  meta: {
-    type: 'suggestion',
-    docs: {
-      description: 'Warn when StyledComponents are not prefixed with Styled',
-      recommended: "recommended"
-    },
-    messages: {
-      noStyledPrefix: '{{componentName}} is a StyledComponent and is not prefixed with Styled.',
-    },
-    fixable: 'code',
-    schema: [],
-  },
-  defaultOptions: []
-});
-
-module.exports = styledComponentsPrefixedWithStyledRule;
-
-export default styledComponentsPrefixedWithStyledRule;

packages/eslint-plugin-twenty-ts/src/tests/matching-state-variable.spec.ts

@@ -1,47 +0,0 @@
-import { RuleTester } from "@typescript-eslint/rule-tester";
-import matchingStateVariableRule from "../rules/matching-state-variable";
-
-const ruleTester = new RuleTester({
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: "./tsconfig.json",
-    tsconfigRootDir: __dirname,
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-});
-
-ruleTester.run('matching-state-variable', matchingStateVariableRule, {
-  valid: [
-    {
-      code: 'const variable = useRecoilValue(variableState);',
-    },
-    {
-      code: 'const [variable, setVariable] = useRecoilState(variableState);',
-    },
-  ],
-  invalid: [
-    {
-      code: 'const myValue = useRecoilValue(variableState);',
-      errors: [
-        {
-          messageId: 'invalidVariableName',
-        },
-      ],
-      output: 'const variable = useRecoilValue(variableState);',
-    },
-    {
-      code: 'const [myValue, setMyValue] = useRecoilState(variableState);',
-      errors: [
-        {
-          messageId: 'invalidVariableName',
-        },
-        {
-          messageId: 'invalidSetterName',
-        },
-      ],
-      output: 'const [variable, setVariable] = useRecoilState(variableState);',
-    },
-  ],
-});

packages/eslint-plugin-twenty-ts/src/tests/sort-css-properties-alphabetically.spec.ts

@@ -1,58 +0,0 @@
-import { RuleTester } from "@typescript-eslint/rule-tester";
-import sortCssPropertiesAlphabeticallyRule from "../rules/sort-css-properties-alphabetically";
-
-const ruleTester = new RuleTester({
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: "./tsconfig.json",
-    tsconfigRootDir: __dirname,
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-});
-
-ruleTester.run("sort-css-properties-alphabetically", sortCssPropertiesAlphabeticallyRule, {
-  valid: [
-    {
-      code: 'const style = css`color: red;`;',
-      filename: 'react.tsx',
-    },
-    {
-      code: 'const style = styled.div`background-color: $bgColor;`;',
-      filename: 'react.tsx',
-    },
-  ],
-  invalid: [
-    {
-      code: 'const style = css`color: #FF0000;`;',
-      filename: 'react.tsx',
-      errors: [
-        {
-          messageId: "sort-css-properties-alphabetically",
-          suggestions: [
-            {
-              messageId: "sort-css-properties-alphabetically",
-              output: 'const style = css`color: red;`;',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      code: 'const style = styled.div`background-color: $bgColor; color: #FFFFFF;`;',
-      filename: 'react.tsx',
-      errors: [
-        {
-          messageId: "sort-css-properties-alphabetically",
-          suggestions: [
-            {
-              messageId: "sort-css-properties-alphabetically",
-              output: 'const style = styled.div`background-color: $bgColor; color: white;`;',
-            },
-          ],
-        },
-      ],
-    },
-  ],
-});

packages/eslint-plugin-twenty-ts/src/tests/styled-components-prefixed-with-styled.spec.ts

@@ -1,46 +0,0 @@
-import { RuleTester } from "@typescript-eslint/rule-tester";
-import styledComponentsPrefixedWithStyledRule from "../rules/styled-components-prefixed-with-styled";
-
-const ruleTester = new RuleTester({
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: "./tsconfig.json",
-    tsconfigRootDir: __dirname,
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-});
-
-ruleTester.run("styled-components-prefixed-with-styled", styledComponentsPrefixedWithStyledRule, {
-  valid: [
-    {
-      code: 'const StyledButton = styled.button``;',
-      filename: 'react.tsx',
-    },
-    {
-      code: 'const StyledComponent = styled.div``;',
-      filename: 'react.tsx',
-    },
-  ],
-  invalid: [
-    {
-      code: 'const Button = styled.button``;',
-      filename: 'react.tsx',
-      errors: [
-        {
-          messageId: 'noStyledPrefix',
-        },
-      ],
-    },
-    {
-      code: 'const Component = styled.div``;',
-      filename: 'react.tsx',
-      errors: [
-        {
-          messageId: 'noStyledPrefix',
-        },
-      ],
-    },
-  ],
-});

packages/eslint-plugin-twenty/.eslintrc.js

@@ -0,0 +1,69 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+  },
+  plugins: [
+    '@typescript-eslint/eslint-plugin',
+    'unused-imports',
+    'simple-import-sort',
+    'prefer-arrow',
+  ],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+  },
+  overrides: [
+    {
+      files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
+      rules: {
+        'no-control-regex': 0,
+        'simple-import-sort/imports': [
+          'error',
+          {
+            groups: [
+              ['^react', '^@?\\w'],
+              ['^(@|~)(/.*|$)'],
+              ['^\\u0000'],
+              ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+              ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+              ['^.+\\.?(css)$']
+            ]
+          }
+        ],
+        'prefer-arrow/prefer-arrow-functions': [
+          'error',
+          {
+            "disallowPrototype": true,
+            "singleReturnOnly": false,
+            "classPropertiesAllowed": false
+          }
+        ]
+      }
+    },
+  ],
+  ignorePatterns: ['.eslintrc.js', 'codegen.js', '**/generated/*', '*.config.js'],
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
+    "@typescript-eslint/no-unused-vars": "off",
+    "no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "warn",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
+    ],
+  }
+};

packages/eslint-plugin-twenty/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "eslint-plugin-twenty-ts",
+  "name": "eslint-plugin-twenty",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "main": "dist/index.js",
   "files": [
@@ -9,7 +9,8 @@
   ],
   "scripts": {
     "test": "jest",
-    "build": "rimraf ./dist && tsc  --outDir ./dist"
+    "build": "rimraf ./dist && tsc  --outDir ./dist",
+    "lint": "eslint src --max-warnings=0"
   },
   "keywords": [],
   "author": "",
@@ -25,7 +26,10 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard-with-typescript": "^39.0.0",
     "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "jest": "^28.1.3",
     "postcss": "^8.4.29",
     "prettier": "^3.0.3",

packages/eslint-plugin-twenty/src/rules/effect-components.ts

@@ -0,0 +1,166 @@
+import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
+
+const createRule = ESLintUtils.RuleCreator(() => `https://docs.twenty.com`);
+
+const checkIsPascalCase = (input: string): boolean => {
+  const pascalCaseRegex = /^[A-Z][a-zA-Z0-9_]*/g;
+
+  return pascalCaseRegex.test(input);
+};
+
+type ComponentType =
+  | TSESTree.FunctionDeclaration
+  | TSESTree.ArrowFunctionExpression
+  | TSESTree.FunctionExpression;
+
+const effectComponentsRule = createRule({
+  create: (context) => {
+    const checkThatNodeIsEffectComponent = (node: ComponentType) => {
+      let componentName = "";
+      let identifierNode = node.id;
+
+      const isIdentifier = (
+        node: TSESTree.Node | null,
+      ): node is TSESTree.Identifier =>
+        node?.type === TSESTree.AST_NODE_TYPES.Identifier;
+      const isVariableDeclarator = (
+        node: TSESTree.Node,
+      ): node is TSESTree.VariableDeclarator =>
+        node.type === TSESTree.AST_NODE_TYPES.VariableDeclarator;
+
+      const isArrowFunction = (
+        node: TSESTree.Node,
+      ): node is TSESTree.ArrowFunctionExpression =>
+        node.type === TSESTree.AST_NODE_TYPES.ArrowFunctionExpression;
+      const isFunctionDeclaration = (
+        node: TSESTree.Node,
+      ): node is TSESTree.FunctionDeclaration =>
+        node.type === TSESTree.AST_NODE_TYPES.FunctionDeclaration;
+      const isFunctionExpression = (
+        node: TSESTree.Node,
+      ): node is TSESTree.FunctionExpression =>
+        node.type === TSESTree.AST_NODE_TYPES.FunctionExpression;
+
+      if (
+        isArrowFunction(node) &&
+        isVariableDeclarator(node.parent) &&
+        isIdentifier(node.parent.id)
+      ) {
+        componentName = node.parent.id.name;
+        identifierNode = node.parent.id;
+      } else if (isFunctionDeclaration(node) && isIdentifier(node.id)) {
+        componentName = node.id.name;
+        identifierNode = node.id;
+      } else if (
+        isFunctionExpression(node) &&
+        isVariableDeclarator(node.parent) &&
+        isIdentifier(node.parent.id)
+      ) {
+        componentName = node.parent.id.name;
+        identifierNode = node.parent.id;
+      }
+
+      if (!checkIsPascalCase(componentName)) {
+        return;
+      }
+
+      const isReturningEmptyFragmentOrNull =
+        // Direct return of JSX fragment, e.g., () => <></>
+        (node.body.type === "JSXFragment" && node.body.children.length === 0) ||
+        // Direct return of null, e.g., () => null
+        (node.body.type === "Literal" && node.body.value === null) ||
+        // Return JSX fragment or null from block
+        (node.body.type === "BlockStatement" &&
+          node.body.body.some(
+            (statement) =>
+              statement.type === "ReturnStatement" &&
+              // Empty JSX fragment return, e.g., return <></>;
+              ((statement.argument?.type === "JSXFragment" &&
+                statement.argument.children.length === 0) ||
+                // Empty React.Fragment return, e.g., return <React.Fragment></React.Fragment>;
+                (statement.argument?.type === "JSXElement" &&
+                  statement.argument.openingElement.name.type ===
+                    "JSXIdentifier" &&
+                  statement.argument.openingElement.name.name ===
+                    "React.Fragment" &&
+                  statement.argument.children.length === 0) ||
+                // Literal null return, e.g., return null;
+                (statement.argument?.type === "Literal" &&
+                  statement.argument.value === null)),
+          ));
+
+      const hasEffectSuffix = componentName.endsWith("Effect");
+
+      const hasEffectSuffixButIsNotEffectComponent =
+        hasEffectSuffix && !isReturningEmptyFragmentOrNull;
+      const isEffectComponentButDoesNotHaveEffectSuffix =
+        !hasEffectSuffix && isReturningEmptyFragmentOrNull;
+
+      if (isEffectComponentButDoesNotHaveEffectSuffix) {
+        context.report({
+          node,
+          messageId: "effectSuffix",
+          data: {
+            componentName: componentName,
+          },
+          fix: (fixer) => {
+            if (isArrowFunction(node))
+              if (identifierNode) {
+                return fixer.replaceText(
+                  identifierNode,
+                  componentName + "Effect",
+                );
+              }
+
+            return null;
+          },
+        });
+      } else if (hasEffectSuffixButIsNotEffectComponent) {
+        context.report({
+          node,
+          messageId: "noEffectSuffix",
+          data: {
+            componentName: componentName,
+          },
+          fix: (fixer) => {
+            if (identifierNode) {
+              return fixer.replaceText(
+                identifierNode,
+                componentName.replace("Effect", ""),
+              );
+            }
+
+            return null;
+          },
+        });
+      }
+    };
+
+    return {
+      ArrowFunctionExpression: checkThatNodeIsEffectComponent,
+      FunctionDeclaration: checkThatNodeIsEffectComponent,
+      FunctionExpression: checkThatNodeIsEffectComponent,
+    };
+  },
+  name: "effect-components",
+  meta: {
+    docs: {
+      description:
+        "Effect components should end with the Effect suffix. This rule checks only components that are in PascalCase and that return a JSX fragment or null. Any renderProps or camelCase components are ignored.",
+    },
+    messages: {
+      effectSuffix:
+        "Effect component {{ componentName }} should end with the Effect suffix.",
+      noEffectSuffix:
+        "Component {{ componentName }} shouldn't end with the Effect suffix because it doesn't return a JSX fragment or null.",
+    },
+    type: "suggestion",
+    schema: [],
+    fixable: "code",
+  },
+  defaultOptions: [],
+});
+
+module.exports = effectComponentsRule;
+
+export default effectComponentsRule;

packages/eslint-plugin-twenty/src/rules/matching-state-variable.ts

@@ -1,26 +1,25 @@
 import {
-  TSESTree,
-  ESLintUtils,
   AST_NODE_TYPES,
+  ESLintUtils,
+  TSESTree,
 } from "@typescript-eslint/utils";
 
-const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
+const createRule = ESLintUtils.RuleCreator(() => `https://docs.twenty.com`);
 
 const matchingStateVariableRule = createRule({
   create: (context) => {
     return {
-      VariableDeclarator(node: TSESTree.VariableDeclarator) {
+      VariableDeclarator: (node: TSESTree.VariableDeclarator) => {
         if (
           node?.init?.type === AST_NODE_TYPES.CallExpression &&
           node.init.callee.type === AST_NODE_TYPES.Identifier &&
           [
             "useRecoilState",
-            "useRecoilFamilyState",
-            "useRecoilSelector",
             "useRecoilScopedState",
+            "useRecoilFamilyState",
             "useRecoilScopedFamilyState",
-            "useRecoilScopedSelector",
             "useRecoilValue",
+            "useRecoilScopedValue",
           ].includes(node.init.callee.name)
         ) {
           const stateNameBase =
@@ -32,9 +31,9 @@ const matchingStateVariableRule = createRule({
             return;
           }
 
-          let expectedVariableNameBase = stateNameBase.replace(
+          const expectedVariableNameBase = stateNameBase.replace(
             /(State|FamilyState|Selector|ScopedState|ScopedFamilyState|ScopedSelector)$/,
-            ""
+            "",
           );
 
           if (node.id.type === AST_NODE_TYPES.Identifier) {
@@ -44,11 +43,12 @@ const matchingStateVariableRule = createRule({
                 node,
                 messageId: "invalidVariableName",
                 data: {
-                  actual: actualVariableName,
+                  actualName: actualVariableName,
-                  expected: expectedVariableNameBase,
+                  expectedName: expectedVariableNameBase,
+                  hookName: stateNameBase,
                   callee: node.init.callee.name,
                 },
-                fix(fixer) {
+                fix: (fixer) => {
                   return fixer.replaceText(node.id, expectedVariableNameBase);
                 },
               });
@@ -73,17 +73,16 @@ const matchingStateVariableRule = createRule({
                   expected: expectedVariableNameBase,
                   callee: node.init.callee.name,
                 },
-                fix(fixer) {
+                fix: (fixer) => {
                   if (node.id.type === AST_NODE_TYPES.ArrayPattern) {
                     return fixer.replaceText(
                       node.id.elements[0] as TSESTree.Node,
-                      expectedVariableNameBase
+                      expectedVariableNameBase,
                     );
                   }
                   return null;
                 },
               });
-              return;
             }
 
             if (node.id.elements?.[1]?.type === AST_NODE_TYPES.Identifier) {
@@ -97,14 +96,15 @@ const matchingStateVariableRule = createRule({
                   node,
                   messageId: "invalidSetterName",
                   data: {
-                    actual: actualSetterName,
+                    hookName: stateNameBase,
-                    expected: expectedSetterName,
+                    actualName: actualSetterName,
+                    expectedName: expectedSetterName,
                   },
-                  fix(fixer) {
+                  fix: (fixer) => {
                     if (node.id.type === AST_NODE_TYPES.ArrayPattern) {
                       return fixer.replaceText(
                         node.id.elements[1]!,
-                        expectedSetterName
+                        expectedSetterName,
                       );
                     }
                     return null;
@@ -121,14 +121,15 @@ const matchingStateVariableRule = createRule({
   meta: {
     type: "problem",
     docs: {
-      description: "Ensure recoil value and setter are named after their atom name",
+      description:
+        "Ensure recoil value and setter are named after their atom name",
       recommended: "recommended",
     },
     fixable: "code",
     schema: [],
     messages: {
       invalidVariableName:
-        "Invalid usage of {{hookName}}: the value should be named '{{expectedName}}' but found '{{actualName}}'.",
+        "Invalid usage of {{ hookName }}: the variable should be named '{{ expectedName }}' but found '{{ actualName }}'.",
       invalidSetterName:
         "Invalid usage of {{ hookName }}: Expected setter '{{ expectedName }}' but found '{{ actualName }}'.",
     },

packages/eslint-plugin-twenty/src/rules/no-hardcoded-colors.ts

@@ -0,0 +1,64 @@
+import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
+
+const createRule = ESLintUtils.RuleCreator(() => `https://docs.twenty.com`);
+
+const noHardcodedColorsRule = createRule({
+  create: (context) => {
+    const testHardcodedColor = (
+      literal: TSESTree.Literal | TSESTree.TemplateLiteral,
+    ) => {
+      const colorRegex = /(?:rgba?\()|(?:#[0-9a-fA-F]{2,6})/i;
+
+      if (
+        literal.type === TSESTree.AST_NODE_TYPES.Literal &&
+        typeof literal.value === "string"
+      ) {
+        if (colorRegex.test(literal.value)) {
+          context.report({
+            node: literal,
+            messageId: "hardcodedColor",
+            data: {
+              color: literal.value,
+            },
+          });
+        }
+      } else if (literal.type === TSESTree.AST_NODE_TYPES.TemplateLiteral) {
+        const firstStringValue = literal.quasis[0]?.value.raw;
+
+        if (colorRegex.test(firstStringValue)) {
+          context.report({
+            node: literal,
+            messageId: "hardcodedColor",
+            data: {
+              color: firstStringValue,
+            },
+          });
+        }
+      }
+    };
+
+    return {
+      Literal: testHardcodedColor,
+      TemplateLiteral: testHardcodedColor,
+    };
+  },
+  name: "no-hardcoded-colors",
+  meta: {
+    docs: {
+      description:
+        "Do not use hardcoded RGBA or Hex colors. Please use a color from the theme file.",
+    },
+    messages: {
+      hardcodedColor:
+        "Hardcoded color {{ color }} found. Please use a color from the theme file.",
+    },
+    type: "suggestion",
+    schema: [],
+    fixable: "code",
+  },
+  defaultOptions: [],
+});
+
+module.exports = noHardcodedColorsRule;
+
+export default noHardcodedColorsRule;

packages/eslint-plugin-twenty/src/rules/sort-css-properties-alphabetically.ts

@@ -1,14 +1,14 @@
-import postcss from "postcss";
+import { TSESTree } from "@typescript-eslint/utils";
-import { AST_NODE_TYPES, TSESTree } from "@typescript-eslint/utils";
 import { ESLintUtils } from "@typescript-eslint/utils";
-import type { Identifier, TaggedTemplateExpression } from "@babel/types";
 import {
   RuleFix,
   RuleFixer,
   SourceCode,
 } from "@typescript-eslint/utils/ts-eslint";
 
-const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
+import postcss from "postcss";
+
+const createRule = ESLintUtils.RuleCreator(() => `https://docs.twenty.com`);
 
 interface loc {
   start: {
@@ -22,35 +22,67 @@ interface loc {
 }
 
 const isStyledTagname = (node: TSESTree.TaggedTemplateExpression): boolean => {
-  return (
+  const isMemberExpression = (
-    (node.tag.type === "Identifier" && node.tag.name === "css") ||
+    node: TSESTree.Node,
-    (node.tag.type === "MemberExpression" &&
+  ): node is TSESTree.MemberExpression =>
-      // @ts-ignore
+    node.type === TSESTree.AST_NODE_TYPES.MemberExpression;
-      node.tag.object.name === "styled") ||
+  const isCallExpression = (
-    (node.tag.type === "CallExpression" &&
+    node: TSESTree.Node,
-      // @ts-ignore
+  ): node is TSESTree.CallExpression =>
-      (node.tag.callee.name === "styled" ||
+    node.type === TSESTree.AST_NODE_TYPES.CallExpression;
-        // @ts-ignore
+  const isIdentifier = (
-        (node.tag.callee.object &&
+    node: TSESTree.Node | null,
-          // @ts-ignore
+  ): node is TSESTree.Identifier =>
+    node?.type === TSESTree.AST_NODE_TYPES.Identifier;
 
-          ((node.tag.callee.object.callee &&
+  if (isIdentifier(node.tag)) {
-            // @ts-ignore
+    return node.tag.name === "css";
-            node.tag.callee.object.callee.name === "styled") ||
+  }
-            // @ts-ignore
+
-            (node.tag.callee.object.object &&
+  if (isMemberExpression(node.tag) && isIdentifier(node.tag.object)) {
-              // @ts-ignore
+    return node.tag.object.name === "styled";
-              node.tag.callee.object.object.name === "styled")))))
+  }
-  );
+
+  if (isCallExpression(node.tag) && isIdentifier(node.tag.callee)) {
+    return node.tag.callee.name === "styled";
+  }
+
+  if (
+    isCallExpression(node.tag) &&
+    isMemberExpression(node.tag.callee) &&
+    isIdentifier(node.tag.callee.object)
+  ) {
+    return node.tag.callee.object.name === "styled";
+  }
+
+  if (
+    isCallExpression(node.tag) &&
+    isMemberExpression(node.tag.callee) &&
+    isIdentifier(node.tag.callee.object)
+  ) {
+    return node.tag.callee.object.name === "styled";
+  }
+
+  if (
+    isCallExpression(node.tag) &&
+    isMemberExpression(node.tag.callee) &&
+    isMemberExpression(node.tag.callee.object) &&
+    isIdentifier(node.tag.callee.object.object)
+  ) {
+    return node.tag.callee.object.object.name === "styled";
+  }
+
+  return false;
 };
+
 /**
  * An atomic rule is a rule without nested rules.
  */
 const isValidAtomicRule = (
-  rule: postcss.Root
+  rule: postcss.Rule,
 ): { isValid: boolean; loc?: loc } => {
   const decls = rule.nodes.filter(
-    (node) => node.type === "decl"
+    (node) => node.type === "decl",
   ) as unknown as postcss.Declaration[];
   if (decls.length < 0) {
     return { isValid: true };
@@ -78,15 +110,13 @@ const isValidAtomicRule = (
   return { isValid: true };
 };
 
-const isValidRule = (rule: postcss.Root): { isValid: boolean; loc?: loc } => {
+const isValidRule = (rule: postcss.Rule): { isValid: boolean; loc?: loc } => {
   // check each rule recursively
   const { isValid, loc } = rule.nodes.reduce<{ isValid: boolean; loc?: loc }>(
     (map, node) => {
-      return node.type === "rule"
+      return node.type === "rule" ? isValidRule(node) : map;
-        ? isValidRule(node as unknown as postcss.Root)
-        : map;
     },
-    { isValid: true }
+    { isValid: true },
   );
 
   // if there is any invalid rule, return result
@@ -103,7 +133,7 @@ const getNodeStyles = (node: TSESTree.TaggedTemplateExpression): string => {
   // remove line break added to the first quasi
   const lineBreakCount = node.quasi.loc.start.line - 1;
   let styles = `${"\n".repeat(lineBreakCount)}${" ".repeat(
-    node.quasi.loc.start.column + 1
+    node.quasi.loc.start.column + 1,
   )}${firstQuasi.value.raw}`;
 
   // replace expression by spaces and line breaks
@@ -115,7 +145,7 @@ const getNodeStyles = (node: TSESTree.TaggedTemplateExpression): string => {
         ? loc.start.column - prevLoc.end.column + 2
         : loc.start.column + 1;
     styles = `${styles}${" "}${"\n".repeat(lineBreaksCount)}${" ".repeat(
-      spacesCount
+      spacesCount,
     )}${value.raw}`;
   });
 
@@ -141,7 +171,7 @@ const fix = ({
   });
 
   const declarations = rule.nodes.filter(
-    (node) => node.type === "decl"
+    (node) => node.type === "decl",
   ) as unknown as postcss.Declaration[];
   const sortedDeclarations = sortDeclarations(declarations);
 
@@ -158,8 +188,8 @@ const fix = ({
         fixings.push(
           fixer.insertTextAfterRange(
             [range.startIdx, range.startIdx],
-            sortedDeclText
+            sortedDeclText,
-          )
+          ),
         );
       } catch (e) {
         console.log(e);
@@ -171,7 +201,7 @@ const fix = ({
 
 const areSameDeclarations = (
   a: postcss.ChildNode,
-  b: postcss.ChildNode
+  b: postcss.ChildNode,
 ): boolean =>
   a.source!.start!.line === b.source!.start!.line &&
   a.source!.start!.column === b.source!.start!.column;
@@ -216,23 +246,23 @@ const sortDeclarations = (declarations: postcss.Declaration[]) =>
     .sort((declA, declB) => (declA.prop > declB.prop ? 1 : -1));
 
 const sortCssPropertiesAlphabeticallyRule = createRule({
-  create(context) {
+  create: (context) => {
     return {
-      TaggedTemplateExpression(node: TSESTree.TaggedTemplateExpression) {
+      TaggedTemplateExpression: (node: TSESTree.TaggedTemplateExpression) => {
         if (isStyledTagname(node)) {
           try {
-            const root = postcss.parse(getNodeStyles(node));
+            const root = postcss.parse(
+              getNodeStyles(node),
+            ) as unknown as postcss.Rule;
 
-            const { isValid, loc } = isValidRule(root);
+            const { isValid } = isValidRule(root);
 
             if (!isValid) {
               return context.report({
                 node,
-                messageId: "sort-css-properties-alphabetically",
+                messageId: "sortCssPropertiesAlphabetically",
-                loc,
                 fix: (fixer) =>
                   fix({
-                    // @ts-ignore
                     rule: root,
                     fixer,
                     src: context.getSourceCode(),
@@ -253,7 +283,7 @@ const sortCssPropertiesAlphabeticallyRule = createRule({
       recommended: "recommended",
     },
     messages: {
-      "sort-css-properties-alphabetically":
+      sortCssPropertiesAlphabetically:
         "Declarations should be sorted alphabetically.",
     },
     type: "suggestion",

packages/eslint-plugin-twenty/src/rules/styled-components-prefixed-with-styled.ts

@@ -0,0 +1,62 @@
+import {
+  AST_NODE_TYPES,
+  ESLintUtils,
+  TSESTree,
+} from "@typescript-eslint/utils";
+
+const createRule = ESLintUtils.RuleCreator(() => `https://docs.twenty.com`);
+
+const styledComponentsPrefixedWithStyledRule = createRule({
+  create: (context) => {
+    return {
+      VariableDeclarator: (node: TSESTree.VariableDeclarator) => {
+        const templateExpr = node.init;
+        if (templateExpr?.type !== AST_NODE_TYPES.TaggedTemplateExpression) {
+          return;
+        }
+        const tag = templateExpr.tag;
+        const tagged =
+          tag.type === AST_NODE_TYPES.MemberExpression
+            ? tag.object
+            : tag.type === AST_NODE_TYPES.CallExpression
+            ? tag.callee
+            : null;
+        if (
+          tagged?.type === AST_NODE_TYPES.Identifier &&
+          tagged.name === "styled"
+        ) {
+          const variable = node.id as TSESTree.Identifier;
+          if (variable.name.startsWith("Styled")) {
+            return;
+          }
+          context.report({
+            node,
+            messageId: "noStyledPrefix",
+            data: {
+              componentName: variable.name,
+            },
+          });
+        }
+      },
+    };
+  },
+  name: "styled-components-prefixed-with-styled",
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Warn when StyledComponents are not prefixed with Styled",
+      recommended: "recommended",
+    },
+    messages: {
+      noStyledPrefix:
+        "{{componentName}} is a StyledComponent and is not prefixed with Styled.",
+    },
+    fixable: "code",
+    schema: [],
+  },
+  defaultOptions: [],
+});
+
+module.exports = styledComponentsPrefixedWithStyledRule;
+
+export default styledComponentsPrefixedWithStyledRule;

packages/eslint-plugin-twenty/src/tests/effect-components.spec.ts

@@ -65,7 +65,7 @@ ruleTester.run("effect-components", effectComponentsRule, {
   invalid: [
     {
       code: "const TestComponent = () => <></>;",
-      output: 'const TestComponentEffect = () => <></>;',
+      output: "const TestComponentEffect = () => <></>;",
       errors: [
         {
           messageId: "effectSuffix",
@@ -74,7 +74,7 @@ ruleTester.run("effect-components", effectComponentsRule, {
     },
     {
       code: "const TestComponentEffect = () => <><div></div></>;",
-      output: 'const TestComponent = () => <><div></div></>;',
+      output: "const TestComponent = () => <><div></div></>;",
       errors: [
         {
           messageId: "noEffectSuffix",

packages/eslint-plugin-twenty/src/tests/matching-state-variable.spec.ts

@@ -0,0 +1,185 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+
+import matchingStateVariableRule from "../rules/matching-state-variable";
+
+const ruleTester = new RuleTester({
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run("matching-state-variable", matchingStateVariableRule, {
+  valid: [
+    {
+      code: "const variable = useRecoilValue(variableState);",
+    },
+    {
+      code: "const variable = useRecoilScopedValue(variableScopedState);",
+    },
+    {
+      code: "const [variable, setVariable] = useRecoilState(variableScopedState);",
+    },
+    {
+      code: "const [variable, setVariable] = useRecoilScopedState(variableScopedState);",
+    },
+    {
+      code: "const [variable, setVariable] = useRecoilFamilyState(variableScopedState);",
+    },
+    {
+      code: "const [variable, setVariable] = useRecoilScopedFamilyState(variableScopedState);",
+    },
+  ],
+  invalid: [
+    {
+      code: "const myValue = useRecoilValue(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+      ],
+      output: "const variable = useRecoilValue(variableState);",
+    },
+    {
+      code: "const myValue = useRecoilScopedValue(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+      ],
+      output: "const variable = useRecoilScopedValue(variableState);",
+    },
+
+    {
+      code: "const [myValue, setMyValue] = useRecoilState(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+        {
+          messageId: "invalidSetterName",
+        },
+      ],
+      output: "const [variable, setVariable] = useRecoilState(variableState);",
+    },
+    {
+      code: "const [myValue] = useRecoilState(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+      ],
+      output: "const [variable] = useRecoilState(variableState);",
+    },
+    {
+      code: "const [, setMyValue] = useRecoilState(variableState);",
+      errors: [
+        {
+          messageId: "invalidSetterName",
+        },
+      ],
+      output: "const [, setVariable] = useRecoilState(variableState);",
+    },
+
+    {
+      code: "const [myValue, setMyValue] = useRecoilScopedState(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+        {
+          messageId: "invalidSetterName",
+        },
+      ],
+      output:
+        "const [variable, setVariable] = useRecoilScopedState(variableState);",
+    },
+    {
+      code: "const [myValue] = useRecoilScopedState(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+      ],
+      output: "const [variable] = useRecoilScopedState(variableState);",
+    },
+    {
+      code: "const [, setMyValue] = useRecoilScopedState(variableState);",
+      errors: [
+        {
+          messageId: "invalidSetterName",
+        },
+      ],
+      output: "const [, setVariable] = useRecoilScopedState(variableState);",
+    },
+
+    {
+      code: "const [myValue, setMyValue] = useRecoilFamilyState(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+        {
+          messageId: "invalidSetterName",
+        },
+      ],
+      output:
+        "const [variable, setVariable] = useRecoilFamilyState(variableState);",
+    },
+    {
+      code: "const [myValue] = useRecoilFamilyState(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+      ],
+      output: "const [variable] = useRecoilFamilyState(variableState);",
+    },
+    {
+      code: "const [, setMyValue] = useRecoilFamilyState(variableState);",
+      errors: [
+        {
+          messageId: "invalidSetterName",
+        },
+      ],
+      output: "const [, setVariable] = useRecoilFamilyState(variableState);",
+    },
+
+    {
+      code: "const [myValue, setMyValue] = useRecoilScopedFamilyState(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+        {
+          messageId: "invalidSetterName",
+        },
+      ],
+      output:
+        "const [variable, setVariable] = useRecoilScopedFamilyState(variableState);",
+    },
+    {
+      code: "const [myValue] = useRecoilScopedFamilyState(variableState);",
+      errors: [
+        {
+          messageId: "invalidVariableName",
+        },
+      ],
+      output: "const [variable] = useRecoilScopedFamilyState(variableState);",
+    },
+    {
+      code: "const [, setMyValue] = useRecoilScopedFamilyState(variableState);",
+      errors: [
+        {
+          messageId: "invalidSetterName",
+        },
+      ],
+      output:
+        "const [, setVariable] = useRecoilScopedFamilyState(variableState);",
+    },
+  ],
+});

packages/eslint-plugin-twenty/src/tests/no-hardcoded-colors.spec.ts

@@ -1,4 +1,5 @@
 import { RuleTester } from "@typescript-eslint/rule-tester";
+
 import noHardcodedColorsRule from "../rules/no-hardcoded-colors";
 
 const ruleTester = new RuleTester({
@@ -17,9 +18,6 @@ ruleTester.run("no-hardcoded-colors", noHardcodedColorsRule, {
     {
       code: "const color = theme.background.secondary;",
     },
-    {
-      code: 'const color = "#000000";',
-    },
   ],
   invalid: [
     {
@@ -30,6 +28,28 @@ ruleTester.run("no-hardcoded-colors", noHardcodedColorsRule, {
         },
       ],
     },
+    {
+      code: 'const color = { test: "rgb(154,205,50)", test2: "#ADFF2F" }',
+      errors: [
+        {
+          messageId: "hardcodedColor",
+        },
+        {
+          messageId: "hardcodedColor",
+        },
+      ],
+    },
+    {
+      code: "const color = { test: `rgb(${r},${g},${b})`, test2: `#ADFF${test}` }",
+      errors: [
+        {
+          messageId: "hardcodedColor",
+        },
+        {
+          messageId: "hardcodedColor",
+        },
+      ],
+    },
     {
       code: 'const color = "#ADFF2F";',
       errors: [

packages/eslint-plugin-twenty/src/tests/sort-css-properties-alphabetically.spec.ts

@@ -0,0 +1,56 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+
+import sortCssPropertiesAlphabeticallyRule from "../rules/sort-css-properties-alphabetically";
+
+const ruleTester = new RuleTester({
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run(
+  "sort-css-properties-alphabetically",
+  sortCssPropertiesAlphabeticallyRule,
+  {
+    valid: [
+      {
+        code: "const style = css`color: red;`;",
+      },
+      {
+        code: "const style = css`background-color: $bgColor;color: red;`;",
+      },
+      {
+        code: "const StyledComponent = styled.div`color: red;`;",
+      },
+      {
+        code: "const StyledComponent = styled.div`background-color: $bgColor;color: red;`;",
+      },
+    ],
+    invalid: [
+      {
+        code: "const style = css`color: #FF0000;background-color: $bgColor`;",
+        output: "const style = css`background-color: $bgColorcolor: #FF0000;`;",
+        errors: [
+          {
+            messageId: "sortCssPropertiesAlphabetically",
+          },
+        ],
+      },
+      {
+        code: "const StyledComponent = styled.div`color: #FF0000;background-color: $bgColor`;",
+        output:
+          "const StyledComponent = styled.div`background-color: $bgColorcolor: #FF0000;`;",
+        errors: [
+          {
+            messageId: "sortCssPropertiesAlphabetically",
+          },
+        ],
+      },
+    ],
+  },
+);

packages/eslint-plugin-twenty/src/tests/styled-components-prefixed-with-styled.spec.ts

@@ -0,0 +1,47 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+
+import styledComponentsPrefixedWithStyledRule from "../rules/styled-components-prefixed-with-styled";
+
+const ruleTester = new RuleTester({
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run(
+  "styled-components-prefixed-with-styled",
+  styledComponentsPrefixedWithStyledRule,
+  {
+    valid: [
+      {
+        code: "const StyledButton = styled.button``;",
+      },
+      {
+        code: "const StyledComponent = styled.div``;",
+      },
+    ],
+    invalid: [
+      {
+        code: "const Button = styled.button``;",
+        errors: [
+          {
+            messageId: "noStyledPrefix",
+          },
+        ],
+      },
+      {
+        code: "const Component = styled.div``;",
+        errors: [
+          {
+            messageId: "noStyledPrefix",
+          },
+        ],
+      },
+    ],
+  },
+);

packages/eslint-plugin-twenty/yarn.lock

@@ -1599,6 +1599,11 @@ eslint-plugin-import@^2.28.1:
     semver "^6.3.1"
     tsconfig-paths "^3.14.2"
 
+eslint-plugin-prefer-arrow@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prefer-arrow/-/eslint-plugin-prefer-arrow-1.2.3.tgz#e7fbb3fa4cd84ff1015b9c51ad86550e55041041"
+  integrity sha512-J9I5PKCOJretVuiZRGvPQxCbllxGAV/viI20JO3LYblAodofBxyMnZAJ+WGeClHgANnSJberTNoFWWjrWKBuXQ==
+
 eslint-plugin-prettier@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz#6887780ed95f7708340ec79acfdf60c35b9be57a"
@@ -1607,6 +1612,23 @@ eslint-plugin-prettier@^5.0.0:
     prettier-linter-helpers "^1.0.0"
     synckit "^0.8.5"
 
+eslint-plugin-simple-import-sort@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-10.0.0.tgz#cc4ceaa81ba73252427062705b64321946f61351"
+  integrity sha512-AeTvO9UCMSNzIHRkg8S6c3RPy5YEwKWSQPx3DYghLedo2ZQxowPFLGDN1AZ2evfg6r6mjBSZSLxLFsWSu3acsw==
+
+eslint-plugin-unused-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.0.0.tgz#d25175b0072ff16a91892c3aa72a09ca3a9e69e7"
+  integrity sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==
+  dependencies:
+    eslint-rule-composer "^0.3.0"
+
+eslint-rule-composer@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
+  integrity sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==
+
 eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"