@kaizen/components 1.80.1 → 1.80.3

package/codemods/README.md

@@ -25,6 +25,18 @@ pnpm kaizen-codemod src migrateWellVariantToColor
 
 ## Available codemods
 
+### `renameV2ComponentImportsAndUsages`
+
+Released in `1.80.3`
+
+Renames component imports and usages for the v2 release:
+
+- `Select` (from `@kaizen/components/next`) → `SingleSelect`
+- `LikertScaleLegacy` → `LikertScale`
+- `TitleBlockZen` → `TitleBlock`
+
+Also renames corresponding Props types (e.g., `SelectProps` → `SingleSelectProps`).
+
 ### `migrateBrandMomentMoodToVariant`
 
 Released in `1.58.0`

package/codemods/renameV2ComponentImportsAndUsages/index.ts

@@ -0,0 +1,19 @@
+import { transformComponentsInDir } from '../utils'
+import { renameV2ComponentImportsAndUsages } from './renameV2ComponentImportsAndUsages'
+
+const run = (): void => {
+  console.log('~(-_- ~) Running V2 component renaming (~ -_-)~')
+
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  transformComponentsInDir(
+    targetDir,
+    ['Select', 'LikertScaleLegacy', 'TitleBlockZen'],
+    (tagNames) => [renameV2ComponentImportsAndUsages(tagNames)],
+  )
+}
+
+run()

package/codemods/renameV2ComponentImportsAndUsages/renameV2ComponentImportsAndUsages.spec.ts

