@kaizen/components 1.80.3 → 1.80.4

package/codemods/migrateV2NextToCurrent/migrateV2NextToCurrent.ts

@@ -0,0 +1,104 @@
+import ts from 'typescript'
+import {
+  createRenameMapFromGroups,
+  processImportDeclaration,
+  setImportToAdd,
+  setImportToRemove,
+  updateKaioImports,
+  type ComponentGroup,
+  type TagImportAttributesMap,
+  type UpdateKaioImportsArgs,
+} from '../utils'
+
+const componentGroups: ComponentGroup[] = [
+  {
+    components: ['Menu', 'MenuHeader', 'MenuItem', 'MenuPopover', 'MenuSection', 'MenuTrigger'],
+    fromModules: ['@kaizen/components/next', '@kaizen/components/v3/actions'],
+    toModule: '@kaizen/components',
+  },
+  {
+    components: ['Tabs', 'Tab', 'TabList', 'TabPanel', 'Icon', 'Focusable', 'Key'],
+    fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
+    toModule: '@kaizen/components',
+  },
+  {
+    components: ['Tooltip', 'TooltipTrigger'],
+    fromModules: [
+      '@kaizen/components/next',
+      '@kaizen/components/future',
+      '@kaizen/components/v3/overlays',
+    ],
+    toModule: '@kaizen/components',
+  },
+  {
+    components: ['ReversedColors'],
+    fromModules: ['@kaizen/components/v3/utilities'],
+    toModule: '@kaizen/components',
+  },
+  {
+    components: ['Button', 'ButtonProps', 'ButtonsSizes', 'ButtonVariants'],
+    fromModules: [
+      '@kaizen/components/next',
+      '@kaizen/components/future',
+      '@kaizen/components/v3/actions',
+    ],
+    toModule: '@kaizen/components',
+  },
+]
+
+const renameMap = createRenameMapFromGroups(componentGroups)
+
+const modulePathMap = new Map([
+  ['@kaizen/components/v3/react-aria', '@kaizen/components/react-aria'],
+  ['@kaizen/components/v3/react-aria-components', '@kaizen/components/react-aria-components'],
+])
+
+export const migrateV2NextToCurrent =
+  (_tagsMap: TagImportAttributesMap | undefined): ts.TransformerFactory<ts.SourceFile> =>
+  (context) =>
+  (rootNode) => {
+    const importsToRemove: UpdateKaioImportsArgs['importsToRemove'] = new Map()
+    const importsToAdd: UpdateKaioImportsArgs['importsToAdd'] = new Map()
+
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isImportDeclaration(node)) {
+        const moduleSpecifier = node.moduleSpecifier
+        if (ts.isStringLiteral(moduleSpecifier)) {
+          const moduleName = moduleSpecifier.text
+
+          if (modulePathMap.has(moduleName)) {
+            const newModuleName = modulePathMap.get(moduleName)!
+            const namedBindings = node.importClause?.namedBindings
+
+            if (namedBindings && ts.isNamedImports(namedBindings)) {
+              namedBindings.elements.forEach((element) => {
+                const importName = element.name.text
+                const aliasName = element.propertyName?.text
+
+                setImportToRemove(importsToRemove, moduleName, aliasName ?? importName)
+
+                setImportToAdd(importsToAdd, newModuleName, {
+                  componentName: aliasName ?? importName,
+                  alias: aliasName ? importName : undefined,
+                })
+              })
+            }
+          } else {
+            processImportDeclaration(node, {
+              importsToRemove,
+              importsToAdd,
+              renameMap,
+            })
+          }
+        }
+      }
+
+      return ts.visitEachChild(node, visit, context)
+    }
+
+    const transformedNode = ts.visitNode(rootNode, visit)
+
+    return updateKaioImports({ importsToRemove, importsToAdd })(context)(
+      transformedNode as ts.SourceFile,
+    )
+  }

