@kaizen/components 1.73.0 → 1.73.1

package/codemods/upgradeV1Buttons/upgradeV1Buttons.ts

@@ -0,0 +1,93 @@
+import ts from 'typescript'
+import {
+  createJsxElementWithChildren,
+  getKaioTagName,
+  setImportToAdd,
+  setImportToRemove,
+  updateKaioImports,
+  type TagImportAttributesMap,
+  type UpdateKaioImportsArgs,
+} from '../utils'
+import { transformV1ButtonAttributes } from './transformV1ButtonAttributes'
+
+const V1_BUTTONS = ['Button', 'IconButton']
+const V1_BUTTONS_IMPORT_SOURCE = [
+  '@kaizen/components',
+  '@kaizen/components/v1/actions',
+  '@kaizen/components/v2/actions',
+]
+const BUTTON_IMPORT_DESTINATION = '@kaizen/components/next'
+const LINKBUTTON_IMPORT_DESTINATION = '@kaizen/components'
+
+export const upgradeV1Buttons =
+  (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 (!V1_BUTTONS.includes(tagImportAttributes.originalName)) return node
+        if (!V1_BUTTONS_IMPORT_SOURCE.includes(tagImportAttributes.importModuleName)) return node
+
+        const { targetComponentName, newAttributes, childrenValue } = transformV1ButtonAttributes(
+          node,
+          tagImportAttributes.originalName,
+        )
+
+        const targetTagName =
+          targetComponentName === 'Button'
+            ? (importedTargetButtonTagName ?? 'Button')
+            : (importedTargetLinkButtonTagName ?? 'LinkButton')
+
+        setImportToRemove(
+          importsToRemove,
+          tagImportAttributes.importModuleName,
+          tagImportAttributes.originalName,
+        )
+
+        if (targetComponentName === 'Button' && !importedTargetButtonTagName) {
+          setImportToAdd(importsToAdd, BUTTON_IMPORT_DESTINATION, {
+            componentName: 'Button',
+            alias:
+              importedTargetButtonTagName !== 'Button' ? importedTargetButtonTagName : undefined,
+          })
+        }
+
+        if (targetComponentName === 'LinkButton' && !importedTargetLinkButtonTagName) {
+          setImportToAdd(importsToAdd, LINKBUTTON_IMPORT_DESTINATION, {
+            componentName: 'LinkButton',
+            alias:
+              importedTargetLinkButtonTagName !== 'LinkButton'
+                ? importedTargetLinkButtonTagName
+                : undefined,
+          })
+        }
+
+        return createJsxElementWithChildren(targetTagName, newAttributes, childrenValue)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+
+    const node = ts.visitNode(rootNode, visit)
+
+    return updateKaioImports({ importsToRemove, importsToAdd })(context)(node as ts.SourceFile)
+  }

package/codemods/utils/createJsxElementWithChildren.spec.ts

