@kaizen/components 1.80.2 → 1.80.4

package/codemods/utils/createModulePathTransformer.spec.ts

@@ -0,0 +1,209 @@
+import type ts from 'typescript'
+import { parseJsx } from '../__tests__/utils'
+import { processImportDeclaration, type ProcessImportOptions } from './createModulePathTransformer'
+
+const createTestOptions = (): ProcessImportOptions => ({
+  importsToRemove: new Map(),
+  importsToAdd: new Map(),
+  renameMap: new Map([
+    [
+      'OldComponent',
+      {
+        newName: 'NewComponent',
+        fromModules: ['@kaizen/components/v3/actions'],
+        toModule: '@kaizen/components',
+      },
+    ],
+    [
+      'Select',
+      {
+        newName: 'SingleSelect',
+        fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
+        toModule: '@kaizen/components',
+      },
+    ],
+  ]),
+  validRenames: new Set(),
+})
+
+const getImportDeclaration = (code: string): ts.ImportDeclaration => {
+  const sourceFile = parseJsx(code)
+  return sourceFile.statements[0] as ts.ImportDeclaration
+}
+
+describe('processImportDeclaration', () => {
+  it('should transform basic import', () => {
+    const options = createTestOptions()
+    const importDeclaration = getImportDeclaration(
+      `import { OldComponent } from "@kaizen/components/v3/actions"`,
+    )
+
+    processImportDeclaration(importDeclaration, options)
+
+    expect(options.importsToRemove.get('@kaizen/components/v3/actions')).toContain('OldComponent')
+    expect(options.importsToAdd.get('@kaizen/components')?.get('NewComponent')).toEqual({
+      componentName: 'NewComponent',
+      alias: undefined,
+      isTypeOnly: false,
+    })
+    expect(options.validRenames?.has('OldComponent')).toBe(true)
+  })
+
+  it('should transform aliased import', () => {
+    const options = createTestOptions()
+    const importDeclaration = getImportDeclaration(
+      `import { OldComponent as MyComponent } from "@kaizen/components/v3/actions"`,
+    )
+
+    processImportDeclaration(importDeclaration, options)
+
+    expect(options.importsToRemove.get('@kaizen/components/v3/actions')).toContain('OldComponent')
+    expect(options.importsToAdd.get('@kaizen/components')?.get('NewComponent')).toEqual({
+      componentName: 'NewComponent',
+      alias: 'MyComponent',
+      isTypeOnly: false,
+    })
+    expect(options.validRenames?.has('OldComponent')).toBe(true)
+  })
+
+  it('should transform type-only import at import clause level', () => {
+    const options = createTestOptions()
+    const importDeclaration = getImportDeclaration(
+      `import type { OldComponent } from "@kaizen/components/v3/actions"`,
+    )
+
+    processImportDeclaration(importDeclaration, options)
+
+    expect(options.importsToRemove.get('@kaizen/components/v3/actions')).toContain('OldComponent')
+    expect(options.importsToAdd.get('@kaizen/components')?.get('NewComponent')).toEqual({
+      componentName: 'NewComponent',
+      alias: undefined,
+      isTypeOnly: true,
+    })
+    expect(options.validRenames?.has('OldComponent')).toBe(true)
+  })
+
+  it('should transform inline type-only import', () => {
+    const options = createTestOptions()
+    const importDeclaration = getImportDeclaration(
+      `import { type OldComponent } from "@kaizen/components/v3/actions"`,
+    )
+
+    processImportDeclaration(importDeclaration, options)
+
+    expect(options.importsToRemove.get('@kaizen/components/v3/actions')).toContain('OldComponent')
+    expect(options.importsToAdd.get('@kaizen/components')?.get('NewComponent')).toEqual({
+      componentName: 'NewComponent',
+      alias: undefined,
+      isTypeOnly: true,
+    })
+    expect(options.validRenames?.has('OldComponent')).toBe(true)
+  })
+
+  it('should handle mixed imports in single declaration', () => {
+    const options = createTestOptions()
+    const importDeclaration = getImportDeclaration(
+      `import { OldComponent, AnotherComponent } from "@kaizen/components/v3/actions"`,
+    )
+
+    processImportDeclaration(importDeclaration, options)
+
+    expect(options.importsToRemove.get('@kaizen/components/v3/actions')).toContain('OldComponent')
+    expect(options.importsToRemove.get('@kaizen/components/v3/actions')).not.toContain(
+      'AnotherComponent',
+    )
+    expect(options.importsToAdd.get('@kaizen/components')?.get('NewComponent')).toEqual({
+      componentName: 'NewComponent',
+      alias: undefined,
+      isTypeOnly: false,
+    })
+    expect(options.validRenames?.has('OldComponent')).toBe(true)
+  })
+
+  it('should ignore imports from non-targeted modules', () => {
+    const options = createTestOptions()
+    const importDeclaration = getImportDeclaration(
+      `import { OldComponent } from "some-other-library"`,
+    )
+
+    processImportDeclaration(importDeclaration, options)
+
+    expect(options.importsToRemove.size).toBe(0)
+    expect(options.importsToAdd.size).toBe(0)
+    expect(options.validRenames?.size).toBe(0)
+  })
+
+  it('should ignore imports not in rename map', () => {
+    const options = createTestOptions()
+    const importDeclaration = getImportDeclaration(
+      `import { SomeOtherComponent } from "@kaizen/components/v3/actions"`,
+    )
+
+    processImportDeclaration(importDeclaration, options)
+
+    expect(options.importsToRemove.size).toBe(0)
+    expect(options.importsToAdd.size).toBe(0)
+    expect(options.validRenames?.size).toBe(0)
+  })
+
+  it('should handle multiple fromModules for same component', () => {
+    const options = createTestOptions()
+    const importDeclaration1 = getImportDeclaration(
+      `import { Select } from "@kaizen/components/next"`,
+    )
+    const importDeclaration2 = getImportDeclaration(
+      `import { Select } from "@kaizen/components/future"`,
+    )
+
+    processImportDeclaration(importDeclaration1, options)
+
+    expect(options.importsToRemove.get('@kaizen/components/next')).toContain('Select')
+    expect(options.importsToAdd.get('@kaizen/components')?.get('SingleSelect')).toEqual({
+      componentName: 'SingleSelect',
+      alias: undefined,
+      isTypeOnly: false,
+    })
+    expect(options.validRenames?.has('Select')).toBe(true)
+
+    // Reset for second test
+    options.importsToRemove.clear()
+    options.importsToAdd.clear()
+    options.validRenames?.clear()
+
+    processImportDeclaration(importDeclaration2, options)
+
+    expect(options.importsToRemove.get('@kaizen/components/future')).toContain('Select')
+    expect(options.importsToAdd.get('@kaizen/components')?.get('SingleSelect')).toEqual({
+      componentName: 'SingleSelect',
+      alias: undefined,
+      isTypeOnly: false,
+    })
+    expect(options.validRenames?.has('Select')).toBe(true)
+  })
+
+  it('should handle default imports gracefully', () => {
+    const options = createTestOptions()
+    const importDeclaration = getImportDeclaration(
+      `import OldComponent from "@kaizen/components/v3/actions"`,
+    )
+
+    processImportDeclaration(importDeclaration, options)
+
+    expect(options.importsToRemove.size).toBe(0)
+    expect(options.importsToAdd.size).toBe(0)
+    expect(options.validRenames?.size).toBe(0)
+  })
+
+  it('should handle namespace imports gracefully', () => {
+    const options = createTestOptions()
+    const importDeclaration = getImportDeclaration(
+      `import * as Components from "@kaizen/components/v3/actions"`,
+    )
+
+    processImportDeclaration(importDeclaration, options)
+
+    expect(options.importsToRemove.size).toBe(0)
+    expect(options.importsToAdd.size).toBe(0)
+    expect(options.validRenames?.size).toBe(0)
+  })
+})

