fix: local-rules/no-override-ds-component were not riggered correcly …

…due to incorrect configuration
trezor · Nov 5, 2024 · b3c7cfc · b3c7cfc
1 parent 7305c66
commit b3c7cfc
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 23 deletions.
diff --git a/eslint-local-rules/rules.ts b/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;
+                            }
+                        }
                     }
                 },
             };

diff --git a/packages/connect-explorer/src/components/GuideIndex.tsx b/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};
 `;

diff --git a/packages/eslint/src/localRulesConfig.mjs b/packages/eslint/src/localRulesConfig.mjs
@@ -8,13 +8,8 @@ export const localRulesConfig = [
         rules: {
             'local-rules/no-override-ds-component': [
                 'error',
-                { packageName: '@trezor/components' },
+                { packageNames: ['@trezor/components', '@trezor/product-components'] },
             ],
-            // Todo: figure out hot to re-enable this rule
-            // 'local-rules/no-override-ds-component': [
-            //     'error',
-            //     { packageName: '@trezor/product-components' },
-            // ],
         },
     },
 ];
diff --git a/...t/common/CoinmarketDetail/CoinmarketDetailExchange/CoinmarketDetailExchangePaymentKYC.tsx b/...t/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};

diff --git a/packages/suite/src/views/wallet/coinmarket/index.tsx b/packages/suite/src/views/wallet/coinmarket/index.tsx
@@ -170,6 +170,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};