refactor(codemods): upgrade to Button v3

packages/components/codemods/README.md

@@ -103,6 +103,41 @@ Released in `1.60.0`
 
 Removes `Popover` component props `variant` and `customIcon`.
 
+### `upgradeV1Buttons`
+
+Released in `TBC`
+
+Migrates `Button` and `IconButton` component to `Button` V3 or `LinkButton`.
+
+#### Props
+
+- `label` becomes `children`
+  - eg. `<IconButton label="Hello" />` becomes `<Button>Hello</Button>`
+- `onClick` becomes `onPress`
+- (TO DO) Variants
+- (TO DO) Sizes
+- `reversed` becomes `isReversed`
+- `classNameOverride` becomes `className`
+- `data-automation-id` becomes `data-testid`
+- `disabled` becomes `isDisabled`
+- (TO DO) Only when `href` exists:
+  - `newTabAndIUnderstandTheAccessibilityImplications` becomes `target="_blank"`
+    - `rel="noopener noreferrer"` is also added
+- `component` will not be removed by the codemod, but will throw a TypeScript error as the prop itself no longer exists
+  - (TO DO) A `@todo` comment will be prepended to the prop
+- For `IconButton` only:
+  - `hasHiddenLabel` will be added
+
+#### Component transformation
+
+- `Button`/`IconButton` without the `href` or `component` prop will become `Button` V3
+- `Button`/`IconButton` with the `href` prop will become `LinkButton`
+- `Button`/`IconButton` with the `component` prop will become `LinkButton`
+
+#### Imports
+
+All imports of V1 Buttons will now point to `@kaizen/components/v3/actions`.
+
 ### `upgradeIconV1`
 
 Released in `1.67.0`; last updated in `1.68.1`

packages/components/codemods/upgradeIconV1/index.ts

@@ -1,6 +1,4 @@
-import fs from 'fs'
-import { getKaioTagNamesByRegex, transformSource, traverseDir } from '../utils'
-import { createEncodedSourceFile } from '../utils/createEncodedSourceFile'
+import { transformComponentsAndImportsInDirByPattern } from '../utils'
 import { upgradeIconV1 } from './upgradeIconV1'
 
 const run = (): void => {
@@ -11,20 +9,9 @@ const run = (): void => {
     process.exit(1)
   }
 
-  const transformFile = (componentFilePath: string, sourceCode: string): void => {
-    const sourceFile = createEncodedSourceFile(componentFilePath, sourceCode)
-    const tagNames = getKaioTagNamesByRegex(sourceFile, 'Icon$')
-    if (tagNames) {
-      const updatedSourceFile = transformSource({
-        sourceFile,
-        transformers: [upgradeIconV1(tagNames)],
-      })
-
-      fs.writeFileSync(componentFilePath, updatedSourceFile, 'utf8')
-    }
-  }
-
-  traverseDir(targetDir, transformFile)
+  transformComponentsAndImportsInDirByPattern(targetDir, 'Icon$', (tagNames) => [
+    upgradeIconV1(tagNames),
+  ])
 }
 
 run()

packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts

@@ -1,20 +1,19 @@
 import { parseJsx } from '../__tests__/utils'
 import {
+  getKaioTagNamesMapByPattern,
   printAst,
   transformSource,
-  type ImportModuleNameTagsMap,
   type TransformSourceArgs,
 } from '../utils'
 import { upgradeIconV1 } from './upgradeIconV1'
 