package/codemods/utils/createModulePathTransformer.ts

@@ -0,0 +1,59 @@
+import ts from 'typescript'
+import { setImportToAdd, setImportToRemove, type UpdateKaioImportsArgs } from './updateKaioImports'
+
+export type ModuleRenameConfig = {
+  newName: string
+  fromModules: string[]
+  toModule: string
+}
+
+export type ProcessImportOptions = {
+  importsToRemove: NonNullable<UpdateKaioImportsArgs['importsToRemove']>
+  importsToAdd: NonNullable<UpdateKaioImportsArgs['importsToAdd']>
+  renameMap: Map<string, ModuleRenameConfig>
+  validRenames?: Set<string>
+}
+
+/**
+ * Takes an import declaration and transforms it as specified in the options.renameMap
+ *
+ * @param node - The import declaration to process
+ * @param options - Configuration for import transformations
+ *
+ * @example
+ * ```typescript
+ * // For an import like: import { OldButton } from '@kaizen/legacy'
+ * // With renameMap: { 'OldButton': { newName: 'Button', fromModules: ['@kaizen/legacy'], toModule: '@kaizen/button' } }
+ * // Results in: import { Button } from '@kaizen/button'
+ * ```
+ */
+export const processImportDeclaration = (
+  node: ts.ImportDeclaration,
+  options: ProcessImportOptions,
+): void => {
+  const { importsToRemove, importsToAdd, renameMap, validRenames } = options
+  const moduleSpecifier = node.moduleSpecifier.getText().slice(1, -1)
+
+  const importClause = node.importClause
+  if (importClause?.namedBindings && ts.isNamedImports(importClause.namedBindings)) {
+    importClause.namedBindings.elements.forEach((importSpecifier) => {
+      const importName = importSpecifier.propertyName?.getText() ?? importSpecifier.name?.getText()
+
+      const renameConfig = renameMap.get(importName)
+      if (renameConfig?.fromModules.includes(moduleSpecifier)) {
+        validRenames?.add(importName)
+        setImportToRemove(importsToRemove, moduleSpecifier, importName)
+
+        const alias = importSpecifier.propertyName?.getText()
+          ? importSpecifier.name?.getText()
+          : undefined
+
+        setImportToAdd(importsToAdd, renameConfig.toModule, {
+          componentName: renameConfig.newName,
+          alias,
+          isTypeOnly: importSpecifier.isTypeOnly || importClause.isTypeOnly,
+        })
+      }
+    })
+  }
+}

