@planningcenter/tapestry-migration-cli 3.1.0-rc.6 → 3.1.0-rc.7

package/src/components/input/transforms/removeAsInput.test.ts

@@ -0,0 +1,139 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeAsInput"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  const api = {
+    j,
+    jscodeshift: j,
+    report: () => {},
+    stats: () => {},
+  }
+  const result = transform(fileInfo, api, {})
+  return result as string | null
+}
+
+describe("removeAsInput transform", () => {
+  describe("basic transformation", () => {
+    it("should remove as='input' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('as="input"')
+    })
+
+    it('should remove as="input" from Input with other props', () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as="input" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('as="input"')
+    })
+
+    it("should preserve Input without as prop", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with as='textarea'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as="textarea" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect other components", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input as="input" />
+              <input as="input" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).toContain('<input as="input" />')
+    })
+
+    it("should handle expression syntax as={'input'}", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as={"input"} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      if (result) {
+        expect(result).toContain("<Input />")
+        expect(result).not.toContain('as={"input"}')
+      } else {
+        expect(input).toContain('as={"input"}')
+      }
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

package/src/components/input/transforms/removeAsInput.ts

@@ -0,0 +1,20 @@
+import { Transform } from "jscodeshift"
+
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(
+    transformableInput,
+    hasAttributeValue("as", "input")
+  ),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) =>
+    removeAttribute("as", { element, j, source }),
+})
+
+export default transform

package/src/components/input/transforms/removeDuplicateKeys.test.ts

@@ -0,0 +1,302 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeDuplicateKeys"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("removeDuplicateKeys transform", () => {
+  describe("Input elements with duplicate attributes", () => {
+    it("should remove duplicate attributes from Input elements", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Input kind="primary" disabled kind="secondary">Save</Input>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("Save")
+    })
+
+    it("should handle multiple Input elements with duplicates", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <Input kind="primary" size="large" kind="secondary">Save</Input>
+              <Input disabled loading disabled>Cancel</Input>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain('size="large"')
+
+      expect(result).toContain("<Input disabled loading>")
+    })
+
+    it("should preserve first occurrence of duplicate attributes", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Input onClick={handleFirst} aria-label="First" onClick={handleSecond} aria-label="Second">Click</Input>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("onClick={handleFirst}")
+      expect(result).not.toContain("onClick={handleSecond}")
+      expect(result).toContain('aria-label="First"')
+      expect(result).not.toContain('aria-label="Second"')
+    })
+  })
+
+  describe("Input elements without duplicate attributes", () => {
+    it("should return null when no duplicates exist", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Input kind="primary" size="large" disabled>Save</Input>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull() // No changes needed
+    })
+
+    it("should return null for Input with no attributes", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Input>Save</Input>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("import handling", () => {
+    it("should only process files that import Input from tapestry-react", () => {
+      const source = `
+        import { Input } from "some-other-library"
+
+        export function TestComponent() {
+          return <Input kind="primary" kind="secondary">Save</Input>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull() // Should not process non-tapestry Inputs
+    })
+
+    it("should handle aliased Input imports", () => {
+      const source = `
+        import { Input as TapestryInput } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TapestryInput kind="primary" disabled kind="secondary">Save</TapestryInput>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("<TapestryInput")
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain("</TapestryInput>")
+    })
+
+    it("should handle renamed imports", () => {
+      const source = `
+        import { Input as PrimaryInput } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <PrimaryInput size="large" onClick={handler} size="small">Click</PrimaryInput>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('size="large"')
+      expect(result).not.toContain('size="small"')
+    })
+  })
+
+  describe("mixed elements", () => {
+    it("should only process Input elements, not other elements", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <Input kind="primary" kind="secondary">Save</Input>
+              <div className="container" className="wrapper">Content</div>
+              <span role="button" role="link">Text</span>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+
+      // Input duplicates should be removed
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+
+      // Other elements should remain unchanged (duplicates preserved)
+      expect(result).toContain('className="container"')
+      expect(result).toContain('className="wrapper"')
+      expect(result).toContain('role="button"')
+      expect(result).toContain('role="link"')
+    })
+
+    it("should process multiple Input elements independently", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <form>
+              <Input type="submit" kind="primary" type="button">Submit</Input>
+              <Input disabled loading disabled>Loading</Input>
+              <Input size="small">Small</Input>
+            </form>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+
+      // First input: should keep first 'type'
+      expect(result).toContain('type="submit"')
+      expect(result).not.toContain('type="button"')
+
+      expect(result).toContain("<Input disabled loading>")
+
+      // Third input: should remain unchanged
+      expect(result).toContain('size="small"')
+    })
+  })
+
+  describe("complex JSX scenarios", () => {
+    it("should handle nested Input elements", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <div className="toolbar">
+                <Input kind="primary" disabled kind="secondary">
+                  Save
+                </Input>
+              </div>
+              <Input size="large" onClick={handler} size="small">
+                Cancel
+              </Input>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain('size="large"')
+      expect(result).not.toContain('size="small"')
+    })
+
+    it("should handle Input elements with children and complex attributes", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Input
+              kind="primary"
+              onClick={() => console.log('first')}
+              className="btn-primary"
+              kind="secondary"
+              onClick={() => console.log('second')}
+              data-testid="save-input"
+            >
+              <span>Save Changes</span>
+            </Input>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain("onClick={() => console.log('first')}")
+      expect(result).not.toContain("onClick={() => console.log('second')}")
+      expect(result).toContain('data-testid="save-input"')
+      expect(result).toContain("<span>Save Changes</span>")
+    })
+  })
+
+  describe("self-closing Input elements", () => {
+    it("should handle self-closing Input elements with duplicates", () => {
+      const source = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Input kind="primary" disabled kind="secondary" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("/>")
+    })
+  })
+})

package/src/components/input/transforms/removeDuplicateKeys.ts

@@ -0,0 +1,10 @@
+import { removeDuplicateKeys } from "../../shared/actions/removeDuplicateKeys"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+export default attributeTransformFactory({
+  condition: transformableInput,
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: removeDuplicateKeys,
+})