@kaizen/components 1.69.1 → 1.70.0

package/codemods/upgradeIconV1/upgradeIconV1.ts

@@ -1,9 +1,10 @@
 import ts from 'typescript'
 import {
+  getKaioTagName,
   setImportToAdd,
   setImportToRemove,
   updateKaioImports,
-  type ImportModuleNameTagsMap,
+  type TagImportAttributesMap,
   type UpdateKaioImportsArgs,
 } from '../utils'
 import { getNewIconPropsFromOldIconName } from './getNewIconPropsFromOldIconName'
@@ -11,56 +12,51 @@ import { transformCaMonogramIconToBrand } from './transformCaMonogramIconToBrand
 import { transformIcon } from './transformIcon'
 import { transformSpinnerIconToLoadingSpinner } from './transformSpinnerIconToLoadingSpinner'
 
-const reverseStringMap = <Key extends string, Value extends string>(
-  map: Map<Key, Value>,
-): Map<Value, Key> => {
-  const reverseMap = new Map<Value, Key>()
-  map.forEach((value, key) => reverseMap.set(value, key))
-  return reverseMap
-}
-
 export const upgradeIconV1 =
-  (tagNames: ImportModuleNameTagsMap): ts.TransformerFactory<ts.SourceFile> =>
+  (tagsMap: TagImportAttributesMap): ts.TransformerFactory<ts.SourceFile> =>
   (context) =>
   (rootNode) => {
-    const oldImportSource = '@kaizen/components'
-
-    const kaioTagNames = tagNames.get(oldImportSource)
-    if (!kaioTagNames) return rootNode
+    const importedBrandTagName = getKaioTagName(rootNode, 'Brand')
+    const importedLoadingSpinnerTagName = getKaioTagName(rootNode, 'LoadingSpinner')
 
-    const componentToAliasMap = reverseStringMap(kaioTagNames)
     const importsToRemove = new Map() satisfies UpdateKaioImportsArgs['importsToRemove']
     const importsToAdd = new Map() satisfies UpdateKaioImportsArgs['importsToAdd']
 
     const visit = (node: ts.Node): ts.Node => {
       if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
         const tagName = node.tagName.getText()
-        const kaioComponentName = kaioTagNames.get(tagName)
+        const tagImportAttributes = tagsMap.get(tagName)
+
+        if (!tagImportAttributes) return node
+
+        const kaioComponentName = tagImportAttributes.originalName
+        const oldImportSource = tagImportAttributes.importModuleName
 
         if (kaioComponentName === 'CaMonogramIcon') {
           setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
-          const alias = componentToAliasMap.get('Brand')!
 
-          if (!kaioTagNames.has(alias)) {
+          if (!importedBrandTagName) {
             setImportToAdd(importsToAdd, '@kaizen/components', {
               componentName: 'Brand',
-              alias: alias !== 'Brand' ? alias : undefined,
+              alias: importedBrandTagName !== 'Brand' ? importedBrandTagName : undefined,
             })
           }
-          return transformCaMonogramIconToBrand(node, alias)
+          return transformCaMonogramIconToBrand(node, importedBrandTagName)
         }
 
         if (kaioComponentName === 'SpinnerIcon') {
           setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
-          const alias = componentToAliasMap.get('LoadingSpinner')!
 
-          if (!kaioTagNames.has(alias)) {
+          if (!importedLoadingSpinnerTagName) {
             setImportToAdd(importsToAdd, '@kaizen/components', {
               componentName: 'LoadingSpinner',
-              alias: alias !== 'LoadingSpinner' ? alias : undefined,
+              alias:
+                importedLoadingSpinnerTagName !== 'LoadingSpinner'
+                  ? importedLoadingSpinnerTagName
+                  : undefined,
             })
           }
-          return transformSpinnerIconToLoadingSpinner(node, alias)
+          return transformSpinnerIconToLoadingSpinner(node, importedLoadingSpinnerTagName)
         }
 
         if (kaioComponentName) {
@@ -83,8 +79,5 @@ export const upgradeIconV1 =
 
     const node = ts.visitNode(rootNode, visit)
 
-    return updateKaioImports({
-      importsToRemove: importsToRemove.size > 0 ? importsToRemove : undefined,
-      importsToAdd: importsToAdd.size > 0 ? importsToAdd : undefined,
-    })(context)(node as ts.SourceFile)
+    return updateKaioImports({ importsToRemove, importsToAdd })(context)(node as ts.SourceFile)
   }

package/codemods/utils/__snapshots__/transformSource.spec.ts.snap

@@ -9,13 +9,3 @@ export const KaioComponent = (): JSX.Element => <Pancakes topping="jam"/>;
  
 "
 `;
-
-exports[`transformSourceForTagName > updates the value of Pancakes topping to jam 1`] = `
-"import React from 'react';
-// @ts-ignore
-import { Pancakes } from '@kaizen/components';
-
-export const KaioComponent = (): JSX.Element => <Pancakes topping="jam"/>;
- 
-"
-`;

package/codemods/utils/getKaioTagName.spec.ts

@@ -1,7 +1,11 @@
 import { parseJsx } from '../__tests__/utils'
-import { getKaioTagName, getKaioTagNamesByRegex } from './getKaioTagName'
+import {
+  getKaioTagName,
+  getKaioTagNamesMapByComponentName,
+  getKaioTagNamesMapByPattern,
+} from './getKaioTagName'
 
-describe('getKaioTagName', () => {
+describe('getKaioTagName()', () => {
   it('returns the import name if it matches the target specifier', () => {
     const input = parseJsx('import { Well } from "@kaizen/components"')
     const tagName = getKaioTagName(input, 'Well')
@@ -21,61 +25,201 @@ describe('getKaioTagName', () => {
   })
 })
 
-describe('getKaioTagNamesByRegex', () => {
-  it('returns the import names if it matches the regex target specifier', () => {
+describe('getKaioTagNamesMapByComponentName()', () => {
+  it('returns import attributes that match the component name', () => {
+    const input = parseJsx('import { Button } from "@kaizen/components"')
+    const tagNames = getKaioTagNamesMapByComponentName(input, ['Button'])
+    expect(tagNames).toEqual(
+      new Map([
+        [
+          'Button',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'Button',
+            originalName: 'Button',
+          },
+        ],
+      ]),
+    )
+  })
+
+  it('returns import attributes that matches the component name when an alias exists', () => {
+    const input = parseJsx('import { Button as KzButton } from "@kaizen/components"')
+    const tagNames = getKaioTagNamesMapByComponentName(input, ['Button'])
+    expect(tagNames).toEqual(
+      new Map([
+        [
+          'KzButton',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'KzButton',
+            originalName: 'Button',
+          },
+        ],
+      ]),
+    )
+  })
+
+  it('returns import attributes from different KAIO imports', () => {
+    const input = parseJsx(`
+      import { Button as KzButton } from "@kaizen/components"
+      import { Button as FutureButton } from "@kaizen/components/future"
+    `)
+    const tagNames = getKaioTagNamesMapByComponentName(input, ['Button'])
+    expect(tagNames).toEqual(
+      new Map([
+        [
+          'KzButton',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'KzButton',
+            originalName: 'Button',
+          },
+        ],
+        [
+          'FutureButton',
+          {
+            importModuleName: '@kaizen/components/future',
+            tagName: 'FutureButton',
+            originalName: 'Button',
+          },
+        ],
+      ]),
+    )
+  })
+
+  it('returns import attributes for multiple components', () => {
+    const input = parseJsx(`
+      import { Button, IconButton } from "@kaizen/components"
+    `)
+    const tagNames = getKaioTagNamesMapByComponentName(input, ['Button', 'IconButton'])
+    expect(tagNames).toEqual(
+      new Map([
+        [
+          'Button',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'Button',
+            originalName: 'Button',
+          },
+        ],
+        [
+          'IconButton',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'IconButton',
+            originalName: 'IconButton',
+          },
+        ],
+      ]),
+    )
+  })
+
+  it('returns undefined if there is no exact match component name', () => {
+    const input = parseJsx(`
+      import { IconButton } from "@kaizen/components"
+    `)
+    const tagNames = getKaioTagNamesMapByComponentName(input, ['Button'])
+    expect(tagNames).toBe(undefined)
+  })
+
+  it('returns undefined if there is no match in KAIO', () => {
+    const input = parseJsx(`
+      import { Well } from "@kaizen/components"
+      import { Button } from "@kaizen/button"
+    `)
+    const tagNames = getKaioTagNamesMapByComponentName(input, ['Button'])
+    expect(tagNames).toBe(undefined)
+  })
+})
+
+describe('getKaioTagNamesMapByPattern()', () => {
+  it('returns import attributes if it matches the regex pattern', () => {
     const input = parseJsx('import { AddIcon, ArrowDownIcon, Well } from "@kaizen/components"')
-    const tagNames = getKaioTagNamesByRegex(input, 'Icon')
+    const tagNames = getKaioTagNamesMapByPattern(input, 'Icon$')
     expect(tagNames).toEqual(
       new Map([
         [
-          '@kaizen/components',
-          new Map([
-            ['AddIcon', 'AddIcon'],
-            ['ArrowDownIcon', 'ArrowDownIcon'],
-          ]),
+          'AddIcon',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'AddIcon',
+            originalName: 'AddIcon',
+          },
+        ],
+        [
+          'ArrowDownIcon',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'ArrowDownIcon',
+            originalName: 'ArrowDownIcon',
+          },
         ],
       ]),
     )
   })
 
-  it('returns the import alias if it matches the target specifier', () => {
+  it('returns import attributes that matches the regex pattern when an alias exists', () => {
     const input = parseJsx(
       'import { AddIcon as KzAddIcon, ArrowDownIcon, Well } from "@kaizen/components"',
     )
-    const tagNames = getKaioTagNamesByRegex(input, 'Icon')
+    const tagNames = getKaioTagNamesMapByPattern(input, 'Icon$')
     expect(tagNames).toEqual(
       new Map([
         [
-          '@kaizen/components',
-          new Map([
-            ['KzAddIcon', 'AddIcon'],
-            ['ArrowDownIcon', 'ArrowDownIcon'],
-          ]),
+          'KzAddIcon',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'KzAddIcon',
+            originalName: 'AddIcon',
+          },
+        ],
+        [
+          'ArrowDownIcon',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'ArrowDownIcon',
+            originalName: 'ArrowDownIcon',
+          },
         ],
       ]),
     )
   })
 
-  it('returns matching import names from different KAIO imports', () => {
+  it('returns import attributes from different KAIO imports', () => {
     const input = parseJsx(`
       import { AddIcon, Well } from "@kaizen/components"
       import { Icon } from "@kaizen/components/future"
     `)
-    const tagNames = getKaioTagNamesByRegex(input, 'Icon$')
+    const tagNames = getKaioTagNamesMapByPattern(input, 'Icon$')
     expect(tagNames).toEqual(
       new Map([
-        ['@kaizen/components', new Map([['AddIcon', 'AddIcon']])],
-        ['@kaizen/components/future', new Map([['Icon', 'Icon']])],
+        [
+          'AddIcon',
+          {
+            importModuleName: '@kaizen/components',
+            tagName: 'AddIcon',
+            originalName: 'AddIcon',
+          },
+        ],
+        [
+          'Icon',
+          {
+            importModuleName: '@kaizen/components/future',
+            tagName: 'Icon',
+            originalName: 'Icon',
+          },
+        ],
       ]),
     )
   })
 
-  it('returns undefined if there is no match to the target specifier', () => {
+  it('returns undefined if there is no match to the regex pattern in KAIO', () => {
     const input = parseJsx(`
       import { Well } from "@kaizen/components"
       import { AddIcon } from "@kaizen/icons"
     `)
-    const tagNames = getKaioTagNamesByRegex(input, 'Icon')
+    const tagNames = getKaioTagNamesMapByPattern(input, 'Icon')
     expect(tagNames).toBe(undefined)
   })
 })

package/codemods/utils/getKaioTagName.ts

@@ -1,13 +1,11 @@
 import ts from 'typescript'
 
-const getKaioNamedImports = (
-  visitedNode: ts.Node,
-):
-  | {
-      importModuleName: string
-      namedImports: ts.NodeArray<ts.ImportSpecifier>
-    }
-  | undefined => {
+type ImportModuleNamedImports = {
+  importModuleName: string
+  namedImports: ts.NodeArray<ts.ImportSpecifier>
+}
+
+const getKaioNamedImports = (visitedNode: ts.Node): ImportModuleNamedImports | undefined => {
   if (ts.isImportDeclaration(visitedNode)) {
     const moduleSpecifier = (visitedNode.moduleSpecifier as ts.StringLiteral).text
     if (moduleSpecifier.includes('@kaizen/components')) {
@@ -72,27 +70,31 @@ export const getKaioTagName = (
   return visitNode(node)
 }
 
-// Key is the tag name (component name or alias)
-// Value is the original component name
-type TagNamesMap = Map<string, string>
-// Key is the import module name (eg. `@kaizen/components/future`)
-export type ImportModuleNameTagsMap = Map<string, TagNamesMap>
+type TagImportAttributes = {
+  // Import module name (eg. `@kaizen/components/future`)
+  importModuleName: string
+  // Component name or alias
+  tagName: string
+  // Original component name
+  originalName: string
+}
+/** Key is the tag name (component name or alias) */
+export type TagImportAttributesMap = Map<string, TagImportAttributes>
 
 /**
- * Recurses through AST to find all the import names or aliases in KAIO that match the provided regex.
- *
- * @returns Map<string, Map<string, string>> | undefined
- * - `Map<string, Map<string, string>>` = Map<importModuleName, Map<tagName, originalName>>
- *   - `importModuleName` = the module name of the KAIO import (eg. `@kaizen/components/future`)
- *   - `tagName` = the component name or alias (eg. `KaizenWell`)
- *   - `originalName` = the original component name (eg. `Well`)
- * - `undefined` no imports that match the target
+ * Recurses through AST to find all the import names or aliases in KAIO that exactly match the provided strings.
  */
-export const getKaioTagNamesByRegex = (
+const getKaioTagNamesMap = (
   node: ts.Node,
-  importSpecifierPattern: RegExp | string,
-): ImportModuleNameTagsMap | undefined => {
-  const tagsByImportModuleName = new Map() as ImportModuleNameTagsMap
+  onFilterAndUpdateTagsMap: (
+    kaioNamedImports: ImportModuleNamedImports,
+    checkAndUpdateTagsMap: (
+      namedImport: ts.ImportSpecifier,
+      checkToAddToMap: (originalName: string) => boolean,
+    ) => void,
+  ) => void,
+): TagImportAttributesMap | undefined => {
+  const tagsMap = new Map() as TagImportAttributesMap
 
   const visitNode = (visitedNode: ts.Node): ts.Node | undefined => {
     const kaioNamedImports = getKaioNamedImports(visitedNode)
@@ -101,23 +103,57 @@ export const getKaioTagNamesByRegex = (
       return ts.forEachChild(visitedNode, visitNode)
     }
 
-    const tags = new Map() as TagNamesMap
-    kaioNamedImports.namedImports.forEach((importSpecifier) => {
-      const { tagName, originalName } = getNamesFromSpecifier(importSpecifier)
+    onFilterAndUpdateTagsMap(kaioNamedImports, (namedImport, checkToAddToMap) => {
+      const { originalName, tagName } = getNamesFromSpecifier(namedImport)
 
-      if (new RegExp(importSpecifierPattern).test(originalName)) {
-        tags.set(tagName, originalName)
+      if (checkToAddToMap(originalName)) {
+        tagsMap.set(tagName, {
+          importModuleName: kaioNamedImports.importModuleName,
+          tagName,
+          originalName,
+        })
+        return true
       }
-    })
 
-    if (tags.size > 0) {
-      tagsByImportModuleName.set(kaioNamedImports.importModuleName, new Map(tags))
-    }
+      return false
+    })
 
     return ts.forEachChild(visitedNode, visitNode)
   }
 
   visitNode(node)
 
-  return tagsByImportModuleName.size === 0 ? undefined : tagsByImportModuleName
+  return tagsMap.size === 0 ? undefined : tagsMap
+}
+
+/**
+ * Recurses through AST to find all the import names or aliases in KAIO that exactly match the provided strings.
+ */
+export const getKaioTagNamesMapByComponentName = (
+  node: ts.Node,
+  importSpecifiers: string[],
+): TagImportAttributesMap | undefined => {
+  return getKaioTagNamesMap(node, (kaioNamedImports, checkAndUpdateTagsMap) => {
+    importSpecifiers.forEach((importSpecifier) => {
+      kaioNamedImports.namedImports.find((namedImport) => {
+        checkAndUpdateTagsMap(namedImport, (originalName) => originalName === importSpecifier)
+      })
+    })
+  })
+}
+
+/**
+ * Recurses through AST to find all the import names or aliases in KAIO that match the provided regex pattern.
+ */
+export const getKaioTagNamesMapByPattern = (
+  node: ts.Node,
+  importSpecifierPattern: RegExp | string,
+): TagImportAttributesMap | undefined => {
+  return getKaioTagNamesMap(node, (kaioNamedImports, checkAndUpdateTagsMap) => {
+    kaioNamedImports.namedImports.forEach((namedImport) => {
+      checkAndUpdateTagsMap(namedImport, (originalName) =>
+        new RegExp(importSpecifierPattern).test(originalName),
+      )
+    })
+  })
 }

package/codemods/utils/migrateStringProp.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { printAst, transformSourceForTagName, type TransformSourceForTagNameArgs } from '../utils'
+import { printAst, transformSource, type TransformSourceArgs } from '../utils'
 import { migrateStringProp } from './migrateStringProp'
 
 const transformTopping = (oldValue: string): string => {
@@ -11,12 +11,23 @@ const transformTopping = (oldValue: string): string => {
   }
 }
 
-const testMigrateStringProp = (sourceFile: TransformSourceForTagNameArgs['sourceFile']): string =>
-  transformSourceForTagName({
+const testMigrateStringProp = (sourceFile: TransformSourceArgs['sourceFile']): string => {
+  const tagsMap = new Map([
+    [
+      'Pancakes',
+      {
+        importModuleName: '@kaizen/components',
+        tagName: 'Pancakes',
+        originalName: 'Pancakes',
+      },
+    ],
+  ])
+
+  return transformSource({
     sourceFile,
-    astTransformer: migrateStringProp('toppingOld', 'toppingNew', transformTopping),
-    tagName: 'Pancakes',
+    transformers: [migrateStringProp('toppingOld', 'toppingNew', transformTopping)(tagsMap)],
   })
+}
 
 describe('migrateStringProp()', () => {
   describe('replaces old prop name and value with new prop name and value', () => {

package/codemods/utils/migrateStringProp.ts

@@ -1,4 +1,5 @@
 import ts from 'typescript'
+import { type TagImportAttributesMap } from './getKaioTagName'
 import { getPropValueText } from './getPropValueText'
 import { updateJsxElementWithNewProps } from './updateJsxElementWithNewProps'
 
@@ -8,11 +9,17 @@ export const migrateStringProp =
     newPropName: string,
     valueTransformer: (value: OldValue) => NewValue,
   ) =>
-  (context: ts.TransformationContext, tagName: string) =>
-  (rootNode: ts.SourceFile): ts.SourceFile => {
+  (tagsMap: TagImportAttributesMap): ts.TransformerFactory<ts.SourceFile> =>
+  (context) =>
+  (rootNode) => {
     const visit = (node: ts.Node): ts.Node => {
       if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
-        if (node.tagName.getText() === tagName) {
+        const tagName = node.tagName.getText()
+        const tagImportAttributes = tagsMap.get(tagName)
+
+        if (!tagImportAttributes) return node
+
+        if (tagName === tagImportAttributes.tagName) {
           const newAttributes = node.attributes.properties.map((attr) => {
             if (ts.isJsxAttribute(attr) && attr.name.getText() === oldPropName) {
               const oldValue = attr.initializer && getPropValueText(attr.initializer)

package/codemods/utils/removeProps.spec.ts

@@ -1,7 +1,28 @@
 import { parseJsx } from '../__tests__/utils'
-import { printAst, transformSourceForTagName } from '../utils'
+import { printAst, transformSource, type TransformSourceArgs } from '../utils'
 import { removeProps } from './removeProps'
 
+const testRemoveProps = (
+  sourceFile: TransformSourceArgs['sourceFile'],
+  propsToRemove: string[] = ['topping'],
+): string => {
+  const tagsMap = new Map([
+    [
+      'Pancakes',
+      {
+        importModuleName: '@kaizen/components',
+        tagName: 'Pancakes',
+        originalName: 'Pancakes',
+      },
+    ],
+  ])
+
+  return transformSource({
+    sourceFile,
+    transformers: [removeProps(propsToRemove)(tagsMap)],
+  })
+}
+
 describe('removeProps()', () => {
   it('removes single specified prop', () => {
     const inputAst = parseJsx(`
@@ -10,12 +31,7 @@ describe('removeProps()', () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <Pancakes />
     `)
-    const transformed = transformSourceForTagName({
-      sourceFile: inputAst,
-      astTransformer: removeProps(['topping']),
-      tagName: 'Pancakes',
-    })
-    expect(transformed).toEqual(printAst(outputAst))
+    expect(testRemoveProps(inputAst)).toEqual(printAst(outputAst))
   })
 
   it('removes multiple specified props', () => {
@@ -25,12 +41,7 @@ describe('removeProps()', () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <Pancakes />
     `)
-    const transformed = transformSourceForTagName({
-      sourceFile: inputAst,
-      astTransformer: removeProps(['topping', 'fruit']),
-      tagName: 'Pancakes',
-    })
-    expect(transformed).toEqual(printAst(outputAst))
+    expect(testRemoveProps(inputAst, ['topping', 'fruit'])).toEqual(printAst(outputAst))
   })
 
   it('handles multiple attributes and removes only specified props', () => {
@@ -40,12 +51,7 @@ describe('removeProps()', () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <Pancakes id="123"/>
     `)
-    const transformed = transformSourceForTagName({
-      sourceFile: inputAst,
-      astTransformer: removeProps(['topping']),
-      tagName: 'Pancakes',
-    })
-    expect(transformed).toBe(printAst(outputAst))
+    expect(testRemoveProps(inputAst)).toEqual(printAst(outputAst))
   })
 
   it('transforms multiple Pancakess', () => {
@@ -55,11 +61,6 @@ describe('removeProps()', () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <div><Pancakes /><Pancakes /></div>
     `)
-    const transformed = transformSourceForTagName({
-      sourceFile: inputAst,
-      astTransformer: removeProps(['topping']),
-      tagName: 'Pancakes',
-    })
-    expect(transformed).toBe(printAst(outputAst))
+    expect(testRemoveProps(inputAst)).toEqual(printAst(outputAst))
   })
 })

package/codemods/utils/removeProps.ts

@@ -1,13 +1,20 @@
 import ts from 'typescript'
+import { type TagImportAttributesMap } from './getKaioTagName'
 import { updateJsxElementWithNewProps } from './updateJsxElementWithNewProps'
 
 export const removeProps =
   (propsToRemove: string[]) =>
-  (context: ts.TransformationContext, tagName: string) =>
-  (rootNode: ts.SourceFile): ts.SourceFile => {
+  (tagsMap: TagImportAttributesMap): ts.TransformerFactory<ts.SourceFile> =>
+  (context) =>
+  (rootNode) => {
     function visit(node: ts.Node): ts.Node {
       if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
-        if (node.tagName.getText() === tagName) {
+        const tagName = node.tagName.getText()
+        const tagImportAttributes = tagsMap.get(tagName)
+
+        if (!tagImportAttributes) return node
+
+        if (tagName === tagImportAttributes.tagName) {
           const newAttributes = node.attributes.properties.reduce<ts.JsxAttributeLike[]>(
             (acc, attr) => {
               if (ts.isJsxAttribute(attr) && propsToRemove.includes(attr.name.getText())) {