diff --git a/.changeset/metal-games-knock.md b/.changeset/metal-games-knock.md new file mode 100644 index 0000000000..c5dde85ad7 --- /dev/null +++ b/.changeset/metal-games-knock.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/eslint-plugin-circuit-ui': minor +--- + +Expanded the `renamed-package-scope` ESLint rule to cover additional occurrences of package names such as in Jest module mocks. diff --git a/.changeset/quick-books-train.md b/.changeset/quick-books-train.md new file mode 100644 index 0000000000..9debeacf9f --- /dev/null +++ b/.changeset/quick-books-train.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/eslint-plugin-circuit-ui': patch +--- + +Fixed the `no-renamed-props` ESLint rule to add the `as="strong"` prop when migrating the Body's `variant="highlight"` prop to match the previous semantics. diff --git a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts index 33247a1ac8..f65a6f30ea 100644 --- a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts +++ b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts @@ -340,6 +340,12 @@ ruleTester.run('no-renamed-props', noRenamedProps, { } function ComponentB() { + return ( + Lorem ipsum + ) + } + + function ComponentC() { return ( Lorem ipsum ) @@ -348,17 +354,27 @@ ruleTester.run('no-renamed-props', noRenamedProps, { output: ` function ComponentA() { return ( - Lorem ipsum + Lorem ipsum ) } function ComponentB() { + return ( + Lorem ipsum + ) + } + + function ComponentC() { return ( Lorem ipsum ) } `, - errors: [{ messageId: 'bodyVariant' }, { messageId: 'bodyVariant' }], + errors: [ + { messageId: 'bodyVariant' }, + { messageId: 'bodyVariant' }, + { messageId: 'bodyVariant' }, + ], }, ], }); diff --git a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts index 823911fd2c..fbf3e7f636 100644 --- a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts +++ b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts @@ -290,8 +290,9 @@ const configs: (Config & { components: string[] })[] = [ const current = getAttributeValue(attribute); if (current === 'highlight') { - const replacement = `weight="bold"`; + const replacement = `as="strong" weight="bold"`; const weightAttribute = findAttribute(node, 'weight'); + const asAttribute = findAttribute(node, 'as'); context.report({ node: attribute, messageId: 'bodyVariant', @@ -299,6 +300,10 @@ const configs: (Config & { components: string[] })[] = [ fix: weightAttribute ? undefined : (fixer) => { + // Don't override an existing `as` attribute + if (asAttribute) { + return fixer.replaceText(attribute, 'weight="bold"'); + } return fixer.replaceText(attribute, replacement); }, }); diff --git a/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.spec.ts b/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.spec.ts index 1bb11e3855..4729d56cd5 100644 --- a/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.spec.ts +++ b/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.spec.ts @@ -78,5 +78,63 @@ ruleTester.run('renamed-package-scope', renamedPackageScope, { `, errors: [{ messageId: 'refactor' }], }, + { + name: 'dynamic import from the old package scope', + code: ` + const components = await import('@sumup/circuit-ui'); + `, + output: ` + const components = await import('@sumup-oss/circuit-ui'); + `, + errors: [{ messageId: 'refactor' }], + }, + { + name: 'module mock of the old package scope', + code: ` + jest.mock('@sumup/circuit-ui'); + + jest.mock('@sumup/intl', () => ({ + ...jest.requireActual('@sumup/intl'), + formatNumber: jest.fn(), + })); + `, + output: ` + jest.mock('@sumup-oss/circuit-ui'); + + jest.mock('@sumup-oss/intl', () => ({ + ...jest.requireActual('@sumup-oss/intl'), + formatNumber: jest.fn(), + })); + `, + errors: [ + { messageId: 'refactor' }, + { messageId: 'refactor' }, + { messageId: 'refactor' }, + ], + }, + { + name: 'module mock of the old package scope with type annotations', + code: ` + vi.mock('@sumup/circuit-ui', () => ({ + ...vi.importActual( + '@sumup/circuit-ui', + ), + useCollapsible: vi.fn(), + })); + `, + output: ` + vi.mock('@sumup-oss/circuit-ui', () => ({ + ...vi.importActual( + '@sumup-oss/circuit-ui', + ), + useCollapsible: vi.fn(), + })); + `, + errors: [ + { messageId: 'refactor' }, + { messageId: 'refactor' }, + { messageId: 'refactor' }, + ], + }, ], }); diff --git a/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.ts b/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.ts index e8693ffc52..923a0b1d39 100644 --- a/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.ts +++ b/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.ts @@ -66,21 +66,69 @@ export const renamedPackageScope = createRule({ // See https://eslint.org/docs/latest/extend/selectors#known-issues const escapedFrom = from.replace('/', '\\u002F'); + function fixPackageName(node: TSESTree.Node | TSESTree.Token) { + context.report({ + node, + messageId: 'refactor', + data: { from, to }, + fix(fixer) { + return fixer.replaceText( + node, + context.sourceCode.getText(node).replace(from, to), + ); + }, + }); + } + return Object.assign(visitors, { [`ImportDeclaration:has(Literal[value=/${escapedFrom}(?!-).*/])`]: ( node: TSESTree.ImportDeclaration, ) => { - context.report({ - node, - messageId: 'refactor', - data: { from, to }, - fix(fixer) { - return fixer.replaceText( - node, - context.sourceCode.getText(node).replace(from, to), - ); - }, - }); + const { source } = node; + + if (source.type !== 'Literal') { + return; + } + + fixPackageName(source); + }, + [`ImportExpression:has(Literal[value=/${escapedFrom}(?!-).*/])`]: ( + node: TSESTree.ImportExpression, + ) => { + const { source } = node; + + if (source.type !== 'Literal') { + return; + } + + fixPackageName(source); + }, + [`CallExpression:has(Identifier[name=/(mock|requireActual|importActual)/]):has(Literal[value=/${escapedFrom}(?!-).*/])`]: + (node: TSESTree.CallExpression) => { + const firstArg = node.arguments[0]; + + if (firstArg.type !== 'Literal') { + return; + } + + fixPackageName(firstArg); + }, + [`TSImportType:has(Literal[value=/${escapedFrom}(?!-).*/])`]: ( + node: TSESTree.TSImportType, + ) => { + const { argument } = node; + + if (argument.type !== 'TSLiteralType') { + return; + } + + const { literal } = argument; + + if (literal.type !== 'Literal') { + return; + } + + fixPackageName(literal); }, }); }, {});