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

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

@@ -0,0 +1,160 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeTypeText"
+
+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("removeTypeText transform", () => {
+  describe("basic transformation", () => {
+    it("should preserve Input without type", () => {
+      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 type='email'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="email" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with type='number'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="number" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should remove type='text' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('type="text"')
+    })
+
+    it("should remove type='text' from Input with other props", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" value={searchTerm} placeholder="Search" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).not.toContain('type="text"')
+      expect(result).toContain("value={searchTerm}")
+      expect(result).toContain('placeholder="Search"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("multiple inputs", () => {
+    it("should handle mixed Input usage", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="text" />
+              <Input type="email" />
+              <Input type="text" onChange={handleChange} />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Input type="email" />')
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('type="text"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect HTML input elements", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="text" />
+              <input type="text" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).toContain('<input type="text" />')
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

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

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

@@ -0,0 +1,198 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./sizeMapping"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("sizeMapping transform", () => {
+  describe("size value transformations", () => {
+    it("should transform xs to md", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input size="xs" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="xs"')
+      expect(result).toContain('Size "xs" was mapped to "md"')
+    })
+
+    it("should transform sm to md", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input size="sm" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="sm"')
+      expect(result).toContain('Size "sm" was mapped to "md"')
+    })
+
+    it("should transform xl to lg", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input size="xl" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="lg"')
+      expect(result).not.toContain('size="xl"')
+      expect(result).toContain('Size "xl" was mapped to "lg"')
+    })
+
+    it('should transform size={"sm"} expression container', () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input size={"sm"} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('Size "sm" was mapped to "md"')
+    })
+
+    it("should not transform already valid sizes", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input size="md" label="Medium" />
+      <Input size="lg" label="Large" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('size="lg"')
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Input without size prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform expression values (variables)", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const size = "sm"
+  return <Input size={size} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("size={size}")
+      expect(result).not.toContain("Size")
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Input, Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button size="sm">Small button</Button>
+      <Input size="md" label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="sm"')
+      expect(result).toContain('size="md"')
+    })
+
+    it("should handle multiple inputs with different sizes", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input size="xs" label="Extra small" />
+      <Input size="sm" label="Small" />
+      <Input size="md" label="Medium" />
+      <Input size="xl" label="Extra large" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="xs"')
+      expect(result).not.toContain('size="sm"')
+      expect(result).not.toContain('size="xl"')
+      const sizeMappingMatches = result.match(/Size ".*" was mapped to/g)
+      expect(sizeMappingMatches).toHaveLength(3)
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      size="sm"
+      label="Name"
+      placeholder="Enter name"
+      disabled
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('placeholder="Enter name"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+    })
+  })
+})

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

@@ -0,0 +1,17 @@
+import { Transform } from "jscodeshift"
+
+import { sizeMappingFactory } from "../../shared/transformFactories/sizeMappingFactory"
+import { transformableInput } from "../transformableInput"
+
+const transform: Transform = sizeMappingFactory({
+  condition: transformableInput,
+  sizeMapping: {
+    sm: "md",
+    xl: "lg",
+    xs: "md",
+  },
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

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

@@ -0,0 +1,236 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import pipeline from "../index"
+import transform from "./skipRenderSideProps"
+
+const j = jscodeshift.withParser("tsx")
+
+const SKIP_COMMENT =
+  "TODO: tapestry-migration (migration): Automatic migration skipped: Input uses renderLeft/renderRight props which have no equivalent in the new API. Migrate this Input manually."
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("skipRenderSideProps transform", () => {
+  describe("inputs that should be skipped", () => {
+    it("should add skip comment to Input with renderLeft", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input renderLeft={<Icon />} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain(SKIP_COMMENT)
+    })
+
+    it("should add skip comment to Input with renderRight", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input renderRight={<Button />} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain(SKIP_COMMENT)
+    })
+
+    it("should add skip comment to Input with both renderLeft and renderRight", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input renderLeft={<Icon />} renderRight={<Button />} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain(SKIP_COMMENT)
+    })
+
+    it("should add skip comment for each Input that has renderLeft/renderRight", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input renderLeft={<Icon />} label="First" />
+      <Input renderRight={<Button />} label="Second" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      const matches = result?.match(/Automatic migration skipped/g)
+      expect(matches).toHaveLength(2)
+    })
+
+    it("should preserve all props on skipped Input", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      renderLeft={<Icon />}
+      label="Name"
+      size="lg"
+      state="error"
+      onChange={handleChange}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(SKIP_COMMENT)
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('size="lg"')
+      expect(result).toContain('state="error"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("inputs that should NOT be skipped", () => {
+    it("should return null for Input without renderLeft or renderRight", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should return null for Input with other props but no render side props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input label="Name" size="lg" state="error" onChange={handleChange} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("mixed files", () => {
+    it("should only flag Inputs with renderLeft/renderRight in a mixed file", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input renderLeft={<Icon />} label="With render" />
+      <Input label="Without render" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(SKIP_COMMENT)
+      const matches = result?.match(/Automatic migration skipped/g)
+      expect(matches).toHaveLength(1)
+    })
+
+    it("should not affect other components with renderLeft prop", () => {
+      const input = `
+import { Input, Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button renderLeft={<Icon />}>Click</Button>
+      <Input label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("other transforms are bypassed for skipped inputs", () => {
+    it("should not migrate the import when all Inputs have renderLeft/renderRight", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input renderLeft={<Icon />} label="Name" size="lg" state="error" />
+}
+      `.trim()
+
+      // Run the full pipeline via the index transform
+      const fileInfo = { path: "test.tsx", source: input }
+      const result = pipeline(
+        fileInfo,
+        { j, jscodeshift: j, report: () => {}, stats: () => {} },
+        {}
+      ) as string | null
+
+      // Import stays on tapestry-react since Input was skipped
+      expect(result).toContain("@planningcenter/tapestry-react")
+      expect(result).not.toContain('@planningcenter/tapestry"')
+      // Size and state are NOT migrated
+      expect(result).toContain('size="lg"')
+      expect(result).toContain('state="error"')
+      // Skip comment is present
+      expect(result).toContain("Automatic migration skipped")
+    })
+
+    it("should migrate non-renderSide Inputs while skipping renderSide ones", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input renderLeft={<Icon />} label="Skip me" size="sm" />
+      <Input label="Migrate me" size="sm" />
+    </div>
+  )
+}
+      `.trim()
+
+      const fileInfo = { path: "test.tsx", source: input }
+      const result = pipeline(
+        fileInfo,
+        { j, jscodeshift: j, report: () => {}, stats: () => {} },
+        {}
+      ) as string | null
+
+      expect(result).not.toBeNull()
+      // The skipped Input keeps size="sm"
+      expect(result).toContain('size="sm"')
+      // The migrated Input has size="md"
+      expect(result).toContain('size="md"')
+      // Import moves to tapestry (because at least one Input was migrated)
+      expect(result).toContain('@planningcenter/tapestry"')
+    })
+  })
+})

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

@@ -0,0 +1,27 @@
+import { Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: orConditions(
+    hasAttribute("renderLeft"),
+    hasAttribute("renderRight")
+  ),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    addComment({
+      element,
+      j,
+      scope: "migration",
+      source,
+      text: "Automatic migration skipped: Input uses renderLeft/renderRight props which have no equivalent in the new API. Migrate this Input manually.",
+    })
+    return true
+  },
+})
+
+export default transform