@kaizen/components 1.80.2 → 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

@@ -0,0 +1,30 @@
+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',
+      'SelectProps',
+      'SelectOption',
+      'SelectOptionGroup',
+      'SelectItem',
+      'SelectOptionNode',
+      'SelectOptionGroupNode',
+      'SelectItemNode',
+      '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,151 @@
+import ts from 'typescript'
+import {
+  createRenameMapFromGroups,
+  processImportDeclaration,
+  setImportToAdd,
+  setImportToRemove,
+  updateJsxElementTagName,
+  updateKaioImports,
+  type ComponentGroup,
+  type TagImportAttributesMap,
+  type UpdateKaioImportsArgs,
+} from '../utils'
+
+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> =>
+  (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)) {
+        processImportDeclaration(node, {
+          importsToRemove,
+          importsToAdd,
+          renameMap,
+          validRenames,
+        })
+      }
+
+      if (
+        ts.isJsxOpeningElement(node) ||
+        ts.isJsxSelfClosingElement(node) ||
+        ts.isJsxClosingElement(node)
+      ) {
+        if (ts.isPropertyAccessExpression(node.tagName)) {
+          const left = node.tagName.expression.getText()
+          const renameConfig = renameMap.get(left)
+
+          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,
+              renameConfig.newName,
+              tempComponentMap,
+            )
+          }
+
+          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,
+            {
+              newName: renameConfig.newName,
+              fromModule: oldImportSource,
+              toModule: renameConfig.toModule,
+            },
+          ],
+        ])
+        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,
+    )
+  }