fix: local-rules/no-override-ds-component were not riggered correcly due to incorrect configuration

Author: peter-sanderson

.eslintrc.js

@@ -300,10 +300,9 @@ module.exports = {
             'error',
             { blankLine: 'always', prev: '*', next: 'return' },
         ],
-        'local-rules/no-override-ds-component': ['error', { packageName: '@trezor/components' }],
         'local-rules/no-override-ds-component': [
             'error',
-            { packageName: '@trezor/product-components' },
+            { packageNames: ['@trezor/product-components', '@trezor/components'] },
         ],
     },
     overrides: [

eslint-local-rules/rules.ts

@@ -19,31 +19,36 @@ export default {
                 {
                     type: 'object',
                     properties: {
-                        packageName: {
-                            type: 'string',
+                        packageNames: {
+                            type: 'array',
+                            items: { type: 'string' },
+                            minItems: 1,
                         },
                     },
-                    additionalProperties: false,
+                    // additionalProperties: false,
                 },
             ],
         },
         create(context) {
-            const packageName = context.options[0] && context.options[0].packageName;
-            if (!packageName) {
+            const packageNames = context.options[0]?.packageNames || [];
+            if (packageNames.length === 0) {
                 return {};
             }
 
-            const importedComponents = new Set();
+            const importedComponents = new Map<string, Set<string>>(); // Map to store components per package name
 
             return {
                 ImportDeclaration(node) {
-                    if (node.source.value === packageName) {
+                    if (packageNames.includes(node.source.value)) {
                         node.specifiers.forEach(specifier => {
                             if (
                                 specifier.type === 'ImportSpecifier' ||
                                 specifier.type === 'ImportDefaultSpecifier'
                             ) {
-                                importedComponents.add(specifier.local.name);
+                                if (!importedComponents.has(node.source.value)) {
+                                    importedComponents.set(node.source.value, new Set<string>());
+                                }
+                                importedComponents.get(node.source.value).add(specifier.local.name);
                             }
                         });
                     }
@@ -52,16 +57,23 @@ export default {
                     if (
                         node.tag.type === 'CallExpression' &&
                         node.tag.callee.name === 'styled' &&
-                        node.tag.arguments[0].type === 'Identifier' &&
-                        importedComponents.has(node.tag.arguments[0].name)
+                        node.tag.arguments[0].type === 'Identifier'
                     ) {
-                        context.report({
-                            node,
-                            messageId: 'avoidStyledComponent',
-                            data: {
-                                packageName,
-                            },
-                        });
+                        const componentName = node.tag.arguments[0].name;
+
+                        // Check if component name matches any imported component from the specified packages
+                        for (const [pkgName, components] of importedComponents) {
+                            if (components.has(componentName)) {
+                                context.report({
+                                    node,
+                                    messageId: 'avoidStyledComponent',
+                                    data: {
+                                        packageName: pkgName,
+                                    },
+                                });
+                                break;
+                            }
+                        }
                     }
                 },
             };

packages/connect-explorer/.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
                 extensions: ['.tsx', '.mdx'],
             },
         ],
+        'local-rules/no-override-ds-component': 'off', // To not show errors in *.mdx example files
     },
     extends: ['plugin:mdx/recommended'],
 };

packages/connect-explorer/src/components/GuideIndex.tsx

@@ -6,6 +6,7 @@ import { Card as TrezorCard, H3, Paragraph, Button } from '@trezor/components';
 import styled from 'styled-components';
 import { spacingsPx } from '@trezor/theme';
 
+// eslint-disable-next-line local-rules/no-override-ds-component
 const SectionCard = styled(TrezorCard)`
     margin-bottom: ${spacingsPx.xl};
 `;

packages/suite/src/views/wallet/coinmarket/common/CoinmarketDetail/CoinmarketDetailExchange/CoinmarketDetailExchangePaymentKYC.tsx

@@ -33,6 +33,7 @@ const Description = styled.div`
     text-align: center;
 `;
 
+// eslint-disable-next-line local-rules/no-override-ds-component
 const LinkWrapper = styled(Link)`
     margin-top: ${spacingsPx.xxs};
     margin-bottom: ${spacingsPx.lg};

packages/suite/src/views/wallet/coinmarket/index.tsx

@@ -111,6 +111,7 @@ export const CoinmarketFormOfferSpinnerText = styled.div`
     text-align: center;
 `;
 
+// eslint-disable-next-line local-rules/no-override-ds-component
 export const CoinmarketSpinnerWrapper = styled(Spinner)`
     flex: none;
     margin: 0 ${spacingsPx.xs};