@planningcenter/tapestry-migration-cli 2.1.1-rc.2 → 2.1.1-rc.3

package/src/components/shared/conditions/hasAttribute.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest"
+
+import { hasAttribute } from "./hasAttribute"
+import { createJSXElement } from "./helpers/createJSXElement"
+
+describe("hasAttribute", () => {
+  it("should return true when attribute exists", () => {
+    const condition = hasAttribute("href")
+    const element = createJSXElement(' href="/test"')
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return false when attribute does not exist", () => {
+    const condition = hasAttribute("href")
+    const element = createJSXElement(' className="test"')
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should return true for attribute without value", () => {
+    const condition = hasAttribute("disabled")
+    const element = createJSXElement(" disabled")
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return false for empty element", () => {
+    const condition = hasAttribute("href")
+    const element = createJSXElement("")
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should handle multiple attributes", () => {
+    const condition = hasAttribute("onClick")
+    const element = createJSXElement(
+      ' className="test" onClick={handleClick} disabled'
+    )
+
+    expect(condition(element)).toBe(true)
+  })
+})

package/src/components/shared/conditions/hasAttribute.ts

@@ -0,0 +1,18 @@
+import { JSXElement } from "jscodeshift"
+
+import { TransformCondition } from "../types"
+
+/**
+ * Helper function to create a condition that checks for the presence of an attribute
+ */
+export function hasAttribute(attributeName: string): TransformCondition {
+  return (element: JSXElement) => {
+    const attributes = element.openingElement.attributes || []
+    return attributes.some(
+      (attr) =>
+        attr.type === "JSXAttribute" &&
+        attr.name?.type === "JSXIdentifier" &&
+        attr.name.name === attributeName
+    )
+  }
+}

package/src/components/shared/conditions/hasAttributeValue.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest"
+
+import { hasAttributeValue } from "./hasAttributeValue"
+import { createJSXElement } from "./helpers/createJSXElement"
+
+describe("hasAttributeValue", () => {
+  it("should return true when attribute has exact string value", () => {
+    const condition = hasAttributeValue("as", "a")
+    const element = createJSXElement(' as="a"')
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return false when attribute has different value", () => {
+    const condition = hasAttributeValue("as", "a")
+    const element = createJSXElement(' as="button"')
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should return false when attribute does not exist", () => {
+    const condition = hasAttributeValue("as", "a")
+    const element = createJSXElement(' className="test"')
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should return false when attribute exists but has no value", () => {
+    const condition = hasAttributeValue("disabled", "true")
+    const element = createJSXElement(" disabled")
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should return false for expression values", () => {
+    const condition = hasAttributeValue("onClick", "handleClick")
+    const element = createJSXElement(" onClick={handleClick}")
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should handle multiple attributes with different values", () => {
+    const condition = hasAttributeValue("type", "submit")
+    const element = createJSXElement(' className="test" type="submit" disabled')
+
+    expect(condition(element)).toBe(true)
+  })
+})

package/src/components/shared/conditions/hasAttributeValue.ts

@@ -0,0 +1,23 @@
+import { JSXElement } from "jscodeshift"
+
+import { TransformCondition } from "../types"
+
+/**
+ * Helper function to create a condition that checks for an attribute with a specific value
+ */
+export function hasAttributeValue(
+  attributeName: string,
+  value: string
+): TransformCondition {
+  return (element: JSXElement) => {
+    const attributes = element.openingElement.attributes || []
+    return attributes.some(
+      (attr) =>
+        attr.type === "JSXAttribute" &&
+        attr.name?.type === "JSXIdentifier" &&
+        attr.name.name === attributeName &&
+        attr.value?.type === "StringLiteral" &&
+        attr.value.value === value
+    )
+  }
+}

package/src/components/shared/conditions/helpers/createJSXElement.ts

@@ -0,0 +1,9 @@
+import jscodeshift, { JSXElement } from "jscodeshift"
+
+const j = jscodeshift.withParser("tsx")
+
+export function createJSXElement(attributes: string): JSXElement {
+  const code = `<Button${attributes}>Content</Button>`
+  const ast = j(code)
+  return ast.find(j.JSXElement).get().value as JSXElement
+}

