@planningcenter/tapestry-migration-cli 2.2.0-rc.5 → 2.2.0

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

@@ -0,0 +1,642 @@
+import jscodeshift, { StringLiteral } from "jscodeshift"
+import {
+  ImportSpecifier,
+  JSXAttribute,
+  JSXElement,
+  JSXIdentifier,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { createWrapper } from "./createWrapper"
+
+const j = jscodeshift.withParser("tsx")
+
+function createSource(code: string) {
+  return j(code)
+}
+
+function createElementFromCode(code: string) {
+  const source = createSource(`<div>${code}</div>`)
+  const element = source.find(j.JSXElement).at(0).get().value.children?.[0]
+  return element
+}
+
+describe("createWrapper", () => {
+  describe("basic wrapper creation", () => {
+    it("should wrap element with simple wrapper", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      expect(result.type).toBe("JSXElement")
+      expect((result.openingElement.name as JSXIdentifier).name).toBe("Tooltip")
+      expect((result.closingElement?.name as JSXIdentifier)?.name).toBe(
+        "Tooltip"
+      )
+      expect(result.children).toHaveLength(1)
+      const wrappedElement = result.children?.[0] as JSXElement
+      expect(wrappedElement.type).toBe("JSXElement")
+      expect((wrappedElement.openingElement.name as JSXIdentifier).name).toBe(
+        "Button"
+      )
+
+      // Check that import was added
+      const imports = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(imports).toHaveLength(1)
+      expect(imports.at(0).get().value.specifiers?.[0].imported?.name).toBe(
+        "Tooltip"
+      )
+    })
+
+    it("should wrap element with wrapper props", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const wrapperProps = [
+        j.jsxAttribute(j.jsxIdentifier("title"), j.stringLiteral("Click me")),
+        j.jsxAttribute(j.jsxIdentifier("placement"), j.stringLiteral("top")),
+      ]
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+        wrapperProps,
+      })
+
+      expect(result.openingElement.attributes).toHaveLength(2)
+
+      const titleAttr = result.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "title"
+      ) as JSXAttribute
+      expect((titleAttr?.value as StringLiteral)?.value).toBe("Click me")
+
+      const placementAttr = result.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "placement"
+      ) as JSXAttribute
+      expect((placementAttr?.value as StringLiteral)?.value).toBe("top")
+    })
+
+    it("should handle spread props", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const wrapperProps = [
+        j.jsxSpreadAttribute(j.identifier("tooltipProps")),
+        j.jsxAttribute(j.jsxIdentifier("title"), j.stringLiteral("Click me")),
+      ]
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+        wrapperProps,
+      })
+
+      expect(result.openingElement.attributes).toHaveLength(2)
+      expect(result.openingElement.attributes?.[0].type).toBe(
+        "JSXSpreadAttribute"
+      )
+      expect(result.openingElement.attributes?.[1].type).toBe("JSXAttribute")
+    })
+  })
+
+  describe("import handling", () => {
+    it("should add import when wrapper not already imported", () => {
+      const source = createSource(
+        'import { Button } from "@planningcenter/tapestry"'
+      )
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      expect((result.openingElement.name as JSXIdentifier).name).toBe("Tooltip")
+
+      // Should merge with existing import
+      const imports = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(imports).toHaveLength(1)
+      expect(imports.at(0).get().value.specifiers).toHaveLength(2)
+
+      const specifierNames = imports
+        .at(0)
+        .get()
+        .value.specifiers?.map((spec: ImportSpecifier) =>
+          spec.type === "ImportSpecifier" ? spec.imported?.name : null
+        )
+      expect(specifierNames).toContain("Button")
+      expect(specifierNames).toContain("Tooltip")
+    })
+
+    it("should use existing import when wrapper already imported", () => {
+      const source = createSource(
+        'import { Button, Tooltip } from "@planningcenter/tapestry"'
+      )
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      expect((result.openingElement.name as JSXIdentifier).name).toBe("Tooltip")
+
+      // Should not modify existing import
+      const imports = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(imports).toHaveLength(1)
+      expect(imports.at(0).get().value.specifiers).toHaveLength(2)
+    })
+
+    it("should handle import conflicts with auto-generated alias", () => {
+      const source = createSource(`
+        import { Tooltip } from "@some/other-package"
+        import { Button } from "@planningcenter/tapestry"
+      `)
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      expect((result.openingElement.name as JSXIdentifier).name).toBe(
+        "TRTooltip"
+      )
+      expect((result.closingElement?.name as JSXIdentifier)?.name).toBe(
+        "TRTooltip"
+      )
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      const tooltipSpec = tapestryImport
+        .at(0)
+        .get()
+        .value.specifiers?.find(
+          (spec: ImportSpecifier) =>
+            spec.type === "ImportSpecifier" && spec.imported?.name === "Tooltip"
+        ) as ImportSpecifier
+      expect(tooltipSpec?.local?.name).toBe("TRTooltip")
+    })
+
+    it("should handle import conflicts with custom alias", () => {
+      const source = createSource(`
+        import { Tooltip } from "@some/other-package"
+        import { Button } from "@planningcenter/tapestry"
+      `)
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const result = createWrapper({
+        conflictAlias: "TapestryTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      expect((result.openingElement.name as JSXIdentifier).name).toBe(
+        "TapestryTooltip"
+      )
+      expect((result.closingElement?.name as JSXIdentifier)?.name).toBe(
+        "TapestryTooltip"
+      )
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      const tooltipSpec = tapestryImport
+        .at(0)
+        .get()
+        .value.specifiers?.find(
+          (spec: ImportSpecifier) =>
+            spec.type === "ImportSpecifier" && spec.imported?.name === "Tooltip"
+        ) as ImportSpecifier
+      expect(tooltipSpec?.local?.name).toBe("TapestryTooltip")
+    })
+  })
+
+  describe("element preservation", () => {
+    it("should preserve element structure", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode(
+        '<Button variant="primary" onClick={handleClick}>Save</Button>'
+      )
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      const wrappedButton = result.children?.[0] as JSXElement
+      expect((wrappedButton?.openingElement.name as JSXIdentifier).name).toBe(
+        "Button"
+      )
+      expect(wrappedButton?.openingElement.attributes).toHaveLength(2)
+
+      const variantAttr = wrappedButton?.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "variant"
+      ) as JSXAttribute
+      expect((variantAttr?.value as StringLiteral)?.value).toBe("primary")
+
+      const onClickAttr = wrappedButton?.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "onClick"
+      ) as JSXAttribute
+      expect(onClickAttr?.value?.type).toBe("JSXExpressionContainer")
+    })
+
+    it("should preserve self-closing elements", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode('<Button variant="primary" />')
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      const wrappedButton = result.children?.[0] as JSXElement
+      expect((wrappedButton?.openingElement.name as JSXIdentifier).name).toBe(
+        "Button"
+      )
+      expect(wrappedButton?.openingElement.selfClosing).toBe(true)
+      expect(wrappedButton?.closingElement).toBeNull()
+    })
+
+    it("should preserve complex nested elements", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode(
+        '<Button><Icon name="save" /><span>Save Changes</span></Button>'
+      )
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      const wrappedButton = result.children?.[0] as JSXElement
+      expect(wrappedButton?.type).toBe("JSXElement")
+      expect((wrappedButton?.openingElement.name as JSXIdentifier).name).toBe(
+        "Button"
+      )
+
+      // Check that the button has children
+      expect(wrappedButton?.children).toBeDefined()
+      expect(Array.isArray(wrappedButton?.children)).toBe(true)
+      expect(wrappedButton?.children?.length).toBeGreaterThan(0)
+
+      const iconElement = wrappedButton?.children?.find(
+        (child) =>
+          child?.type === "JSXElement" &&
+          (child.openingElement?.name as JSXIdentifier)?.name === "Icon"
+      )
+      expect(iconElement).toBeDefined()
+
+      const spanElement = wrappedButton?.children?.find(
+        (child) =>
+          child?.type === "JSXElement" &&
+          (child.openingElement?.name as JSXIdentifier)?.name === "span"
+      )
+      expect(spanElement).toBeDefined()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle empty wrapperProps", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+        wrapperProps: [],
+      })
+
+      expect(result.openingElement.attributes).toHaveLength(0)
+    })
+
+    it("should handle undefined wrapperProps", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      expect(result.openingElement.attributes).toHaveLength(0)
+    })
+
+    it("should create proper JSX structure", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      // Verify the JSX structure is valid
+      expect(result.type).toBe("JSXElement")
+      expect(result.openingElement.type).toBe("JSXOpeningElement")
+      expect(result.closingElement?.type).toBe("JSXClosingElement")
+      expect(result.openingElement.selfClosing).toBe(false)
+      expect(result.children).toHaveLength(1)
+    })
+
+    it("should not add parentheses around wrapped elements", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      // Check that the output doesn't contain parentheses around the Button
+      const result = source.toSource()
+      expect(result).not.toContain("(<Button>Save</Button>)")
+      expect(result).not.toContain("(<Button")
+      expect(result).not.toContain("Button>)")
+    })
+  })
+
+  describe("key attribute handling", () => {
+    it("should move key attribute from element to wrapper", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode(
+        '<Button key="test-key">Save</Button>'
+      )
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      // Wrapper should have the key attribute
+      const keyAttr = result.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "key"
+      ) as JSXAttribute
+      expect(keyAttr).toBeDefined()
+      expect((keyAttr?.value as StringLiteral)?.value).toBe("test-key")
+
+      // Inner element should not have key attribute
+      const innerElement = result.children?.[0] as JSXElement
+      const innerKeyAttr = innerElement.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "key"
+      )
+      expect(innerKeyAttr).toBeUndefined()
+    })
+
+    it("should move key attribute and preserve wrapper props", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode(
+        '<Button key="item-1">Save</Button>'
+      )
+
+      const wrapperProps = [
+        j.jsxAttribute(j.jsxIdentifier("title"), j.stringLiteral("Click me")),
+        j.jsxAttribute(j.jsxIdentifier("placement"), j.stringLiteral("top")),
+      ]
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+        wrapperProps,
+      })
+
+      expect(result.openingElement.attributes).toHaveLength(3)
+
+      // Key should be first
+      const keyAttr = result.openingElement.attributes?.[0] as JSXAttribute
+      expect((keyAttr.name as JSXIdentifier)?.name).toBe("key")
+      expect((keyAttr?.value as StringLiteral)?.value).toBe("item-1")
+
+      // Other props should follow
+      const titleAttr = result.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "title"
+      ) as JSXAttribute
+      expect((titleAttr?.value as StringLiteral)?.value).toBe("Click me")
+    })
+
+    it("should handle key attribute with JSX expression", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode(
+        "<Button key={item.id}>Save</Button>"
+      )
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      const keyAttr = result.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "key"
+      ) as JSXAttribute
+      expect(keyAttr).toBeDefined()
+      expect(keyAttr.value?.type).toBe("JSXExpressionContainer")
+    })
+
+    it("should preserve other attributes when moving key", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode(
+        '<Button key="btn-1" variant="primary" disabled onClick={handler}>Save</Button>'
+      )
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      // Wrapper should have key
+      const wrapperKeyAttr = result.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "key"
+      )
+      expect(wrapperKeyAttr).toBeDefined()
+
+      // Inner element should have other attributes but not key
+      const innerElement = result.children?.[0] as JSXElement
+      expect(innerElement.openingElement.attributes).toHaveLength(3)
+
+      const variantAttr = innerElement.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "variant"
+      )
+      expect(variantAttr).toBeDefined()
+
+      const disabledAttr = innerElement.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "disabled"
+      )
+      expect(disabledAttr).toBeDefined()
+
+      const onClickAttr = innerElement.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "onClick"
+      )
+      expect(onClickAttr).toBeDefined()
+    })
+
+    it("should work normally when no key attribute exists", () => {
+      const source = createSource('import React from "react"')
+      const element = createElementFromCode(
+        '<Button variant="primary">Save</Button>'
+      )
+
+      const result = createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      // Wrapper should not have key attribute
+      const wrapperKeyAttr = result.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "key"
+      )
+      expect(wrapperKeyAttr).toBeUndefined()
+
+      // Inner element should preserve its attributes
+      const innerElement = result.children?.[0] as JSXElement
+      expect(innerElement.openingElement.attributes).toHaveLength(1)
+
+      const variantAttr = innerElement.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          (attr.name as JSXIdentifier)?.name === "variant"
+      )
+      expect(variantAttr).toBeDefined()
+    })
+
+    it("should generate correct source code with key attribute", () => {
+      const source = createSource(`
+        import React from "react"
+        const Test = () => <Button key="test">Save</Button>
+      `)
+
+      // Find the Button element that's actually in the source
+      const element = source
+        .find(j.JSXElement, {
+          openingElement: { name: { name: "Button" } },
+        })
+        .at(0)
+        .get().value
+
+      createWrapper({
+        conflictAlias: "TRTooltip",
+        element,
+        j,
+        source,
+        wrapperName: "Tooltip",
+        wrapperPackage: "@planningcenter/tapestry",
+      })
+
+      const result = source.toSource()
+      expect(result).toContain('<Tooltip key="test">')
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).not.toContain('<Button key="test">')
+    })
+  })
+})

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