package/codemods/renameV2ComponentImportsAndUsages/index.ts

@@ -11,7 +11,18 @@ const run = (): void => {
 
   transformComponentsInDir(
     targetDir,
-    ['Select', 'LikertScaleLegacy', 'TitleBlockZen'],
+    [
+      'Select',
+      'SelectProps',
+      'SelectOption',
+      'SelectOptionGroup',
+      'SelectItem',
+      'SelectOptionNode',
+      'SelectOptionGroupNode',
+      'SelectItemNode',
+      'LikertScaleLegacy',
+      'TitleBlockZen',
+    ],
     (tagNames) => [renameV2ComponentImportsAndUsages(tagNames)],
   )
 }

package/codemods/renameV2ComponentImportsAndUsages/renameV2ComponentImportsAndUsages.ts

@@ -1,123 +1,36 @@
 import ts from 'typescript'
 import {
+  createRenameMapFromGroups,
+  processImportDeclaration,
   setImportToAdd,
   setImportToRemove,
   updateJsxElementTagName,
   updateKaioImports,
-  type ComponentRenameConfig,
+  type ComponentGroup,
   type TagImportAttributesMap,
   type UpdateKaioImportsArgs,
 } from '../utils'
 
-type RenameConfig = {
-  newName: string
-  fromModules: string[]
-  toModule: string
-}
-
-const renameMap = new Map<string, RenameConfig>([
-  [
-    'Select',
-    {
-      newName: 'SingleSelect',
-      fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
-      toModule: '@kaizen/components',
-    },
-  ],
-  [
-    'SelectProps',
-    {
-      newName: 'SingleSelectProps',
-      fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
-      toModule: '@kaizen/components',
-    },
-  ],
-  [
-    'SelectOption',
-    {
-      newName: 'SingleSelectOption',
-      fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
-      toModule: '@kaizen/components',
-    },
-  ],
-  [
-    'SelectOptionGroup',
-    {
-      newName: 'SingleSelectOptionGroup',
-      fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
-      toModule: '@kaizen/components',
-    },
-  ],
-  [
-    'SelectItem',
-    {
-      newName: 'SingleSelectItem',
-      fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
-      toModule: '@kaizen/components',
-    },
-  ],
-  [
-    'SelectOptionNode',
-    {
-      newName: 'SingleSelectOptionNode',
-      fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
-      toModule: '@kaizen/components',
-    },
-  ],
-  [
-    'SelectOptionGroupNode',
-    {
-      newName: 'SingleSelectOptionGroupNode',
-      fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
-      toModule: '@kaizen/components',
-    },
-  ],
-  [
-    'SelectItemNode',
-    {
-      newName: 'SingleSelectItemNode',
-      fromModules: ['@kaizen/components/next', '@kaizen/components/future'],
-      toModule: '@kaizen/components',
-    },
-  ],
-  [
-    'LikertScaleLegacy',
-    {
-      newName: 'LikertScale',
-      fromModules: ['@kaizen/components'],
-      toModule: '@kaizen/components',
-    },
-  ],
-  [
-    'TitleBlockZen',
-    {
-      newName: 'TitleBlock',
-      fromModules: ['@kaizen/components'],
-      toModule: '@kaizen/components',
-    },
-  ],
-])
-
-const createComponentRenameConfig = (
-  config: RenameConfig,
-  fromModule: string,
-): ComponentRenameConfig => ({
-  newName: config.newName,
-  fromModule,
-  toModule: config.toModule,
-})
-
-const componentRenameMap = new Map<string, ComponentRenameConfig>()
-for (const [name, config] of Array.from(renameMap.entries())) {
-  if (
-    !name.endsWith('Props') &&
-    !name.includes('Option') &&
-    !name.includes('Item') &&
-    !name.includes('Node')
-  ) {
-    componentRenameMap.set(name, createComponentRenameConfig(config, config.fromModules[0]))
-  }
-}
+const componentGroups: ComponentGroup[] = [
+  {
+    components: [
+      ['Select', 'SingleSelect'],
+      ['SelectProps', 'SingleSelectProps'],
+      ['SelectOption', 'SingleSelectOption'],
+      ['SelectOptionGroup', 'SingleSelectOptionGroup'],
+      ['SelectItem', 'SingleSelectItem'],
+      ['SelectOptionNode', 'SingleSelectOptionNode'],
+      ['SelectOptionGroupNode', 'SingleSelectOptionGroupNode'],
+      ['SelectItemNode', 'SingleSelectItemNode'],
+      ['LikertScaleLegacy', 'LikertScale'],
+      ['TitleBlockZen', 'TitleBlock'],
+    ],
+    fromModules: ['@kaizen/components/next', '@kaizen/components/future', '@kaizen/components'],
+    toModule: '@kaizen/components',
+  },
+]
+
+const renameMap = createRenameMapFromGroups(componentGroups)
 
 export const renameV2ComponentImportsAndUsages =
   (tagsMap: TagImportAttributesMap | undefined): ts.TransformerFactory<ts.SourceFile> =>
