@planningcenter/tapestry-migration-cli 2.8.0-rc.13 → 2.8.0-rc.15

package/src/components/radio/transforms/moveRadioImport.test.ts

@@ -0,0 +1,152 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveRadioImport"
+
+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("moveRadioImport transform", () => {
+  describe("import migration", () => {
+    it("should change import from tapestry-react to tapestry", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Radio } from "@planningcenter/tapestry"'
+      )
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+
+    it("should handle multiple imports", () => {
+      const input = `
+import { Button, Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Radio label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Radio } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle mixed imports", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Radio label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Radio } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Click me</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle already migrated imports", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry"
+
+function Test() {
+  return <Radio label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Radio } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle no imports", () => {
+      const input = `
+function Test() {
+  return <div>No imports</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should preserve other attributes", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Radio 
+      label="Test" 
+      checked 
+      disabled 
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Radio } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('label="Test"')
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+    })
+  })
+})

package/src/components/radio/transforms/moveRadioImport.ts

@@ -0,0 +1,13 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform: Transform = componentTransformFactory({
+  condition: () => true,
+  fromComponent: "Radio",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Radio",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform

package/src/components/radio/transforms/setDefaultSize.test.ts

@@ -0,0 +1,287 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./setDefaultSize"
+
+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("setDefaultSize transform", () => {
+  describe("setting default size", () => {
+    it("should set default size to 'xs' when size prop is missing", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio label="Test radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="xs"')
+    })
+
+    it("should set default size to 'xs' for multiple radios without size", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Radio label="First" />
+      <Radio label="Second" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      const sizeMatches = result.match(/size="xs"/g)
+      expect(sizeMatches).toHaveLength(2)
+    })
+
+    it("should not set default size when size prop already exists", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio size="md" label="Test radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+    })
+
+    it("should not set default size when size prop is an expression", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const size = "md"
+  return <Radio size={size} label="Test radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("size={size}")
+    })
+  })
+
+  describe("andConditions logic", () => {
+    it("should only add default size when BOTH conditions are met: no size attribute AND no spread props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio label="Test radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="xs"')
+    })
+
+    it("should not add default size when first condition fails: has size attribute (even without spread props)", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio size="md" label="Test radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+    })
+
+    it("should not add default size when second condition fails: has spread props (even without explicit size)", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const props = { onChange: handleChange }
+  return <Radio {...props} label="Test radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("{...props}")
+      expect(result).not.toContain('size="xs"')
+    })
+
+    it("should not add default size when BOTH conditions fail: has size attribute AND has spread props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const props = { onChange: handleChange }
+  return <Radio size="md" {...props} label="Test radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain("{...props}")
+    })
+  })
+
+  describe("spread props handling", () => {
+    it("should not set default size when spread props are present", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const props = { onChange: handleChange }
+  return <Radio {...props} label="Test radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("{...props}")
+      expect(result).not.toContain('size="xs"')
+    })
+
+    it("should not set default size when multiple spread props are present", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const baseProps = { onChange: handleChange }
+  const styleProps = { className: "radio" }
+  return <Radio {...baseProps} {...styleProps} label="Test radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+      expect(result).not.toContain('size="xs"')
+    })
+
+    it("should not set default size when spread props are present even without explicit size", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const props = { label: "Test", checked: true }
+  return <Radio {...props} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("{...props}")
+      expect(result).not.toContain('size="xs"')
+    })
+
+    it("should not set default size when spread props contain size", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const props = { size: "md", label: "Test" }
+  return <Radio {...props} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("{...props}")
+      expect(result).not.toContain('size="xs"')
+    })
+
+    it("should handle mix of radios with and without spread props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const props = { onChange: handleChange }
+  return (
+    <div>
+      <Radio {...props} label="With spread" />
+      <Radio label="Without spread" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("{...props}")
+      const sizeMatches = result.match(/size="xs"/g)
+      expect(sizeMatches).toHaveLength(1)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should preserve other props when setting default size", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Radio 
+      label="Test" 
+      checked 
+      disabled 
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="xs"')
+      expect(result).toContain('label="Test"')
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click me</Button>
+      <Radio label="Test radio" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>Click me</Button>")
+      expect(result).toContain('size="xs"')
+    })
+
+    it("should handle radio groups", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Radio name="group" label="Option 1" />
+      <Radio name="group" label="Option 2" />
+      <Radio name="group" label="Option 3" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      const sizeMatches = result.match(/size="xs"/g)
+      expect(sizeMatches).toHaveLength(3)
+    })
+  })
+})

package/src/components/radio/transforms/setDefaultSize.ts

@@ -0,0 +1,28 @@
+import { Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { hasSpreadProps } from "../../shared/actions/hasSpreadProps"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(
+    (element) => !hasAttribute("size")(element),
+    (element) => !hasSpreadProps(element)
+  ),
+  targetComponent: "Radio",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    addAttribute({
+      element,
+      j,
+      name: "size",
+      value: "xs",
+    })
+
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,201 @@
+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 lg to md", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio size="lg" label="Large radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="lg"')
+      expect(result).toContain('Size "lg" was mapped to "md"')
+    })
+
+    it('should transform size={"lg"} to md', () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio size={"lg"} label="Large radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('Size "lg" was mapped to "md"')
+    })
+
+    it("should transform xl to md", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio size="xl" label="Extra large radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="xl"')
+      expect(result).toContain('Size "xl" was mapped to "md"')
+    })
+
+    it("should transform xs to sm", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio size="xs" label="Extra small radio" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="sm"')
+      expect(result).not.toContain('size="xs"')
+      expect(result).toContain('Size "xs" was mapped to "sm"')
+    })
+
+    it("should not transform supported sizes", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Radio size="md" label="Medium radio" />
+      <Radio size="sm" label="Small radio" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('size="sm"')
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect radio without size prop", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio label="No size" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button size="lg">Large button</Button>
+      <Radio size="md" label="Medium radio" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="lg"')
+      expect(result).toContain('size="md"')
+    })
+
+    it("should handle multiple radios with different sizes", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Radio size="lg" label="Large" />
+      <Radio size="md" label="Medium" />
+      <Radio size="xl" label="Extra large" />
+      <Radio size="xs" label="Extra small" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('size="sm"')
+      expect(result).not.toContain('size="lg"')
+      expect(result).not.toContain('size="xl"')
+      expect(result).not.toContain('size="xs"')
+      // Should have 3 comments (one for lg->md, one for xl->md, one for xs->sm)
+      const sizeMappingMatches = result.match(/Size ".*" was mapped to/g)
+      expect(sizeMappingMatches).toHaveLength(3)
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Radio 
+      size="lg" 
+      label="Test" 
+      checked 
+      disabled 
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('label="Test"')
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+      expect(result).toContain('Size "lg" was mapped to "md"')
+    })
+
+    it("should not transform expression values", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const size = "lg"
+  return <Radio size={size} label="Variable size" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("size={size}")
+      expect(result).not.toContain("Size")
+    })
+  })
+})