@kaizen/components 1.74.3 → 1.75.0

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/migrateGuidanceBlockActionsToActionsSlot/index.ts

@@ -0,0 +1,21 @@
+import { transformComponentsInDir } from '../utils'
+import { migrateGuidanceBlockActionsToActionsSlot } from './migrateGuidanceBlockActionsToActionsSlot'
+
+const run = (): void => {
+  console.log('~(-_- ~) Running migrateGuidanceBlockActionsToActionsSlot upgrade (~ -_-)~')
+
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  transformComponentsInDir(targetDir, ['GuidanceBlock'], (tagNames) => [
+    migrateGuidanceBlockActionsToActionsSlot(tagNames),
+  ])
+
+  console.log(
+    '---\nIt is recommended that the `upgradeIconV1` codemod if any v1 icons have been migrated',
+  )
+}
+
+run()

package/codemods/migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot.spec.ts

@@ -0,0 +1,122 @@
+import { parseJsx } from '../__tests__/utils'
+import {
+  getKaioTagNamesMapByComponentName,
+  printAst,
+  transformSource,
+  type TransformSourceArgs,
+} from '../utils'
+import { migrateGuidanceBlockActionsToActionsSlot } from './migrateGuidanceBlockActionsToActionsSlot'
+
+const transformGuidanceBlock = (sourceFile: TransformSourceArgs['sourceFile']): string => {
+  const kaioTagNamesMap = getKaioTagNamesMapByComponentName(sourceFile, ['GuidanceBlock'])
+  return transformSource({
+    sourceFile,
+    transformers: [migrateGuidanceBlockActionsToActionsSlot(kaioTagNamesMap!)],
+  })
+}
+
+describe('transformActionsToButtonNext()', () => {
+  it('imports Button from the /next path and transforms all button-like actions prop into a Button component', () => {
+    const inputAst = parseJsx(`
+      import { GuidanceBlock } from "@kaizen/components"
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        actions={{
+          primary: {
+            label: 'Primary action',
+            onClick: () => alert('click 1'),
+          },
+          secondary: {
+            label: 'Secondary action',
+            onClick: () => alert('click 2'),
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      import { GuidanceBlock } from "@kaizen/components"
+      import { Button } from "@kaizen/components/next"
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large">Primary action</Button><Button onPress={() => alert('click 2')} variant="tertiary" size="large">Secondary action</Button></>}
+        />
+      `)
+
+    expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+  })
+  it('imports and transforms all button-like and link-like actions prop into a Button and LinkButton', () => {
+    const inputAst = parseJsx(`
+      import { GuidanceBlock } from "@kaizen/components"
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        actions={{
+          primary: {
+            label: 'Primary action',
+            onClick: () => alert('click 1'),
+          },
+          secondary: {
+            label: 'Secondary action',
+            href: "#secondary"
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      import { GuidanceBlock, LinkButton } from "@kaizen/components"
+      import { Button } from "@kaizen/components/next"
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
+        />
+      `)
+
+    expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+  })
+  it('does not redeclare imports if found', () => {
+    const inputAst = parseJsx(`
+      import { GuidanceBlock } from "@kaizen/components"
+      import { Button } from "@kaizen/components/next"
+      const MockLayout = () => (
+      <>
+        <GuidanceBlock
+          layout="default"
+          illustration={<Informative alt="" />}
+          content={<div>Test</div>}
+          actions={{
+            primary: {
+              label: 'Primary action',
+              onClick: () => alert('click 1'),
+            },
+            secondary: {
+              label: 'Secondary action',
+              href: "#secondary"
+            },
+          }}
+        />
+        <Button onPress={() => alert('page click 1')} variant="primary" size="large">Page button</Button>
+      </>
+      )`)
+    const outputAst = parseJsx(`
+      import { GuidanceBlock, LinkButton } from "@kaizen/components"
+      import { Button } from "@kaizen/components/next"
+      const MockLayout = () => (
+      <>
+        <GuidanceBlock
+          layout="default"
+          illustration={<Informative alt="" />}
+          content={<div>Test</div>}
+          actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
+        />
+        <Button onPress={() => alert('page click 1')} variant="primary" size="large">Page button</Button>
+      </>
+      )`)
+
+    expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+  })
+})

