@planningcenter/tapestry-migration-cli 2.2.1-qa-362.0 → 2.3.0-rc.10

package/src/components/shared/actions/addAttribute.test.ts

@@ -0,0 +1,300 @@
+import jscodeshift, {
+  BooleanLiteral,
+  ConditionalExpression,
+  Identifier,
+  JSXAttribute,
+  JSXElement,
+  JSXExpressionContainer,
+  JSXIdentifier,
+  StringLiteral,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { addAttribute, Conditional } from "./addAttribute"
+
+const j = jscodeshift.withParser("tsx")
+
+function createElementFromCode(code: string): JSXElement {
+  const source = j(`<div>${code}</div>`)
+  return source.find(j.JSXElement).at(0).get().value.children?.[0] as JSXElement
+}
+
+function getAttributeFromElement(
+  element: JSXElement,
+  name: string
+): JSXAttribute | null {
+  const attributes = element.openingElement.attributes || []
+  return (
+    (attributes.find(
+      (attr) =>
+        attr.type === "JSXAttribute" &&
+        (attr.name as JSXIdentifier)?.name === name
+    ) as JSXAttribute) || null
+  )
+}
+
+describe("addAttribute", () => {
+  describe("string values", () => {
+    it("should add string attribute to element", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      addAttribute({ element, j, name: "kind", value: "primary" })
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      expect(kindAttr).not.toBeNull()
+      expect(kindAttr?.value?.type).toBe("StringLiteral")
+      expect((kindAttr?.value as StringLiteral)?.value).toBe("primary")
+    })
+
+    it("should add multiple string attributes", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      addAttribute({ element, j, name: "kind", value: "primary" })
+      addAttribute({ element, j, name: "size", value: "large" })
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      const sizeAttr = getAttributeFromElement(element, "size")
+
+      expect(kindAttr).not.toBeNull()
+      expect(sizeAttr).not.toBeNull()
+      expect((kindAttr?.value as StringLiteral)?.value).toBe("primary")
+      expect((sizeAttr?.value as StringLiteral)?.value).toBe("large")
+    })
+
+    it("should handle empty string values", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      addAttribute({ element, j, name: "title", value: "" })
+
+      const titleAttr = getAttributeFromElement(element, "title")
+      expect(titleAttr).not.toBeNull()
+      expect(titleAttr?.value?.type).toBe("StringLiteral")
+      expect((titleAttr?.value as StringLiteral)?.value).toBe("")
+    })
+
+    it("should handle special characters in string values", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      addAttribute({ element, j, name: "aria-label", value: "Save & Continue" })
+
+      const ariaAttr = getAttributeFromElement(element, "aria-label")
+      expect(ariaAttr).not.toBeNull()
+      expect((ariaAttr?.value as StringLiteral)?.value).toBe("Save & Continue")
+    })
+  })
+
+  describe("boolean values", () => {
+    it("should add boolean true attribute", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      addAttribute({ element, j, name: "disabled", value: true })
+
+      const disabledAttr = getAttributeFromElement(element, "disabled")
+      expect(disabledAttr).not.toBeNull()
+      expect(disabledAttr?.value?.type).toBe("JSXExpressionContainer")
+
+      const container = disabledAttr?.value as JSXExpressionContainer
+      expect(container.expression.type).toBe("BooleanLiteral")
+      expect((container.expression as BooleanLiteral).value).toBe(true)
+    })
+
+    it("should add boolean false attribute", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      addAttribute({ element, j, name: "loading", value: false })
+
+      const loadingAttr = getAttributeFromElement(element, "loading")
+      expect(loadingAttr).not.toBeNull()
+      expect(loadingAttr?.value?.type).toBe("JSXExpressionContainer")
+
+      const container = loadingAttr?.value as JSXExpressionContainer
+      expect(container.expression.type).toBe("BooleanLiteral")
+      expect((container.expression as BooleanLiteral).value).toBe(false)
+    })
+  })
+
+  describe("null values", () => {
+    it("should not add attribute when value is null", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+      const initialAttrCount = (element.openingElement.attributes || []).length
+
+      addAttribute({ element, j, name: "kind", value: null })
+
+      const finalAttrCount = (element.openingElement.attributes || []).length
+      expect(finalAttrCount).toBe(initialAttrCount)
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      expect(kindAttr).toBeNull()
+    })
+  })
+
+  describe("conditional values", () => {
+    it("should add conditional attribute with test, consequent, and alternate", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+      const conditionalValue: Conditional = {
+        alternate: "secondary",
+        consequent: "primary",
+        test: "isPrimary",
+      }
+
+      addAttribute({ element, j, name: "kind", value: conditionalValue })
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      expect(kindAttr).not.toBeNull()
+      expect(kindAttr?.value?.type).toBe("JSXExpressionContainer")
+
+      const container = kindAttr?.value as JSXExpressionContainer
+      expect(container.expression.type).toBe("ConditionalExpression")
+
+      const conditional = container.expression as ConditionalExpression
+      expect(conditional.test.type).toBe("Identifier")
+      expect((conditional.test as Identifier).name).toBe("isPrimary")
+      expect(conditional.consequent.type).toBe("StringLiteral")
+      expect((conditional.consequent as StringLiteral).value).toBe("primary")
+      expect(conditional.alternate.type).toBe("StringLiteral")
+      expect((conditional.alternate as StringLiteral).value).toBe("secondary")
+    })
+
+    it("should handle conditional with empty string values", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+      const conditionalValue: Conditional = {
+        alternate: "",
+        consequent: "primary",
+        test: "hasTheme",
+      }
+
+      addAttribute({ element, j, name: "kind", value: conditionalValue })
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      expect(kindAttr).not.toBeNull()
+
+      const container = kindAttr?.value as JSXExpressionContainer
+      const conditional = container.expression as ConditionalExpression
+      expect((conditional.consequent as StringLiteral).value).toBe("primary")
+      expect((conditional.alternate as StringLiteral).value).toBe("")
+    })
+
+    it("should handle conditional with same consequent and alternate", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+      const conditionalValue: Conditional = {
+        alternate: "neutral",
+        consequent: "neutral",
+        test: "condition",
+      }
+
+      addAttribute({ element, j, name: "kind", value: conditionalValue })
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      expect(kindAttr).not.toBeNull()
+
+      const container = kindAttr?.value as JSXExpressionContainer
+      const conditional = container.expression as ConditionalExpression
+      expect((conditional.consequent as StringLiteral).value).toBe("neutral")
+      expect((conditional.alternate as StringLiteral).value).toBe("neutral")
+    })
+
+    it("should render conditional attribute correctly in source", () => {
+      const source = j("<Button>Save</Button>")
+      const element = source.find(j.JSXElement).at(0).get().value as JSXElement
+      const conditionalValue: Conditional = {
+        alternate: "secondary",
+        consequent: "primary",
+        test: "isPrimary",
+      }
+
+      addAttribute({ element, j, name: "kind", value: conditionalValue })
+
+      const result = source.toSource()
+      expect(result).toContain('kind={isPrimary ? "primary" : "secondary"}')
+    })
+
+    it("should handle multiple conditional attributes", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+      const kindConditional: Conditional = {
+        alternate: "secondary",
+        consequent: "primary",
+        test: "isPrimary",
+      }
+      const sizeConditional: Conditional = {
+        alternate: "small",
+        consequent: "large",
+        test: "isLarge",
+      }
+
+      addAttribute({ element, j, name: "kind", value: kindConditional })
+      addAttribute({ element, j, name: "size", value: sizeConditional })
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      const sizeAttr = getAttributeFromElement(element, "size")
+
+      expect(kindAttr).not.toBeNull()
+      expect(sizeAttr).not.toBeNull()
+      expect(element.openingElement.attributes).toHaveLength(2)
+    })
+  })
+
+  describe("adding to elements with existing attributes", () => {
+    it("should add attribute to element that already has attributes", () => {
+      const element = createElementFromCode(
+        '<Button onClick={handleClick} className="btn">Save</Button>'
+      )
+
+      addAttribute({ element, j, name: "kind", value: "primary" })
+
+      expect(element.openingElement.attributes).toHaveLength(3)
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      expect(kindAttr).not.toBeNull()
+      expect((kindAttr?.value as StringLiteral)?.value).toBe("primary")
+
+      const onClickAttr = getAttributeFromElement(element, "onClick")
+      const classAttr = getAttributeFromElement(element, "className")
+      expect(onClickAttr).not.toBeNull()
+      expect(classAttr).not.toBeNull()
+    })
+  })
+
+  describe("adding to self-closing elements", () => {
+    it("should add attribute to self-closing element", () => {
+      const element = createElementFromCode("<Button />")
+
+      addAttribute({ element, j, name: "kind", value: "primary" })
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      expect(kindAttr).not.toBeNull()
+      expect((kindAttr?.value as StringLiteral)?.value).toBe("primary")
+    })
+  })
+
+  describe("integration with JSCodeshift", () => {
+    it("should render correctly in transformed source", () => {
+      const source = j("<Button>Save</Button>")
+      const element = source.find(j.JSXElement).at(0).get().value as JSXElement
+
+      addAttribute({ element, j, name: "kind", value: "primary" })
+      addAttribute({ element, j, name: "disabled", value: true })
+
+      const result = source.toSource()
+
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain("disabled={true}")
+      expect(result).toContain("<Button")
+      expect(result).toContain(">Save</Button>")
+    })
+
+    it("should handle complex attribute names", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      addAttribute({ element, j, name: "data-testid", value: "save-button" })
+      addAttribute({ element, j, name: "aria-describedby", value: "help-text" })
+
+      const testIdAttr = getAttributeFromElement(element, "data-testid")
+      const ariaAttr = getAttributeFromElement(element, "aria-describedby")
+
+      expect(testIdAttr).not.toBeNull()
+      expect(ariaAttr).not.toBeNull()
+      expect((testIdAttr?.value as StringLiteral)?.value).toBe("save-button")
+      expect((ariaAttr?.value as StringLiteral)?.value).toBe("help-text")
+    })
+  })
+})

