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

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

@@ -0,0 +1,18 @@
+import { JSCodeshift, JSXAttribute, JSXElement } from "jscodeshift"
+
+export function getAttribute({
+  element,
+
+  name,
+}: {
+  element: JSXElement
+  name: string
+}) {
+  const attributes = element.openingElement.attributes || []
+  const attribute = attributes.find(
+    (attr) => attr.type === "JSXAttribute" && attr.name.name === name
+  )
+  if (!attribute) return
+
+  return attribute as JSXAttribute
+}

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
+}

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

@@ -0,0 +1,57 @@
+import {
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  JSXSpreadAttribute,
+} from "jscodeshift"
+
+import { getAttribute } from "./getAttribute"
+
+export function getAttributeValueAsProps({
+  j,
+  element,
+  name,
+  stringValueKey,
+}: {
+  element: JSXElement
+  j: JSCodeshift
+  name: string
+  stringValueKey?: string
+}): JSXSpreadAttribute[] {
+  const attribute = getAttribute({ element, name })
+  if (attribute && attribute.value) {
+    if (attribute.value.type === "StringLiteral") {
+      return stringToProps({ attribute, j, stringValueKey })
+    }
+    if (attribute.value.type === "JSXExpressionContainer") {
+      if (attribute.value.expression.type !== "JSXEmptyExpression") {
+        return [j.jsxSpreadAttribute(attribute.value.expression)]
+      }
+    } else {
+      return [j.jsxSpreadAttribute(attribute.value)]
+    }
+  }
+
+  return []
+}
+
+function stringToProps({
+  attribute,
+  j,
+  stringValueKey,
+}: {
+  attribute: JSXAttribute
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXSpreadAttribute[] {
+  if (!attribute.value) return []
+  if (stringValueKey === undefined) return []
+
+  return [
+    j.jsxSpreadAttribute(
+      j.objectExpression([
+        j.objectProperty(j.identifier(stringValueKey), attribute.value),
+      ])
+    ),
+  ]
+}

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

@@ -0,0 +1,7 @@
+import { JSXElement, JSXSpreadAttribute } from "jscodeshift"
+
+export function getSpreadProps(element: JSXElement): JSXSpreadAttribute[] {
+  return (element.openingElement.attributes || []).filter(
+    (attr) => attr.type === "JSXSpreadAttribute"
+  )
+}

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

@@ -0,0 +1,7 @@
+import { JSXElement } from "jscodeshift"
+
+export function hasSpreadProps(element: JSXElement): boolean {
+  return (element.openingElement.attributes || []).some(
+    (attr) => attr.type === "JSXSpreadAttribute"
+  )
+}

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

@@ -0,0 +1,7 @@
+import { JSXElement } from "jscodeshift"
+
+export function removeChildren(element: JSXElement) {
+  element.children = []
+  element.closingElement = null
+  element.openingElement.selfClosing = true
+}

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

@@ -0,0 +1,280 @@
+import jscodeshift, {
+  JSXAttribute,
+  JSXElement,
+  JSXIdentifier,
+  StringLiteral,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { removeDuplicateKeys } from "./removeDuplicateKeys"
+
+const j = jscodeshift.withParser("tsx")
+
+function buildSourceAndElement(code: string) {
+  const source = j(`<div>${code}</div>`)
+  const element = source.find(j.JSXElement).at(0).get().value
+    .children?.[0] as JSXElement
+  return { element, source }
+}
+
+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
+  )
+}
+
+function getAttributeNames(element: JSXElement): string[] {
+  const attributes = element.openingElement.attributes || []
+  return attributes
+    .filter((attr) => attr.type === "JSXAttribute")
+    .map((attr) => (attr as JSXAttribute).name?.name || "")
+    .filter(Boolean) as string[]
+}
+
+describe("removeDuplicateKeys", () => {
+  describe("elements with duplicate attributes", () => {
+    it("should remove duplicate string attributes, keeping the first occurrence", () => {
+      const { source, element } = buildSourceAndElement(
+        '<Button kind="primary" disabled kind="secondary">Save</Button>'
+      )
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(true)
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual(["kind", "disabled"])
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      expect(kindAttr?.value?.type).toBe("StringLiteral")
+      expect((kindAttr?.value as StringLiteral)?.value).toBe("primary")
+    })
+
+    it("should handle multiple sets of duplicate attributes", () => {
+      const { source, element } = buildSourceAndElement(
+        '<Button kind="primary" size="large" kind="secondary" disabled size="small">Save</Button>'
+      )
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(true)
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual(["kind", "size", "disabled"])
+
+      const kindAttr = getAttributeFromElement(element, "kind")
+      const sizeAttr = getAttributeFromElement(element, "size")
+      expect((kindAttr?.value as StringLiteral)?.value).toBe("primary")
+      expect((sizeAttr?.value as StringLiteral)?.value).toBe("large")
+    })
+
+    it("should handle duplicate boolean attributes", () => {
+      const { source, element } = buildSourceAndElement(
+        "<Button disabled loading disabled>Save</Button>"
+      )
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(true)
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual(["disabled", "loading"])
+    })
+
+    it("should handle duplicate expression attributes", () => {
+      const { source, element } = buildSourceAndElement(
+        "<Button onClick={handleClick} disabled={true} onClick={handleOtherClick}>Save</Button>"
+      )
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(true)
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual(["onClick", "disabled"])
+
+      const onClickAttr = getAttributeFromElement(element, "onClick")
+      expect(onClickAttr?.value?.type).toBe("JSXExpressionContainer")
+    })
+
+    it("should preserve attribute order for non-duplicates", () => {
+      const { source, element } = buildSourceAndElement(
+        '<Button aria-label="Save" kind="primary" data-testid="btn" kind="secondary" className="btn">Save</Button>'
+      )
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(true)
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual([
+        "aria-label",
+        "kind",
+        "data-testid",
+        "className",
+      ])
+    })
+  })
+
+  describe("elements without duplicate attributes", () => {
+    it("should return false when no duplicates exist", () => {
+      const { source, element } = buildSourceAndElement(
+        '<Button kind="primary" size="large" disabled>Save</Button>'
+      )
+      const initialAttributeCount =
+        element.openingElement.attributes?.length || 0
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(false)
+      expect(element.openingElement.attributes).toHaveLength(
+        initialAttributeCount
+      )
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual(["kind", "size", "disabled"])
+    })
+
+    it("should handle single attribute elements", () => {
+      const { source, element } = buildSourceAndElement(
+        '<Button kind="primary">Save</Button>'
+      )
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(false)
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual(["kind"])
+    })
+
+    it("should handle elements with no attributes", () => {
+      const { source, element } = buildSourceAndElement("<Button>Save</Button>")
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(false)
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual([])
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle JSX spread attributes (ignore them)", () => {
+      const { source, element } = buildSourceAndElement(
+        '<Button kind="primary" kind="secondary">Save</Button>'
+      )
+      const spreadAttr = j.jsxSpreadAttribute(j.identifier("props"))
+      element.openingElement.attributes?.push(spreadAttr)
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(2)
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual(["kind"])
+    })
+
+    it("should handle elements with only spread attributes", () => {
+      const { source, element } = buildSourceAndElement("<Button>Save</Button>")
+      const spreadAttr1 = j.jsxSpreadAttribute(j.identifier("props1"))
+      const spreadAttr2 = j.jsxSpreadAttribute(j.identifier("props2"))
+      element.openingElement.attributes = [spreadAttr1, spreadAttr2]
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(false)
+      expect(element.openingElement.attributes).toHaveLength(2)
+    })
+
+    it("should handle elements with mixed attribute types", () => {
+      const { source, element } = buildSourceAndElement(
+        '<Button kind="primary">Save</Button>'
+      )
+
+      const spreadAttr = j.jsxSpreadAttribute(j.identifier("otherProps"))
+      element.openingElement.attributes?.push(spreadAttr)
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(false)
+      expect(element.openingElement.attributes).toHaveLength(2)
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual(["kind"])
+    })
+
+    it("should handle many duplicate attributes efficiently", () => {
+      const { source, element } = buildSourceAndElement(
+        '<Button kind="1" kind="2" kind="3" kind="4" kind="5" size="1" size="2" size="3">Save</Button>'
+      )
+      const initialCount = element.openingElement.attributes?.length || 0
+
+      const result = removeDuplicateKeys(element, { j, source })
+
+      expect(result).toBe(true)
+
+      const attributes = getAttributeNames(element)
+      expect(attributes).toEqual(["kind", "size"])
+      expect(element.openingElement.attributes?.length).toBe(2)
+      expect(initialCount).toBeGreaterThan(2)
+    })
+  })
+
+  describe("integration with JSCodeshift", () => {
+    it("should work correctly when element is part of a larger AST", () => {
+      const source = j(`
+        <div>
+          <Button kind="primary" onClick={handleClick} kind="secondary">Save</Button>
+          <Button size="large">Cancel</Button>
+        </div>
+      `)
+
+      const buttonElements = source
+        .find(j.JSXElement)
+        .filter(
+          (path) =>
+            (path.value.openingElement.name as JSXIdentifier)?.name === "Button"
+        )
+
+      const firstButton = buttonElements.at(0).get().value as JSXElement
+      const result = removeDuplicateKeys(firstButton, { j, source })
+
+      expect(result).toBe(true)
+
+      const attributes = getAttributeNames(firstButton)
+      expect(attributes).toEqual(["kind", "onClick"])
+
+      const rendered = source.toSource()
+      expect(rendered).toContain('kind="primary"')
+      expect(rendered).not.toContain('kind="secondary"')
+      expect(rendered).toContain("onClick={handleClick}")
+      expect(rendered).toContain('size="large"')
+    })
+
+    it("should maintain proper JSX structure after removing duplicates", () => {
+      const { source, element } = buildSourceAndElement(
+        '<Button kind="primary" disabled kind="secondary" loading>Text</Button>'
+      )
+      removeDuplicateKeys(element, { j, source })
+
+      const result = source.toSource()
+
+      expect(result).toContain("<Button")
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("loading")
+      expect(result).toContain(">Text</Button>")
+      expect(result).not.toContain('kind="secondary"')
+    })
+  })
+})