@@ -0,0 +1,390 @@
+import { parseJsx } from '../__tests__/utils'
+import {
+  getKaioTagNamesMapByComponentName,
+  printAst,
+  transformSource,
+  type TransformSourceArgs,
+} from '../utils'
+import { renameV2ComponentImportsAndUsages } from './renameV2ComponentImportsAndUsages'
+
+const transformComponents = (sourceFile: TransformSourceArgs['sourceFile']): string => {
+  const kaioTagNamesMap = getKaioTagNamesMapByComponentName(sourceFile, [
+    'Select',
+    'LikertScaleLegacy',
+    'TitleBlockZen',
+  ])
+  return transformSource({
+    sourceFile,
+    transformers: [renameV2ComponentImportsAndUsages(kaioTagNamesMap!)],
+  })
+}
+
+describe('renameV2ComponentImportsAndUsages', () => {
+  describe('Select -> SigleSelect', () => {
+    it('should rename Select import from next to SingleSelect', () => {
+      const inputAst = parseJsx(`import { Select } from "@kaizen/components/next"`)
+      const expectedAst = parseJsx(`import { SingleSelect } from "@kaizen/components"`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should rename Select import from future to SingleSelect', () => {
+      const inputAst = parseJsx(`import { Select } from "@kaizen/components/future"`)
+      const expectedAst = parseJsx(`import { SingleSelect } from "@kaizen/components"`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should rename Select JSX element to SingleSelect', () => {
+      const inputAst = parseJsx(`
+import { Select } from "@kaizen/components/next"
+
+const MyComponent = () => <Select />
+`)
+      const expectedAst = parseJsx(`
+import { SingleSelect } from "@kaizen/components"
+
+const MyComponent = () => <SingleSelect />
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should rename Select[Type] to SingleSelect[Type] from future module', () => {
+      const inputAst = parseJsx(`
+import type { SelectProps, SelectOption, SelectOptionGroup, SelectItem, SelectOptionNode, SelectOptionGroupNode, SelectItemNode } from "@kaizen/components/future"
+`)
+      const expectedAst = parseJsx(`
+import type { SingleSelectProps, SingleSelectOption, SingleSelectOptionGroup, SingleSelectItem, SingleSelectOptionNode, SingleSelectOptionGroupNode, SingleSelectItemNode } from "@kaizen/components"
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should rename Select[Type] to SingleSelect[Type] from next module', () => {
+      const inputAst = parseJsx(`
+import type { SelectProps, SelectOption, SelectOptionGroup, SelectItem, SelectOptionNode, SelectOptionGroupNode, SelectItemNode } from "@kaizen/components/next"
+`)
+      const expectedAst = parseJsx(`
+import type { SingleSelectProps, SingleSelectOption, SingleSelectOptionGroup, SingleSelectItem, SingleSelectOptionNode, SingleSelectOptionGroupNode, SingleSelectItemNode } from "@kaizen/components"
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should preserve type-only import declaration style', () => {
+      const inputAst = parseJsx(`
+import type { SelectOption } from "@kaizen/components/next"
+
+const option: SelectOption = { label: 'Test', value: 'test' }
+`)
+      const expectedAst = parseJsx(`
+import type { SingleSelectOption } from "@kaizen/components"
+
+const option: SingleSelectOption = { label: 'Test', value: 'test' }
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should preserve inline type import style', () => {
+      const inputAst = parseJsx(`
+import { type SelectItem, Button } from "@kaizen/components/next"
+
+const item: SelectItem = { label: 'Test', value: 'test' }
+`)
+      const expectedAst = parseJsx(`
+import { Button } from "@kaizen/components/next"
+import type { SingleSelectItem } from "@kaizen/components"
+
+const item: SingleSelectItem = { label: 'Test', value: 'test' }
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should handle mixed imports with Select types and other components', () => {
+      const inputAst = parseJsx(`
+import { Select, Button } from "@kaizen/components/next"
+import type { SelectProps, SelectOption } from "@kaizen/components/future"
+
+const MyComponent = (props: SelectProps) => (
+  <>
+    <Select />
+    <Button>Click me</Button>
+  </>
+)
+
+const option: SelectOption = { label: 'Test', value: 'test' }
+`)
+      const expectedAst = parseJsx(`
+import { Button } from "@kaizen/components/next"
+import { SingleSelect, type SingleSelectProps, type SingleSelectOption } from "@kaizen/components"
+
+const MyComponent = (props: SingleSelectProps) => (
+  <>
+    <SingleSelect />
+    <Button>Click me</Button>
+  </>
+)
+
+const option: SingleSelectOption = { label: 'Test', value: 'test' }
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should handle Select with opening and closing tags', () => {
+      const inputAst = parseJsx(`
+import { Select } from "@kaizen/components/next"
+
+const MyComponent = () => (
+  <Select>
+    <option value="1">Option 1</option>
+  </Select>
+)
+`)
+      const expectedAst = parseJsx(`
+import { SingleSelect } from "@kaizen/components"
+
+const MyComponent = () => (
+  <SingleSelect>
+    <option value="1">Option 1</option>
+  </SingleSelect>
+)
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should handle aliased imports', () => {
+      const inputAst = parseJsx(`
+import { Select as MySelect } from "@kaizen/components/next"
+
+const MyComponent = () => <MySelect />
+`)
+      const expectedAst = parseJsx(`
+import { SingleSelect as MySelect } from "@kaizen/components"
+
+const MyComponent = () => <MySelect />
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should handle Component.SubComponent', () => {
+      const inputAst = parseJsx(`
+import { Select } from "@kaizen/components/next"
+
+const MyComponent = () => (
+  <Select>
+    {({ items }) =>
+      items.map((item) => {
+        return <Select.Option />;
+      })
+    }
+  </Select>
+);
+`)
+      const expectedAst = parseJsx(`
+import { SingleSelect } from "@kaizen/components"
+
+const MyComponent = () => (
+  <SingleSelect>
+    {({ items }) =>
+      items.map((item) => {
+        return <SingleSelect.Option />;
+      })
+    }
+  </SingleSelect>
+);
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should not override local types of same name', () => {
+      const inputAst = parseJsx(`
+type SelectProps = {
+  thing: string
+}
+
+const MyComponent = (props: SelectProps) => {  
+  return <div>{props.customField}</div>
+}
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(inputAst))
+    })
+  })
+
+  describe('LikertScaleLegacy -> LikertScale', () => {
+    it('should rename LikertScaleLegacy import to LikertScale', () => {
+      const inputAst = parseJsx(`import { LikertScaleLegacy } from "@kaizen/components"`)
+      const expectedAst = parseJsx(`import { LikertScale } from "@kaizen/components"`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should rename LikertScaleLegacy JSX element to LikertScale', () => {
+      const inputAst = parseJsx(`
+import { LikertScaleLegacy } from "@kaizen/components"
+
+const MyComponent = () => <LikertScaleLegacy />
+`)
+      const expectedAst = parseJsx(`
+import { LikertScale } from "@kaizen/components"
+
+const MyComponent = () => <LikertScale />
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should leave LikertScaleProps type as is', () => {
+      const inputAst = parseJsx(`
+import type { LikertScaleProps } from "@kaizen/components"
+
+const MyComponent = (props: LikertScaleProps) => null
+`)
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(inputAst))
+    })
+  })
+
+  describe('TitleBlockZen -> TitleBlock', () => {
+    it('should rename TitleBlockZen import to TitleBlock', () => {
+      const inputAst = parseJsx(`import { TitleBlockZen } from "@kaizen/components"`)
+      const expectedAst = parseJsx(`import { TitleBlock } from "@kaizen/components"`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should rename TitleBlockZen JSX element to TitleBlock', () => {
+      const inputAst = parseJsx(`
+import { TitleBlockZen } from "@kaizen/components"
+
+const MyComponent = () => <TitleBlockZen />
+`)
+      const expectedAst = parseJsx(`
+import { TitleBlock } from "@kaizen/components"
+
+const MyComponent = () => <TitleBlock />
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should leave TitleBlockProps type as is', () => {
+      const inputAst = parseJsx(`
+import type { TitleBlockProps } from "@kaizen/components/next"
+
+const MyComponent = (props: TitleBlockProps) => null
+`)
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(inputAst))
+    })
+
+    it('should rename TitleBlockZen when it appears within a component prop', () => {
+      const inputAst = parseJsx(`
+import { TitleBlockZen } from "@kaizen/components"
+
+const MyComponent = () => {
+  return (
+    <Card
+      CardContent={
+        <Header>
+          <TitleBlockZen
+            navigationTabs={props.map(prop => <NavigationTab {...prop} />)}
+          />
+        </Header>
+      }
+    />
+  )
+}
+`)
+      const expectedAst = parseJsx(`
+import { TitleBlock } from "@kaizen/components"
+
+const MyComponent = () => {
+  return (
+    <Card
+      CardContent={
+        <Header>
+          <TitleBlock
+            navigationTabs={props.map(prop => <NavigationTab {...prop} />)}
+          />
+        </Header>
+      }
+    />
+  )
+}
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+  })
+
+  describe('Mixed scenarios', () => {
+    it('should handle multiple component imports in same file', () => {
+      const inputAst = parseJsx(`
+import { Select } from "@kaizen/components/next"
+import { LikertScaleLegacy, TitleBlockZen } from "@kaizen/components"
+
+const MyComponent = () => (
+  <div>
+    <Select />
+    <LikertScaleLegacy />
+    <TitleBlockZen />
+  </div>
+)
+`)
+      const expectedAst = parseJsx(`
+import { SingleSelect, LikertScale, TitleBlock } from "@kaizen/components"
+
+const MyComponent = () => (
+  <div>
+    <SingleSelect />
+    <LikertScale />
+    <TitleBlock />
+  </div>
+)
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(expectedAst))
+    })
+
+    it('should not transform components not in the rename map', () => {
+      const inputAst = parseJsx(`
+import { Button, Card } from "@kaizen/components"
+
+const MyComponent = () => (
+  <Card>
+    <Button>Click me</Button>
+  </Card>
+)
+`)
+
+      const result = transformComponents(inputAst)
+      expect(result).toBe(printAst(inputAst))
+    })
+  })
+})

package/codemods/renameV2ComponentImportsAndUsages/renameV2ComponentImportsAndUsages.ts

@@ -0,0 +1,230 @@
+import ts from 'typescript'
+import {
+  setImportToAdd,
+  setImportToRemove,
+  updateJsxElementTagName,
+  updateKaioImports,
+  type ComponentRenameConfig,
+  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]))
+  }
+}
+
+export const renameV2ComponentImportsAndUsages =
+  (tagsMap: TagImportAttributesMap | undefined): ts.TransformerFactory<ts.SourceFile> =>
+  (context) =>
+  (rootNode) => {
+    const importsToRemove: UpdateKaioImportsArgs['importsToRemove'] = new Map()
+    const importsToAdd: UpdateKaioImportsArgs['importsToAdd'] = new Map()
+    const validRenames = new Set<string>()
+
+    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,
+              })
+            }
+          })
+        }
+      }
+
+      if (
+        ts.isJsxOpeningElement(node) ||
+        ts.isJsxSelfClosingElement(node) ||
+        ts.isJsxClosingElement(node)
+      ) {
+        if (ts.isPropertyAccessExpression(node.tagName)) {
+          const left = node.tagName.expression.getText()
+          const rename = componentRenameMap.get(left)
+
+          if (rename) {
+            setImportToRemove(importsToRemove, rename.fromModule, left)
+            setImportToAdd(importsToAdd, rename.toModule, { componentName: rename.newName })
+
+            return updateJsxElementTagName(
+              context.factory,
+              node,
+              rename.newName,
+              componentRenameMap,
+            )
+          }
+
+          return ts.visitEachChild(node, visit, context)
+        }
+
+        const tagName = node.tagName.getText()
+        const tagImportAttributes = tagsMap?.get(tagName)
+        if (!tagImportAttributes) return ts.visitEachChild(node, visit, context)
+        const kaioComponentName = tagImportAttributes.originalName
+        const oldImportSource = tagImportAttributes.importModuleName
+        const renameConfig = renameMap.get(kaioComponentName)
+        if (!renameConfig) return ts.visitEachChild(node, visit, context)
+        if (!renameConfig.fromModules.includes(oldImportSource)) {
+          console.warn(
+            `Expected ${kaioComponentName} to be imported from one of [${renameConfig.fromModules.join(', ')}], but found ${oldImportSource}`,
+          )
+          return ts.visitEachChild(node, visit, context)
+        }
+        setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
+
+        const alias =
+          tagImportAttributes?.tagName !== tagImportAttributes?.originalName
+            ? tagImportAttributes?.tagName
+            : undefined
+        setImportToAdd(importsToAdd, renameConfig.toModule, {
+          componentName: renameConfig.newName,
+          alias,
+        })
+        const jsxElementName = alias ?? renameConfig.newName
+        const tempComponentMap = new Map([
+          [kaioComponentName, createComponentRenameConfig(renameConfig, oldImportSource)],
+        ])
+        return updateJsxElementTagName(context.factory, node, jsxElementName, tempComponentMap)
+      }
+
+      if (ts.isTypeReferenceNode(node)) {
+        const typeName = node.typeName.getText()
+
+        if (validRenames.has(typeName)) {
+          const renameConfig = renameMap.get(typeName)
+          if (renameConfig) {
+            return context.factory.updateTypeReferenceNode(
+              node,
+              context.factory.createIdentifier(renameConfig.newName),
+              node.typeArguments,
+            )
+          }
+        }
+      }
+
+      return ts.visitEachChild(node, visit, context)
+    }
+
+    const transformedNode = ts.visitNode(rootNode, visit)
+
+    return updateKaioImports({ importsToRemove, importsToAdd })(context)(
+      transformedNode as ts.SourceFile,
+    )
+  }

package/codemods/utils/index.ts

@@ -9,3 +9,4 @@ export * from './transformSource'
 export * from './updateKaioImports'
 export * from './updateJsxElementWithNewProps'
 export * from './transformV1ButtonPropsToButtonOrLinkButton'
+export * from './updateJsxElementTagName'