package/src/components/shared/actions/addAttribute.ts

@@ -0,0 +1,65 @@
+import { JSCodeshift, JSXElement } from "jscodeshift"
+
+export interface Conditional {
+  alternate: string
+  consequent: string
+  test: string
+}
+
+function formatValue(value: string | boolean, j: JSCodeshift) {
+  if (typeof value === "string") {
+    return j.stringLiteral(value)
+  } else if (typeof value === "boolean") {
+    return j.jsxExpressionContainer(j.booleanLiteral(value))
+  } else {
+    throw new Error(`Unsupported attribute value type: ${typeof value}`)
+  }
+}
+
+export function addAttribute({
+  element,
+  name,
+  j,
+  value,
+}: {
+  element: JSXElement
+  j: JSCodeshift
+  name: string
+  value: string | boolean | Conditional | null
+}) {
+  if (value === null) return
+  const attributes = element.openingElement.attributes || []
+
+  if (
+    typeof value === "object" &&
+    "test" in value &&
+    "consequent" in value &&
+    "alternate" in value
+  ) {
+    addConditionalAttribute(value, element, j, name)
+    return
+  }
+
+  const formattedValue = formatValue(value, j)
+  attributes.push(j.jsxAttribute(j.jsxIdentifier(name), formattedValue))
+}
+
+function addConditionalAttribute(
+  { test, consequent, alternate }: Conditional,
+  element: JSXElement,
+  j: JSCodeshift,
+  targetAttribute: string
+) {
+  const conditional = j.jsxExpressionContainer(
+    j.conditionalExpression(
+      j.identifier(test),
+      j.stringLiteral(consequent),
+      j.stringLiteral(alternate)
+    )
+  )
+  const attribute = j.jsxAttribute(
+    j.jsxIdentifier(targetAttribute),
+    conditional
+  )
+  element.openingElement.attributes?.push(attribute)
+}

