refacto clickoutside componentv2 (#11644)

Switch to ComponentV2

Friday morning refacto & chill with @charles

---------

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

tools/eslint-rules/jest.config.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 export default {
   displayName: 'eslint-rules',
+  silent: false,
   preset: '../../jest.preset.js',
   transform: {
     '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],

tools/eslint-rules/rules/no-hardcoded-colors.spec.ts

@@ -51,5 +51,21 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     },
+    {
+      code: 'const myCss = css`color: #123; background-color: ${theme.background.secondary};`',
+      errors: [
+        {
+          messageId: 'hardcodedColor',
+        },
+      ],
+    },
+    {
+      code: 'const myCss = styled.div`color: ${({ theme }) => theme.font.color.primary};flex-shrink: 0;background-color: #123;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;`',
+      errors: [
+        {
+          messageId: 'hardcodedColor',
+        },
+      ],
+    },
   ],
 });

tools/eslint-rules/rules/no-hardcoded-colors.ts

@@ -21,7 +21,7 @@ export const rule = ESLintUtils.RuleCreator(() => __filename)({
   defaultOptions: [],
   create: (context) => {
     const testHardcodedColor = (
-      literal: TSESTree.Literal | TSESTree.TemplateLiteral,
+      literal: TSESTree.Literal | TSESTree.TemplateLiteral
     ) => {
       const colorRegex = /(?:rgba?\()|(?:#[0-9a-fA-F]{3,6})\b/i;
 
@@ -39,23 +39,26 @@ export const rule = ESLintUtils.RuleCreator(() => __filename)({
           });
         }
       } else if (literal.type === TSESTree.AST_NODE_TYPES.TemplateLiteral) {
-        const firstStringValue = literal.quasis[0]?.value.raw;
+        for (const quasi of literal.quasis) {
+          const firstStringValue = quasi.value.raw;
 
         if (colorRegex.test(firstStringValue)) {
           context.report({
             node: literal,
             messageId: 'hardcodedColor',
             data: {
-              color: firstStringValue,
-            },
-          });
+                color: firstStringValue,
+              },
+            });
+          }
         }
       }
     };
 
     return {
-      Literal: testHardcodedColor,
-      TemplateLiteral: testHardcodedColor,
+      Literal: (literal: TSESTree.Literal) => testHardcodedColor(literal),
+      TemplateLiteral: (templateLiteral: TSESTree.TemplateLiteral) =>
+        testHardcodedColor(templateLiteral),
     };
   },
 });