@kaizen/components 0.0.0-canary-guidance-block-codemod-test-20250317042741 → 0.0.0-canary-gb-codemod-test-2-20250318002322

package/bin/codemod.sh

@@ -35,6 +35,7 @@ if npx tsx@latest $CODEMOD_PATH $TARGET_DIR; then
   echo "Run linting and prettier to correct issues with re-writes"
 else
   echo "Codemod '$codemodFileName' could not be run in '$TARGET_DIR'"
+  echo "Check if '$CODEMOD_PATH' exists and is in the current version of the @kaizen/components"
   exit 1
 fi
 

package/codemods/README.md

@@ -109,6 +109,12 @@ Released in `1.73.1`
 
 Migrates V1 `Button` and `IconButton` component to next `Button` or `LinkButton`.
 
+### `migrateGuidanceBlockActionsToActionsSlot`
+
+Migrates GuidanceBlock `actions` props into `actionsSlot` with `Button` or `LinkButton` component.
+
+Released in `1.74.0`
+
 #### Props
 
 - `label` becomes `children`

package/codemods/{migrateGuidanceBlockToNextButton → migrateGuidanceBlockActionsToActionsSlot}/index.ts

@@ -1,10 +1,10 @@
 import { transformComponentsInDir } from '../utils'
-import { migrateGuidanceBlockToButtonNext } from './migrateGuidanceBlockToButtonNext'
+import { migrateGuidanceBlockActionsToActionsSlot } from './migrateGuidanceBlockActionsToActionsSlot'
 
 const run = (): void => {
   console.log('It is recommended that the `upgradeIconV1` codemod be run prior to this')
   console.log('---')
-  console.log('~(-_- ~) Running V1 Buttons upgrade (~ -_-)~')
+  console.log('~(-_- ~) Running migrateGuidanceBlockActionsToActionsSlot upgrade (~ -_-)~')
 
   const targetDir = process.argv[2]
   if (!targetDir) {
@@ -12,7 +12,7 @@ const run = (): void => {
   }
 
   transformComponentsInDir(targetDir, ['GuidanceBlock'], (tagNames) => [
-    migrateGuidanceBlockToButtonNext(tagNames),
+    migrateGuidanceBlockActionsToActionsSlot(tagNames),
   ])
 }
 

package/codemods/{migrateGuidanceBlockToNextButton/migrateGuidanceBlockToButtonNext.spec.ts → migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot.spec.ts}

@@ -5,13 +5,13 @@ import {
   transformSource,
   type TransformSourceArgs,
 } from '../utils'
-import { migrateGuidanceBlockToButtonNext } from './migrateGuidanceBlockToButtonNext'
+import { migrateGuidanceBlockActionsToActionsSlot } from './migrateGuidanceBlockActionsToActionsSlot'
 
 const transformGuidanceBlock = (sourceFile: TransformSourceArgs['sourceFile']): string => {
   const kaioTagNamesMap = getKaioTagNamesMapByComponentName(sourceFile, ['GuidanceBlock'])
   return transformSource({
     sourceFile,
-    transformers: [migrateGuidanceBlockToButtonNext(kaioTagNamesMap!)],
+    transformers: [migrateGuidanceBlockActionsToActionsSlot(kaioTagNamesMap!)],
   })
 }
 

package/codemods/{migrateGuidanceBlockToNextButton/migrateGuidanceBlockToButtonNext.ts → migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot.ts}

@@ -6,12 +6,12 @@ import {
   type TagImportAttributesMap,
   type UpdateKaioImportsArgs,
 } from '../utils'
-import { transformActionsToButtonNext } from './transformActionsToActionsSlot'
+import { transformActionsToActionsSlot } from './transformActionsToActionsSlot'
 
 const BUTTON_IMPORT_DESTINATION = '@kaizen/components/next'
 const LINKBUTTON_IMPORT_DESTINATION = '@kaizen/components'
 
-export const migrateGuidanceBlockToButtonNext =
+export const migrateGuidanceBlockActionsToActionsSlot =
   (tagsMap: TagImportAttributesMap): ts.TransformerFactory<ts.SourceFile> =>
   (context) =>
   (rootNode) => {
@@ -51,7 +51,7 @@ export const migrateGuidanceBlockToButtonNext =
               const propValue = prop.initializer as ts.JsxExpression
 
               if (propName === 'actions') {
-                const transformedActions = transformActionsToButtonNext(
+                const transformedActions = transformActionsToActionsSlot(
                   propValue.getChildren()[1] as ts.ObjectLiteralExpression,
                 )
 

package/codemods/{migrateGuidanceBlockToNextButton → migrateGuidanceBlockActionsToActionsSlot}/transformActionsToActionsSlot.spec.ts

@@ -1,7 +1,7 @@
 import ts from 'typescript'
 import { parseJsx } from '../__tests__/utils'
 import { printAst } from '../utils'
-import { transformActionsToButtonNext } from './transformActionsToActionsSlot'
+import { transformActionsToActionsSlot } from './transformActionsToActionsSlot'
 
 export const mockedTransformer =
   (kaioComponentName: string) =>
@@ -17,7 +17,7 @@ export const mockedTransformer =
             const propValue = prop.initializer as ts.JsxExpression
 
             if (propName === 'actions') {
-              const transformedActions = transformActionsToButtonNext(
+              const transformedActions = transformActionsToActionsSlot(
                 propValue.getChildren()[1] as ts.ObjectLiteralExpression,
               )
 
@@ -51,7 +51,7 @@ const transformInput = (
   return printAst(transformedSource)
 }
 
-describe('transformActionsToButtonNext()', () => {
+describe('transformActionsToActionsSlot()', () => {
   it('transforms button-like and link-like actions prop into a Button and LinkButton', () => {
     const inputAst = parseJsx(`
       <GuidanceBlock

package/codemods/{migrateGuidanceBlockToNextButton → migrateGuidanceBlockActionsToActionsSlot}/transformActionsToActionsSlot.ts

@@ -11,7 +11,7 @@ type GuidanceBlockTransformedActions = {
  * expects that the node passed in will be an ObjectLiteralExpression, ie:
  * `{primary: {...buttonV1Props}, secondary: {...buttonV1Props}}`
  */
-export const transformActionsToButtonNext = (
+export const transformActionsToActionsSlot = (
   node: ts.ObjectLiteralExpression,
 ): GuidanceBlockTransformedActions | undefined => {
   if (ts.isObjectLiteralExpression(node)) {

package/codemods/utils/transformV1ButtonPropsToButtonOrLinkButton.spec.tsx

@@ -114,16 +114,55 @@ describe('transformV1ButtonPropsToButtonOrLinkButton()', () => {
         onClick: () => console.log("hello world")
         size: 'small',
         classNameOverride: styles.buttonClass,
-        badge: { text: 'New' }
+        badge: { text: 'New' },
         'data-random-attribute': 'some-id',
+        "aria-label": "some label",
         form: 'form-id',
       }}/>`)
 
     const outputAst = parseJsx(
-      `<DummyComponent primaryAction={<Button onPress={() => console.log("hello world")} size="medium" className={styles.buttonClass} badge={{ text: 'New' }} data-random-attribute='some-id' form='form-id' variant="secondary">Learn more</Button>}}
+      `<DummyComponent primaryAction={<Button onPress={() => console.log("hello world")} size="medium" className={styles.buttonClass} badge={{ text: 'New' }} data-random-attribute='some-id' aria-label="some label" form='form-id' variant="secondary">Learn more</Button>}}
       />`,
     )
 
     expect(transformInput(inputAst)).toBe(printAst(outputAst))
   })
+
+  it('transforms shorthand properties as expressions', () => {
+    const inputAst = parseJsx(`<DummyComponent primaryAction={{
+        label,
+        onClick: () => console.log("hello world")
+        size: 'small',
+        classNameOverride: styles.buttonClass,
+        badge: { text: 'New' },
+        'data-random-attribute': 'some-id',
+        "aria-label": "some label",
+        form: 'form-id',
+      }}/>`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<Button onPress={() => console.log("hello world")} size="medium" className={styles.buttonClass} badge={{ text: 'New' }} data-random-attribute='some-id' aria-label="some label" form='form-id' variant="secondary">{label}</Button>}}
+      />`,
+    )
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+  it('transforms expressions correctly as children', () => {
+    const inputAst = parseJsx(`
+      <DummyComponent primaryAction={{
+        label: intl.formatMessage({ id: "label.id", defaultMessage: "Label", { variableVal }),
+        onClick: () => console.log("hello world")
+        size: 'small',
+        classNameOverride: styles.buttonClass,
+        badge: { text: 'New' },
+        'data-random-attribute': 'some-id',
+        form: 'form-id',
+      }}/>`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<Button onPress={() => console.log("hello world")} size="medium" className={styles.buttonClass} badge={{ text: 'New' }} data-random-attribute='some-id' form='form-id' variant="secondary">{intl.formatMessage({ id: "label.id", defaultMessage: "Label", { variableVal })}</Button>}}
+      />`,
+    )
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
 })

package/codemods/utils/transformV1ButtonPropsToButtonOrLinkButton.ts

@@ -108,6 +108,17 @@ export const transformV1ButtonPropsToButtonOrLinkButton = (
 
     if (propName) {
       if (propName === 'label') {
+        if (ts.isShorthandPropertyAssignment(currentProp)) {
+          childrenValue = ts.factory.createJsxExpression(
+            undefined,
+            ts.factory.createIdentifier(propName),
+          )
+          return acc
+        }
+        if (propValue && propValue?.kind !== ts.SyntaxKind.StringLiteral) {
+          childrenValue = ts.factory.createJsxExpression(undefined, propValue)
+          return acc
+        }
         childrenValue = propValue as ts.JsxAttributeValue
         return acc
       }
@@ -149,7 +160,7 @@ export const transformV1ButtonPropsToButtonOrLinkButton = (
       if (newProp === null) return acc
 
       if (newProp === undefined) {
-        const sanitizedPropName = propName.replace(/'/g, '')
+        const sanitizedPropName = propName.replace(/'|"/g, '')
         const sanitizedPropValue: ts.JsxAttributeValue =
           propValue?.kind === ts.SyntaxKind.StringLiteral
             ? (propValue as ts.StringLiteral)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-guidance-block-codemod-test-20250317042741",
+  "version": "0.0.0-canary-gb-codemod-test-2-20250318002322",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -185,8 +185,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "10.8.7",
-    "@kaizen/package-bundler": "2.0.4"
+    "@kaizen/package-bundler": "2.0.4",
+    "@kaizen/design-tokens": "10.8.7"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",