@@ -0,0 +1,70 @@
+import {
+  Collection,
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  JSXSpreadAttribute,
+} from "jscodeshift"
+
+import { addImport } from "../transformFactories/helpers/manageImports"
+import { getAttribute } from "./getAttribute"
+
+export function createWrapper({
+  conflictAlias,
+  element,
+  j,
+  source,
+  wrapperName,
+  wrapperPackage,
+  wrapperProps = [],
+}: {
+  conflictAlias: string
+  element: JSXElement
+  j: JSCodeshift
+  source: Collection
+  wrapperName: string
+  wrapperPackage: string
+  wrapperProps?: (JSXAttribute | JSXSpreadAttribute)[]
+}): JSXElement {
+  const actualWrapperName = addImport({
+    component: wrapperName,
+    conflictAlias,
+    j,
+    pkg: wrapperPackage,
+    source,
+  })
+
+  const keyAttribute = getAttribute({ element, name: "key" })
+  const cleanAttributes = (element.openingElement.attributes || []).filter(
+    (attr) => !(attr.type === "JSXAttribute" && attr.name.name === "key")
+  )
+
+  const cleanElement = j.jsxElement(
+    j.jsxOpeningElement(
+      element.openingElement.name,
+      cleanAttributes,
+      element.openingElement.selfClosing
+    ),
+    element.closingElement,
+    element.children
+  )
+
+  const wrapperElement = j.jsxElement(
+    j.jsxOpeningElement(
+      j.jsxIdentifier(actualWrapperName),
+      keyAttribute ? [keyAttribute, ...wrapperProps] : wrapperProps,
+      false
+    ),
+    j.jsxClosingElement(j.jsxIdentifier(actualWrapperName)),
+    [cleanElement]
+  )
+
+  source
+    .find(j.JSXElement)
+    .filter((path) => path.value === element)
+    .forEach((path) => {
+      path.replace(wrapperElement)
+    })
+
+  return wrapperElement
+}