package/codemods/migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot.ts

@@ -0,0 +1,102 @@
+import ts from 'typescript'
+import {
+  getKaioTagName,
+  setImportToAdd,
+  updateKaioImports,
+  type TagImportAttributesMap,
+  type UpdateKaioImportsArgs,
+} from '../utils'
+import { transformActionsToActionsSlot } from './transformActionsToActionsSlot'
+
+const BUTTON_IMPORT_DESTINATION = '@kaizen/components/next'
+const LINKBUTTON_IMPORT_DESTINATION = '@kaizen/components'
+
+export const migrateGuidanceBlockActionsToActionsSlot =
+  (tagsMap: TagImportAttributesMap): ts.TransformerFactory<ts.SourceFile> =>
+  (context) =>
+  (rootNode) => {
+    const importsToRemove: UpdateKaioImportsArgs['importsToRemove'] = new Map()
+    const importsToAdd: UpdateKaioImportsArgs['importsToAdd'] = new Map()
+
+    const importedTargetButtonTagName = getKaioTagName(
+      rootNode,
+      'Button',
+      BUTTON_IMPORT_DESTINATION,
+    )
+
+    const importedTargetLinkButtonTagName = getKaioTagName(
+      rootNode,
+      'LinkButton',
+      LINKBUTTON_IMPORT_DESTINATION,
+    )
+
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxSelfClosingElement(node)) {
+        const tagName = node.tagName.getText()
+        const tagImportAttributes = tagsMap.get(tagName)
+
+        if (!tagImportAttributes) return node
+        if (
+          tagName === 'GuidanceBlock' ||
+          tagImportAttributes.importModuleName === 'GuidanceBlock'
+        ) {
+          const componentProps: ts.JsxAttributeLike[] = node.attributes.properties.reduce<
+            ts.JsxAttributeLike[]
+          >((guidanceBlockProps, prop) => {
+            if (ts.isJsxAttribute(prop)) {
+              const propName = prop.name.getText()
+              const propValue = prop.initializer as ts.JsxExpression
+
+              if (propName === 'actions') {
+                const transformedActions = transformActionsToActionsSlot(
+                  propValue.getChildren()[1] as ts.ObjectLiteralExpression,
+                )
+
+                if (transformedActions?.importsToAdd) {
+                  transformedActions.importsToAdd.forEach((importToAdd) => {
+                    if (importToAdd === 'Button') {
+                      setImportToAdd(importsToAdd, BUTTON_IMPORT_DESTINATION, {
+                        componentName: 'Button',
+                        alias:
+                          importedTargetButtonTagName !== 'Button'
+                            ? importedTargetButtonTagName
+                            : undefined,
+                      })
+                    }
+                    if (importToAdd === 'LinkButton') {
+                      setImportToAdd(importsToAdd, LINKBUTTON_IMPORT_DESTINATION, {
+                        componentName: 'LinkButton',
+                        alias:
+                          importedTargetLinkButtonTagName !== 'LinkButton'
+                            ? importedTargetLinkButtonTagName
+                            : undefined,
+                      })
+                    }
+                  })
+                }
+
+                return transformedActions?.actionsSlotAttr
+                  ? [...guidanceBlockProps, transformedActions.actionsSlotAttr]
+                  : guidanceBlockProps
+              }
+
+              return [...guidanceBlockProps, prop]
+            }
+            return [...guidanceBlockProps, prop]
+          }, [])
+
+          return ts.factory.createJsxSelfClosingElement(
+            ts.factory.createIdentifier(tagName),
+            undefined,
+            ts.factory.createJsxAttributes(componentProps),
+          )
+        }
+        return ts.visitEachChild(node, visit, context)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+
+    const node = ts.visitNode(rootNode, visit)
+
+    return updateKaioImports({ importsToRemove, importsToAdd })(context)(node as ts.SourceFile)
+  }

package/codemods/migrateGuidanceBlockActionsToActionsSlot/transformActionsToActionsSlot.spec.ts