-const transformIcons = (
-  sourceFile: TransformSourceArgs['sourceFile'],
-  tagNames: ImportModuleNameTagsMap,
-): string =>
-  transformSource({
+const transformIcons = (sourceFile: TransformSourceArgs['sourceFile']): string => {
+  const kaioTagNamesMap = getKaioTagNamesMapByPattern(sourceFile, 'Icon$')
+  return transformSource({
     sourceFile,
-    transformers: [upgradeIconV1(tagNames)],
+    transformers: [upgradeIconV1(kaioTagNamesMap!)],
   })
+}
 
 describe('upgradeIconV1()', () => {
   describe('CaMonogramIcon to Brand', () => {
@@ -29,12 +28,7 @@ describe('upgradeIconV1()', () => {
         import { Brand } from "@kaizen/components"
         export const TestComponent = () => <Brand ${transformedBrandProps} />
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([['@kaizen/components', new Map([['CaMonogramIcon', 'CaMonogramIcon']])]]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
 
     it('updates import from CaMonogramIcon using alias to Brand', () => {
@@ -46,12 +40,7 @@ describe('upgradeIconV1()', () => {
         import { Brand } from "@kaizen/components"
         export const TestComponent = () => <Brand ${transformedBrandProps} />
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([['@kaizen/components', new Map([['LogoAlias', 'CaMonogramIcon']])]]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
 
     it('does not add another Brand import if it is already imported', () => {
@@ -63,20 +52,7 @@ describe('upgradeIconV1()', () => {
         import { Brand } from "@kaizen/components"
         export const TestComponent = () => <Brand ${transformedBrandProps} />
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([
-            [
-              '@kaizen/components',
-              new Map([
-                ['Brand', 'Brand'],
-                ['CaMonogramIcon', 'CaMonogramIcon'],
-              ]),
-            ],
-          ]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
 
     it('uses Brand alias for an existing import', () => {
@@ -88,20 +64,7 @@ describe('upgradeIconV1()', () => {
         import { Brand as KzBrand } from "@kaizen/components"
         export const TestComponent = () => <KzBrand ${transformedBrandProps} />
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([
-            [
-              '@kaizen/components',
-              new Map([
-                ['KzBrand', 'Brand'],
-                ['CaMonogramIcon', 'CaMonogramIcon'],
-              ]),
-            ],
-          ]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
   })
 
@@ -117,12 +80,7 @@ describe('upgradeIconV1()', () => {
         import { LoadingSpinner } from "@kaizen/components"
         export const TestComponent = () => <LoadingSpinner ${transformedLoadingSpinnerProps} />
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([['@kaizen/components', new Map([['SpinnerIcon', 'SpinnerIcon']])]]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
 
     it('updates import from SpinnerIcon using alias to LoadingSpinner', () => {
@@ -134,12 +92,7 @@ describe('upgradeIconV1()', () => {
         import { LoadingSpinner } from "@kaizen/components"
         export const TestComponent = () => <LoadingSpinner ${transformedLoadingSpinnerProps} />
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([['@kaizen/components', new Map([['LogoAlias', 'SpinnerIcon']])]]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
 
     it('does not add another LoadingSpinner import if it is already imported', () => {
@@ -151,20 +104,7 @@ describe('upgradeIconV1()', () => {
         import { LoadingSpinner } from "@kaizen/components"
         export const TestComponent = () => <LoadingSpinner ${transformedLoadingSpinnerProps} />
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([
-            [
-              '@kaizen/components',
-              new Map([
-                ['LoadingSpinner', 'LoadingSpinner'],
-                ['SpinnerIcon', 'SpinnerIcon'],
-              ]),
-            ],
-          ]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
 
     it('uses LoadingSpinner alias for an existing import', () => {
@@ -176,20 +116,7 @@ describe('upgradeIconV1()', () => {
         import { LoadingSpinner as KzLoadingSpinner } from "@kaizen/components"
         export const TestComponent = () => <KzLoadingSpinner ${transformedLoadingSpinnerProps} />
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([
-            [
-              '@kaizen/components',
-              new Map([
-                ['KzLoadingSpinner', 'LoadingSpinner'],
-                ['SpinnerIcon', 'SpinnerIcon'],
-              ]),
-            ],
-          ]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
   })
 
@@ -202,12 +129,7 @@ describe('upgradeIconV1()', () => {
       import { Icon } from "@kaizen/components/future"
       export const TestComponent = () => <Icon name="flag" isFilled />
     `)
-    expect(
-      transformIcons(
-        inputAst,
-        new Map([['@kaizen/components', new Map([['FlagOnIcon', 'FlagOnIcon']])]]),
-      ),
-    ).toEqual(printAst(outputAst))
+    expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
   })
 
   it('transforms aliased old Icon', () => {
@@ -219,12 +141,7 @@ describe('upgradeIconV1()', () => {
       import { Icon } from "@kaizen/components/future"
       export const TestComponent = () => <Icon name="menu" />
     `)
-    expect(
-      transformIcons(
-        inputAst,
-        new Map([['@kaizen/components', new Map([['IconAlias', 'HamburgerIcon']])]]),
-      ),
-    ).toEqual(printAst(outputAst))
+    expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
   })
 
   describe('import statements', () => {
@@ -238,12 +155,7 @@ describe('upgradeIconV1()', () => {
         import { Icon } from "@kaizen/components/future"
         export const TestComponent = () => <Card><Icon name="add" /></Card>
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([['@kaizen/components', new Map([['AddIcon', 'AddIcon']])]]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
 
     it('does not update import of components which are not from KAIO', () => {
@@ -269,21 +181,7 @@ describe('upgradeIconV1()', () => {
           </>
         )
       `)
-      expect(
-        transformIcons(
-          inputAst,
-          new Map([
-            [
-              '@kaizen/components',
-              new Map([
-                ['AddIcon', 'AddIcon'],
-                ['IconAlias', 'HamburgerIcon'],
-              ]),
-            ],
-            ['somewhere-else', new Map([['HamHam', 'HamburgerIcon']])],
-          ]),
-        ),
-      ).toEqual(printAst(outputAst))
+      expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
     })
   })
 })