@planningcenter/tapestry-migration-cli 3.1.0-rc.2 → 3.1.0-rc.20

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="email" kind="primary" type="text">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="email"')
+      expect(result).not.toContain('type="text"')
+
+      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,
+})

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

@@ -0,0 +1,352 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeInputBox"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("removeInputBox transform", () => {
+  describe("basic unwrap", () => {
+    it("removes InputBox wrapper and promotes Input child", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("InputBox")
+      expect(result).toContain("<Input")
+    })
+  })
+
+  describe("aliased import", () => {
+    it("handles aliased Input imports", () => {
+      const input = `
+import { Input as TapInput } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <TapInput.InputBox>
+        <TapInput id="name" value={name} />
+      </TapInput.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("InputBox")
+      expect(result).toContain("<TapInput")
+    })
+  })
+
+  describe("InputBox has props", () => {
+    it("adds TODO to Input child and does not unwrap when InputBox has a single prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox size="sm">
+        <Input id="name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("InputBox")
+      expect(result).toContain("TODO: tapestry-migration (removeInputBox)")
+      expect(result).toContain(
+        "Tapestry doesn't support InputBox passing props to children (size)"
+      )
+    })
+
+    it("lists all props in the TODO comment when InputBox has multiple props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox size="sm" spacing={1}>
+        <Input id="name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("InputBox")
+      expect(result).toContain("size, spacing")
+    })
+
+    it("does not add TODO when Input has renderLeft/renderRight (not a convertible child)", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox size="sm">
+        <Input id="name" renderLeft={<Icon />} value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("InputBox with multiple children", () => {
+    it("adds TODO to Input child and does not unwrap when InputBox has multiple non-whitespace children", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" value={name} />
+        <Text>helper</Text>
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("InputBox")
+      expect(result).toContain("TODO: tapestry-migration (removeInputBox)")
+      expect(result).toContain("multiple children")
+    })
+
+    it("returns null when InputBox has multiple children but none are convertible Input", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Select value={val} />
+        <Text>helper</Text>
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("renderLeft/renderRight child with no props → no change", () => {
+    it("returns null when the single Input child has renderLeft", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" renderLeft={<Icon />} value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when the single Input child has renderRight", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" renderRight={<Icon />} value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("non-Input child only → no change", () => {
+    it("returns null when InputBox contains only a non-Input child", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Select value={val} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when InputBox contains a JSX expression as its only child", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        {condition && <Input id="name" value={name} />}
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when InputBox has no non-whitespace children", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("root-level InputBox", () => {
+    it("unwraps root-level InputBox with single convertible Input child", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function NameInput() {
+  return (
+    <Input.InputBox>
+      <Input id="name" value={name} />
+    </Input.InputBox>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("Input.InputBox")
+      expect(result).toContain('<Input id="name"')
+    })
+  })
+
+  describe("not from tapestry-react → no change", () => {
+    it("returns null when Input is not imported from tapestry-react", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when no Input import exists at all", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button label="Click" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("integration with mergeInputLabel pipeline", () => {
+    it("after removeInputBox runs, Input is a direct sibling of InputLabel so mergeInputLabel can merge them", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-name">Name</Input.InputLabel>
+      <Input.InputBox>
+        <Input id="input-name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("InputBox")
+      expect(result).toContain("<Input.InputLabel")
+      expect(result).toContain("<Input")
+    })
+  })
+})