package/src/components/shared/conditions/index.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest"
+
+import { andConditions } from "./andConditions"
+import { hasAttribute } from "./hasAttribute"
+import { hasAttributeValue } from "./hasAttributeValue"
+import { createJSXElement } from "./helpers/createJSXElement"
+import { orConditions } from "./orConditions"
+
+describe("transformConfig", () => {
+  describe("complex condition combinations", () => {
+    it("should handle nested and/or conditions", () => {
+      const condition = andConditions(
+        hasAttribute("className"),
+        orConditions(hasAttribute("href"), hasAttribute("onClick"))
+      )
+
+      // Should match className + href
+      const element1 = createJSXElement(' className="btn" href="/test"')
+      expect(condition(element1)).toBe(true)
+
+      // Should match className + onClick
+      const element2 = createJSXElement(' className="btn" onClick={handle}')
+      expect(condition(element2)).toBe(true)
+
+      // Should not match (missing className)
+      const element3 = createJSXElement(' href="/test"')
+      expect(condition(element3)).toBe(false)
+
+      // Should not match (missing href/onClick)
+      const element4 = createJSXElement(' className="btn"')
+      expect(condition(element4)).toBe(false)
+    })
+
+    it("should handle or of and conditions", () => {
+      const condition = orConditions(
+        andConditions(
+          hasAttribute("href"),
+          hasAttributeValue("target", "_blank")
+        ),
+        andConditions(
+          hasAttribute("onClick"),
+          hasAttributeValue("type", "button")
+        )
+      )
+
+      // Should match first AND condition
+      const element1 = createJSXElement(' href="/test" target="_blank"')
+      expect(condition(element1)).toBe(true)
+
+      // Should match second AND condition
+      const element2 = createJSXElement(' onClick={handle} type="button"')
+      expect(condition(element2)).toBe(true)
+
+      // Should not match (partial first condition)
+      const element3 = createJSXElement(' href="/test" target="_self"')
+      expect(condition(element3)).toBe(false)
+
+      // Should not match (partial second condition)
+      const element4 = createJSXElement(' onClick={handle} type="submit"')
+      expect(condition(element4)).toBe(false)
+    })
+  })
+})

package/src/components/shared/conditions/orConditions.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest"
+
+import { hasAttribute } from "./hasAttribute"
+import { hasAttributeValue } from "./hasAttributeValue"
+import { createJSXElement } from "./helpers/createJSXElement"
+import { orConditions } from "./orConditions"
+
+describe("orConditions", () => {
+  it("should return true when at least one condition is met", () => {
+    const condition = orConditions(
+      hasAttribute("href"),
+      hasAttribute("onClick")
+    )
+    const element = createJSXElement(' href="/test"')
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return true when all conditions are met", () => {
+    const condition = orConditions(
+      hasAttribute("href"),
+      hasAttribute("onClick")
+    )
+    const element = createJSXElement(' href="/test" onClick={handleClick}')
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return false when no conditions are met", () => {
+    const condition = orConditions(
+      hasAttribute("href"),
+      hasAttribute("onClick")
+    )
+    const element = createJSXElement(' className="test"')
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should handle single condition", () => {
+    const condition = orConditions(hasAttribute("disabled"))
+    const element = createJSXElement(" disabled")
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should handle empty conditions (return false)", () => {
+    const condition = orConditions()
+    const element = createJSXElement("")
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should handle mixed attribute and value conditions", () => {
+    const condition = orConditions(
+      hasAttributeValue("type", "submit"),
+      hasAttribute("href"),
+      hasAttributeValue("role", "button")
+    )
+
+    // Should match type="submit"
+    const element1 = createJSXElement(' type="submit"')
+    expect(condition(element1)).toBe(true)
+
+    // Should match href
+    const element2 = createJSXElement(' href="/test"')
+    expect(condition(element2)).toBe(true)
+
+    // Should match role="button"
+    const element3 = createJSXElement(' role="button"')
+    expect(condition(element3)).toBe(true)
+
+    // Should not match
+    const element4 = createJSXElement(' className="test" type="button"')
+    expect(condition(element4)).toBe(false)
+  })
+})

package/src/components/shared/conditions/orConditions.ts

@@ -0,0 +1,13 @@
+import { JSXElement } from "jscodeshift"
+
+import { TransformCondition } from "../types"
+
+/**
+ * Helper function to combine multiple conditions with OR logic
+ */
+export function orConditions(
+  ...conditions: TransformCondition[]
+): TransformCondition {
+  return (element: JSXElement) =>
+    conditions.some((condition) => condition(element))
+}

package/src/components/shared/findAttribute.ts

@@ -0,0 +1,15 @@
+import { JSXAttribute, JSXOpeningElement } from "jscodeshift"
+
+/**
+ * Finds an attribute by name in a JSX element's attributes array
+ */
+export function findAttribute(
+  attributes: JSXOpeningElement["attributes"],
+  attributeName: string
+): JSXAttribute | undefined {
+  if (!attributes) return
+
+  return attributes.find(
+    (attr) => attr.type === "JSXAttribute" && attr.name?.name === attributeName
+  ) as JSXAttribute | undefined
+}