package/src/components/shared/actions/addComment.test.ts

@@ -84,7 +84,7 @@ describe("addComment", () => {
       .at(0)
       .get().value as JSXElement
 
-    const commentText = "TODO: Update this nested button"
+    const commentText = "Update this nested button"
     addComment({
       element: buttonElement,
       j,

package/src/components/shared/actions/addCommentToAttribute.test.ts

@@ -0,0 +1,45 @@
+import jscodeshift, {
+  JSXAttribute,
+  JSXElement,
+  JSXIdentifier,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { addCommentToAttribute } from "./addCommentToAttribute"
+
+const j = jscodeshift.withParser("tsx")
+
+describe("addCommentToAttribute", () => {
+  it("adds comments before attribute if provided", () => {
+    const outerCode = `
+      <div>
+        <Button
+          onClick={() => { console.log('hi')}}
+          kind='secondary'
+          fullWidth
+          {...props}>Save</Button>
+      </div>
+    `
+    const source = j(outerCode)
+    const buttonElement = source
+      .find(j.JSXElement)
+      .filter(
+        (path) =>
+          (path.value.openingElement.name as JSXIdentifier)?.name === "Button"
+      )
+      .at(0)
+      .get().value as JSXElement
+    const attribute = buttonElement.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name.name === "kind"
+    ) as JSXAttribute
+
+    const commentText = "This needs to be updated"
+    addCommentToAttribute({ attribute, j, text: commentText })
+
+    const result = source.toSource()
+
+    expect(result)
+      .toContain(`/* TODO: tapestry-migration (kind): ${commentText} */
+          kind='secondary'`)
+  })
+})

package/src/components/shared/actions/addCommentToAttribute.ts

@@ -0,0 +1,28 @@
+import { JSCodeshift, JSXAttribute, JSXSpreadAttribute } from "jscodeshift"
+
+import { formatComment } from "./addComment"
+
+export function addCommentToAttribute({
+  text,
+  attribute,
+  j,
+}: {
+  attribute: JSXAttribute | JSXSpreadAttribute
+  j: JSCodeshift
+  text: string
+}) {
+  const attributeName =
+    ((attribute.type === "JSXAttribute" && attribute.name.name) as string) ||
+    "spreadAttribute"
+  const comment = j.commentBlock(
+    formatComment(text, attributeName),
+    true,
+    false
+  )
+
+  if (attribute.comments) {
+    attribute.comments.unshift(comment)
+  } else {
+    attribute.comments = [comment]
+  }
+}

package/src/components/shared/actions/addCommentToUnsupportedProps.ts

@@ -0,0 +1,29 @@
+import { JSCodeshift, JSXAttribute, JSXElement } from "jscodeshift"
+
+import { addCommentToAttribute } from "./addCommentToAttribute"
+
+export function addCommentToUnsupportedProps({
+  element,
+  j,
+  props,
+  messageSuffix = () => "",
+}: {
+  element: JSXElement
+  j: JSCodeshift
+  messageSuffix?: (prop: string) => string
+  props: string[]
+}): boolean {
+  const unsupportedAttributes = (
+    element.openingElement.attributes || []
+  ).filter(
+    (attr) =>
+      attr.type === "JSXAttribute" && props.includes(attr.name.name as string)
+  ) as JSXAttribute[]
+
+  unsupportedAttributes.forEach((attribute) => {
+    const propName = attribute.name.name as string
+    const text = `'${propName}' is not supported, please migrate as needed.${messageSuffix(propName)}`
+    addCommentToAttribute({ attribute, j, text })
+  })
+  return unsupportedAttributes.length > 0
+}

package/src/components/shared/actions/convertAttributeFromObjectToJSXElement.test.ts

@@ -0,0 +1,139 @@
+import jscodeshift, {
+  JSXAttribute,
+  JSXElement,
+  JSXExpressionContainer,
+  JSXIdentifier,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { convertAttributeFromObjectToJSXElement } from "./convertAttributeFromObjectToJSXElement"
+
+const j = jscodeshift.withParser("tsx")
+
+function createSource(code: string) {
+  return j(code)
+}
+
+function createElementFromCode(code: string): JSXElement {
+  const source = createSource(`<div>${code}</div>`)
+  return source.find(j.JSXElement).at(0).get().value.children?.[0] as JSXElement
+}
+
+describe("convertAttributeFromObjectToJSXElement", () => {
+  it("should convert object attribute to JSX element", () => {
+    const element = createElementFromCode(
+      '<Button iconLeft={{ name: "star", size: 16 }} />'
+    )
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).not.toBeNull()
+    expect(result?.type).toBe("JSXElement")
+    expect((result?.openingElement.name as JSXIdentifier).name).toBe("Icon")
+    expect(result?.openingElement.selfClosing).toBe(true)
+    expect(result?.openingElement.attributes).toHaveLength(1)
+    expect(result?.openingElement.attributes?.[0].type).toBe(
+      "JSXSpreadAttribute"
+    )
+
+    // Check that the attribute still exists but now has JSX element value
+    const iconLeftAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name?.name === "iconLeft"
+    ) as JSXAttribute
+    expect(iconLeftAttr).toBeDefined()
+    expect(iconLeftAttr?.value?.type).toBe("JSXExpressionContainer")
+    expect(
+      (iconLeftAttr?.value as JSXExpressionContainer)?.expression?.type
+    ).toBe("JSXElement")
+  })
+
+  it("should handle expression container attributes", () => {
+    const element = createElementFromCode("<Button iconLeft={iconProps} />")
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).not.toBeNull()
+    expect(result?.openingElement.attributes).toHaveLength(1)
+    expect(result?.openingElement.attributes?.[0].type).toBe(
+      "JSXSpreadAttribute"
+    )
+
+    // Check that the attribute still exists but now has JSX element value
+    const iconLeftAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name?.name === "iconLeft"
+    ) as JSXAttribute
+    expect(iconLeftAttr).toBeDefined()
+    expect(iconLeftAttr?.value?.type).toBe("JSXExpressionContainer")
+    expect(
+      (iconLeftAttr?.value as JSXExpressionContainer)?.expression?.type
+    ).toBe("JSXElement")
+  })
+
+  it("should return null for empty expression container", () => {
+    const element = createElementFromCode("<Button iconLeft={{}} />")
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    // Should return null since empty object has no props to spread
+    expect(result).toBeNull()
+
+    // Check that the attribute was not modified since no conversion occurred
+    const iconLeftAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name?.name === "iconLeft"
+    ) as JSXAttribute
+    expect(iconLeftAttr).toBeDefined()
+    expect(iconLeftAttr?.value?.type).toBe("JSXExpressionContainer")
+    expect(
+      (iconLeftAttr?.value as JSXExpressionContainer)?.expression?.type
+    ).toBe("ObjectExpression")
+  })
+
+  it("should return null for missing attribute", () => {
+    const element = createElementFromCode("<Button>Save</Button>")
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).toBeNull()
+  })
+
+  it("should return null for attribute with no value", () => {
+    const element = j.jsxElement(
+      j.jsxOpeningElement(
+        j.jsxIdentifier("Button"),
+        [j.jsxAttribute(j.jsxIdentifier("iconLeft"), null)],
+        false
+      ),
+      j.jsxClosingElement(j.jsxIdentifier("Button")),
+      [j.jsxText("Save")]
+    )
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).toBeNull()
+  })
+})

