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

package/src/components/shared/getTapestryReactImportName.ts

@@ -0,0 +1,35 @@
+import { Collection, JSCodeshift } from "jscodeshift"
+
+/**
+ * Gets the local name of Button imported from tapestry-react
+ * Returns null if Button is not imported from tapestry-react
+ * Handles both normal and renamed imports:
+ * - import { Button } from "@planningcenter/tapestry-react" -> "Button"
+ * - import { Button as TapestryButton } from "@planningcenter/tapestry-react" -> "TapestryButton"
+ */
+export function getTapestryReactImportName(
+  importName: string,
+  { source, j }: { j: JSCodeshift; source: Collection }
+): string | null {
+  let localName: string | null = null
+
+  source
+    .find(j.ImportDeclaration, {
+      source: { value: "@planningcenter/tapestry-react" },
+    })
+    .forEach((path) => {
+      const specifiers = path.value.specifiers || []
+
+      specifiers.forEach((spec) => {
+        if (
+          spec.type === "ImportSpecifier" &&
+          spec.imported?.name === importName
+        ) {
+          // spec.local.name is the local name (after "as" if renamed)
+          localName = (spec.local?.name as string) || importName
+        }
+      })
+    })
+
+  return localName
+}

package/src/components/shared/transformConfig.test.ts

@@ -0,0 +1,288 @@
+import jscodeshift, { JSXElement } from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import {
+  andConditions,
+  hasAttribute,
+  hasAttributeValue,
+  orConditions,
+} from "./transformConfig"
+
+const j = jscodeshift.withParser("tsx")
+
+// Helper function to create a JSX element for testing
+function createJSXElement(attributes: string): JSXElement {
+  const code = `<Button${attributes}>Content</Button>`
+  const ast = j(code)
+  return ast.find(j.JSXElement).get().value as JSXElement
+}
+
+describe("transformConfig", () => {
+  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)
+    })
+  })
+
+  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)
+    })
+  })
+
+  describe("andConditions", () => {
+    it("should return true when all conditions are met", () => {
+      const condition = andConditions(
+        hasAttribute("href"),
+        hasAttributeValue("target", "_blank")
+      )
+      const element = createJSXElement(' href="/test" target="_blank"')
+
+      expect(condition(element)).toBe(true)
+    })
+
+    it("should return false when one condition fails", () => {
+      const condition = andConditions(
+        hasAttribute("href"),
+        hasAttributeValue("target", "_blank")
+      )
+      const element = createJSXElement(' href="/test" target="_self"')
+
+      expect(condition(element)).toBe(false)
+    })
+
+    it("should return false when all conditions fail", () => {
+      const condition = andConditions(
+        hasAttribute("href"),
+        hasAttributeValue("target", "_blank")
+      )
+      const element = createJSXElement(' className="test"')
+
+      expect(condition(element)).toBe(false)
+    })
+
+    it("should handle single condition", () => {
+      const condition = andConditions(hasAttribute("disabled"))
+      const element = createJSXElement(" disabled")
+
+      expect(condition(element)).toBe(true)
+    })
+
+    it("should handle empty conditions (return true)", () => {
+      const condition = andConditions()
+      const element = createJSXElement("")
+
+      expect(condition(element)).toBe(true)
+    })
+
+    it("should handle complex combinations", () => {
+      const condition = andConditions(
+        hasAttribute("href"),
+        hasAttribute("className"),
+        hasAttributeValue("role", "button")
+      )
+      const element = createJSXElement(
+        ' href="/test" className="btn" role="button"'
+      )
+
+      expect(condition(element)).toBe(true)
+    })
+  })
+
+  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)
+    })
+  })
+
+  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/transformConfig.ts

@@ -0,0 +1,79 @@
+import { JSXElement } from "jscodeshift"
+
+/**
+ * Condition function that determines whether a JSX element should be transformed
+ */
+export type TransformCondition = (element: JSXElement) => boolean
+
+/**
+ * Configuration for a component transformation
+ */
+export interface ComponentTransformConfig {
+  /** 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
+}
+
+/**
+ * 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
+    )
+  }
+}
+
+/**
+ * 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
+    )
+  }
+}
+
+/**
+ * Helper function to combine multiple conditions with AND logic
+ */
+export function andConditions(
+  ...conditions: TransformCondition[]
+): TransformCondition {
+  return (element: JSXElement) =>
+    conditions.every((condition) => condition(element))
+}
+
+/**
+ * Helper function to combine multiple conditions with OR logic
+ */
+export function orConditions(
+  ...conditions: TransformCondition[]
+): TransformCondition {
+  return (element: JSXElement) =>
+    conditions.some((condition) => condition(element))
+}