package/src/components/shared/transformFactories/attributeTransformFactory.test.ts

@@ -0,0 +1,88 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { hasAttribute } from "../conditions/hasAttribute"
+import { attributeTransformFactory } from "./attributeTransformFactory"
+
+const j = jscodeshift.withParser("tsx")
+
+describe("attributeTransformFactory", () => {
+  it("should create a working attribute transform", () => {
+    const transform = attributeTransformFactory({
+      condition: hasAttribute("title"),
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+      transform: (element) => {
+        const attributes = element.openingElement.attributes || []
+        const titleAttr = attributes.find(
+          (attr) => attr.type === "JSXAttribute" && attr.name?.name === "title"
+        )
+        if (titleAttr?.type === "JSXAttribute") {
+          titleAttr.name.name = "label"
+          return true
+        }
+        return false
+      },
+    })
+    const fileInfo = {
+      path: "test.tsx",
+      source: `import { Button } from "@planningcenter/tapestry-react";<Button title="Save">Test</Button>`,
+    }
+    const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+    const result = transform(fileInfo, api, {})
+    expect(result).toContain('label="Save"')
+    expect(result).not.toContain("title")
+  })
+
+  it("should return null when target component not imported", () => {
+    const transform = attributeTransformFactory({
+      condition: hasAttribute("title"),
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+      transform: () => true,
+    })
+    const fileInfo = {
+      path: "test.tsx",
+      source: `import { Link } from "@planningcenter/tapestry-react";<Link title="Test">Test</Link>`,
+    }
+    const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+    const result = transform(fileInfo, api, {})
+    expect(result).toBe(null)
+  })
+
+  it("should return null when condition not met", () => {
+    const transform = attributeTransformFactory({
+      condition: hasAttribute("nonexistent"),
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+      transform: () => true,
+    })
+    const fileInfo = {
+      path: "test.tsx",
+      source: `import { Button } from "@planningcenter/tapestry-react";<Button>Test</Button>`,
+    }
+    const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+    const result = transform(fileInfo, api, {})
+    expect(result).toBe(null)
+  })
+
+  it("should return null when transform returns false", () => {
+    const transform = attributeTransformFactory({
+      condition: hasAttribute("title"),
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+      transform: () => false,
+    })
+    const fileInfo = {
+      path: "test.tsx",
+      source: `import { Button } from "@planningcenter/tapestry-react";<Button title="Test">Test</Button>`,
+    }
+    const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+    const result = transform(fileInfo, api, {})
+    expect(result).toBe(null)
+  })
+})

package/src/components/shared/transformFactories/attributeTransformFactory.ts

@@ -0,0 +1,51 @@
+import { JSCodeshift, JSXElement, Transform } from "jscodeshift"
+
+import { TransformCondition } from "../types"
+import { getImportName } from "./helpers/manageImports"
+
+/**
+ * Main function to create an attribute transform based on configuration
+ */
+export function attributeTransformFactory(config: {
+  /** Condition that must be met for the transform to occur */
+  condition: TransformCondition
+  /** Component to target for attribute transformation */
+  targetComponent: string
+  /** Package the target component is imported from */
+  targetPackage: string
+  /** Function that performs the actual attribute transformation */
+  transform: (element: JSXElement, j: JSCodeshift) => boolean
+}): Transform {
+  return (fileInfo, api) => {
+    const j = api.jscodeshift
+    const source = j(fileInfo.source)
+    let hasChanges = false
+
+    // Get the local name of the target component
+    const targetComponentName = getImportName(
+      config.targetComponent,
+      config.targetPackage,
+      { j, source }
+    )
+
+    // Only proceed if target component is imported
+    if (!targetComponentName) {
+      return null
+    }
+
+    // Find and transform matching JSX elements
+    source
+      .find(j.JSXOpeningElement, { name: { name: targetComponentName } })
+      .forEach((path) => {
+        const element = path.parent.value
+
+        if (config.condition(element)) {
+          if (config.transform(element, j)) {
+            hasChanges = true
+          }
+        }
+      })
+
+    return hasChanges ? source.toSource() : null
+  }
+}

package/src/components/shared/transformFactories/componentTransformFactory.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from "vitest"
+
+describe("componentTransformFactory", () => {
+  it("is a placeholder test", () => {
+    expect(true).toBe(true)
+  })
+})

package/src/components/shared/transformFactories/componentTransformFactory.ts

