@kaizen/components 1.73.0 → 1.73.2

package/bin/codemod.sh

@@ -31,6 +31,8 @@ echo ""
 
 if npx tsx@latest $CODEMOD_PATH $TARGET_DIR; then
   echo "Codemod '$codemodFileName' completed successfully in directory '$transformDir'"
+  echo "---"
+  echo "Run linting and prettier to correct issues with re-writes"
 else
   echo "Codemod '$codemodFileName' could not be run in '$TARGET_DIR'"
   exit 1

package/codemods/README.md

@@ -103,6 +103,52 @@ Released in `1.60.0`
 
 Removes `Popover` component props `variant` and `customIcon`.
 
+### `upgradeV1Buttons`
+
+Released in `1.73.1`
+
+Migrates V1 `Button` and `IconButton` component to next `Button` or `LinkButton`.
+
+#### Props
+
+- `label` becomes `children`
+  - eg. `<IconButton label="Hello" />` becomes `<Button>Hello</Button>`
+- `onClick` becomes `onPress`
+- Variants:
+  - Default (undefined):
+    - For `Button` becomes `variant="secondary"`
+    - For `IconButton` becomes `variant="tertiary"`
+  - `primary` becomes `variant="primary"`
+  - `secondary` becomes `variant="tertiary"`
+  - `destructive` will be removed (no longer available as a variant)
+- Sizes:
+  - Default (undefined) becomes `large`
+  - `small` becomes `medium`
+  - `regular` becomes `large`
+- `reversed` becomes `isReversed`
+- `classNameOverride` becomes `className`
+- `data-automation-id` becomes `data-testid`
+- `disabled` becomes `isDisabled`
+- `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
+- For `IconButton` only:
+  - `hasHiddenLabel` will be added
+
+#### Component transformation
+
+- `Button`/`IconButton` without the `href` or `component` prop will become `next/Button`
+- `Button`/`IconButton` with the `href` prop will become `LinkButton`
+- `Button`/`IconButton` with the `component` prop will become `LinkButton`
+  - `component` prop will remain to throw an intentional type error to ensure manual intervention (see migration guide)
+
+#### Imports
+
+All imports of V1 Buttons will now point to either:
+
+- `@kaizen/components/next` for `Button`
+- `@kaizen/components` for `LinkButton`
+
 ### `upgradeIconV1`
 
 Released in `1.67.0`; last updated in `1.68.1`

package/codemods/upgradeV1Buttons/index.ts

@@ -0,0 +1,19 @@
+import { transformComponentsInDir } from '../utils'
+import { upgradeV1Buttons } from './upgradeV1Buttons'
+
+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 (~ -_-)~')
+
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  transformComponentsInDir(targetDir, ['IconButton', 'Button'], (tagNames) => [
+    upgradeV1Buttons(tagNames),
+  ])
+}
+
+run()

package/codemods/upgradeV1Buttons/transformV1ButtonAttributes.spec.ts

@@ -0,0 +1,210 @@
+import ts from 'typescript'
+import { parseJsx } from '../__tests__/utils'
+import { createJsxElementWithChildren, printAst } from '../utils'
+import { transformV1ButtonAttributes } from './transformV1ButtonAttributes'
+
+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 { targetComponentName, newAttributes, childrenValue } = transformV1ButtonAttributes(
+          node,
+          kaioComponentName,
+        )
+        return createJsxElementWithChildren(targetComponentName, newAttributes, childrenValue)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const transformInput = (
+  sourceFile: ts.SourceFile,
+  kaioComponentName: string = 'Button',
+): string => {
+  const result = ts.transform(sourceFile, [mockedTransformer(kaioComponentName)])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+  return printAst(transformedSource)
+}
+
+describe('transformV1ButtonAttributes()', () => {
+  it('changes label to children', () => {
+    const inputAst = parseJsx('<Button label="Pancakes" />')
+    const outputAst = parseJsx('<Button variant="secondary" size="large">Pancakes</Button>')
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces IconButton with Button and changes label to children and adds hasHiddenLabel', () => {
+    const inputAst = parseJsx('<IconButton icon={icon} label="Pancakes" />')
+    const outputAst = parseJsx(
+      '<Button icon={icon} variant="tertiary" size="large" hasHiddenLabel>Pancakes</Button>',
+    )
+    expect(transformInput(inputAst, 'IconButton')).toEqual(printAst(outputAst))
+  })
+
+  it('replaces V1 Buttons with LinkButton if href exists', () => {
+    const inputAst = parseJsx('<Button label="Pancakes" href="#" />')
+    const outputAst = parseJsx(
+      '<LinkButton href="#" variant="secondary" size="large">Pancakes</LinkButton>',
+    )
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces V1 Buttons with LinkButton if component prop exists', () => {
+    const inputAst = parseJsx('<Button label="Pancakes" component={Component} />')
+    const outputAst = parseJsx(
+      '<LinkButton component={Component} variant="secondary" size="large">Pancakes</LinkButton>',
+    )
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('will remove usage of `disableTabFocusAndIUnderstandTheAccessibilityImplications`', () => {
+    const inputAst = parseJsx(
+      '<Button label="Pancakes" disableTabFocusAndIUnderstandTheAccessibilityImplications  />',
+    )
+    const outputAst = parseJsx('<Button variant="secondary" size="large">Pancakes</Button>')
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  describe('transform existing props', () => {
+    it('changes onClick to onPress', () => {
+      const inputAst = parseJsx('<Button label="Pancakes" onClick={handleClick} />')
+      const outputAst = parseJsx(
+        '<Button onPress={handleClick} variant="secondary" size="large">Pancakes</Button>',
+      )
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it('changes reversed to isReversed', () => {
+      const inputAst = parseJsx(`
+        <>
+          <Button label="Pancakes" reversed />
+          <Button label="Pancakes" reversed={false} />
+        </>
+      `)
+      const outputAst = parseJsx(`
+        <>
+          <Button isReversed variant="secondary" size="large">Pancakes</Button>
+          <Button isReversed={false} variant="secondary" size="large">Pancakes</Button>
+        </>
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it('changes classNameOverride to className', () => {
+      const inputAst = parseJsx('<Button label="Pancakes" classNameOverride="hello" />')
+      const outputAst = parseJsx(
+        '<Button className="hello" variant="secondary" size="large">Pancakes</Button>',
+      )
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it('changes data-automation-id to data-testid', () => {
+      const inputAst = parseJsx('<Button label="Pancakes" data-automation-id="pancakes" />')
+      const outputAst = parseJsx(
+        '<Button data-testid="pancakes" variant="secondary" size="large">Pancakes</Button>',
+      )
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it('changes disabled to isDisabled', () => {
+      const inputAst = parseJsx(`
+        <>
+          <Button label="Pancakes" disabled />
+          <Button label="Pancakes" disabled={false} />
+        </>
+      `)
+      const outputAst = parseJsx(`
+        <>
+          <Button isDisabled variant="secondary" size="large">Pancakes</Button>
+          <Button isDisabled={false} variant="secondary" size="large">Pancakes</Button>
+        </>
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it('changes newTabAndIUnderstandTheAccessibilityImplications to target="_blank" and rel="noopener noreferrer"', () => {
+      const inputAst = parseJsx(
+        '<Button href="#" label="Pancakes" newTabAndIUnderstandTheAccessibilityImplications />',
+      )
+      const outputAst = parseJsx(
+        '<LinkButton href="#" target="_blank" rel="noopener noreferrer" variant="secondary" size="large">Pancakes</LinkButton>',
+      )
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    describe('transform variant', () => {
+      it('changes default (undefined) for Button to variant secondary', () => {
+        const inputAst = parseJsx('<Button label="Pancakes" />')
+        const outputAst = parseJsx('<Button variant="secondary" size="large">Pancakes</Button>')
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+
+      it('changes default (undefined) for IconButton to variant tertiary', () => {
+        const inputAst = parseJsx('<IconButton label="Pancakes" />')
+        const outputAst = parseJsx(
+          '<Button variant="tertiary" size="large" hasHiddenLabel>Pancakes</Button>',
+        )
+        expect(transformInput(inputAst, 'IconButton')).toEqual(printAst(outputAst))
+      })
+
+      it('changes primary to variant primary', () => {
+        const inputAst = parseJsx('<Button label="Pancakes" primary />')
+        const outputAst = parseJsx('<Button variant="primary" size="large">Pancakes</Button>')
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+
+      it('changes secondary to variant tertiary', () => {
+        const inputAst = parseJsx('<Button label="Pancakes" secondary />')
+        const outputAst = parseJsx('<Button variant="tertiary" size="large">Pancakes</Button>')
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+
+      it('removes destructive', () => {
+        const inputAst = parseJsx(`
+          <>
+            <Button label="Pancakes" destructive />
+            <Button label="Pancakes" primary destructive />
+            <Button label="Pancakes" secondary destructive />
+          </>
+        `)
+        const outputAst = parseJsx(`
+          <>
+            <Button variant="secondary" size="large">Pancakes</Button>
+            <Button variant="primary" size="large">Pancakes</Button>
+            <Button variant="tertiary" size="large">Pancakes</Button>
+          </>
+        `)
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+    })
+
+    describe('transform size', () => {
+      it('changes default (undefined) to large', () => {
+        const inputAst = parseJsx('<Button label="Pancakes" />')
+        const outputAst = parseJsx('<Button variant="secondary" size="large">Pancakes</Button>')
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+
+      it('changes small to medium', () => {
+        const inputAst = parseJsx('<Button label="Pancakes" size="small" />')
+        const outputAst = parseJsx('<Button size="medium" variant="secondary">Pancakes</Button>')
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+
+      it('changes regular to large', () => {
+        const inputAst = parseJsx('<Button label="Pancakes" size="regular" />')
+        const outputAst = parseJsx('<Button size="large" variant="secondary">Pancakes</Button>')
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+
+      it('does not change a non-string value', () => {
+        const inputAst = parseJsx('<Button label="Pancakes" size={size} />')
+        const outputAst = parseJsx('<Button size={size} variant="secondary">Pancakes</Button>')
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+    })
+  })
+})

package/codemods/upgradeV1Buttons/transformV1ButtonAttributes.ts

@@ -0,0 +1,146 @@
+import ts from 'typescript'
+import { type ButtonProps as V1ButtonProps } from '~components/Button'
+import { type ButtonProps as NextButtonProps } from '~components/__next__/Button'
+import { createProp, createStringProp, getPropValueText } from '../utils'
+
+const getNewSizeValue = (
+  oldValue: Exclude<V1ButtonProps['size'], undefined>,
+): Exclude<NextButtonProps['size'], undefined> => {
+  switch (oldValue) {
+    case 'small':
+      return 'medium'
+    case 'regular':
+      return 'large'
+  }
+}
+
+/**
+ * @returns
+ * - `ts.JsxAttribute` if the prop should be transformed
+ * - `null` if the prop should be removed
+ * - `undefined` if the prop should be kept as is
+ */
+const transformProp = (
+  propName: string,
+  propValue: ts.JsxAttributeValue | undefined,
+): ts.JsxAttribute | null | undefined => {
+  switch (propName) {
+    case 'onClick':
+      return createProp('onPress', propValue)
+    case 'reversed':
+      return createProp('isReversed', propValue)
+    case 'classNameOverride':
+      return createProp('className', propValue)
+    case 'data-automation-id':
+      return createProp('data-testid', propValue)
+    case 'fullWidth':
+      return createProp('isFullWidth', propValue)
+    case 'working':
+      return createProp('isPending', propValue)
+    case 'workingLabel':
+      return createProp('pendingLabel', propValue)
+    case 'workingLabelHidden':
+      return createProp('hasHiddenPendingLabel', propValue)
+    case 'onMouseDown':
+      return createProp('onPressStart', propValue)
+    case 'disableTabFocusAndIUnderstandTheAccessibilityImplications':
+      return null
+    case 'newTabAndIUnderstandTheAccessibilityImplications':
+      return null
+    case 'disabled':
+      return createProp('isDisabled', propValue)
+    case 'size': {
+      if (!propValue) return createStringProp('size', 'large')
+
+      const sizeValue = getPropValueText(propValue) as Exclude<V1ButtonProps['size'], undefined>
+      return sizeValue
+        ? createStringProp('size', getNewSizeValue(sizeValue))
+        : createProp('size', propValue)
+    }
+    case 'primary':
+      return createStringProp('variant', 'primary')
+    case 'secondary':
+      return createStringProp('variant', 'tertiary')
+    case 'destructive':
+      return null
+    default:
+      return undefined
+  }
+}
+
+type TransformedButtonAttributes = {
+  targetComponentName: string
+  newAttributes: ts.JsxAttributeLike[]
+  childrenValue: ts.JsxAttributeValue | undefined
+}
+
+export const transformV1ButtonAttributes = (
+  node: ts.JsxSelfClosingElement,
+  kaioComponentName: string,
+): TransformedButtonAttributes => {
+  let childrenValue: ts.JsxAttributeValue | undefined
+  let hasSizeProp = false
+  let hasVariant = false
+  let hasLinkAttr = false
+
+  const newAttributes = node.attributes.properties.reduce<ts.JsxAttributeLike[]>((acc, attr) => {
+    if (ts.isJsxAttribute(attr)) {
+      const propName = attr.name.getText()
+
+      if (propName === 'label') {
+        childrenValue = attr.initializer
+        return acc
+      }
+
+      if (propName === 'newTabAndIUnderstandTheAccessibilityImplications') {
+        acc.push(createStringProp('target', '_blank'))
+        acc.push(createStringProp('rel', 'noopener noreferrer'))
+        return acc
+      }
+
+      if (propName === 'primary' || propName === 'secondary') {
+        hasVariant = true
+      }
+
+      if (propName === 'size') {
+        hasSizeProp = true
+      }
+
+      if (propName === 'href' || propName === 'component') {
+        hasLinkAttr = true
+      }
+
+      const newProp = transformProp(propName, attr.initializer)
+
+      if (newProp === null) return acc
+
+      if (newProp) {
+        acc.push(newProp)
+        return acc
+      }
+    }
+
+    acc.push(attr)
+    return acc
+  }, [])
+
+  if (!hasVariant) {
+    newAttributes.push(
+      createStringProp('variant', kaioComponentName === 'IconButton' ? 'tertiary' : 'secondary'),
+    )
+  }
+
+  if (!hasSizeProp) {
+    newAttributes.push(createStringProp('size', 'large'))
+  }
+
+  if (kaioComponentName === 'IconButton') {
+    newAttributes.push(createProp('hasHiddenLabel'))
+  }
+
+  return {
+    targetComponentName: hasLinkAttr ? 'LinkButton' : 'Button',
+    newAttributes,
+    childrenValue,
+  }
+}