@@ -129,25 +42,12 @@ export const renameV2ComponentImportsAndUsages =
 
     const visit = (node: ts.Node): ts.Node => {
       if (ts.isImportDeclaration(node)) {
-        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)
-              setImportToAdd(importsToAdd, renameConfig.toModule, {
-                componentName: renameConfig.newName,
-                isTypeOnly: importSpecifier.isTypeOnly || importClause.isTypeOnly,
-              })
-            }
-          })
-        }
+        processImportDeclaration(node, {
+          importsToRemove,
+          importsToAdd,
+          renameMap,
+          validRenames,
+        })
       }
 
       if (
@@ -157,17 +57,31 @@ export const renameV2ComponentImportsAndUsages =
       ) {
         if (ts.isPropertyAccessExpression(node.tagName)) {
           const left = node.tagName.expression.getText()
-          const rename = componentRenameMap.get(left)
+          const renameConfig = renameMap.get(left)
 
-          if (rename) {
-            setImportToRemove(importsToRemove, rename.fromModule, left)
-            setImportToAdd(importsToAdd, rename.toModule, { componentName: rename.newName })
+          if (renameConfig) {
+            setImportToRemove(importsToRemove, renameConfig.fromModules[0], left)
+            setImportToAdd(importsToAdd, renameConfig.toModule, {
+              componentName: renameConfig.newName,
+            })
+
+            // Create temporary map for updateJsxElementTagName
+            const tempComponentMap = new Map([
+              [
+                left,
+                {
+                  newName: renameConfig.newName,
+                  fromModule: renameConfig.fromModules[0],
+                  toModule: renameConfig.toModule,
+                },
+              ],
+            ])
 
             return updateJsxElementTagName(
               context.factory,
               node,
-              rename.newName,
-              componentRenameMap,
+              renameConfig.newName,
+              tempComponentMap,
             )
           }
 
@@ -199,7 +113,14 @@ export const renameV2ComponentImportsAndUsages =
         })
         const jsxElementName = alias ?? renameConfig.newName
         const tempComponentMap = new Map([
-          [kaioComponentName, createComponentRenameConfig(renameConfig, oldImportSource)],
+          [
+            kaioComponentName,
+            {
+              newName: renameConfig.newName,
+              fromModule: oldImportSource,
+              toModule: renameConfig.toModule,
+            },
+          ],
         ])
         return updateJsxElementTagName(context.factory, node, jsxElementName, tempComponentMap)
       }

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'
@@ -10,3 +11,4 @@ export * from './updateKaioImports'
 export * from './updateJsxElementWithNewProps'
 export * from './transformV1ButtonPropsToButtonOrLinkButton'
 export * from './updateJsxElementTagName'
+export * from './createModulePathTransformer'