@@ -0,0 +1,77 @@
+import { Transform } from "jscodeshift"
+
+import { transformElementName } from "../actions/transformElementName"
+import { TransformCondition } from "../types"
+import {
+  getImportName,
+  hasConflictingImport,
+  manageImports,
+} from "./helpers/manageImports"
+
+/**
+ * Main function to create a component transform based on configuration
+ */
+
+export function componentTransformFactory(config: {
+  /** Condition that must be met for the transform to occur */
+  condition: TransformCondition
+  /** Optional alias to use if target component conflicts with existing imports */
+  conflictAlias?: string
+  /** The source component name to transform from */
+  fromComponent: string
+  /** The package to import the source component from */
+  fromPackage: string
+  /** The target component name to transform to */
+  toComponent: string
+  /** The package to import the target component from */
+  toPackage: string
+}): Transform {
+  return (fileInfo, api) => {
+    const j = api.jscodeshift
+    const source = j(fileInfo.source)
+    let hasChanges = false
+
+    // Get the local name of the source component
+    const sourceComponentName = getImportName(
+      config.fromComponent,
+      config.fromPackage,
+      { j, source }
+    )
+
+    // Only proceed if source component is imported
+    if (!sourceComponentName) {
+      return null
+    }
+
+    // Check for conflicting imports
+    const hasConflict = hasConflictingImport(
+      config.toComponent,
+      config.toPackage,
+      { j, source }
+    )
+
+    const targetComponentName = hasConflict
+      ? config.conflictAlias || `T${config.toComponent}`
+      : config.toComponent
+
+    // Transform matching JSX elements
+    source
+      .find(j.JSXOpeningElement, { name: { name: sourceComponentName } })
+      .forEach((path) => {
+        const element = path.parent.value
+
+        if (config.condition(element)) {
+          if (transformElementName(path, targetComponentName)) {
+            hasChanges = true
+          }
+        }
+      })
+
+    if (hasChanges) {
+      // Handle import management
+      manageImports(source, config, sourceComponentName, targetComponentName, j)
+    }
+
+    return hasChanges ? source.toSource() : null
+  }
+}

package/src/components/shared/{componentTransformUtilities.test.ts → transformFactories/helpers/manageImports.test.ts}

@@ -7,8 +7,7 @@ import {
   getImportName,
   hasConflictingImport,
   removeImportFromDeclaration,
-  transformElementName,
-} from "./componentTransformUtilities"
+} from "./manageImports"
 
 const j = jscodeshift.withParser("tsx")
 
@@ -176,59 +175,6 @@ describe("componentTransformUtilities", () => {
     })
   })
 
-  describe("transformElementName", () => {
-    it("should transform JSX element name", () => {
-      const code = `<Button>Click me</Button>`
-      const source = j(code)
-      const elementPath = source.find(j.JSXOpeningElement).at(0)
-
-      const result = transformElementName(elementPath.get(), "Link")
-
-      expect(result).toBe(true)
-      expect(source.toSource()).toContain("<Link>Click me</Link>")
-    })
-
-    it("should transform both opening and closing tags", () => {
-      const code = `<Button className="test">Content</Button>`
-      const source = j(code)
-      const elementPath = source.find(j.JSXOpeningElement).at(0)
-
-      const result = transformElementName(elementPath.get(), "Link")
-
-      expect(result).toBe(true)
-      const output = source.toSource()
-      expect(output).toContain('<Link className="test">')
-      expect(output).toContain("</Link>")
-    })
-
-    it("should handle self-closing tags", () => {
-      const code = `<Button />`
-      const source = j(code)
-      const elementPath = source.find(j.JSXOpeningElement).at(0)
-
-      const result = transformElementName(elementPath.get(), "Link")
-
-      expect(result).toBe(true)
-      expect(source.toSource()).toContain("<Link />")
-    })
-
-    it("should preserve all attributes", () => {
-      const code = `<Button className="test" onClick={handler} disabled>Content</Button>`
-      const source = j(code)
-      const elementPath = source.find(j.JSXOpeningElement).at(0)
-
-      const result = transformElementName(elementPath.get(), "Link")
-
-      expect(result).toBe(true)
-      const output = source.toSource()
-      expect(output).toContain('className="test"')
-      expect(output).toContain("onClick={handler}")
-      expect(output).toContain("disabled")
-      expect(output).toContain("<Link")
-      expect(output).toContain("</Link>")
-    })
-  })
-
   describe("addImportToExisting", () => {
     it("should add new import to existing import declaration", () => {
       const code = `import { Button } from "@planningcenter/tapestry-react"`