package/src/components/shared/actions/convertAttributeFromObjectToJSXElement.ts

@@ -0,0 +1,81 @@
+import {
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  JSXSpreadAttribute,
+} from "jscodeshift"
+
+import { getAttribute } from "./getAttribute"
+
+export function convertAttributeFromObjectToJSXElement({
+  attributeName,
+  element,
+  elementName,
+  j,
+  stringValueKey,
+}: {
+  attributeName: string
+  element: JSXElement
+  elementName: string
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXElement | null {
+  const attribute = getAttribute({ element, name: attributeName })
+  if (!attribute || !attribute.value) return null
+
+  const elementProps = buildProps({ attribute, j, stringValueKey })
+  if (!elementProps) return null
+
+  const newElement = j.jsxElement(
+    j.jsxOpeningElement(j.jsxIdentifier(elementName), elementProps, true),
+    null,
+    []
+  )
+
+  attribute.value = j.jsxExpressionContainer(newElement)
+
+  return newElement
+}
+
+function buildProps({
+  attribute,
+  j,
+  stringValueKey,
+}: {
+  attribute: JSXAttribute
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXSpreadAttribute[] | null {
+  if (!attribute.value) return null
+  if (attribute.value.type == "StringLiteral")
+    return stringToProps({ attribute, j, stringValueKey })
+  if (attribute.value.type !== "JSXExpressionContainer") return null
+  if (attribute.value.expression.type === "JSXEmptyExpression") return null
+  if (
+    attribute.value.expression.type === "ObjectExpression" &&
+    attribute.value.expression.properties.length === 0
+  )
+    return null
+  return [j.jsxSpreadAttribute(attribute.value.expression)]
+}
+
+function stringToProps({
+  attribute,
+  j,
+  stringValueKey,
+}: {
+  attribute: JSXAttribute
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXSpreadAttribute[] | null {
+  if (!attribute.value) return null
+  if (stringValueKey === undefined) return null
+
+  return [
+    j.jsxSpreadAttribute(
+      j.objectExpression([
+        j.objectProperty(j.identifier(stringValueKey), attribute.value),
+      ])
+    ),
+  ]
+}