@@ -0,0 +1,196 @@
+import ts from 'typescript'
+import { parseJsx } from '../__tests__/utils'
+import { printAst } from '../utils'
+import { transformActionsToActionsSlot } from './transformActionsToActionsSlot'
+
+export const mockedTransformer =
+  (kaioComponentName: string) =>
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxSelfClosingElement(node)) {
+        const componentProps: ts.JsxAttributeLike[] = node.attributes.properties.reduce<
+          ts.JsxAttributeLike[]
+        >((guidanceBlockProps, prop) => {
+          if (ts.isJsxAttribute(prop)) {
+            const propName = prop.name.getText()
+            const propValue = prop.initializer as ts.JsxExpression
+
+            if (propName === 'actions') {
+              const transformedActions = transformActionsToActionsSlot(
+                propValue.getChildren()[1] as ts.ObjectLiteralExpression,
+              )
+
+              return transformedActions?.actionsSlotAttr
+                ? [...guidanceBlockProps, transformedActions.actionsSlotAttr]
+                : guidanceBlockProps
+            }
+
+            return [...guidanceBlockProps, prop]
+          }
+          return [...guidanceBlockProps, prop]
+        }, [])
+
+        return ts.factory.createJsxSelfClosingElement(
+          ts.factory.createIdentifier(kaioComponentName),
+          undefined,
+          ts.factory.createJsxAttributes(componentProps),
+        )
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const transformInput = (
+  sourceFile: ts.SourceFile,
+  kaioComponentName: string = 'GuidanceBlock',
+): string => {
+  const result = ts.transform(sourceFile, [mockedTransformer(kaioComponentName)])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+  return printAst(transformedSource)
+}
+
+describe('transformActionsToActionsSlot()', () => {
+  it('transforms button-like and link-like actions prop into a Button and LinkButton', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        actions={{
+          primary: {
+            label: 'Primary action',
+            onClick: () => alert('click 1'),
+          },
+          secondary: {
+            label: 'Secondary action',
+            href: "#secondary"
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
+        />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+  it('transforms a primary action with all v1 Button props to expected Button outputs', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        actions={{
+          primary: {
+            label: 'Learn more',
+            onClick: () => alert('tada: 🎉'),
+            tooltip: {
+              text: 'Opens in a new tab',
+              mood: 'cautionary',
+            },
+            badge: {
+              text: 'New',
+            },
+            destructive: true,
+            disabled: hasCondition ? true : false,
+            reversed: true,
+            icon: <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />,
+            iconPosition: 'end',
+            size: 'small',
+            working: true,
+            workingLabel: 'Loading...',
+            workingLabelHidden: true,
+            disableTabFocusAndIUnderstandTheAccessibilityImplications: true,
+            'data-custom-attr': 'custom-attr',
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+        <GuidanceBlock
+          layout="default"
+          illustration={<Informative alt=""/>}
+          content={<div>Test</div>}
+          actionsSlot={<><Button
+              onPress={() => alert('tada: 🎉')}
+              tooltip={{text: 'Opens in a new tab',mood: 'cautionary',}}
+              badge={{ text: 'New', }}
+              isDisabled={hasCondition ? true : false}
+              isReversed
+              icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>}
+              iconPosition='end'
+              size="medium"
+              isPending pendingLabel='Loading...'
+              hasHiddenPendingLabel
+              data-custom-attr='custom-attr'
+              variant="secondary"
+            >Learn more</Button></>}/>
+      `)
+
+    expect(transformInput(inputAst).replace(/\s+/g, ' ')).toBe(
+      printAst(outputAst).replace(/\s+/g, ' '),
+    )
+  })
+
+  it('Passes custom data attributes and old props to be caught by type errors', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        actions={{
+          primary: {
+            label: 'Learn more',
+            onClick: () => alert('tada: 🎉'),
+            tooltip: {
+              text: 'Opens in a new tab',
+              mood: 'cautionary',
+            },
+            badge: {
+              text: 'New',
+            },
+            destructive: true,
+            disabled: hasCondition ? true : false,
+            reversed: true,
+            icon: <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />,
+            iconPosition: 'end',
+            size: 'small',
+            working: true,
+            workingLabel: 'Loading...',
+            workingLabelHidden: true,
+            disableTabFocusAndIUnderstandTheAccessibilityImplications: true,
+            'data-custom-attr': 'custom-attr',
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+        <GuidanceBlock
+          layout="default"
+          illustration={<Informative alt=""/>}
+          content={<div>Test</div>}
+          actionsSlot={<><Button
+              onPress={() => alert('tada: 🎉')}
+              tooltip={{text: 'Opens in a new tab',mood: 'cautionary',}}
+              badge={{ text: 'New', }}
+              isDisabled={hasCondition ? true : false}
+              isReversed
+              icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>}
+              iconPosition='end'
+              size="medium"
+              isPending pendingLabel='Loading...'
+              hasHiddenPendingLabel
+              data-custom-attr='custom-attr'
+              variant="secondary"
+            >Learn more</Button></>}/>
+      `)
+
+    expect(transformInput(inputAst).replace(/\s+/g, ' ')).toBe(
+      printAst(outputAst).replace(/\s+/g, ' '),
+    )
+  })
+})

package/codemods/migrateGuidanceBlockActionsToActionsSlot/transformActionsToActionsSlot.ts

@@ -0,0 +1,71 @@
+import ts from 'typescript'
+import { transformV1ButtonPropsToButtonOrLinkButton } from '../utils'
+
+type GuidanceBlockTransformedActions = {
+  importsToAdd: string[]
+  actionsSlotAttr: ts.JsxAttributeLike
+}
+
+/**
+ * A function that transforms a GuidanceBlock v1 button object literal into an new actionsSlot prop as JSX elements
+ * expects that the node passed in will be an ObjectLiteralExpression, ie:
+ * `{primary: {...buttonV1Props}, secondary: {...buttonV1Props}}`
+ */
+export const transformActionsToActionsSlot = (
+  node: ts.ObjectLiteralExpression,
+): GuidanceBlockTransformedActions | undefined => {
+  if (ts.isObjectLiteralExpression(node)) {
+    const newImports: (string | undefined)[] = []
+
+    const primaryAction = node.properties.find((prop) => prop?.name?.getText() === 'primary') as
+      | ts.PropertyAssignment
+      | undefined
+
+    const secondaryAction = node.properties.find(
+      (prop) => prop?.name?.getText() === 'secondary',
+    ) as ts.PropertyAssignment | undefined
+
+    let primaryButton: ts.JsxSelfClosingElement | ts.JsxElement | undefined = undefined
+    let secondaryButton: ts.JsxSelfClosingElement | ts.JsxElement | undefined = undefined
+
+    if (primaryAction) {
+      const actionValue = primaryAction.initializer as ts.ObjectLiteralExpression
+      const transformedComponent = transformV1ButtonPropsToButtonOrLinkButton(
+        actionValue,
+        'secondary',
+      )
+      primaryButton = transformedComponent.component
+      newImports.push(transformedComponent.import)
+    }
+
+    if (secondaryAction) {
+      const actionValue = secondaryAction?.initializer as ts.ObjectLiteralExpression
+      const transformedComponent = transformV1ButtonPropsToButtonOrLinkButton(
+        actionValue,
+        'tertiary',
+      )
+      secondaryButton = transformedComponent.component
+      newImports.push(transformedComponent.import)
+    }
+
+    if (primaryButton || secondaryButton) {
+      const newActionsSlotAttr = ts.factory.createJsxAttribute(
+        ts.factory.createIdentifier('actionsSlot'),
+        ts.factory.createJsxExpression(
+          undefined,
+          ts.factory.createJsxFragment(
+            ts.factory.createJsxOpeningFragment(),
+            [primaryButton, secondaryButton].filter(Boolean) as ts.JsxChild[],
+            ts.factory.createJsxJsxClosingFragment(),
+          ),
+        ),
+      )
+
+      return {
+        actionsSlotAttr: newActionsSlotAttr,
+        importsToAdd: newImports.filter(Boolean) as string[],
+      }
+    }
+  }
+  return undefined
+}

package/codemods/utils/createProp.ts

@@ -1,10 +1,10 @@
 import ts from 'typescript'
 
 export const createProp = (
+  // Transforms `propName={true}` to `propName`
   name: string,
   value?: ts.JsxAttributeValue | undefined,
 ): ts.JsxAttribute => {
-  // Transforms `propName={true}` to `propName`
   if (value && ts.isJsxExpression(value) && value.expression?.kind === ts.SyntaxKind.TrueKeyword) {
     return ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), undefined)
   }

package/codemods/utils/index.ts

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