package/codemods/utils/createRenameMapFromGroups.ts

@@ -0,0 +1,31 @@
+import type { ModuleRenameConfig } from './createModulePathTransformer'
+
+export type ComponentEntry = string | [string, string] // [oldName, newName]
+
+export type ComponentGroup = {
+  components: ComponentEntry[]
+  fromModules: string[]
+  toModule: string
+}
+
+export const createRenameMapFromGroups = (
+  groups: ComponentGroup[],
+): Map<string, ModuleRenameConfig> => {
+  const renameMap = new Map<string, ModuleRenameConfig>()
+
+  groups.forEach(({ components, fromModules, toModule }) => {
+    components.forEach((componentEntry) => {
+      const [oldName, newName] = Array.isArray(componentEntry)
+        ? componentEntry
+        : [componentEntry, componentEntry]
+
+      renameMap.set(oldName, {
+        newName,
+        fromModules,
+        toModule,
+      })
+    })
+  })
+
+  return renameMap
+}

package/codemods/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './createJsxElementWithChildren'
 export * from './createProp'
+export * from './createRenameMapFromGroups'
 export * from './getPropValueText'
 export * from './getKaioTagName'
 export * from './migrateStringProp'
@@ -9,3 +10,5 @@ export * from './transformSource'
 export * from './updateKaioImports'
 export * from './updateJsxElementWithNewProps'
 export * from './transformV1ButtonPropsToButtonOrLinkButton'
+export * from './updateJsxElementTagName'
+export * from './createModulePathTransformer'

package/codemods/utils/updateJsxElementTagName.spec.ts