@@ -0,0 +1,119 @@
+import ts from 'typescript'
+import { parseJsx } from '../__tests__/utils'
+import { createJsxElementWithChildren } from './createJsxElementWithChildren'
+import { printAst } from './printAst'
+import { transformSource, type TransformSourceArgs } from './transformSource'
+
+export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
+  const visit = (node: ts.Node): ts.Node => {
+    let childrenValue: ts.JsxAttributeValue | undefined
+
+    if (ts.isJsxSelfClosingElement(node)) {
+      const tagName = node.tagName.getText()
+      const attributes = node.attributes.properties.reduce<ts.JsxAttributeLike[]>((acc, attr) => {
+        if (ts.isJsxAttribute(attr) && attr.name.getText() === 'toChildren') {
+          childrenValue = attr.initializer
+          return acc
+        }
+
+        acc.push(attr)
+        return acc
+      }, [])
+
+      return createJsxElementWithChildren(tagName, attributes, childrenValue)
+    }
+    return ts.visitEachChild(node, visit, context)
+  }
+  return ts.visitNode(rootNode, visit) as ts.SourceFile
+}
+
+const testCreateJsxElementWithChildren = (sourceFile: TransformSourceArgs['sourceFile']): string =>
+  transformSource({ sourceFile, transformers: [mockedTransformer] })
+
+describe('createJsxElementWithChildren()', () => {
+  it('transforms a string value', () => {
+    const inputAst = parseJsx('<Button toChildren="Hello" variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary">Hello</Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a string in brackets', () => {
+    const inputAst = parseJsx(`
+      <>
+        <Button toChildren={"Double quotes"} variant="primary" />
+        <Button toChildren={'Single quotes'} variant="primary" />
+      </>
+    `)
+    const outputAst = parseJsx(`
+      <>
+        <Button variant="primary">Double quotes</Button>
+        <Button variant="primary">Single quotes</Button>
+      </>
+    `)
+    // const outputAst = parseJsx('<Button variant="primary">Hello</Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a string with comments in brackets', () => {
+    const inputAst = parseJsx(`<Button
+      toChildren={
+        "Hello" // comment
+      }
+      variant="primary" />
+    `)
+    const outputAst = parseJsx(`<Button variant="primary">{
+      "Hello" // comment
+    }</Button>`)
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a template literal with variables', () => {
+    /* eslint-disable no-template-curly-in-string */
+    const inputAst = parseJsx('<Button toChildren={`Hello ${name}`} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary">{`Hello ${name}`}</Button>')
+    /* eslint-enable no-template-curly-in-string */
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a variable', () => {
+    const inputAst = parseJsx('<Button toChildren={childrenVar} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary">{childrenVar}</Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a ternary', () => {
+    const inputAst = parseJsx(
+      '<Button toChildren={isPancake ? "Pancake" : "Waffle"} variant="primary" />',
+    )
+    const outputAst = parseJsx(
+      '<Button variant="primary">{isPancake ? "Pancake" : "Waffle"}</Button>',
+    )
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a JSX element', () => {
+    const inputAst = parseJsx('<Button toChildren={<span>Hello</span>} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary"><span>Hello</span></Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a JSX self-closing element', () => {
+    const inputAst = parseJsx('<Button toChildren={<Icon />} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary"><Icon /></Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a JSX fragment', () => {
+    const inputAst = parseJsx('<Button toChildren={<>Hello</>} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary"><>Hello</></Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('adds a comment if no value for children has been passed in', () => {
+    const inputAst = parseJsx('<Button variant="primary" />')
+    const outputAst = parseJsx(`<Button variant="primary">
+/* @todo Children required but a value was not found during the codemod */
+</Button>`)
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/utils/createJsxElementWithChildren.ts

@@ -0,0 +1,55 @@
+import ts from 'typescript'
+
+const createJsxChildren = (childrenValue: ts.JsxAttributeValue): ts.JsxChild => {
+  if (ts.isStringLiteral(childrenValue)) {
+    return ts.factory.createJsxText(childrenValue.text)
+  }
+
+  if (ts.isJsxExpression(childrenValue)) {
+    const value = childrenValue.expression
+
+    if (value) {
+      if (ts.isStringLiteral(value)) {
+        // Tests for {"string"}, {'string'}
+        const regexExpContainsOnlyQuotedString = new RegExp(/^\{(["']).*(\1)\}$/g)
+
+        if (regexExpContainsOnlyQuotedString.test(childrenValue.getFullText())) {
+          return ts.factory.createJsxText(value.text)
+        }
+      }
+
+      if (ts.isJsxElement(value) || ts.isJsxSelfClosingElement(value) || ts.isJsxFragment(value)) {
+        return value
+      }
+    }
+
+    return childrenValue
+  }
+
+  return childrenValue
+}
+
+/**
+ * Use this to replace a self-closing JSX element to a JSX element with children
+ */
+export const createJsxElementWithChildren = (
+  tagName: string,
+  attributes: ts.JsxAttributeLike[],
+  childrenValue: ts.JsxAttributeValue | undefined,
+): ts.JsxElement => {
+  const tagNameId = ts.factory.createIdentifier(tagName)
+  const fallbackChildren = [
+    ts.factory.createJsxText('\n'),
+    ts.factory.createJsxText(
+      '/* @todo Children required but a value was not found during the codemod */',
+    ),
+    ts.factory.createJsxText('\n'),
+  ]
+  const children = childrenValue ? [createJsxChildren(childrenValue)] : fallbackChildren
+
+  return ts.factory.createJsxElement(
+    ts.factory.createJsxOpeningElement(tagNameId, [], ts.factory.createJsxAttributes(attributes)),
+    children,
+    ts.factory.createJsxClosingElement(tagNameId),
+  )
+}

package/codemods/utils/createProp.spec.ts

@@ -1,32 +1,88 @@
 import ts from 'typescript'
 import { parseJsx } from '../__tests__/utils/parseJsx'
-import { createStyleProp } from './createProp'
+import { createProp, createStyleProp } from './createProp'
 import { printAst } from './printAst'
 import { transformSource, type TransformSourceArgs } from './transformSource'
 import { updateJsxElementWithNewProps } from './updateJsxElementWithNewProps'
 
-export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
+export const mockTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
   const visit = (node: ts.Node): ts.Node => {
     if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
-      if (node.tagName.getText() === 'Pancakes') {
-        const newAttributes = node.attributes.properties.map((attr) => {
-          if (ts.isJsxAttribute(attr)) {
-            if (attr.name.getText() === 'replaceWithExistingValue') {
-              return createStyleProp({ width: attr.initializer! })
-            }
+      const newAttributes = node.attributes.properties.map((attr) => {
+        if (ts.isJsxAttribute(attr)) {
+          return createProp(`${attr.name.getText()}New`, attr.initializer)
+        }
+        return attr
+      })
+      return updateJsxElementWithNewProps(node, newAttributes)
+    }
+    return ts.visitEachChild(node, visit, context)
+  }
+  return ts.visitNode(rootNode, visit) as ts.SourceFile
+}
+
+const testCreateProp = (sourceFile: TransformSourceArgs['sourceFile']): string =>
+  transformSource({
+    sourceFile,
+    transformers: [mockTransformer],
+  })
+
+describe('createProp()', () => {
+  it('creates a prop with the pre-existing value', () => {
+    const inputAst = parseJsx('<Pancakes isBoolean={false} />')
+    const outputAst = parseJsx('<Pancakes isBooleanNew={false} />')
+    expect(testCreateProp(inputAst)).toEqual(printAst(outputAst))
+  })
 
-            if (attr.name.getText() === 'replaceWithStringValue') {
-              return createStyleProp({ width: '100px' })
-            }
+  it('creates a prop and transforms true to undefined', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Pancakes isBoolean />
+          <Pancakes isBoolean={false} />
+          <Pancakes stringProp="Hello" />
+          <Pancakes stringVarProp={stringVar} />
+          <Pancakes numberProp={3} />
+          <Pancakes objProp={{ key: 'value' }} />
+        </>
+      )
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Pancakes isBooleanNew />
+          <Pancakes isBooleanNew={false} />
+          <Pancakes stringPropNew="Hello" />
+          <Pancakes stringVarPropNew={stringVar} />
+          <Pancakes numberPropNew={3} />
+          <Pancakes objPropNew={{ key: 'value' }} />
+        </>
+      )
+    `)
+    expect(testCreateProp(inputAst)).toEqual(printAst(outputAst))
+  })
+})
+
+export const styleTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
+  const visit = (node: ts.Node): ts.Node => {
+    if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+      const newAttributes = node.attributes.properties.map((attr) => {
+        if (ts.isJsxAttribute(attr)) {
+          if (attr.name.getText() === 'replaceWithExistingValue') {
+            return createStyleProp({ width: attr.initializer! })
+          }
+
+          if (attr.name.getText() === 'replaceWithStringValue') {
+            return createStyleProp({ width: '100px' })
+          }
 
-            if (attr.name.getText() === 'replaceWithNumberValue') {
-              return createStyleProp({ width: 100 })
-            }
+          if (attr.name.getText() === 'replaceWithNumberValue') {
+            return createStyleProp({ width: 100 })
           }
-          return attr
-        })
-        return updateJsxElementWithNewProps(node, newAttributes)
-      }
+        }
+        return attr
+      })
+      return updateJsxElementWithNewProps(node, newAttributes)
     }
     return ts.visitEachChild(node, visit, context)
   }
@@ -36,7 +92,7 @@ export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context)
 const testCreateStyleProp = (sourceFile: TransformSourceArgs['sourceFile']): string =>
   transformSource({
     sourceFile,
-    transformers: [mockedTransformer],
+    transformers: [styleTransformer],
   })
 
 describe('createStyleProp()', () => {

package/codemods/utils/createProp.ts

@@ -3,7 +3,14 @@ import ts from 'typescript'
 export const createProp = (
   name: string,
   value?: ts.JsxAttributeValue | undefined,
-): ts.JsxAttribute => ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), value)
+): 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)
+  }
+
+  return ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), value)
+}
 
 export const createStringProp = (name: string, value: string): ts.JsxAttribute =>
   createProp(name, ts.factory.createStringLiteral(value))

package/codemods/utils/getKaioTagName.ts

@@ -5,10 +5,17 @@ type ImportModuleNamedImports = {
   namedImports: ts.NodeArray<ts.ImportSpecifier>
 }
 
-const getKaioNamedImports = (visitedNode: ts.Node): ImportModuleNamedImports | undefined => {
+const getKaioNamedImports = (
+  visitedNode: ts.Node,
+  importSource?: string,
+): ImportModuleNamedImports | undefined => {
   if (ts.isImportDeclaration(visitedNode)) {
     const moduleSpecifier = (visitedNode.moduleSpecifier as ts.StringLiteral).text
-    if (moduleSpecifier.includes('@kaizen/components')) {
+    const hasMatch = importSource
+      ? moduleSpecifier === importSource
+      : moduleSpecifier.includes('@kaizen/components')
+
+    if (hasMatch) {
       const namedBindings = visitedNode.importClause?.namedBindings
       if (namedBindings && ts.isNamedImports(namedBindings)) {
         return {
@@ -42,12 +49,13 @@ const getNamesFromSpecifier = (importSpecifier: ts.ImportSpecifier): ImportSpeci
  */
 export const getKaioTagName = (
   node: ts.Node,
-  importSpecifierTarget: string,
+  componentName: string,
+  importSource?: string,
 ): string | undefined => {
   let alias: string | undefined
 
   const visitNode = (visitedNode: ts.Node): string | undefined => {
-    const kaioNamedImports = getKaioNamedImports(visitedNode)
+    const kaioNamedImports = getKaioNamedImports(visitedNode, importSource)
 
     if (!kaioNamedImports) {
       return ts.forEachChild(visitedNode, visitNode)
@@ -56,7 +64,7 @@ export const getKaioTagName = (
     kaioNamedImports.namedImports.find((importSpecifier) => {
       const { tagName, originalName } = getNamesFromSpecifier(importSpecifier)
 
-      if (originalName === importSpecifierTarget) {
+      if (originalName === componentName) {
         alias = tagName
         return true
       }

package/codemods/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './createJsxElementWithChildren'
 export * from './createProp'
 export * from './getPropValueText'
 export * from './getKaioTagName'