@planningcenter/tapestry-migration-cli 2.3.0-rc.4 → 2.3.0-rc.6

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/getAttributeValue.test.ts

@@ -0,0 +1,261 @@
+import jscodeshift, {
+  JSXAttribute,
+  JSXElement,
+  JSXIdentifier,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { getAttributeValue } from "./getAttributeValue"
+
+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("getAttributeValue", () => {
+  describe("string literal values", () => {
+    it("should extract string literal value", () => {
+      const element = createElementFromCode(
+        '<Button kind="primary">Save</Button>'
+      )
+      const kindAttribute = getAttributeFromElement(element, "kind")
+
+      const value = getAttributeValue({ attribute: kindAttribute, j })
+
+      expect(value).toBe("primary")
+    })
+
+    it("should handle empty string literal", () => {
+      const element = createElementFromCode('<Button title="">Save</Button>')
+      const titleAttribute = getAttributeFromElement(element, "title")
+
+      const value = getAttributeValue({ attribute: titleAttribute, j })
+
+      expect(value).toBe("")
+    })
+
+    it("should handle strings with special characters", () => {
+      const element = createElementFromCode(
+        '<Button aria-label="Save & Continue">Save</Button>'
+      )
+      const ariaAttribute = getAttributeFromElement(element, "aria-label")
+
+      const value = getAttributeValue({ attribute: ariaAttribute, j })
+
+      expect(value).toBe("Save & Continue")
+    })
+
+    it("should handle strings with quotes", () => {
+      const element = createElementFromCode(
+        "<Button title='Say \"Hello\"'>Save</Button>"
+      )
+      const titleAttribute = getAttributeFromElement(element, "title")
+
+      const value = getAttributeValue({ attribute: titleAttribute, j })
+
+      expect(value).toBe('Say "Hello"')
+    })
+  })
+
+  describe("expression container values", () => {
+    it("should convert boolean expression to source code", () => {
+      const element = createElementFromCode(
+        "<Button disabled={true}>Save</Button>"
+      )
+      const disabledAttribute = getAttributeFromElement(element, "disabled")
+
+      const value = getAttributeValue({ attribute: disabledAttribute, j })
+
+      expect(value).toBe("{true}")
+    })
+
+    it("should convert variable expression to source code", () => {
+      const element = createElementFromCode(
+        "<Button onClick={handleClick}>Save</Button>"
+      )
+      const onClickAttribute = getAttributeFromElement(element, "onClick")
+
+      const value = getAttributeValue({ attribute: onClickAttribute, j })
+
+      expect(value).toBe("{handleClick}")
+    })
+
+    it("should convert complex expression to source code", () => {
+      const element = createElementFromCode(
+        '<Button style={{ color: "red", fontSize: 16 }}>Save</Button>'
+      )
+      const styleAttribute = getAttributeFromElement(element, "style")
+
+      const value = getAttributeValue({ attribute: styleAttribute, j })
+
+      expect(value).toContain("color")
+      expect(value).toContain("red")
+      expect(value).toContain("fontSize")
+      expect(value).toContain("16")
+    })
+
+    it("should handle function call expressions", () => {
+      const element = createElementFromCode(
+        '<Button className={getButtonClass("primary")}>Save</Button>'
+      )
+      const classAttribute = getAttributeFromElement(element, "className")
+
+      const value = getAttributeValue({ attribute: classAttribute, j })
+
+      expect(value).toBe('{getButtonClass("primary")}')
+    })
+
+    it("should handle template literal expressions", () => {
+      const element = createElementFromCode(
+        "<Button className={`btn-${variant}`}>Save</Button>"
+      )
+      const classAttribute = getAttributeFromElement(element, "className")
+
+      const value = getAttributeValue({ attribute: classAttribute, j })
+
+      expect(value).toBe("{`btn-${variant}`}")
+    })
+
+    it("should handle ternary expressions", () => {
+      const element = createElementFromCode(
+        "<Button disabled={loading ? true : false}>Save</Button>"
+      )
+      const disabledAttribute = getAttributeFromElement(element, "disabled")
+
+      const value = getAttributeValue({ attribute: disabledAttribute, j })
+
+      expect(value).toBe("{loading ? true : false}")
+    })
+  })
+
+  describe("null and undefined attributes", () => {
+    it("should return null for null attribute", () => {
+      const value = getAttributeValue({ attribute: null, j })
+
+      expect(value).toBeNull()
+    })
+
+    it("should return null for undefined attribute", () => {
+      const value = getAttributeValue({ attribute: undefined, j })
+
+      expect(value).toBeNull()
+    })
+  })
+
+  describe("attributes without values", () => {
+    it("should return null for boolean attribute without value", () => {
+      const element = createElementFromCode("<Button disabled>Save</Button>")
+      const disabledAttribute = getAttributeFromElement(element, "disabled")
+
+      const value = getAttributeValue({ attribute: disabledAttribute, j })
+
+      expect(value).toBeNull()
+    })
+
+    it("should handle attribute with null value", () => {
+      const mockAttribute = {
+        name: { name: "test", type: "JSXIdentifier" },
+        type: "JSXAttribute",
+        value: null,
+      } as JSXAttribute
+
+      const value = getAttributeValue({ attribute: mockAttribute, j })
+
+      expect(value).toBeNull()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle numeric expressions", () => {
+      const element = createElementFromCode(
+        "<Button tabIndex={0}>Save</Button>"
+      )
+      const tabIndexAttribute = getAttributeFromElement(element, "tabIndex")
+
+      const value = getAttributeValue({ attribute: tabIndexAttribute, j })
+
+      expect(value).toBe("{0}")
+    })
+
+    it("should handle array expressions", () => {
+      const element = createElementFromCode(
+        "<Button data={[1, 2, 3]}>Save</Button>"
+      )
+      const dataAttribute = getAttributeFromElement(element, "data")
+
+      const value = getAttributeValue({ attribute: dataAttribute, j })
+
+      expect(value).toBe("{[1, 2, 3]}")
+    })
+
+    it("should handle nested object expressions", () => {
+      const element = createElementFromCode(
+        '<Button config={{ theme: { primary: "blue" } }}>Save</Button>'
+      )
+      const configAttribute = getAttributeFromElement(element, "config")
+
+      const value = getAttributeValue({ attribute: configAttribute, j })
+
+      expect(value).toContain("theme")
+      expect(value).toContain("primary")
+      expect(value).toContain("blue")
+    })
+
+    it("should handle JSX element expressions", () => {
+      const element = createElementFromCode(
+        '<Button icon={<Icon name="save" />}>Save</Button>'
+      )
+      const iconAttribute = getAttributeFromElement(element, "icon")
+
+      const value = getAttributeValue({ attribute: iconAttribute, j })
+
+      expect(value).toBe('{<Icon name="save" />}')
+    })
+  })
+
+  describe("integration scenarios", () => {
+    it("should handle mixed attribute types on same element", () => {
+      const element = createElementFromCode(
+        '<Button kind="primary" disabled={true} onClick={handleClick} data-testid="save-btn">Save</Button>'
+      )
+
+      const kindValue = getAttributeValue({
+        attribute: getAttributeFromElement(element, "kind"),
+        j,
+      })
+      const disabledValue = getAttributeValue({
+        attribute: getAttributeFromElement(element, "disabled"),
+        j,
+      })
+      const onClickValue = getAttributeValue({
+        attribute: getAttributeFromElement(element, "onClick"),
+        j,
+      })
+      const testIdValue = getAttributeValue({
+        attribute: getAttributeFromElement(element, "data-testid"),
+        j,
+      })
+
+      expect(kindValue).toBe("primary")
+      expect(disabledValue).toBe("{true}")
+      expect(onClickValue).toBe("{handleClick}")
+      expect(testIdValue).toBe("save-btn")
+    })
+  })
+})

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

@@ -0,0 +1,15 @@
+import { JSCodeshift, JSXAttribute } from "jscodeshift"
+
+export function getAttributeValue({
+  attribute,
+  j,
+}: {
+  attribute: JSXAttribute | null | undefined
+  j: JSCodeshift
+}) {
+  return attribute && attribute.value
+    ? attribute?.value?.type === "StringLiteral"
+      ? attribute.value.value
+      : j(attribute.value).toSource()
+    : null
+}