@@ -0,0 +1,129 @@
+import ts from 'typescript'
+import { parseJsx } from '../__tests__/utils'
+import { updateJsxElementTagName, type ComponentRenameConfig } from './updateJsxElementTagName'
+
+const componentRenameMap = new Map<string, ComponentRenameConfig>([
+  [
+    'Pancakes',
+    {
+      newName: 'Beer',
+      fromModule: '@kaizen/components/next',
+      toModule: '@kaizen/components',
+    },
+  ],
+  ['Bart', { newName: 'Bender', fromModule: '@kaizen/components', toModule: '@kaizen/components' }],
+  [
+    'EatMyShorts',
+    { newName: 'MeatBags', fromModule: '@kaizen/components', toModule: '@kaizen/components' },
+  ],
+])
+
+describe('updateJsxElementTagName()', () => {
+  const factory = ts.factory
+
+  it('should ignore nodes not in componentMap', () => {
+    const elem = factory.createJsxSelfClosingElement(
+      factory.createIdentifier('Cowabunga'),
+      undefined,
+      factory.createJsxAttributes([]),
+    )
+
+    const result = updateJsxElementTagName(factory, elem, 'Cowabunga', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('Cowabunga')
+  })
+
+  it('should update self closing tag', () => {
+    const elem = factory.createJsxSelfClosingElement(
+      factory.createIdentifier('Pancakes'),
+      undefined,
+      factory.createJsxAttributes([]),
+    )
+
+    const result = updateJsxElementTagName(factory, elem, 'Beer', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('Beer')
+  })
+
+  it('should handle Component.SubComponent when in Component is found in componentMap', () => {
+    const source = `<Bart.Shorts />`
+    const sourceFile = parseJsx(source)
+    const statement = sourceFile.statements[0] as ts.ExpressionStatement
+    const elem = statement.expression as ts.JsxSelfClosingElement
+
+    const result = updateJsxElementTagName(factory, elem, 'ignored', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect(ts.isPropertyAccessExpression(result.tagName)).toBe(true)
+
+    const tagName = result.tagName as ts.PropertyAccessExpression
+    expect((tagName.expression as ts.Identifier).text).toBe('Bender')
+    expect(tagName.name.text).toBe('Shorts')
+  })
+
+  it('should ignore Component.SubComponent when in Component is not in componentMap', () => {
+    const source = `<Not.Here />`
+    const sourceFile = parseJsx(source)
+    const statement = sourceFile.statements[0] as ts.ExpressionStatement
+    const elem = statement.expression as ts.JsxSelfClosingElement
+
+    const result = updateJsxElementTagName(factory, elem, 'ignored', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect(ts.isPropertyAccessExpression(result.tagName)).toBe(true)
+
+    const tagName = result.tagName as ts.PropertyAccessExpression
+    expect((tagName.expression as ts.Identifier).text).toBe('Not')
+    expect(tagName.name.text).toBe('Here')
+  })
+
+  it('should update JSX opening element tag name', () => {
+    const openingElement = factory.createJsxOpeningElement(
+      factory.createIdentifier('Pancakes'),
+      undefined,
+      factory.createJsxAttributes([]),
+    )
+
+    const result = updateJsxElementTagName(factory, openingElement, 'Pizza', componentRenameMap)
+
+    expect(ts.isJsxOpeningElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('Pizza')
+  })
+
+  it('should update JSX closing element tag name', () => {
+    const closingElement = factory.createJsxClosingElement(factory.createIdentifier('EatMyShorts'))
+
+    const result = updateJsxElementTagName(factory, closingElement, 'MeatBags', componentRenameMap)
+
+    expect(ts.isJsxClosingElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('MeatBags')
+  })
+
+  it('should preserve attributes when updating JSX elements', () => {
+    const attributes = factory.createJsxAttributes([
+      factory.createJsxAttribute(
+        factory.createIdentifier('className'),
+        factory.createStringLiteral('test-class'),
+      ),
+    ])
+
+    const element = factory.createJsxSelfClosingElement(
+      factory.createIdentifier('Pancakes'),
+      undefined,
+      attributes,
+    )
+
+    const result = updateJsxElementTagName(factory, element, 'Pizza', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('Pizza')
+    expect((result as ts.JsxSelfClosingElement).attributes.properties.length).toBe(1)
+
+    const attribute = (result as ts.JsxSelfClosingElement).attributes
+      .properties[0] as ts.JsxAttribute
+    expect((attribute.name as ts.Identifier).text).toBe('className')
+    expect((attribute.initializer as ts.StringLiteral).text).toBe('test-class')
+  })
+})

package/codemods/utils/updateJsxElementTagName.ts

@@ -0,0 +1,56 @@
+import ts from 'typescript'
+
+export type ComponentRenameConfig = {
+  newName: string
+  fromModule: string
+  toModule: string
+}
+
+export const updateJsxElementTagName = (
+  factory: ts.NodeFactory,
+  node: ts.JsxOpeningElement | ts.JsxClosingElement | ts.JsxSelfClosingElement,
+  newTagName: string,
+  componentRenameMap: Map<string, ComponentRenameConfig>,
+): ts.JsxOpeningElement | ts.JsxClosingElement | ts.JsxSelfClosingElement => {
+  let newTagNameExpr: ts.JsxTagNameExpression
+
+  if (ts.isPropertyAccessExpression(node.tagName)) {
+    const baseComponentName = node.tagName.expression.getText()
+    const rename = componentRenameMap.get(baseComponentName)
+
+    if (rename) {
+      newTagNameExpr = factory.createPropertyAccessExpression(
+        factory.createIdentifier(rename.newName),
+        node.tagName.name,
+      ) as ts.JsxTagNameExpression
+    } else {
+      newTagNameExpr = node.tagName
+    }
+  } else {
+    newTagNameExpr = factory.createIdentifier(newTagName)
+  }
+
+  if (ts.isJsxSelfClosingElement(node)) {
+    return factory.updateJsxSelfClosingElement(
+      node,
+      newTagNameExpr,
+      node.typeArguments,
+      node.attributes,
+    )
+  }
+
+  if (ts.isJsxOpeningElement(node)) {
+    return factory.updateJsxOpeningElement(
+      node,
+      newTagNameExpr,
+      node.typeArguments,
+      node.attributes,
+    )
+  }
+
+  if (ts.isJsxClosingElement(node)) {
+    return factory.updateJsxClosingElement(node, newTagNameExpr)
+  }
+
+  return node
+}

package/codemods/utils/updateKaioImports.spec.ts

@@ -200,6 +200,88 @@ describe('updateKaioImports()', () => {
           }),
         ).toEqual(printAst(outputAst))
       })
+
+      describe('type-only imports', () => {
+        it('creates a new type-only import declaration', () => {
+          const inputAst = parseJsx(`
+          import { Well } from "@kaizen/components"
+        `)
+          const outputAst = parseJsx(`
+          import { Well } from "@kaizen/components"
+          import type { Card } from "@kaizen/components/next"
+        `)
+          expect(
+            transformInput(inputAst)({
+              importsToAdd: new Map([
+                [
+                  '@kaizen/components/next',
+                  new Map([['Card', { componentName: 'Card', isTypeOnly: true }]]),
+                ],
+              ]),
+            }),
+          ).toEqual(printAst(outputAst))
+        })
+
+        it('adds type-only import to existing regular imports', () => {
+          const inputAst = parseJsx(`
+          import { Select } from "@kaizen/components/next"
+        `)
+          const outputAst = parseJsx(`
+          import { Select, type Card } from "@kaizen/components/next"
+        `)
+          expect(
+            transformInput(inputAst)({
+              importsToAdd: new Map([
+                [
+                  '@kaizen/components/next',
+                  new Map([['Card', { componentName: 'Card', isTypeOnly: true }]]),
+                ],
+              ]),
+            }),
+          ).toEqual(printAst(outputAst))
+        })
+
+        it('adds type-only import to existing type-only imports', () => {
+          const inputAst = parseJsx(`
+          import type { CardProps } from "@kaizen/components/next"
+        `)
+          const outputAst = parseJsx(`
+          import type { CardProps, type ButtonProps } from "@kaizen/components/next"
+        `)
+          expect(
+            transformInput(inputAst)({
+              importsToAdd: new Map([
+                [
+                  '@kaizen/components/next',
+                  new Map([['ButtonProps', { componentName: 'ButtonProps', isTypeOnly: true }]]),
+                ],
+              ]),
+            }),
+          ).toEqual(printAst(outputAst))
+        })
+
+        it('adds mix of type-only and regular imports', () => {
+          const inputAst = parseJsx(`
+          import { Select } from "@kaizen/components/next"
+        `)
+          const outputAst = parseJsx(`
+          import { Select, type CardProps, Button } from "@kaizen/components/next"
+        `)
+          expect(
+            transformInput(inputAst)({
+              importsToAdd: new Map([
+                [
+                  '@kaizen/components/next',
+                  new Map([
+                    ['CardProps', { componentName: 'CardProps', isTypeOnly: true }],
+                    ['Button', { componentName: 'Button', isTypeOnly: false }],
+                  ]),
+                ],
+              ]),
+            }),
+          ).toEqual(printAst(outputAst))
+        })
+      })
     })
   })
 })

package/codemods/utils/updateKaioImports.ts

@@ -34,7 +34,7 @@ const removeNamedImports = (
   return node
 }
 
-type NewImportAttributes = { componentName: string; alias?: string }
+type NewImportAttributes = { componentName: string; alias?: string; isTypeOnly?: boolean }
 type ImportsToAdd = Map<string, NewImportAttributes>
 
 const createImportDeclaration = (
@@ -42,9 +42,12 @@ const createImportDeclaration = (
   importsToAdd: ImportsToAdd,
   moduleSpecifier: string,
 ): ts.ImportDeclaration => {
-  const namedImports = Array.from(importsToAdd.values()).map(({ componentName, alias }) =>
+  const imports = Array.from(importsToAdd.values())
+  const allTypeOnly = imports.every(({ isTypeOnly }) => isTypeOnly)
+
+  const namedImports = imports.map(({ componentName, alias, isTypeOnly }) =>
     factory.createImportSpecifier(
-      false,
+      allTypeOnly ? false : (isTypeOnly ?? false),
       alias ? factory.createIdentifier(componentName) : undefined,
       factory.createIdentifier(alias ?? componentName),
     ),
@@ -52,7 +55,7 @@ const createImportDeclaration = (
 
   return factory.createImportDeclaration(
     undefined,
-    factory.createImportClause(false, undefined, factory.createNamedImports(namedImports)),
+    factory.createImportClause(allTypeOnly, undefined, factory.createNamedImports(namedImports)),
     factory.createStringLiteral(moduleSpecifier),
   )
 }
@@ -75,9 +78,13 @@ const updateNamedImports = (
     })
   }
 
-  Array.from(importsToAdd.values()).forEach(({ alias, componentName }) => {
+  const newImports = Array.from(importsToAdd.values())
+  const allNewTypeOnly = newImports.every(({ isTypeOnly }) => isTypeOnly)
+  const hasExistingImports = importSpecifiers.length > 0
+
+  newImports.forEach(({ alias, componentName, isTypeOnly }) => {
     const newImport = factory.createImportSpecifier(
-      false,
+      !allNewTypeOnly || hasExistingImports ? (isTypeOnly ?? false) : false,
       alias ? factory.createIdentifier(componentName) : undefined,
       factory.createIdentifier(alias ?? componentName),
     )
@@ -87,12 +94,14 @@ const updateNamedImports = (
     }
   })
 
+  const isModuleLevelTypeOnly = allNewTypeOnly && !hasExistingImports
+
   return factory.updateImportDeclaration(
     node,
     node.modifiers,
     factory.updateImportClause(
       node.importClause,
-      node.importClause.isTypeOnly,
+      isModuleLevelTypeOnly || node.importClause.isTypeOnly,
       node.importClause.name,
       factory.createNamedImports(importSpecifiers),
     ),